From 506713f117f1245bc6ae39c1f5c2a2b7094d5192 Mon Sep 17 00:00:00 2001
From: Saleh Yusefnejad <msynk@outlook.com>
Date: Mon, 2 Sep 2024 18:30:30 +0330
Subject: [PATCH 01/38] feat(blazorui): improve BitText component #8473 (#8478)

---
 .../Inputs/TextField/BitTextFieldTests.cs     |  62 +++----
 .../Components/Utilities/Text/BitTextTests.cs | 140 +++++++--------
 .../BitTextVariant.cs => BitTypography.cs}    |   2 +-
 .../Inputs/TextField/BitTextField.razor       |  24 +--
 .../Inputs/TextField/BitTextField.razor.cs    |  14 +-
 .../Inputs/TextField/BitTextField.scss        |  98 +++++------
 .../Components/Utilities/Text/BitText.cs      |  51 +++---
 .../Components/Utilities/Text/BitText.scss    |  36 ++--
 .../Components/ComponentClassesTable.razor    |  22 +--
 .../Components/ComponentDemo.razor            |  10 +-
 .../Components/ComponentEnumsTable.razor      |  14 +-
 .../Components/ComponentExampleBox.razor      |   2 +-
 .../Components/ComponentParametersTable.razor |  20 +--
 .../Components/SideRail.razor                 |   2 +-
 .../Layouts/Header/BitHeaderDemo.razor        |   2 +-
 .../Layouts/Header/BitHeaderDemo.razor.cs     |   2 +-
 .../Layouts/Spacer/BitSpacerDemo.razor        |   2 +-
 .../Layouts/Spacer/BitSpacerDemo.razor.cs     |   2 +-
 .../Navs/DropMenu/BitDropMenuDemo.razor       |   2 +-
 .../DropMenu/BitDropMenuDemo.razor.samples.cs |   2 +-
 .../Utilities/Image/BitImageDemo.razor        |   4 +-
 .../Utilities/Overlay/BitOverlayDemo.razor    |   2 +-
 .../Utilities/Overlay/BitOverlayDemo.razor.cs |   2 +-
 .../Utilities/Text/BitTextDemo.razor          |  28 +--
 .../Utilities/Text/BitTextDemo.razor.cs       |  41 ++---
 .../Pages/GettingStartedPage.razor            |  32 ++--
 .../Pages/Home/BenefitsSection.razor          |  18 +-
 .../Pages/Home/ComponentsSection.razor        | 162 +++++++++---------
 .../Pages/Home/HeroSection.razor              |   4 +-
 .../Pages/Home/HomePage.razor                 |   4 +-
 .../Pages/Home/PopularComponents.razor        |   2 +-
 .../Pages/IconographyPage.razor               |  10 +-
 .../Pages/OverviewPage.razor                  |  26 +--
 .../Pages/ThemingPage.razor                   |  70 ++++----
 .../Shared/Footer.razor                       |   6 +-
 35 files changed, 458 insertions(+), 462 deletions(-)
 rename src/BlazorUI/Bit.BlazorUI/Components/{Utilities/Text/BitTextVariant.cs => BitTypography.cs} (88%)

diff --git a/src/BlazorUI/Bit.BlazorUI.Tests/Components/Inputs/TextField/BitTextFieldTests.cs b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Inputs/TextField/BitTextFieldTests.cs
index 086eb334af..4cefd8b55d 100644
--- a/src/BlazorUI/Bit.BlazorUI.Tests/Components/Inputs/TextField/BitTextFieldTests.cs
+++ b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Inputs/TextField/BitTextFieldTests.cs
@@ -22,8 +22,8 @@ public void BitTextFieldShouldTakeCorrectTypeAndVisual(bool isEnabled, bool isMu
             parameters.Add(p => p.Required, required);
         });
 
-        var bitTextField = component.Find(".bit-txt");
-        var textField = component.Find(".bit-txt-inp");
+        var bitTextField = component.Find(".bit-tfl");
+        var textField = component.Find(".bit-tfl-inp");
 
         if (isEnabled)
         {
@@ -37,7 +37,7 @@ public void BitTextFieldShouldTakeCorrectTypeAndVisual(bool isEnabled, bool isMu
         Assert.AreEqual(isMultiline ? "TEXTAREA" : "INPUT", textField.TagName);
 
         Assert.AreEqual(required, textField.HasAttribute("required"));
-        Assert.AreEqual(required, bitTextField.ClassList.Contains("bit-txt-req"));
+        Assert.AreEqual(required, bitTextField.ClassList.Contains("bit-tfl-req"));
     }
 
     [DataTestMethod,
@@ -52,7 +52,7 @@ public void BitTextFieldShouldTakeValue(bool isMultiline, string value)
             parameters.Add(p => p.IsMultiline, isMultiline);
         });
 
-        var bitTextField = component.Find(".bit-txt-inp");
+        var bitTextField = component.Find(".bit-tfl-inp");
 
         Assert.AreEqual(bitTextField.GetAttribute("value"), value);
     }
@@ -65,7 +65,7 @@ public void BitTextFieldLabel(string label)
             parameters.Add(p => p.Label, label);
         });
 
-        var bitTextFieldLabel = com.Find(".bit-txt-lbl").TextContent;
+        var bitTextFieldLabel = com.Find(".bit-tfl-lbl").TextContent;
 
         Assert.AreEqual(label, bitTextFieldLabel);
     }
@@ -86,7 +86,7 @@ public void BitTextFieldShouldTakeBaseParameters(int maxLength, bool isMultiline
             parameters.Add(p => p.ReadOnly, readOnly);
         });
 
-        var bitTextField = component.Find(".bit-txt-inp");
+        var bitTextField = component.Find(".bit-tfl-inp");
 
         Assert.IsTrue(bitTextField.HasAttribute("maxlength"));
         Assert.AreEqual(bitTextField.GetAttribute("maxlength"), maxLength.ToString());
@@ -105,7 +105,7 @@ public void BitTextFieldShouldAcceptIcon(string iconName)
             parameters.Add(p => p.IconName, iconName);
         });
 
-        var bitTextFieldIcon = component.Find(".bit-txt-inp + .bit-icon");
+        var bitTextFieldIcon = component.Find(".bit-tfl-inp + .bit-icon");
 
         Assert.IsTrue(bitTextFieldIcon.ClassList.Contains($"bit-icon--{iconName}"));
     }
@@ -123,9 +123,9 @@ public void BitTextFieldCanRevealPassword(bool isEnabled)
             parameters.Add(p => p.CanRevealPassword, true);
         });
 
-        var textField = component.Find(".bit-txt-inp");
-        var revealPasswordBtn = component.Find(".bit-txt-prb");
-        var revealPasswordIcon = component.Find(".bit-txt-prb > span > i");
+        var textField = component.Find(".bit-tfl-inp");
+        var revealPasswordBtn = component.Find(".bit-tfl-prb");
+        var revealPasswordIcon = component.Find(".bit-tfl-prb > span > i");
 
         Assert.AreEqual("password", textField.GetAttribute("type"));
         Assert.IsTrue(revealPasswordIcon.ClassList.Contains($"bit-icon--View"));
@@ -148,7 +148,7 @@ public void BitTextFieldTypeTest(BitTextFieldType type)
             parameters.Add(p => p.Type, type);
         });
 
-        var textField = component.Find(".bit-txt-inp");
+        var textField = component.Find(".bit-tfl-inp");
 
         Assert.AreEqual(type.GetDisplayName(toLowerDisplayName: true), textField.GetAttribute("type"));
     }
@@ -169,7 +169,7 @@ public void BitTextFieldMustRespondToTheClickEvent(bool isEnabled, bool isMultil
             parameters.Add(p => p.OnClick, () => currentCount++);
         });
 
-        var bitTextField = component.Find(".bit-txt-inp");
+        var bitTextField = component.Find(".bit-tfl-inp");
 
         bitTextField.Click();
 
@@ -196,7 +196,7 @@ public void BitTextFieldMustRespondToTheFocusEvent(bool isEnabled, bool isMultil
             parameters.Add(p => p.OnFocusOut, () => focusedOutValue++);
         });
 
-        var bitTextField = component.Find(".bit-txt-inp");
+        var bitTextField = component.Find(".bit-tfl-inp");
 
         bitTextField.Focus();
         Assert.AreEqual(isEnabled ? 1 : 0, focusedValue);
@@ -226,7 +226,7 @@ public void BitTextFieldMustRespondToTheKeyEvent(bool isEnabled, bool isMultilin
             parameters.Add(p => p.OnKeyDown, (KeyboardEventArgs e) => keyDownedValue = e.Key);
         });
 
-        var bitTextField = component.Find(".bit-txt-inp");
+        var bitTextField = component.Find(".bit-tfl-inp");
 
         bitTextField.KeyUp(keyUpValue);
         Assert.AreEqual(isEnabled ? keyUpValue : null, keyUppedValue);
@@ -251,7 +251,7 @@ public void BitTextFieldMustRespondToTheChangeEvent(bool isEnabled, bool isMulti
             parameters.Add(p => p.OnChange, () => currentCount++);
         });
 
-        var bitTextField = component.Find(".bit-txt-inp");
+        var bitTextField = component.Find(".bit-tfl-inp");
 
         bitTextField.Change("a");
 
@@ -266,7 +266,7 @@ public void BitTextFieldShowPrefix(string prefix)
             parameters.Add(p => p.Prefix, prefix);
         });
 
-        var bitTextFieldPrefix = component.Find(".bit-txt-pre > span");
+        var bitTextFieldPrefix = component.Find(".bit-tfl-pre > span");
         Assert.AreEqual(prefix, bitTextFieldPrefix.TextContent);
     }
 
@@ -278,7 +278,7 @@ public void BitTextFieldShowSuffix(string suffix)
             parameters.Add(p => p.Suffix, suffix);
         });
 
-        var bitTextFieldSuffix = component.Find(".bit-txt-suf > span");
+        var bitTextFieldSuffix = component.Find(".bit-tfl-suf > span");
         Assert.AreEqual(suffix, bitTextFieldSuffix.TextContent);
     }
 
@@ -294,7 +294,7 @@ public void BitTextFieldShouldTakeDefaultValue(bool isMultiline, string defaultV
             parameters.Add(p => p.IsMultiline, isMultiline);
         });
 
-        var bitTextField = component.Find(".bit-txt-inp");
+        var bitTextField = component.Find(".bit-tfl-inp");
 
         Assert.AreEqual(defaultValue, bitTextField.GetAttribute("value"));
     }
@@ -307,7 +307,7 @@ public void BitTextFieldShouldTakeDescription(string description)
             parameters.Add(p => p.Description, description);
         });
 
-        var bitTextFieldDescription = component.Find(".bit-txt-des > span");
+        var bitTextFieldDescription = component.Find(".bit-tfl-des > span");
         Assert.AreEqual(description, bitTextFieldDescription.TextContent);
     }
 
@@ -322,8 +322,8 @@ public void BitTextFieldShouldRespectUnderLineStyle(bool isUnderlined)
             parameters.Add(p => p.IsUnderlined, isUnderlined);
         });
 
-        var bitTextField = component.Find(".bit-txt");
-        Assert.AreEqual(isUnderlined, bitTextField.ClassList.Contains("bit-txt-und"));
+        var bitTextField = component.Find(".bit-tfl");
+        Assert.AreEqual(isUnderlined, bitTextField.ClassList.Contains("bit-tfl-und"));
     }
 
     [DataTestMethod,
@@ -337,8 +337,8 @@ public void BitTextFieldShouldRespectHasBorderStyle(bool hasBorder)
             parameters.Add(p => p.HasBorder, hasBorder);
         });
 
-        var bitTextField = component.Find(".bit-txt");
-        Assert.AreEqual(hasBorder is false, bitTextField.ClassList.Contains("bit-txt-nbd"));
+        var bitTextField = component.Find(".bit-tfl");
+        Assert.AreEqual(hasBorder is false, bitTextField.ClassList.Contains("bit-tfl-nbd"));
     }
 
     [DataTestMethod, DataRow(5)]
@@ -350,7 +350,7 @@ public void BitTextFieldShouldRespectRowsNumberWhenItIsMultiline(int rows)
             parameters.Add(p => p.Rows, rows);
         });
 
-        var input = component.Find(".bit-txt textarea");
+        var input = component.Find(".bit-tfl textarea");
         Assert.AreEqual(rows.ToString(), input.GetAttribute("rows"));
     }
 
@@ -366,8 +366,8 @@ public void BitTextFieldShouldRespectIsResizableWhenItIsMultiline(bool isResizab
             parameters.Add(p => p.IsResizable, isResizable);
         });
 
-        var bitTextField = component.Find(".bit-txt");
-        Assert.AreEqual(!isResizable, bitTextField.ClassList.Contains("bit-txt-mlf"));
+        var bitTextField = component.Find(".bit-tfl");
+        Assert.AreEqual(!isResizable, bitTextField.ClassList.Contains("bit-tfl-mlf"));
     }
 
     [DataTestMethod,
@@ -383,7 +383,7 @@ public void BitTextFieldAriaLabelTest(string ariaLabel, bool isMultiline)
         });
 
 
-        var input = component.Find(".bit-txt-inp");
+        var input = component.Find(".bit-tfl-inp");
 
         Assert.IsTrue(input.HasAttribute("aria-label"));
         Assert.AreEqual(input.GetAttribute("aria-label"), ariaLabel);
@@ -403,7 +403,7 @@ public void BitTextFieldAriaLabelledbyTest(bool isMultiline, string label)
             parameters.Add(p => p.IsMultiline, isMultiline);
         });
 
-        var input = component.Find(".bit-txt-inp");
+        var input = component.Find(".bit-tfl-inp");
         Assert.AreEqual(label.HasValue(), input.HasAttribute("aria-labelledby"));
     }
 
@@ -420,7 +420,7 @@ public void BitTextFieldAutoCompleteTest(string autoComplete)
             parameters.Add(p => p.AutoComplete, autoComplete);
         });
 
-        var input = component.Find(".bit-txt-inp");
+        var input = component.Find(".bit-tfl-inp");
 
         if (autoComplete.HasValue())
         {
@@ -607,7 +607,7 @@ public void BitTextFieldValidationInvalidCssClassTest(string value)
 
         var isInvalid = value != "test@bit.com";
 
-        var bitTextField = component.Find(".bit-txt");
+        var bitTextField = component.Find(".bit-tfl");
 
         Assert.IsFalse(bitTextField.ClassList.Contains("bit-inv"));
 
@@ -644,7 +644,7 @@ public void BitTextFieldTrimmedDefaultValueTest(string value)
             parameters.Add(p => p.DefaultValue, value);
         });
 
-        var bitTextField = component.Find(".bit-txt-inp");
+        var bitTextField = component.Find(".bit-tfl-inp");
         var trimmedValue = bitTextField.GetAttribute("value");
 
         Assert.AreEqual(value.Trim(), trimmedValue);
diff --git a/src/BlazorUI/Bit.BlazorUI.Tests/Components/Utilities/Text/BitTextTests.cs b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Utilities/Text/BitTextTests.cs
index ca1aefd534..dccf6534bc 100644
--- a/src/BlazorUI/Bit.BlazorUI.Tests/Components/Utilities/Text/BitTextTests.cs
+++ b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Utilities/Text/BitTextTests.cs
@@ -8,23 +8,23 @@ namespace Bit.BlazorUI.Tests.Components.Utilities.Text;
 [TestClass]
 public class BitTextTests : BunitTestContext
 {
-    private static readonly Dictionary<BitTextVariant, string> VariantMapping = new()
+    private static readonly Dictionary<BitTypography, string> VariantMapping = new()
     {
-        { BitTextVariant.Body1, "p" },
-        { BitTextVariant.Body2, "p" },
-        { BitTextVariant.Button, "span" },
-        { BitTextVariant.Caption1, "span" },
-        { BitTextVariant.Caption2, "span" },
-        { BitTextVariant.H1, "h1" },
-        { BitTextVariant.H2, "h2" },
-        { BitTextVariant.H3, "h3" },
-        { BitTextVariant.H4, "h4" },
-        { BitTextVariant.H5, "h5" },
-        { BitTextVariant.H6, "h6" },
-        { BitTextVariant.Inherit, "p" },
-        { BitTextVariant.Overline, "span" },
-        { BitTextVariant.Subtitle1, "h6" },
-        { BitTextVariant.Subtitle2, "h6" }
+        { BitTypography.Body1, "p" },
+        { BitTypography.Body2, "p" },
+        { BitTypography.Button, "span" },
+        { BitTypography.Caption1, "span" },
+        { BitTypography.Caption2, "span" },
+        { BitTypography.H1, "h1" },
+        { BitTypography.H2, "h2" },
+        { BitTypography.H3, "h3" },
+        { BitTypography.H4, "h4" },
+        { BitTypography.H5, "h5" },
+        { BitTypography.H6, "h6" },
+        { BitTypography.Inherit, "p" },
+        { BitTypography.Overline, "span" },
+        { BitTypography.Subtitle1, "h6" },
+        { BitTypography.Subtitle2, "h6" }
     };
 
     [DataTestMethod]
@@ -32,37 +32,37 @@ public void BitTextShouldRenderExpectedElement()
     {
         var component = RenderComponent<BitText>();
 
-        component.MarkupMatches(@"<h6 class=""bit-tpg bit-tpg-subtitle1"" id:ignore></h6>");
+        component.MarkupMatches(@"<h6 class=""bit-txt bit-txt-subtitle1"" id:ignore></h6>");
     }
 
     [DataTestMethod,
-         DataRow(BitTextVariant.H1),
-         DataRow(BitTextVariant.H2),
-         DataRow(BitTextVariant.H3),
-         DataRow(BitTextVariant.H4),
-         DataRow(BitTextVariant.H5),
-         DataRow(BitTextVariant.H6),
-         DataRow(BitTextVariant.Subtitle1),
-         DataRow(BitTextVariant.Subtitle2),
-         DataRow(BitTextVariant.Body1),
-         DataRow(BitTextVariant.Body2),
-         DataRow(BitTextVariant.Button),
-         DataRow(BitTextVariant.Caption1),
-         DataRow(BitTextVariant.Caption2),
-         DataRow(BitTextVariant.Overline),
-         DataRow(BitTextVariant.Inherit),
+         DataRow(BitTypography.H1),
+         DataRow(BitTypography.H2),
+         DataRow(BitTypography.H3),
+         DataRow(BitTypography.H4),
+         DataRow(BitTypography.H5),
+         DataRow(BitTypography.H6),
+         DataRow(BitTypography.Subtitle1),
+         DataRow(BitTypography.Subtitle2),
+         DataRow(BitTypography.Body1),
+         DataRow(BitTypography.Body2),
+         DataRow(BitTypography.Button),
+         DataRow(BitTypography.Caption1),
+         DataRow(BitTypography.Caption2),
+         DataRow(BitTypography.Overline),
+         DataRow(BitTypography.Inherit),
     ]
-    public void BitTextShouldRespectVariant(BitTextVariant variant)
+    public void BitTextShouldRespectVariant(BitTypography variant)
     {
         var component = RenderComponent<BitText>(parameters =>
         {
-            parameters.Add(p => p.Variant, variant);
+            parameters.Add(p => p.Typography, variant);
         });
 
         var el = VariantMapping[variant];
-        var cssClass = $"bit-tpg-{variant.ToString().ToLower(CultureInfo.InvariantCulture)}";
+        var cssClass = $"bit-txt-{variant.ToString().ToLower(CultureInfo.InvariantCulture)}";
 
-        component.MarkupMatches(@$"<{el} class=""bit-tpg {cssClass}"" id:ignore></{el}>");
+        component.MarkupMatches(@$"<{el} class=""bit-txt {cssClass}"" id:ignore></{el}>");
     }
 
     [DataTestMethod,
@@ -77,10 +77,10 @@ public void BitTextShouldRespectElement(string element)
             parameters.Add(p => p.Element, element);
         });
 
-        var defaultVariant = BitTextVariant.Subtitle1;
+        var defaultVariant = BitTypography.Subtitle1;
         var el = element is null ? VariantMapping[defaultVariant] : element;
 
-        component.MarkupMatches(@$"<{el} class=""bit-tpg bit-tpg-subtitle1"" id:ignore></{el}>");
+        component.MarkupMatches(@$"<{el} class=""bit-txt bit-txt-subtitle1"" id:ignore></{el}>");
 
     }
 
@@ -95,9 +95,9 @@ public void BitTextShouldRespectNoWrap(bool noWrap)
             parameters.Add(p => p.NoWrap, noWrap);
         });
 
-        var cssClass = noWrap ? " bit-tpg-nowrap" : null;
+        var cssClass = noWrap ? " bit-txt-nowrap" : null;
 
-        component.MarkupMatches(@$"<h6 class=""bit-tpg bit-tpg-subtitle1{cssClass}"" id:ignore></h6>");
+        component.MarkupMatches(@$"<h6 class=""bit-txt bit-txt-subtitle1{cssClass}"" id:ignore></h6>");
     }
 
     [DataTestMethod]
@@ -105,14 +105,14 @@ public void BitTextShouldRespectNoWrapChangingAfterRender()
     {
         var component = RenderComponent<BitText>();
 
-        component.MarkupMatches(@"<h6 class=""bit-tpg bit-tpg-subtitle1"" id:ignore></h6>");
+        component.MarkupMatches(@"<h6 class=""bit-txt bit-txt-subtitle1"" id:ignore></h6>");
 
         component.SetParametersAndRender(parameters =>
         {
             parameters.Add(p => p.NoWrap, true);
         });
 
-        component.MarkupMatches(@"<h6 class=""bit-tpg bit-tpg-subtitle1 bit-tpg-nowrap"" id:ignore></h6>");
+        component.MarkupMatches(@"<h6 class=""bit-txt bit-txt-subtitle1 bit-txt-nowrap"" id:ignore></h6>");
     }
 
     [DataTestMethod,
@@ -126,9 +126,9 @@ public void BitTextShouldRespectGutter(bool gutter)
             parameters.Add(p => p.Gutter, gutter);
         });
 
-        var cssClass = gutter ? " bit-tpg-gutter" : null;
+        var cssClass = gutter ? " bit-txt-gutter" : null;
 
-        component.MarkupMatches(@$"<h6 class=""bit-tpg bit-tpg-subtitle1{cssClass}"" id:ignore></h6>");
+        component.MarkupMatches(@$"<h6 class=""bit-txt bit-txt-subtitle1{cssClass}"" id:ignore></h6>");
     }
 
     [DataTestMethod]
@@ -136,14 +136,14 @@ public void BitTextShouldRespectGutterChangingAfterRender()
     {
         var component = RenderComponent<BitText>();
 
-        component.MarkupMatches(@"<h6 class=""bit-tpg bit-tpg-subtitle1"" id:ignore></h6>");
+        component.MarkupMatches(@"<h6 class=""bit-txt bit-txt-subtitle1"" id:ignore></h6>");
 
         component.SetParametersAndRender(parameters =>
         {
             parameters.Add(p => p.Gutter, true);
         });
 
-        component.MarkupMatches(@"<h6 class=""bit-tpg bit-tpg-subtitle1 bit-tpg-gutter"" id:ignore></h6>");
+        component.MarkupMatches(@"<h6 class=""bit-txt bit-txt-subtitle1 bit-txt-gutter"" id:ignore></h6>");
     }
 
     [DataTestMethod,
@@ -159,7 +159,7 @@ public void BitTextShouldRespectIsEnabled(bool isEnabled)
 
         var cssClass = isEnabled ? null : " bit-dis";
 
-        component.MarkupMatches(@$"<h6 class=""bit-tpg bit-tpg-subtitle1{cssClass}"" id:ignore></h6>");
+        component.MarkupMatches(@$"<h6 class=""bit-txt bit-txt-subtitle1{cssClass}"" id:ignore></h6>");
     }
 
     [DataTestMethod]
@@ -167,14 +167,14 @@ public void BitTextShouldRespectIsEnabledChangingAfterRender()
     {
         var component = RenderComponent<BitText>();
 
-        component.MarkupMatches(@"<h6 class=""bit-tpg bit-tpg-subtitle1"" id:ignore></h6>");
+        component.MarkupMatches(@"<h6 class=""bit-txt bit-txt-subtitle1"" id:ignore></h6>");
 
         component.SetParametersAndRender(parameters =>
         {
             parameters.Add(p => p.IsEnabled, false);
         });
 
-        component.MarkupMatches(@"<h6 class=""bit-tpg bit-tpg-subtitle1 bit-dis"" id:ignore></h6>");
+        component.MarkupMatches(@"<h6 class=""bit-txt bit-txt-subtitle1 bit-dis"" id:ignore></h6>");
     }
 
     [DataTestMethod,
@@ -191,11 +191,11 @@ public void BitTextShouldRespectStyle(string style)
 
         if (style.HasValue())
         {
-            component.MarkupMatches(@$"<h6 style=""{style}"" class=""bit-tpg bit-tpg-subtitle1"" id:ignore></h6>");
+            component.MarkupMatches(@$"<h6 style=""{style}"" class=""bit-txt bit-txt-subtitle1"" id:ignore></h6>");
         }
         else
         {
-            component.MarkupMatches(@"<h6 class=""bit-tpg bit-tpg-subtitle1"" id:ignore></h6>");
+            component.MarkupMatches(@"<h6 class=""bit-txt bit-txt-subtitle1"" id:ignore></h6>");
         }
     }
 
@@ -204,14 +204,14 @@ public void BitTextShouldRespectStyleChangingAfterRender()
     {
         var component = RenderComponent<BitText>();
 
-        component.MarkupMatches(@"<h6 class=""bit-tpg bit-tpg-subtitle1"" id:ignore></h6>");
+        component.MarkupMatches(@"<h6 class=""bit-txt bit-txt-subtitle1"" id:ignore></h6>");
 
         component.SetParametersAndRender(parameters =>
         {
             parameters.Add(p => p.Style, "padding: 1rem;");
         });
 
-        component.MarkupMatches(@$"<h6 style=""padding: 1rem;"" class=""bit-tpg bit-tpg-subtitle1"" id:ignore></h6>");
+        component.MarkupMatches(@$"<h6 style=""padding: 1rem;"" class=""bit-txt bit-txt-subtitle1"" id:ignore></h6>");
     }
 
 
@@ -228,7 +228,7 @@ public void BitTextShouldRespectClass(string @class)
 
         var cssClass = @class.HasValue() ? $" {@class}" : null;
 
-        component.MarkupMatches(@$"<h6 class=""bit-tpg bit-tpg-subtitle1{cssClass}"" id:ignore></h6>");
+        component.MarkupMatches(@$"<h6 class=""bit-txt bit-txt-subtitle1{cssClass}"" id:ignore></h6>");
     }
 
     [DataTestMethod]
@@ -236,14 +236,14 @@ public void BitTextShouldRespectClassChangingAfterRender()
     {
         var component = RenderComponent<BitText>();
 
-        component.MarkupMatches(@"<h6 class=""bit-tpg bit-tpg-subtitle1"" id:ignore></h6>");
+        component.MarkupMatches(@"<h6 class=""bit-txt bit-txt-subtitle1"" id:ignore></h6>");
 
         component.SetParametersAndRender(parameters =>
         {
             parameters.Add(p => p.Class, "test-class");
         });
 
-        component.MarkupMatches(@"<h6 class=""bit-tpg bit-tpg-subtitle1 test-class"" id:ignore></h6>");
+        component.MarkupMatches(@"<h6 class=""bit-txt bit-txt-subtitle1 test-class"" id:ignore></h6>");
     }
 
     [DataTestMethod,
@@ -259,7 +259,7 @@ public void BitTextShouldRespectId(string id)
 
         var expectedId = id.HasValue() ? id : component.Instance.UniqueId.ToString();
 
-        component.MarkupMatches(@$"<h6 id=""{expectedId}"" class=""bit-tpg bit-tpg-subtitle1""></h6>");
+        component.MarkupMatches(@$"<h6 id=""{expectedId}"" class=""bit-txt bit-txt-subtitle1""></h6>");
     }
 
     [DataTestMethod,
@@ -278,11 +278,11 @@ public void BitTextShouldRespectDir(BitDir? dir)
         if (dir.HasValue)
         {
             var cssClass = dir is BitDir.Rtl ? " bit-rtl" : null;
-            component.MarkupMatches(@$"<h6 dir=""{dir.Value.ToString().ToLower()}"" class=""bit-tpg bit-tpg-subtitle1{cssClass}"" id:ignore></h6>");
+            component.MarkupMatches(@$"<h6 dir=""{dir.Value.ToString().ToLower()}"" class=""bit-txt bit-txt-subtitle1{cssClass}"" id:ignore></h6>");
         }
         else
         {
-            component.MarkupMatches(@"<h6 class=""bit-tpg bit-tpg-subtitle1"" id:ignore></h6>");
+            component.MarkupMatches(@"<h6 class=""bit-txt bit-txt-subtitle1"" id:ignore></h6>");
         }
     }
 
@@ -291,14 +291,14 @@ public void BitTextShouldRespectDirChangingAfterRender()
     {
         var component = RenderComponent<BitText>();
 
-        component.MarkupMatches(@"<h6 class=""bit-tpg bit-tpg-subtitle1"" id:ignore></h6>");
+        component.MarkupMatches(@"<h6 class=""bit-txt bit-txt-subtitle1"" id:ignore></h6>");
 
         component.SetParametersAndRender(parameters =>
         {
             parameters.Add(p => p.Dir, BitDir.Ltr);
         });
 
-        component.MarkupMatches(@"<h6 dir=""ltr"" class=""bit-tpg bit-tpg-subtitle1"" id:ignore></h6>");
+        component.MarkupMatches(@"<h6 dir=""ltr"" class=""bit-txt bit-txt-subtitle1"" id:ignore></h6>");
     }
 
     [DataTestMethod,
@@ -316,13 +316,13 @@ public void BitTextShouldRespectVisibility(BitVisibility visibility)
         switch (visibility)
         {
             case BitVisibility.Visible:
-                component.MarkupMatches(@"<h6 class=""bit-tpg bit-tpg-subtitle1"" id:ignore></h6>");
+                component.MarkupMatches(@"<h6 class=""bit-txt bit-txt-subtitle1"" id:ignore></h6>");
                 break;
             case BitVisibility.Hidden:
-                component.MarkupMatches(@"<h6 style=""visibility: hidden;"" class=""bit-tpg bit-tpg-subtitle1"" id:ignore></h6>");
+                component.MarkupMatches(@"<h6 style=""visibility: hidden;"" class=""bit-txt bit-txt-subtitle1"" id:ignore></h6>");
                 break;
             case BitVisibility.Collapsed:
-                component.MarkupMatches(@"<h6 style=""display: none;"" class=""bit-tpg bit-tpg-subtitle1"" id:ignore></h6>");
+                component.MarkupMatches(@"<h6 style=""display: none;"" class=""bit-txt bit-txt-subtitle1"" id:ignore></h6>");
                 break;
         }
     }
@@ -332,14 +332,14 @@ public void BitTextShouldRespectVisibilityChangingAfterRender()
     {
         var component = RenderComponent<BitText>();
 
-        component.MarkupMatches(@"<h6 class=""bit-tpg bit-tpg-subtitle1"" id:ignore></h6>");
+        component.MarkupMatches(@"<h6 class=""bit-txt bit-txt-subtitle1"" id:ignore></h6>");
 
         component.SetParametersAndRender(parameters =>
         {
             parameters.Add(p => p.Visibility, BitVisibility.Collapsed);
         });
 
-        component.MarkupMatches(@"<h6 style=""display: none;"" class=""bit-tpg bit-tpg-subtitle1"" id:ignore></h6>");
+        component.MarkupMatches(@"<h6 style=""display: none;"" class=""bit-txt bit-txt-subtitle1"" id:ignore></h6>");
     }
 
     [DataTestMethod,
@@ -355,11 +355,11 @@ public void BitTextShouldRespectAriaLabel(string ariaLabel)
 
         if (ariaLabel.HasValue())
         {
-            component.MarkupMatches(@$"<h6 aria-label=""{ariaLabel}"" class=""bit-tpg bit-tpg-subtitle1"" id:ignore></h6>");
+            component.MarkupMatches(@$"<h6 aria-label=""{ariaLabel}"" class=""bit-txt bit-txt-subtitle1"" id:ignore></h6>");
         }
         else
         {
-            component.MarkupMatches(@"<h6 class=""bit-tpg bit-tpg-subtitle1"" id:ignore></h6>");
+            component.MarkupMatches(@"<h6 class=""bit-txt bit-txt-subtitle1"" id:ignore></h6>");
         }
     }
 
@@ -375,7 +375,7 @@ public void BitTextShouldRespectChildContent(string childContent)
             parameters.AddChildContent(childContent);
         });
 
-        component.MarkupMatches(@$"<h6 class=""bit-tpg bit-tpg-subtitle1"" id:ignore>{childContent}</h6>");
+        component.MarkupMatches(@$"<h6 class=""bit-txt bit-txt-subtitle1"" id:ignore>{childContent}</h6>");
     }
 
     [DataTestMethod]
@@ -383,6 +383,6 @@ public void BitTextShouldRespectHtmlAttributes()
     {
         var component = RenderComponent<BitTextHtmlAttributesTest>();
 
-        component.MarkupMatches(@"<h6 data-val-test=""bit"" class=""bit-tpg bit-tpg-subtitle1"" id:ignore>I'm a text</h6>");
+        component.MarkupMatches(@"<h6 data-val-test=""bit"" class=""bit-txt bit-txt-subtitle1"" id:ignore>I'm a text</h6>");
     }
 }
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Text/BitTextVariant.cs b/src/BlazorUI/Bit.BlazorUI/Components/BitTypography.cs
similarity index 88%
rename from src/BlazorUI/Bit.BlazorUI/Components/Utilities/Text/BitTextVariant.cs
rename to src/BlazorUI/Bit.BlazorUI/Components/BitTypography.cs
index eced8e497d..1d68490e82 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Text/BitTextVariant.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/BitTypography.cs
@@ -1,6 +1,6 @@
 namespace Bit.BlazorUI;
 
-public enum BitTextVariant
+public enum BitTypography
 {
     H1,
     H2,
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor
index 58e49736b8..7dfd26370c 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor
@@ -6,7 +6,7 @@
      style="@StyleBuilder.Value"
      class="@ClassBuilder.Value"
      dir="@Dir?.ToString().ToLower()">
-    <div style="@Styles?.InputWrapper" class="bit-txt-wrp @Classes?.InputWrapper">
+    <div style="@Styles?.InputWrapper" class="bit-tfl-wrp @Classes?.InputWrapper">
         @if (LabelTemplate is not null)
         {
             <label id="@_labelId" for="@_inputId">
@@ -16,21 +16,21 @@
         else if (Label.HasValue())
         {
             <label style="@Styles?.Label"
-                   class="bit-txt-lbl @Classes?.Label"
+                   class="bit-tfl-lbl @Classes?.Label"
                    id="@_labelId"
                    for="@_inputId">
                 @Label
             </label>
         }
 
-        <div style="@Styles?.FieldGroup" class="bit-txt-fgp @Classes?.FieldGroup">
+        <div style="@Styles?.FieldGroup" class="bit-tfl-fgp @Classes?.FieldGroup">
             @if (PrefixTemplate is not null)
             {
                 @PrefixTemplate
             }
             else if (Prefix.HasValue())
             {
-                <div style="@Styles?.PrefixContainer" class="bit-txt-pre @Classes?.PrefixContainer">
+                <div style="@Styles?.PrefixContainer" class="bit-tfl-pre @Classes?.PrefixContainer">
                     <span style="@Styles?.Prefix" class="@Classes?.Prefix">
                         @Prefix
                     </span>
@@ -59,7 +59,7 @@
                           placeholder="@Placeholder"
                           value="@CurrentValueAsString"
                           disabled=@(IsEnabled is false)
-                          class="bit-txt-inp @Classes?.Input"
+                          class="bit-tfl-inp @Classes?.Input"
                           aria-label="@AriaLabel"
                           aria-labelledby="@(Label.HasValue() || LabelTemplate is not null ? _labelId : null)"
                           aria-describedby="@(Description.HasValue() || DescriptionTemplate is not null ? _descriptionId : null)" />
@@ -87,7 +87,7 @@
                        autocomplete="@AutoComplete"
                        value="@CurrentValueAsString"
                        disabled=@(IsEnabled is false)
-                       class="bit-txt-inp @Classes?.Input"
+                       class="bit-tfl-inp @Classes?.Input"
                        aria-label="@AriaLabel"
                        aria-labelledby="@(Label.HasValue() || LabelTemplate is not null ? _labelId : null)"
                        aria-describedby="@(Description.HasValue() || DescriptionTemplate is not null ? _descriptionId : null)" />
@@ -97,14 +97,14 @@
             {
                 <button @onclick="ToggleRevealPassword"
                         style="@Styles?.RevealPassword"
-                        class="bit-txt-prb @Classes?.RevealPassword"
+                        class="bit-tfl-prb @Classes?.RevealPassword"
                         type="button"
                         aria-label="@RevealPasswordAriaLabel"
                         aria-pressed="@(_elementType == BitTextFieldType.Text ? "true" : "false")">
                     <span style="@Styles?.RevealPasswordIconContainer"
-                          class="bit-txt-rin @Classes?.RevealPasswordIconContainer">
+                          class="bit-tfl-rin @Classes?.RevealPasswordIconContainer">
                         <i style="@Styles?.RevealPasswordIcon"
-                           class="bit-txt-ric bit-icon bit-icon--@(_elementType == BitTextFieldType.Text ? "Hide3" : "View") @Classes?.RevealPasswordIcon"
+                           class="bit-tfl-ric bit-icon bit-icon--@(_elementType == BitTextFieldType.Text ? "Hide3" : "View") @Classes?.RevealPasswordIcon"
                            aria-hidden="true" />
                     </span>
                 </button>
@@ -113,7 +113,7 @@
             @if (IconName.HasValue())
             {
                 <i style="@Styles?.Icon"
-                   class="bit-txt-ico bit-icon bit-icon--@IconName @Classes?.Icon"
+                   class="bit-tfl-ico bit-icon bit-icon--@IconName @Classes?.Icon"
                    aria-hidden="true" />
             }
 
@@ -123,7 +123,7 @@
             }
             else if (Suffix.HasValue())
             {
-                <div style="@Styles?.SuffixContainer" class="bit-txt-suf @Classes?.SuffixContainer">
+                <div style="@Styles?.SuffixContainer" class="bit-tfl-suf @Classes?.SuffixContainer">
                     <span style="@Styles?.Suffix" class="@Classes?.Suffix">
                         @Suffix
                     </span>
@@ -135,7 +135,7 @@
     @if (Description.HasValue() || DescriptionTemplate is not null)
     {
         <span style="@Styles?.DescriptionContainer"
-              class="bit-txt-des @Classes?.DescriptionContainer"
+              class="bit-tfl-des @Classes?.DescriptionContainer"
               id="@_descriptionId">
             @if (DescriptionTemplate is not null)
             {
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor.cs
index a0dc7f1980..b992494295 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor.cs
@@ -187,25 +187,25 @@ public void ToggleRevealPassword()
 
 
 
-    protected override string RootElementClass => "bit-txt";
+    protected override string RootElementClass => "bit-tfl";
 
     protected override void RegisterCssClasses()
     {
         ClassBuilder.Register(() => Classes?.Root);
 
         ClassBuilder.Register(() => IsMultiline && Type == BitTextFieldType.Text
-                                    ? $"bit-txt-{(IsResizable ? "mln" : "mlf")}"
+                                    ? $"bit-tfl-{(IsResizable ? "mln" : "mlf")}"
                                     : string.Empty);
 
-        ClassBuilder.Register(() => IsEnabled && Required ? "bit-txt-req" : string.Empty);
+        ClassBuilder.Register(() => IsEnabled && Required ? "bit-tfl-req" : string.Empty);
 
-        ClassBuilder.Register(() => IsUnderlined ? "bit-txt-und" : string.Empty);
+        ClassBuilder.Register(() => IsUnderlined ? "bit-tfl-und" : string.Empty);
 
-        ClassBuilder.Register(() => HasBorder is false ? "bit-txt-nbd" : string.Empty);
+        ClassBuilder.Register(() => HasBorder is false ? "bit-tfl-nbd" : string.Empty);
 
-        ClassBuilder.Register(() => _hasFocus ? $"bit-txt-fcs {Classes?.Focused}" : string.Empty);
+        ClassBuilder.Register(() => _hasFocus ? $"bit-tfl-fcs {Classes?.Focused}" : string.Empty);
 
-        ClassBuilder.Register(() => Required && Label is null ? "bit-txt-rnl" : string.Empty);
+        ClassBuilder.Register(() => Required && Label is null ? "bit-tfl-rnl" : string.Empty);
     }
 
     protected override void RegisterCssStyles()
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.scss
index 0dd0a9a477..0562af4ce6 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.scss
@@ -1,6 +1,6 @@
 @import "../../../Styles/functions.scss";
 
-.bit-txt {
+.bit-tfl {
     margin: 0;
     padding: 0;
     box-shadow: none;
@@ -11,11 +11,11 @@
     font-family: $tg-font-family;
 
     &.bit-dis {
-        .bit-txt-lbl {
+        .bit-tfl-lbl {
             color: $clr-fg-dis;
         }
 
-        .bit-txt-fgp {
+        .bit-tfl-fgp {
             border: none;
             cursor: default;
             color: $clr-fg-dis;
@@ -23,30 +23,30 @@
             border: $shp-border-width $shp-border-style $clr-brd-dis;
         }
 
-        .bit-txt-inp {
+        .bit-tfl-inp {
             color: $clr-fg-dis;
         }
 
-        .bit-txt-pre,
-        .bit-txt-suf {
+        .bit-tfl-pre,
+        .bit-tfl-suf {
             color: $clr-fg-dis;
         }
 
-        &.bit-txt-und {
-            .bit-txt-wrp {
+        &.bit-tfl-und {
+            .bit-tfl-wrp {
                 width: 100%;
                 display: flex;
                 border-bottom: $shp-border-width $shp-border-style $clr-brd-dis;
             }
 
-            .bit-txt-lbl {
+            .bit-tfl-lbl {
                 height: spacing(4);
                 margin: 0 spacing(1) 0 0;
                 line-height: spacing(2.75);
                 padding: spacing(0.625) 0 spacing(0.625) spacing(1.5);
             }
 
-            .bit-txt-fgp {
+            .bit-tfl-fgp {
                 flex: 1 1 0;
                 border: none;
                 text-align: left;
@@ -55,18 +55,18 @@
     }
 
     &.bit-inv {
-        .bit-txt-fgp,
-        .bit-txt-wrp {
+        .bit-tfl-fgp,
+        .bit-tfl-wrp {
             border-color: $clr-err;
         }
 
-        &.bit-txt-fcs {
-            .bit-txt-fgp::after {
+        &.bit-tfl-fcs {
+            .bit-tfl-fgp::after {
                 border-color: $clr-err;
             }
 
-            &.bit-txt-und {
-                .bit-txt-wrp::after {
+            &.bit-tfl-und {
+                .bit-tfl-wrp::after {
                     border-color: $clr-err;
                 }
             }
@@ -74,7 +74,7 @@
     }
 }
 
-.bit-txt-lbl {
+.bit-tfl-lbl {
     margin: 0;
     display: block;
     box-shadow: none;
@@ -87,7 +87,7 @@
     color: $clr-fg-pri;
 }
 
-.bit-txt-fgp {
+.bit-tfl-fgp {
     margin: 0;
     padding: 0;
     cursor: text;
@@ -103,7 +103,7 @@
     border: $shp-border-width $shp-border-style $clr-brd-pri;
 }
 
-.bit-txt-inp {
+.bit-tfl-inp {
     margin: 0;
     outline: 0;
     width: 100%;
@@ -128,7 +128,7 @@
     }
 }
 
-.bit-txt-prb {
+.bit-tfl-prb {
     height: 100%;
     border: none;
     cursor: pointer;
@@ -147,37 +147,37 @@
     }
 }
 
-.bit-txt-rin {
+.bit-tfl-rin {
     display: flex;
     align-items: center;
     font-size: spacing(2);
     justify-content: center;
 }
 
-.bit-txt-ric {
+.bit-tfl-ric {
     color: $clr-pri;
 }
 
-.bit-txt-ico {
+.bit-tfl-ico {
     color: $clr-fg-pri;
 }
 
-.bit-txt-ric,
-.bit-txt-ico {
+.bit-tfl-ric,
+.bit-tfl-ico {
     width: spacing(4);
     text-align: center;
     font-size: spacing(2);
 }
 
-.bit-txt-des {
+.bit-tfl-des {
     span {
         font-size: spacing(1.25);
         color: $clr-fg-pri;
     }
 }
 
-.bit-txt-pre,
-.bit-txt-suf {
+.bit-tfl-pre,
+.bit-tfl-suf {
     height: 100%;
     display: flex;
     flex-shrink: 0;
@@ -194,14 +194,14 @@
     }
 }
 
-.bit-txt-mln {
-    .bit-txt-fgp {
+.bit-tfl-mln {
+    .bit-tfl-fgp {
         height: auto;
         align-items: stretch;
         min-height: spacing(7.5);
     }
 
-    textarea.bit-txt-inp {
+    textarea.bit-tfl-inp {
         flex-grow: 1;
         overflow: auto;
         min-height: inherit;
@@ -210,14 +210,14 @@
     }
 }
 
-.bit-txt-mlf {
-    .bit-txt-fgp {
+.bit-tfl-mlf {
+    .bit-tfl-fgp {
         height: auto;
         align-items: stretch;
         min-height: spacing(7.5);
     }
 
-    textarea.bit-txt-inp {
+    textarea.bit-tfl-inp {
         resize: none;
         flex-grow: 1;
         overflow: auto;
@@ -227,8 +227,8 @@
     }
 }
 
-.bit-txt-fcs {
-    .bit-txt-fgp::after {
+.bit-tfl-fcs {
+    .bit-tfl-fgp::after {
         content: "";
         position: absolute;
         pointer-events: none;
@@ -237,12 +237,12 @@
         border: spacing(0.25) $shp-border-style $clr-pri;
     }
 
-    &.bit-txt-und {
-        .bit-txt-fgp::after {
+    &.bit-tfl-und {
+        .bit-tfl-fgp::after {
             border: none;
         }
 
-        .bit-txt-wrp::after {
+        .bit-tfl-wrp::after {
             content: "";
             position: absolute;
             pointer-events: none;
@@ -252,37 +252,37 @@
     }
 }
 
-.bit-txt-und {
-    .bit-txt-wrp {
+.bit-tfl-und {
+    .bit-tfl-wrp {
         width: 100%;
         display: flex;
         border-bottom: $shp-border-width $shp-border-style $clr-brd-pri;
     }
 
-    .bit-txt-lbl {
+    .bit-tfl-lbl {
         height: spacing(4);
         margin: 0 spacing(1) 0 0;
         line-height: spacing(2.75);
         padding: spacing(0.625) 0 spacing(0.625) spacing(1.5);
     }
 
-    .bit-txt-fgp {
+    .bit-tfl-fgp {
         flex: 1 1 0;
         border: none;
         text-align: left;
     }
 }
 
-.bit-txt-req {
-    .bit-txt-lbl::after {
+.bit-tfl-req {
+    .bit-tfl-lbl::after {
         content: "*";
         color: $clr-req;
         margin-left: spacing(0.625);
     }
 }
 
-.bit-txt-rnl {
-    .bit-txt-fgp::before {
+.bit-tfl-rnl {
+    .bit-tfl-fgp::before {
         content: "*";
         position: absolute;
         top: spacing(-0.625);
@@ -291,8 +291,8 @@
     }
 }
 
-.bit-txt-nbd {
-    .bit-txt-fgp {
+.bit-tfl-nbd {
+    .bit-tfl-fgp {
         border: none;
     }
 }
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Text/BitText.cs b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Text/BitText.cs
index bd9df6c926..b6d730be4d 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Text/BitText.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Text/BitText.cs
@@ -29,30 +29,25 @@ public partial class BitText : BitComponentBase
     public bool NoWrap { get; set; }
 
     /// <summary>
-    /// The variant of the Text.
+    /// The typography of the Text.
     /// </summary>
     [Parameter, ResetClassBuilder]
-    public BitTextVariant Variant { get; set; } = BitTextVariant.Subtitle1;
+    public BitTypography? Typography { get; set; }
 
 
 
-    protected override string RootElementClass => "bit-tpg";
+    protected override string RootElementClass => "bit-txt";
 
     protected override void RegisterCssClasses()
     {
-        ClassBuilder.Register(() => $"bit-tpg-{Variant.ToString().ToLower(CultureInfo.InvariantCulture)}")
-                    .Register(() => NoWrap ? "bit-tpg-nowrap" : string.Empty)
-                    .Register(() => Gutter ? "bit-tpg-gutter" : string.Empty);
-    }
-
-    protected override async Task OnInitializedAsync()
-    {
-        await base.OnInitializedAsync();
+        ClassBuilder.Register(() => $"bit-txt-{(Typography ?? BitTypography.Subtitle1).ToString().ToLower(CultureInfo.InvariantCulture)}")
+                    .Register(() => NoWrap ? "bit-txt-nowrap" : string.Empty)
+                    .Register(() => Gutter ? "bit-txt-gutter" : string.Empty);
     }
 
     protected override void BuildRenderTree(RenderTreeBuilder builder)
     {
-        builder.OpenElement(0, Element ?? _VariantMapping[Variant]);
+        builder.OpenElement(0, Element ?? _VariantMapping[Typography ?? BitTypography.Subtitle1]);
         builder.AddMultipleAttributes(1, RuntimeHelpers.TypeCheck(HtmlAttributes));
         builder.AddAttribute(2, "id", _Id);
         builder.AddAttribute(3, "style", StyleBuilder.Value);
@@ -68,22 +63,22 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
 
 
 
-    protected static readonly Dictionary<BitTextVariant, string> _VariantMapping = new()
+    protected static readonly Dictionary<BitTypography, string> _VariantMapping = new()
     {
-        { BitTextVariant.H1, "h1" },
-        { BitTextVariant.H2, "h2" },
-        { BitTextVariant.H3, "h3" },
-        { BitTextVariant.H4, "h4" },
-        { BitTextVariant.H5, "h5" },
-        { BitTextVariant.H6, "h6" },
-        { BitTextVariant.Subtitle1, "h6" },
-        { BitTextVariant.Subtitle2, "h6" },
-        { BitTextVariant.Body1, "p" },
-        { BitTextVariant.Body2, "p" },
-        { BitTextVariant.Button, "span" },
-        { BitTextVariant.Caption1, "span" },
-        { BitTextVariant.Caption2, "span" },
-        { BitTextVariant.Overline, "span" },
-        { BitTextVariant.Inherit, "p" },
+        { BitTypography.H1, "h1" },
+        { BitTypography.H2, "h2" },
+        { BitTypography.H3, "h3" },
+        { BitTypography.H4, "h4" },
+        { BitTypography.H5, "h5" },
+        { BitTypography.H6, "h6" },
+        { BitTypography.Subtitle1, "h6" },
+        { BitTypography.Subtitle2, "h6" },
+        { BitTypography.Body1, "p" },
+        { BitTypography.Body2, "p" },
+        { BitTypography.Button, "span" },
+        { BitTypography.Caption1, "span" },
+        { BitTypography.Caption2, "span" },
+        { BitTypography.Overline, "span" },
+        { BitTypography.Inherit, "p" },
     };
 }
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Text/BitText.scss b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Text/BitText.scss
index 9db392567d..7c3ca023c5 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Text/BitText.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Text/BitText.scss
@@ -1,10 +1,10 @@
 @import "../../../Styles/functions.scss";
 
-.bit-tpg {
+.bit-txt {
     font-family: $tg-font-family;
 }
 
-.bit-tpg-h1 {
+.bit-txt-h1 {
     margin: $tg-h1-margin;
     font-size: $tg-h1-font-size;
     font-weight: $tg-h1-font-weight;
@@ -12,7 +12,7 @@
     letter-spacing: $tg-h1-letter-spacing;
 }
 
-.bit-tpg-h2 {
+.bit-txt-h2 {
     margin: $tg-h2-margin;
     font-size: $tg-h2-font-size;
     font-weight: $tg-h2-font-weight;
@@ -20,7 +20,7 @@
     letter-spacing: $tg-h2-letter-spacing;
 }
 
-.bit-tpg-h3 {
+.bit-txt-h3 {
     margin: $tg-h3-margin;
     font-size: $tg-h3-font-size;
     font-weight: $tg-h3-font-weight;
@@ -28,7 +28,7 @@
     letter-spacing: $tg-h3-letter-spacing;
 }
 
-.bit-tpg-h4 {
+.bit-txt-h4 {
     margin: $tg-h4-margin;
     font-size: $tg-h4-font-size;
     font-weight: $tg-h4-font-weight;
@@ -36,7 +36,7 @@
     letter-spacing: $tg-h4-letter-spacing;
 }
 
-.bit-tpg-h5 {
+.bit-txt-h5 {
     margin: $tg-h5-margin;
     font-size: $tg-h5-font-size;
     line-height: $tg-h5-line-height;
@@ -44,7 +44,7 @@
     letter-spacing: $tg-h5-letter-spacing;
 }
 
-.bit-tpg-h6 {
+.bit-txt-h6 {
     margin: $tg-h6-margin;
     font-size: $tg-h6-font-size;
     font-weight: $tg-h6-font-weight;
@@ -52,7 +52,7 @@
     letter-spacing: $tg-h6-letter-spacing;
 }
 
-.bit-tpg-subtitle1 {
+.bit-txt-subtitle1 {
     margin: $tg-subtitle1-margin;
     font-size: $tg-subtitle1-font-size;
     font-weight: $tg-subtitle1-font-weight;
@@ -60,7 +60,7 @@
     letter-spacing: $tg-subtitle1-letter-spacing;
 }
 
-.bit-tpg-subtitle2 {
+.bit-txt-subtitle2 {
     margin: $tg-subtitle2-margin;
     font-size: $tg-subtitle2-font-size;
     font-weight: $tg-subtitle2-font-weight;
@@ -68,7 +68,7 @@
     letter-spacing: $tg-subtitle2-letter-spacing;
 }
 
-.bit-tpg-body1 {
+.bit-txt-body1 {
     margin: $tg-body1-margin;
     font-size: $tg-body1-font-size;
     font-weight: $tg-body1-font-weight;
@@ -76,7 +76,7 @@
     letter-spacing: $tg-body1-letter-spacing;
 }
 
-.bit-tpg-body2 {
+.bit-txt-body2 {
     margin: $tg-body2-margin;
     font-size: $tg-body2-font-size;
     font-weight: $tg-body2-font-weight;
@@ -84,7 +84,7 @@
     letter-spacing: $tg-body2-letter-spacing;
 }
 
-.bit-tpg-button {
+.bit-txt-button {
     margin: $tg-button-margin;
     display: $tg-button-display;
     font-size: $tg-button-font-size;
@@ -94,7 +94,7 @@
     text-transform: $tg-button-text-transform;
 }
 
-.bit-tpg-caption1 {
+.bit-txt-caption1 {
     margin: $tg-caption1-margin;
     font-size: $tg-caption1-font-size;
     font-weight: $tg-caption1-font-weight;
@@ -102,7 +102,7 @@
     letter-spacing: $tg-caption1-letter-spacing;
 }
 
-.bit-tpg-caption2 {
+.bit-txt-caption2 {
     margin: $tg-caption2-margin;
     font-size: $tg-caption2-font-size;
     font-weight: $tg-caption2-font-weight;
@@ -110,7 +110,7 @@
     letter-spacing: $tg-caption2-letter-spacing;
 }
 
-.bit-tpg-overline {
+.bit-txt-overline {
     margin: $tg-overline-margin;
     display: $tg-overline-display;
     font-size: $tg-overline-font-size;
@@ -120,7 +120,7 @@
     text-transform: $tg-overline-text-transform;
 }
 
-.bit-tpg-inherit {
+.bit-txt-inherit {
     margin: $tg-inherit-margin;
     font-size: $tg-inherit-font-size;
     font-family: $tg-inherit-font-family;
@@ -130,12 +130,12 @@
 }
 
 
-.bit-tpg-nowrap {
+.bit-txt-nowrap {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 }
 
-.bit-tpg-gutter {
+.bit-txt-gutter {
     margin-bottom: $tg-gutter-size;
 }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentClassesTable.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentClassesTable.razor
index bd7b4da63a..a826f5e2a8 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentClassesTable.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentClassesTable.razor
@@ -1,33 +1,33 @@
 @foreach (var subClass in Classes)
 {
     <div id="@subClass.Id" class="sec-con">
-        <BitText Variant="BitTextVariant.H6" Gutter Class="subclass-title"><b>@subClass.Title</b> properties</BitText>
-        <BitText Variant="BitTextVariant.Subtitle2" Gutter>@subClass.Description</BitText>
+        <BitText Typography="BitTypography.H6" Gutter Class="subclass-title"><b>@subClass.Title</b> properties</BitText>
+        <BitText Typography="BitTypography.Subtitle2" Gutter>@subClass.Description</BitText>
         <table class="table-view params-table">
             <tr class="th-row">
-                <th class="th-cell"><BitText Variant="BitTextVariant.Subtitle1">Name</BitText></th>
-                <th class="th-cell"><BitText Variant="BitTextVariant.Subtitle1">Type</BitText></th>
-                <th class="th-cell"><BitText Variant="BitTextVariant.Subtitle1">Default value</BitText></th>
-                <th class="th-cell"><BitText Variant="BitTextVariant.Subtitle1">Description</BitText></th>
+                <th class="th-cell"><BitText Typography="BitTypography.Subtitle1">Name</BitText></th>
+                <th class="th-cell"><BitText Typography="BitTypography.Subtitle1">Type</BitText></th>
+                <th class="th-cell"><BitText Typography="BitTypography.Subtitle1">Default value</BitText></th>
+                <th class="th-cell"><BitText Typography="BitTypography.Subtitle1">Description</BitText></th>
             </tr>
             @foreach (var subParam in subClass.Parameters)
             {
                 <tr class="tdata-row">
-                    <td class="td-cell"><BitText Variant="BitTextVariant.Caption1">@subParam.Name</BitText></td>
+                    <td class="td-cell"><BitText Typography="BitTypography.Caption1">@subParam.Name</BitText></td>
                     <td class="td-cell">
                         @if (subParam.LinkType == LinkType.Link)
                         {
                             <BitLink Href="@subParam.Href">
-                                <BitText Variant="BitTextVariant.Caption1">@subParam.Type</BitText>
+                                <BitText Typography="BitTypography.Caption1">@subParam.Type</BitText>
                             </BitLink>
                         }
                         else
                         {
-                            <BitText Variant="BitTextVariant.Caption1">@subParam.Type</BitText>
+                            <BitText Typography="BitTypography.Caption1">@subParam.Type</BitText>
                         }
                     </td>
-                    <td class="td-cell"><BitText Variant="BitTextVariant.Caption1">@subParam.DefaultValue</BitText></td>
-                    <td class="td-cell"><BitText Variant="BitTextVariant.Caption1">@subParam.Description</BitText></td>
+                    <td class="td-cell"><BitText Typography="BitTypography.Caption1">@subParam.DefaultValue</BitText></td>
+                    <td class="td-cell"><BitText Typography="BitTypography.Caption1">@subParam.Description</BitText></td>
                 </tr>
             }
         </table>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentDemo.razor
index ba911c9720..c038d6aa28 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentDemo.razor
@@ -2,25 +2,25 @@
 
 <div class="example-page">
     <div class="page-container example">
-        <BitText Variant="BitTextVariant.H3" Class="title">@ComponentName</BitText>
+        <BitText Typography="BitTypography.H3" Class="title">@ComponentName</BitText>
         <section id="overview-section" class="page-section">
-            <BitText Variant="BitTextVariant.Subtitle1">
+            <BitText Typography="BitTypography.Subtitle1">
                 @ComponentDescription
             </BitText>
         </section>
         @if (Notes.HasValue())
         {
             <section id="notes-section" class="page-section">
-                <BitText Variant="BitTextVariant.H4" Class="subtitle">Notes</BitText>
+                <BitText Typography="BitTypography.H4" Class="subtitle">Notes</BitText>
                 @Notes
             </section>
         }
         <section id="usage-section" class="page-section">
-            <BitText Variant="BitTextVariant.H4" Class="subtitle">Usage</BitText>
+            <BitText Typography="BitTypography.H4" Class="subtitle">Usage</BitText>
             @ChildContent
         </section>
         <section id="implementation-section" class="page-section">
-            <BitText Variant="BitTextVariant.H4" Class="subtitle">Implementation</BitText>
+            <BitText Typography="BitTypography.H4" Class="subtitle">Implementation</BitText>
 
             <ComponentParametersTable Name="@($"Bit{ComponentName}")" Parameters="ComponentParameters" />
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentEnumsTable.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentEnumsTable.razor
index 71b4d10799..7704c63941 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentEnumsTable.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentEnumsTable.razor
@@ -1,19 +1,19 @@
 @foreach (var subEnum in Enums)
 {
     <div id="@subEnum.Id" class="sec-con">
-        <BitText Variant="BitTextVariant.H6" Gutter Class="subenum-title"><b>@subEnum.Name</b> enum</BitText>
+        <BitText Typography="BitTypography.H6" Gutter Class="subenum-title"><b>@subEnum.Name</b> enum</BitText>
         <table class="table-view enum-table">
             <tr class="th-row">
-                <th class="th-cell"><BitText Variant="BitTextVariant.Subtitle1">Name</BitText></th>
-                <th class="th-cell"><BitText Variant="BitTextVariant.Subtitle1">Value</BitText></th>
-                <th class="th-cell"><BitText Variant="BitTextVariant.Subtitle1">Description</BitText></th>
+                <th class="th-cell"><BitText Typography="BitTypography.Subtitle1">Name</BitText></th>
+                <th class="th-cell"><BitText Typography="BitTypography.Subtitle1">Value</BitText></th>
+                <th class="th-cell"><BitText Typography="BitTypography.Subtitle1">Description</BitText></th>
             </tr>
             @foreach (var item in subEnum.Items)
             {
                 <tr class="tdata-row">
-                    <td class="td-cell"><BitText Variant="BitTextVariant.Caption1">@item.Name</BitText></td>
-                    <td class="td-cell"><BitText Variant="BitTextVariant.Caption1">@item.Value</BitText></td>
-                    <td class="td-cell"><BitText Variant="BitTextVariant.Caption1">@item.Description</BitText></td>
+                    <td class="td-cell"><BitText Typography="BitTypography.Caption1">@item.Name</BitText></td>
+                    <td class="td-cell"><BitText Typography="BitTypography.Caption1">@item.Value</BitText></td>
+                    <td class="td-cell"><BitText Typography="BitTypography.Caption1">@item.Description</BitText></td>
                 </tr>
             }
         </table>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentExampleBox.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentExampleBox.razor
index b89803e8be..99b74e2c0d 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentExampleBox.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentExampleBox.razor
@@ -2,7 +2,7 @@
 
 <section class="box" id="@Id">
     <div class="box-header">
-        <BitText Variant="BitTextVariant.H5" Class="section-title">@Title</BitText>
+        <BitText Typography="BitTypography.H5" Class="section-title">@Title</BitText>
         <div class="header-btn-group">
             <BitActionButton OnClick="() => showCode = !showCode"
                              Class="@($"header-btn show-code{(showCode ? " code-shown":"")}")"
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentParametersTable.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentParametersTable.razor
index 0e0897d3cb..fdfc696499 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentParametersTable.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentParametersTable.razor
@@ -1,29 +1,29 @@
-<BitText Variant="BitTextVariant.H6" Gutter><b>@Name</b> @NameSuffix</BitText>
+<BitText Typography="BitTypography.H6" Gutter><b>@Name</b> @NameSuffix</BitText>
 <table class="table-view params-table">
     <tr class="th-row">
-        <th class="th-cell"><BitText Variant="BitTextVariant.Subtitle1">Name</BitText></th>
-        <th class="th-cell"><BitText Variant="BitTextVariant.Subtitle1">Type</BitText></th>
-        <th class="th-cell"><BitText Variant="BitTextVariant.Subtitle1">Default value</BitText></th>
-        <th class="th-cell"><BitText Variant="BitTextVariant.Subtitle1">Description</BitText></th>
+        <th class="th-cell"><BitText Typography="BitTypography.Subtitle1">Name</BitText></th>
+        <th class="th-cell"><BitText Typography="BitTypography.Subtitle1">Type</BitText></th>
+        <th class="th-cell"><BitText Typography="BitTypography.Subtitle1">Default value</BitText></th>
+        <th class="th-cell"><BitText Typography="BitTypography.Subtitle1">Description</BitText></th>
     </tr>
     @foreach (var param in Parameters)
     {
         <tr class="tdata-row">
-            <td class="td-cell"><BitText Variant="BitTextVariant.Caption1">@param.Name</BitText></td>
+            <td class="td-cell"><BitText Typography="BitTypography.Caption1">@param.Name</BitText></td>
             <td class="td-cell">
                 @if (param.LinkType == LinkType.Link)
                 {
                     <BitLink Href="@param.Href">
-                        <BitText Variant="BitTextVariant.Caption1">@param.Type</BitText>
+                        <BitText Typography="BitTypography.Caption1">@param.Type</BitText>
                     </BitLink>
                 }
                 else
                 {
-                    <BitText Variant="BitTextVariant.Caption1">@param.Type</BitText>
+                    <BitText Typography="BitTypography.Caption1">@param.Type</BitText>
                 }
             </td>
-            <td class="td-cell"><BitText Variant="BitTextVariant.Caption1">@param.DefaultValue</BitText></td>
-            <td class="td-cell"><BitText Variant="BitTextVariant.Caption1">@param.Description</BitText></td>
+            <td class="td-cell"><BitText Typography="BitTypography.Caption1">@param.DefaultValue</BitText></td>
+            <td class="td-cell"><BitText Typography="BitTypography.Caption1">@param.Description</BitText></td>
         </tr>
     }
 </table>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/SideRail.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/SideRail.razor
index 91c43dd604..98e5418ffc 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/SideRail.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/SideRail.razor
@@ -8,7 +8,7 @@
         {
             <li>
                 <BitLink OnClick="@(() => ScrollToItem(item))" NoUnderline>
-                    <BitText Variant="BitTextVariant.Body2">
+                    <BitText Typography="BitTypography.Body2">
                         @item.Title
                     </BitText>
                 </BitLink>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Header/BitHeaderDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Header/BitHeaderDemo.razor
index bc5222054a..33e9e27f71 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Header/BitHeaderDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Header/BitHeaderDemo.razor
@@ -19,7 +19,7 @@
             <div class="container">
                 <BitHeader Style="gap: 1rem;">
                     <BitButton Variant="BitVariant.Text" IconName="@BitIconName.GlobalNavButton" Title="Open Navigation"/>
-                    <BitText Variant="BitTextVariant.Caption1">My Awesome App</BitText>
+                    <BitText Typography="BitTypography.Caption1">My Awesome App</BitText>
                     <BitSpacer />
                     <BitButton Variant="BitVariant.Text" IconName="@BitIconName.Contact" Title="Sign in" />
                     <BitMenuButton TItem="BitMenuButtonOption"
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Header/BitHeaderDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Header/BitHeaderDemo.razor.cs
index e394456c83..e3fa32edf0 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Header/BitHeaderDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Header/BitHeaderDemo.razor.cs
@@ -35,7 +35,7 @@ public partial class BitHeaderDemo
     private readonly string example2RazorCode = @"
 <BitHeader Style=""gap: 1rem;"">
     <BitButton Variant=""BitVariant.Text"" IconName=""@BitIconName.GlobalNavButton"" Title=""Open Navigation""/>
-    <BitText Variant=""BitTextVariant.Caption"">My Awesome App</BitText>
+    <BitText Typography=""BitTypography.Caption1"">My Awesome App</BitText>
     <BitSpacer />
     <BitButton Variant=""BitVariant.Text"" IconName=""@BitIconName.Contact"" Title=""Sign in"" />
     <BitMenuButton TItem=""BitMenuButtonOption""
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Spacer/BitSpacerDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Spacer/BitSpacerDemo.razor
index e36085b7d0..b7d55b1b97 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Spacer/BitSpacerDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Spacer/BitSpacerDemo.razor
@@ -12,7 +12,7 @@
             <div style="display: flex; width: 100%;">
                 <BitButton Variant="BitVariant.Text" IconName="@BitIconName.GlobalNavButton" />
                 <BitSpacer />
-                <BitText Variant="BitTextVariant.H6">Title</BitText>
+                <BitText Typography="BitTypography.H6">Title</BitText>
                 <BitSpacer />
                 <BitButton Variant="BitVariant.Text" IconName="@BitIconName.Contact" />
             </div>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Spacer/BitSpacerDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Spacer/BitSpacerDemo.razor.cs
index e60a1128da..65ff68ad5c 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Spacer/BitSpacerDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Spacer/BitSpacerDemo.razor.cs
@@ -19,7 +19,7 @@ public partial class BitSpacerDemo
 <div style=""display: flex; width: 100%;"">
     <BitButton Variant=""BitVariant.Text"" IconName=""@BitIconName.GlobalNavButton"" />
     <BitSpacer />
-    <BitText Variant=""BitTextVariant.H6"">Title</BitText>
+    <BitText Typography=""BitTypography.H6"">Title</BitText>
     <BitSpacer />
     <BitButton Variant=""BitVariant.Text"" IconName=""@BitIconName.Contact"" />
 </div>";
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor
index 1a088c58b9..db4d00dd91 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor
@@ -12,7 +12,7 @@
         <ExamplePreview>
             <BitDropMenu Text="Drop me">
                 <BitStack Gap="1rem" Style="padding:0.5rem">
-                    <BitText Variant="BitTextVariant.Subtitle1">This is the content</BitText>
+                    <BitText Typography="BitTypography.Subtitle1">This is the content</BitText>
                     <BitButton>Click me</BitButton>
                     <BitToggle>Toggle me</BitToggle>
                 </BitStack>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor.samples.cs
index ae8ad9d138..511a50c853 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor.samples.cs
@@ -5,7 +5,7 @@ public partial class BitDropMenuDemo
     private readonly string example1RazorCode = @"
 <BitDropMenu Text=""Drop me"">
     <BitStack Gap=""1rem"" Style=""padding:0.5rem"">
-        <BitText Variant=""BitTextVariant.Subtitle1"">This is the content</BitText>
+        <BitText Typography=""BitTypography.Subtitle1"">This is the content</BitText>
         <BitButton>Click me</BitButton>
         <BitToggle>Toggle me</BitToggle>
     </BitStack>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Image/BitImageDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Image/BitImageDemo.razor
index b8f017a361..2727d6b459 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Image/BitImageDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Image/BitImageDemo.razor
@@ -189,7 +189,7 @@
         <ExamplePreview>
             <div>
                 <div>
-                    <BitText Variant="BitTextVariant.H6">ImageFit: CenterCover</BitText>
+                    <BitText Typography="BitTypography.H6">ImageFit: CenterCover</BitText>
                     <br />
                     <div>
                         <BitLabel>Landscape</BitLabel>
@@ -215,7 +215,7 @@
                 <br />
                 <br />
                 <div>
-                    <BitText Variant="BitTextVariant.H6">ImageFit: CenterContain</BitText>
+                    <BitText Typography="BitTypography.H6">ImageFit: CenterContain</BitText>
                     <br />
                     <div>
                         <BitLabel>Landscape</BitLabel>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Overlay/BitOverlayDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Overlay/BitOverlayDemo.razor
index 124a5c421c..e5b68cb450 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Overlay/BitOverlayDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Overlay/BitOverlayDemo.razor
@@ -62,7 +62,7 @@
                             Class="overlay"
                             AutoToggleScroll>
                     <BitStack HorizontalAlign="BitAlignment.Stretch">
-                        <BitText Style="color: dodgerblue;" Variant="BitTextVariant.H3">Please wait...</BitText>
+                        <BitText Style="color: dodgerblue;" Typography="BitTypography.H3">Please wait...</BitText>
                         <BitProgress Indeterminate Thickness="10"/>
                     </BitStack>
                 </BitOverlay>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Overlay/BitOverlayDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Overlay/BitOverlayDemo.razor.cs
index 7c264e968c..5e216aea28 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Overlay/BitOverlayDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Overlay/BitOverlayDemo.razor.cs
@@ -178,7 +178,7 @@ turpis. In hac habitasse platea dictumst.
 
 <BitOverlay @bind-IsOpen=""AutoToggleIsOpen"" Class=""overlay"" AutoToggleScroll>
     <BitStack HorizontalAlign=""BitStackAlignment.Stretch"">
-        <BitText Style=""color: dodgerblue;"" Variant=""BitTextVariant.H3"">Please wait...</BitText>
+        <BitText Style=""color: dodgerblue;"" Typography=""BitTypography.H3"">Please wait...</BitText>
         <BitProgress Indeterminate Thickness=""10""/>
     </BitStack>
 </BitOverlay>";
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Text/BitTextDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Text/BitTextDemo.razor
index 5affbb2e16..1ed655a0a2 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Text/BitTextDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Text/BitTextDemo.razor
@@ -14,23 +14,23 @@
             <div class="example-box">
                 <BitText>This is default (Subtitle1)</BitText>
                 <br />
-                <BitText Variant="BitTextVariant.H1">H1. Heading</BitText>
-                <BitText Variant="BitTextVariant.H2">H2. Heading</BitText>
-                <BitText Variant="BitTextVariant.H3">H3. Heading</BitText>
-                <BitText Variant="BitTextVariant.H4">H4. Heading</BitText>
-                <BitText Variant="BitTextVariant.H5">H5. Heading</BitText>
-                <BitText Variant="BitTextVariant.H6">H6. Heading</BitText>
+                <BitText Typography="BitTypography.H1">H1. Heading</BitText>
+                <BitText Typography="BitTypography.H2">H2. Heading</BitText>
+                <BitText Typography="BitTypography.H3">H3. Heading</BitText>
+                <BitText Typography="BitTypography.H4">H4. Heading</BitText>
+                <BitText Typography="BitTypography.H5">H5. Heading</BitText>
+                <BitText Typography="BitTypography.H6">H6. Heading</BitText>
 
-                <BitText Variant="BitTextVariant.Subtitle1">Subtitle1. Lorem ipsum dolor sit amet</BitText>
-                <BitText Variant="BitTextVariant.Subtitle2">Subtitle2. Lorem ipsum dolor sit amet</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Subtitle1. Lorem ipsum dolor sit amet</BitText>
+                <BitText Typography="BitTypography.Subtitle2">Subtitle2. Lorem ipsum dolor sit amet</BitText>
 
-                <BitText Variant="BitTextVariant.Body1">Body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.</BitText>
-                <BitText Variant="BitTextVariant.Body2">Body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.</BitText>
+                <BitText Typography="BitTypography.Body1">Body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.</BitText>
+                <BitText Typography="BitTypography.Body2">Body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.</BitText>
 
-                <BitText Variant="BitTextVariant.Button">Button. Click Me</BitText>
-                <BitText Variant="BitTextVariant.Caption1">Caption1. Hello World!</BitText>
-                <BitText Variant="BitTextVariant.Caption2">Caption2. Hello World!</BitText>
-                <BitText Variant="BitTextVariant.Overline">Overline. this is overline text.</BitText>
+                <BitText Typography="BitTypography.Button">Button. Click Me</BitText>
+                <BitText Typography="BitTypography.Caption1">Caption1. Hello World!</BitText>
+                <BitText Typography="BitTypography.Caption2">Caption2. Hello World!</BitText>
+                <BitText Typography="BitTypography.Overline">Overline. this is overline text.</BitText>
             </div>
         </ExamplePreview>
     </ComponentExampleBox>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Text/BitTextDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Text/BitTextDemo.razor.cs
index 1c6a80e7db..1b5eb4160e 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Text/BitTextDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Text/BitTextDemo.razor.cs
@@ -34,12 +34,12 @@ public partial class BitTextDemo
         },
         new()
         {
-            Name = "Variant",
-            Type = "BitTextVariant",
-            DefaultValue = "BitTextVariant.Subtitle1",
-            Description = "The variant of the text.",
+            Name = "Typography",
+            Type = "BitTypography?",
+            DefaultValue = "null",
+            Description = "The typography of the text.",
             LinkType = LinkType.Link,
-            Href = "#variant-enum"
+            Href = "#typography-enum"
         }
     ];
 
@@ -47,8 +47,8 @@ public partial class BitTextDemo
     [
         new()
         {
-            Id = "variant-enum",
-            Name = "BitTextVariant",
+            Id = "typography-enum",
+            Name = "BitTypography",
             Items =
             [
                 new() { Name = "H1", Value = "0" },
@@ -75,20 +75,21 @@ public partial class BitTextDemo
     private string example1RazorCode = @"
 <BitText>This is default (Subtitle1)</BitText>
 
-<BitText Variant=""BitTextVariant.H1"">H1. Heading</BitText>
-<BitText Variant=""BitTextVariant.H2"">H2. Heading</BitText>
-<BitText Variant=""BitTextVariant.H3"">H3. Heading</BitText>
-<BitText Variant=""BitTextVariant.H4"">H4. Heading</BitText>
-<BitText Variant=""BitTextVariant.H5"">H5. Heading</BitText>
-<BitText Variant=""BitTextVariant.H6"">H6. Heading</BitText>
+<BitText Typography=""BitTypography.H1"">H1. Heading</BitText>
+<BitText Typography=""BitTypography.H2"">H2. Heading</BitText>
+<BitText Typography=""BitTypography.H3"">H3. Heading</BitText>
+<BitText Typography=""BitTypography.H4"">H4. Heading</BitText>
+<BitText Typography=""BitTypography.H5"">H5. Heading</BitText>
+<BitText Typography=""BitTypography.H6"">H6. Heading</BitText>
 
-<BitText Variant=""BitTextVariant.Subtitle1"">Subtitle1. Lorem ipsum dolor sit amet</BitText>
-<BitText Variant=""BitTextVariant.Subtitle2"">Subtitle2. Lorem ipsum dolor sit amet</BitText>
+<BitText Typography=""BitTypography.Subtitle1"">Subtitle1. Lorem ipsum dolor sit amet</BitText>
+<BitText Typography=""BitTypography.Subtitle2"">Subtitle2. Lorem ipsum dolor sit amet</BitText>
 
-<BitText Variant=""BitTextVariant.Body1"">Body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.</BitText>
-<BitText Variant=""BitTextVariant.Body2"">Body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.</BitText>
+<BitText Typography=""BitTypography.Body1"">Body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.</BitText>
+<BitText Typography=""BitTypography.Body2"">Body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.</BitText>
 
-<BitText Variant=""BitTextVariant.Button"">Button. Click Me</BitText>
-<BitText Variant=""BitTextVariant.Caption"">Caption. Hello World!</BitText>
-<BitText Variant=""BitTextVariant.Overline"">Overline. this is overline text.</BitText>";
+<BitText Typography=""BitTypography.Button"">Button. Click Me</BitText>
+<BitText Typography=""BitTypography.Caption1"">Caption1. Hello World!</BitText>
+<BitText Typography=""BitTypography.Caption2"">Caption2. Hello World!</BitText>
+<BitText Typography=""BitTypography.Overline"">Overline. this is overline text.</BitText>";
 }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/GettingStartedPage.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/GettingStartedPage.razor
index a4caac674d..e0a040fdf4 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/GettingStartedPage.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/GettingStartedPage.razor
@@ -5,33 +5,33 @@
             Description="getting started of the bit BlazorUI components" />
 
 <div class="page-container">
-    <BitText Variant="BitTextVariant.H3" Class="title">Getting started</BitText>
+    <BitText Typography="BitTypography.H3" Class="title">Getting started</BitText>
 
     <section class="page-section">
-        <BitText Variant="BitTextVariant.H4" Class="subtitle">1. Install</BitText>
+        <BitText Typography="BitTypography.H4" Class="subtitle">1. Install</BitText>
 
-        <BitText Variant="BitTextVariant.Body1" Gutter>
+        <BitText Typography="BitTypography.Body1" Gutter>
             bit BlazorUI components are distributed as the <BitLink Href="https://www.nuget.org/packages/Bit.BlazorUI/" Target="_blank">Bit.BlazorUI</BitLink> NuGet package. You can add them to your project in one of the following ways:
         </BitText>
 
-        <BitText Variant="BitTextVariant.Body1">
+        <BitText Typography="BitTypography.Body1">
             Install the package from command line by running this command:
         </BitText>
         <div class="code-box">dotnet add package Bit.BlazorUI</div>
 
-        <BitText Variant="BitTextVariant.Body1">
+        <BitText Typography="BitTypography.Body1">
             Or install the package from Package Manager Console by running this command:
         </BitText>
         <div class="code-box">Install-Package Bit.BlazorUI</div>
 
-        <BitText Variant="BitTextVariant.Body1">
+        <BitText Typography="BitTypography.Body1">
             Or add the package to the project from the Visual Studio's Nuget Package Manager.
         </BitText>
 
         <br /><br />
 
         <BitAccordion Title="Optional steps">
-            <BitText Variant="BitTextVariant.Body1">
+            <BitText Typography="BitTypography.Body1">
                 <b>Note:</b> If you want to use the Extra components (like <b>BitChart</b>) you need to add the <BitLink Href="https://www.nuget.org/packages/Bit.BlazorUI.Extras/" Target="_blank">Bit.BlazorUI.Extras</BitLink> package:
             </BitText>
             <div class="code-box">dotnet add package Bit.BlazorUI.Extras</div>
@@ -39,7 +39,7 @@
 
             <br /><br />
 
-            <BitText Variant="BitTextVariant.Body1">
+            <BitText Typography="BitTypography.Body1">
                 <b>Note:</b> If you need the asset files of the bit BlazorUI (like <b>Segoe UI</b> font for non-Windows clients) you need to add the <BitLink Href="https://www.nuget.org/packages/Bit.BlazorUI.Assets/" Target="_blank">Bit.BlazorUI.Assets</BitLink> package:
             </BitText>
             <div class="code-box">dotnet add package Bit.BlazorUI.Assets</div>
@@ -47,7 +47,7 @@
 
             <br /><br />
 
-            <BitText Variant="BitTextVariant.Body1">
+            <BitText Typography="BitTypography.Body1">
                 <b>Note:</b> If you want to use the Fabric Icons of the bit BlazorUI (using <b>BitIconName</b> class) you need to add the <BitLink Href="https://www.nuget.org/packages/Bit.BlazorUI.Icons/" Target="_blank">Bit.BlazorUI.Icons</BitLink> package:
             </BitText>
             <div class="code-box">dotnet add package Bit.BlazorUI.Icons</div>
@@ -56,20 +56,20 @@
     </section>
 
     <section class="page-section">
-        <BitText Variant="BitTextVariant.H4" Class="subtitle">2. Namespace</BitText>
+        <BitText Typography="BitTypography.H4" Class="subtitle">2. Namespace</BitText>
         <div class="section-desc">Open the <span class="txt--blue">_Imports.razor</span> file of your Blazor application and add this line:</div>
         <div class="code-box">&#64;using Bit.BlazorUI</div>
     </section>
 
     <section class="page-section">
-        <BitText Variant="BitTextVariant.H4" Class="subtitle">3. Styles and Scripts</BitText>
+        <BitText Typography="BitTypography.H4" Class="subtitle">3. Styles and Scripts</BitText>
 
-        <BitText Variant="BitTextVariant.Body1">
+        <BitText Typography="BitTypography.Body1">
             Open the <span class="txt--blue">_Host.cshtml</span> file, <span class="txt--blue">_Layout.cshtml</span> file, or <span class="txt--blue">wwwroot/index.html</span> file and include a CSS file by adding this snippet:
         </BitText>
         <div class="code-box">&lt;link href="_content/Bit.BlazorUI/styles/bit.blazorui.css" rel="stylesheet" /></div>
 
-        <BitText Variant="BitTextVariant.Body1">
+        <BitText Typography="BitTypography.Body1">
             then include the script file by adding this snippet:
         </BitText>
         <div class="code-box">&lt;script src="_content/Bit.BlazorUI/scripts/bit.blazorui.js">&lt;/script></div>
@@ -77,7 +77,7 @@
         <br />
 
         <BitAccordion Title="Optional steps">
-            <BitText Variant="BitTextVariant.Body1">
+            <BitText Typography="BitTypography.Body1">
                 <b>Note:</b> If you are using the <span class="txt--blue">Extras</span> package you also need to add these resources:
             </BitText>
             <div class="code-box">&lt;link href="_content/Bit.BlazorUI.Extras/styles/bit.blazorui.extras.css" rel="stylesheet" /></div>
@@ -85,14 +85,14 @@
 
             <br />
 
-            <BitText Variant="BitTextVariant.Body1">
+            <BitText Typography="BitTypography.Body1">
                 <b>Note:</b> If you are using the <span class="txt--blue">Assets</span> package you also need to add this resource:
             </BitText>
             <div class="code-box">&lt;link href="_content/Bit.BlazorUI.Assets/styles/bit.blazorui.assets.css" rel="stylesheet" /></div>
 
             <br />
 
-            <BitText Variant="BitTextVariant.Body1">
+            <BitText Typography="BitTypography.Body1">
                 <b>Note:</b> If you are using the <span class="txt--blue">Icons</span> package you also need to add this resource:
             </BitText>
             <div class="code-box">&lt;link href="_content/Bit.BlazorUI.Icons/styles/bit.blazorui.icons.css" rel="stylesheet" /></div>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/BenefitsSection.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/BenefitsSection.razor
index c9dc5453a8..66b3e77419 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/BenefitsSection.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/BenefitsSection.razor
@@ -1,35 +1,35 @@
 @namespace Bit.BlazorUI.Demo.Client.Core.Pages
 @inherits AppComponentBase
 
-<BitText Variant="BitTextVariant.H3" Gutter>Why bit BlazorUI?</BitText>
+<BitText Typography="BitTypography.H3" Gutter>Why bit BlazorUI?</BitText>
 
 <div class="card-list">
     <div class="benefit-card">
-        <BitText Variant="BitTextVariant.H5" Gutter>Native Blazor UI</BitText>
-        <BitText Variant="BitTextVariant.Body1">
+        <BitText Typography="BitTypography.H5" Gutter>Native Blazor UI</BitText>
+        <BitText Typography="BitTypography.Body1">
             bit BlazorUI components are written entirely in C# and provide high performance in all Blazor modes (WASM, Server, Hybrid, pre-rendering).
         </BitText>
     </div>
 
     <div class="benefit-card">
-        <BitText Variant="BitTextVariant.H5" Gutter>Dedicated dev team</BitText>
-        <BitText Variant="BitTextVariant.Body1">
+        <BitText Typography="BitTypography.H5" Gutter>Dedicated dev team</BitText>
+        <BitText Typography="BitTypography.Body1">
             A professional and dedicated team creates bit BlazorUI components, and they also actively contribute to the open-source project on GitHub.
             This ensures a consistent flow of updates and easy access to technical support.
         </BitText>
     </div>
 
     <div class="benefit-card">
-        <BitText Variant="BitTextVariant.H5" Gutter>Easy to customize</BitText>
-        <BitText Variant="BitTextVariant.Body1">
+        <BitText Typography="BitTypography.H5" Gutter>Easy to customize</BitText>
+        <BitText Typography="BitTypography.Body1">
             bit BlazorUI components are implemented in a standard format, making it simple to customize their styles and functionalities, 
             allowing you to meet your development needs in a short period of time.
         </BitText>
     </div>
 
     <div class="benefit-card">
-        <BitText Variant="BitTextVariant.H5" Gutter>Performance centric</BitText>
-        <BitText Variant="BitTextVariant.Body1">
+        <BitText Typography="BitTypography.H5" Gutter>Performance centric</BitText>
+        <BitText Typography="BitTypography.Body1">
             One of the most important aspects of the bit BlazorUI is its performance. 
             Using 5 components, for example, only adds <b>50KB</b> to your app, and using +40 components adds only <b>200KB</b> in total (dll + css + js).
         </BitText>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/ComponentsSection.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/ComponentsSection.razor
index 3c078ea921..035d668122 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/ComponentsSection.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/ComponentsSection.razor
@@ -1,242 +1,242 @@
 @namespace Bit.BlazorUI.Demo.Client.Core.Pages
 @inherits AppComponentBase
 
-<BitText Variant="BitTextVariant.H3" Gutter>bit BlazorUI components</BitText>
+<BitText Typography="BitTypography.H3" Gutter>bit BlazorUI components</BitText>
 
 <div class="list-group">
     <div class="list-col">
         <div class="list">
-            <BitText Variant="BitTextVariant.H6">Buttons</BitText>
+            <BitText Typography="BitTypography.H6">Buttons</BitText>
             <BitLink Href="/components/actionbutton" title="ActionButton">
-                <BitText Variant="BitTextVariant.Subtitle1">ActionButton</BitText>
+                <BitText Typography="BitTypography.Subtitle1">ActionButton</BitText>
             </BitLink>
             <BitLink Href="/components/button" title="Button">
-                <BitText Variant="BitTextVariant.Subtitle1">Button</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Button</BitText>
             </BitLink>
             <BitLink Href="/components/button-group" title="ButtonGroup">
-                <BitText Variant="BitTextVariant.Subtitle1">ButtonGroup</BitText>
+                <BitText Typography="BitTypography.Subtitle1">ButtonGroup</BitText>
             </BitLink>
             <BitLink Href="/components/menubutton" title="MenuButton">
-                <BitText Variant="BitTextVariant.Subtitle1">MenuButton</BitText>
+                <BitText Typography="BitTypography.Subtitle1">MenuButton</BitText>
             </BitLink>
             <BitLink Href="/components/togglebutton" title="ToggleButton">
-                <BitText Variant="BitTextVariant.Subtitle1">ToggleButton</BitText>
+                <BitText Typography="BitTypography.Subtitle1">ToggleButton</BitText>
             </BitLink>
         </div>
         <div class="list">
-            <BitText Variant="BitTextVariant.H6">Inputs</BitText>
+            <BitText Typography="BitTypography.H6">Inputs</BitText>
             <BitLink Href="/components/calendar" title="Calendar" Style="display: flex">
-                <BitText Variant="BitTextVariant.Subtitle1">Calendar</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Calendar</BitText>
             </BitLink>
             <BitLink Href="/components/checkbox" title="Checkbox">
-                <BitText Variant="BitTextVariant.Subtitle1">Checkbox</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Checkbox</BitText>
             </BitLink>
             <BitLink Href="/components/choicegroup" title="ChoiceGroup">
-                <BitText Variant="BitTextVariant.Subtitle1">ChoiceGroup</BitText>
+                <BitText Typography="BitTypography.Subtitle1">ChoiceGroup</BitText>
             </BitLink>
             <BitLink Href="/components/dropdown" title="Dropdown" Style="display: flex">
-                <BitText Variant="BitTextVariant.Subtitle1">Dropdown</BitText>
-                <BitText Variant="BitTextVariant.Subtitle2" Class="featured">featured</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Dropdown</BitText>
+                <BitText Typography="BitTypography.Subtitle2" Class="featured">featured</BitText>
             </BitLink>
             <BitLink Href="/components/fileupload" title="FileUpload" Style="display: flex">
-                <BitText Variant="BitTextVariant.Subtitle1">FileUpload</BitText>
+                <BitText Typography="BitTypography.Subtitle1">FileUpload</BitText>
             </BitLink>
             <BitLink Href="/components/numberfield" title="NumberField">
-                <BitText Variant="BitTextVariant.Subtitle1">NumberField</BitText>
+                <BitText Typography="BitTypography.Subtitle1">NumberField</BitText>
             </BitLink>
             <BitLink Href="/components/otpinput" title="OtpInput">
-                <BitText Variant="BitTextVariant.Subtitle1">OtpInput</BitText>
+                <BitText Typography="BitTypography.Subtitle1">OtpInput</BitText>
             </BitLink>
             <BitLink Href="/components/rating" title="Rating">
-                <BitText Variant="BitTextVariant.Subtitle1">Rating</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Rating</BitText>
             </BitLink>
             <BitLink Href="/components/searchbox" title="SearchBox">
-                <BitText Variant="BitTextVariant.Subtitle1">SearchBox</BitText>
+                <BitText Typography="BitTypography.Subtitle1">SearchBox</BitText>
             </BitLink>
             <BitLink Href="/components/slider" title="Slider">
-                <BitText Variant="BitTextVariant.Subtitle1">Slider</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Slider</BitText>
             </BitLink>
             <BitLink Href="/components/spinbutton" title="SpinButton">
-                <BitText Variant="BitTextVariant.Subtitle1">SpinButton</BitText>
+                <BitText Typography="BitTypography.Subtitle1">SpinButton</BitText>
             </BitLink>
             <BitLink Href="/components/textfield" title="TextField">
-                <BitText Variant="BitTextVariant.Subtitle1">TextField</BitText>
+                <BitText Typography="BitTypography.Subtitle1">TextField</BitText>
             </BitLink>
             <BitLink Href="/components/toggle" title="Toggle (Switch)">
-                <BitText Variant="BitTextVariant.Subtitle1">Toggle (Switch)</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Toggle (Switch)</BitText>
             </BitLink>
-            <BitText Variant="BitTextVariant.H6">Pickers</BitText>
+            <BitText Typography="BitTypography.H6">Pickers</BitText>
             <BitLink Href="/components/circulartimepicker" title="CircularTimePicker" Style="display: flex">
-                <BitText Variant="BitTextVariant.Subtitle1">CircularTimePicker</BitText>
+                <BitText Typography="BitTypography.Subtitle1">CircularTimePicker</BitText>
             </BitLink>
             <BitLink Href="/components/colorpicker" title="ColorPicker" Style="display: flex">
-                <BitText Variant="BitTextVariant.Subtitle1">ColorPicker</BitText>
+                <BitText Typography="BitTypography.Subtitle1">ColorPicker</BitText>
             </BitLink>
             <BitLink Href="/components/datepicker" title="DatePicker" Style="display: flex">
-                <BitText Variant="BitTextVariant.Subtitle1">DatePicker</BitText>
-                <BitText Variant="BitTextVariant.Subtitle2" Class="featured">featured</BitText>
+                <BitText Typography="BitTypography.Subtitle1">DatePicker</BitText>
+                <BitText Typography="BitTypography.Subtitle2" Class="featured">featured</BitText>
             </BitLink>
             <BitLink Href="/components/daterangepicker" title="DateRangePicker" Style="display: flex">
-                <BitText Variant="BitTextVariant.Subtitle1">DateRangePicker</BitText>
-                <BitText Variant="BitTextVariant.Subtitle2" Class="featured">featured</BitText>
+                <BitText Typography="BitTypography.Subtitle1">DateRangePicker</BitText>
+                <BitText Typography="BitTypography.Subtitle2" Class="featured">featured</BitText>
             </BitLink>
             <BitLink Href="/components/timepicker" title="TimePicker" Style="display: flex">
-                <BitText Variant="BitTextVariant.Subtitle1">TimePicker</BitText>
+                <BitText Typography="BitTypography.Subtitle1">TimePicker</BitText>
             </BitLink>
         </div>
     </div>
     <div class="list-col">
         <div class="list">
-            <BitText Variant="BitTextVariant.H6">Layouts</BitText>
+            <BitText Typography="BitTypography.H6">Layouts</BitText>
             <BitLink Href="/components/footer" title="Footer">
-                <BitText Variant="BitTextVariant.Subtitle1">Footer</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Footer</BitText>
             </BitLink>
             <BitLink Href="/components/grid" title="Grid">
-                <BitText Variant="BitTextVariant.Subtitle1">Grid</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Grid</BitText>
             </BitLink>
             <BitLink Href="/components/header" title="Header">
-                <BitText Variant="BitTextVariant.Subtitle1">Header</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Header</BitText>
             </BitLink>
             <BitLink Href="/components/layout" title="Layout">
-                <BitText Variant="BitTextVariant.Subtitle1">Layout</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Layout</BitText>
             </BitLink>
             <BitLink Href="/components/spacer" title="Spacer">
-                <BitText Variant="BitTextVariant.Subtitle1">Spacer</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Spacer</BitText>
             </BitLink>
             <BitLink Href="/components/stack" title="Stack">
-                <BitText Variant="BitTextVariant.Subtitle1">Stack</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Stack</BitText>
             </BitLink>
         </div>
         <div class="list">
-            <BitText Variant="BitTextVariant.H6">Lists</BitText>
+            <BitText Typography="BitTypography.H6">Lists</BitText>
             <BitLink Href="/components/basiclist" title="BasicList">
-                <BitText Variant="BitTextVariant.Subtitle1">BasicList</BitText>
+                <BitText Typography="BitTypography.Subtitle1">BasicList</BitText>
             </BitLink>
             <BitLink Href="/components/carousel" title="Carousel" Style="display: flex">
-                <BitText Variant="BitTextVariant.Subtitle1">Carousel</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Carousel</BitText>
             </BitLink>
             <BitLink Href="/components/swiper" title="Swiper" Style="display: flex">
-                <BitText Variant="BitTextVariant.Subtitle1">Swiper</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Swiper</BitText>
             </BitLink>
             <BitLink Href="/components/timeline" title="Timeline" Style="display: flex">
-                <BitText Variant="BitTextVariant.Subtitle1">Timeline</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Timeline</BitText>
             </BitLink>
         </div>
         <div class="list">
-            <BitText Variant="BitTextVariant.H6">Navs</BitText>
+            <BitText Typography="BitTypography.H6">Navs</BitText>
             <BitLink Href="/components/breadcrumb" title="Breadcrumb">
-                <BitText Variant="BitTextVariant.Subtitle1">Breadcrumb</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Breadcrumb</BitText>
             </BitLink>
             <BitLink Href="/components/dropmenu" title="DropMenu">
-                <BitText Variant="BitTextVariant.Subtitle1">DropMenu</BitText>
+                <BitText Typography="BitTypography.Subtitle1">DropMenu</BitText>
             </BitLink>
             <BitLink Href="/components/nav" title="Nav (TreeList)" Style="display: flex">
-                <BitText Variant="BitTextVariant.Subtitle1">Nav (TreeList)</BitText>
-                <BitText Variant="BitTextVariant.Subtitle2" Class="featured">featured</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Nav (TreeList)</BitText>
+                <BitText Typography="BitTypography.Subtitle2" Class="featured">featured</BitText>
             </BitLink>
             <BitLink Href="/components/pagination" title="Pagination">
-                <BitText Variant="BitTextVariant.Subtitle1">Pagination</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Pagination</BitText>
             </BitLink>
             <BitLink Href="/components/pivot" title="Pivot (Tab)">
-                <BitText Variant="BitTextVariant.Subtitle1">Pivot (Tab)</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Pivot (Tab)</BitText>
             </BitLink>
         </div>
         <div class="list">
-            <BitText Variant="BitTextVariant.H6">Notifications</BitText>
+            <BitText Typography="BitTypography.H6">Notifications</BitText>
             <BitLink Href="/components/badge" title="Badge">
-                <BitText Variant="BitTextVariant.Subtitle1">Badge</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Badge</BitText>
             </BitLink>
             <BitLink Href="/components/message" title="Message">
-                <BitText Variant="BitTextVariant.Subtitle1">Message</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Message</BitText>
             </BitLink>
             <BitLink Href="/components/persona" title="Persona (AvatarView)">
-                <BitText Variant="BitTextVariant.Subtitle1">Persona (AvatarView)</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Persona (AvatarView)</BitText>
             </BitLink>
             <BitLink Href="/components/snackbar" title="SnackBar">
-                <BitText Variant="BitTextVariant.Subtitle1">SnackBar</BitText>
+                <BitText Typography="BitTypography.Subtitle1">SnackBar</BitText>
             </BitLink>
             <BitLink Href="/components/tag" title="Tag">
-                <BitText Variant="BitTextVariant.Subtitle1">Tag</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Tag</BitText>
             </BitLink>
         </div>
     </div>
     <div class="list-col">
         <div class="list">
-            <BitText Variant="BitTextVariant.H6">Progress</BitText>
+            <BitText Typography="BitTypography.H6">Progress</BitText>
             <BitLink Href="/components/loading" title="Loading">
-                <BitText Variant="BitTextVariant.Subtitle1">Loading</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Loading</BitText>
             </BitLink>
             <BitLink Href="/components/progress" title="Progress">
-                <BitText Variant="BitTextVariant.Subtitle1">Progress</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Progress</BitText>
             </BitLink>
             <BitLink Href="/components/shimmer" title="Shimmer (Skeleton)">
-                <BitText Variant="BitTextVariant.Subtitle1">Shimmer (Skeleton)</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Shimmer (Skeleton)</BitText>
             </BitLink>
         </div>
         <div class="list">
-            <BitText Variant="BitTextVariant.H6">Surfaces</BitText>
+            <BitText Typography="BitTypography.H6">Surfaces</BitText>
             <BitLink Href="/components/accordion" title="Accordion (Expander)">
-                <BitText Variant="BitTextVariant.Subtitle1">Accordion (Expander)</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Accordion (Expander)</BitText>
             </BitLink>
             <BitLink Href="/components/callout" title="Callout (popover)">
-                <BitText Variant="BitTextVariant.Subtitle1">Callout (popover)</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Callout (popover)</BitText>
             </BitLink>
             <BitLink Href="/components/dialog" title="Dialog">
-                <BitText Variant="BitTextVariant.Subtitle1">Dialog</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Dialog</BitText>
             </BitLink>
             <BitLink Href="/components/modal" title="Modal">
-                <BitText Variant="BitTextVariant.Subtitle1">Modal</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Modal</BitText>
             </BitLink>
             <BitLink Href="/components/panel" title="Panel">
-                <BitText Variant="BitTextVariant.Subtitle1">Panel</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Panel</BitText>
             </BitLink>
             <BitLink Href="/components/scrollablepane" title="ScrollablePane">
-                <BitText Variant="BitTextVariant.Subtitle1">ScrollablePane</BitText>
+                <BitText Typography="BitTypography.Subtitle1">ScrollablePane</BitText>
             </BitLink>
             <BitLink Href="/components/splitter" title="Splitter">
-                <BitText Variant="BitTextVariant.Subtitle1">Splitter</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Splitter</BitText>
             </BitLink>
             <BitLink Href="/components/tooltip" title="Tooltip">
-                <BitText Variant="BitTextVariant.Subtitle1">Tooltip</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Tooltip</BitText>
             </BitLink>
         </div>
         <div class="list">
-            <BitText Variant="BitTextVariant.H6">Utilities</BitText>
+            <BitText Typography="BitTypography.H6">Utilities</BitText>
             <BitLink Href="/components/element" title="Element">
-                <BitText Variant="BitTextVariant.Subtitle1">Element</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Element</BitText>
             </BitLink>
             <BitLink Href="/components/icon" title="Icon">
-                <BitText Variant="BitTextVariant.Subtitle1">Icon</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Icon</BitText>
             </BitLink>
             <BitLink Href="/components/image" title="Image">
-                <BitText Variant="BitTextVariant.Subtitle1">Image</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Image</BitText>
             </BitLink>
             <BitLink Href="/components/label" title="Label">
-                <BitText Variant="BitTextVariant.Subtitle1">Label</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Label</BitText>
             </BitLink>
             <BitLink Href="/components/link" title="Link">
-                <BitText Variant="BitTextVariant.Subtitle1">Link</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Link</BitText>
             </BitLink>
             <BitLink Href="/components/overlay" title="Overlay">
-                <BitText Variant="BitTextVariant.Subtitle1">Overlay</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Overlay</BitText>
             </BitLink>
             <BitLink Href="/components/separator" title="Separator">
-                <BitText Variant="BitTextVariant.Subtitle1">Separator</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Separator</BitText>
             </BitLink>
             <BitLink Href="/components/sticky" title="Sticky">
-                <BitText Variant="BitTextVariant.Subtitle1">Sticky</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Sticky</BitText>
             </BitLink>
             <BitLink Href="/components/text" title="Text">
-                <BitText Variant="BitTextVariant.Subtitle1">Text</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Text</BitText>
             </BitLink>
         </div>
         <div class="list">
-            <BitText Variant="BitTextVariant.H6">Extras</BitText>
+            <BitText Typography="BitTypography.H6">Extras</BitText>
             <BitLink Href="/components/datagrid" title="DataGrid" Style="display: flex">
-                <BitText Variant="BitTextVariant.Subtitle1">DataGrid</BitText>
+                <BitText Typography="BitTypography.Subtitle1">DataGrid</BitText>
             </BitLink>
             <BitLink Href="/components/chart" title="Chart" Style="display: flex">
-                <BitText Variant="BitTextVariant.Subtitle1">Chart</BitText>
+                <BitText Typography="BitTypography.Subtitle1">Chart</BitText>
             </BitLink>
         </div>
     </div>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/HeroSection.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/HeroSection.razor
index 06e71e6384..57500508d5 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/HeroSection.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/HeroSection.razor
@@ -2,8 +2,8 @@
 @inherits AppComponentBase
 
 <div class="hero-section-content">
-    <BitText Variant="BitTextVariant.H1">bit BlazorUI</BitText>
-    <BitText Variant="BitTextVariant.Subtitle1" Gutter>bit BlazorUI components are native, easy-to-customize, and work seamlessly in all Blazor modes (WASM, Server, Hybrid, pre-rendering), saving you time and making development enjoyable.</BitText>
+    <BitText Typography="BitTypography.H1">bit BlazorUI</BitText>
+    <BitText Typography="BitTypography.Subtitle1" Gutter>bit BlazorUI components are native, easy-to-customize, and work seamlessly in all Blazor modes (WASM, Server, Hybrid, pre-rendering), saving you time and making development enjoyable.</BitText>
     <br />
     <BitButton Href="/getting-started" Size="BitSize.Large" IconName="@BitIconName.ChevronRightSmall" ReversedIcon>
         Get started
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/HomePage.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/HomePage.razor
index 6b7b085f02..3a9125f503 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/HomePage.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/HomePage.razor
@@ -32,8 +32,8 @@
 
     <section class="homepage-section contribution-section">
         <div class="homepage-section-content">
-            <BitText Variant="BitTextVariant.H3" Gutter>Open Source contribution</BitText>
-            <BitText Variant="BitTextVariant.Body1" Gutter Style="max-width: 700px">Backed by a professional dedicated development team and an active community, you are well supported to work out all challenges. Since all open source components are on GitHub, you can follow the production flow of the components.  Feel free to report bugs, fork the repo, and submit pull request.</BitText>
+            <BitText Typography="BitTypography.H3" Gutter>Open Source contribution</BitText>
+            <BitText Typography="BitTypography.Body1" Gutter Style="max-width: 700px">Backed by a professional dedicated development team and an active community, you are well supported to work out all challenges. Since all open source components are on GitHub, you can follow the production flow of the components.  Feel free to report bugs, fork the repo, and submit pull request.</BitText>
             <a class="section-btn" target="_blank" href="https://github.com/bitfoundation/bitplatform">
                 <span class="github-icon"></span>
                 GitHub
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/PopularComponents.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/PopularComponents.razor
index ae7182d0d0..9d05ccf145 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/PopularComponents.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/PopularComponents.razor
@@ -3,7 +3,7 @@
 
 <section class="main-container">
     <div class="content-container">
-        <BitText Variant="BitTextVariant.H3" Gutter>Popular components</BitText>
+        <BitText Typography="BitTypography.H3" Gutter>Popular components</BitText>
         <div class="component-list">
             @foreach (var com in Components)
             {
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/IconographyPage.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/IconographyPage.razor
index 0065216442..4fc61bd45f 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/IconographyPage.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/IconographyPage.razor
@@ -5,19 +5,19 @@
             Description="iconography of the bit blazorui components" />
 
 <div class="page-container">
-    <BitText Variant="BitTextVariant.H3" Class="title">Iconography</BitText>
+    <BitText Typography="BitTypography.H3" Class="title">Iconography</BitText>
     <section class="page-section">
-        <BitText Variant="BitTextVariant.Body1">
+        <BitText Typography="BitTypography.Body1">
             bit BlazorUI has traditionally used a custom font for its iconography. This font is part of the MDL2 design system and contains glyphs that you can scale, color, and style in any way.
         </BitText>
     </section>
     <section class="page-section">
-        <BitText Variant="BitTextVariant.Body1">
+        <BitText Typography="BitTypography.Body1">
             <b>Note:</b> To use these Icons, you need to add the <b>Bit.BlazorUI.Icons</b> nuget package to your project as described in the Optional steps of the <BitLink Href="/getting-started">Getting started</BitLink> page.
         </BitText>
     </section>
     <section class="page-section">
-        <BitText Variant="BitTextVariant.H4" Gutter>Available icons</BitText>
+        <BitText Typography="BitTypography.H4" Gutter>Available icons</BitText>
         <BitSearchBox Immediate
                       DebounceTime="300"
                       OnClear="HandleClear"
@@ -29,7 +29,7 @@
             @if (filteredIcons.Count == 0)
             {
                 <div class="empty-list">
-                    <BitText Variant="BitTextVariant.H4">No result</BitText>
+                    <BitText Typography="BitTypography.H4">No result</BitText>
                 </div>
             }
             else
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/OverviewPage.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/OverviewPage.razor
index eaa4a210e8..620dc229af 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/OverviewPage.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/OverviewPage.razor
@@ -5,9 +5,9 @@
             Description="overview of the bit blazorui components" />
 
 <section class="page-container">
-    <BitText Variant="BitTextVariant.H3" Class="title">bit BlazorUI</BitText>
+    <BitText Typography="BitTypography.H3" Class="title">bit BlazorUI</BitText>
     <section class="page-section">
-        <BitText Variant="BitTextVariant.Body1">
+        <BitText Typography="BitTypography.Body1">
             bit BlazorUI components are native, easy-to-customize, and work seamlessly in all Blazor modes (WASM, Server, Hybrid, pre-rendering), saving you time and making development enjoyable.
         </BitText>
     </section>
@@ -48,14 +48,14 @@
     </div>
 
     <section class="page-section">
-        <BitText Variant="BitTextVariant.H4" Class="subtitle">Project template</BitText>
+        <BitText Typography="BitTypography.H4" Class="subtitle">Project template</BitText>
 
-        <BitText Variant="BitTextVariant.Body1" Gutter>
+        <BitText Typography="BitTypography.Body1" Gutter>
             You can use our BlazorEmpty (bit-empty) project template to get started quickly with a predefined solution
             which is compatible with the new approach introduced in .NET 8.
         </BitText>
 
-        <BitText Variant="BitTextVariant.Body1" Gutter>
+        <BitText Typography="BitTypography.Body1" Gutter>
             To use this project template, you first need to install it using the following command:
         </BitText>
 
@@ -63,7 +63,7 @@
 
         <br />
 
-        <BitText Variant="BitTextVariant.Body1" Gutter>
+        <BitText Typography="BitTypography.Body1" Gutter>
             Then you can create a new project using this command:
         </BitText>
 
@@ -71,11 +71,11 @@
     </section>
 
     <section class="page-section">
-        <BitText Variant="BitTextVariant.H4" Class="subtitle">Supported browsers</BitText>
+        <BitText Typography="BitTypography.H4" Class="subtitle">Supported browsers</BitText>
         <div class="section-card-txt">
             <ul>
                 <li>
-                    <BitText Variant="BitTextVariant.Body1" Gutter>
+                    <BitText Typography="BitTypography.Body1" Gutter>
                         Blazor is supported in the browsers shown in the following list on both mobile and desktop platforms.
                     </BitText>
                     <ul dir="auto">
@@ -90,11 +90,11 @@
     </section>
 
     <section class="page-section">
-        <BitText Variant="BitTextVariant.H4" Class="subtitle">Supported platforms</BitText>
+        <BitText Typography="BitTypography.H4" Class="subtitle">Supported platforms</BitText>
         <div class="section-card-txt">
             <ul>
                 <li>
-                    <BitText Variant="BitTextVariant.Body1" Gutter>
+                    <BitText Typography="BitTypography.Body1" Gutter>
                         Blazor Hybrid apps have the following additional platform requirements:
                     </BitText>
                     <ul dir="auto">
@@ -111,12 +111,12 @@
     <section class="page-section">
         <div class="github-codespaces-section">
             <div class="github-codespaces-icon"></div>
-            <BitText Variant="BitTextVariant.H4" Class="subtitle">Play on GitHub Codespaces</BitText>
+            <BitText Typography="BitTypography.H4" Class="subtitle">Play on GitHub Codespaces</BitText>
         </div>
-        <BitText Variant="BitTextVariant.Body1" Gutter>
+        <BitText Typography="BitTypography.Body1" Gutter>
             With GitHub Codespaces, you can access the ultimate online development platform, right in your browser - no downloads or installations required.
         </BitText>
-        <BitText Variant="BitTextVariant.Body1" Gutter>
+        <BitText Typography="BitTypography.Body1" Gutter>
             Experience lightning-fast speeds and seamless integration as you dive into the world of bit BlazorUI, and elevate your web development game to new heights.
         </BitText>
         <br />
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/ThemingPage.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/ThemingPage.razor
index 427ea25a3c..0624485aaf 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/ThemingPage.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/ThemingPage.razor
@@ -6,10 +6,10 @@
             Description="theming of the bit blazorui components" />
 
 <div class="page-container">
-    <BitText Variant="BitTextVariant.H3" Class="title">Theming</BitText>
+    <BitText Typography="BitTypography.H3" Class="title">Theming</BitText>
 
     <section class="page-section">
-        <BitText Variant="BitTextVariant.Body1">
+        <BitText Typography="BitTypography.Body1">
             In bit BlazorUI, you can customize the look and feel of your app using the theme features by specifying
             the color of the components, the darkness of the surfaces, the level of shadow, the appropriate opacity of elements, etc.
             <br />
@@ -24,8 +24,8 @@
     </section>
 
     <section class="page-section">
-        <BitText Variant="BitTextVariant.H4" Class="subtitle">Quick setup</BitText>
-        <BitText Variant="BitTextVariant.Body1">
+        <BitText Typography="BitTypography.H4" Class="subtitle">Quick setup</BitText>
+        <BitText Typography="BitTypography.Body1">
             To get started with bit BlazorUI Theme as fast as possible, you can try the system theme feature of it.
             <br />
             First you need to register the bit BlazorUI services as follows:
@@ -33,20 +33,20 @@
         <br />
         <pre class="code"><code class="language-csharp">builder.Services.AddBitBlazorUIServices();</code></pre>
         <br />
-        <BitText Variant="BitTextVariant.Body1">
+        <BitText Typography="BitTypography.Body1">
             And then add a specific attribute named <code>use-system-theme</code> to the <code>html</code> tag:
         </BitText>
         <br />
         <pre><code class="language-cshtml">&lthtml use-system-theme&gt...&lt/html&gt</code></pre>
         <br />
-        <BitText Variant="BitTextVariant.Body1">
+        <BitText Typography="BitTypography.Body1">
             Now with this setup, the app will follow the system theme (dark or light) automatically.
         </BitText>
     </section>
 
     <section class="page-section">
-        <BitText Variant="BitTextVariant.H4" Class="subtitle">CSS variables</BitText>
-        <BitText Variant="BitTextVariant.Body1">
+        <BitText Typography="BitTypography.H4" Class="subtitle">CSS variables</BitText>
+        <BitText Typography="BitTypography.Body1">
             All CSS variables defined in the Theme system of the bit BlazorUI are attached to the root element like this:
         </BitText>
         <br />
@@ -73,7 +73,7 @@
 }
         </code></pre>
         <br />
-        <BitText Variant="BitTextVariant.Body1">
+        <BitText Typography="BitTypography.Body1">
             The source code of these CSS variables is available in the
             <BitLink Href="https://github.com/bitfoundation/bitplatform/blob/main/src/BlazorUI/Bit.BlazorUI/Styles/Fluent" Target="_blank">
                 bit BlazorUI GitHub repo
@@ -91,8 +91,8 @@
     </section>
 
     <section class="page-section">
-        <BitText Variant="BitTextVariant.H4" Class="subtitle">ThemeManager</BitText>
-        <BitText Variant="BitTextVariant.Body1">
+        <BitText Typography="BitTypography.H4" Class="subtitle">ThemeManager</BitText>
+        <BitText Typography="BitTypography.Body1">
             In bit BlazorUI the <code>BitThemeManager</code> class is available to customize the Theme.
             <br />
             To start using the BitThemeManager, you first need to register bit BlazorUI services like this:
@@ -100,7 +100,7 @@
         <br />
         <pre class="code"><code class="language-csharp">builder.Services.AddBitBlazorUIServices();</code></pre>
         <br />
-        <BitText Variant="BitTextVariant.Body1">
+        <BitText Typography="BitTypography.Body1">
             Now you can call methods of an injected instance of the <code>BitThemeManager</code>
             class to customize the UI:
             <br />
@@ -108,7 +108,7 @@
         <br />
         <pre class="code"><code class="language-csharp">[Inject] private BitThemeManager _bitThemeManager { get; set; }</code></pre>
         <br />
-        <BitText Variant="BitTextVariant.Body1">
+        <BitText Typography="BitTypography.Body1">
             For example using <code>ApplyBitThemeAsync</code> method and an instance of the
             <code>BitTheme</code> class, which contains the desired theme values,
             you can change the current theme styles.
@@ -125,20 +125,20 @@ myTheme.Color.Foreground.Primary = "#111";
 myTheme.Color.Background.Primary = "#777";
 _bitThemeManager.ApplyBitThemeAsync(myTheme);</code></pre>
         <br />
-        <BitText Variant="BitTextVariant.Body1">
+        <BitText Typography="BitTypography.Body1">
             You can set the current theme using the <code>SetThemeAsync</code> method:
         </BitText>
         <br />
         <pre class="code"><code class="language-csharp">await _bitThemeManager.SetThemeAsync("fluent-dark");</code></pre>
         <br />
-        <BitText Variant="BitTextVariant.Body1">
+        <BitText Typography="BitTypography.Body1">
             You can also toggle current theme between dark/light using the
             <code>ToggleDarkLightAsync</code> method:
         </BitText>
         <br />
         <pre class="code"><code class="language-csharp">await _bitThemeManager.ToggleDarkLightAsync();</code></pre>
         <br />
-        <BitText Variant="BitTextVariant.Body1">
+        <BitText Typography="BitTypography.Body1">
             This method returns the name of the new toggled theme.
             <br />
             The <code>BitThemeManager</code> has a method named <code>GetCurrentThemeAsync</code>
@@ -150,8 +150,8 @@ _bitThemeManager.ApplyBitThemeAsync(myTheme);</code></pre>
     </section>
 
     <section class="page-section">
-        <BitText Variant="BitTextVariant.H4" Class="subtitle">System Theme</BitText>
-        <BitText Variant="BitTextVariant.Body1">
+        <BitText Typography="BitTypography.H4" Class="subtitle">System Theme</BitText>
+        <BitText Typography="BitTypography.Body1">
             In bit BlazorUI you can use the system theme as the default theme when the app starts up.
             <br />
             In order to enable this feature a specific attribute named
@@ -162,8 +162,8 @@ _bitThemeManager.ApplyBitThemeAsync(myTheme);</code></pre>
     </section>
 
     <section class="page-section">
-        <BitText Variant="BitTextVariant.H4" Class="subtitle">CSS in C#</BitText>
-        <BitText Variant="BitTextVariant.Body1">
+        <BitText Typography="BitTypography.H4" Class="subtitle">CSS in C#</BitText>
+        <BitText Typography="BitTypography.Body1">
             In bit BlazorUI the <code>BitCss</code> class is available to access theme related CSS classes & variables in C#.
             <br />
             You can use different properties of this class to further customize your UI:
@@ -176,7 +176,7 @@ _bitThemeManager.ApplyBitThemeAsync(myTheme);</code></pre>
     &lt/body&gt
 &lt/html&gt</code></pre>
         <br />
-        <BitText Variant="BitTextVariant.Body1">
+        <BitText Typography="BitTypography.Body1">
             This class contians two main property for accessing CSS classes (<code>BitCss.Class</code>) and CSS variables (<code>BitCss.Var</code>).
         </BitText>
         <br />
@@ -186,8 +186,8 @@ _bitThemeManager.ApplyBitThemeAsync(myTheme);</code></pre>
     </section>
 
     <section class="page-section">
-        <BitText Variant="BitTextVariant.H4" Class="subtitle">ThemeProvider</BitText>
-        <BitText Variant="BitTextVariant.Body1">
+        <BitText Typography="BitTypography.H4" Class="subtitle">ThemeProvider</BitText>
+        <BitText Typography="BitTypography.Body1">
             In bit BlazorUI the <code>BitThemeProvider</code> component is available to further customize the Theme.
             <br />
             You can wrap any elements with the <code>BitThemeProvider</code> component and assign an instance of <code>BitTheme</code> to it:
@@ -204,13 +204,13 @@ _bitThemeManager.ApplyBitThemeAsync(myTheme);</code></pre>
     };
 }</code></pre>
         <br />
-        <BitText Variant="BitTextVariant.Body1">
+        <BitText Typography="BitTypography.Body1">
             The applied theme provided by the <code>BitThemeProvider</code> can be accessed directly using a CascadingParameter in the child components:
         </BitText>
         <br />
         <pre class="code"><code class="language-csharp">[CascadingParameter] public BitTheme? Theme { get; set; }</code></pre>
         <br />
-        <BitText Variant="BitTextVariant.Body1">
+        <BitText Typography="BitTypography.Body1">
             You can also nest <code>BitThemeProvider</code> components to achieve the desired style:
         </BitText>
         <br />
@@ -235,8 +235,8 @@ _bitThemeManager.ApplyBitThemeAsync(myTheme);</code></pre>
     </section>
 
     <section class="page-section">
-        <BitText Variant="BitTextVariant.H4" Class="subtitle">JavaScript API</BitText>
-        <BitText Variant="BitTextVariant.Body1">
+        <BitText Typography="BitTypography.H4" Class="subtitle">JavaScript API</BitText>
+        <BitText Typography="BitTypography.Body1">
             bit BlazorUI also has a JavaScript API through <code>BitTheme</code> javascript object
             to customize the UI of the app even further.
             <br />
@@ -244,25 +244,25 @@ _bitThemeManager.ApplyBitThemeAsync(myTheme);</code></pre>
         </BitText>
         <br />
         <pre><code class="language-js">BitTheme.get()</code></pre>
-        <BitText Variant="BitTextVariant.Body1">
+        <BitText Typography="BitTypography.Body1">
             Gets the current theme.
         </BitText>
         <br />
         <br />
         <pre><code class="language-js">BitTheme.set('dark')</code></pre>
-        <BitText Variant="BitTextVariant.Body1">
+        <BitText Typography="BitTypography.Body1">
             Sets the current theme.
         </BitText>
         <br />
         <br />
         <pre><code class="language-js">BitTheme.toggleDarkLight()</code></pre>
-        <BitText Variant="BitTextVariant.Body1">
+        <BitText Typography="BitTypography.Body1">
             Toggles the current theme between dark & light.
         </BitText>
         <br />
         <br />
         <pre><code class="language-js">BitTheme.useSystem()</code></pre>
-        <BitText Variant="BitTextVariant.Body1">
+        <BitText Typography="BitTypography.Body1">
             Uses the current theme of the system (dark or light) as the app theme.
         </BitText>
         <br />
@@ -276,20 +276,20 @@ _bitThemeManager.ApplyBitThemeAsync(myTheme);</code></pre>
         document.body.classList.remove('bit-theme-dark');
     }
 });</code></pre>
-        <BitText Variant="BitTextVariant.Body1">
+        <BitText Typography="BitTypography.Body1">
             An event that fires when the current theme changes.
         </BitText>
         <br />
         <br />
         <pre><code class="language-js">BitTheme.applyBitTheme({...}, el)</code></pre>
-        <BitText Variant="BitTextVariant.Body1">
+        <BitText Typography="BitTypography.Body1">
             Applies an instance of BitTheme to the specified or body element just like the
             <code>ApplyBitThemeAsync</code> method of the <code>BitThemeManager</code>.
         </BitText>
         <br />
         <br />
         <pre><code class="language-js">BitTheme.isSystemDark()</code></pre>
-        <BitText Variant="BitTextVariant.Body1">
+        <BitText Typography="BitTypography.Body1">
             Checks if the current theme of the system is dark.
         </BitText>
         <br />
@@ -306,7 +306,7 @@ _bitThemeManager.ApplyBitThemeAsync(myTheme);</code></pre>
         }
     }
 });</code></pre>
-        <BitText Variant="BitTextVariant.Body1">
+        <BitText Typography="BitTypography.Body1">
             Initializes the BitTheme object using the provided options.
         </BitText>
     </section>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/Footer.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/Footer.razor
index fffb32ad4c..576a635ead 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/Footer.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/Footer.razor
@@ -4,20 +4,20 @@
     <section>
         <div>
             <div class="bit-logo" />
-            <BitText Variant="BitTextVariant.Body2">
+            <BitText Typography="BitTypography.Body2">
                 A platform that simplifies the development process for freelancers and software companies through its clean project templates and easy-to-use one-click build and deployment feature.
             </BitText>
         </div>
 
         <div class="links-container">
             <div class="column">
-                <BitText Variant="BitTextVariant.H6" Gutter>Explore</BitText>
+                <BitText Typography="BitTypography.H6" Gutter>Explore</BitText>
                 <BitLink Href="overview" Target="_blank">Docs</BitLink>
                 <BitLink Href="iconography" Target="_blank">Iconography</BitLink>
             </div>
 
             <div class="column">
-                <BitText Variant="BitTextVariant.H6" Gutter>Quick links</BitText>
+                <BitText Typography="BitTypography.H6" Gutter>Quick links</BitText>
                 <BitLink Href="https://github.com/bitfoundation" Target="_blank">Github Org</BitLink>
                 <BitLink Href="https://github.com/bitfoundation/bitplatform" Target="_blank">Github Repo</BitLink>
                 <BitLink Href="https://github.com/bitfoundation/bitplatform/issues" Target="_blank">Github Issues</BitLink>

From 6511cee62d993889e688b61539f21c2ef6c1a2c9 Mon Sep 17 00:00:00 2001
From: Arash zandi <Arashz44@gmail.com>
Date: Mon, 2 Sep 2024 19:58:16 +0330
Subject: [PATCH 02/38] fix(templates): resolve issues of devcontainer.json of
 Boilerplate #8367 (#8480)

---
 .../Bit.Boilerplate/.devcontainer/devcontainer.json      | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/.devcontainer/devcontainer.json b/src/Templates/Boilerplate/Bit.Boilerplate/.devcontainer/devcontainer.json
index 2cddd847f0..ee538143f2 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/.devcontainer/devcontainer.json
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/.devcontainer/devcontainer.json
@@ -1,9 +1,10 @@
 {
     "name": "Boilerplate",
+    "image": "mcr.microsoft.com/dotnet/sdk:8.0",
     "hostRequirements": {
         "cpus": 4
     },
-    "onCreateCommand": "wget https://download.visualstudio.microsoft.com/download/pr/db901b0a-3144-4d07-b8ab-6e7a43e7a791/4d9d1b39b879ad969c6c0ceb6d052381/dotnet-sdk-8.0.401-linux-x64.tar.gz -O $HOME/dotnet.tar.gz && export DOTNET_ROOT=$HOME/.dotnet && mkdir -p \"$DOTNET_ROOT\" && tar zxf $HOME/dotnet.tar.gz -C \"$DOTNET_ROOT\" && export PATH=$DOTNET_ROOT:$DOTNET_ROOT/tools:$PATH && dotnet dev-certs https --trust && sed -i 's/Microsoft.NET.Sdk.BlazorWebAssembly/Microsoft.NET.Sdk.Web/g' src/Client/Boilerplate.Client.Web/Boilerplate.Client.Web.csproj",
+    "onCreateCommand": "dotnet dev-certs https --trust && dotnet workload install wasm-tools",
     "waitFor": "onCreateCommand",
     "customizations": {
         "codespaces": {
@@ -17,7 +18,8 @@
                 "kevin-chatham.aspnetcorerazor-html-css-class-completion",
                 "DominicVonk.vscode-resx-editor",
                 "ms-dotnetools.csharp",
-                "ms-dotnettools.vscode-dotnet-runtime"
+                "ms-dotnettools.vscode-dotnet-runtime",
+                "ms-dotnettools.csdevkit"
             ]
         }
     },
@@ -26,6 +28,9 @@
         5030,
         5031
     ],
+    "features": {
+        "ghcr.io/devcontainers/features/node": {}
+    },
     "remoteEnv": {
         "ASPNETCORE_ENVIRONMENT": "Development"
     }

From 329ed30f7b1bcd3b293c931e5a88638cbc8b7ab7 Mon Sep 17 00:00:00 2001
From: Yaser Moradi <ysmoradi@outlook.com>
Date: Mon, 2 Sep 2024 18:58:34 +0200
Subject: [PATCH 03/38] fix(templates): resolve scss build issues in
 Boilerplate #8481 (#8482)

---
 .../Bit.Boilerplate/.vscode/settings.json           |  1 +
 .../Boilerplate.Client.Core.csproj                  | 13 +++----------
 .../Boilerplate.Client.Maui.csproj                  |  8 ++------
 .../Boilerplate.Client.Windows.csproj               |  8 ++------
 4 files changed, 8 insertions(+), 22 deletions(-)

diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/.vscode/settings.json b/src/Templates/Boilerplate/Bit.Boilerplate/.vscode/settings.json
index deb08b0697..4ab3d9b391 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/.vscode/settings.json
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/.vscode/settings.json
@@ -1,6 +1,7 @@
 {
     "liveSassCompile.settings.watchOnLaunch": true,
     "dotnet.defaultSolution": "Boilerplate.Web.slnf",
+    "csharp.preview.improvedLaunchExperience": true,
     "explorer.fileNesting.enabled": true,
     "explorer.fileNesting.patterns": {
         "*.resx": "$(capture).*.resx",
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Boilerplate.Client.Core.csproj b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Boilerplate.Client.Core.csproj
index 7e2d059a00..74a7a90519 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Boilerplate.Client.Core.csproj
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Boilerplate.Client.Core.csproj
@@ -54,16 +54,13 @@
     </ItemGroup>
 
     <ItemGroup>
-        <IsolatedScssFiles Include="**\*.razor.scss" />
-        <GlobalScssFiles Include="Styles\**\*.scss" />
         <TypeScriptFiles Include="**\*.ts" />
     </ItemGroup>
 
     <Target Name="BeforeBuildTasks" AfterTargets="CoreCompile">
         <CallTarget Targets="InstallNodejsDependencies" />
         <CallTarget Targets="BuildJavaScript" />
-        <CallTarget Targets="BuildIsolatedScssFiles" />
-        <CallTarget Targets="BuildGlobalScssFiles" />
+        <CallTarget Targets="BuildCssFiles" />
     </Target>
 
     <Target Name="InstallNodejsDependencies" Inputs="package.json" Outputs="node_modules\.package-lock.json">
@@ -75,12 +72,8 @@
         <Exec Condition=" '$(Configuration)' == 'Release' " Command="node_modules/.bin/esbuild wwwroot/scripts/app.js --minify --outfile=wwwroot/scripts/app.js --allow-overwrite" StandardOutputImportance="high" StandardErrorImportance="high" />
     </Target>
 
-    <Target Name="BuildIsolatedScssFiles" Inputs="@(IsolatedScssFiles)" Outputs="@(IsolatedScssFiles->Replace('.scss', '.css'))">
-        <Exec Command="node_modules/.bin/sass .:. --style compressed --load-path=." StandardOutputImportance="high" StandardErrorImportance="high" LogStandardErrorAsError="true" />
-    </Target>
-
-    <Target Name="BuildGlobalScssFiles" Inputs="@(GlobalScssFiles)" Outputs="wwwroot/styles/app.css">        
-        <Exec Command="node_modules/.bin/sass Styles/app.scss:wwwroot/styles/app.css --style compressed --load-path=." StandardOutputImportance="high" StandardErrorImportance="high" LogStandardErrorAsError="true" />
+    <Target Name="BuildCssFiles">        
+        <Exec Command="node_modules/.bin/sass .:. Styles/app.scss:wwwroot/styles/app.css --style compressed --load-path=." StandardOutputImportance="high" StandardErrorImportance="high" LogStandardErrorAsError="true" />
     </Target>
 
     <ItemGroup>
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/Boilerplate.Client.Maui.csproj b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/Boilerplate.Client.Maui.csproj
index 0361299746..f3e1db1b6e 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/Boilerplate.Client.Maui.csproj
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/Boilerplate.Client.Maui.csproj
@@ -150,16 +150,12 @@
         <!--/-:msbuild-conditional:noEmit -->
     </ItemGroup>
 
-    <ItemGroup>
-        <IsolatedScssFiles Include="**\*.razor.scss" />
-    </ItemGroup>
-
     <Target Name="BeforeBuildTasks" AfterTargets="CoreCompile">
         <Error Text="Enable long paths in Windows. https://learn.microsoft.com/en-us/windows/win32/fileio/maximum-file-path-limitation?tabs=powershell#enable-long-paths-in-windows-10-version-1607-and-later" Condition=" $([MSBuild]::IsOSPlatform('windows')) AND $([MSBuild]::GetRegistryValueFromView('HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\FileSystem', 'LongPathsEnabled', null, RegistryView.Registry64)) != '1' " />
-        <CallTarget Targets="BuildIsolatedScssFiles" />
+        <CallTarget Targets="BuildCssFiles" />
     </Target>
 
-    <Target Name="BuildIsolatedScssFiles" Inputs="@(IsolatedScssFiles)" Outputs="@(IsolatedScssFiles->Replace('.scss', '.css'))">
+    <Target Name="BuildCssFiles">
         <Exec Command="../Boilerplate.Client.Core/node_modules/.bin/sass .:. --style compressed --load-path=." StandardOutputImportance="high" StandardErrorImportance="high" LogStandardErrorAsError="true" />
     </Target>
 
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/Boilerplate.Client.Windows.csproj b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/Boilerplate.Client.Windows.csproj
index eab76afd01..6abfd8b65c 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/Boilerplate.Client.Windows.csproj
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/Boilerplate.Client.Windows.csproj
@@ -53,19 +53,15 @@
         <ProjectReference Include="..\Boilerplate.Client.Core\Boilerplate.Client.Core.csproj" />
     </ItemGroup>
 
-    <ItemGroup>
-        <IsolatedScssFiles Include="**\*.razor.scss" />
-    </ItemGroup>
-
     <ItemGroup>
       <Resource Include="Resources\**\*.*" />
     </ItemGroup>
 
     <Target Name="BeforeBuildTasks" AfterTargets="CoreCompile">
-        <CallTarget Targets="BuildIsolatedScssFiles" />
+        <CallTarget Targets="BuildCssFiles" />
     </Target>
 
-    <Target Name="BuildIsolatedScssFiles" Inputs="@(IsolatedScssFiles)" Outputs="@(IsolatedScssFiles->Replace('.scss', '.css'))">
+    <Target Name="BuildCssFiles">
         <Exec Command="../Boilerplate.Client.Core/node_modules/.bin/sass .:. --style compressed --load-path=." StandardOutputImportance="high" StandardErrorImportance="high" LogStandardErrorAsError="true" />
     </Target>
 

From 2e4a8c894be8e4aa6195a4dd043bed00fc2bb7b8 Mon Sep 17 00:00:00 2001
From: Yaser Moradi <ysmoradi@outlook.com>
Date: Tue, 3 Sep 2024 19:54:45 +0200
Subject: [PATCH 04/38] fix(source generators): resolve duplicate query string
 issue in source generators #8484 (#8485)

---
 .../HttpClientProxySourceGenerator.cs         | 51 ++++++++++---------
 1 file changed, 28 insertions(+), 23 deletions(-)

diff --git a/src/SourceGenerators/Bit.SourceGenerators/HttpClientProxy/HttpClientProxySourceGenerator.cs b/src/SourceGenerators/Bit.SourceGenerators/HttpClientProxy/HttpClientProxySourceGenerator.cs
index c6e0c9774d..68f6700a9d 100644
--- a/src/SourceGenerators/Bit.SourceGenerators/HttpClientProxy/HttpClientProxySourceGenerator.cs
+++ b/src/SourceGenerators/Bit.SourceGenerators/HttpClientProxy/HttpClientProxySourceGenerator.cs
@@ -105,40 +105,45 @@ public static void AddTypedHttpClients(this IServiceCollection services)
 {string.Join(Environment.NewLine, receiver.IControllers.Select(i => $"        services.TryAddTransient<{i.Symbol.ToDisplayString()}, {i.ClassName}>();"))}
     }}
 
-    internal class AppControllerBase
+internal class AppControllerBase
+{{
+    System.Collections.Specialized.NameValueCollection queryString = HttpUtility.ParseQueryString(string.Empty);
+
+    public void AddQueryString(string existingQueryString)
     {{
-        Dictionary<string, object?> queryString = [];
+        queryString.Add(HttpUtility.ParseQueryString(existingQueryString));
+    }}
 
-        public void AddQueryString(string key, object? value)
-        {{
-            queryString.Add(key, value);    
-        }}
+    public void AddQueryString(string key, object? value)
+    {{
+        queryString.Add(key, value?.ToString());
+    }}
 
-        public void AddQueryStrings(Dictionary<string, object?> queryString)
+    public void AddQueryStrings(Dictionary<string, object?> queryString)
+    {{
+        foreach (var key in queryString.Keys)
         {{
-            foreach (var key in queryString.Keys)
-            {{
-                AddQueryString(key, queryString[key]);
-            }}
+            AddQueryString(key, queryString[key]);
         }}
+    }}
 
-        protected string? GetDynamicQueryString()
-        {{
-            if (queryString is not {{ Count: > 0 }})
-                return null;
+    protected string? GetDynamicQueryString()
+    {{
+        if (queryString is not {{ Count: > 0 }})
+            return null;
 
-            var collection = HttpUtility.ParseQueryString(string.Empty);
+        var collection = HttpUtility.ParseQueryString(string.Empty);
 
-            foreach (var key in queryString.Keys)
-            {{
-                collection.Add(key, queryString[key]?.ToString());
-            }}
+        foreach (string key in queryString)
+        {{
+            collection.Add(key, queryString[key]);
+        }}
 
-            queryString.Clear();
+        queryString.Clear();
 
-            return collection.ToString();
-        }}
+        return collection.ToString();
     }}
+}}
 
 {generatedClasses}
 

From 33f685ba3f354bb8381cfa0804908f0e04d799db Mon Sep 17 00:00:00 2001
From: Yaser Moradi <ysmoradi@outlook.com>
Date: Tue, 3 Sep 2024 20:12:32 +0200
Subject: [PATCH 05/38] feat(templates): add missing python feature to
 devContainer.json of Boilerplate #8489 (#8490)

---
 .../Bit.Boilerplate/.devcontainer/devcontainer.json            | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/.devcontainer/devcontainer.json b/src/Templates/Boilerplate/Bit.Boilerplate/.devcontainer/devcontainer.json
index ee538143f2..79f20ac7c4 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/.devcontainer/devcontainer.json
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/.devcontainer/devcontainer.json
@@ -29,7 +29,8 @@
         5031
     ],
     "features": {
-        "ghcr.io/devcontainers/features/node": {}
+        "ghcr.io/devcontainers/features/node": {},
+        "ghcr.io/devcontainers/features/python": {}
     },
     "remoteEnv": {
         "ASPNETCORE_ENVIRONMENT": "Development"

From 7e44e05cc8dbf557933d888bb848e5f62a6d2a4f Mon Sep 17 00:00:00 2001
From: Saleh Yusefnejad <msynk@outlook.com>
Date: Tue, 3 Sep 2024 22:02:03 +0330
Subject: [PATCH 06/38] feat(prerelease): v-8.11.0-pre-05 #8452 (#8491)

---
 src/Besql/Bit.Besql/wwwroot/bit-besql.js         |  2 +-
 src/Bit.Build.props                              |  4 ++--
 src/BlazorUI/Bit.BlazorUI/Scripts/general.ts     |  2 +-
 .../Bit.BlazorUI.Demo.Server.csproj              |  4 ++--
 .../Bit.BlazorUI.Demo.Shared.csproj              |  4 ++--
 .../Bit.BlazorUI.Demo.Client.Core.csproj         |  4 ++--
 .../Bit.BlazorUI.Demo.Client.Maui.csproj         |  4 ++--
 .../Bit.BlazorUI.Demo.Client.Web.csproj          |  6 +++---
 .../wwwroot/service-worker.published.js          |  2 +-
 .../Bit.BlazorUI.Demo.Client.Windows.csproj      |  4 ++--
 src/BlazorUI/Demo/Directory.Build.props          |  2 +-
 .../Bit.Bswup.Demo/wwwroot/service-worker.js     |  2 +-
 .../wwwroot/service-worker.published.js          |  2 +-
 .../wwwroot/service-worker.js                    |  2 +-
 .../wwwroot/service-worker.published.js          |  2 +-
 .../Bit.Bswup/Scripts/bit-bswup.progress.ts      |  2 +-
 src/Bswup/Bit.Bswup/Scripts/bit-bswup.sw.ts      |  2 +-
 src/Bswup/Bit.Bswup/Scripts/bit-bswup.ts         |  2 +-
 .../FullDemo/Client/wwwroot/service-worker.js    |  2 +-
 .../Client/wwwroot/service-worker.published.js   |  2 +-
 src/Bup/Bit.Bup/Scripts/bit-bup.progress.ts      |  2 +-
 src/Bup/Bit.Bup/Scripts/bit-bup.ts               |  2 +-
 src/Butil/Bit.Butil/Scripts/butil.ts             |  2 +-
 .../BlazorEmpty.Client/BlazorEmpty.Client.csproj |  8 ++++----
 .../BlazorEmpty/BlazorEmpty.csproj               |  8 ++++----
 .../Boilerplate.Client.Core.csproj               | 16 ++++++++--------
 .../Boilerplate.Client.Maui.csproj               |  4 ++--
 .../Boilerplate.Client.Web.csproj                |  6 +++---
 .../wwwroot/service-worker.js                    |  2 +-
 .../Boilerplate.Client.Windows.csproj            |  4 ++--
 .../Bit.Boilerplate/src/Directory.Build.props    |  2 +-
 .../Boilerplate.Server.Api.csproj                |  4 ++--
 .../Boilerplate.Server.Web.csproj                |  4 ++--
 .../src/Shared/Boilerplate.Shared.csproj         |  4 ++--
 .../Bit.Websites.Careers.Client.csproj           | 10 +++++-----
 .../Bit.Websites.Careers.Server.csproj           |  4 ++--
 .../Bit.Websites.Careers.Shared.csproj           |  4 ++--
 src/Websites/Careers/src/Directory.Build.props   |  2 +-
 .../Bit.Websites.Platform.Client.csproj          | 12 ++++++------
 .../Templates03GettingStartedPage.razor          |  4 ++--
 .../Templates03GettingStartedPage.razor.cs       |  2 +-
 .../Bit.Websites.Platform.Server.csproj          |  4 ++--
 .../Bit.Websites.Platform.Shared.csproj          |  4 ++--
 src/Websites/Platform/src/Directory.Build.props  |  2 +-
 .../Bit.Websites.Sales.Client.csproj             | 10 +++++-----
 .../Bit.Websites.Sales.Server.csproj             |  4 ++--
 .../Bit.Websites.Sales.Shared.csproj             |  4 ++--
 src/Websites/Sales/src/Directory.Build.props     |  2 +-
 48 files changed, 96 insertions(+), 96 deletions(-)

diff --git a/src/Besql/Bit.Besql/wwwroot/bit-besql.js b/src/Besql/Bit.Besql/wwwroot/bit-besql.js
index d5f0d43625..f0557f9d95 100644
--- a/src/Besql/Bit.Besql/wwwroot/bit-besql.js
+++ b/src/Besql/Bit.Besql/wwwroot/bit-besql.js
@@ -1,5 +1,5 @@
 var BitBesql = BitBesql || {};
-BitBesql.version = window['bit-besql version'] = '8.11.0-pre-04';
+BitBesql.version = window['bit-besql version'] = '8.11.0-pre-05';
 
 async function synchronizeDbWithCache(file) {
 
diff --git a/src/Bit.Build.props b/src/Bit.Build.props
index 8e53e739c3..bc18756c1a 100644
--- a/src/Bit.Build.props
+++ b/src/Bit.Build.props
@@ -27,8 +27,8 @@
 
 		<ReleaseVersion>8.11.0</ReleaseVersion>
 
-		<PackageReleaseNotes>https://github.com/bitfoundation/bitplatform/releases/tag/v-$(ReleaseVersion)-pre-04</PackageReleaseNotes>
-		<PackageVersion>$(ReleaseVersion)-pre-04</PackageVersion>
+		<PackageReleaseNotes>https://github.com/bitfoundation/bitplatform/releases/tag/v-$(ReleaseVersion)-pre-05</PackageReleaseNotes>
+		<PackageVersion>$(ReleaseVersion)-pre-05</PackageVersion>
 
 		<!-- Version -->
 		<Version Condition=" '$(Configuration)' == 'Release' ">$(ReleaseVersion).$([System.DateTime]::Now.ToString(HHmm))</Version>
diff --git a/src/BlazorUI/Bit.BlazorUI/Scripts/general.ts b/src/BlazorUI/Bit.BlazorUI/Scripts/general.ts
index 0bfd54442c..5378842c03 100644
--- a/src/BlazorUI/Bit.BlazorUI/Scripts/general.ts
+++ b/src/BlazorUI/Bit.BlazorUI/Scripts/general.ts
@@ -1,4 +1,4 @@
-(BitBlazorUI as any).version = (window as any)['bit-blazorui version'] = '8.11.0-pre-04';
+(BitBlazorUI as any).version = (window as any)['bit-blazorui version'] = '8.11.0-pre-05';
 
 interface DotNetObject {
     invokeMethod<T>(methodIdentifier: string, ...args: any[]): T;
diff --git a/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Bit.BlazorUI.Demo.Server.csproj b/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Bit.BlazorUI.Demo.Server.csproj
index 215fd85c88..385566cbd5 100644
--- a/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Bit.BlazorUI.Demo.Server.csproj
+++ b/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Bit.BlazorUI.Demo.Server.csproj
@@ -5,11 +5,11 @@
     </PropertyGroup>
 
     <ItemGroup>
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-04">
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-04">
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
diff --git a/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Shared/Bit.BlazorUI.Demo.Shared.csproj b/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Shared/Bit.BlazorUI.Demo.Shared.csproj
index f626461add..ea606282c0 100644
--- a/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Shared/Bit.BlazorUI.Demo.Shared.csproj
+++ b/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Shared/Bit.BlazorUI.Demo.Shared.csproj
@@ -5,11 +5,11 @@
     </PropertyGroup>
 
     <ItemGroup>
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-04">
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-04">
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Bit.BlazorUI.Demo.Client.Core.csproj b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Bit.BlazorUI.Demo.Client.Core.csproj
index 097f42917d..8baa714b96 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Bit.BlazorUI.Demo.Client.Core.csproj
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Bit.BlazorUI.Demo.Client.Core.csproj
@@ -16,11 +16,11 @@
         <Content Remove="appsettings.json" />
         <EmbeddedResource Include="appsettings.json" />
 
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-04">
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-04">
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Maui/Bit.BlazorUI.Demo.Client.Maui.csproj b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Maui/Bit.BlazorUI.Demo.Client.Maui.csproj
index 574f3ff3f9..325ccaeae9 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Maui/Bit.BlazorUI.Demo.Client.Maui.csproj
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Maui/Bit.BlazorUI.Demo.Client.Maui.csproj
@@ -84,12 +84,12 @@
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-04">
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
         <PackageReference Include="Microsoft.AppCenter.Crashes" Version="5.0.5" />
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-04">
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Web/Bit.BlazorUI.Demo.Client.Web.csproj b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Web/Bit.BlazorUI.Demo.Client.Web.csproj
index a0c4a03f61..ca6e79953d 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Web/Bit.BlazorUI.Demo.Client.Web.csproj
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Web/Bit.BlazorUI.Demo.Client.Web.csproj
@@ -26,13 +26,13 @@
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Bit.Bswup" Version="8.11.0-pre-04" />
+        <PackageReference Include="Bit.Bswup" Version="8.11.0-pre-05" />
         <PackageReference Include="Newtonsoft.Json" Version="13.0.3" />
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-04">
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-04">
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Web/wwwroot/service-worker.published.js b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Web/wwwroot/service-worker.published.js
index 2a0930554d..c9e63ccb78 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Web/wwwroot/service-worker.published.js
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Web/wwwroot/service-worker.published.js
@@ -1,4 +1,4 @@
-// bit version: 8.11.0-pre-04
+// bit version: 8.11.0-pre-05
 // https://github.com/bitfoundation/bitplatform/tree/develop/src/Bswup
 
 self.assetsInclude = [];
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Windows/Bit.BlazorUI.Demo.Client.Windows.csproj b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Windows/Bit.BlazorUI.Demo.Client.Windows.csproj
index f8af1d1f76..0410a099df 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Windows/Bit.BlazorUI.Demo.Client.Windows.csproj
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Windows/Bit.BlazorUI.Demo.Client.Windows.csproj
@@ -17,11 +17,11 @@
         <Using Include="Bit.BlazorUI.Demo.Client.Core.Services.Contracts" />
         <Using Include="Bit.BlazorUI.Demo.Client.Core.Services" />
         
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-04">
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-04">
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
diff --git a/src/BlazorUI/Demo/Directory.Build.props b/src/BlazorUI/Demo/Directory.Build.props
index c44c9f0f60..8d8a03cd52 100644
--- a/src/BlazorUI/Demo/Directory.Build.props
+++ b/src/BlazorUI/Demo/Directory.Build.props
@@ -1,4 +1,4 @@
-<!-- Generated by bit-bp template v-8.11.0-pre-04 -->
+<!-- Generated by bit-bp template v-8.11.0-pre-05 -->
 <Project>
     <PropertyGroup>
         <LangVersion>12.0</LangVersion>
diff --git a/src/Bswup/Bit.Bswup.Demo/wwwroot/service-worker.js b/src/Bswup/Bit.Bswup.Demo/wwwroot/service-worker.js
index 16f3321564..87729e96f3 100644
--- a/src/Bswup/Bit.Bswup.Demo/wwwroot/service-worker.js
+++ b/src/Bswup/Bit.Bswup.Demo/wwwroot/service-worker.js
@@ -1,4 +1,4 @@
-// bit version: 8.11.0-pre-04
+// bit version: 8.11.0-pre-05
 
 self.assetsExclude = [/\.scp\.css$/, /weather\.json$/];
 self.caseInsensitiveUrl = true;
diff --git a/src/Bswup/Bit.Bswup.Demo/wwwroot/service-worker.published.js b/src/Bswup/Bit.Bswup.Demo/wwwroot/service-worker.published.js
index 766f883038..73c8100a23 100644
--- a/src/Bswup/Bit.Bswup.Demo/wwwroot/service-worker.published.js
+++ b/src/Bswup/Bit.Bswup.Demo/wwwroot/service-worker.published.js
@@ -1,4 +1,4 @@
-// bit version: 8.11.0-pre-04
+// bit version: 8.11.0-pre-05
 
 self.assetsExclude = [/\.scp\.css$/, /weather\.json$/];
 self.caseInsensitiveUrl = true;
diff --git a/src/Bswup/Bit.Bswup.NewDemo/Bit.Bswup.NewDemo.Client/wwwroot/service-worker.js b/src/Bswup/Bit.Bswup.NewDemo/Bit.Bswup.NewDemo.Client/wwwroot/service-worker.js
index 113d6120bf..06dcde5fde 100644
--- a/src/Bswup/Bit.Bswup.NewDemo/Bit.Bswup.NewDemo.Client/wwwroot/service-worker.js
+++ b/src/Bswup/Bit.Bswup.NewDemo/Bit.Bswup.NewDemo.Client/wwwroot/service-worker.js
@@ -1,4 +1,4 @@
-// bit version: 8.11.0-pre-04
+// bit version: 8.11.0-pre-05
 
 // In development, always fetch from the network and do not enable offline support.
 // This is because caching would make development more difficult (changes would not
diff --git a/src/Bswup/Bit.Bswup.NewDemo/Bit.Bswup.NewDemo.Client/wwwroot/service-worker.published.js b/src/Bswup/Bit.Bswup.NewDemo/Bit.Bswup.NewDemo.Client/wwwroot/service-worker.published.js
index 6478ffa43e..702c1aaf68 100644
--- a/src/Bswup/Bit.Bswup.NewDemo/Bit.Bswup.NewDemo.Client/wwwroot/service-worker.published.js
+++ b/src/Bswup/Bit.Bswup.NewDemo/Bit.Bswup.NewDemo.Client/wwwroot/service-worker.published.js
@@ -1,4 +1,4 @@
-// bit version: 8.11.0-pre-04
+// bit version: 8.11.0-pre-05
 
 self.assetsInclude = [];
 self.assetsExclude = [
diff --git a/src/Bswup/Bit.Bswup/Scripts/bit-bswup.progress.ts b/src/Bswup/Bit.Bswup/Scripts/bit-bswup.progress.ts
index 9ec9bcfac3..e984590da4 100644
--- a/src/Bswup/Bit.Bswup/Scripts/bit-bswup.progress.ts
+++ b/src/Bswup/Bit.Bswup/Scripts/bit-bswup.progress.ts
@@ -1,4 +1,4 @@
-window['bit-bswup.progress version'] = '8.11.0-pre-04';
+window['bit-bswup.progress version'] = '8.11.0-pre-05';
 
 ; (function () {
     (window as any).startBswupProgress = (autoReload: boolean,
diff --git a/src/Bswup/Bit.Bswup/Scripts/bit-bswup.sw.ts b/src/Bswup/Bit.Bswup/Scripts/bit-bswup.sw.ts
index 60dd50b682..d49d6bc41f 100644
--- a/src/Bswup/Bit.Bswup/Scripts/bit-bswup.sw.ts
+++ b/src/Bswup/Bit.Bswup/Scripts/bit-bswup.sw.ts
@@ -1,4 +1,4 @@
-self['bit-bswup.sw version'] = '8.11.0-pre-04';
+self['bit-bswup.sw version'] = '8.11.0-pre-05';
 
 interface Window {
     clients: any
diff --git a/src/Bswup/Bit.Bswup/Scripts/bit-bswup.ts b/src/Bswup/Bit.Bswup/Scripts/bit-bswup.ts
index 904ebc8cb4..ffc551055b 100644
--- a/src/Bswup/Bit.Bswup/Scripts/bit-bswup.ts
+++ b/src/Bswup/Bit.Bswup/Scripts/bit-bswup.ts
@@ -1,5 +1,5 @@
 const BitBswup = {} as any;
-BitBswup.version = window['bit-bswup version'] = '8.11.0-pre-04';
+BitBswup.version = window['bit-bswup version'] = '8.11.0-pre-05';
 
 declare const Blazor: any;
 
diff --git a/src/Bswup/FullDemo/Client/wwwroot/service-worker.js b/src/Bswup/FullDemo/Client/wwwroot/service-worker.js
index 50cfc1b4f2..3a7b7a86f1 100644
--- a/src/Bswup/FullDemo/Client/wwwroot/service-worker.js
+++ b/src/Bswup/FullDemo/Client/wwwroot/service-worker.js
@@ -1,4 +1,4 @@
-// bit version: 8.11.0-pre-04
+// bit version: 8.11.0-pre-05
 
 // In development, always fetch from the network and do not enable offline support.
 // This is because caching would make development more difficult (changes would not
diff --git a/src/Bswup/FullDemo/Client/wwwroot/service-worker.published.js b/src/Bswup/FullDemo/Client/wwwroot/service-worker.published.js
index c04f468943..0523c08175 100644
--- a/src/Bswup/FullDemo/Client/wwwroot/service-worker.published.js
+++ b/src/Bswup/FullDemo/Client/wwwroot/service-worker.published.js
@@ -1,4 +1,4 @@
-// bit version: 8.11.0-pre-04
+// bit version: 8.11.0-pre-05
 
 self.assetsInclude = [];
 self.assetsExclude = [/\.scp\.css$/, /weather\.json$/];
diff --git a/src/Bup/Bit.Bup/Scripts/bit-bup.progress.ts b/src/Bup/Bit.Bup/Scripts/bit-bup.progress.ts
index e32cbb76a3..0dbc3beb71 100644
--- a/src/Bup/Bit.Bup/Scripts/bit-bup.progress.ts
+++ b/src/Bup/Bit.Bup/Scripts/bit-bup.progress.ts
@@ -1,4 +1,4 @@
-window['bit-bup.progress version'] = '8.11.0-pre-04';
+window['bit-bup.progress version'] = '8.11.0-pre-05';
 
 ; (function () {
     (window as any).startBupProgress = (showLogs: boolean, showAssets: boolean, appContainerSelector: string, hideApp: boolean, autoHide: boolean) => {
diff --git a/src/Bup/Bit.Bup/Scripts/bit-bup.ts b/src/Bup/Bit.Bup/Scripts/bit-bup.ts
index ee13913979..01880291cc 100644
--- a/src/Bup/Bit.Bup/Scripts/bit-bup.ts
+++ b/src/Bup/Bit.Bup/Scripts/bit-bup.ts
@@ -1,5 +1,5 @@
 var BitBup = BitBup || {};
-BitBup.version = window['bit-bup version'] = '8.11.0-pre-04';
+BitBup.version = window['bit-bup version'] = '8.11.0-pre-05';
 
 declare const Blazor: any;
 
diff --git a/src/Butil/Bit.Butil/Scripts/butil.ts b/src/Butil/Bit.Butil/Scripts/butil.ts
index 87f0a46de3..6fe22c6389 100644
--- a/src/Butil/Bit.Butil/Scripts/butil.ts
+++ b/src/Butil/Bit.Butil/Scripts/butil.ts
@@ -1,2 +1,2 @@
 var BitButil = BitButil || {};
-BitButil.version = window['bit-butil version'] = '8.11.0-pre-04';
\ No newline at end of file
+BitButil.version = window['bit-butil version'] = '8.11.0-pre-05';
\ No newline at end of file
diff --git a/src/Templates/BlazorEmpty/Bit.BlazorEmpty/BlazorEmpty.Client/BlazorEmpty.Client.csproj b/src/Templates/BlazorEmpty/Bit.BlazorEmpty/BlazorEmpty.Client/BlazorEmpty.Client.csproj
index 3ddcfd1e6f..38ae2b98b7 100644
--- a/src/Templates/BlazorEmpty/Bit.BlazorEmpty/BlazorEmpty.Client/BlazorEmpty.Client.csproj
+++ b/src/Templates/BlazorEmpty/Bit.BlazorEmpty/BlazorEmpty.Client/BlazorEmpty.Client.csproj
@@ -1,4 +1,4 @@
-<!-- Generated by bit-empty template v-8.11.0-pre-04 -->
+<!-- Generated by bit-empty template v-8.11.0-pre-05 -->
 
 <Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
 
@@ -16,14 +16,14 @@
   </ItemGroup>
 
   <ItemGroup>
-    <PackageReference Include="Bit.BlazorUI" Version="8.11.0-pre-04" />
+    <PackageReference Include="Bit.BlazorUI" Version="8.11.0-pre-05" />
 
-    <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-04">
+    <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05">
         <PrivateAssets>all</PrivateAssets>
         <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
     </PackageReference>
 
-    <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-04">
+    <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05">
         <PrivateAssets>all</PrivateAssets>
         <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
     </PackageReference>
diff --git a/src/Templates/BlazorEmpty/Bit.BlazorEmpty/BlazorEmpty/BlazorEmpty.csproj b/src/Templates/BlazorEmpty/Bit.BlazorEmpty/BlazorEmpty/BlazorEmpty.csproj
index f72021df19..1010ed572a 100644
--- a/src/Templates/BlazorEmpty/Bit.BlazorEmpty/BlazorEmpty/BlazorEmpty.csproj
+++ b/src/Templates/BlazorEmpty/Bit.BlazorEmpty/BlazorEmpty/BlazorEmpty.csproj
@@ -1,4 +1,4 @@
-<!-- Generated by bit-empty template v-8.11.0-pre-04 -->
+<!-- Generated by bit-empty template v-8.11.0-pre-05 -->
 
 <Project Sdk="Microsoft.NET.Sdk.Web">
 
@@ -18,14 +18,14 @@
   <!--#endif -->
 
   <ItemGroup>
-    <PackageReference Include="Bit.BlazorUI" Version="8.11.0-pre-04" />
+    <PackageReference Include="Bit.BlazorUI" Version="8.11.0-pre-05" />
 
-    <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-04">
+    <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05">
         <PrivateAssets>all</PrivateAssets>
         <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
     </PackageReference>
 
-    <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-04">
+    <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05">
         <PrivateAssets>all</PrivateAssets>
         <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
     </PackageReference>
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Boilerplate.Client.Core.csproj b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Boilerplate.Client.Core.csproj
index 74a7a90519..559008671d 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Boilerplate.Client.Core.csproj
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Boilerplate.Client.Core.csproj
@@ -16,18 +16,18 @@
         <Content Remove="appsettings*.json" />
         <EmbeddedResource Include="appsettings*.json" />
 
-        <PackageReference Include="Bit.Butil" Version="8.11.0-pre-04" />
-        <PackageReference Include="Bit.BlazorUI" Version="8.11.0-pre-04" />
-        <PackageReference Include="Bit.BlazorUI.Icons" Version="8.11.0-pre-04" />
-        <PackageReference Include="Bit.BlazorUI.Assets" Version="8.11.0-pre-04" />
+        <PackageReference Include="Bit.Butil" Version="8.11.0-pre-05" />
+        <PackageReference Include="Bit.BlazorUI" Version="8.11.0-pre-05" />
+        <PackageReference Include="Bit.BlazorUI.Icons" Version="8.11.0-pre-05" />
+        <PackageReference Include="Bit.BlazorUI.Assets" Version="8.11.0-pre-05" />
         <!--/+:msbuild-conditional:noEmit -->
-        <PackageReference Condition=" '$(offlineDb)' == 'true' OR '$(offlineDb)' == ''" Include="Bit.Besql" Version="8.11.0-pre-04" />
+        <PackageReference Condition=" '$(offlineDb)' == 'true' OR '$(offlineDb)' == ''" Include="Bit.Besql" Version="8.11.0-pre-05" />
         <PackageReference Condition=" '$(signalr)' == 'true' OR '$(signalr)' == ''" Include="Microsoft.AspNetCore.SignalR.Client" Version="8.0.8" />
         <PackageReference Condition=" '$(offlineDb)' == 'true' OR '$(offlineDb)' == ''" Include="Microsoft.EntityFrameworkCore.Sqlite" Version="8.0.8" />
-        <PackageReference Include="Bit.BlazorUI.Extras" Version="8.11.0-pre-04" />
+        <PackageReference Include="Bit.BlazorUI.Extras" Version="8.11.0-pre-05" />
         <!--/-:msbuild-conditional:noEmit -->
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-04" PrivateAssets="all" />
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-04" PrivateAssets="all" />
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05" PrivateAssets="all" />
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05" PrivateAssets="all" />
         <PackageReference Include="Microsoft.AspNetCore.Components.Authorization" Version="8.0.8" />
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.8" />
         <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.8" />
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/Boilerplate.Client.Maui.csproj b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/Boilerplate.Client.Maui.csproj
index f3e1db1b6e..d4825b16ff 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/Boilerplate.Client.Maui.csproj
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/Boilerplate.Client.Maui.csproj
@@ -117,8 +117,8 @@
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-04" PrivateAssets="all" />
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-04" PrivateAssets="all" />
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05" PrivateAssets="all" />
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05" PrivateAssets="all" />
         <Content Remove="compilerconfig.json" />
         <None Include="compilerconfig.json" />
         <Content Remove="Properties\launchSettings.json" />
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Web/Boilerplate.Client.Web.csproj b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Web/Boilerplate.Client.Web.csproj
index b5bee52a90..03c01476eb 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Web/Boilerplate.Client.Web.csproj
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Web/Boilerplate.Client.Web.csproj
@@ -32,9 +32,9 @@
     <ItemGroup>
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.8" />
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.8" PrivateAssets="all" />
-        <PackageReference Include="Bit.Bswup" Version="8.11.0-pre-04" />
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-04" PrivateAssets="all" />
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-04" PrivateAssets="all" />
+        <PackageReference Include="Bit.Bswup" Version="8.11.0-pre-05" />
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05" PrivateAssets="all" />
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05" PrivateAssets="all" />
         <!--/+:msbuild-conditional:noEmit -->
         <PackageReference Condition=" '$(appInsights)' == 'true' OR '$(appInsights)' == '' " Include="BlazorApplicationInsights" Version="3.1.0" />
         <PackageReference Condition="'$(sample)' == 'Admin' OR '$(sample)' == ''" Include="Newtonsoft.Json" Version="13.0.3" />
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Web/wwwroot/service-worker.js b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Web/wwwroot/service-worker.js
index ae0a07a746..06e9da31d0 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Web/wwwroot/service-worker.js
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Web/wwwroot/service-worker.js
@@ -1,4 +1,4 @@
-// bit version: 8.11.0-pre-04
+// bit version: 8.11.0-pre-05
 // https://github.com/bitfoundation/bitplatform/tree/develop/src/Bswup
 
 self.assetsInclude = [];
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/Boilerplate.Client.Windows.csproj b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/Boilerplate.Client.Windows.csproj
index 6abfd8b65c..1f7fe6ec9d 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/Boilerplate.Client.Windows.csproj
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/Boilerplate.Client.Windows.csproj
@@ -24,8 +24,8 @@
         <Using Include="Boilerplate.Shared" />
         <Watch Remove="*.scss" />
 
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-04" PrivateAssets="all" />
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-04" PrivateAssets="all" />
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05" PrivateAssets="all" />
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05" PrivateAssets="all" />
         <PackageReference Include="EmbedIO" Version="3.5.2" />
         <PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="8.0.0" />
         <PackageReference Include="Microsoft.Extensions.Logging.Console" Version="8.0.0" />
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Directory.Build.props b/src/Templates/Boilerplate/Bit.Boilerplate/src/Directory.Build.props
index 7404110aab..ac6abd8943 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Directory.Build.props
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Directory.Build.props
@@ -1,4 +1,4 @@
-<!-- Generated by bit-bp template v-8.11.0-pre-04 -->
+<!-- Generated by bit-bp template v-8.11.0-pre-05 -->
 <Project>
     <!--/-:msbuild-conditional:noEmit -->
     <PropertyGroup>
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Boilerplate.Server.Api.csproj b/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Boilerplate.Server.Api.csproj
index 0cf8bb5dc0..5634f64678 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Boilerplate.Server.Api.csproj
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Boilerplate.Server.Api.csproj
@@ -7,8 +7,8 @@
     </PropertyGroup>
 
     <ItemGroup>
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-04" PrivateAssets="all" />
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-04" PrivateAssets="all" />
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05" PrivateAssets="all" />
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05" PrivateAssets="all" />
         <PackageReference Condition=" '$(appInsights)' == 'true' OR '$(appInsights)' == '' " Include="Microsoft.ApplicationInsights.AspNetCore" Version="2.22.0" />
         <PackageReference Include="Humanizer" Version="2.14.1" />
     </ItemGroup>
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Web/Boilerplate.Server.Web.csproj b/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Web/Boilerplate.Server.Web.csproj
index ec366c5f8d..528b649108 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Web/Boilerplate.Server.Web.csproj
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Web/Boilerplate.Server.Web.csproj
@@ -7,8 +7,8 @@
     </PropertyGroup>
     
     <ItemGroup>
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-04" PrivateAssets="all" />
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-04" PrivateAssets="all" />
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05" PrivateAssets="all" />
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05" PrivateAssets="all" />
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="8.0.8" />
         <PackageReference Condition=" '$(offlineDb)' == 'true' OR '$(offlineDb)' == ''" Include="Microsoft.EntityFrameworkCore.Tools" Version="8.0.8" PrivateAssets="all" />
         <PackageReference Condition=" '$(offlineDb)' == 'true' OR '$(offlineDb)' == ''" Include="Microsoft.EntityFrameworkCore.Design" Version="8.0.8" PrivateAssets="all" />
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Boilerplate.Shared.csproj b/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Boilerplate.Shared.csproj
index 914d1f9603..2c967f964a 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Boilerplate.Shared.csproj
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Boilerplate.Shared.csproj
@@ -14,8 +14,8 @@
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-04" PrivateAssets="all" />
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-04" PrivateAssets="all" />
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05" PrivateAssets="all" />
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05" PrivateAssets="all" />
         <PackageReference Include="Microsoft.AspNetCore.Authorization" Version="8.0.8" />
         <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.8" />
         <PackageReference Include="Microsoft.Extensions.DependencyInjection.Abstractions" Version="8.0.1" />
diff --git a/src/Websites/Careers/src/Bit.Websites.Careers.Client/Bit.Websites.Careers.Client.csproj b/src/Websites/Careers/src/Bit.Websites.Careers.Client/Bit.Websites.Careers.Client.csproj
index 6c5f4b5f86..a4ccfe1d16 100644
--- a/src/Websites/Careers/src/Bit.Websites.Careers.Client/Bit.Websites.Careers.Client.csproj
+++ b/src/Websites/Careers/src/Bit.Websites.Careers.Client/Bit.Websites.Careers.Client.csproj
@@ -24,15 +24,15 @@
         <Content Remove="appsettings.json" />
         <EmbeddedResource Include="appsettings.json" />
 
-        <PackageReference Include="Bit.BlazorUI" Version="8.11.0-pre-04" />
-        <PackageReference Include="Bit.BlazorUI.Icons" Version="8.11.0-pre-04" />
+        <PackageReference Include="Bit.BlazorUI" Version="8.11.0-pre-05" />
+        <PackageReference Include="Bit.BlazorUI.Icons" Version="8.11.0-pre-05" />
         <BlazorWebAssemblyLazyLoad Include="Bit.BlazorUI.Icons.wasm" />
-        <PackageReference Include="Bit.BlazorUI.Assets" Version="8.11.0-pre-04" />
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-04">
+        <PackageReference Include="Bit.BlazorUI.Assets" Version="8.11.0-pre-05" />
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-04">
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
diff --git a/src/Websites/Careers/src/Bit.Websites.Careers.Server/Bit.Websites.Careers.Server.csproj b/src/Websites/Careers/src/Bit.Websites.Careers.Server/Bit.Websites.Careers.Server.csproj
index 6f0984bde3..c1db280017 100644
--- a/src/Websites/Careers/src/Bit.Websites.Careers.Server/Bit.Websites.Careers.Server.csproj
+++ b/src/Websites/Careers/src/Bit.Websites.Careers.Server/Bit.Websites.Careers.Server.csproj
@@ -9,11 +9,11 @@
         <ProjectReference Include="..\Bit.Websites.Careers.Client\Bit.Websites.Careers.Client.csproj" />
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="8.0.8" />
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.8" />
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-04">
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-04">
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
diff --git a/src/Websites/Careers/src/Bit.Websites.Careers.Shared/Bit.Websites.Careers.Shared.csproj b/src/Websites/Careers/src/Bit.Websites.Careers.Shared/Bit.Websites.Careers.Shared.csproj
index c2b4819273..2d097c5cfd 100644
--- a/src/Websites/Careers/src/Bit.Websites.Careers.Shared/Bit.Websites.Careers.Shared.csproj
+++ b/src/Websites/Careers/src/Bit.Websites.Careers.Shared/Bit.Websites.Careers.Shared.csproj
@@ -6,11 +6,11 @@
     </PropertyGroup>
 
     <ItemGroup>
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-04">
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-04">
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
diff --git a/src/Websites/Careers/src/Directory.Build.props b/src/Websites/Careers/src/Directory.Build.props
index d7ec47d70e..d4f882989d 100644
--- a/src/Websites/Careers/src/Directory.Build.props
+++ b/src/Websites/Careers/src/Directory.Build.props
@@ -1,4 +1,4 @@
-<!-- Generated by bit-dual template v-8.11.0-pre-04 -->
+<!-- Generated by bit-dual template v-8.11.0-pre-05 -->
 <Project>
     <PropertyGroup>
         <LangVersion>12.0</LangVersion>
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Bit.Websites.Platform.Client.csproj b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Bit.Websites.Platform.Client.csproj
index 97e8f2466f..7ff0236276 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Bit.Websites.Platform.Client.csproj
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Bit.Websites.Platform.Client.csproj
@@ -24,16 +24,16 @@
         <Content Remove="appsettings.json" />
         <EmbeddedResource Include="appsettings.json" />
 
-        <PackageReference Include="Bit.Butil" Version="8.11.0-pre-04" />
-        <PackageReference Include="Bit.BlazorUI" Version="8.11.0-pre-04" />
-        <PackageReference Include="Bit.BlazorUI.Icons" Version="8.11.0-pre-04" />
+        <PackageReference Include="Bit.Butil" Version="8.11.0-pre-05" />
+        <PackageReference Include="Bit.BlazorUI" Version="8.11.0-pre-05" />
+        <PackageReference Include="Bit.BlazorUI.Icons" Version="8.11.0-pre-05" />
         <BlazorWebAssemblyLazyLoad Include="Bit.BlazorUI.Icons.wasm" />
-        <PackageReference Include="Bit.BlazorUI.Assets" Version="8.11.0-pre-04" />
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-04">
+        <PackageReference Include="Bit.BlazorUI.Assets" Version="8.11.0-pre-05" />
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-04">
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates03GettingStartedPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates03GettingStartedPage.razor
index 3ea09573cd..45305301c8 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates03GettingStartedPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates03GettingStartedPage.razor
@@ -128,8 +128,8 @@ rm dotnet.tar.gz</CodeBox>
                             }
                         </li>
                         <li>
-                            <div style="margin-bottom:8px">Install <a href="https://www.nuget.org/packages/Bit.Boilerplate/8.11.0-pre-04" target="_blank">Bit Boilerplate</a> project template</div>
-                            <CodeBox>dotnet new install Bit.Boilerplate::8.11.0-pre-04</CodeBox>
+                            <div style="margin-bottom:8px">Install <a href="https://www.nuget.org/packages/Bit.Boilerplate/8.11.0-pre-05" target="_blank">Bit Boilerplate</a> project template</div>
+                            <CodeBox>dotnet new install Bit.Boilerplate::8.11.0-pre-05</CodeBox>
                         </li>
                         @if (showCrossPlatform && devOS is "Windows")
                         {
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates03GettingStartedPage.razor.cs b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates03GettingStartedPage.razor.cs
index 28087c35a8..8fa7ffa218 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates03GettingStartedPage.razor.cs
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates03GettingStartedPage.razor.cs
@@ -78,7 +78,7 @@ private async Task CopyCommandsToClipboard()
             command:"dotnet nuget add source \"https://api.nuget.org/v3/index.json\" --name \"nuget.org\"; dotnet workload install wasm-tools;"),
 
             (text:@"echo 'Install the Bit.Boilerplate project template https://www.nuget.org/packages/Boilerplate.Templates';",
-            command:"dotnet new install Bit.Boilerplate::8.11.0-pre-04;"),
+            command:"dotnet new install Bit.Boilerplate::8.11.0-pre-05;"),
         ],
 
         [CommandGroup.Additional] =
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Server/Bit.Websites.Platform.Server.csproj b/src/Websites/Platform/src/Bit.Websites.Platform.Server/Bit.Websites.Platform.Server.csproj
index 9f97bef9bd..498ad950e0 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Server/Bit.Websites.Platform.Server.csproj
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Server/Bit.Websites.Platform.Server.csproj
@@ -9,11 +9,11 @@
         <ProjectReference Include="..\Bit.Websites.Platform.Client\Bit.Websites.Platform.Client.csproj" />
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="8.0.8" />
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.8" />
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-04">
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-04">
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Shared/Bit.Websites.Platform.Shared.csproj b/src/Websites/Platform/src/Bit.Websites.Platform.Shared/Bit.Websites.Platform.Shared.csproj
index c2b4819273..2d097c5cfd 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Shared/Bit.Websites.Platform.Shared.csproj
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Shared/Bit.Websites.Platform.Shared.csproj
@@ -6,11 +6,11 @@
     </PropertyGroup>
 
     <ItemGroup>
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-04">
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-04">
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
diff --git a/src/Websites/Platform/src/Directory.Build.props b/src/Websites/Platform/src/Directory.Build.props
index 1aae5eabcd..52feeee176 100644
--- a/src/Websites/Platform/src/Directory.Build.props
+++ b/src/Websites/Platform/src/Directory.Build.props
@@ -1,4 +1,4 @@
-<!-- Generated by bit-dual template v-8.11.0-pre-04 -->
+<!-- Generated by bit-dual template v-8.11.0-pre-05 -->
 <Project>
     <PropertyGroup>
         <LangVersion>preview</LangVersion>
diff --git a/src/Websites/Sales/src/Bit.Websites.Sales.Client/Bit.Websites.Sales.Client.csproj b/src/Websites/Sales/src/Bit.Websites.Sales.Client/Bit.Websites.Sales.Client.csproj
index db2b1a0091..f6107537b3 100644
--- a/src/Websites/Sales/src/Bit.Websites.Sales.Client/Bit.Websites.Sales.Client.csproj
+++ b/src/Websites/Sales/src/Bit.Websites.Sales.Client/Bit.Websites.Sales.Client.csproj
@@ -24,15 +24,15 @@
         <Content Remove="appsettings.json" />
         <EmbeddedResource Include="appsettings.json" />
 
-        <PackageReference Include="Bit.BlazorUI" Version="8.11.0-pre-04" />
-        <PackageReference Include="Bit.BlazorUI.Icons" Version="8.11.0-pre-04" />
+        <PackageReference Include="Bit.BlazorUI" Version="8.11.0-pre-05" />
+        <PackageReference Include="Bit.BlazorUI.Icons" Version="8.11.0-pre-05" />
         <BlazorWebAssemblyLazyLoad Include="Bit.BlazorUI.Icons.wasm" />
-        <PackageReference Include="Bit.BlazorUI.Assets" Version="8.11.0-pre-04" />
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-04">
+        <PackageReference Include="Bit.BlazorUI.Assets" Version="8.11.0-pre-05" />
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-04">
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
diff --git a/src/Websites/Sales/src/Bit.Websites.Sales.Server/Bit.Websites.Sales.Server.csproj b/src/Websites/Sales/src/Bit.Websites.Sales.Server/Bit.Websites.Sales.Server.csproj
index 1df11ff9ea..4a468329f7 100644
--- a/src/Websites/Sales/src/Bit.Websites.Sales.Server/Bit.Websites.Sales.Server.csproj
+++ b/src/Websites/Sales/src/Bit.Websites.Sales.Server/Bit.Websites.Sales.Server.csproj
@@ -9,11 +9,11 @@
         <ProjectReference Include="..\Bit.Websites.Sales.Client\Bit.Websites.Sales.Client.csproj" />
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="8.0.8" />
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.8" />
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-04">
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-04">
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
diff --git a/src/Websites/Sales/src/Bit.Websites.Sales.Shared/Bit.Websites.Sales.Shared.csproj b/src/Websites/Sales/src/Bit.Websites.Sales.Shared/Bit.Websites.Sales.Shared.csproj
index c2b4819273..2d097c5cfd 100644
--- a/src/Websites/Sales/src/Bit.Websites.Sales.Shared/Bit.Websites.Sales.Shared.csproj
+++ b/src/Websites/Sales/src/Bit.Websites.Sales.Shared/Bit.Websites.Sales.Shared.csproj
@@ -6,11 +6,11 @@
     </PropertyGroup>
 
     <ItemGroup>
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-04">
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-04">
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
diff --git a/src/Websites/Sales/src/Directory.Build.props b/src/Websites/Sales/src/Directory.Build.props
index fe87d5a4d9..0e9bc9c3b8 100644
--- a/src/Websites/Sales/src/Directory.Build.props
+++ b/src/Websites/Sales/src/Directory.Build.props
@@ -1,4 +1,4 @@
-<!-- Generated by bit-dual template v-8.11.0-pre-04 -->
+<!-- Generated by bit-dual template v-8.11.0-pre-05 -->
 <Project>
     <PropertyGroup>
         <LangVersion>12.0</LangVersion>

From f6439e4f075b80fc595035d9d113db34d4581816 Mon Sep 17 00:00:00 2001
From: Yaser Moradi <ysmoradi@outlook.com>
Date: Tue, 3 Sep 2024 20:56:49 +0200
Subject: [PATCH 07/38] feat(templates): add ODataQuery helper class to
 Boilerplate #8486 (#8487)

---
 .../Pages/Categories/CategoriesPage.razor.cs  | 22 +++---
 .../Pages/Products/ProductsPage.razor         | 17 ++++-
 .../Pages/Products/ProductsPage.razor.cs      | 31 +++++---
 .../Services/ODataQuery.cs                    | 72 +++++++++++++++++++
 .../src/Shared/Controllers/IAppController.cs  |  1 +
 5 files changed, 120 insertions(+), 23 deletions(-)
 create mode 100644 src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/ODataQuery.cs

diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Categories/CategoriesPage.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Categories/CategoriesPage.razor.cs
index a7f372cf9d..6f65ba52ab 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Categories/CategoriesPage.razor.cs
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Categories/CategoriesPage.razor.cs
@@ -42,27 +42,23 @@ private void PrepareGridDataProvider()
 
             try
             {
-                // https://docs.microsoft.com/en-us/odata/concepts/queryoptions-overview
-
-                categoryController.AddQueryStrings(new()
+                var odataQ = new ODataQuery
                 {
-                    { "$top", req.Count ?? 10 },
-                    { "$skip", req.StartIndex }
-                });
+                    Top = req.Count ?? 10,
+                    Skip = req.StartIndex,
+                    OrderBy = string.Join(", ", req.GetSortByProperties().Select(p => $"{p.PropertyName} {(p.Direction == BitDataGridSortDirection.Ascending ? "asc" : "desc")}"))
+                };
 
-                if (string.IsNullOrEmpty(categoryNameFilter) is false)
+                if (string.IsNullOrEmpty(CategoryNameFilter) is false)
                 {
-                    categoryController.AddQueryString("$filter", $"contains(tolower(Name),'{categoryNameFilter.ToLower()}')");
+                    odataQ.Filter = $"contains(tolower({nameof(CategoryDto.Name)}),'{CategoryNameFilter.ToLower()}')";
                 }
 
-                if (req.GetSortByProperties().Any())
-                {
-                    categoryController.AddQueryString("$orderby", string.Join(", ", req.GetSortByProperties().Select(p => $"{p.PropertyName} {(p.Direction == BitDataGridSortDirection.Ascending ? "asc" : "desc")}")));
-                }
+                categoryController.AddQueryString(odataQ.ToString());
 
                 var data = await categoryController.GetCategories(CurrentCancellationToken);
 
-                return BitDataGridItemsProviderResult.From(data.Items!, (int)data.TotalCount);
+                return BitDataGridItemsProviderResult.From(data!.Items!, (int)data!.TotalCount);
             }
             catch (Exception exp)
             {
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Products/ProductsPage.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Products/ProductsPage.razor
index 07a86653f7..6da2ca6d14 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Products/ProductsPage.razor
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Products/ProductsPage.razor
@@ -30,7 +30,22 @@
                         </BitStack>
                     </ColumnOptions>
                 </BitDataGridPropertyColumn>
-                <BitDataGridPropertyColumn Title="@Localizer[nameof(AppStrings.Category)]" Property="p => p!.CategoryName" Sortable="true" Align="BitDataGridAlign.Left" />
+                <BitDataGridPropertyColumn Title="@Localizer[nameof(AppStrings.Category)]" Property="p => p!.CategoryName" Sortable="true" Align="BitDataGridAlign.Left">
+                    <ColumnOptions>
+                        <BitStack Horizontal Gap="8px">
+                            <BitSearchBox @bind-Value="CategoryNameFilter"
+                                          Immediate DebounceTime="500"
+                                          Placeholder="@Localizer[(nameof(AppStrings.SearchOnName))]"
+                                          InputHtmlAttributes="@(new Dictionary<string, object> {{"autofocus", true}})" />
+                            @if (isLoading)
+                            {
+                                <div class="loading-container">
+                                    <BitEllipsisLoading CustomSize="32" />
+                                </div>
+                            }
+                        </BitStack>
+                    </ColumnOptions>
+                </BitDataGridPropertyColumn>
                 <BitDataGridPropertyColumn Title="@Localizer[nameof(AppStrings.Price)]" Property="p => p!.Price" Sortable="true" Align="BitDataGridAlign.Left" Format="C2" />
                 <BitDataGridTemplateColumn Title="@Localizer[(nameof(AppStrings.Action))]" Align="BitDataGridAlign.Center" Context="product">
                     <BitButton IconName="@BitIconName.Edit"
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Products/ProductsPage.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Products/ProductsPage.razor.cs
index 1c585e780b..d306e490f0 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Products/ProductsPage.razor.cs
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Products/ProductsPage.razor.cs
@@ -12,6 +12,7 @@ public partial class ProductsPage
     private bool isLoading;
     private AddOrEditProductModal? modal;
     private string productNameFilter = string.Empty;
+    private string categoryNameFilter = string.Empty;
 
     private ConfirmMessageBox confirmMessageBox = default!;
     private BitDataGrid<ProductDto>? dataGrid;
@@ -28,6 +29,16 @@ string ProductNameFilter
         }
     }
 
+    string CategoryNameFilter
+    {
+        get => categoryNameFilter;
+        set
+        {
+            categoryNameFilter = value;
+            _ = RefreshData();
+        }
+    }
+
     protected override async Task OnInitAsync()
     {
         PrepareGridDataProvider();
@@ -43,23 +54,25 @@ private void PrepareGridDataProvider()
 
             try
             {
-                // https://docs.microsoft.com/en-us/odata/concepts/queryoptions-overview
-                productController.AddQueryStrings(new ()
+                var odataQ = new ODataQuery
                 {
-                    { "$top", req.Count ?? 10 },
-                    { "$skip", req.StartIndex }
-                });
+                    Top = req.Count ?? 10,
+                    Skip = req.StartIndex,
+                    OrderBy = string.Join(", ", req.GetSortByProperties().Select(p => $"{p.PropertyName} {(p.Direction == BitDataGridSortDirection.Ascending ? "asc" : "desc")}"))
+                };
 
-                if (string.IsNullOrEmpty(productNameFilter) is false)
+                if (string.IsNullOrEmpty(ProductNameFilter) is false)
                 {
-                    productController.AddQueryString("$filter", $"contains(tolower(Name),'{productNameFilter.ToLower()}')");
+                    odataQ.Filter = $"contains(tolower({nameof(ProductDto.Name)}),'{ProductNameFilter.ToLower()}')";
                 }
 
-                if (req.GetSortByProperties().Any())
+                if (string.IsNullOrEmpty(CategoryNameFilter) is false)
                 {
-                    productController.AddQueryString("$orderby", string.Join(", ", req.GetSortByProperties().Select(p => $"{p.PropertyName} {(p.Direction == BitDataGridSortDirection.Ascending ? "asc" : "desc")}")));
+                    odataQ.AndFilter = $"contains(tolower({nameof(ProductDto.CategoryName)}),'{CategoryNameFilter.ToLower()}')";
                 }
 
+                productController.AddQueryString(odataQ.ToString());
+
                 var data = await productController.GetProducts(CurrentCancellationToken);
 
                 return BitDataGridItemsProviderResult.From(data!.Items!, (int)data!.TotalCount);
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/ODataQuery.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/ODataQuery.cs
new file mode 100644
index 0000000000..9b05882d82
--- /dev/null
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/ODataQuery.cs
@@ -0,0 +1,72 @@
+using System.Web;
+
+namespace Boilerplate.Client.Core.Services;
+
+/// <summary>
+/// https://docs.microsoft.com/en-us/odata/concepts/queryoptions-overview
+/// </summary>
+public class ODataQuery
+{
+    public int? Top { get; set; }
+
+    public int? Skip { get; set; }
+
+    public string? Filter { get; set; }
+
+    public string AndFilter
+    {
+        set => Filter = Filter != null ? $"{Filter} and {value}" : value;
+    }
+
+    public string OrFilter
+    {
+        set => Filter = Filter != null ? $"{Filter} or {value}" : value;
+    }
+
+    public string? OrderBy { get; set; }
+    public string? Select { get; set; }
+    public string? Expand { get; set; }
+    public string? Search { get; set; }
+
+    public override string ToString()
+    {
+        var qs = HttpUtility.ParseQueryString(string.Empty);
+
+        if (Top is not null)
+        {
+            qs.Add("$top", Top.ToString());
+        }
+
+        if (Skip is not null)
+        {
+            qs.Add("$skip", Skip.ToString());
+        }
+
+        if (string.IsNullOrEmpty(Filter) is false)
+        {
+            qs.Add("$filter", Filter);
+        }
+
+        if (string.IsNullOrEmpty(OrderBy) is false)
+        {
+            qs.Add("$orderby", OrderBy);
+        }
+
+        if (string.IsNullOrEmpty(Select) is false)
+        {
+            qs.Add("$select", Select);
+        }
+
+        if (string.IsNullOrEmpty(Expand) is false)
+        {
+            qs.Add("$expand", Expand);
+        }
+
+        if (string.IsNullOrEmpty(Search) is false)
+        {
+            qs.Add("$search", Search);
+        }
+
+        return qs.ToString()!;
+    }
+}
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Controllers/IAppController.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Controllers/IAppController.cs
index b25a533413..d75e46c7f2 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Controllers/IAppController.cs
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Controllers/IAppController.cs
@@ -2,6 +2,7 @@
 
 public interface IAppController
 {
+    void AddQueryString(string existingQueryString) { }
     void AddQueryString(string key, object? value) { }
     void AddQueryStrings(Dictionary<string, object?> queryString) { }
 }

From edcbbb7d8ae4bff58c5998875471033ba8d48f7b Mon Sep 17 00:00:00 2001
From: Saleh Yusefnejad <msynk@outlook.com>
Date: Tue, 3 Sep 2024 23:04:18 +0330
Subject: [PATCH 08/38] feat(infra): update all projects for latest changes to
 BlazorUI #8492 (#8493)

---
 .../Utilities/Overlay/BitOverlayDemo.razor.cs |  2 +-
 .../BlazorEmpty/Components/Pages/About.razor  |  8 +--
 .../BlazorEmpty/Components/Pages/Home.razor   | 12 ++--
 .../Pages/Identity/ConfirmPage.razor          | 40 ++++++------
 .../Pages/Identity/ForgotPasswordPage.razor   |  8 +--
 .../Identity/Profile/ChangeEmailSection.razor | 16 ++---
 .../Profile/ChangePhoneNumberSection.razor    | 12 ++--
 .../Profile/DeleteAccountSection.razor        |  8 +--
 .../Identity/Profile/TwoFactorSection.razor   |  4 +-
 .../Identity/Profile/UserDataSection.razor    |  4 +-
 .../Profile/UserSessionsSection.razor         |  4 +-
 .../Pages/Identity/ResetPasswordPage.razor    | 16 ++---
 .../Pages/Identity/SignInPage.razor           |  4 +-
 .../Pages/Identity/SignUpPage.razor           |  4 +-
 .../Offline/OfflineEditProfilePage.razor      |  4 +-
 .../Components/Pages/AboutPage.razor          |  2 +-
 .../Components/Pages/AboutPage.razor          |  2 +-
 .../Pages/AboutUsPage.razor                   | 34 +++++-----
 .../Pages/Besql/Besql01OverviewPage.razor     | 20 +++---
 .../Pages/Besql/Besql02InstallPage.razor      | 10 +--
 .../Pages/Besql/Besql03UsagePage.razor        | 12 ++--
 .../Pages/Bswup/Bswup01OverviewPage.razor     | 14 ++---
 .../Pages/Bswup/Bswup02InstallPage.razor      | 10 +--
 .../Pages/Bswup/Bswup03ScriptsPage.razor      | 10 +--
 .../Pages/Bswup/Bswup04EventsPage.razor       | 10 +--
 .../Bswup/Bswup05ServiceWorkerPage.razor      |  8 +--
 .../Pages/Bswup/Bswup06ProgressPage.razor     |  8 +--
 .../Pages/Butil/Butil01OverviewPage.razor     | 20 +++---
 .../Pages/Butil/Butil02InstallPage.razor      | 10 +--
 .../Pages/Butil/Butil03SetupPage.razor        | 10 +--
 .../Pages/Butil/Butil04CryptoPage.razor       | 10 +--
 .../Pages/Butil/Butil05ClipboardPage.razor    | 10 +--
 .../Pages/Butil/Butil06KeyboardPage.razor     | 10 +--
 .../Pages/Butil/Butil07ConsolePage.razor      | 10 +--
 .../Pages/Butil/Butil08StoragePage.razor      | 10 +--
 .../Pages/Butil/Butil09CookiePage.razor       | 10 +--
 .../Pages/Butil/Butil10HistoryPage.razor      | 10 +--
 .../Pages/Butil/Butil11ElementPage.razor      | 10 +--
 .../Pages/Butil/Butil12WindowPage.razor       | 10 +--
 .../Pages/Butil/Butil13DocumentPage.razor     | 10 +--
 .../Pages/Butil/Butil14NavigatorPage.razor    | 10 +--
 .../Pages/Butil/Butil15LocationPage.razor     | 10 +--
 .../Pages/Butil/Butil16ScreenPage.razor       | 10 +--
 .../Butil/Butil17VisualViewportPage.razor     | 10 +--
 .../Butil/Butil18ScreenOrientationPage.razor  | 10 +--
 .../Pages/ContactUsPage.razor                 | 16 ++---
 .../Pages/Home/HomePage.razor                 | 62 +++++++++----------
 .../Pages/Home/Products.razor                 | 44 ++++++-------
 .../Pages/Lcnc/Lcnc01OverviewPage.razor       |  6 +-
 .../Pages/Lcnc/Lcnc02BenefitsPage.razor       |  6 +-
 .../Pages/Lcnc/Lcnc03SpecsPage.razor          |  6 +-
 .../Pages/Lcnc/Lcnc04CustomizationsPage.razor |  6 +-
 .../Pages/Lcnc/Lcnc05ComparisonPage.razor     |  6 +-
 .../Pages/Lcnc/Lcnc06StatsPage.razor          |  6 +-
 .../Pages/Lcnc/LcncPage.razor                 | 56 ++++++++---------
 .../Pages/PricingPage.razor                   | 60 +++++++++---------
 .../Templates/Templates01OverviewPage.razor   | 18 +++---
 .../Templates/Templates02SamplesPage.razor    | 18 +++---
 .../Templates03GettingStartedPage.razor       | 26 ++++----
 .../Templates04ProjectStructurePage.razor     | 16 ++---
 .../Templates05CreateProjectPage.razor        | 32 +++++-----
 .../Shared/Footer.razor                       |  4 +-
 .../Components/ProcessAccordion.razor         |  2 +-
 .../Pages/YourTeamPage.razor                  |  4 +-
 64 files changed, 435 insertions(+), 435 deletions(-)

diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Overlay/BitOverlayDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Overlay/BitOverlayDemo.razor.cs
index 5e216aea28..d9148de57d 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Overlay/BitOverlayDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Overlay/BitOverlayDemo.razor.cs
@@ -177,7 +177,7 @@ turpis. In hac habitasse platea dictumst.
 <BitButton OnClick=""() => AutoToggleIsOpen = true"">Show Overlay</BitButton>
 
 <BitOverlay @bind-IsOpen=""AutoToggleIsOpen"" Class=""overlay"" AutoToggleScroll>
-    <BitStack HorizontalAlign=""BitStackAlignment.Stretch"">
+    <BitStack HorizontalAlign=""BitAlignment.Stretch"">
         <BitText Style=""color: dodgerblue;"" Typography=""BitTypography.H3"">Please wait...</BitText>
         <BitProgress Indeterminate Thickness=""10""/>
     </BitStack>
diff --git a/src/Templates/BlazorEmpty/Bit.BlazorEmpty/BlazorEmpty/Components/Pages/About.razor b/src/Templates/BlazorEmpty/Bit.BlazorEmpty/BlazorEmpty/Components/Pages/About.razor
index a7a769f432..bec001fa02 100644
--- a/src/Templates/BlazorEmpty/Bit.BlazorEmpty/BlazorEmpty/Components/Pages/About.razor
+++ b/src/Templates/BlazorEmpty/Bit.BlazorEmpty/BlazorEmpty/Components/Pages/About.razor
@@ -5,16 +5,16 @@
 <div class="page">
     <section class="bitplatform">
         <BitLink Href="https://bitplatform.dev" Target="_blank">
-            <BitTypography Variant="BitTypographyVariant.H1">
+            <BitText Typography="BitTypography.H1">
                 bit platform
-            </BitTypography>
+            </BitText>
         </BitLink>
     </section>
 
     <section class="vision">
-        <BitTypography Variant="BitTypographyVariant.H3">
+        <BitText Typography="BitTypography.H3">
             Our vision is to empower organizations and people to maximize their performance through
             high quality development services and products.
-        </BitTypography>
+        </BitText>
     </section>
 </div>
\ No newline at end of file
diff --git a/src/Templates/BlazorEmpty/Bit.BlazorEmpty/BlazorEmpty/Components/Pages/Home.razor b/src/Templates/BlazorEmpty/Bit.BlazorEmpty/BlazorEmpty/Components/Pages/Home.razor
index 0ff765fe7c..66c59a3b53 100644
--- a/src/Templates/BlazorEmpty/Bit.BlazorEmpty/BlazorEmpty/Components/Pages/Home.razor
+++ b/src/Templates/BlazorEmpty/Bit.BlazorEmpty/BlazorEmpty/Components/Pages/Home.razor
@@ -12,20 +12,20 @@
 <div class="page">
     <div class="hero @BitCss.Class.Color.Border.Disabled">
         <div class="container">
-            <BitTypography Variant="BitTypographyVariant.H1" Gutter>
+            <BitText Typography="BitTypography.H1" Gutter>
                 Hello World
-            </BitTypography>
+            </BitText>
 
-            <BitTypography Variant="BitTypographyVariant.Subtitle1" Gutter>
+            <BitText Typography="BitTypography.Subtitle1" Gutter>
                 Welcome to your bit Blazor Empty app
-            </BitTypography>
+            </BitText>
         </div>
     </div>
 
     <div class="section @BitCss.Class.Color.Border.Disabled">
-        <BitTypography Variant="BitTypographyVariant.H3" Gutter>
+        <BitText Typography="BitTypography.H3" Gutter>
             Counter
-        </BitTypography>
+        </BitText>
         <BitButton OnClick="() => _counter = 0" ButtonStyle="BitButtonStyle.Standard">Reset</BitButton>
         <BitButton OnClick="() => _counter++">Increase [@_counter]</BitButton>
     </div>
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/ConfirmPage.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/ConfirmPage.razor
index 79fd70da72..0b16ae1ce9 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/ConfirmPage.razor
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/ConfirmPage.razor
@@ -15,9 +15,9 @@
             }
         </div>
 
-        <BitTypography Variant="BitTypographyVariant.H4" Gutter>
+        <BitText Typography="BitTypography.H4" Gutter>
             @Localizer[nameof(AppStrings.ConfirmTitle)]
-        </BitTypography>
+        </BitText>
         <br />
         <BitPivot>
             @if (showEmailConfirmation)
@@ -26,11 +26,11 @@
                     <br />
                     @if (isEmailConfirmed is false)
                     {
-                        <BitTypography Variant="BitTypographyVariant.Subtitle1" Gutter>
+                        <BitText Typography="BitTypography.Subtitle1" Gutter>
                             @Localizer[nameof(AppStrings.ConfirmEmailSubtitle)]
                             <br />
                             @Localizer[nameof(AppStrings.ConfirmEmailMessage)]
-                        </BitTypography>
+                        </BitText>
                         <br />
                         <EditForm Model="emailModel" OnValidSubmit="WrapHandled(ConfirmEmail)" class="confirm-form">
                             <AppDataAnnotationsValidator />
@@ -59,12 +59,12 @@
                         </EditForm>
                         <br />
                         <br />
-                        <BitTypography Variant="BitTypographyVariant.Body1" Gutter>
+                        <BitText Typography="BitTypography.Body1" Gutter>
                             @Localizer[nameof(AppStrings.NotReceivedConfirmationEmailMessage)]
-                        </BitTypography>
-                        <BitTypography Variant="BitTypographyVariant.Body1" Gutter>
+                        </BitText>
+                        <BitText Typography="BitTypography.Body1" Gutter>
                             @Localizer[nameof(AppStrings.CheckSpamMailMessage)]
-                        </BitTypography>
+                        </BitText>
                         <br />
                         <BitButton IsLoading="isWaiting"
                                    ButtonType="BitButtonType.Button"
@@ -75,13 +75,13 @@
                     }
                     else
                     {
-                        <BitTypography Variant="BitTypographyVariant.H6" Gutter>
+                        <BitText Typography="BitTypography.H6" Gutter>
                             @Localizer[nameof(AppStrings.EmailConfirmationSuccessTitle), emailModel.Email!]
-                        </BitTypography>
+                        </BitText>
                         <br />
-                        <BitTypography Variant="BitTypographyVariant.Subtitle1" Gutter>
+                        <BitText Typography="BitTypography.Subtitle1" Gutter>
                             @Localizer[nameof(AppStrings.EmailConfirmationSuccessMessage)]
-                        </BitTypography>
+                        </BitText>
                         <br />
                         <BitLink Href="@Urls.SignInPage">@Localizer[nameof(AppStrings.SignIn)]</BitLink>
                     }
@@ -94,11 +94,11 @@
                     <br />
                     @if (isPhoneConfirmed is false)
                     {
-                        <BitTypography Variant="BitTypographyVariant.Subtitle1" Gutter>
+                        <BitText Typography="BitTypography.Subtitle1" Gutter>
                             @Localizer[nameof(AppStrings.ConfirmPhoneSubtitle)]
                             <br />
                             @Localizer[nameof(AppStrings.ConfirmPhoneMessage)]
-                        </BitTypography>
+                        </BitText>
                         <br />
                         <EditForm Model="phoneModel" OnValidSubmit="WrapHandled(ConfirmPhone)" class="confirm-form">
                             <AppDataAnnotationsValidator />
@@ -126,9 +126,9 @@
                         </EditForm>
                         <br />
                         <br />
-                        <BitTypography Variant="BitTypographyVariant.Body1" Gutter>
+                        <BitText Typography="BitTypography.Body1" Gutter>
                             @Localizer[nameof(AppStrings.NotReceivedConfirmationPhoneMessage)]
-                        </BitTypography>
+                        </BitText>
                         <br />
                         <BitButton IsLoading="isWaiting"
                                    ButtonType="BitButtonType.Button"
@@ -139,13 +139,13 @@
                     }
                     else
                     {
-                        <BitTypography Variant="BitTypographyVariant.H5" Gutter>
+                        <BitText Typography="BitTypography.H5" Gutter>
                             @Localizer[nameof(AppStrings.PhoneConfirmationSuccessTitle), phoneModel.PhoneNumber!]
-                        </BitTypography>
+                        </BitText>
                         <br />
-                        <BitTypography Variant="BitTypographyVariant.Subtitle1" Gutter>
+                        <BitText Typography="BitTypography.Subtitle1" Gutter>
                             @Localizer[nameof(AppStrings.PhoneConfirmationSuccessMessage)]
-                        </BitTypography>
+                        </BitText>
                         <br />
                         <BitLink Href="@Urls.SignInPage">@Localizer[nameof(AppStrings.SignIn)]</BitLink>
                     }
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/ForgotPasswordPage.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/ForgotPasswordPage.razor
index 4193e926cb..e2084fd67e 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/ForgotPasswordPage.razor
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/ForgotPasswordPage.razor
@@ -13,13 +13,13 @@
             </BitMessage>
         }
 
-        <BitTypography Variant="BitTypographyVariant.H4" Gutter>
+        <BitText Typography="BitTypography.H4" Gutter>
             @Localizer[nameof(AppStrings.ForgotPasswordTitle)]
-        </BitTypography>
+        </BitText>
 
-        <BitTypography Variant="BitTypographyVariant.Subtitle1" Gutter>
+        <BitText Typography="BitTypography.Subtitle1" Gutter>
             @Localizer[nameof(AppStrings.ForgotPasswordMessage)]
-        </BitTypography>
+        </BitText>
 
         <br />
 
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/ChangeEmailSection.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/ChangeEmailSection.razor
index b3ec3b03bd..82083f3653 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/ChangeEmailSection.razor
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/ChangeEmailSection.razor
@@ -8,9 +8,9 @@
         }
     </div>
 
-    <BitTypography Variant="BitTypographyVariant.H2">
+    <BitText Typography="BitTypography.H2">
         @Localizer[nameof(AppStrings.ChangeEmailTitle)]
-    </BitTypography>
+    </BitText>
 
     <br />
 
@@ -56,11 +56,11 @@
         }
         else
         {
-            <BitTypography Variant="BitTypographyVariant.Subtitle1" Gutter>
+            <BitText Typography="BitTypography.Subtitle1" Gutter>
                 @Localizer[nameof(AppStrings.ConfirmEmailSubtitle)]
                 <br />
                 @Localizer[nameof(AppStrings.ConfirmEmailMessage)]
-            </BitTypography>
+            </BitText>
             <br />
             <EditForm Model="changeModel" OnValidSubmit="WrapHandled(ChangeEmail)" class="change-email-form">
                 <AppDataAnnotationsValidator />
@@ -97,12 +97,12 @@
             {
                 <br />
                 <br />
-                <BitTypography Variant="BitTypographyVariant.Body1" Gutter>
+                <BitText Typography="BitTypography.Body1" Gutter>
                     @Localizer[nameof(AppStrings.NotReceivedConfirmationEmailMessage)]
-                </BitTypography>
-                <BitTypography Variant="BitTypographyVariant.Body1" Gutter>
+                </BitText>
+                <BitText Typography="BitTypography.Body1" Gutter>
                     @Localizer[nameof(AppStrings.CheckSpamMailMessage)]
-                </BitTypography>
+                </BitText>
                 <br />
                 <BitButton IsLoading="isWaiting"
                            ButtonType="BitButtonType.Button"
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/ChangePhoneNumberSection.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/ChangePhoneNumberSection.razor
index 280cd8b2de..bafce58117 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/ChangePhoneNumberSection.razor
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/ChangePhoneNumberSection.razor
@@ -8,9 +8,9 @@
         }
     </div>
 
-    <BitTypography Variant="BitTypographyVariant.H2">
+    <BitText Typography="BitTypography.H2">
         @Localizer[nameof(AppStrings.ChangePhoneNumberTitle)]
-    </BitTypography>
+    </BitText>
 
     <br />
 
@@ -56,11 +56,11 @@
         }
         else
         {
-            <BitTypography Variant="BitTypographyVariant.Subtitle1" Gutter>
+            <BitText Typography="BitTypography.Subtitle1" Gutter>
                 @Localizer[nameof(AppStrings.ConfirmPhoneSubtitle)]
                 <br />
                 @Localizer[nameof(AppStrings.ConfirmPhoneMessage)]
-            </BitTypography>
+            </BitText>
             <br />
             <EditForm Model="changeModel" OnValidSubmit="WrapHandled(ChangePhoneNumber)" class="change-phone-form">
                 <AppDataAnnotationsValidator />
@@ -97,9 +97,9 @@
             {
                 <br />
                 <br />
-                <BitTypography Variant="BitTypographyVariant.Body1" Gutter>
+                <BitText Typography="BitTypography.Body1" Gutter>
                     @Localizer[nameof(AppStrings.NotReceivedConfirmationPhoneMessage)]
-                </BitTypography>
+                </BitText>
                 <br />
                 <BitButton IsLoading="isWaiting"
                            ButtonType="BitButtonType.Button"
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/DeleteAccountSection.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/DeleteAccountSection.razor
index eca14fc05d..16ec53ce4c 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/DeleteAccountSection.razor
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/DeleteAccountSection.razor
@@ -1,13 +1,13 @@
 @inherits AppComponentBase
 
-<BitTypography Variant="BitTypographyVariant.H5" Class="@BitCss.Class.Color.Error.Main">
+<BitText Typography="BitTypography.H5" Class="@BitCss.Class.Color.Error.Main">
     @Localizer[nameof(AppStrings.DeleteAccount)]
-</BitTypography>
+</BitText>
 <br />
 <br />
-<BitTypography Variant="BitTypographyVariant.Body1">
+<BitText Typography="BitTypography.Body1">
     @Localizer[nameof(AppStrings.DeleteAccountPrompt)]
-</BitTypography>
+</BitText>
 <br />
 <br />
 <BitButton Color="BitColor.Error"
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/TwoFactorSection.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/TwoFactorSection.razor
index 53f350ecbf..53859ed0ee 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/TwoFactorSection.razor
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/TwoFactorSection.razor
@@ -8,9 +8,9 @@
         }
     </div>
 
-    <BitTypography Variant="BitTypographyVariant.H2" Style="text-align:center" Gutter>
+    <BitText Typography="BitTypography.H2" Style="text-align:center" Gutter>
         @Localizer[nameof(AppStrings.TwoFactorAuthTitle)]
-    </BitTypography>
+    </BitText>
 
     @if (isWaiting)
     {
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/UserDataSection.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/UserDataSection.razor
index 35e20da8b8..4c1bffe6fc 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/UserDataSection.razor
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/UserDataSection.razor
@@ -8,9 +8,9 @@
         }
     </div>
 
-    <BitTypography Variant="BitTypographyVariant.H2">
+    <BitText Typography="BitTypography.H2">
         @Localizer[nameof(AppStrings.EditProfileTitle)]
-    </BitTypography>
+    </BitText>
 
     <br />
 
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/UserSessionsSection.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/UserSessionsSection.razor
index 1a93154e3d..753b3ef2db 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/UserSessionsSection.razor
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/UserSessionsSection.razor
@@ -7,9 +7,9 @@
     }
 </div>
 
-<BitTypography Variant="BitTypographyVariant.H2" Style="text-align:center">
+<BitText Typography="BitTypography.H2" Style="text-align:center">
     @Localizer[nameof(AppStrings.UserSessionsTitle)]
-</BitTypography>
+</BitText>
 
 <br />
 
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/ResetPasswordPage.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/ResetPasswordPage.razor
index c2dbf68537..9f560b894c 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/ResetPasswordPage.razor
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/ResetPasswordPage.razor
@@ -12,17 +12,17 @@
             </BitMessage>
         }
 
-        <BitTypography Variant="BitTypographyVariant.H4" Gutter>
+        <BitText Typography="BitTypography.H4" Gutter>
             @Localizer[nameof(AppStrings.ResetPasswordTitle)]
-        </BitTypography>
+        </BitText>
 
         @if (isPasswordChanged is false)
         {
-            <BitTypography Variant="BitTypographyVariant.Subtitle1" Gutter>
+            <BitText Typography="BitTypography.Subtitle1" Gutter>
                 @Localizer[nameof(AppStrings.ResetPasswordSubtitle)]
                 <br />
                 @Localizer[nameof(AppStrings.ResetPasswordMessage)]
-            </BitTypography>
+            </BitText>
             <br />
             <EditForm Model="model" OnValidSubmit="WrapHandled(Submit)" class="reset-form">
                 <AppDataAnnotationsValidator />
@@ -88,13 +88,13 @@
         }
         else
         {
-            <BitTypography Variant="BitTypographyVariant.H5" Gutter>
+            <BitText Typography="BitTypography.H5" Gutter>
                 @Localizer[nameof(AppStrings.ResetPasswordSuccessTitle), model.PhoneNumber!]
-            </BitTypography>
+            </BitText>
             <br />
-            <BitTypography Variant="BitTypographyVariant.Subtitle1" Gutter>
+            <BitText Typography="BitTypography.Subtitle1" Gutter>
                 @Localizer[nameof(AppStrings.ResetPasswordSuccessBody)]
-            </BitTypography>
+            </BitText>
             <br />
             <BitLink Href="@Urls.SignInPage">
                 @Localizer[nameof(AppStrings.SignIn)]
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignInPage.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignInPage.razor
index 6961cff7b1..11d4a6cdd6 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignInPage.razor
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignInPage.razor
@@ -15,9 +15,9 @@
             }
         </div>
 
-        <BitTypography Variant="BitTypographyVariant.H4" Gutter>
+        <BitText Typography="BitTypography.H4" Gutter>
             @Localizer[nameof(AppStrings.SignIn)]
-        </BitTypography>
+        </BitText>
 
         @if (requiresTwoFactor is false)
         {
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignUpPage.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignUpPage.razor
index ecd9bcf0bd..f31b7fe4c3 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignUpPage.razor
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignUpPage.razor
@@ -15,9 +15,9 @@
             }
         </div>
 
-        <BitTypography Variant="BitTypographyVariant.H4" Gutter>
+        <BitText Typography="BitTypography.H4" Gutter>
             @Localizer[nameof(AppStrings.SignUp)]
-        </BitTypography>
+        </BitText>
         <br /><br />
         <BitButton Style="width:300px"
                    IsLoading="isWaiting"
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Offline/OfflineEditProfilePage.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Offline/OfflineEditProfilePage.razor
index b6fa810218..65b449d26a 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Offline/OfflineEditProfilePage.razor
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Offline/OfflineEditProfilePage.razor
@@ -12,9 +12,9 @@
             </BitMessage>
         }
 
-        <BitTypography Variant="BitTypographyVariant.H2" Gutter>
+        <BitText Typography="BitTypography.H2" Gutter>
             @Localizer[nameof(AppStrings.EditProfileTitle)]
-        </BitTypography>
+        </BitText>
 
         @if (isLoading)
         {
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/Components/Pages/AboutPage.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/Components/Pages/AboutPage.razor
index a1109856cd..0e431d7eae 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/Components/Pages/AboutPage.razor
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/Components/Pages/AboutPage.razor
@@ -13,7 +13,7 @@
             This approach allows direct access to native features without the need for dependency injection (DI) or publish-subscribe messaging patterns.
         </div>
 
-        <BitStack VerticalAlign="BitStackAlignment.Center" HorizontalAlign="BitStackAlignment.SpaceAround">
+        <BitStack VerticalAlign="BitAlignment.Center" HorizontalAlign="BitAlignment.SpaceAround">
             <BitStack Horizontal Gap=".5rem">
                 <BitLabel>App Name:</BitLabel>
                 <BitLabel>@appName</BitLabel>
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/Components/Pages/AboutPage.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/Components/Pages/AboutPage.razor
index 40dba37838..8236c6fb5b 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/Components/Pages/AboutPage.razor
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/Components/Pages/AboutPage.razor
@@ -13,7 +13,7 @@
             This approach allows direct access to native features without the need for dependency injection (DI) or publish-subscribe messaging patterns.
         </div>
 
-        <BitStack VerticalAlign="BitStackAlignment.Center" HorizontalAlign="BitStackAlignment.SpaceAround">
+        <BitStack VerticalAlign="BitAlignment.Center" HorizontalAlign="BitAlignment.SpaceAround">
             <BitStack Horizontal Gap=".5rem">
                 <BitLabel>App Name:</BitLabel>
                 <BitLabel>@appName</BitLabel>
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/AboutUsPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/AboutUsPage.razor
index 0fa0d2efb9..6b5c1a7bea 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/AboutUsPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/AboutUsPage.razor
@@ -8,37 +8,37 @@
 <div class="page-container">
     <section class="page-section vision-section">
         <div class="page-section-content">
-            <BitTypography Variant="BitTypographyVariant.H1" Gutter Class="page-title">About us</BitTypography>
+            <BitText Typography="BitTypography.H1" Gutter Class="page-title">About us</BitText>
             <br /><br /><br />
-            <BitTypography Variant="BitTypographyVariant.H3" Gutter Class="vision-title">
+            <BitText Typography="BitTypography.H3" Gutter Class="vision-title">
                 Our vision is to empower our customers to maximize their performance through high quality development services and products.
-            </BitTypography>
+            </BitText>
         </div>
     </section>
 
     <section class="page-section values-section">
         <div class="page-section-content">
-            <BitTypography Variant="BitTypographyVariant.H3" Gutter>Our values</BitTypography>
+            <BitText Typography="BitTypography.H3" Gutter>Our values</BitText>
             <div class="value-card-list">
                 <div class="value-card">
-                    <BitTypography Variant="BitTypographyVariant.H5" Gutter>Quality</BitTypography>
-                    <BitTypography Variant="BitTypographyVariant.Body1">
+                    <BitText Typography="BitTypography.H5" Gutter>Quality</BitText>
+                    <BitText Typography="BitTypography.Body1">
                         We expertly execute our work, utilizing innovation and ingenuity to provide high-quality services and products.
-                    </BitTypography>
+                    </BitText>
                 </div>
 
                 <div class="value-card">
-                    <BitTypography Variant="BitTypographyVariant.H5" Gutter>Integrity</BitTypography>
-                    <BitTypography Variant="BitTypographyVariant.Body1">
+                    <BitText Typography="BitTypography.H5" Gutter>Integrity</BitText>
+                    <BitText Typography="BitTypography.Body1">
                         Conduct our business in a legal and ethical manner, build lasting relationships through honesty, respect and trust with our employees as well as our business partners.
-                    </BitTypography>
+                    </BitText>
                 </div>
 
                 <div class="value-card">
-                    <BitTypography Variant="BitTypographyVariant.H5" Gutter>Transparency</BitTypography>
-                    <BitTypography Variant="BitTypographyVariant.Body1">
+                    <BitText Typography="BitTypography.H5" Gutter>Transparency</BitText>
+                    <BitText Typography="BitTypography.Body1">
                         Being honest and open when communicating with our employees and business partners.
-                    </BitTypography>
+                    </BitText>
                 </div>
             </div>
         </div>
@@ -46,19 +46,19 @@
 
     <section class="page-section download-section">
         <div class="page-section-content">
-            <BitTypography Variant="BitTypographyVariant.H3" Gutter>4.9M</BitTypography>
+            <BitText Typography="BitTypography.H3" Gutter>4.9M</BitText>
             <hr style="width:100%" />
             <a href="https://www.nuget.org/profiles/bit-foundation" target="_blank">
-                <BitTypography Variant="BitTypographyVariant.H5" Class="blue-txt">
+                <BitText Typography="BitTypography.H5" Class="blue-txt">
                     Total downloads of packages
-                </BitTypography>
+                </BitText>
             </a>
         </div>
     </section>
 
     <section class="page-section team-section">
         <div class="page-section-content">
-            <BitTypography Variant="BitTypographyVariant.H3" Gutter>Our team</BitTypography>
+            <BitText Typography="BitTypography.H3" Gutter>Our team</BitText>
 
             <div class="member-card-list">
 
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Besql/Besql01OverviewPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Besql/Besql01OverviewPage.razor
index cdd401d84f..6487a42771 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Besql/Besql01OverviewPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Besql/Besql01OverviewPage.razor
@@ -6,18 +6,18 @@
             Description="overview of the bit Besql" />
 
 <div class="page-container">
-    <BitTypography Variant="BitTypographyVariant.H3" Gutter>Besql</BitTypography>
+    <BitText Typography="BitTypography.H3" Gutter>Besql</BitText>
     <br />
-    <BitTypography Variant="BitTypographyVariant.H5" Gutter>Blazor Entity Framework Sqlite utilities</BitTypography>
+    <BitText Typography="BitTypography.H5" Gutter>Blazor Entity Framework Sqlite utilities</BitText>
     <br />
-    <BitTypography Variant="BitTypographyVariant.Subtitle1">
+    <BitText Typography="BitTypography.Subtitle1">
         Dreaming of an offline web application capable of saving data and syncing later?
         <br />
         Enter Besql, your solution to incorporating EF core & sqlite in your browser.
         It's a crucial aid for achieving this objective seamlessly.
         <br />
         bit Besql facilitates the use of Entity Framework and sqlite in web browsers with Blazor WebAssembly.
-    </BitTypography>
+    </BitText>
     <br />
     <div class="section-card-txt">
         You can watch this step by step walkthrough video to see bit Besql in action:
@@ -35,13 +35,13 @@
         <a href="https://github.com/bitfoundation/bitplatform-samples/tree/develop/videos/Bit.Besql" target="_blank">here</a>.
     </div>
     <br />
-    <BitTypography Variant="BitTypographyVariant.H6" Gutter>Supported browsers</BitTypography>
+    <BitText Typography="BitTypography.H6" Gutter>Supported browsers</BitText>
     <div class="section-card-txt">
         <ul>
             <li>
-                <BitTypography Variant="BitTypographyVariant.Body1" Gutter>
+                <BitText Typography="BitTypography.Body1" Gutter>
                     Blazor is supported in the browsers shown in the following list on both mobile and desktop platforms.
-                </BitTypography>
+                </BitText>
                 <ul dir="auto">
                     <li>Apple Safari (Current† version)</li>
                     <li>Google Chrome (Current† version)</li>
@@ -52,13 +52,13 @@
         </ul>
     </div>
     <br />
-    <BitTypography Variant="BitTypographyVariant.H6" Gutter>Supported platforms</BitTypography>
+    <BitText Typography="BitTypography.H6" Gutter>Supported platforms</BitText>
     <div class="section-card-txt">
         <ul>
             <li>
-                <BitTypography Variant="BitTypographyVariant.Body1" Gutter>
+                <BitText Typography="BitTypography.Body1" Gutter>
                     Blazor Hybrid apps have the following additional platform requirements:
-                </BitTypography>
+                </BitText>
                 <ul dir="auto">
                     <li>Android 7.1 (API Level 24) or higher</li>
                     <li>iOS 15 or higher</li>
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Besql/Besql02InstallPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Besql/Besql02InstallPage.razor
index 3655c58644..ac71c883d2 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Besql/Besql02InstallPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Besql/Besql02InstallPage.razor
@@ -6,15 +6,15 @@
             Description="installing the bit Besql" />
 
 <div class="page-container">
-    <BitTypography Variant="BitTypographyVariant.H3" Gutter>Install bit Besql</BitTypography>
+    <BitText Typography="BitTypography.H3" Gutter>Install bit Besql</BitText>
     <br />
-    <BitTypography Variant="BitTypographyVariant.Subtitle1" Gutter>
+    <BitText Typography="BitTypography.Subtitle1" Gutter>
         How to install the bit Besql?
-    </BitTypography>
+    </BitText>
     <br />
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>CLI</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>CLI</BitText>
         <div class="section-card-txt">
             Open the command line of your choice and run the following command:
             <CodeBox>dotnet add package Bit.Besql</CodeBox>
@@ -22,7 +22,7 @@
     </section>
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Visual Studio</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Visual Studio</BitText>
         <br />
         <div class="section-card-txt">
             Open your Visual Studio's Manage NuGet Packages window and install the Bit.Besql package:
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Besql/Besql03UsagePage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Besql/Besql03UsagePage.razor
index bb93e71a5c..22ecb13f25 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Besql/Besql03UsagePage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Besql/Besql03UsagePage.razor
@@ -6,14 +6,14 @@
             Description="usage of the bit Besql" />
 
 <div class="page-container">
-    <BitTypography Variant="BitTypographyVariant.H3" Gutter>Using bit Besql</BitTypography>
+    <BitText Typography="BitTypography.H3" Gutter>Using bit Besql</BitText>
     <br />
-    <BitTypography Variant="BitTypographyVariant.Subtitle1" Gutter>
+    <BitText Typography="BitTypography.Subtitle1" Gutter>
         How to use the bit Besql?
-    </BitTypography>
+    </BitText>
     <br />
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Script</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Script</BitText>
         <div class="section-card-txt">
             To get started, simply after installing bit Besql, add the following script tag to your default document:
             <CodeBox>&lt;script src="_content/Bit.Besql/bit-besql.js">&lt;/script></CodeBox>
@@ -21,7 +21,7 @@
     </section>
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Services</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Services</BitText>
         <br />
         <div class="section-card-txt">
             Register bit Besql services using its specific IServiceCollection extension method as follows:
@@ -30,7 +30,7 @@
     </section>
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Usage</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Usage</BitText>
         <br />
         <div class="section-card-txt">
             The usage of bit Besql is the same as the usage of EFCore's Sqlite provider with IDbContextFactory.
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Bswup/Bswup01OverviewPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Bswup/Bswup01OverviewPage.razor
index 406e211bd7..9df47bb56b 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Bswup/Bswup01OverviewPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Bswup/Bswup01OverviewPage.razor
@@ -6,11 +6,11 @@
             Description="overview of the bit Bswup" />
 
 <div class="page-container">
-    <BitTypography Variant="BitTypographyVariant.H3" Gutter>Bswup</BitTypography>
+    <BitText Typography="BitTypography.H3" Gutter>Bswup</BitText>
     <br />
-    <BitTypography Variant="BitTypographyVariant.H5" Gutter>Blazor Service Worker Update Progress utilities</BitTypography>
+    <BitText Typography="BitTypography.H5" Gutter>Blazor Service Worker Update Progress utilities</BitText>
     <br />
-    <BitTypography Variant="BitTypographyVariant.Subtitle1">
+    <BitText Typography="BitTypography.Subtitle1">
         bit Bswup is a set of tools that assists developers in making the most out of the
         Service Worker when building PWAs with Blazor.
         It utilizes the Service Worker's events to handle Installing and Updating the app
@@ -19,7 +19,7 @@
         This unique tool harnesses the power of Progressive Web Apps (PWA) within the innovative
         new structure of dotnet 8. By amalgamating pre-rendering techniques reminiscent of renowned
         platforms like GitHub, Reddit, and Facebook, Bswup ensures an exceptional user experience.
-    </BitTypography>
+    </BitText>
     <br />
     <div class="section-card-txt">
         <b>Note</b>: Currently, bit Bswup is the only tool that can enable complete PWA solution for the new Blazor web app
@@ -52,13 +52,13 @@
     <br />
     <img src="/images/bswup/bswup4-2.webp" class="bswup-img" />
     <br /><br />
-    <BitTypography Variant="BitTypographyVariant.H6" Gutter>Supported browsers</BitTypography>
+    <BitText Typography="BitTypography.H6" Gutter>Supported browsers</BitText>
     <div class="section-card-txt">
         <ul>
             <li>
-                <BitTypography Variant="BitTypographyVariant.Body1" Gutter>
+                <BitText Typography="BitTypography.Body1" Gutter>
                     Blazor is supported in the browsers shown in the following list on both mobile and desktop platforms.
-                </BitTypography>
+                </BitText>
                 <ul dir="auto">
                     <li>Apple Safari (Current† version)</li>
                     <li>Google Chrome (Current† version)</li>
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Bswup/Bswup02InstallPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Bswup/Bswup02InstallPage.razor
index 1256145cd6..a5abc139f9 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Bswup/Bswup02InstallPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Bswup/Bswup02InstallPage.razor
@@ -6,15 +6,15 @@
             Description="installing the bit Bswup" />
 
 <div class="page-container">
-    <BitTypography Variant="BitTypographyVariant.H3" Gutter>Install bit Bswup</BitTypography>
+    <BitText Typography="BitTypography.H3" Gutter>Install bit Bswup</BitText>
     <br />
-    <BitTypography Variant="BitTypographyVariant.Subtitle1" Gutter>
+    <BitText Typography="BitTypography.Subtitle1" Gutter>
         How to install the bit Bswup?
-    </BitTypography>
+    </BitText>
     <br />
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>CLI</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>CLI</BitText>
         <div class="section-card-txt">
             Open the command line of your choice and run the following command:
             <CodeBox>dotnet add package Bit.Bswup</CodeBox>
@@ -22,7 +22,7 @@
     </section>
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Visual Studio</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Visual Studio</BitText>
         <br />
         <div class="section-card-txt">
             Open your Visual Studio's Manage NuGet Packages window and install the Bit.Bswup package:
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Bswup/Bswup03ScriptsPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Bswup/Bswup03ScriptsPage.razor
index 604757d9f7..6d16693050 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Bswup/Bswup03ScriptsPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Bswup/Bswup03ScriptsPage.razor
@@ -6,15 +6,15 @@
             Description="setting required scripts of the bit Bswup" />
 
 <div class="page-container">
-    <BitTypography Variant="BitTypographyVariant.H3" Gutter>Scripts</BitTypography>
+    <BitText Typography="BitTypography.H3" Gutter>Scripts</BitText>
     <br />
-    <BitTypography Variant="BitTypographyVariant.Subtitle1" Gutter>
+    <BitText Typography="BitTypography.Subtitle1" Gutter>
         How to setup the bit Bswup's scripts?
-    </BitTypography>
+    </BitText>
     <br />
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Blazor script</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Blazor script</BitText>
         <div class="section-card-txt">
             Since Bswup is taking care of the lifecycle of the application, we need to disable
             the autostart of the Blazor by adding autostart=false to the Blazor script tag:
@@ -26,7 +26,7 @@
     </section>
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Bswup script</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Bswup script</BitText>
         <br />
         <div class="section-card-txt">
             The next step is to add and configure the bit Bswup's script tag itself:
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Bswup/Bswup04EventsPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Bswup/Bswup04EventsPage.razor
index ea1a99639e..5406681d8d 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Bswup/Bswup04EventsPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Bswup/Bswup04EventsPage.razor
@@ -6,15 +6,15 @@
             Description="handling events of the bit Bswup" />
 
 <div class="page-container">
-    <BitTypography Variant="BitTypographyVariant.H3" Gutter>Events</BitTypography>
+    <BitText Typography="BitTypography.H3" Gutter>Events</BitText>
     <br />
-    <BitTypography Variant="BitTypographyVariant.Subtitle1" Gutter>
+    <BitText Typography="BitTypography.Subtitle1" Gutter>
         bit Bswup calls the handler js function and pass the event arguments to it for each of its event.
-    </BitTypography>
+    </BitText>
     <br />
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Bswup Handler function</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Bswup Handler function</BitText>
         <div class="section-card-txt">
             below you can see a sample bswup events handler function in js:
 
@@ -63,7 +63,7 @@ function bitBswupHandler(type, data) {
     </section>
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Bswup Events</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Bswup Events</BitText>
         <br />
         <div class="section-card-txt">
             All the bit Bswup events are as follows:
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Bswup/Bswup05ServiceWorkerPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Bswup/Bswup05ServiceWorkerPage.razor
index 3523c0cc2e..8eba049823 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Bswup/Bswup05ServiceWorkerPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Bswup/Bswup05ServiceWorkerPage.razor
@@ -6,15 +6,15 @@
             Description="service worker configuration of the bit Bswup" />
 
 <div class="page-container">
-    <BitTypography Variant="BitTypographyVariant.H3" Gutter>Service Worker</BitTypography>
+    <BitText Typography="BitTypography.H3" Gutter>Service Worker</BitText>
     <br />
-    <BitTypography Variant="BitTypographyVariant.Subtitle1" Gutter>
+    <BitText Typography="BitTypography.Subtitle1" Gutter>
         bit Bswup has a lot of options available in the service worker file to configure its behavior.
-    </BitTypography>
+    </BitText>
     <br />
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Bswup Service Worker</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Bswup Service Worker</BitText>
         <div class="section-card-txt">
             A sample of all configuration available inside of the service worker file is shown here:
 
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Bswup/Bswup06ProgressPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Bswup/Bswup06ProgressPage.razor
index 9db5eac588..9ad6d1266f 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Bswup/Bswup06ProgressPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Bswup/Bswup06ProgressPage.razor
@@ -6,15 +6,15 @@
             Description="Progress component of the bit Bswup" />
 
 <div class="page-container">
-    <BitTypography Variant="BitTypographyVariant.H3" Gutter>Progress component</BitTypography>
+    <BitText Typography="BitTypography.H3" Gutter>Progress component</BitText>
     <br />
-    <BitTypography Variant="BitTypographyVariant.Subtitle1" Gutter>
+    <BitText Typography="BitTypography.Subtitle1" Gutter>
         bit Bswup has its own Progress component to simplify the process of implementing a sophisticated UI widget to show the update progress.
-    </BitTypography>
+    </BitText>
     <br />
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>BswupProgress</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>BswupProgress</BitText>
         <div class="section-card-txt">
             The BswupProgress component can be used to implement a customizable update progress easily.
             In order to use this component first add its script tag to the default document of your app:
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil01OverviewPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil01OverviewPage.razor
index 2f434e9b37..16660d8e1f 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil01OverviewPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil01OverviewPage.razor
@@ -6,25 +6,25 @@
             Description="overview of the bit Butil" />
 
 <div class="page-container">
-    <BitTypography Variant="BitTypographyVariant.H3" Gutter>Butil</BitTypography>
+    <BitText Typography="BitTypography.H3" Gutter>Butil</BitText>
     <br />
-    <BitTypography Variant="BitTypographyVariant.H5" Gutter>Blazor Utilities for JavaScript</BitTypography>
-    <BitTypography Variant="BitTypographyVariant.Subtitle1">
+    <BitText Typography="BitTypography.H5" Gutter>Blazor Utilities for JavaScript</BitText>
+    <BitText Typography="BitTypography.Subtitle1">
         Embracing Blazor because of your love for C#? 
         <br /><br />
         Butil enables you to stay true to that sentiment by providing essential Browser APIs in C#, 
         eliminating the need to revert to JavaScript for any functionality.
         <br /><br />
         bit Butil helps C# developers to access the browser APIs that are only accessible through JavaScript in C#.
-    </BitTypography>
+    </BitText>
     <br />
-    <BitTypography Variant="BitTypographyVariant.H6" Gutter>Supported browsers</BitTypography>
+    <BitText Typography="BitTypography.H6" Gutter>Supported browsers</BitText>
     <div class="section-card-txt">
         <ul>
             <li>
-                <BitTypography Variant="BitTypographyVariant.Body1" Gutter>
+                <BitText Typography="BitTypography.Body1" Gutter>
                     Blazor is supported in the browsers shown in the following list on both mobile and desktop platforms.
-                </BitTypography>
+                </BitText>
                 <ul dir="auto">
                     <li>Apple Safari (Current† version)</li>
                     <li>Google Chrome (Current† version)</li>
@@ -35,13 +35,13 @@
         </ul>
     </div>
     <br />
-    <BitTypography Variant="BitTypographyVariant.H6" Gutter>Supported platforms</BitTypography>
+    <BitText Typography="BitTypography.H6" Gutter>Supported platforms</BitText>
     <div class="section-card-txt">
         <ul>
             <li>
-                <BitTypography Variant="BitTypographyVariant.Body1" Gutter>
+                <BitText Typography="BitTypography.Body1" Gutter>
                     Blazor Hybrid apps have the following additional platform requirements:
-                </BitTypography>
+                </BitText>
                 <ul dir="auto">
                     <li>Android 7.1 (API Level 24) or higher</li>
                     <li>iOS 15 or higher</li>
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil02InstallPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil02InstallPage.razor
index c721eca580..3fa4902da5 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil02InstallPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil02InstallPage.razor
@@ -6,15 +6,15 @@
             Description="installing the bit Butil" />
 
 <div class="page-container">
-    <BitTypography Variant="BitTypographyVariant.H3" Gutter>Install bit Butil</BitTypography>
+    <BitText Typography="BitTypography.H3" Gutter>Install bit Butil</BitText>
     <br />
-    <BitTypography Variant="BitTypographyVariant.Subtitle1" Gutter>
+    <BitText Typography="BitTypography.Subtitle1" Gutter>
         How to install the bit Butil?
-    </BitTypography>
+    </BitText>
     <br />
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>CLI</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>CLI</BitText>
         <div class="section-card-txt">
             Open the command line of your choice and run the following command: 
             <CodeBox>dotnet add package Bit.Butil</CodeBox>
@@ -22,7 +22,7 @@
     </section>
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Visual Studio</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Visual Studio</BitText>
         <br />
         <div class="section-card-txt">
             Open your Visual Studio's Manage NuGet Packages window and install the Bit.Butil package:
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil03SetupPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil03SetupPage.razor
index dc1b730e82..0d7c7157d4 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil03SetupPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil03SetupPage.razor
@@ -6,15 +6,15 @@
             Description="Setting the bit Butil up" />
 
 <div class="page-container">
-    <BitTypography Variant="BitTypographyVariant.H3" Gutter>Setup bit Butil</BitTypography>
+    <BitText Typography="BitTypography.H3" Gutter>Setup bit Butil</BitText>
     <br />
-    <BitTypography Variant="BitTypographyVariant.Subtitle1" Gutter>
+    <BitText Typography="BitTypography.Subtitle1" Gutter>
         How to install the bit Butil?
-    </BitTypography>
+    </BitText>
     <br />
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Script</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Script</BitText>
         <div class="section-card-txt">
             Add the following script tag to your default document:
             <CodeBox>&lt;script src="_content/Bit.Butil/bit-butil.js">&lt;/script></CodeBox>
@@ -22,7 +22,7 @@
     </section>
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Service</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Service</BitText>
         <div class="section-card-txt">
             Add the following line to register the bit Butil services:
             <CodeBox>builder.Services.AddBitButilServices();</CodeBox>
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil04CryptoPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil04CryptoPage.razor
index 1aa47487e7..2784ee4736 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil04CryptoPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil04CryptoPage.razor
@@ -7,15 +7,15 @@
             Description="Crypto class of the bit Butil" />
 
 <div class="page-container">
-    <BitTypography Variant="BitTypographyVariant.H3" Gutter>Crypto</BitTypography>
+    <BitText Typography="BitTypography.H3" Gutter>Crypto</BitText>
     <br />
-    <BitTypography Variant="BitTypographyVariant.Subtitle1" Gutter>
+    <BitText Typography="BitTypography.Subtitle1" Gutter>
         How to use the Crypto class of the bit Butil?
-    </BitTypography>
+    </BitText>
     <br />
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Usage</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Usage</BitText>
         <div class="section-card-txt">
             To use the browser crypto features you need to inject the Bit.Butil.Crypto class and use it like this:
 <CodeBox HideCopyButton>
@@ -28,7 +28,7 @@
     </section>
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Methods</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Methods</BitText>
         <div class="section-card-txt">
             <br />
             <b>Encrypt</b>: <br />
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil05ClipboardPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil05ClipboardPage.razor
index af096aaa7f..9e6d49a8d1 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil05ClipboardPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil05ClipboardPage.razor
@@ -7,15 +7,15 @@
             Description="Clipboard class of the bit Butil" />
 
 <div class="page-container">
-    <BitTypography Variant="BitTypographyVariant.H3" Gutter>Clipboard</BitTypography>
+    <BitText Typography="BitTypography.H3" Gutter>Clipboard</BitText>
     <br />
-    <BitTypography Variant="BitTypographyVariant.Subtitle1" Gutter>
+    <BitText Typography="BitTypography.Subtitle1" Gutter>
         How to use the Clipboard class of the bit Butil?
-    </BitTypography>
+    </BitText>
     <br />
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Usage</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Usage</BitText>
         <div class="section-card-txt">
             To use the browser Clipboard features you need to inject the Bit.Butil.Clipboard class and use it like this:
 <CodeBox HideCopyButton>
@@ -28,7 +28,7 @@
     </section>
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Methods</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Methods</BitText>
         <div class="section-card-txt">
             <br />
             <b>ReadText</b>: <br />
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil06KeyboardPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil06KeyboardPage.razor
index 70c61b77b7..6a3466efd6 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil06KeyboardPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil06KeyboardPage.razor
@@ -7,15 +7,15 @@
             Description="Keyboard class of the bit Butil" />
 
 <div class="page-container">
-    <BitTypography Variant="BitTypographyVariant.H3" Gutter>Keyboard</BitTypography>
+    <BitText Typography="BitTypography.H3" Gutter>Keyboard</BitText>
     <br />
-    <BitTypography Variant="BitTypographyVariant.Subtitle1" Gutter>
+    <BitText Typography="BitTypography.Subtitle1" Gutter>
         How to use the Keyboard class of the bit Butil?
-    </BitTypography>
+    </BitText>
     <br />
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Usage</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Usage</BitText>
         <div class="section-card-txt">
             To use the browser Keyboard features you need to inject the Bit.Butil.Keyboard class and use it like this:
 <CodeBox HideCopyButton>
@@ -29,7 +29,7 @@
     </section>
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Methods</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Methods</BitText>
         <div class="section-card-txt">
             <br />
             <b>Add</b>, <b>Remove</b>: <br />
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil07ConsolePage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil07ConsolePage.razor
index c9b3500298..0ab5746d71 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil07ConsolePage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil07ConsolePage.razor
@@ -7,15 +7,15 @@
             Description="Console class of the bit Butil" />
 
 <div class="page-container">
-    <BitTypography Variant="BitTypographyVariant.H3" Gutter>Console</BitTypography>
+    <BitText Typography="BitTypography.H3" Gutter>Console</BitText>
     <br />
-    <BitTypography Variant="BitTypographyVariant.Subtitle1" Gutter>
+    <BitText Typography="BitTypography.Subtitle1" Gutter>
         How to use the Console class of the bit Butil?
-    </BitTypography>
+    </BitText>
     <br />
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Usage</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Usage</BitText>
         <div class="section-card-txt">
             To use the browser console features you need to inject the Bit.Butil.Console class and use it like this:
 <CodeBox HideCopyButton>
@@ -30,7 +30,7 @@
     </section>
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Methods</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Methods</BitText>
         <div class="section-card-txt">
             <br />
             <b>Assert</b>: <br />
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil08StoragePage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil08StoragePage.razor
index 52b90f38c8..7aea5c3059 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil08StoragePage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil08StoragePage.razor
@@ -8,15 +8,15 @@
             Description="Storage class of the bit Butil" />
 
 <div class="page-container">
-    <BitTypography Variant="BitTypographyVariant.H3" Gutter>Storage</BitTypography>
+    <BitText Typography="BitTypography.H3" Gutter>Storage</BitText>
     <br />
-    <BitTypography Variant="BitTypographyVariant.Subtitle1" Gutter>
+    <BitText Typography="BitTypography.Subtitle1" Gutter>
         How to use the Storage class of the bit Butil?
-    </BitTypography>
+    </BitText>
     <br />
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Usage</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Usage</BitText>
         <div class="section-card-txt">
             To use the browser storage features you need to inject the Bit.Butil.Storage class and use it like this:
 <CodeBox HideCopyButton>
@@ -31,7 +31,7 @@
     </section>
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Methods</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Methods</BitText>
         <div class="section-card-txt">
             <br />
             <b>GetLength</b>: <br />
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil09CookiePage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil09CookiePage.razor
index 1676d52b7f..91158ae3cf 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil09CookiePage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil09CookiePage.razor
@@ -7,15 +7,15 @@
             Description="Cookie class of the bit Butil" />
 
 <div class="page-container">
-    <BitTypography Variant="BitTypographyVariant.H3" Gutter>Cookie</BitTypography>
+    <BitText Typography="BitTypography.H3" Gutter>Cookie</BitText>
     <br />
-    <BitTypography Variant="BitTypographyVariant.Subtitle1" Gutter>
+    <BitText Typography="BitTypography.Subtitle1" Gutter>
         How to use the Cookie class of the bit Butil?
-    </BitTypography>
+    </BitText>
     <br />
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Usage</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Usage</BitText>
         <div class="section-card-txt">
             To use the browser cookie features you need to inject the Bit.Butil.Cookie class and use it like this:
 <CodeBox HideCopyButton>
@@ -28,7 +28,7 @@
     </section>
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Methods</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Methods</BitText>
         <div class="section-card-txt">
             <br />
             <b>Set</b>, <b>Get</b>: <br />
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil10HistoryPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil10HistoryPage.razor
index a955c6b54a..992607a41c 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil10HistoryPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil10HistoryPage.razor
@@ -7,15 +7,15 @@
             Description="History class of the bit Butil" />
 
 <div class="page-container">
-    <BitTypography Variant="BitTypographyVariant.H3" Gutter>History</BitTypography>
+    <BitText Typography="BitTypography.H3" Gutter>History</BitText>
     <br />
-    <BitTypography Variant="BitTypographyVariant.Subtitle1" Gutter>
+    <BitText Typography="BitTypography.Subtitle1" Gutter>
         How to use the History class of the bit Butil?
-    </BitTypography>
+    </BitText>
     <br />
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Usage</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Usage</BitText>
         <div class="section-card-txt">
             To use the browser history features you need to inject the Bit.Butil.History class and use it like this:
 <CodeBox HideCopyButton>
@@ -28,7 +28,7 @@
     </section>
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Methods</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Methods</BitText>
         <div class="section-card-txt">
             <br />
             <b>GetLength</b>: <br />
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil11ElementPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil11ElementPage.razor
index 251a246786..a6321f3af0 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil11ElementPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil11ElementPage.razor
@@ -6,15 +6,15 @@
             Description="Element class of the bit Butil" />
 
 <div class="page-container">
-    <BitTypography Variant="BitTypographyVariant.H3" Gutter>Element</BitTypography>
+    <BitText Typography="BitTypography.H3" Gutter>Element</BitText>
     <br />
-    <BitTypography Variant="BitTypographyVariant.Subtitle1" Gutter>
+    <BitText Typography="BitTypography.Subtitle1" Gutter>
         How to use the Element class of the bit Butil?
-    </BitTypography>
+    </BitText>
     <br />
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Usage</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Usage</BitText>
         <div class="section-card-txt">
             To use the browser Element features you need to inject the Bit.Butil.Element class and use it like this:
 <CodeBox HideCopyButton>
@@ -33,7 +33,7 @@
     </section>
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Methods</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Methods</BitText>
         <div class="section-card-txt">
             <br />
             <b>GetAttribute</b>: <br />
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil12WindowPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil12WindowPage.razor
index f943390413..13719970da 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil12WindowPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil12WindowPage.razor
@@ -7,15 +7,15 @@
             Description="Window class of the bit Butil" />
 
 <div class="page-container">
-    <BitTypography Variant="BitTypographyVariant.H3" Gutter>Window</BitTypography>
+    <BitText Typography="BitTypography.H3" Gutter>Window</BitText>
     <br />
-    <BitTypography Variant="BitTypographyVariant.Subtitle1" Gutter>
+    <BitText Typography="BitTypography.Subtitle1" Gutter>
         How to use the Window class of the bit Butil?
-    </BitTypography>
+    </BitText>
     <br />
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Usage</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Usage</BitText>
         <div class="section-card-txt">
             To use the browser window features you need to inject the Bit.Butil.Window class and use it like this:
 <CodeBox HideCopyButton>
@@ -29,7 +29,7 @@
     </section>
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Methods</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Methods</BitText>
         <br />
         <div class="section-card-txt">
             <b>AddBeforeUnload</b>, <b>RemoveBeforeUnload</b>: <br />
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil13DocumentPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil13DocumentPage.razor
index 3060d5f881..17b1e5c649 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil13DocumentPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil13DocumentPage.razor
@@ -7,15 +7,15 @@
             Description="Document class of the bit Butil" />
 
 <div class="page-container">
-    <BitTypography Variant="BitTypographyVariant.H3" Gutter>Document</BitTypography>
+    <BitText Typography="BitTypography.H3" Gutter>Document</BitText>
     <br />
-    <BitTypography Variant="BitTypographyVariant.Subtitle1" Gutter>
+    <BitText Typography="BitTypography.Subtitle1" Gutter>
         How to use the Document class of the bit Butil?
-    </BitTypography>
+    </BitText>
     <br />
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Usage</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Usage</BitText>
         <div class="section-card-txt">
             To use the browser document features you need to inject the Bit.Butil.Document class and use it like this:
 <CodeBox HideCopyButton>
@@ -29,7 +29,7 @@
     </section>
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Methods</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Methods</BitText>
         <div class="section-card-txt">
             <br />
             <b>AddEventListener</b>, <b>RemoveEventListener</b>: <br />
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil14NavigatorPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil14NavigatorPage.razor
index 123d51866e..793ebd463e 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil14NavigatorPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil14NavigatorPage.razor
@@ -7,15 +7,15 @@
             Description="Navigator class of the bit Butil" />
 
 <div class="page-container">
-    <BitTypography Variant="BitTypographyVariant.H3" Gutter>Navigator</BitTypography>
+    <BitText Typography="BitTypography.H3" Gutter>Navigator</BitText>
     <br />
-    <BitTypography Variant="BitTypographyVariant.Subtitle1" Gutter>
+    <BitText Typography="BitTypography.Subtitle1" Gutter>
         How to use the Navigator class of the bit Butil?
-    </BitTypography>
+    </BitText>
     <br />
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Usage</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Usage</BitText>
         <div class="section-card-txt">
             To use the browser navigator features you need to inject the Bit.Butil.Navigator class and use it like this:
 <CodeBox HideCopyButton>
@@ -28,7 +28,7 @@
     </section>
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Methods</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Methods</BitText>
         <div class="section-card-txt">
             <br />
             <b>GetDeviceMemory</b>: <br />
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil15LocationPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil15LocationPage.razor
index a212cd835a..6b7694c4b3 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil15LocationPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil15LocationPage.razor
@@ -7,15 +7,15 @@
             Description="Location class of the bit Butil" />
 
 <div class="page-container">
-    <BitTypography Variant="BitTypographyVariant.H3" Gutter>Location</BitTypography>
+    <BitText Typography="BitTypography.H3" Gutter>Location</BitText>
     <br />
-    <BitTypography Variant="BitTypographyVariant.Subtitle1" Gutter>
+    <BitText Typography="BitTypography.Subtitle1" Gutter>
         How to use the Location class of the bit Butil?
-    </BitTypography>
+    </BitText>
     <br />
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Usage</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Usage</BitText>
         <div class="section-card-txt">
             To use the browser location features you need to inject the Bit.Butil.Location class and use it like this:
 <CodeBox HideCopyButton>
@@ -28,7 +28,7 @@
     </section>
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Methods</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Methods</BitText>
         <div class="section-card-txt">
             <br />
             <b>SetHref</b>, <b>GetHref</b>: <br />
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil16ScreenPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil16ScreenPage.razor
index fe998cd217..88c654c628 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil16ScreenPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil16ScreenPage.razor
@@ -7,15 +7,15 @@
             Description="Screen class of the bit Butil" />
 
 <div class="page-container">
-    <BitTypography Variant="BitTypographyVariant.H3" Gutter>Screen</BitTypography>
+    <BitText Typography="BitTypography.H3" Gutter>Screen</BitText>
     <br />
-    <BitTypography Variant="BitTypographyVariant.Subtitle1" Gutter>
+    <BitText Typography="BitTypography.Subtitle1" Gutter>
         How to use the Screen class of the bit Butil?
-    </BitTypography>
+    </BitText>
     <br />
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Usage</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Usage</BitText>
         <div class="section-card-txt">
             To use the browser screen features you need to inject the Bit.Butil.Screen class and use it like this:
 <CodeBox HideCopyButton>
@@ -28,7 +28,7 @@
     </section>
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Methods</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Methods</BitText>
         <div class="section-card-txt">
             <br />
             <b>GetAvailableHeight</b>: <br />
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil17VisualViewportPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil17VisualViewportPage.razor
index cab44cf583..4bb0329f8d 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil17VisualViewportPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil17VisualViewportPage.razor
@@ -7,15 +7,15 @@
             Description="VisualViewport class of the bit Butil" />
 
 <div class="page-container">
-    <BitTypography Variant="BitTypographyVariant.H3" Gutter>VisualViewport</BitTypography>
+    <BitText Typography="BitTypography.H3" Gutter>VisualViewport</BitText>
     <br />
-    <BitTypography Variant="BitTypographyVariant.Subtitle1" Gutter>
+    <BitText Typography="BitTypography.Subtitle1" Gutter>
         How to use the VisualViewport class of the bit Butil?
-    </BitTypography>
+    </BitText>
     <br />
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Usage</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Usage</BitText>
         <div class="section-card-txt">
             To use the browser VisualViewport features you need to inject the Bit.Butil.VisualViewport class and use it like this:
 <CodeBox HideCopyButton>
@@ -28,7 +28,7 @@
     </section>
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Methods</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Methods</BitText>
         <div class="section-card-txt">
             <br />
             <b>GetOffsetLeft</b>: <br />
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil18ScreenOrientationPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil18ScreenOrientationPage.razor
index 98ab582685..f98eac46e6 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil18ScreenOrientationPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil18ScreenOrientationPage.razor
@@ -7,15 +7,15 @@
             Description="ScreenOrientation class of the bit Butil" />
 
 <div class="page-container">
-    <BitTypography Variant="BitTypographyVariant.H3" Gutter>ScreenOrientation</BitTypography>
+    <BitText Typography="BitTypography.H3" Gutter>ScreenOrientation</BitText>
     <br />
-    <BitTypography Variant="BitTypographyVariant.Subtitle1" Gutter>
+    <BitText Typography="BitTypography.Subtitle1" Gutter>
         How to use the ScreenOrientation class of the bit Butil?
-    </BitTypography>
+    </BitText>
     <br />
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Usage</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Usage</BitText>
         <div class="section-card-txt">
             To use the browser ScreenOrientation features you need to inject the Bit.Butil.ScreenOrientation class and use it like this:
 <CodeBox HideCopyButton>
@@ -28,7 +28,7 @@
     </section>
 
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Methods</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Methods</BitText>
         <div class="section-card-txt">
             <br />
             <b>GetOrientationType</b>: <br />
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/ContactUsPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/ContactUsPage.razor
index b471615431..2e20003132 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/ContactUsPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/ContactUsPage.razor
@@ -8,17 +8,17 @@
 <div class="page-container">
     <section class="page-section">
         <div class="page-section-content">
-            <BitTypography Variant="BitTypographyVariant.H1" Gutter Class="page-title">Contact us</BitTypography>
+            <BitText Typography="BitTypography.H1" Gutter Class="page-title">Contact us</BitText>
             <br />
-            <BitTypography Variant="BitTypographyVariant.H5" Gutter>
+            <BitText Typography="BitTypography.H5" Gutter>
                 Email: <a href="mailto:info@bitplatform.dev" target="_blank" rel="noopener noreferrer">info@bitplatform.dev</a>
-            </BitTypography>
+            </BitText>
             <br />
-            <BitTypography Variant="BitTypographyVariant.H5" Gutter>
+            <BitText Typography="BitTypography.H5" Gutter>
                 Let's talk about your project.
                 <br />
                 Send us an email and we will get back to you.
-            </BitTypography>
+            </BitText>
 
             <br /><br />
 
@@ -26,10 +26,10 @@
                 <EditForm Model="contactUsModel" OnValidSubmit="WrapHandled(SendMessage)" class="form" novalidate>
                     <DataAnnotationsValidator />
 
-                    <BitTypography Variant="BitTypographyVariant.H5" Gutter>
+                    <BitText Typography="BitTypography.H5" Gutter>
                         Have any feedbacks?
 
-                    </BitTypography>
+                    </BitText>
 
                     <BitTextField @bind-Value="@contactUsModel.Email"
                                   Label="Email"
@@ -45,7 +45,7 @@
                                   Placeholder="Enter your message" />
                     <ValidationMessage For="() => contactUsModel.Message" />
 
-                    <BitStack Horizontal Gap="1rem" HorizontalAlign="BitStackAlignment.Center">
+                    <BitStack Horizontal Gap="1rem" HorizontalAlign="BitAlignment.Center">
                         <BitButton IsLoading="isSending" ButtonType="BitButtonType.Submit">
                             Send
                         </BitButton>
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Home/HomePage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Home/HomePage.razor
index 1e6df3e032..eeb2caae67 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Home/HomePage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Home/HomePage.razor
@@ -12,14 +12,14 @@
     <section class="page-section hero-section">
         <div class="page-section-content">
             <div class="hero-section-content">
-                <BitTypography Variant="BitTypographyVariant.H1" Gutter Class="hero-title">
+                <BitText Typography="BitTypography.H1" Gutter Class="hero-title">
                     bit platform
-                </BitTypography>
-                <BitTypography Variant="BitTypographyVariant.H4" Gutter Class="hero-subtitle">
+                </BitText>
+                <BitText Typography="BitTypography.H4" Gutter Class="hero-subtitle">
                     Build all of your apps
                     <br />
                     using what you already know and love
-                </BitTypography>
+                </BitText>
             </div>
         </div>
     </section>
@@ -28,21 +28,21 @@
         <div class="page-section-content">
             <div class="section-title-container">
                 <div class="section-title-line reversed"></div>
-                <BitTypography Variant="BitTypographyVariant.H6" Gutter Class="section-title">
+                <BitText Typography="BitTypography.H6" Gutter Class="section-title">
                     What is <span style="text-transform:lowercase">bit platform?</span>
-                </BitTypography>
+                </BitText>
                 <div class="section-title-line"></div>
             </div>
             <br />
-            <BitTypography Variant="BitTypographyVariant.H2" Class="text-title">
+            <BitText Typography="BitTypography.H2" Class="text-title">
                 code, build & deploy
                 <br />
                 your apps easily
-            </BitTypography>
+            </BitText>
             <br />
-            <BitTypography Variant="BitTypographyVariant.H5" Class="text-subtitle">
+            <BitText Typography="BitTypography.H5" Class="text-subtitle">
                 A set of tools for .NET developers across multiple platforms
-            </BitTypography>
+            </BitText>
         </div>
     </section>
 
@@ -53,25 +53,25 @@
         <div class="page-section-content">
             <div class="section-title-container">
                 <div class="section-title-line reversed"></div>
-                <BitTypography Variant="BitTypographyVariant.H6" Gutter Class="section-title">
+                <BitText Typography="BitTypography.H6" Gutter Class="section-title">
                     Why <span style="text-transform:lowercase">bit platform?</span>
-                </BitTypography>
+                </BitText>
                 <div class="section-title-line"></div>
             </div>
             <br />
-            <BitTypography Variant="BitTypographyVariant.H2" Class="text-title">
+            <BitText Typography="BitTypography.H2" Class="text-title">
                 best partner for teams
                 <br />
                 creating apps with
                 <br />
                 <span class="highlight-1">.NET and Blazor</span>
-            </BitTypography>
+            </BitText>
             <br />
-            <BitTypography Variant="BitTypographyVariant.H5" Class="text-subtitle">
+            <BitText Typography="BitTypography.H5" Class="text-subtitle">
                 Instead of using miscellaneous packages, you'll have
                 <br />
                 a set of comprehensive tools to cover any requirement.
-            </BitTypography>
+            </BitText>
         </div>
     </section>
 
@@ -79,15 +79,15 @@
         <div class="page-section-content">
             <div class="section-title-container">
                 <div class="section-title-line reversed"></div>
-                <BitTypography Variant="BitTypographyVariant.H6" Gutter Class="section-title">Our products</BitTypography>
+                <BitText Typography="BitTypography.H6" Gutter Class="section-title">Our products</BitText>
                 <div class="section-title-line"></div>
             </div>
             <br />
-            <BitTypography Variant="BitTypographyVariant.H2" Class="text-title">
+            <BitText Typography="BitTypography.H2" Class="text-title">
                 variety of <span class="highlight-2">tools</span> to
                 <br />
                 make better apps
-            </BitTypography>
+            </BitText>
             <br />
             <Products />
         </div>
@@ -97,7 +97,7 @@
         <div class="page-section-content">
             <div class="section-title-container">
                 <div class="section-title-line reversed"></div>
-                <BitTypography Variant="BitTypographyVariant.H6" Gutter Class="section-title">Tech we use</BitTypography>
+                <BitText Typography="BitTypography.H6" Gutter Class="section-title">Tech we use</BitText>
                 <div class="section-title-line"></div>
             </div>
             <br /><br /><br />
@@ -115,11 +115,11 @@
                 <a target="_blank" title="Sass" class="tech-item sass-item" href="https://sass-lang.com/"></a>
             </div>
             <br /><br />
-            <BitTypography Variant="BitTypographyVariant.H4" Class="tech-subtitle">
+            <BitText Typography="BitTypography.H4" Class="tech-subtitle">
                 We've developed all of our websites
                 <br />
                 with our own toolchain!
-            </BitTypography>
+            </BitText>
         </div>
     </section>
 
@@ -127,41 +127,41 @@
         <div class="page-section-content">
             <div class="section-title-container">
                 <div class="section-title-line reversed"></div>
-                <BitTypography Variant="BitTypographyVariant.H6" Gutter Class="section-title">Our customers</BitTypography>
+                <BitText Typography="BitTypography.H6" Gutter Class="section-title">Our customers</BitText>
                 <div class="section-title-line"></div>
             </div>
             <br />
-            <BitTypography Variant="BitTypographyVariant.H2" Class="text-title">
+            <BitText Typography="BitTypography.H2" Class="text-title">
                 people <span class="highlight-2">love</span> what
                 <br />
                 they can make
-            </BitTypography>
+            </BitText>
             <br />
             <BitCarousel Class="customer-carousel" ShowNextPrev="false" AutoPlay="true" AutoPlayInterval="10000" InfiniteScrolling="true">
                 <BitCarouselItem>
-                    <BitTypography Variant="BitTypographyVariant.H5" Class="text-subtitle">
+                    <BitText Typography="BitTypography.H5" Class="text-subtitle">
                         <a class="customer-link" href="https://rigidrobotics.com/" target="_blank"><b class="highlight-2">RIGID Robotics</b></a>
                         Offers a unified and scalable Cloud Platform and Applications that gather Data in Real-time from its Sensors
                         that are embedded in customers’ mining equipment and operations. A centralized web portal built on bit platform
                         delivers real-time data insights, 3D visualization, and advanced reporting, all in one unified environment.
-                    </BitTypography>
+                    </BitText>
                 </BitCarouselItem>
                 <BitCarouselItem>
-                    <BitTypography Variant="BitTypographyVariant.H5" Class="text-subtitle">
+                    <BitText Typography="BitTypography.H5" Class="text-subtitle">
                         <a class="customer-link" href="https://www.antargyan.com/" target="_blank"><b class="highlight-2">Antargyan</b></a>
                         Serving over 450,000 students and 500+ educators, Antargyan is known for its innovative RioPlay platform.
                         They are re-building their software products with bit platform to enhance UI/UX, boost performance,
                         and expand their reach across more platforms using bit platform's cross-platform features.
-                    </BitTypography>
+                    </BitText>
                 </BitCarouselItem>
                 <BitCarouselItem>
-                    <BitTypography Variant="BitTypographyVariant.H5" Class="text-subtitle">
+                    <BitText Typography="BitTypography.H5" Class="text-subtitle">
                         <a class="customer-link" href="https://fx.land/" target="_blank"><b class="highlight-2">Functionland</b></a>
                         Want to own your files, literally? This is something that will not happen ever on traditional cloud services.
                         The innovative FxFiles (file manager), built on bit platform, leverages the FULA blockchain network to
                         ensure you retain complete control over your data. Check out the project on
                         <a href="https://github.com/functionland/fx-files" target="_blank">GitHub</a>.
-                    </BitTypography>
+                    </BitText>
                 </BitCarouselItem>
             </BitCarousel>
         </div>
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Home/Products.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Home/Products.razor
index ac66cb5314..5c69dbc1a9 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Home/Products.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Home/Products.razor
@@ -5,17 +5,17 @@
             <div class="header-container">
                 <BitIcon Class="header-icon" IconName="@(isExpanded ? BitIconName.ChevronDown : BitIconName.ChevronRight)" />
                 <div>
-                    <BitTypography Variant="BitTypographyVariant.H4" Class="header-title">Boilerplate</BitTypography>
-                    <BitTypography Variant="BitTypographyVariant.H5" Class="header-subtitle">Feature-rich .NET project template</BitTypography>
+                    <BitText Typography="BitTypography.H4" Class="header-title">Boilerplate</BitText>
+                    <BitText Typography="BitTypography.H5" Class="header-subtitle">Feature-rich .NET project template</BitText>
                 </div>
             </div>
         </HeaderTemplate>
         <ChildContent>
             <div class="content-container">
-                <BitTypography Variant="BitTypographyVariant.Subtitle1" Gutter>
+                <BitText Typography="BitTypography.Subtitle1" Gutter>
                     bit Boilerplate is a Visual studio and .NET project template that enables high-quality, speedy cross-platform development
                     for PWA/SSR enabled websites and Android, iOS, macOS, Windows apps.
-                </BitTypography>
+                </BitText>
                 <div class="template-terminal">
                     <BitIcon IconName="@BitIconName.ChevronRightSmall" /> <span>dotnet</span> <span>new</span> <span>bit-bp</span>
                     <span>--database</span>
@@ -38,18 +38,18 @@
             <div class="header-container">
                 <BitIcon Class="header-icon" IconName="@(isExpanded ? BitIconName.ChevronDown : BitIconName.ChevronRight)" />
                 <div>
-                    <BitTypography Variant="BitTypographyVariant.H4" Class="header-title">Butil</BitTypography>
-                    <BitTypography Variant="BitTypographyVariant.H5" Class="header-subtitle">
+                    <BitText Typography="BitTypography.H4" Class="header-title">Butil</BitText>
+                    <BitText Typography="BitTypography.H5" Class="header-subtitle">
                         Blazor utilities to use browser JS APIs in C#
-                    </BitTypography>
+                    </BitText>
                 </div>
             </div>
         </HeaderTemplate>
         <ChildContent>
             <div class="content-container">
-                <BitTypography Variant="BitTypographyVariant.Subtitle1" Gutter>
+                <BitText Typography="BitTypography.Subtitle1" Gutter>
                     bit Butil helps C# developers to access the browser APIs that are only accessible through JavaScript in C#.
-                </BitTypography>
+                </BitText>
                 <div>
                     <CodeBox HideCopyButton>@@inject Bit.Butil.Crypto crypto
 
@@ -69,18 +69,18 @@
             <div class="header-container">
                 <BitIcon Class="header-icon" IconName="@(isExpanded ? BitIconName.ChevronDown : BitIconName.ChevronRight)" />
                 <div>
-                    <BitTypography Variant="BitTypographyVariant.H4" Class="header-title">Bswup</BitTypography>
-                    <BitTypography Variant="BitTypographyVariant.H5" Class="header-subtitle">
+                    <BitText Typography="BitTypography.H4" Class="header-title">Bswup</BitText>
+                    <BitText Typography="BitTypography.H5" Class="header-subtitle">
                         Blazor PWA on steroids
-                    </BitTypography>
+                    </BitText>
                 </div>
             </div>
         </HeaderTemplate>
         <ChildContent>
             <div class="content-container">
-                <BitTypography Variant="BitTypographyVariant.Subtitle1" Gutter>
+                <BitText Typography="BitTypography.Subtitle1" Gutter>
                     bit Bswup is a set of tools that assists developers in making the most out of the Service Worker when building apps with Blazor.
-                </BitTypography>
+                </BitText>
                 <br />
                 <div>
                     <img src="/images/home/bswup.webp" style="max-width:100%;" />
@@ -98,16 +98,16 @@
             <div class="header-container">
                 <BitIcon Class="header-icon" IconName="@(isExpanded ? BitIconName.ChevronDown : BitIconName.ChevronRight)" />
                 <div>
-                    <BitTypography Variant="BitTypographyVariant.H4" Class="header-title">Besql</BitTypography>
-                    <BitTypography Variant="BitTypographyVariant.H5" Class="header-subtitle">Blazor Entity Framework Sqlite</BitTypography>
+                    <BitText Typography="BitTypography.H4" Class="header-title">Besql</BitText>
+                    <BitText Typography="BitTypography.H5" Class="header-subtitle">Blazor Entity Framework Sqlite</BitText>
                 </div>
             </div>
         </HeaderTemplate>
         <ChildContent>
             <div class="content-container">
-                <BitTypography Variant="BitTypographyVariant.Subtitle1" Gutter>
+                <BitText Typography="BitTypography.Subtitle1" Gutter>
                     bit Besql facilitates the use of Entity Framework and sqlite in web browsers with Blazor WebAssembly.
-                </BitTypography>
+                </BitText>
                 <div>
                     <CodeBox HideCopyButton>services.AddBesqlDbContextFactory();</CodeBox>
                 </div>
@@ -123,17 +123,17 @@
             <div class="header-container">
                 <BitIcon Class="header-icon" IconName="@(isExpanded ? BitIconName.ChevronDown : BitIconName.ChevronRight)" />
                 <div>
-                    <BitTypography Variant="BitTypographyVariant.H4" Class="header-title">BlazorUI</BitTypography>
-                    <BitTypography Variant="BitTypographyVariant.H5" Class="header-subtitle">Native Blazor UI components</BitTypography>
+                    <BitText Typography="BitTypography.H4" Class="header-title">BlazorUI</BitText>
+                    <BitText Typography="BitTypography.H5" Class="header-subtitle">Native Blazor UI components</BitText>
                 </div>
             </div>
         </HeaderTemplate>
         <ChildContent>
             <div class="content-container">
-                <BitTypography Variant="BitTypographyVariant.Subtitle1" Gutter>
+                <BitText Typography="BitTypography.Subtitle1" Gutter>
                     bit BlazorUI components are native, easy-to-customize, and work seamlessly in all Blazor modes (WASM, Server, Hybrid, pre-rendering),
                     saving you time and making development enjoyable.
-                </BitTypography>
+                </BitText>
                 <div>
                     <CodeBox HideCopyButton>&lt;BitDropdown @@bind-Values="comboValues"
              Label="Multi select combo box"
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Lcnc/Lcnc01OverviewPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Lcnc/Lcnc01OverviewPage.razor
index ec15e6b4f2..3df732952c 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Lcnc/Lcnc01OverviewPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Lcnc/Lcnc01OverviewPage.razor
@@ -6,11 +6,11 @@
             Description="overview of the low-code no-code product of the bit platform" />
 
 <div class="page-container">
-    <BitTypography Variant="BitTypographyVariant.H3" Gutter>Low-code No-code</BitTypography>
+    <BitText Typography="BitTypography.H3" Gutter>Low-code No-code</BitText>
 
-    <BitTypography Variant="BitTypographyVariant.Subtitle1">
+    <BitText Typography="BitTypography.Subtitle1">
         The low-code no-code platform of the bit platform is a plate to bake any application.
-    </BitTypography>
+    </BitText>
 
 
 </div>
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Lcnc/Lcnc02BenefitsPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Lcnc/Lcnc02BenefitsPage.razor
index 6253f643f3..519d92a567 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Lcnc/Lcnc02BenefitsPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Lcnc/Lcnc02BenefitsPage.razor
@@ -6,11 +6,11 @@
             Description="overview of the low-code no-code benefits" />
 
 <div class="page-container">
-    <BitTypography Variant="BitTypographyVariant.H3" Gutter>Benefits</BitTypography>
+    <BitText Typography="BitTypography.H3" Gutter>Benefits</BitText>
 
-    <BitTypography Variant="BitTypographyVariant.Subtitle1">
+    <BitText Typography="BitTypography.Subtitle1">
         Benefits
-    </BitTypography>
+    </BitText>
 
 
 </div>
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Lcnc/Lcnc03SpecsPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Lcnc/Lcnc03SpecsPage.razor
index 97fcdf430f..78f4efe4d0 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Lcnc/Lcnc03SpecsPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Lcnc/Lcnc03SpecsPage.razor
@@ -6,9 +6,9 @@
             Description="overview of the low-code no-code specs" />
 
 <div class="page-container">
-    <BitTypography Variant="BitTypographyVariant.H3" Gutter>Specifications</BitTypography>
+    <BitText Typography="BitTypography.H3" Gutter>Specifications</BitText>
 
-    <BitTypography Variant="BitTypographyVariant.Subtitle1">
+    <BitText Typography="BitTypography.Subtitle1">
         OOTB Specifications
         <br/>
         Ui components<br />
@@ -19,7 +19,7 @@
         2fa<br />
         Analytics<br />
         Offline data storage for apps
-    </BitTypography>
+    </BitText>
 
 
 </div>
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Lcnc/Lcnc04CustomizationsPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Lcnc/Lcnc04CustomizationsPage.razor
index f581cd1d42..455d6a6096 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Lcnc/Lcnc04CustomizationsPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Lcnc/Lcnc04CustomizationsPage.razor
@@ -6,15 +6,15 @@
             Description="overview of the low-code no-code customizations" />
 
 <div class="page-container">
-    <BitTypography Variant="BitTypographyVariant.H3" Gutter>Customizations</BitTypography>
+    <BitText Typography="BitTypography.H3" Gutter>Customizations</BitText>
 
-    <BitTypography Variant="BitTypographyVariant.Subtitle1">
+    <BitText Typography="BitTypography.Subtitle1">
         Customizations
         <br />
         Export human/developer readable code at anytime<br />
         Build time, build phase<br />
         From mvp through designer to full code development as product scales with more than 6M C# .NET developers
-    </BitTypography>
+    </BitText>
 
 
 </div>
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Lcnc/Lcnc05ComparisonPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Lcnc/Lcnc05ComparisonPage.razor
index 0bd3ad54cc..9318ae1cc4 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Lcnc/Lcnc05ComparisonPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Lcnc/Lcnc05ComparisonPage.razor
@@ -6,9 +6,9 @@
             Description="overview of the low-code no-code comparison" />
 
 <div class="page-container">
-    <BitTypography Variant="BitTypographyVariant.H3" Gutter>Comparison</BitTypography>
+    <BitText Typography="BitTypography.H3" Gutter>Comparison</BitText>
 
-    <BitTypography Variant="BitTypographyVariant.Subtitle1">
+    <BitText Typography="BitTypography.Subtitle1">
         Comparison
         <br />
         What's our difference<br />
@@ -17,7 +17,7 @@
         Manifest<br />
         1 core cpu<br />
         1.75 GB ram
-    </BitTypography>
+    </BitText>
 
 
 </div>
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Lcnc/Lcnc06StatsPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Lcnc/Lcnc06StatsPage.razor
index b59243e9f6..2beac86d9f 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Lcnc/Lcnc06StatsPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Lcnc/Lcnc06StatsPage.razor
@@ -6,15 +6,15 @@
             Description="overview of the low-code no-code stats" />
 
 <div class="page-container">
-    <BitTypography Variant="BitTypographyVariant.H3" Gutter>Statistics</BitTypography>
+    <BitText Typography="BitTypography.H3" Gutter>Statistics</BitText>
 
-    <BitTypography Variant="BitTypographyVariant.Subtitle1">
+    <BitText Typography="BitTypography.Subtitle1">
         Statistics
         <br/>
         Where are we?<br />
         NuGet downloads<br />
         1K+ star
-    </BitTypography>
+    </BitText>
 
 
 </div>
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Lcnc/LcncPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Lcnc/LcncPage.razor
index 72270bb8db..6022abcec3 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Lcnc/LcncPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Lcnc/LcncPage.razor
@@ -8,36 +8,36 @@
 <div class="page-container">
     <section class="page-section main-section">
         <div class="page-section-content">
-            <BitTypography Variant="BitTypographyVariant.H1" Gutter Class="text-title" Style="text-align:center">
+            <BitText Typography="BitTypography.H1" Gutter Class="text-title" Style="text-align:center">
                 Low-code
                 <br />
                 <span style="opacity:0.5">No-code</span>
-            </BitTypography>
+            </BitText>
             <br />
-            <BitTypography Variant="BitTypographyVariant.H4" Gutter Class="text-subtitle" Style="text-align:center">
+            <BitText Typography="BitTypography.H4" Gutter Class="text-subtitle" Style="text-align:center">
                 bit platform provides a perfect floor for building high-quality apps
-            </BitTypography>
+            </BitText>
         </div>
     </section>
 
     <section class="page-section text-section">
         <div class="page-section-content">
             <div class="section-title-container">
-                <BitTypography Variant="BitTypographyVariant.H6" Gutter Class="section-title">
+                <BitText Typography="BitTypography.H6" Gutter Class="section-title">
                     What can i build?
-                </BitTypography>
+                </BitText>
                 <div class="section-title-line"></div>
             </div>
             <br />
-            <BitTypography Variant="BitTypographyVariant.H2" Class="text-title">
+            <BitText Typography="BitTypography.H2" Class="text-title">
                 check out what we
                 <br />
                 built
                 <br />
                 with our <span class="highlight-1">products</span>
-            </BitTypography>
+            </BitText>
             <br />
-            <BitTypography Variant="BitTypographyVariant.H5" Class="text-subtitle">
+            <BitText Typography="BitTypography.H5" Class="text-subtitle">
 
                 <div class="products-container">
                     <span>BlazorUI:</span>
@@ -72,28 +72,28 @@
                     <span>All hosted on a single cheap server:</span>
                     <span><b class="highlight-1">1 core CPU</b> and <b class="highlight-1">1.5 GB RAM</b></span>
                 </div>
-            </BitTypography>
+            </BitText>
         </div>
     </section>
 
     <section class="page-section text-section">
         <div class="page-section-content">
             <div class="section-title-container">
-                <BitTypography Variant="BitTypographyVariant.H6" Gutter Class="section-title">
+                <BitText Typography="BitTypography.H6" Gutter Class="section-title">
                     Specifications
-                </BitTypography>
+                </BitText>
                 <div class="section-title-line"></div>
             </div>
             <br />
-            <BitTypography Variant="BitTypographyVariant.H2" Class="text-title">
+            <BitText Typography="BitTypography.H2" Class="text-title">
                 we have many
                 <br />
                 <span class="highlight-2">benefits</span>
                 <br />
                 out of the box
-            </BitTypography>
+            </BitText>
             <br />
-            <BitTypography Variant="BitTypographyVariant.H5" Class="text-subtitle">
+            <BitText Typography="BitTypography.H5" Class="text-subtitle">
                 <div class="benefits-container">
                     <span class="highlight-1">UI components</span>
                     <span class="highlight-2">Dark & Light theme</span>
@@ -104,24 +104,24 @@
                     <span class="highlight-3">Analytics</span>
                     <span class="highlight-4">Client-side offline database</span>
                 </div>
-            </BitTypography>
+            </BitText>
         </div>
     </section>
 
     <section class="page-section text-section">
         <div class="page-section-content">
             <div class="section-title-container">
-                <BitTypography Variant="BitTypographyVariant.H6" Gutter Class="section-title">
+                <BitText Typography="BitTypography.H6" Gutter Class="section-title">
                     Comparisons
-                </BitTypography>
+                </BitText>
                 <div class="section-title-line"></div>
             </div>
             <br />
-            <BitTypography Variant="BitTypographyVariant.H2" Class="text-title">
+            <BitText Typography="BitTypography.H2" Class="text-title">
                 a unique <span class="highlight-3">Approach</span>
-            </BitTypography>
+            </BitText>
             <br /><br />
-            <BitTypography Variant="BitTypographyVariant.H5" Class="text-subtitle">
+            <BitText Typography="BitTypography.H5" Class="text-subtitle">
                 <div class="comparison-container">
                     <span>Secure by default</span>
                     <div>
@@ -135,30 +135,30 @@
                         the same project integrating the developer's custom codes seamlessly with low-code/no-code output.
                     </div>
                 </div>
-            </BitTypography>
+            </BitText>
         </div>
     </section>
 
     <section class="page-section text-section">
         <div class="page-section-content">
             <div class="section-title-container">
-                <BitTypography Variant="BitTypographyVariant.H6" Gutter Class="section-title">
+                <BitText Typography="BitTypography.H6" Gutter Class="section-title">
                     Statistics
-                </BitTypography>
+                </BitText>
                 <div class="section-title-line"></div>
             </div>
             <br />
-            <BitTypography Variant="BitTypographyVariant.H2" Class="text-title">
+            <BitText Typography="BitTypography.H2" Class="text-title">
                 our <span class="highlight-4">progress</span> and <span class="highlight-4">stats</span>
-            </BitTypography>
+            </BitText>
             <br />
-            <BitTypography Variant="BitTypographyVariant.H5" Class="text-subtitle">
+            <BitText Typography="BitTypography.H5" Class="text-subtitle">
                 <div class="stats-container">
                     <div>+4.8M NuGet downloads</div>
                     <div>+1K GitHub stars</div>
                     <div>+125 contributors</div>
                 </div>
-            </BitTypography>
+            </BitText>
         </div>
     </section>
 
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/PricingPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/PricingPage.razor
index c633d3efd0..704be32f14 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/PricingPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/PricingPage.razor
@@ -8,27 +8,27 @@
 <div class="page-container">
     <section class="page-section main-section">
         <div class="page-section-content">
-            <BitTypography Variant="BitTypographyVariant.H1" Gutter>Pricing</BitTypography>
+            <BitText Typography="BitTypography.H1" Gutter>Pricing</BitText>
             <br />
-            <BitTypography Variant="BitTypographyVariant.H4" Gutter>
+            <BitText Typography="BitTypography.H4" Gutter>
                 bit platform is open source and using it is truly free.
-            </BitTypography>
-            <BitTypography Variant="BitTypographyVariant.Subtitle1">
+            </BitText>
+            <BitText Typography="BitTypography.Subtitle1">
                 When you require more, you may choose a package that fits your needs.
-            </BitTypography>
+            </BitText>
         </div>
     </section>
 
     <section class="page-section mid-section">
         <div class="page-section-content">
             <div class="mid-container">
-                <BitTypography Variant="BitTypographyVariant.H4" Gutter Class="blue-txt">
+                <BitText Typography="BitTypography.H4" Gutter Class="blue-txt">
                     Get the features and support you need today
-                </BitTypography>
+                </BitText>
                 <hr style="width:100%" />
-                <BitTypography Variant="BitTypographyVariant.H5">
+                <BitText Typography="BitTypography.H5">
                     Easily upgrade as your needs evolve
-                </BitTypography>
+                </BitText>
             </div>
         </div>
     </section>
@@ -38,32 +38,32 @@
             <div class="plan-card-list">
                 <div class="plan-card">
                     <div class="plan-card-header">
-                        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Community</BitTypography>
+                        <BitText Typography="BitTypography.H5" Gutter>Community</BitText>
                     </div>
                     <div class="plan-card-body">
                         <div class="plan-card-title">
-                            <BitTypography Variant="BitTypographyVariant.H4" Gutter>It's free</BitTypography>
+                            <BitText Typography="BitTypography.H4" Gutter>It's free</BitText>
                         </div>
                         <div class="plan-card-desc">
                             <div class="plan-card-item">
                                 <svg width="24" height="21"><path d="M21.5443 0.762877C20.1651 1.68708 19.4818 2.23149 17.7804 3.76339C16.3237 5.06741 16.3496 5.05475 15.9371 4.63696C15.0864 3.73808 11.9668 2.9278 11.0774 3.39624C10.652 3.61146 10.7036 4.04192 11.1548 4.04192C12.3793 4.05458 13.5137 4.61164 14.4805 5.40924C15.3441 6.13088 15.3441 6.09289 14.1196 7.28293C12.8047 8.54896 10.9356 10.6379 9.89146 11.9926L9.09226 13.0307L8.42198 12.0559C6.83647 9.72637 5.12208 8.57433 4.06508 9.11867C3.67836 9.32127 3.74282 9.44788 4.90294 10.6507C5.92128 11.7015 6.97828 13.1954 7.72592 14.6512C8.33175 15.8288 9.82706 15.8288 10.8454 14.1323C11.5802 12.9041 13.475 10.562 15.0347 8.9668L16.4269 7.53616L16.762 8.27047C19.7526 14.8412 12.4567 22.45 6.32088 19.1584C0.0561834 15.7908 1.47411 4.99144 8.30603 4.02925C9.6466 3.83936 9.67232 3.39623 8.34461 3.23165C4.9158 2.77587 0.533132 6.76384 0.0690753 10.7393C-0.807472 18.3228 6.81073 23.2603 14.2613 19.956C18.7858 17.9556 20.8998 10.7645 18.1026 6.96645C17.8964 6.68796 17.7288 6.42211 17.7288 6.35874C17.7288 6.0929 20.0362 4.06723 22.4853 2.21882C25.2438 0.129861 23.813 -0.756371 21.5443 0.762877Z" fill="#2EA3FF" /></svg>
-                                <BitTypography Variant="BitTypographyVariant.H6" Gutter><b>MIT</b> License</BitTypography>
+                                <BitText Typography="BitTypography.H6" Gutter><b>MIT</b> License</BitText>
                             </div>
                             <div class="plan-card-item">
                                 <svg width="24" height="21"><path d="M21.5443 0.762877C20.1651 1.68708 19.4818 2.23149 17.7804 3.76339C16.3237 5.06741 16.3496 5.05475 15.9371 4.63696C15.0864 3.73808 11.9668 2.9278 11.0774 3.39624C10.652 3.61146 10.7036 4.04192 11.1548 4.04192C12.3793 4.05458 13.5137 4.61164 14.4805 5.40924C15.3441 6.13088 15.3441 6.09289 14.1196 7.28293C12.8047 8.54896 10.9356 10.6379 9.89146 11.9926L9.09226 13.0307L8.42198 12.0559C6.83647 9.72637 5.12208 8.57433 4.06508 9.11867C3.67836 9.32127 3.74282 9.44788 4.90294 10.6507C5.92128 11.7015 6.97828 13.1954 7.72592 14.6512C8.33175 15.8288 9.82706 15.8288 10.8454 14.1323C11.5802 12.9041 13.475 10.562 15.0347 8.9668L16.4269 7.53616L16.762 8.27047C19.7526 14.8412 12.4567 22.45 6.32088 19.1584C0.0561834 15.7908 1.47411 4.99144 8.30603 4.02925C9.6466 3.83936 9.67232 3.39623 8.34461 3.23165C4.9158 2.77587 0.533132 6.76384 0.0690753 10.7393C-0.807472 18.3228 6.81073 23.2603 14.2613 19.956C18.7858 17.9556 20.8998 10.7645 18.1026 6.96645C17.8964 6.68796 17.7288 6.42211 17.7288 6.35874C17.7288 6.0929 20.0362 4.06723 22.4853 2.21882C25.2438 0.129861 23.813 -0.756371 21.5443 0.762877Z" fill="#2EA3FF" /></svg>
-                                <BitTypography Variant="BitTypographyVariant.H6" Gutter>Unlimited apps</BitTypography>
+                                <BitText Typography="BitTypography.H6" Gutter>Unlimited apps</BitText>
                             </div>
                             <div class="plan-card-item">
                                 <svg width="24" height="21"><path d="M21.5443 0.762877C20.1651 1.68708 19.4818 2.23149 17.7804 3.76339C16.3237 5.06741 16.3496 5.05475 15.9371 4.63696C15.0864 3.73808 11.9668 2.9278 11.0774 3.39624C10.652 3.61146 10.7036 4.04192 11.1548 4.04192C12.3793 4.05458 13.5137 4.61164 14.4805 5.40924C15.3441 6.13088 15.3441 6.09289 14.1196 7.28293C12.8047 8.54896 10.9356 10.6379 9.89146 11.9926L9.09226 13.0307L8.42198 12.0559C6.83647 9.72637 5.12208 8.57433 4.06508 9.11867C3.67836 9.32127 3.74282 9.44788 4.90294 10.6507C5.92128 11.7015 6.97828 13.1954 7.72592 14.6512C8.33175 15.8288 9.82706 15.8288 10.8454 14.1323C11.5802 12.9041 13.475 10.562 15.0347 8.9668L16.4269 7.53616L16.762 8.27047C19.7526 14.8412 12.4567 22.45 6.32088 19.1584C0.0561834 15.7908 1.47411 4.99144 8.30603 4.02925C9.6466 3.83936 9.67232 3.39623 8.34461 3.23165C4.9158 2.77587 0.533132 6.76384 0.0690753 10.7393C-0.807472 18.3228 6.81073 23.2603 14.2613 19.956C18.7858 17.9556 20.8998 10.7645 18.1026 6.96645C17.8964 6.68796 17.7288 6.42211 17.7288 6.35874C17.7288 6.0929 20.0362 4.06723 22.4853 2.21882C25.2438 0.129861 23.813 -0.756371 21.5443 0.762877Z" fill="#2EA3FF" /></svg>
-                                <BitTypography Variant="BitTypographyVariant.H6" Gutter>Access to all components</BitTypography>
+                                <BitText Typography="BitTypography.H6" Gutter>Access to all components</BitText>
                             </div>
                             <div class="plan-card-item">
                                 <svg width="24" height="21"><path d="M21.5443 0.762877C20.1651 1.68708 19.4818 2.23149 17.7804 3.76339C16.3237 5.06741 16.3496 5.05475 15.9371 4.63696C15.0864 3.73808 11.9668 2.9278 11.0774 3.39624C10.652 3.61146 10.7036 4.04192 11.1548 4.04192C12.3793 4.05458 13.5137 4.61164 14.4805 5.40924C15.3441 6.13088 15.3441 6.09289 14.1196 7.28293C12.8047 8.54896 10.9356 10.6379 9.89146 11.9926L9.09226 13.0307L8.42198 12.0559C6.83647 9.72637 5.12208 8.57433 4.06508 9.11867C3.67836 9.32127 3.74282 9.44788 4.90294 10.6507C5.92128 11.7015 6.97828 13.1954 7.72592 14.6512C8.33175 15.8288 9.82706 15.8288 10.8454 14.1323C11.5802 12.9041 13.475 10.562 15.0347 8.9668L16.4269 7.53616L16.762 8.27047C19.7526 14.8412 12.4567 22.45 6.32088 19.1584C0.0561834 15.7908 1.47411 4.99144 8.30603 4.02925C9.6466 3.83936 9.67232 3.39623 8.34461 3.23165C4.9158 2.77587 0.533132 6.76384 0.0690753 10.7393C-0.807472 18.3228 6.81073 23.2603 14.2613 19.956C18.7858 17.9556 20.8998 10.7645 18.1026 6.96645C17.8964 6.68796 17.7288 6.42211 17.7288 6.35874C17.7288 6.0929 20.0362 4.06723 22.4853 2.21882C25.2438 0.129861 23.813 -0.756371 21.5443 0.762877Z" fill="#2EA3FF" /></svg>
-                                <BitTypography Variant="BitTypographyVariant.H6" Gutter>Access to all project templates</BitTypography>
+                                <BitText Typography="BitTypography.H6" Gutter>Access to all project templates</BitText>
                             </div>
                             <div class="plan-card-item">
                                 <svg width="24" height="21"><path d="M21.5443 0.762877C20.1651 1.68708 19.4818 2.23149 17.7804 3.76339C16.3237 5.06741 16.3496 5.05475 15.9371 4.63696C15.0864 3.73808 11.9668 2.9278 11.0774 3.39624C10.652 3.61146 10.7036 4.04192 11.1548 4.04192C12.3793 4.05458 13.5137 4.61164 14.4805 5.40924C15.3441 6.13088 15.3441 6.09289 14.1196 7.28293C12.8047 8.54896 10.9356 10.6379 9.89146 11.9926L9.09226 13.0307L8.42198 12.0559C6.83647 9.72637 5.12208 8.57433 4.06508 9.11867C3.67836 9.32127 3.74282 9.44788 4.90294 10.6507C5.92128 11.7015 6.97828 13.1954 7.72592 14.6512C8.33175 15.8288 9.82706 15.8288 10.8454 14.1323C11.5802 12.9041 13.475 10.562 15.0347 8.9668L16.4269 7.53616L16.762 8.27047C19.7526 14.8412 12.4567 22.45 6.32088 19.1584C0.0561834 15.7908 1.47411 4.99144 8.30603 4.02925C9.6466 3.83936 9.67232 3.39623 8.34461 3.23165C4.9158 2.77587 0.533132 6.76384 0.0690753 10.7393C-0.807472 18.3228 6.81073 23.2603 14.2613 19.956C18.7858 17.9556 20.8998 10.7645 18.1026 6.96645C17.8964 6.68796 17.7288 6.42211 17.7288 6.35874C17.7288 6.0929 20.0362 4.06723 22.4853 2.21882C25.2438 0.129861 23.813 -0.756371 21.5443 0.762877Z" fill="#2EA3FF" /></svg>
-                                <BitTypography Variant="BitTypographyVariant.H6" Gutter>Open-source support (GitHub issues)</BitTypography>
+                                <BitText Typography="BitTypography.H6" Gutter>Open-source support (GitHub issues)</BitText>
                             </div>
                         </div>
                         <BitButton Class="plan-card-button" Href="/#our-products">Join for free</BitButton>
@@ -72,35 +72,35 @@
 
                 <div class="plan-card">
                     <div class="plan-card-header">
-                        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Commercial</BitTypography>
+                        <BitText Typography="BitTypography.H5" Gutter>Commercial</BitText>
                     </div>
                     <div class="plan-card-body">
                         <div class="plan-card-title">
-                            <BitTypography Variant="BitTypographyVariant.H4" Gutter>€1200</BitTypography>
+                            <BitText Typography="BitTypography.H4" Gutter>€1200</BitText>
                             &nbsp;
-                            <BitTypography Variant="BitTypographyVariant.H6" Gutter>/ month</BitTypography>
+                            <BitText Typography="BitTypography.H6" Gutter>/ month</BitText>
                         </div>
                         <div class="plan-card-desc">
                             <div class="plan-card-item">
                                 <svg width="24" height="21"><path d="M21.5443 0.762877C20.1651 1.68708 19.4818 2.23149 17.7804 3.76339C16.3237 5.06741 16.3496 5.05475 15.9371 4.63696C15.0864 3.73808 11.9668 2.9278 11.0774 3.39624C10.652 3.61146 10.7036 4.04192 11.1548 4.04192C12.3793 4.05458 13.5137 4.61164 14.4805 5.40924C15.3441 6.13088 15.3441 6.09289 14.1196 7.28293C12.8047 8.54896 10.9356 10.6379 9.89146 11.9926L9.09226 13.0307L8.42198 12.0559C6.83647 9.72637 5.12208 8.57433 4.06508 9.11867C3.67836 9.32127 3.74282 9.44788 4.90294 10.6507C5.92128 11.7015 6.97828 13.1954 7.72592 14.6512C8.33175 15.8288 9.82706 15.8288 10.8454 14.1323C11.5802 12.9041 13.475 10.562 15.0347 8.9668L16.4269 7.53616L16.762 8.27047C19.7526 14.8412 12.4567 22.45 6.32088 19.1584C0.0561834 15.7908 1.47411 4.99144 8.30603 4.02925C9.6466 3.83936 9.67232 3.39623 8.34461 3.23165C4.9158 2.77587 0.533132 6.76384 0.0690753 10.7393C-0.807472 18.3228 6.81073 23.2603 14.2613 19.956C18.7858 17.9556 20.8998 10.7645 18.1026 6.96645C17.8964 6.68796 17.7288 6.42211 17.7288 6.35874C17.7288 6.0929 20.0362 4.06723 22.4853 2.21882C25.2438 0.129861 23.813 -0.756371 21.5443 0.762877Z" fill="#2EA3FF" /></svg>
-                                <BitTypography Variant="BitTypographyVariant.H6" Gutter>All from Free package</BitTypography>
+                                <BitText Typography="BitTypography.H6" Gutter>All from Free package</BitText>
                             </div>
                             <div class="plan-card-item">
                                 <svg width="24" height="21"><path d="M21.5443 0.762877C20.1651 1.68708 19.4818 2.23149 17.7804 3.76339C16.3237 5.06741 16.3496 5.05475 15.9371 4.63696C15.0864 3.73808 11.9668 2.9278 11.0774 3.39624C10.652 3.61146 10.7036 4.04192 11.1548 4.04192C12.3793 4.05458 13.5137 4.61164 14.4805 5.40924C15.3441 6.13088 15.3441 6.09289 14.1196 7.28293C12.8047 8.54896 10.9356 10.6379 9.89146 11.9926L9.09226 13.0307L8.42198 12.0559C6.83647 9.72637 5.12208 8.57433 4.06508 9.11867C3.67836 9.32127 3.74282 9.44788 4.90294 10.6507C5.92128 11.7015 6.97828 13.1954 7.72592 14.6512C8.33175 15.8288 9.82706 15.8288 10.8454 14.1323C11.5802 12.9041 13.475 10.562 15.0347 8.9668L16.4269 7.53616L16.762 8.27047C19.7526 14.8412 12.4567 22.45 6.32088 19.1584C0.0561834 15.7908 1.47411 4.99144 8.30603 4.02925C9.6466 3.83936 9.67232 3.39623 8.34461 3.23165C4.9158 2.77587 0.533132 6.76384 0.0690753 10.7393C-0.807472 18.3228 6.81073 23.2603 14.2613 19.956C18.7858 17.9556 20.8998 10.7645 18.1026 6.96645C17.8964 6.68796 17.7288 6.42211 17.7288 6.35874C17.7288 6.0929 20.0362 4.06723 22.4853 2.21882C25.2438 0.129861 23.813 -0.756371 21.5443 0.762877Z" fill="#2EA3FF" /></svg>
-                                <BitTypography Variant="BitTypographyVariant.H6" Gutter><b>40</b> hours Commercial support</BitTypography>
+                                <BitText Typography="BitTypography.H6" Gutter><b>40</b> hours Commercial support</BitText>
                             </div>
                             <div class="plan-card-item">
                                 <svg width="24" height="21"><path d="M21.5443 0.762877C20.1651 1.68708 19.4818 2.23149 17.7804 3.76339C16.3237 5.06741 16.3496 5.05475 15.9371 4.63696C15.0864 3.73808 11.9668 2.9278 11.0774 3.39624C10.652 3.61146 10.7036 4.04192 11.1548 4.04192C12.3793 4.05458 13.5137 4.61164 14.4805 5.40924C15.3441 6.13088 15.3441 6.09289 14.1196 7.28293C12.8047 8.54896 10.9356 10.6379 9.89146 11.9926L9.09226 13.0307L8.42198 12.0559C6.83647 9.72637 5.12208 8.57433 4.06508 9.11867C3.67836 9.32127 3.74282 9.44788 4.90294 10.6507C5.92128 11.7015 6.97828 13.1954 7.72592 14.6512C8.33175 15.8288 9.82706 15.8288 10.8454 14.1323C11.5802 12.9041 13.475 10.562 15.0347 8.9668L16.4269 7.53616L16.762 8.27047C19.7526 14.8412 12.4567 22.45 6.32088 19.1584C0.0561834 15.7908 1.47411 4.99144 8.30603 4.02925C9.6466 3.83936 9.67232 3.39623 8.34461 3.23165C4.9158 2.77587 0.533132 6.76384 0.0690753 10.7393C-0.807472 18.3228 6.81073 23.2603 14.2613 19.956C18.7858 17.9556 20.8998 10.7645 18.1026 6.96645C17.8964 6.68796 17.7288 6.42211 17.7288 6.35874C17.7288 6.0929 20.0362 4.06723 22.4853 2.21882C25.2438 0.129861 23.813 -0.756371 21.5443 0.762877Z" fill="#2EA3FF" /></svg>
-                                <BitTypography Variant="BitTypographyVariant.H6" Gutter>through Email, Phone, Online meeting</BitTypography>
+                                <BitText Typography="BitTypography.H6" Gutter>through Email, Phone, Online meeting</BitText>
                             </div>
                             <div class="plan-card-item">
                                 <svg width="24" height="21"><path d="M21.5443 0.762877C20.1651 1.68708 19.4818 2.23149 17.7804 3.76339C16.3237 5.06741 16.3496 5.05475 15.9371 4.63696C15.0864 3.73808 11.9668 2.9278 11.0774 3.39624C10.652 3.61146 10.7036 4.04192 11.1548 4.04192C12.3793 4.05458 13.5137 4.61164 14.4805 5.40924C15.3441 6.13088 15.3441 6.09289 14.1196 7.28293C12.8047 8.54896 10.9356 10.6379 9.89146 11.9926L9.09226 13.0307L8.42198 12.0559C6.83647 9.72637 5.12208 8.57433 4.06508 9.11867C3.67836 9.32127 3.74282 9.44788 4.90294 10.6507C5.92128 11.7015 6.97828 13.1954 7.72592 14.6512C8.33175 15.8288 9.82706 15.8288 10.8454 14.1323C11.5802 12.9041 13.475 10.562 15.0347 8.9668L16.4269 7.53616L16.762 8.27047C19.7526 14.8412 12.4567 22.45 6.32088 19.1584C0.0561834 15.7908 1.47411 4.99144 8.30603 4.02925C9.6466 3.83936 9.67232 3.39623 8.34461 3.23165C4.9158 2.77587 0.533132 6.76384 0.0690753 10.7393C-0.807472 18.3228 6.81073 23.2603 14.2613 19.956C18.7858 17.9556 20.8998 10.7645 18.1026 6.96645C17.8964 6.68796 17.7288 6.42211 17.7288 6.35874C17.7288 6.0929 20.0362 4.06723 22.4853 2.21882C25.2438 0.129861 23.813 -0.756371 21.5443 0.762877Z" fill="#2EA3FF" /></svg>
-                                <BitTypography Variant="BitTypographyVariant.H6">
+                                <BitText Typography="BitTypography.H6">
                                     Architecting, Debugging, Code review <br />
                                     for bit components & project templates <br />
                                     and their dependencies such as <br />
                                     <b>ASP.NET Core</b>, <b>EF</b>, <b>MAUI</b>, <b>Blazor</b>
-                                </BitTypography>
+                                </BitText>
                             </div>
                             <br />
                         </div>
@@ -116,11 +116,11 @@
         @if (isSent)
         {
             <div class="modal-message-container">
-                <BitTypography Variant="BitTypographyVariant.H3" Gutter>Thanks</BitTypography>
-                <BitTypography Variant="BitTypographyVariant.H5" Gutter><b>@buyPackageModel.Email</b></BitTypography>
+                <BitText Typography="BitTypography.H3" Gutter>Thanks</BitText>
+                <BitText Typography="BitTypography.H5" Gutter><b>@buyPackageModel.Email</b></BitText>
                 <br />
-                <BitTypography Variant="BitTypographyVariant.H6" Gutter>Your request has been sent</BitTypography>
-                <BitTypography Variant="BitTypographyVariant.Body1">We will contact you soon</BitTypography>
+                <BitText Typography="BitTypography.H6" Gutter>Your request has been sent</BitText>
+                <BitText Typography="BitTypography.Body1">We will contact you soon</BitText>
             </div>
         }
         else
@@ -128,8 +128,8 @@
 
             <EditForm Model="buyPackageModel" OnValidSubmit="SendMessage" class="form" novalidate>
                 <DataAnnotationsValidator />
-                <BitTypography Variant="BitTypographyVariant.H4" Gutter>Contact sale team</BitTypography>
-                <BitTypography Variant="BitTypographyVariant.Subtitle1" Gutter>Buying the commercial package</BitTypography>
+                <BitText Typography="BitTypography.H4" Gutter>Contact sale team</BitText>
+                <BitText Typography="BitTypography.Subtitle1" Gutter>Buying the commercial package</BitText>
                 <br />
                 <BitTextField @bind-Value="@buyPackageModel.Email"
                               Label="Email"
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates01OverviewPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates01OverviewPage.razor
index 3bb2e7a94c..30c887d721 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates01OverviewPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates01OverviewPage.razor
@@ -11,8 +11,8 @@
             Description="overview of the project templates of the bit platform" />
 
 <div class="page-container">
-    <BitTypography Variant="BitTypographyVariant.H3" Gutter>bit Boilerplate</BitTypography>
-    <BitTypography Variant="BitTypographyVariant.Subtitle1">
+    <BitText Typography="BitTypography.H3" Gutter>bit Boilerplate</BitText>
+    <BitText Typography="BitTypography.Subtitle1">
         If our efforts in providing modern tooling have piqued your interest, dive into the Bit Boilerplate project template.
         <br />
         Experience all of our tools along with additional features such as ASP.NET Core Identity integration,
@@ -22,7 +22,7 @@
         <br /><br />
         bit Boilerplate is a feature-rich project template for both Visual studio and the .NET CLI.
         It comes with a lot of features right out of the box that are required for a real world application.
-    </BitTypography>
+    </BitText>
     <br /><br />
     <div class="video-container">
         <iframe src="https://www.youtube.com/embed/UjdWBvb0xac?si=e7adGT3FLdPXpOSg"
@@ -31,13 +31,13 @@
         </iframe>
     </div>
     <br />
-    <BitTypography Variant="BitTypographyVariant.H6" Gutter>Supported browsers</BitTypography>
+    <BitText Typography="BitTypography.H6" Gutter>Supported browsers</BitText>
     <div class="section-card-txt">
         <ul>
             <li>
-                <BitTypography Variant="BitTypographyVariant.Body1" Gutter>
+                <BitText Typography="BitTypography.Body1" Gutter>
                     Blazor is supported in the browsers shown in the following list on both mobile and desktop platforms.
-                </BitTypography>
+                </BitText>
                 <ul dir="auto">
                     <li>Apple Safari (Current† version)</li>
                     <li>Google Chrome (Current† version)</li>
@@ -48,13 +48,13 @@
         </ul>
     </div>
     <br />
-    <BitTypography Variant="BitTypographyVariant.H6" Gutter>Supported platforms</BitTypography>
+    <BitText Typography="BitTypography.H6" Gutter>Supported platforms</BitText>
     <div class="section-card-txt">
         <ul>
             <li>
-                <BitTypography Variant="BitTypographyVariant.Body1" Gutter>
+                <BitText Typography="BitTypography.Body1" Gutter>
                     Blazor Hybrid apps have the following additional platform requirements:
-                </BitTypography>
+                </BitText>
                 <ul dir="auto">
                     <li>Android 7.1 (API Level 24) or higher</li>
                     <li>iOS 15 or higher</li>
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates02SamplesPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates02SamplesPage.razor
index 913ac8ded8..75babadfba 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates02SamplesPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates02SamplesPage.razor
@@ -6,19 +6,19 @@
             Description="samples of the project templates of the bit platform" />
 
 <div class="page-container">
-    <BitTypography Variant="BitTypographyVariant.H3" Gutter>Boilerplate Samples</BitTypography>
+    <BitText Typography="BitTypography.H3" Gutter>Boilerplate Samples</BitText>
 
-    <BitTypography Variant="BitTypographyVariant.Subtitle1">
+    <BitText Typography="BitTypography.Subtitle1">
         We published a few apps using our own bit Boilerplate project template in different platforms.
         <br />
         Two distinct samples that further explain the features in action are included in the project template:
-    </BitTypography>
+    </BitText>
 
     <br />
     <br />
     <br />
 
-    <BitTypography Variant="BitTypographyVariant.H4" Gutter>AdminPanel sample</BitTypography>
+    <BitText Typography="BitTypography.H4" Gutter>AdminPanel sample</BitText>
     <div class="page-flex-container">
         <div class="page-content-container">
             <div class="image-container">
@@ -27,9 +27,9 @@
                     <div class="demo-btn">Demo</div>
                 </a>
             </div>
-            <BitTypography Variant="BitTypographyVariant.Body1">
+            <BitText Typography="BitTypography.Body1">
                 The AdminPanel sample is a project powered by bit Boilerplate that includes all the necessary parts to create a fully-featured cross-platform admin/management website/app.
-            </BitTypography>
+            </BitText>
         </div>
 
         <div class="page-content-container">
@@ -44,7 +44,7 @@
     <br />
     <br />
 
-    <BitTypography Variant="BitTypographyVariant.H4" Gutter>Todo sample</BitTypography>
+    <BitText Typography="BitTypography.H4" Gutter>Todo sample</BitText>
     <div class="page-flex-container">
         <div class="page-content-container">
             <div class="image-container">
@@ -53,9 +53,9 @@
                     <div class="demo-btn">Demo</div>
                 </a>
             </div>
-            <BitTypography Variant="BitTypographyVariant.Body1">
+            <BitText Typography="BitTypography.Body1">
                 The Todo sample is a project powered by Boilerplate that includes work packages and actions that you can apply to various cross-platform projects.
-            </BitTypography>
+            </BitText>
         </div>
 
         <div class="page-content-container">
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates03GettingStartedPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates03GettingStartedPage.razor
index 45305301c8..fd839b566d 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates03GettingStartedPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates03GettingStartedPage.razor
@@ -7,21 +7,21 @@
             Description="Getting started with the project templates on the bit platform" />
 
 <div class="page-container">
-    <BitTypography Variant="BitTypographyVariant.H3" Gutter>Getting started</BitTypography>
+    <BitText Typography="BitTypography.H3" Gutter>Getting started</BitText>
     <br />
 
     <section class="section-card">
         <div class="section-card-txt">
-            <BitTypography Variant="BitTypographyVariant.H5" Gutter>Setup your development environment</BitTypography>
+            <BitText Typography="BitTypography.H5" Gutter>Setup your development environment</BitText>
             <br />
             <BitPivot>
                 <BitPivotItem HeaderText="One-step setup">
                     <br />
-                    <BitTypography Variant="BitTypographyVariant.H6" Gutter>
+                    <BitText Typography="BitTypography.H6" Gutter>
                         Windows - Visual Studio & Visual Studio Code
-                    </BitTypography>
+                    </BitText>
                     <br />
-                    <BitTypography Variant="BitTypographyVariant.Body1" Gutter>
+                    <BitText Typography="BitTypography.Body1" Gutter>
                         To enhance the developer experience, we’ve consolidated the installation process into a single,
                         easy-to-use chain of commands.
                         <br />
@@ -32,7 +32,7 @@
                         The default commands listed below are required for Web & API development, however,
                         you can choose other options too, then click the Copy button and paste them into
                         the Windows PowerShell as an Administrator to run.
-                    </BitTypography>
+                    </BitText>
                     <br />
                     <BitStack Gap="1rem">
                         <BitCheckbox Label="Cross-platform development" @bind-Value="enableCrossPlatform" />
@@ -61,10 +61,10 @@
                 </BitPivotItem>
                 <BitPivotItem HeaderText="Step-by-step setup">
                     <br />
-                    <BitStack Horizontal VerticalAlign="BitStackAlignment.End" Gap="1rem">
-                        <BitTypography Variant="BitTypographyVariant.H6" Gutter>
+                    <BitStack Horizontal VerticalAlign="BitAlignment.End" Gap="1rem">
+                        <BitText Typography="BitTypography.H6" Gutter>
                             Step-by-step instructions for
-                        </BitTypography>
+                        </BitText>
                         <BitPivot HeadersOnly="true" OnItemClick="@(item => devOS = item?.Key)">
                             <BitPivotItem HeaderText="Windows" Key="Windows"></BitPivotItem>
                             <BitPivotItem HeaderText="macOS" Key="macOS"></BitPivotItem>
@@ -144,12 +144,12 @@ rm dotnet.tar.gz</CodeBox>
                         }
                     </ol>
                     <br />
-                    <BitTypography Variant="BitTypographyVariant.H5" Gutter>IDE specific requirements</BitTypography>
+                    <BitText Typography="BitTypography.H5" Gutter>IDE specific requirements</BitText>
                     <br />
                     @if (devOS is "Windows")
                     {
-                        <BitTypography Variant="BitTypographyVariant.H6" Gutter>Visual Studio</BitTypography>
-                        <BitStack Horizontal VerticalAlign="BitStackAlignment.Center" Gap="2rem" Style="overflow-x:auto">
+                        <BitText Typography="BitTypography.H6" Gutter>Visual Studio</BitText>
+                        <BitStack Horizontal VerticalAlign="BitAlignment.Center" Gap="2rem" Style="overflow-x:auto">
                             <div class="section-card-txt">
                                 <ul>
                                     <li>
@@ -179,7 +179,7 @@ rm dotnet.tar.gz</CodeBox>
                             <img class="image" alt="VS Setup" src="/images/templates/vs-setup.webp" />
                         </BitStack>
                     }
-                    <BitTypography Variant="BitTypographyVariant.H6" Gutter>VS Code</BitTypography>
+                    <BitText Typography="BitTypography.H6" Gutter>VS Code</BitText>
                     <div class="section-card-txt">
                         <ul>
                             <li>
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates04ProjectStructurePage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates04ProjectStructurePage.razor
index 92a6216c3b..bf70fe93d2 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates04ProjectStructurePage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates04ProjectStructurePage.razor
@@ -8,7 +8,7 @@
             Description="project structure of the project templates of the bit platform" />
 
 <div class="page-container">
-    <BitTypography Variant="BitTypographyVariant.H3" Gutter>Project structure</BitTypography>
+    <BitText Typography="BitTypography.H3" Gutter>Project structure</BitText>
     <br />
     <section class="section-card">
         <div class="section-card-txt">
@@ -19,7 +19,7 @@
         <div class="row-section-container">
             <div>
                 <div class="section-card-txt">
-                    <BitTypography Variant="BitTypographyVariant.H5" Gutter>Solution files</BitTypography>
+                    <BitText Typography="BitTypography.H5" Gutter>Solution files</BitText>
                     The image on the right displays project structure.
                     You will find two solution files in your project: MyFirstProject.sln and MyFirstProject.Web.slnf.
                     The MyFirstProject.Web.slnf file is designed to enhance your development efficiency by providing faster compilation,
@@ -29,7 +29,7 @@
                     <br />
                 </div>
                 <div class="section-card-txt">
-                    <BitTypography Variant="BitTypographyVariant.H5" Gutter>Global files</BitTypography>
+                    <BitText Typography="BitTypography.H5" Gutter>Global files</BitText>
                     When navigating to the MyFirstProject folder, open the .github directory.
                     Here, you will find the workflows responsible for managing the CI/CD pipeline.
                     The subsequent sections will provide detailed information about these files.
@@ -52,7 +52,7 @@
                 </div>
 
                 <div class="section-card-txt">
-                    <BitTypography Variant="BitTypographyVariant.H5" Gutter>Directory.Build.props</BitTypography>
+                    <BitText Typography="BitTypography.H5" Gutter>Directory.Build.props</BitText>
                     In the src folder, which serves as the source of the project, you will find three directories: Client, Server, and Shared, as well as a Directory.Build.props file.
                     Just like csproj files, Directory.Build.props consists of two primary sections: PropertyGroup and ItemGroup.
 
@@ -100,7 +100,7 @@
 
     <section class="section-card">
         <div class="section-card-txt">
-            <BitTypography Variant="BitTypographyVariant.H5" Gutter>Server Projects</BitTypography>
+            <BitText Typography="BitTypography.H5" Gutter>Server Projects</BitText>
 
             Inside the src/Server folder, there are two projects: Server.Api, Server.Web.
             <ul>
@@ -132,14 +132,14 @@
 
     <section class="section-card">
         <div class="section-card-txt">
-            <BitTypography Variant="BitTypographyVariant.H5" Gutter>Shared Project</BitTypography>
+            <BitText Typography="BitTypography.H5" Gutter>Shared Project</BitText>
             Since both the client and server are written in C#, it is logical to have a shared project that contains code used by both, such as Data Transfer Objects (DTOs) and other common classes.
         </div>
     </section>
 
     <section class="section-card">
         <div class="section-card-txt">
-            <BitTypography Variant="BitTypographyVariant.H5" Gutter>Client Projects</BitTypography>
+            <BitText Typography="BitTypography.H5" Gutter>Client Projects</BitText>
             On the client side, the Client.Core project contains various components, including Layouts, Pages, and other essential elements.
             <br />
             <br />
@@ -166,7 +166,7 @@
 
     <section class="section-card">
         <div class="section-card-txt">
-            <BitTypography Variant="BitTypographyVariant.H5" Gutter>Test Project</BitTypography>
+            <BitText Typography="BitTypography.H5" Gutter>Test Project</BitText>
             A sample test project is provided to demonstrate how to add integration tests to your project in a way that replicates the real
             behavior of a server, such as using SignalR. Additionally, it offers guidance on using dependency injection to mock server behavior and logic when needed.
         </div>
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates05CreateProjectPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates05CreateProjectPage.razor
index 28d06eb1bf..7b6b0577e2 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates05CreateProjectPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates05CreateProjectPage.razor
@@ -9,11 +9,11 @@
 
 <div class="page-container">
 
-    <BitTypography Variant="BitTypographyVariant.H3" Gutter>Create Project</BitTypography>
+    <BitText Typography="BitTypography.H3" Gutter>Create Project</BitText>
     <br />
-    <BitTypography Variant="BitTypographyVariant.Subtitle1" Gutter>
+    <BitText Typography="BitTypography.Subtitle1" Gutter>
         Let's make our next cross platform project a success with Bit.Boilerplate.
-    </BitTypography>
+    </BitText>
     <br />
     <CodeBox>
         @GetFinalCommand()
@@ -25,7 +25,7 @@
              HorizontalSpacing="1rem">
         <BitGridItem Class="grid-item">
             <div class="row">
-                <BitTypography Variant="BitTypographyVariant.H6" Gutter>Name</BitTypography>
+                <BitText Typography="BitTypography.H6" Gutter>Name</BitText>
                 <BitTextField IsRequired @bind-Value="@name" Placeholder="Enter a name" MaxLength="60" Immediate DebounceTime="300" />
             </div>
             <br />
@@ -38,7 +38,7 @@
 
         <BitGridItem Class="grid-item">
             <div class="row">
-                <BitTypography Variant="BitTypographyVariant.H6" Gutter>Captcha</BitTypography>
+                <BitText Typography="BitTypography.H6" Gutter>Captcha</BitText>
                 <BitDropdown Placeholder="Choose captcha" Items="@captcha.Items" @bind-Value="@captcha.Value" />
             </div>
             <br />
@@ -65,7 +65,7 @@
 
         <BitGridItem Class="grid-item">
             <div class="row">
-                <BitTypography Variant="BitTypographyVariant.H6" Gutter>Pipeline</BitTypography>
+                <BitText Typography="BitTypography.H6" Gutter>Pipeline</BitText>
                 <BitDropdown Placeholder="Choose pipeline" Items="@pipeline.Items" @bind-Value="@pipeline.Value" />
             </div>
             <br />
@@ -96,7 +96,7 @@
 
         <BitGridItem Class="grid-item">
             <div class="row">
-                <BitTypography Variant="BitTypographyVariant.H6" Gutter>Sample</BitTypography>
+                <BitText Typography="BitTypography.H6" Gutter>Sample</BitText>
                 <BitDropdown Placeholder="Choose sample" Items="@sample.Items" @bind-Value="@sample.Value" />
             </div>
             <br />
@@ -109,7 +109,7 @@
 
         <BitGridItem Class="grid-item">
             <div class="row">
-                <BitTypography Variant="BitTypographyVariant.H6" Gutter>Windows</BitTypography>
+                <BitText Typography="BitTypography.H6" Gutter>Windows</BitText>
                 <BitToggle @bind-Value="windows.Value" OnText="true" OffText="false" />
             </div>
             <br />
@@ -122,7 +122,7 @@
 
         <BitGridItem Class="grid-item">
             <div class="row">
-                <BitTypography Variant="BitTypographyVariant.H6" Gutter>App Center</BitTypography>
+                <BitText Typography="BitTypography.H6" Gutter>App Center</BitText>
                 <BitToggle @bind-Value="appCenter.Value" OnText="true" OffText="false" />
             </div>
             <br />
@@ -135,7 +135,7 @@
 
         <BitGridItem Class="grid-item">
             <div class="row">
-                <BitTypography Variant="BitTypographyVariant.H6" Gutter>AppInsights</BitTypography>
+                <BitText Typography="BitTypography.H6" Gutter>AppInsights</BitText>
                 <BitToggle @bind-Value="appInsight.Value" OnText="true" OffText="false" />
             </div>
             <br />
@@ -149,7 +149,7 @@
 
         <BitGridItem Class="grid-item">
             <div class="row">
-                <BitTypography Variant="BitTypographyVariant.H6" Gutter>SignalR</BitTypography>
+                <BitText Typography="BitTypography.H6" Gutter>SignalR</BitText>
                 <BitToggle @bind-Value="signalr.Value" OnText="true" OffText="false" />
             </div>
             <br />
@@ -161,7 +161,7 @@
 
         <BitGridItem Class="grid-item">
             <div class="row">
-                <BitTypography Variant="BitTypographyVariant.H6" Gutter>File Storage</BitTypography>
+                <BitText Typography="BitTypography.H6" Gutter>File Storage</BitText>
                 <BitDropdown Placeholder="Choose file storage" Items="@fileStorage.Items" @bind-Value="@fileStorage.Value" />
             </div>
             <CodeBox>
@@ -198,7 +198,7 @@
 
         <BitGridItem Class="grid-item">
             <div class="row">
-                <BitTypography Variant="BitTypographyVariant.H6" Gutter>Offline Database</BitTypography>
+                <BitText Typography="BitTypography.H6" Gutter>Offline Database</BitText>
                 <BitToggle @bind-Value="offlineDb.Value" OnText="true" OffText="false" />
             </div>
             <br />
@@ -214,7 +214,7 @@
 
         <BitGridItem Class="grid-item" ColumnSpan="2">
             <div class="row">
-                <BitTypography Variant="BitTypographyVariant.H6" Gutter>Server Database</BitTypography>
+                <BitText Typography="BitTypography.H6" Gutter>Server Database</BitText>
                 <BitDropdown Placeholder="Choose database" Items="@database.Items" @bind-Value="@database.Value" />
             </div>
             <br />
@@ -275,7 +275,7 @@
 
         <BitGridItem Class="grid-item" ColumnSpan="2">
             <div class="row">
-                <BitTypography Variant="BitTypographyVariant.H6" Gutter>API</BitTypography>
+                <BitText Typography="BitTypography.H6" Gutter>API</BitText>
                 <BitDropdown Placeholder="Choose api" Items="@api.Items" @bind-Value="@api.Value" />
             </div>
             <br />
@@ -311,7 +311,7 @@
     <br />
     <br />
     <section class="section-card">
-        <BitTypography Variant="BitTypographyVariant.H5" Gutter>Visual Studio</BitTypography>
+        <BitText Typography="BitTypography.H5" Gutter>Visual Studio</BitText>
         <br />
         <BitCarousel Style="height:unset;aspect-ratio:1/.55" AutoPlay=true InfiniteScrolling=true AutoPlayInterval="5000">
             <BitCarouselItem>
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/Footer.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/Footer.razor
index 2b3e8ec150..227175830b 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/Footer.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/Footer.razor
@@ -4,9 +4,9 @@
     <section class="footer-section">
         <div class="footer-col">
             <div class="bit-logo"></div>
-            <BitTypography Variant="BitTypographyVariant.Body1">
+            <BitText Typography="BitTypography.Body1">
                 A platform that simplifies the development process through its comprehensive toolset.
-            </BitTypography>
+            </BitText>
         </div>
         <div class="footer-links-container">
             <div class="footer-col">
diff --git a/src/Websites/Sales/src/Bit.Websites.Sales.Client/Components/ProcessAccordion.razor b/src/Websites/Sales/src/Bit.Websites.Sales.Client/Components/ProcessAccordion.razor
index 544e30a1bb..6ca4325c6f 100644
--- a/src/Websites/Sales/src/Bit.Websites.Sales.Client/Components/ProcessAccordion.razor
+++ b/src/Websites/Sales/src/Bit.Websites.Sales.Client/Components/ProcessAccordion.razor
@@ -1,7 +1,7 @@
 <div>
     <BitAccordion Class="process-accordion">
         <HeaderTemplate Context="isExpanded">
-            <BitStack Horizontal Gap="1rem" VerticalAlign="BitStackAlignment.Center">
+            <BitStack Horizontal Gap="1rem" VerticalAlign="BitAlignment.Center">
                 <BitIcon Class="acc-icon"
                          Size="BitSize.Small"
                          IconName="@(isExpanded ? BitIconName.ChevronDown : BitIconName.ChevronRight)" />
diff --git a/src/Websites/Sales/src/Bit.Websites.Sales.Client/Pages/YourTeamPage.razor b/src/Websites/Sales/src/Bit.Websites.Sales.Client/Pages/YourTeamPage.razor
index d240dbb6ec..c636b74f56 100644
--- a/src/Websites/Sales/src/Bit.Websites.Sales.Client/Pages/YourTeamPage.razor
+++ b/src/Websites/Sales/src/Bit.Websites.Sales.Client/Pages/YourTeamPage.razor
@@ -79,10 +79,10 @@
 </section>
 
 <section class="page-sec">
-    <BitTypography Variant="BitTypographyVariant.H5" Gutter>
+    <BitText Typography="BitTypography.H5" Gutter>
         From our experience, the dedicated team pricing model suits mid-to-enterprise projects, ensuring both quality and fair pricing.
         Feel free to reach out for specific requirements or alternative approaches.
-    </BitTypography>
+    </BitText>
 </section>
 
 <section class="page-sec people-behind-the-art" id="art">

From 1fc5f26f15115187accaec74958d5f4f0b56ea3f Mon Sep 17 00:00:00 2001
From: Yaser Moradi <ysmoradi@outlook.com>
Date: Wed, 4 Sep 2024 07:38:37 +0200
Subject: [PATCH 09/38] feat(deps): update project dependencies #8496 (#8497)

---
 src/BlazorUI/Bit.BlazorUI.Extras/package-lock.json       | 9 +++++----
 src/BlazorUI/Bit.BlazorUI.Extras/package.json            | 2 +-
 src/BlazorUI/Bit.BlazorUI/package-lock.json              | 9 +++++----
 src/BlazorUI/Bit.BlazorUI/package.json                   | 2 +-
 .../Bit.BlazorUI.Demo.Server.csproj                      | 4 ++--
 .../Bit.BlazorUI.Demo.Client.Core/package-lock.json      | 9 +++++----
 .../Client/Bit.BlazorUI.Demo.Client.Core/package.json    | 2 +-
 .../Bit.BlazorUI.Demo.Client.Maui.csproj                 | 6 +++---
 .../.config/dotnet-tools.json                            | 2 +-
 .../Bit.BlazorUI.Demo.Client.Windows.csproj              | 4 ++--
 .../Demo/Bit.Butil.Demo.Maui/Bit.Butil.Demo.Maui.csproj  | 4 ++--
 .../src/Client/Boilerplate.Client.Core/package-lock.json | 9 +++++----
 .../src/Client/Boilerplate.Client.Core/package.json      | 2 +-
 .../Boilerplate.Client.Maui.csproj                       | 6 +++---
 .../Boilerplate.Client.Windows/.config/dotnet-tools.json | 2 +-
 .../Boilerplate.Client.Windows.csproj                    | 4 ++--
 .../Boilerplate.Server.Api/Boilerplate.Server.Api.csproj | 4 ++--
 .../src/Bit.Websites.Careers.Client/package-lock.json    | 9 +++++----
 .../Careers/src/Bit.Websites.Careers.Client/package.json | 2 +-
 .../Bit.Websites.Careers.Server.csproj                   | 4 ++--
 .../src/Bit.Websites.Platform.Client/package-lock.json   | 9 +++++----
 .../src/Bit.Websites.Platform.Client/package.json        | 2 +-
 .../Bit.Websites.Platform.Server.csproj                  | 4 ++--
 .../src/Bit.Websites.Sales.Client/package-lock.json      | 9 +++++----
 .../Sales/src/Bit.Websites.Sales.Client/package.json     | 2 +-
 .../Bit.Websites.Sales.Server.csproj                     | 4 ++--
 26 files changed, 66 insertions(+), 59 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/package-lock.json b/src/BlazorUI/Bit.BlazorUI.Extras/package-lock.json
index abac6138df..83ce78552d 100644
--- a/src/BlazorUI/Bit.BlazorUI.Extras/package-lock.json
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/package-lock.json
@@ -6,7 +6,7 @@
         "": {
             "devDependencies": {
                 "esbuild": "0.23.1",
-                "sass": "1.77.8",
+                "sass": "1.78.0",
                 "typescript": "5.5.4"
             }
         },
@@ -639,10 +639,11 @@
             }
         },
         "node_modules/sass": {
-            "version": "1.77.8",
-            "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.8.tgz",
-            "integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==",
+            "version": "1.78.0",
+            "resolved": "https://registry.npmjs.org/sass/-/sass-1.78.0.tgz",
+            "integrity": "sha512-AaIqGSrjo5lA2Yg7RvFZrlXDBCp3nV4XP73GrLGvdRWWwk+8H3l0SDvq/5bA4eF+0RFPLuWUk3E+P1U/YqnpsQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "chokidar": ">=3.0.0 <4.0.0",
                 "immutable": "^4.0.0",
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/package.json b/src/BlazorUI/Bit.BlazorUI.Extras/package.json
index cf13737074..b0faf504d2 100644
--- a/src/BlazorUI/Bit.BlazorUI.Extras/package.json
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/package.json
@@ -1,7 +1,7 @@
 {
     "devDependencies": {
         "esbuild": "0.23.1",
-        "sass": "1.77.8",
+        "sass": "1.78.0",
         "typescript": "5.5.4"
     }
 }
diff --git a/src/BlazorUI/Bit.BlazorUI/package-lock.json b/src/BlazorUI/Bit.BlazorUI/package-lock.json
index 9b1eca1895..ca117d467a 100644
--- a/src/BlazorUI/Bit.BlazorUI/package-lock.json
+++ b/src/BlazorUI/Bit.BlazorUI/package-lock.json
@@ -6,7 +6,7 @@
         "": {
             "devDependencies": {
                 "esbuild": "0.23.1",
-                "sass": "1.77.8",
+                "sass": "1.78.0",
                 "typescript": "5.5.4"
             }
         },
@@ -639,10 +639,11 @@
             }
         },
         "node_modules/sass": {
-            "version": "1.77.8",
-            "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.8.tgz",
-            "integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==",
+            "version": "1.78.0",
+            "resolved": "https://registry.npmjs.org/sass/-/sass-1.78.0.tgz",
+            "integrity": "sha512-AaIqGSrjo5lA2Yg7RvFZrlXDBCp3nV4XP73GrLGvdRWWwk+8H3l0SDvq/5bA4eF+0RFPLuWUk3E+P1U/YqnpsQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "chokidar": ">=3.0.0 <4.0.0",
                 "immutable": "^4.0.0",
diff --git a/src/BlazorUI/Bit.BlazorUI/package.json b/src/BlazorUI/Bit.BlazorUI/package.json
index cf13737074..b0faf504d2 100644
--- a/src/BlazorUI/Bit.BlazorUI/package.json
+++ b/src/BlazorUI/Bit.BlazorUI/package.json
@@ -1,7 +1,7 @@
 {
     "devDependencies": {
         "esbuild": "0.23.1",
-        "sass": "1.77.8",
+        "sass": "1.78.0",
         "typescript": "5.5.4"
     }
 }
diff --git a/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Bit.BlazorUI.Demo.Server.csproj b/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Bit.BlazorUI.Demo.Server.csproj
index 385566cbd5..c22ecc2f5b 100644
--- a/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Bit.BlazorUI.Demo.Server.csproj
+++ b/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Bit.BlazorUI.Demo.Server.csproj
@@ -15,9 +15,9 @@
         </PackageReference>
         <PackageReference Include="Microsoft.AspNetCore.OData" Version="9.0.0" />
         <PackageReference Include="MimeTypeMapOfficial" Version="1.0.17" />
-        <PackageReference Include="Swashbuckle.AspNetCore" Version="6.7.1" />
+        <PackageReference Include="Swashbuckle.AspNetCore" Version="6.7.3" />
         <PackageReference Include="AspNetCore.HealthChecks.System" Version="8.0.1" />
-        <PackageReference Include="AspNetCore.HealthChecks.UI" Version="8.0.1" />
+        <PackageReference Include="AspNetCore.HealthChecks.UI" Version="8.0.2" />
         <PackageReference Include="AspNetCore.HealthChecks.UI.Client" Version="8.0.1" />
         <PackageReference Include="AspNetCore.HealthChecks.UI.InMemory.Storage" Version="8.0.1" />
         <PackageReference Include="Riok.Mapperly" Version="3.6.0" />
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/package-lock.json b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/package-lock.json
index 75be23b7c8..3b07a9fefc 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/package-lock.json
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/package-lock.json
@@ -6,7 +6,7 @@
         "": {
             "devDependencies": {
                 "esbuild": "0.23.1",
-                "sass": "1.77.8",
+                "sass": "1.78.0",
                 "typescript": "5.5.4"
             }
         },
@@ -639,10 +639,11 @@
             }
         },
         "node_modules/sass": {
-            "version": "1.77.8",
-            "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.8.tgz",
-            "integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==",
+            "version": "1.78.0",
+            "resolved": "https://registry.npmjs.org/sass/-/sass-1.78.0.tgz",
+            "integrity": "sha512-AaIqGSrjo5lA2Yg7RvFZrlXDBCp3nV4XP73GrLGvdRWWwk+8H3l0SDvq/5bA4eF+0RFPLuWUk3E+P1U/YqnpsQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "chokidar": ">=3.0.0 <4.0.0",
                 "immutable": "^4.0.0",
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/package.json b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/package.json
index cf13737074..b0faf504d2 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/package.json
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/package.json
@@ -1,7 +1,7 @@
 {
     "devDependencies": {
         "esbuild": "0.23.1",
-        "sass": "1.77.8",
+        "sass": "1.78.0",
         "typescript": "5.5.4"
     }
 }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Maui/Bit.BlazorUI.Demo.Client.Maui.csproj b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Maui/Bit.BlazorUI.Demo.Client.Maui.csproj
index 325ccaeae9..3e182f7804 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Maui/Bit.BlazorUI.Demo.Client.Maui.csproj
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Maui/Bit.BlazorUI.Demo.Client.Maui.csproj
@@ -102,9 +102,9 @@
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Microsoft.Maui.Controls" Version="8.0.80" />
-        <PackageReference Include="Microsoft.Maui.Controls.Compatibility" Version="8.0.80" />
-        <PackageReference Include="Microsoft.Maui.Essentials" Version="8.0.80" />
+        <PackageReference Include="Microsoft.Maui.Controls" Version="8.0.82" />
+        <PackageReference Include="Microsoft.Maui.Controls.Compatibility" Version="8.0.82" />
+        <PackageReference Include="Microsoft.Maui.Essentials" Version="8.0.82" />
         <PackageReference Include="Microsoft.AspNetCore.Components.WebView.Maui" Version="8.0.80" />
     </ItemGroup>
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Windows/.config/dotnet-tools.json b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Windows/.config/dotnet-tools.json
index 202aa02dee..6031cf8fe5 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Windows/.config/dotnet-tools.json
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Windows/.config/dotnet-tools.json
@@ -3,7 +3,7 @@
     "isRoot": true,
     "tools": {
         "vpk": {
-            "version": "0.0.583",
+            "version": "0.0.594",
             "commands": [
                 "vpk"
             ]
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Windows/Bit.BlazorUI.Demo.Client.Windows.csproj b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Windows/Bit.BlazorUI.Demo.Client.Windows.csproj
index 0410a099df..3fb6336ba7 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Windows/Bit.BlazorUI.Demo.Client.Windows.csproj
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Windows/Bit.BlazorUI.Demo.Client.Windows.csproj
@@ -26,8 +26,8 @@
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
         <PackageReference Include="Microsoft.AspNetCore.Components.WebView.Wpf" Version="8.0.80" />
-        <PackageReference Include="Microsoft.Web.WebView2" Version="1.0.2651.64" />
-        <PackageReference Include="Velopack" Version="0.0.583" />
+        <PackageReference Include="Microsoft.Web.WebView2" Version="1.0.2739.15" />
+        <PackageReference Include="Velopack" Version="0.0.594" />
         <PackageReference Include="Newtonsoft.Json" Version="13.0.3" />
         
         <Content Include="..\Bit.BlazorUI.Demo.Client.Maui\wwwroot\index.html" Link="wwwroot\index.html">
diff --git a/src/Butil/Demo/Bit.Butil.Demo.Maui/Bit.Butil.Demo.Maui.csproj b/src/Butil/Demo/Bit.Butil.Demo.Maui/Bit.Butil.Demo.Maui.csproj
index 872f68b280..8ca1e6b913 100644
--- a/src/Butil/Demo/Bit.Butil.Demo.Maui/Bit.Butil.Demo.Maui.csproj
+++ b/src/Butil/Demo/Bit.Butil.Demo.Maui/Bit.Butil.Demo.Maui.csproj
@@ -50,8 +50,8 @@
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Microsoft.Maui.Controls" Version="8.0.80" />
-        <PackageReference Include="Microsoft.Maui.Controls.Compatibility" Version="8.0.80" />
+        <PackageReference Include="Microsoft.Maui.Controls" Version="8.0.82" />
+        <PackageReference Include="Microsoft.Maui.Controls.Compatibility" Version="8.0.82" />
         <PackageReference Include="Microsoft.AspNetCore.Components.WebView.Maui" Version="8.0.80" />
         <PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="8.0.0" />
     </ItemGroup>
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/package-lock.json b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/package-lock.json
index 223177aa57..62b999cbf4 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/package-lock.json
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/package-lock.json
@@ -6,7 +6,7 @@
         "": {
             "devDependencies": {
                 "esbuild": "0.23.1",
-                "sass": "1.77.8",
+                "sass": "1.78.0",
                 "typescript": "5.5.4"
             }
         },
@@ -639,10 +639,11 @@
             }
         },
         "node_modules/sass": {
-            "version": "1.77.8",
-            "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.8.tgz",
-            "integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==",
+            "version": "1.78.0",
+            "resolved": "https://registry.npmjs.org/sass/-/sass-1.78.0.tgz",
+            "integrity": "sha512-AaIqGSrjo5lA2Yg7RvFZrlXDBCp3nV4XP73GrLGvdRWWwk+8H3l0SDvq/5bA4eF+0RFPLuWUk3E+P1U/YqnpsQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "chokidar": ">=3.0.0 <4.0.0",
                 "immutable": "^4.0.0",
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/package.json b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/package.json
index cf13737074..b0faf504d2 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/package.json
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/package.json
@@ -1,7 +1,7 @@
 {
     "devDependencies": {
         "esbuild": "0.23.1",
-        "sass": "1.77.8",
+        "sass": "1.78.0",
         "typescript": "5.5.4"
     }
 }
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/Boilerplate.Client.Maui.csproj b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/Boilerplate.Client.Maui.csproj
index d4825b16ff..829e851289 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/Boilerplate.Client.Maui.csproj
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/Boilerplate.Client.Maui.csproj
@@ -130,9 +130,9 @@
 
     <ItemGroup>
         <PackageReference Include="EmbedIO" Version="3.5.2" />
-        <PackageReference Include="Microsoft.Maui.Controls" Version="8.0.80" />
-        <PackageReference Include="Microsoft.Maui.Controls.Compatibility" Version="8.0.80" />
-        <PackageReference Include="Microsoft.Maui.Essentials" Version="8.0.80" />
+        <PackageReference Include="Microsoft.Maui.Controls" Version="8.0.82" />
+        <PackageReference Include="Microsoft.Maui.Controls.Compatibility" Version="8.0.82" />
+        <PackageReference Include="Microsoft.Maui.Essentials" Version="8.0.82" />
         <PackageReference Include="Microsoft.AspNetCore.Components.WebView.Maui" Version="8.0.80" />
         <PackageReference Include="Oscore.Maui.Android.InAppUpdates" Version="1.1.0" />
         <PackageReference Include="Oscore.Maui.AppStoreInfo" Version="1.0.7" />
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/.config/dotnet-tools.json b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/.config/dotnet-tools.json
index 202aa02dee..6031cf8fe5 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/.config/dotnet-tools.json
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/.config/dotnet-tools.json
@@ -3,7 +3,7 @@
     "isRoot": true,
     "tools": {
         "vpk": {
-            "version": "0.0.583",
+            "version": "0.0.594",
             "commands": [
                 "vpk"
             ]
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/Boilerplate.Client.Windows.csproj b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/Boilerplate.Client.Windows.csproj
index 1f7fe6ec9d..96a4aafa7a 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/Boilerplate.Client.Windows.csproj
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/Boilerplate.Client.Windows.csproj
@@ -32,8 +32,8 @@
         <PackageReference Include="Microsoft.Extensions.Logging.EventLog" Version="8.0.0" />
         <PackageReference Include="Microsoft.Extensions.Logging.EventSource" Version="8.0.0" />
         <PackageReference Include="Microsoft.AspNetCore.Components.WebView.Wpf" Version="8.0.80" />
-        <PackageReference Include="Microsoft.Web.WebView2" Version="1.0.2651.64" />
-        <PackageReference Include="Velopack" Version="0.0.583" />
+        <PackageReference Include="Microsoft.Web.WebView2" Version="1.0.2739.15" />
+        <PackageReference Include="Velopack" Version="0.0.594" />
         <!--/+:msbuild-conditional:noEmit -->
         <PackageReference Condition="'$(sample)' == 'Admin' OR '$(sample)' == ''" Include="Newtonsoft.Json" Version="13.0.3" />
         <PackageReference Condition=" '$(appCenter)' == 'true' OR '$(appCenter)' == '' " Include="Microsoft.AppCenter.Analytics" Version="5.0.5" />
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Boilerplate.Server.Api.csproj b/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Boilerplate.Server.Api.csproj
index 5634f64678..3fcd8b35dc 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Boilerplate.Server.Api.csproj
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Boilerplate.Server.Api.csproj
@@ -40,12 +40,12 @@
         <PackageReference Condition=" '$(database)' == 'Cosmos' OR '$(database)' == '' " Include="Microsoft.EntityFrameworkCore.Cosmos" Version="8.0.8" />
         <PackageReference Condition=" '$(database)' == 'MySql' OR '$(database)' == '' " Include="Pomelo.EntityFrameworkCore.MySql" Version="8.0.2" />
         <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="8.0.8" PrivateAssets="all" />
-        <PackageReference Include="Swashbuckle.AspNetCore" Version="6.7.1" />
+        <PackageReference Include="Swashbuckle.AspNetCore" Version="6.7.3" />
         <PackageReference Include="Microsoft.AspNetCore.Authentication.Google" Version="8.0.8" />
         <PackageReference Include="Microsoft.AspNetCore.Authentication.Twitter" Version="8.0.8" />
         <PackageReference Include="AspNet.Security.OAuth.GitHub" Version="8.1.0" />
         <PackageReference Include="Riok.Mapperly" Version="3.6.0" />
-        <PackageReference Include="Twilio" Version="7.2.2" />
+        <PackageReference Include="Twilio" Version="7.2.3" />
 
         <Using Include="Microsoft.EntityFrameworkCore.Migrations" />
         <Using Include="Microsoft.EntityFrameworkCore.Metadata.Builders" />
diff --git a/src/Websites/Careers/src/Bit.Websites.Careers.Client/package-lock.json b/src/Websites/Careers/src/Bit.Websites.Careers.Client/package-lock.json
index d8c21d91c2..c3cde1fbfd 100644
--- a/src/Websites/Careers/src/Bit.Websites.Careers.Client/package-lock.json
+++ b/src/Websites/Careers/src/Bit.Websites.Careers.Client/package-lock.json
@@ -6,7 +6,7 @@
         "": {
             "devDependencies": {
                 "esbuild": "0.23.1",
-                "sass": "1.77.8",
+                "sass": "1.78.0",
                 "typescript": "5.5.4"
             }
         },
@@ -639,10 +639,11 @@
             }
         },
         "node_modules/sass": {
-            "version": "1.77.8",
-            "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.8.tgz",
-            "integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==",
+            "version": "1.78.0",
+            "resolved": "https://registry.npmjs.org/sass/-/sass-1.78.0.tgz",
+            "integrity": "sha512-AaIqGSrjo5lA2Yg7RvFZrlXDBCp3nV4XP73GrLGvdRWWwk+8H3l0SDvq/5bA4eF+0RFPLuWUk3E+P1U/YqnpsQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "chokidar": ">=3.0.0 <4.0.0",
                 "immutable": "^4.0.0",
diff --git a/src/Websites/Careers/src/Bit.Websites.Careers.Client/package.json b/src/Websites/Careers/src/Bit.Websites.Careers.Client/package.json
index cf13737074..b0faf504d2 100644
--- a/src/Websites/Careers/src/Bit.Websites.Careers.Client/package.json
+++ b/src/Websites/Careers/src/Bit.Websites.Careers.Client/package.json
@@ -1,7 +1,7 @@
 {
     "devDependencies": {
         "esbuild": "0.23.1",
-        "sass": "1.77.8",
+        "sass": "1.78.0",
         "typescript": "5.5.4"
     }
 }
diff --git a/src/Websites/Careers/src/Bit.Websites.Careers.Server/Bit.Websites.Careers.Server.csproj b/src/Websites/Careers/src/Bit.Websites.Careers.Server/Bit.Websites.Careers.Server.csproj
index c1db280017..e1c885c1f5 100644
--- a/src/Websites/Careers/src/Bit.Websites.Careers.Server/Bit.Websites.Careers.Server.csproj
+++ b/src/Websites/Careers/src/Bit.Websites.Careers.Server/Bit.Websites.Careers.Server.csproj
@@ -17,9 +17,9 @@
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
-        <PackageReference Include="Swashbuckle.AspNetCore" Version="6.7.1" />
+        <PackageReference Include="Swashbuckle.AspNetCore" Version="6.7.3" />
         <PackageReference Include="AspNetCore.HealthChecks.System" Version="8.0.1" />
-        <PackageReference Include="AspNetCore.HealthChecks.UI" Version="8.0.1" />
+        <PackageReference Include="AspNetCore.HealthChecks.UI" Version="8.0.2" />
         <PackageReference Include="AspNetCore.HealthChecks.UI.Client" Version="8.0.1" />
         <PackageReference Include="AspNetCore.HealthChecks.UI.InMemory.Storage" Version="8.0.1" />
         <PackageReference Include="Riok.Mapperly" Version="3.6.0" />
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/package-lock.json b/src/Websites/Platform/src/Bit.Websites.Platform.Client/package-lock.json
index 5957f661ef..b023650d1b 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/package-lock.json
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/package-lock.json
@@ -6,7 +6,7 @@
         "": {
             "devDependencies": {
                 "esbuild": "0.23.1",
-                "sass": "1.77.8",
+                "sass": "1.78.0",
                 "typescript": "5.5.4"
             }
         },
@@ -639,10 +639,11 @@
             }
         },
         "node_modules/sass": {
-            "version": "1.77.8",
-            "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.8.tgz",
-            "integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==",
+            "version": "1.78.0",
+            "resolved": "https://registry.npmjs.org/sass/-/sass-1.78.0.tgz",
+            "integrity": "sha512-AaIqGSrjo5lA2Yg7RvFZrlXDBCp3nV4XP73GrLGvdRWWwk+8H3l0SDvq/5bA4eF+0RFPLuWUk3E+P1U/YqnpsQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "chokidar": ">=3.0.0 <4.0.0",
                 "immutable": "^4.0.0",
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/package.json b/src/Websites/Platform/src/Bit.Websites.Platform.Client/package.json
index cf13737074..b0faf504d2 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/package.json
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/package.json
@@ -1,7 +1,7 @@
 {
     "devDependencies": {
         "esbuild": "0.23.1",
-        "sass": "1.77.8",
+        "sass": "1.78.0",
         "typescript": "5.5.4"
     }
 }
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Server/Bit.Websites.Platform.Server.csproj b/src/Websites/Platform/src/Bit.Websites.Platform.Server/Bit.Websites.Platform.Server.csproj
index 498ad950e0..84c858d41e 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Server/Bit.Websites.Platform.Server.csproj
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Server/Bit.Websites.Platform.Server.csproj
@@ -17,9 +17,9 @@
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
-        <PackageReference Include="Swashbuckle.AspNetCore" Version="6.7.1" />
+        <PackageReference Include="Swashbuckle.AspNetCore" Version="6.7.3" />
         <PackageReference Include="AspNetCore.HealthChecks.System" Version="8.0.1" />
-        <PackageReference Include="AspNetCore.HealthChecks.UI" Version="8.0.1" />
+        <PackageReference Include="AspNetCore.HealthChecks.UI" Version="8.0.2" />
         <PackageReference Include="AspNetCore.HealthChecks.UI.Client" Version="8.0.1" />
         <PackageReference Include="AspNetCore.HealthChecks.UI.InMemory.Storage" Version="8.0.1" />
         <PackageReference Include="Riok.Mapperly" Version="3.6.0" />
diff --git a/src/Websites/Sales/src/Bit.Websites.Sales.Client/package-lock.json b/src/Websites/Sales/src/Bit.Websites.Sales.Client/package-lock.json
index 6807bcedb8..b250ce1a32 100644
--- a/src/Websites/Sales/src/Bit.Websites.Sales.Client/package-lock.json
+++ b/src/Websites/Sales/src/Bit.Websites.Sales.Client/package-lock.json
@@ -6,7 +6,7 @@
         "": {
             "devDependencies": {
                 "esbuild": "0.23.1",
-                "sass": "1.77.8",
+                "sass": "1.78.0",
                 "typescript": "5.5.4"
             }
         },
@@ -639,10 +639,11 @@
             }
         },
         "node_modules/sass": {
-            "version": "1.77.8",
-            "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.8.tgz",
-            "integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==",
+            "version": "1.78.0",
+            "resolved": "https://registry.npmjs.org/sass/-/sass-1.78.0.tgz",
+            "integrity": "sha512-AaIqGSrjo5lA2Yg7RvFZrlXDBCp3nV4XP73GrLGvdRWWwk+8H3l0SDvq/5bA4eF+0RFPLuWUk3E+P1U/YqnpsQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "chokidar": ">=3.0.0 <4.0.0",
                 "immutable": "^4.0.0",
diff --git a/src/Websites/Sales/src/Bit.Websites.Sales.Client/package.json b/src/Websites/Sales/src/Bit.Websites.Sales.Client/package.json
index cf13737074..b0faf504d2 100644
--- a/src/Websites/Sales/src/Bit.Websites.Sales.Client/package.json
+++ b/src/Websites/Sales/src/Bit.Websites.Sales.Client/package.json
@@ -1,7 +1,7 @@
 {
     "devDependencies": {
         "esbuild": "0.23.1",
-        "sass": "1.77.8",
+        "sass": "1.78.0",
         "typescript": "5.5.4"
     }
 }
diff --git a/src/Websites/Sales/src/Bit.Websites.Sales.Server/Bit.Websites.Sales.Server.csproj b/src/Websites/Sales/src/Bit.Websites.Sales.Server/Bit.Websites.Sales.Server.csproj
index 4a468329f7..a6f50de40b 100644
--- a/src/Websites/Sales/src/Bit.Websites.Sales.Server/Bit.Websites.Sales.Server.csproj
+++ b/src/Websites/Sales/src/Bit.Websites.Sales.Server/Bit.Websites.Sales.Server.csproj
@@ -17,9 +17,9 @@
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
-        <PackageReference Include="Swashbuckle.AspNetCore" Version="6.7.1" />
+        <PackageReference Include="Swashbuckle.AspNetCore" Version="6.7.3" />
         <PackageReference Include="AspNetCore.HealthChecks.System" Version="8.0.1" />
-        <PackageReference Include="AspNetCore.HealthChecks.UI" Version="8.0.1" />
+        <PackageReference Include="AspNetCore.HealthChecks.UI" Version="8.0.2" />
         <PackageReference Include="AspNetCore.HealthChecks.UI.Client" Version="8.0.1" />
         <PackageReference Include="AspNetCore.HealthChecks.UI.InMemory.Storage" Version="8.0.1" />
         <PackageReference Include="Riok.Mapperly" Version="3.6.0" />

From 7bf5f4250615240e1fe0714bdfa9510180541169 Mon Sep 17 00:00:00 2001
From: Saleh Yusefnejad <msynk@outlook.com>
Date: Wed, 4 Sep 2024 09:12:56 +0330
Subject: [PATCH 10/38] feat(prerelease): v-8.11.0-pre-06 #8494 (#8495)

---
 src/Besql/Bit.Besql/wwwroot/bit-besql.js         |  2 +-
 src/Bit.Build.props                              |  4 ++--
 src/BlazorUI/Bit.BlazorUI/Scripts/general.ts     |  2 +-
 .../Bit.BlazorUI.Demo.Server.csproj              |  4 ++--
 .../Bit.BlazorUI.Demo.Shared.csproj              |  4 ++--
 .../Bit.BlazorUI.Demo.Client.Core.csproj         |  4 ++--
 .../Bit.BlazorUI.Demo.Client.Maui.csproj         |  4 ++--
 .../Bit.BlazorUI.Demo.Client.Web.csproj          |  6 +++---
 .../wwwroot/service-worker.published.js          |  2 +-
 .../Bit.BlazorUI.Demo.Client.Windows.csproj      |  4 ++--
 src/BlazorUI/Demo/Directory.Build.props          |  2 +-
 .../Bit.Bswup.Demo/wwwroot/service-worker.js     |  2 +-
 .../wwwroot/service-worker.published.js          |  2 +-
 .../wwwroot/service-worker.js                    |  2 +-
 .../wwwroot/service-worker.published.js          |  2 +-
 .../Bit.Bswup/Scripts/bit-bswup.progress.ts      |  2 +-
 src/Bswup/Bit.Bswup/Scripts/bit-bswup.sw.ts      |  2 +-
 src/Bswup/Bit.Bswup/Scripts/bit-bswup.ts         |  2 +-
 .../FullDemo/Client/wwwroot/service-worker.js    |  2 +-
 .../Client/wwwroot/service-worker.published.js   |  2 +-
 src/Bup/Bit.Bup/Scripts/bit-bup.progress.ts      |  2 +-
 src/Bup/Bit.Bup/Scripts/bit-bup.ts               |  2 +-
 src/Butil/Bit.Butil/Scripts/butil.ts             |  2 +-
 .../BlazorEmpty.Client/BlazorEmpty.Client.csproj |  8 ++++----
 .../BlazorEmpty/BlazorEmpty.csproj               |  8 ++++----
 .../Boilerplate.Client.Core.csproj               | 16 ++++++++--------
 .../Boilerplate.Client.Maui.csproj               |  4 ++--
 .../Boilerplate.Client.Web.csproj                |  6 +++---
 .../wwwroot/service-worker.js                    |  2 +-
 .../Boilerplate.Client.Windows.csproj            |  4 ++--
 .../Bit.Boilerplate/src/Directory.Build.props    |  2 +-
 .../Boilerplate.Server.Api.csproj                |  4 ++--
 .../Boilerplate.Server.Web.csproj                |  4 ++--
 .../src/Shared/Boilerplate.Shared.csproj         |  4 ++--
 .../Bit.Websites.Careers.Client.csproj           | 10 +++++-----
 .../Bit.Websites.Careers.Server.csproj           |  4 ++--
 .../Bit.Websites.Careers.Shared.csproj           |  4 ++--
 src/Websites/Careers/src/Directory.Build.props   |  2 +-
 .../Bit.Websites.Platform.Client.csproj          | 12 ++++++------
 .../Templates03GettingStartedPage.razor          |  4 ++--
 .../Templates03GettingStartedPage.razor.cs       |  2 +-
 .../Bit.Websites.Platform.Server.csproj          |  4 ++--
 .../Bit.Websites.Platform.Shared.csproj          |  4 ++--
 src/Websites/Platform/src/Directory.Build.props  |  2 +-
 .../Bit.Websites.Sales.Client.csproj             | 10 +++++-----
 .../Bit.Websites.Sales.Server.csproj             |  4 ++--
 .../Bit.Websites.Sales.Shared.csproj             |  4 ++--
 src/Websites/Sales/src/Directory.Build.props     |  2 +-
 48 files changed, 96 insertions(+), 96 deletions(-)

diff --git a/src/Besql/Bit.Besql/wwwroot/bit-besql.js b/src/Besql/Bit.Besql/wwwroot/bit-besql.js
index f0557f9d95..3b8b6b668f 100644
--- a/src/Besql/Bit.Besql/wwwroot/bit-besql.js
+++ b/src/Besql/Bit.Besql/wwwroot/bit-besql.js
@@ -1,5 +1,5 @@
 var BitBesql = BitBesql || {};
-BitBesql.version = window['bit-besql version'] = '8.11.0-pre-05';
+BitBesql.version = window['bit-besql version'] = '8.11.0-pre-06';
 
 async function synchronizeDbWithCache(file) {
 
diff --git a/src/Bit.Build.props b/src/Bit.Build.props
index bc18756c1a..1622b72eff 100644
--- a/src/Bit.Build.props
+++ b/src/Bit.Build.props
@@ -27,8 +27,8 @@
 
 		<ReleaseVersion>8.11.0</ReleaseVersion>
 
-		<PackageReleaseNotes>https://github.com/bitfoundation/bitplatform/releases/tag/v-$(ReleaseVersion)-pre-05</PackageReleaseNotes>
-		<PackageVersion>$(ReleaseVersion)-pre-05</PackageVersion>
+		<PackageReleaseNotes>https://github.com/bitfoundation/bitplatform/releases/tag/v-$(ReleaseVersion)-pre-06</PackageReleaseNotes>
+		<PackageVersion>$(ReleaseVersion)-pre-06</PackageVersion>
 
 		<!-- Version -->
 		<Version Condition=" '$(Configuration)' == 'Release' ">$(ReleaseVersion).$([System.DateTime]::Now.ToString(HHmm))</Version>
diff --git a/src/BlazorUI/Bit.BlazorUI/Scripts/general.ts b/src/BlazorUI/Bit.BlazorUI/Scripts/general.ts
index 5378842c03..9cdc7a1d84 100644
--- a/src/BlazorUI/Bit.BlazorUI/Scripts/general.ts
+++ b/src/BlazorUI/Bit.BlazorUI/Scripts/general.ts
@@ -1,4 +1,4 @@
-(BitBlazorUI as any).version = (window as any)['bit-blazorui version'] = '8.11.0-pre-05';
+(BitBlazorUI as any).version = (window as any)['bit-blazorui version'] = '8.11.0-pre-06';
 
 interface DotNetObject {
     invokeMethod<T>(methodIdentifier: string, ...args: any[]): T;
diff --git a/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Bit.BlazorUI.Demo.Server.csproj b/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Bit.BlazorUI.Demo.Server.csproj
index c22ecc2f5b..5c48c4a8e0 100644
--- a/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Bit.BlazorUI.Demo.Server.csproj
+++ b/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Bit.BlazorUI.Demo.Server.csproj
@@ -5,11 +5,11 @@
     </PropertyGroup>
 
     <ItemGroup>
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05">
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-06">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05">
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-06">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
diff --git a/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Shared/Bit.BlazorUI.Demo.Shared.csproj b/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Shared/Bit.BlazorUI.Demo.Shared.csproj
index ea606282c0..2560812c63 100644
--- a/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Shared/Bit.BlazorUI.Demo.Shared.csproj
+++ b/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Shared/Bit.BlazorUI.Demo.Shared.csproj
@@ -5,11 +5,11 @@
     </PropertyGroup>
 
     <ItemGroup>
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05">
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-06">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05">
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-06">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Bit.BlazorUI.Demo.Client.Core.csproj b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Bit.BlazorUI.Demo.Client.Core.csproj
index 8baa714b96..3775530679 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Bit.BlazorUI.Demo.Client.Core.csproj
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Bit.BlazorUI.Demo.Client.Core.csproj
@@ -16,11 +16,11 @@
         <Content Remove="appsettings.json" />
         <EmbeddedResource Include="appsettings.json" />
 
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05">
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-06">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05">
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-06">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Maui/Bit.BlazorUI.Demo.Client.Maui.csproj b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Maui/Bit.BlazorUI.Demo.Client.Maui.csproj
index 3e182f7804..aa0a6a31fa 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Maui/Bit.BlazorUI.Demo.Client.Maui.csproj
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Maui/Bit.BlazorUI.Demo.Client.Maui.csproj
@@ -84,12 +84,12 @@
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05">
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-06">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
         <PackageReference Include="Microsoft.AppCenter.Crashes" Version="5.0.5" />
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05">
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-06">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Web/Bit.BlazorUI.Demo.Client.Web.csproj b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Web/Bit.BlazorUI.Demo.Client.Web.csproj
index ca6e79953d..d7899a6f94 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Web/Bit.BlazorUI.Demo.Client.Web.csproj
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Web/Bit.BlazorUI.Demo.Client.Web.csproj
@@ -26,13 +26,13 @@
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Bit.Bswup" Version="8.11.0-pre-05" />
+        <PackageReference Include="Bit.Bswup" Version="8.11.0-pre-06" />
         <PackageReference Include="Newtonsoft.Json" Version="13.0.3" />
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05">
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-06">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05">
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-06">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Web/wwwroot/service-worker.published.js b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Web/wwwroot/service-worker.published.js
index c9e63ccb78..6d3c9c6d1f 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Web/wwwroot/service-worker.published.js
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Web/wwwroot/service-worker.published.js
@@ -1,4 +1,4 @@
-// bit version: 8.11.0-pre-05
+// bit version: 8.11.0-pre-06
 // https://github.com/bitfoundation/bitplatform/tree/develop/src/Bswup
 
 self.assetsInclude = [];
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Windows/Bit.BlazorUI.Demo.Client.Windows.csproj b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Windows/Bit.BlazorUI.Demo.Client.Windows.csproj
index 3fb6336ba7..ce35416b93 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Windows/Bit.BlazorUI.Demo.Client.Windows.csproj
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Windows/Bit.BlazorUI.Demo.Client.Windows.csproj
@@ -17,11 +17,11 @@
         <Using Include="Bit.BlazorUI.Demo.Client.Core.Services.Contracts" />
         <Using Include="Bit.BlazorUI.Demo.Client.Core.Services" />
         
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05">
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-06">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05">
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-06">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
diff --git a/src/BlazorUI/Demo/Directory.Build.props b/src/BlazorUI/Demo/Directory.Build.props
index 8d8a03cd52..ed5480e069 100644
--- a/src/BlazorUI/Demo/Directory.Build.props
+++ b/src/BlazorUI/Demo/Directory.Build.props
@@ -1,4 +1,4 @@
-<!-- Generated by bit-bp template v-8.11.0-pre-05 -->
+<!-- Generated by bit-bp template v-8.11.0-pre-06 -->
 <Project>
     <PropertyGroup>
         <LangVersion>12.0</LangVersion>
diff --git a/src/Bswup/Bit.Bswup.Demo/wwwroot/service-worker.js b/src/Bswup/Bit.Bswup.Demo/wwwroot/service-worker.js
index 87729e96f3..e871d1d7ca 100644
--- a/src/Bswup/Bit.Bswup.Demo/wwwroot/service-worker.js
+++ b/src/Bswup/Bit.Bswup.Demo/wwwroot/service-worker.js
@@ -1,4 +1,4 @@
-// bit version: 8.11.0-pre-05
+// bit version: 8.11.0-pre-06
 
 self.assetsExclude = [/\.scp\.css$/, /weather\.json$/];
 self.caseInsensitiveUrl = true;
diff --git a/src/Bswup/Bit.Bswup.Demo/wwwroot/service-worker.published.js b/src/Bswup/Bit.Bswup.Demo/wwwroot/service-worker.published.js
index 73c8100a23..c02ddd4d79 100644
--- a/src/Bswup/Bit.Bswup.Demo/wwwroot/service-worker.published.js
+++ b/src/Bswup/Bit.Bswup.Demo/wwwroot/service-worker.published.js
@@ -1,4 +1,4 @@
-// bit version: 8.11.0-pre-05
+// bit version: 8.11.0-pre-06
 
 self.assetsExclude = [/\.scp\.css$/, /weather\.json$/];
 self.caseInsensitiveUrl = true;
diff --git a/src/Bswup/Bit.Bswup.NewDemo/Bit.Bswup.NewDemo.Client/wwwroot/service-worker.js b/src/Bswup/Bit.Bswup.NewDemo/Bit.Bswup.NewDemo.Client/wwwroot/service-worker.js
index 06dcde5fde..1521c2da82 100644
--- a/src/Bswup/Bit.Bswup.NewDemo/Bit.Bswup.NewDemo.Client/wwwroot/service-worker.js
+++ b/src/Bswup/Bit.Bswup.NewDemo/Bit.Bswup.NewDemo.Client/wwwroot/service-worker.js
@@ -1,4 +1,4 @@
-// bit version: 8.11.0-pre-05
+// bit version: 8.11.0-pre-06
 
 // In development, always fetch from the network and do not enable offline support.
 // This is because caching would make development more difficult (changes would not
diff --git a/src/Bswup/Bit.Bswup.NewDemo/Bit.Bswup.NewDemo.Client/wwwroot/service-worker.published.js b/src/Bswup/Bit.Bswup.NewDemo/Bit.Bswup.NewDemo.Client/wwwroot/service-worker.published.js
index 702c1aaf68..93d2a71752 100644
--- a/src/Bswup/Bit.Bswup.NewDemo/Bit.Bswup.NewDemo.Client/wwwroot/service-worker.published.js
+++ b/src/Bswup/Bit.Bswup.NewDemo/Bit.Bswup.NewDemo.Client/wwwroot/service-worker.published.js
@@ -1,4 +1,4 @@
-// bit version: 8.11.0-pre-05
+// bit version: 8.11.0-pre-06
 
 self.assetsInclude = [];
 self.assetsExclude = [
diff --git a/src/Bswup/Bit.Bswup/Scripts/bit-bswup.progress.ts b/src/Bswup/Bit.Bswup/Scripts/bit-bswup.progress.ts
index e984590da4..ebac8c4164 100644
--- a/src/Bswup/Bit.Bswup/Scripts/bit-bswup.progress.ts
+++ b/src/Bswup/Bit.Bswup/Scripts/bit-bswup.progress.ts
@@ -1,4 +1,4 @@
-window['bit-bswup.progress version'] = '8.11.0-pre-05';
+window['bit-bswup.progress version'] = '8.11.0-pre-06';
 
 ; (function () {
     (window as any).startBswupProgress = (autoReload: boolean,
diff --git a/src/Bswup/Bit.Bswup/Scripts/bit-bswup.sw.ts b/src/Bswup/Bit.Bswup/Scripts/bit-bswup.sw.ts
index d49d6bc41f..816c67f814 100644
--- a/src/Bswup/Bit.Bswup/Scripts/bit-bswup.sw.ts
+++ b/src/Bswup/Bit.Bswup/Scripts/bit-bswup.sw.ts
@@ -1,4 +1,4 @@
-self['bit-bswup.sw version'] = '8.11.0-pre-05';
+self['bit-bswup.sw version'] = '8.11.0-pre-06';
 
 interface Window {
     clients: any
diff --git a/src/Bswup/Bit.Bswup/Scripts/bit-bswup.ts b/src/Bswup/Bit.Bswup/Scripts/bit-bswup.ts
index ffc551055b..ba20ded8eb 100644
--- a/src/Bswup/Bit.Bswup/Scripts/bit-bswup.ts
+++ b/src/Bswup/Bit.Bswup/Scripts/bit-bswup.ts
@@ -1,5 +1,5 @@
 const BitBswup = {} as any;
-BitBswup.version = window['bit-bswup version'] = '8.11.0-pre-05';
+BitBswup.version = window['bit-bswup version'] = '8.11.0-pre-06';
 
 declare const Blazor: any;
 
diff --git a/src/Bswup/FullDemo/Client/wwwroot/service-worker.js b/src/Bswup/FullDemo/Client/wwwroot/service-worker.js
index 3a7b7a86f1..8dde33dca0 100644
--- a/src/Bswup/FullDemo/Client/wwwroot/service-worker.js
+++ b/src/Bswup/FullDemo/Client/wwwroot/service-worker.js
@@ -1,4 +1,4 @@
-// bit version: 8.11.0-pre-05
+// bit version: 8.11.0-pre-06
 
 // In development, always fetch from the network and do not enable offline support.
 // This is because caching would make development more difficult (changes would not
diff --git a/src/Bswup/FullDemo/Client/wwwroot/service-worker.published.js b/src/Bswup/FullDemo/Client/wwwroot/service-worker.published.js
index 0523c08175..8f7434a351 100644
--- a/src/Bswup/FullDemo/Client/wwwroot/service-worker.published.js
+++ b/src/Bswup/FullDemo/Client/wwwroot/service-worker.published.js
@@ -1,4 +1,4 @@
-// bit version: 8.11.0-pre-05
+// bit version: 8.11.0-pre-06
 
 self.assetsInclude = [];
 self.assetsExclude = [/\.scp\.css$/, /weather\.json$/];
diff --git a/src/Bup/Bit.Bup/Scripts/bit-bup.progress.ts b/src/Bup/Bit.Bup/Scripts/bit-bup.progress.ts
index 0dbc3beb71..75f3def070 100644
--- a/src/Bup/Bit.Bup/Scripts/bit-bup.progress.ts
+++ b/src/Bup/Bit.Bup/Scripts/bit-bup.progress.ts
@@ -1,4 +1,4 @@
-window['bit-bup.progress version'] = '8.11.0-pre-05';
+window['bit-bup.progress version'] = '8.11.0-pre-06';
 
 ; (function () {
     (window as any).startBupProgress = (showLogs: boolean, showAssets: boolean, appContainerSelector: string, hideApp: boolean, autoHide: boolean) => {
diff --git a/src/Bup/Bit.Bup/Scripts/bit-bup.ts b/src/Bup/Bit.Bup/Scripts/bit-bup.ts
index 01880291cc..27fdcee75f 100644
--- a/src/Bup/Bit.Bup/Scripts/bit-bup.ts
+++ b/src/Bup/Bit.Bup/Scripts/bit-bup.ts
@@ -1,5 +1,5 @@
 var BitBup = BitBup || {};
-BitBup.version = window['bit-bup version'] = '8.11.0-pre-05';
+BitBup.version = window['bit-bup version'] = '8.11.0-pre-06';
 
 declare const Blazor: any;
 
diff --git a/src/Butil/Bit.Butil/Scripts/butil.ts b/src/Butil/Bit.Butil/Scripts/butil.ts
index 6fe22c6389..1aef436be0 100644
--- a/src/Butil/Bit.Butil/Scripts/butil.ts
+++ b/src/Butil/Bit.Butil/Scripts/butil.ts
@@ -1,2 +1,2 @@
 var BitButil = BitButil || {};
-BitButil.version = window['bit-butil version'] = '8.11.0-pre-05';
\ No newline at end of file
+BitButil.version = window['bit-butil version'] = '8.11.0-pre-06';
\ No newline at end of file
diff --git a/src/Templates/BlazorEmpty/Bit.BlazorEmpty/BlazorEmpty.Client/BlazorEmpty.Client.csproj b/src/Templates/BlazorEmpty/Bit.BlazorEmpty/BlazorEmpty.Client/BlazorEmpty.Client.csproj
index 38ae2b98b7..d3c9f9e18d 100644
--- a/src/Templates/BlazorEmpty/Bit.BlazorEmpty/BlazorEmpty.Client/BlazorEmpty.Client.csproj
+++ b/src/Templates/BlazorEmpty/Bit.BlazorEmpty/BlazorEmpty.Client/BlazorEmpty.Client.csproj
@@ -1,4 +1,4 @@
-<!-- Generated by bit-empty template v-8.11.0-pre-05 -->
+<!-- Generated by bit-empty template v-8.11.0-pre-06 -->
 
 <Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
 
@@ -16,14 +16,14 @@
   </ItemGroup>
 
   <ItemGroup>
-    <PackageReference Include="Bit.BlazorUI" Version="8.11.0-pre-05" />
+    <PackageReference Include="Bit.BlazorUI" Version="8.11.0-pre-06" />
 
-    <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05">
+    <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-06">
         <PrivateAssets>all</PrivateAssets>
         <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
     </PackageReference>
 
-    <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05">
+    <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-06">
         <PrivateAssets>all</PrivateAssets>
         <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
     </PackageReference>
diff --git a/src/Templates/BlazorEmpty/Bit.BlazorEmpty/BlazorEmpty/BlazorEmpty.csproj b/src/Templates/BlazorEmpty/Bit.BlazorEmpty/BlazorEmpty/BlazorEmpty.csproj
index 1010ed572a..34717f2cbb 100644
--- a/src/Templates/BlazorEmpty/Bit.BlazorEmpty/BlazorEmpty/BlazorEmpty.csproj
+++ b/src/Templates/BlazorEmpty/Bit.BlazorEmpty/BlazorEmpty/BlazorEmpty.csproj
@@ -1,4 +1,4 @@
-<!-- Generated by bit-empty template v-8.11.0-pre-05 -->
+<!-- Generated by bit-empty template v-8.11.0-pre-06 -->
 
 <Project Sdk="Microsoft.NET.Sdk.Web">
 
@@ -18,14 +18,14 @@
   <!--#endif -->
 
   <ItemGroup>
-    <PackageReference Include="Bit.BlazorUI" Version="8.11.0-pre-05" />
+    <PackageReference Include="Bit.BlazorUI" Version="8.11.0-pre-06" />
 
-    <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05">
+    <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-06">
         <PrivateAssets>all</PrivateAssets>
         <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
     </PackageReference>
 
-    <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05">
+    <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-06">
         <PrivateAssets>all</PrivateAssets>
         <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
     </PackageReference>
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Boilerplate.Client.Core.csproj b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Boilerplate.Client.Core.csproj
index 559008671d..fb0c29d443 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Boilerplate.Client.Core.csproj
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Boilerplate.Client.Core.csproj
@@ -16,18 +16,18 @@
         <Content Remove="appsettings*.json" />
         <EmbeddedResource Include="appsettings*.json" />
 
-        <PackageReference Include="Bit.Butil" Version="8.11.0-pre-05" />
-        <PackageReference Include="Bit.BlazorUI" Version="8.11.0-pre-05" />
-        <PackageReference Include="Bit.BlazorUI.Icons" Version="8.11.0-pre-05" />
-        <PackageReference Include="Bit.BlazorUI.Assets" Version="8.11.0-pre-05" />
+        <PackageReference Include="Bit.Butil" Version="8.11.0-pre-06" />
+        <PackageReference Include="Bit.BlazorUI" Version="8.11.0-pre-06" />
+        <PackageReference Include="Bit.BlazorUI.Icons" Version="8.11.0-pre-06" />
+        <PackageReference Include="Bit.BlazorUI.Assets" Version="8.11.0-pre-06" />
         <!--/+:msbuild-conditional:noEmit -->
-        <PackageReference Condition=" '$(offlineDb)' == 'true' OR '$(offlineDb)' == ''" Include="Bit.Besql" Version="8.11.0-pre-05" />
+        <PackageReference Condition=" '$(offlineDb)' == 'true' OR '$(offlineDb)' == ''" Include="Bit.Besql" Version="8.11.0-pre-06" />
         <PackageReference Condition=" '$(signalr)' == 'true' OR '$(signalr)' == ''" Include="Microsoft.AspNetCore.SignalR.Client" Version="8.0.8" />
         <PackageReference Condition=" '$(offlineDb)' == 'true' OR '$(offlineDb)' == ''" Include="Microsoft.EntityFrameworkCore.Sqlite" Version="8.0.8" />
-        <PackageReference Include="Bit.BlazorUI.Extras" Version="8.11.0-pre-05" />
+        <PackageReference Include="Bit.BlazorUI.Extras" Version="8.11.0-pre-06" />
         <!--/-:msbuild-conditional:noEmit -->
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05" PrivateAssets="all" />
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05" PrivateAssets="all" />
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-06" PrivateAssets="all" />
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-06" PrivateAssets="all" />
         <PackageReference Include="Microsoft.AspNetCore.Components.Authorization" Version="8.0.8" />
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.8" />
         <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.8" />
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/Boilerplate.Client.Maui.csproj b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/Boilerplate.Client.Maui.csproj
index 829e851289..16a07fbe91 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/Boilerplate.Client.Maui.csproj
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/Boilerplate.Client.Maui.csproj
@@ -117,8 +117,8 @@
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05" PrivateAssets="all" />
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05" PrivateAssets="all" />
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-06" PrivateAssets="all" />
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-06" PrivateAssets="all" />
         <Content Remove="compilerconfig.json" />
         <None Include="compilerconfig.json" />
         <Content Remove="Properties\launchSettings.json" />
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Web/Boilerplate.Client.Web.csproj b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Web/Boilerplate.Client.Web.csproj
index 03c01476eb..3200820f01 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Web/Boilerplate.Client.Web.csproj
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Web/Boilerplate.Client.Web.csproj
@@ -32,9 +32,9 @@
     <ItemGroup>
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.8" />
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.8" PrivateAssets="all" />
-        <PackageReference Include="Bit.Bswup" Version="8.11.0-pre-05" />
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05" PrivateAssets="all" />
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05" PrivateAssets="all" />
+        <PackageReference Include="Bit.Bswup" Version="8.11.0-pre-06" />
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-06" PrivateAssets="all" />
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-06" PrivateAssets="all" />
         <!--/+:msbuild-conditional:noEmit -->
         <PackageReference Condition=" '$(appInsights)' == 'true' OR '$(appInsights)' == '' " Include="BlazorApplicationInsights" Version="3.1.0" />
         <PackageReference Condition="'$(sample)' == 'Admin' OR '$(sample)' == ''" Include="Newtonsoft.Json" Version="13.0.3" />
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Web/wwwroot/service-worker.js b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Web/wwwroot/service-worker.js
index 06e9da31d0..a76e8c23b7 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Web/wwwroot/service-worker.js
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Web/wwwroot/service-worker.js
@@ -1,4 +1,4 @@
-// bit version: 8.11.0-pre-05
+// bit version: 8.11.0-pre-06
 // https://github.com/bitfoundation/bitplatform/tree/develop/src/Bswup
 
 self.assetsInclude = [];
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/Boilerplate.Client.Windows.csproj b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/Boilerplate.Client.Windows.csproj
index 96a4aafa7a..a04ade7e35 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/Boilerplate.Client.Windows.csproj
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/Boilerplate.Client.Windows.csproj
@@ -24,8 +24,8 @@
         <Using Include="Boilerplate.Shared" />
         <Watch Remove="*.scss" />
 
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05" PrivateAssets="all" />
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05" PrivateAssets="all" />
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-06" PrivateAssets="all" />
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-06" PrivateAssets="all" />
         <PackageReference Include="EmbedIO" Version="3.5.2" />
         <PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="8.0.0" />
         <PackageReference Include="Microsoft.Extensions.Logging.Console" Version="8.0.0" />
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Directory.Build.props b/src/Templates/Boilerplate/Bit.Boilerplate/src/Directory.Build.props
index ac6abd8943..9464fdb484 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Directory.Build.props
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Directory.Build.props
@@ -1,4 +1,4 @@
-<!-- Generated by bit-bp template v-8.11.0-pre-05 -->
+<!-- Generated by bit-bp template v-8.11.0-pre-06 -->
 <Project>
     <!--/-:msbuild-conditional:noEmit -->
     <PropertyGroup>
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Boilerplate.Server.Api.csproj b/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Boilerplate.Server.Api.csproj
index 3fcd8b35dc..e387fe0da9 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Boilerplate.Server.Api.csproj
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Boilerplate.Server.Api.csproj
@@ -7,8 +7,8 @@
     </PropertyGroup>
 
     <ItemGroup>
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05" PrivateAssets="all" />
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05" PrivateAssets="all" />
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-06" PrivateAssets="all" />
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-06" PrivateAssets="all" />
         <PackageReference Condition=" '$(appInsights)' == 'true' OR '$(appInsights)' == '' " Include="Microsoft.ApplicationInsights.AspNetCore" Version="2.22.0" />
         <PackageReference Include="Humanizer" Version="2.14.1" />
     </ItemGroup>
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Web/Boilerplate.Server.Web.csproj b/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Web/Boilerplate.Server.Web.csproj
index 528b649108..605ce1456b 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Web/Boilerplate.Server.Web.csproj
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Web/Boilerplate.Server.Web.csproj
@@ -7,8 +7,8 @@
     </PropertyGroup>
     
     <ItemGroup>
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05" PrivateAssets="all" />
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05" PrivateAssets="all" />
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-06" PrivateAssets="all" />
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-06" PrivateAssets="all" />
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="8.0.8" />
         <PackageReference Condition=" '$(offlineDb)' == 'true' OR '$(offlineDb)' == ''" Include="Microsoft.EntityFrameworkCore.Tools" Version="8.0.8" PrivateAssets="all" />
         <PackageReference Condition=" '$(offlineDb)' == 'true' OR '$(offlineDb)' == ''" Include="Microsoft.EntityFrameworkCore.Design" Version="8.0.8" PrivateAssets="all" />
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Boilerplate.Shared.csproj b/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Boilerplate.Shared.csproj
index 2c967f964a..aa81a9f25a 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Boilerplate.Shared.csproj
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Boilerplate.Shared.csproj
@@ -14,8 +14,8 @@
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05" PrivateAssets="all" />
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05" PrivateAssets="all" />
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-06" PrivateAssets="all" />
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-06" PrivateAssets="all" />
         <PackageReference Include="Microsoft.AspNetCore.Authorization" Version="8.0.8" />
         <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.8" />
         <PackageReference Include="Microsoft.Extensions.DependencyInjection.Abstractions" Version="8.0.1" />
diff --git a/src/Websites/Careers/src/Bit.Websites.Careers.Client/Bit.Websites.Careers.Client.csproj b/src/Websites/Careers/src/Bit.Websites.Careers.Client/Bit.Websites.Careers.Client.csproj
index a4ccfe1d16..91f81b94c9 100644
--- a/src/Websites/Careers/src/Bit.Websites.Careers.Client/Bit.Websites.Careers.Client.csproj
+++ b/src/Websites/Careers/src/Bit.Websites.Careers.Client/Bit.Websites.Careers.Client.csproj
@@ -24,15 +24,15 @@
         <Content Remove="appsettings.json" />
         <EmbeddedResource Include="appsettings.json" />
 
-        <PackageReference Include="Bit.BlazorUI" Version="8.11.0-pre-05" />
-        <PackageReference Include="Bit.BlazorUI.Icons" Version="8.11.0-pre-05" />
+        <PackageReference Include="Bit.BlazorUI" Version="8.11.0-pre-06" />
+        <PackageReference Include="Bit.BlazorUI.Icons" Version="8.11.0-pre-06" />
         <BlazorWebAssemblyLazyLoad Include="Bit.BlazorUI.Icons.wasm" />
-        <PackageReference Include="Bit.BlazorUI.Assets" Version="8.11.0-pre-05" />
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05">
+        <PackageReference Include="Bit.BlazorUI.Assets" Version="8.11.0-pre-06" />
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-06">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05">
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-06">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
diff --git a/src/Websites/Careers/src/Bit.Websites.Careers.Server/Bit.Websites.Careers.Server.csproj b/src/Websites/Careers/src/Bit.Websites.Careers.Server/Bit.Websites.Careers.Server.csproj
index e1c885c1f5..0f8ae93ecd 100644
--- a/src/Websites/Careers/src/Bit.Websites.Careers.Server/Bit.Websites.Careers.Server.csproj
+++ b/src/Websites/Careers/src/Bit.Websites.Careers.Server/Bit.Websites.Careers.Server.csproj
@@ -9,11 +9,11 @@
         <ProjectReference Include="..\Bit.Websites.Careers.Client\Bit.Websites.Careers.Client.csproj" />
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="8.0.8" />
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.8" />
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05">
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-06">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05">
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-06">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
diff --git a/src/Websites/Careers/src/Bit.Websites.Careers.Shared/Bit.Websites.Careers.Shared.csproj b/src/Websites/Careers/src/Bit.Websites.Careers.Shared/Bit.Websites.Careers.Shared.csproj
index 2d097c5cfd..2895b200c2 100644
--- a/src/Websites/Careers/src/Bit.Websites.Careers.Shared/Bit.Websites.Careers.Shared.csproj
+++ b/src/Websites/Careers/src/Bit.Websites.Careers.Shared/Bit.Websites.Careers.Shared.csproj
@@ -6,11 +6,11 @@
     </PropertyGroup>
 
     <ItemGroup>
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05">
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-06">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05">
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-06">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
diff --git a/src/Websites/Careers/src/Directory.Build.props b/src/Websites/Careers/src/Directory.Build.props
index d4f882989d..3131e4e4cf 100644
--- a/src/Websites/Careers/src/Directory.Build.props
+++ b/src/Websites/Careers/src/Directory.Build.props
@@ -1,4 +1,4 @@
-<!-- Generated by bit-dual template v-8.11.0-pre-05 -->
+<!-- Generated by bit-dual template v-8.11.0-pre-06 -->
 <Project>
     <PropertyGroup>
         <LangVersion>12.0</LangVersion>
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Bit.Websites.Platform.Client.csproj b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Bit.Websites.Platform.Client.csproj
index 7ff0236276..c7ce9681e4 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Bit.Websites.Platform.Client.csproj
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Bit.Websites.Platform.Client.csproj
@@ -24,16 +24,16 @@
         <Content Remove="appsettings.json" />
         <EmbeddedResource Include="appsettings.json" />
 
-        <PackageReference Include="Bit.Butil" Version="8.11.0-pre-05" />
-        <PackageReference Include="Bit.BlazorUI" Version="8.11.0-pre-05" />
-        <PackageReference Include="Bit.BlazorUI.Icons" Version="8.11.0-pre-05" />
+        <PackageReference Include="Bit.Butil" Version="8.11.0-pre-06" />
+        <PackageReference Include="Bit.BlazorUI" Version="8.11.0-pre-06" />
+        <PackageReference Include="Bit.BlazorUI.Icons" Version="8.11.0-pre-06" />
         <BlazorWebAssemblyLazyLoad Include="Bit.BlazorUI.Icons.wasm" />
-        <PackageReference Include="Bit.BlazorUI.Assets" Version="8.11.0-pre-05" />
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05">
+        <PackageReference Include="Bit.BlazorUI.Assets" Version="8.11.0-pre-06" />
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-06">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05">
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-06">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates03GettingStartedPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates03GettingStartedPage.razor
index fd839b566d..4c0ddd32e9 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates03GettingStartedPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates03GettingStartedPage.razor
@@ -128,8 +128,8 @@ rm dotnet.tar.gz</CodeBox>
                             }
                         </li>
                         <li>
-                            <div style="margin-bottom:8px">Install <a href="https://www.nuget.org/packages/Bit.Boilerplate/8.11.0-pre-05" target="_blank">Bit Boilerplate</a> project template</div>
-                            <CodeBox>dotnet new install Bit.Boilerplate::8.11.0-pre-05</CodeBox>
+                            <div style="margin-bottom:8px">Install <a href="https://www.nuget.org/packages/Bit.Boilerplate/8.11.0-pre-06" target="_blank">Bit Boilerplate</a> project template</div>
+                            <CodeBox>dotnet new install Bit.Boilerplate::8.11.0-pre-06</CodeBox>
                         </li>
                         @if (showCrossPlatform && devOS is "Windows")
                         {
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates03GettingStartedPage.razor.cs b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates03GettingStartedPage.razor.cs
index 8fa7ffa218..6435918918 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates03GettingStartedPage.razor.cs
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates03GettingStartedPage.razor.cs
@@ -78,7 +78,7 @@ private async Task CopyCommandsToClipboard()
             command:"dotnet nuget add source \"https://api.nuget.org/v3/index.json\" --name \"nuget.org\"; dotnet workload install wasm-tools;"),
 
             (text:@"echo 'Install the Bit.Boilerplate project template https://www.nuget.org/packages/Boilerplate.Templates';",
-            command:"dotnet new install Bit.Boilerplate::8.11.0-pre-05;"),
+            command:"dotnet new install Bit.Boilerplate::8.11.0-pre-06;"),
         ],
 
         [CommandGroup.Additional] =
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Server/Bit.Websites.Platform.Server.csproj b/src/Websites/Platform/src/Bit.Websites.Platform.Server/Bit.Websites.Platform.Server.csproj
index 84c858d41e..09f82037a4 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Server/Bit.Websites.Platform.Server.csproj
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Server/Bit.Websites.Platform.Server.csproj
@@ -9,11 +9,11 @@
         <ProjectReference Include="..\Bit.Websites.Platform.Client\Bit.Websites.Platform.Client.csproj" />
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="8.0.8" />
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.8" />
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05">
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-06">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05">
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-06">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Shared/Bit.Websites.Platform.Shared.csproj b/src/Websites/Platform/src/Bit.Websites.Platform.Shared/Bit.Websites.Platform.Shared.csproj
index 2d097c5cfd..2895b200c2 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Shared/Bit.Websites.Platform.Shared.csproj
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Shared/Bit.Websites.Platform.Shared.csproj
@@ -6,11 +6,11 @@
     </PropertyGroup>
 
     <ItemGroup>
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05">
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-06">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05">
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-06">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
diff --git a/src/Websites/Platform/src/Directory.Build.props b/src/Websites/Platform/src/Directory.Build.props
index 52feeee176..aa306a9f66 100644
--- a/src/Websites/Platform/src/Directory.Build.props
+++ b/src/Websites/Platform/src/Directory.Build.props
@@ -1,4 +1,4 @@
-<!-- Generated by bit-dual template v-8.11.0-pre-05 -->
+<!-- Generated by bit-dual template v-8.11.0-pre-06 -->
 <Project>
     <PropertyGroup>
         <LangVersion>preview</LangVersion>
diff --git a/src/Websites/Sales/src/Bit.Websites.Sales.Client/Bit.Websites.Sales.Client.csproj b/src/Websites/Sales/src/Bit.Websites.Sales.Client/Bit.Websites.Sales.Client.csproj
index f6107537b3..f6ba46bdef 100644
--- a/src/Websites/Sales/src/Bit.Websites.Sales.Client/Bit.Websites.Sales.Client.csproj
+++ b/src/Websites/Sales/src/Bit.Websites.Sales.Client/Bit.Websites.Sales.Client.csproj
@@ -24,15 +24,15 @@
         <Content Remove="appsettings.json" />
         <EmbeddedResource Include="appsettings.json" />
 
-        <PackageReference Include="Bit.BlazorUI" Version="8.11.0-pre-05" />
-        <PackageReference Include="Bit.BlazorUI.Icons" Version="8.11.0-pre-05" />
+        <PackageReference Include="Bit.BlazorUI" Version="8.11.0-pre-06" />
+        <PackageReference Include="Bit.BlazorUI.Icons" Version="8.11.0-pre-06" />
         <BlazorWebAssemblyLazyLoad Include="Bit.BlazorUI.Icons.wasm" />
-        <PackageReference Include="Bit.BlazorUI.Assets" Version="8.11.0-pre-05" />
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05">
+        <PackageReference Include="Bit.BlazorUI.Assets" Version="8.11.0-pre-06" />
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-06">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05">
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-06">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
diff --git a/src/Websites/Sales/src/Bit.Websites.Sales.Server/Bit.Websites.Sales.Server.csproj b/src/Websites/Sales/src/Bit.Websites.Sales.Server/Bit.Websites.Sales.Server.csproj
index a6f50de40b..839ac59f8e 100644
--- a/src/Websites/Sales/src/Bit.Websites.Sales.Server/Bit.Websites.Sales.Server.csproj
+++ b/src/Websites/Sales/src/Bit.Websites.Sales.Server/Bit.Websites.Sales.Server.csproj
@@ -9,11 +9,11 @@
         <ProjectReference Include="..\Bit.Websites.Sales.Client\Bit.Websites.Sales.Client.csproj" />
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="8.0.8" />
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.8" />
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05">
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-06">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05">
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-06">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
diff --git a/src/Websites/Sales/src/Bit.Websites.Sales.Shared/Bit.Websites.Sales.Shared.csproj b/src/Websites/Sales/src/Bit.Websites.Sales.Shared/Bit.Websites.Sales.Shared.csproj
index 2d097c5cfd..2895b200c2 100644
--- a/src/Websites/Sales/src/Bit.Websites.Sales.Shared/Bit.Websites.Sales.Shared.csproj
+++ b/src/Websites/Sales/src/Bit.Websites.Sales.Shared/Bit.Websites.Sales.Shared.csproj
@@ -6,11 +6,11 @@
     </PropertyGroup>
 
     <ItemGroup>
-        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-05">
+        <PackageReference Include="Bit.CodeAnalyzers" Version="8.11.0-pre-06">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
-        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-05">
+        <PackageReference Include="Bit.SourceGenerators" Version="8.11.0-pre-06">
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
diff --git a/src/Websites/Sales/src/Directory.Build.props b/src/Websites/Sales/src/Directory.Build.props
index 0e9bc9c3b8..17d8f2e733 100644
--- a/src/Websites/Sales/src/Directory.Build.props
+++ b/src/Websites/Sales/src/Directory.Build.props
@@ -1,4 +1,4 @@
-<!-- Generated by bit-dual template v-8.11.0-pre-05 -->
+<!-- Generated by bit-dual template v-8.11.0-pre-06 -->
 <Project>
     <PropertyGroup>
         <LangVersion>12.0</LangVersion>

From e257d8b10deeca9085d7fa480ef62392fd725a39 Mon Sep 17 00:00:00 2001
From: Mohammad Aminsafaei <m.aminsafaei@outlook.com>
Date: Wed, 4 Sep 2024 17:28:13 +0330
Subject: [PATCH 11/38] fix(blazorui): resolve animation issues in
 BitDatePicker #8479 (#8499)

---
 .../_Pickers/DatePicker/BitDatePicker.scss    | 21 ++++++++-----------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DatePicker/BitDatePicker.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DatePicker/BitDatePicker.scss
index ee7b241e1c..cf02ee6606 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DatePicker/BitDatePicker.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DatePicker/BitDatePicker.scss
@@ -170,9 +170,13 @@
     box-sizing: border-box;
     z-index: $zindex-callout;
     font-size: spacing(1.75);
+    animation-fill-mode: both;
+    animation-duration: 0.367s;
+    font-family: $tg-font-family;
     box-shadow: $box-shadow-callout;
     border-radius: $shp-border-radius;
-    font-family: $tg-font-family;
+    animation-name: bit-fade-show, bit-slide-down;
+    animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
 }
 
 .bit-dtp-rsp {
@@ -271,10 +275,6 @@
     outline: none;
     box-shadow: none;
     box-sizing: border-box;
-    animation-duration: 167ms;
-    animation-fill-mode: both;
-    animation-name: bit-fade-in, bit-slide-down;
-    animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
 }
 
 .bit-dtp-sdt {
@@ -323,14 +323,14 @@
     border: none;
     aspect-ratio: 1;
     font-weight: 400;
+    color: $clr-fg-pri;
     position: relative;
     text-align: center;
     font-size: spacing(1.5);
     line-height: spacing(3.5);
     animation-fill-mode: both;
     animation-duration: 0.267s;
-    animation-name: bit-fade-in;
-    color: $clr-fg-pri;
+    animation-name: bit-fade-show;
     animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
 }
 
@@ -440,6 +440,7 @@
     overflow: hidden;
     font-weight: 600;
     text-align: start;
+    color: $clr-fg-pri;
     position: relative;
     white-space: nowrap;
     align-items: center;
@@ -449,13 +450,8 @@
     padding: 0 spacing(1.25);
     font-size: spacing(1.75);
     line-height: spacing(3.5);
-    animation-fill-mode: both;
-    animation-duration: 0.267s;
-    animation-name: bit-fade-show;
     background-color: transparent;
-    color: $clr-fg-pri;
     border-radius: $shp-border-radius;
-    animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
 }
 
 .bit-dtp-ptb {
@@ -817,6 +813,7 @@
     .bit-dtp-cal {
         display: block;
         z-index: unset;
+        animation: none;
         position: relative;
     }
 }
\ No newline at end of file

From 0cd484c34e626081affda05a9c84909fce9e00d0 Mon Sep 17 00:00:00 2001
From: Mohammad Aminsafaei <m.aminsafaei@outlook.com>
Date: Wed, 4 Sep 2024 17:35:02 +0330
Subject: [PATCH 12/38] feat(blazorui): complete demo page of BitDropMenu #8488
 (#8498)

---
 .../Navs/DropMenu/BitDropMenuDemo.razor       | 138 +++++++++++++++++-
 .../Navs/DropMenu/BitDropMenuDemo.razor.cs    |   2 +
 .../DropMenu/BitDropMenuDemo.razor.samples.cs | 130 ++++++++++++++++-
 .../Navs/DropMenu/BitDropMenuDemo.razor.scss  |  31 +++-
 4 files changed, 290 insertions(+), 11 deletions(-)

diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor
index db4d00dd91..2c73aa6d87 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor
@@ -1,22 +1,154 @@
-@page "/components/dropmenu"
+@page "/components/dropmenu"
 
 <PageOutlet Url="components/dropmenu"
             Title="DropMenu"
             Description="DropMenu component of the bit BlazorUI components" />
 
 <ComponentDemo ComponentName="DropMenu"
-               ComponentDescription="DropMenu is ..."
+               ComponentDescription="DropMenu component is a versatile dropdown menu used in Blazor applications. It allows you to create a button that, when clicked, opens a callout or dropdown menu. This can be particularly useful for creating navigation menus, action lists, or any other interactive elements that require a dropdown."
                ComponentParameters="componentParameters"
                ComponentSubClasses="componentSubClasses">
     <ComponentExampleBox Title="Basic" RazorCode="@example1RazorCode" Id="example1">
         <ExamplePreview>
-            <BitDropMenu Text="Drop me">
+            <BitDropMenu Text="Basic">
                 <BitStack Gap="1rem" Style="padding:0.5rem">
                     <BitText Typography="BitTypography.Subtitle1">This is the content</BitText>
                     <BitButton>Click me</BitButton>
                     <BitToggle>Toggle me</BitToggle>
                 </BitStack>
             </BitDropMenu>
+
+            <br />
+
+            <BitDropMenu Text="Disabled" IsEnabled="false">
+                <BitStack Gap="1rem" Style="padding:0.5rem">
+                    <BitText Typography="BitTypography.Subtitle1">This is the content</BitText>
+                    <BitButton>Click me</BitButton>
+                    <BitToggle>Toggle me</BitToggle>
+                </BitStack>
+            </BitDropMenu>
+
+            <br />
+
+            <BitDropMenu Text="Transparent" Transparent>
+                <BitStack Gap="1rem" Style="padding:0.5rem">
+                    <BitText Typography="BitTypography.Subtitle1">This is the content</BitText>
+                    <BitButton>Click me</BitButton>
+                    <BitToggle>Toggle me</BitToggle>
+                </BitStack>
+            </BitDropMenu>
+        </ExamplePreview>
+    </ComponentExampleBox>
+
+    <ComponentExampleBox Title="Icon" RazorCode="@example2RazorCode" Id="example2">
+        <ExamplePreview>
+            <div>Managing drop menu icons.</div>
+
+            <BitDropMenu Text="Add Icon" IconName="@BitIconName.Emoji2">
+                <BitStack Gap="1rem" Style="padding:0.5rem">
+                    <BitText Typography="BitTypography.Subtitle1">This is the content</BitText>
+                </BitStack>
+            </BitDropMenu>
+
+            <br />
+
+            <BitDropMenu Text="Custom ChevronDownIcon" ChevronDownIcon="@BitIconName.OpenInNewTab">
+                <BitStack Gap="1rem" Style="padding:0.5rem">
+                    <BitText Typography="BitTypography.Subtitle1">This is the content</BitText>
+                </BitStack>
+            </BitDropMenu>
+        </ExamplePreview>
+    </ComponentExampleBox>
+
+    <ComponentExampleBox Title="Templates" RazorCode="@example3RazorCode" Id="example3">
+        <ExamplePreview>
+            <div>Here are some examples of customizing the drop menu content.</div>
+
+            <BitDropMenu Text="Add Icon" IconName="@BitIconName.Emoji2">
+                <Template>
+                    <div style="display:flex;gap:10px;"
+                        <BitIcon IconName="@BitIconName.Airplane" Color="BitColor.Tertiary" />
+                        <span>A template</span>
+                        <BitRippleLoading CustomSize="20" Color="BitColor.Tertiary" />
+                    </div>
+                </Template>
+                <Body>
+                    <BitStack Gap="1rem" Style="padding:0.5rem">
+                        <BitText Typography="BitTypography.Subtitle1">This is the content</BitText>
+                    </BitStack>
+                </Body>
+            </BitDropMenu>
+        </ExamplePreview>
+    </ComponentExampleBox>
+
+    <ComponentExampleBox Title="Events" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
+        <ExamplePreview>
+            <div>
+                Managing drop menu click event (OnClick).
+            </div>
+            <BitDropMenu Text="@($"Click me ({clickCounter})")" OnClick="() => clickCounter++">
+                <BitStack Gap="1rem" Style="padding:0.5rem">
+                    <BitText Typography="BitTypography.Subtitle1">This is the content</BitText>
+                </BitStack>
+            </BitDropMenu>
+        </ExamplePreview>
+    </ComponentExampleBox>
+
+    <ComponentExampleBox Title="Style & Class" RazorCode="@example5RazorCode" Id="example5">
+        <ExamplePreview>
+            <div>Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.</div>
+            <br /><br />
+            <div>Component's Style & Class:</div>
+            <br />
+            <div class="example-content">
+                <BitDropMenu Text="Styled Drop menu" Style="background-color: transparent; border-color: blueviolet; color: blueviolet;">
+                    <BitStack Gap="1rem" Style="padding:0.5rem">
+                        <BitText Typography="BitTypography.Subtitle1">This is the content</BitText>
+                    </BitStack>
+                </BitDropMenu>
+
+                <BitDropMenu Text="Classed Drop menu" Class="custom-class">
+                    <BitStack Gap="1rem" Style="padding:0.5rem">
+                        <BitText Typography="BitTypography.Subtitle1">This is the content</BitText>
+                    </BitStack>
+                </BitDropMenu>
+            </div>
+            <br /><br /><br />
+            <div><b>Styles</b> & <b>Classes</b>:</div>
+            <br />
+            <div class="example-content">
+                <BitDropMenu Text="Styled Drop menu"
+                             Styles="@(new() { Root = "background-color: peachpuff; border-color: peachpuff; min-width: 6rem;",
+                                               Text = "color: tomato; font-weight: bold;",
+                                               Opened = "border-color: tomato; background-color: goldenrod;" })">
+                    <BitStack Gap="1rem" Style="padding:0.5rem">
+                        <BitText Typography="BitTypography.Subtitle1">This is the content</BitText>
+                    </BitStack>
+                </BitDropMenu>
+
+                <BitDropMenu Text="Classed Drop menu"
+                             Classes="@(new() { Root = "custom-root",
+                                                Text = "custom-text",
+                                                Opened = "custom-opened" })">
+                    <BitStack Gap="1rem" Style="padding:0.5rem">
+                        <BitText Typography="BitTypography.Subtitle1">This is the content</BitText>
+                    </BitStack>
+                </BitDropMenu>
+            </div>
+        </ExamplePreview>
+    </ComponentExampleBox>
+
+    <ComponentExampleBox Title="RTL" RazorCode="@example6RazorCode" Id="example6">
+        <ExamplePreview>
+            <div>Use BitDropMenu in right-to-left (RTL).</div>
+            <br />
+            <div class="example-content" dir="rtl">
+                <BitDropMenu Text="منو" Dir="BitDir.Rtl">
+                    <BitStack Gap="1rem" Style="padding:0.5rem">
+                        <BitText Typography="BitTypography.Subtitle1">این یک محتوای تستی می باشد.</BitText>
+                    </BitStack>
+                </BitDropMenu>
+            </div>
         </ExamplePreview>
     </ComponentExampleBox>
 </ComponentDemo>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor.cs
index 1a3c331e88..0b95b0799a 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor.cs
@@ -147,4 +147,6 @@ public partial class BitDropMenuDemo
             ]
         }
     ];
+
+    private int clickCounter;
 }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor.samples.cs
index 511a50c853..a257e2ff9c 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor.samples.cs
@@ -3,11 +3,139 @@
 public partial class BitDropMenuDemo
 {
     private readonly string example1RazorCode = @"
-<BitDropMenu Text=""Drop me"">
+<BitDropMenu Text=""Basic"">
     <BitStack Gap=""1rem"" Style=""padding:0.5rem"">
         <BitText Typography=""BitTypography.Subtitle1"">This is the content</BitText>
         <BitButton>Click me</BitButton>
         <BitToggle>Toggle me</BitToggle>
     </BitStack>
+</BitDropMenu>
+
+<BitDropMenu Text=""Disabled"" IsEnabled=""false"">
+    <BitStack Gap=""1rem"" Style=""padding:0.5rem"">
+        <BitText Typography=""BitTypography.Subtitle1"">This is the content</BitText>
+        <BitButton>Click me</BitButton>
+        <BitToggle>Toggle me</BitToggle>
+    </BitStack>
+</BitDropMenu>
+
+<BitDropMenu Text=""Transparent"" Transparent>
+    <BitStack Gap=""1rem"" Style=""padding:0.5rem"">
+        <BitText Typography=""BitTypography.Subtitle1"">This is the content</BitText>
+        <BitButton>Click me</BitButton>
+        <BitToggle>Toggle me</BitToggle>
+    </BitStack>
+</BitDropMenu>";
+
+    private readonly string example2RazorCode = @"
+<BitDropMenu Text=""Add Icon"" IconName=""@BitIconName.Emoji2"">
+    <BitStack Gap=""1rem"" Style=""padding:0.5rem"">
+        <BitText Typography=""BitTypography.Subtitle1"">This is the content</BitText>
+    </BitStack>
+</BitDropMenu>
+
+<BitDropMenu Text=""Custom ChevronDownIcon"" ChevronDownIcon=""@BitIconName.OpenInNewTab"">
+    <BitStack Gap=""1rem"" Style=""padding:0.5rem"">
+        <BitText Typography=""BitTypography.Subtitle1"">This is the content</BitText>
+    </BitStack>
+</BitDropMenu>";
+
+    private readonly string example3RazorCode = @"
+<BitDropMenu Text=""Add Icon"" IconName=""@BitIconName.Emoji2"">
+    <Template>
+        <div style=""display:flex;gap:10px;""
+            <BitIcon IconName=""@BitIconName.Airplane"" Color=""BitColor.Tertiary"" />
+            <span>A template</span>
+            <BitRippleLoading CustomSize=""20"" Color=""BitColor.Tertiary"" />
+        </div>
+    </Template>
+    <Body>
+        <BitStack Gap=""1rem"" Style=""padding:0.5rem"">
+            <BitText Typography=""BitTypography.Subtitle1"">This is the content</BitText>
+        </BitStack>
+    </Body>
+</BitDropMenu>";
+
+    private readonly string example4RazorCode = @"
+<BitDropMenu Text=""@($""Click me ({clickCounter})"")"" OnClick=""() => clickCounter++"">
+    <BitStack Gap=""1rem"" Style=""padding:0.5rem"">
+        <BitText Typography=""BitTypography.Subtitle1"">This is the content</BitText>
+    </BitStack>
+</BitDropMenu>";
+    private readonly string example4CsharpCode = @"
+private int clickCounter;";
+
+    private readonly string example5RazorCode = @"
+<style>
+.custom-class {
+    border-radius: 1rem;
+    border-color: blueviolet;
+    transition: background-color 1s;
+    background: linear-gradient(90deg, magenta, transparent) blue;
+}
+
+.custom-class:hover {
+    border-color: magenta;
+    background-color: magenta;
+}
+
+.custom-root {
+    color: aqua;
+    min-width: 7.2rem;
+    font-weight: bold;
+    border-radius: 1rem;
+    border-color: aqua;
+    box-shadow: aqua 0 0 0.5rem;
+}
+
+.custom-root:hover {
+    background-color: gray;
+}
+
+.custom-text {
+    text-shadow: tomato 0 0 0.5rem;
+}
+
+.custom-opened {
+    color: green;
+}
+</style>
+
+<BitDropMenu Text=""Styled Drop menu"" Style=""background-color: transparent; border-color: blueviolet; color: blueviolet;"">
+    <BitStack Gap=""1rem"" Style=""padding:0.5rem"">
+        <BitText Typography=""BitTypography.Subtitle1"">This is the content</BitText>
+    </BitStack>
+</BitDropMenu>
+
+<BitDropMenu Text=""Classed Drop menu"" Class=""custom-class"">
+    <BitStack Gap=""1rem"" Style=""padding:0.5rem"">
+        <BitText Typography=""BitTypography.Subtitle1"">This is the content</BitText>
+    </BitStack>
+</BitDropMenu>
+
+<BitDropMenu Text=""Styled Drop menu""
+             Styles=""@(new() { Root = ""background-color: peachpuff; border-color: peachpuff; min-width: 6rem;"",
+                               Text = ""color: tomato; font-weight: bold;""
+                               Opened = ""border-color: tomato; background-color: goldenrod;"" })"">
+    <BitStack Gap=""1rem"" Style=""padding:0.5rem"">
+        <BitText Typography=""BitTypography.Subtitle1"">This is the content</BitText>
+    </BitStack>
+</BitDropMenu>
+
+<BitDropMenu Text=""Classed Drop menu""
+             Classes=""@(new() { Root = ""custom-root"",
+                                Text = ""custom-text"",
+                                Opened = ""custom-opened"" })"">
+    <BitStack Gap=""1rem"" Style=""padding:0.5rem"">
+        <BitText Typography=""BitTypography.Subtitle1"">This is the content</BitText>
+    </BitStack>
 </BitDropMenu>";
+
+    private readonly string example6RazorCode = @"
+<BitDropMenu Text=""منو"" Dir=""BitDir.Rtl"">
+    <BitStack Gap=""1rem"" Style=""padding:0.5rem"">
+        <BitText Typography=""BitTypography.Subtitle1"">این یک محتوای تستی می باشد.</BitText>
+    </BitStack>
+</BitDropMenu>";
+
 }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor.scss
index 7f517c8270..69aa805b8c 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor.scss
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor.scss
@@ -1,17 +1,34 @@
 ::deep {
     .custom-class {
-        margin-left: 1rem;
-        border-radius: 0.125rem;
-        box-shadow: aqua 0 0 0.5rem;
-        background-color: #00ffff7d;
+        border-radius: 1rem;
+        border-color: blueviolet;
+        transition: background-color 1s;
+        background: linear-gradient(90deg, magenta, transparent) blue;
+    }
+
+    .custom-class:hover {
+        border-color: magenta;
+        background-color: magenta;
     }
 
     .custom-root {
         color: aqua;
-        margin-left: 1rem;
+        min-width: 7.2rem;
+        font-weight: bold;
+        border-radius: 1rem;
+        border-color: aqua;
+        box-shadow: aqua 0 0 0.5rem;
+    }
+
+    .custom-root:hover {
+        background-color: gray;
+    }
+
+    .custom-text {
+        text-shadow: tomato 0 0 0.5rem;
     }
 
-    .custom-button {
-        border-radius: 50%;
+    .custom-opened {
+        color: green;
     }
 }

From e54295e41f182d925ef4c59bd01ec0e572204bd6 Mon Sep 17 00:00:00 2001
From: Mohammad Hossein Rastegarinia <mh.rastegari@outlook.com>
Date: Wed, 4 Sep 2024 23:03:57 +0330
Subject: [PATCH 13/38] feat(blazorui): add missing examples to BitChart demo
 page #8456 (#8483)

---
 .../Chart/BubbleChart/BitChartBubbleConfig.cs |   2 +-
 .../Extras/Chart/BitChartDemo.razor           |   8 +
 .../Extras/Chart/BitChartDemoColors.cs        |   8 +-
 .../Extras/Chart/BitChartDemoUtils.cs         |  41 +-
 .../Extras/Chart/_BitChartBarDemo.razor.cs    |  86 +++-
 .../Extras/Chart/_BitChartBubbleDemo.razor    |  18 +
 .../Extras/Chart/_BitChartBubbleDemo.razor.cs | 374 ++++++++++++++++++
 .../Chart/_BitChartDoughnutDemo.razor.cs      |  18 +-
 .../Chart/_BitChartHorizontalBarDemo.razor.cs |  64 ++-
 .../Extras/Chart/_BitChartLineDemo.razor.cs   |  58 ++-
 .../Extras/Chart/_BitChartPieDemo.razor       |   2 -
 .../Extras/Chart/_BitChartPieDemo.razor.cs    | 113 +-----
 .../Extras/Chart/_BitChartPolarAreaDemo.razor |  18 +
 .../Chart/_BitChartPolarAreaDemo.razor.cs     | 259 ++++++++++++
 .../Extras/Chart/_BitChartRadarDemo.razor     |  20 +
 .../Extras/Chart/_BitChartRadarDemo.razor.cs  | 368 +++++++++++++++++
 .../Extras/Chart/_BitChartScatterDemo.razor   |  18 +
 .../Chart/_BitChartScatterDemo.razor.cs       | 340 ++++++++++++++++
 .../Chart/_BitChartStackedBarDemo.razor.cs    |  66 ++--
 .../Extras/Chart/_BitChartTimeDemo.razor.cs   |  74 ++--
 20 files changed, 1737 insertions(+), 218 deletions(-)
 create mode 100644 src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartBubbleDemo.razor
 create mode 100644 src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartBubbleDemo.razor.cs
 create mode 100644 src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartPolarAreaDemo.razor
 create mode 100644 src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartPolarAreaDemo.razor.cs
 create mode 100644 src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartRadarDemo.razor
 create mode 100644 src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartRadarDemo.razor.cs
 create mode 100644 src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartScatterDemo.razor
 create mode 100644 src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartScatterDemo.razor.cs

diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/Chart/BubbleChart/BitChartBubbleConfig.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/Chart/BubbleChart/BitChartBubbleConfig.cs
index e0852a2a07..7fe9315eb0 100644
--- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/Chart/BubbleChart/BitChartBubbleConfig.cs
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/Chart/BubbleChart/BitChartBubbleConfig.cs
@@ -3,7 +3,7 @@
 /// <summary>
 /// Represents the config for a bubble chart.
 /// </summary>
-public class BitChartBubbleConfig : BitChartConfigBase<BitChartBubbleOptions>
+public class BitChartBubbleConfig : BitChartConfigBase<BitChartLineOptions>
 {
     /// <summary>
     /// Creates a new instance of <see cref="BitChartBubbleConfig"/>.
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/BitChartDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/BitChartDemo.razor
index 6df6cda793..b659f07f11 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/BitChartDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/BitChartDemo.razor
@@ -29,7 +29,15 @@
 
             <_BitChartDoughnutDemo />
 
+            <_BitChartPolarAreaDemo />
+
             <_BitChartTimeDemo />
+
+            <_BitChartScatterDemo />
+
+            <_BitChartBubbleDemo />
+
+            <_BitChartRadarDemo />
         </ComponentDemo>
     }
 </div>
\ No newline at end of file
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/BitChartDemoColors.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/BitChartDemoColors.cs
index 9ce84135f7..99aee7e5e7 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/BitChartDemoColors.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/BitChartDemoColors.cs
@@ -2,10 +2,10 @@
 
 public static class BitChartDemoColors
 {
-    private static readonly Lazy<IReadOnlyList<System.Drawing.Color>> _all = new Lazy<IReadOnlyList<System.Drawing.Color>>(() => new System.Drawing.Color[7]
-    {
-                Red, Orange, Yellow, Green, Blue, Purple, Grey
-    });
+    private static readonly Lazy<IReadOnlyList<System.Drawing.Color>> _all = new(() =>
+    [
+        Red, Orange, Yellow, Green, Blue, Purple, Grey
+    ]);
 
     public static IReadOnlyList<System.Drawing.Color> All => _all.Value;
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/BitChartDemoUtils.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/BitChartDemoUtils.cs
index 1e05b63fba..203add2c91 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/BitChartDemoUtils.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/BitChartDemoUtils.cs
@@ -4,12 +4,12 @@ namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Extras.Chart;
 
 public static class BitChartDemoUtils
 {
-    public static readonly Random _rng = new Random();
+    public static readonly Random _rng = new();
 
-    public static IReadOnlyList<string> Months { get; } = new ReadOnlyCollection<string>(new[]
-    {
-            "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"
-    });
+    public static IReadOnlyList<string> Months { get; } = new ReadOnlyCollection<string>(
+    [
+        "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"
+    ]);
 
     private static int RandomScalingFactorThreadUnsafe(int min, int max) => _rng.Next(min, max);
 
@@ -47,4 +47,35 @@ public static IEnumerable<DateTimeOffset> GetNextDays(int count)
 
         return factors;
     }
+
+    public static List<BitChartPoint> CreateRandomPoints(int count)
+    {
+        List<BitChartPoint> points = [];
+
+        for (int i = 0; i < count; i++)
+        {
+            double x = RandomScalingFactor();
+            double y = RandomScalingFactor();
+
+            points.Add(new BitChartPoint(x, y));
+        }
+
+        return points;
+    }
+
+    public static List<BitChartBubblePoint> CreateRandomBubblePoints(int count)
+    {
+        List<BitChartBubblePoint> points = [];
+
+        for (int i = 0; i < count; i++)
+        {
+            double x = RandomScalingFactor();
+            double y = RandomScalingFactor();
+            double radius = RandomScalingFactor() % 20 + 5;
+
+            points.Add(new BitChartBubblePoint(x, y, radius));
+        }
+
+        return points;
+    }
 }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartBarDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartBarDemo.razor.cs
index 8ba6db9f10..9740ddb657 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartBarDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartBarDemo.razor.cs
@@ -11,21 +11,45 @@ protected override void OnInitialized()
     {
         _config = new BitChartBarConfig
         {
-            Options = new BitChartBarOptions()
+            Options = new BitChartBarOptions
             {
                 Responsive = true,
                 Title = new BitChartOptionsTitle
                 {
                     Display = true,
                     Text = "BitChart bar Chart"
+                },
+                Scales = new BitChartBarScales
+                {
+                    XAxes =
+                    [
+                        new BitChartBarCategoryAxis
+                        {
+                            GridLines = new BitChartGridLines
+                            {
+                                Color = "gray"
+                            }
+                        }
+                    ],
+                    YAxes =
+                    [
+                        new BitChartLinearCartesianAxis
+                        {
+                            GridLines = new BitChartGridLines
+                            {
+                                Color = "gray"
+                            }
+                        }
+                    ]
                 }
             }
         };
 
+        System.Drawing.Color color = BitChartDemoColors.All[new Random().Next(0, BitChartDemoColors.All.Count - 1)];
         var dataset = new BitChartBarDataset<int>(BitChartDemoUtils.RandomScalingFactor(INITAL_COUNT))
         {
             Label = "Dataset 1",
-            BackgroundColor = BitChartDemoColors.All.Take(INITAL_COUNT).Select(c => BitChartColorUtil.FromDrawingColor(System.Drawing.Color.FromArgb(128, c))).ToArray()
+            BackgroundColor = BitChartColorUtil.FromDrawingColor(System.Drawing.Color.FromArgb(128, color)),
         };
         _config.Data.Labels.AddRange(BitChartDemoUtils.Months.Take(INITAL_COUNT));
         _config.Data.Datasets.Add(dataset);
@@ -117,13 +141,11 @@ private void RemoveBarData()
     private readonly string razorCode = @"
 <BitChart Config=""_config"" @ref=""_chart"" />
 
-<div>
-    <BitButton OnClick=""RandomizeBarData"">Randomize Data</BitButton>
-    <BitButton OnClick= ""AddBarDataset"" > Add Dataset</BitButton>
-    <BitButton OnClick= ""RemoveBarDataset"" > Remove Dataset</BitButton>
-    <BitButton OnClick= ""AddBarData"" > Add Data</BitButton>
-    <BitButton OnClick= ""RemoveBarData"" > Remove Data</BitButton>
-</div>";
+<BitButton OnClick=""RandomizeBarData"">Randomize Data</BitButton>
+<BitButton OnClick= ""AddBarDataset"" > Add Dataset</BitButton>
+<BitButton OnClick= ""RemoveBarDataset"" > Remove Dataset</BitButton>
+<BitButton OnClick= ""AddBarData"" > Add Data</BitButton>
+<BitButton OnClick= ""RemoveBarData"" > Remove Data</BitButton>";
     private readonly string csharpCode = @"
 private const int INITAL_COUNT = 5;
 
@@ -134,21 +156,45 @@ protected override void OnInitialized()
 {
     _config = new BitChartBarConfig
     {
-        Options = new BitChartBarOptions()
+        Options = new BitChartBarOptions
         {
             Responsive = true,
             Title = new BitChartOptionsTitle
             {
                 Display = true,
                 Text = ""BitChart bar Chart""
+            },
+            Scales = new BitChartBarScales
+            {
+                XAxes =
+                [
+                    new BitChartBarCategoryAxis
+                    {
+                        GridLines = new BitChartGridLines
+                        {
+                            Color = ""gray""
+                        }
+                    }
+                ],
+                YAxes =
+                [
+                    new BitChartLinearCartesianAxis
+                    {
+                        GridLines = new BitChartGridLines
+                        {
+                            Color = ""gray""
+                        }
+                    }
+                ]
             }
         }
     };
 
+    System.Drawing.Color color = BitChartDemoColors.All[new Random().Next(0, BitChartDemoColors.All.Count - 1)];
     var dataset = new BitChartBarDataset<int>(BitChartDemoUtils.RandomScalingFactor(INITAL_COUNT))
     {
         Label = ""Dataset 1"",
-        BackgroundColor = BitChartDemoColors.All.Take(INITAL_COUNT).Select(c => BitChartColorUtil.FromDrawingColor(System.Drawing.Color.FromArgb(128, c))).ToArray()
+        BackgroundColor = BitChartColorUtil.FromDrawingColor(System.Drawing.Color.FromArgb(128, color)),
     };
     _config.Data.Labels.AddRange(BitChartDemoUtils.Months.Take(INITAL_COUNT));
     _config.Data.Datasets.Add(dataset);
@@ -237,10 +283,10 @@ private void RemoveBarData()
 
 public static class BitChartDemoColors
 {
-    private static readonly Lazy<IReadOnlyList<System.Drawing.Color>> _all = new Lazy<IReadOnlyList<System.Drawing.Color>>(() => new System.Drawing.Color[7]
-    {
-                Red, Orange, Yellow, Green, Blue, Purple, Grey
-    });
+    private static readonly Lazy<IReadOnlyList<System.Drawing.Color>> _all = new(() =>
+    [
+        Red, Orange, Yellow, Green, Blue, Purple, Grey
+    ]);
 
     public static IReadOnlyList<System.Drawing.Color> All => _all.Value;
 
@@ -255,12 +301,12 @@ public static class BitChartDemoColors
 
 public static class BitChartDemoUtils
 {
-    public static readonly Random _rng = new Random();
+    public static readonly Random _rng = new();
 
-    public static IReadOnlyList<string> Months { get; } = new ReadOnlyCollection<string>(new[]
-    {
-            ""January"", ""February"", ""March"", ""April"", ""May"", ""June"", ""July"", ""August"", ""September"", ""October"", ""November"", ""December""
-    });
+    public static IReadOnlyList<string> Months { get; } = new ReadOnlyCollection<string>(
+    [
+        ""January"", ""February"", ""March"", ""April"", ""May"", ""June"", ""July"", ""August"", ""September"", ""October"", ""November"", ""December""
+    ]);
 
     private static int RandomScalingFactorThreadUnsafe(int min, int max) => _rng.Next(min, max);
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartBubbleDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartBubbleDemo.razor
new file mode 100644
index 0000000000..875e6e4ab2
--- /dev/null
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartBubbleDemo.razor
@@ -0,0 +1,18 @@
+<ComponentExampleBox Title="Bubble" RazorCode="@razorCode" CsharpCode="@csharpCode" Id="example7">
+    <ExamplePreview>
+        <div class="example-desc">
+            A bubble chart is used to display three dimensions of data at the same time.
+            The location of the bubble is determined by the first two dimensions and the corresponding horizontal and vertical axes. The third dimension is represented by the size of the individual bubbles.
+        </div>
+        <div class="chart-wrapper">
+            <div class="chart-container">
+                <BitChart Config="_config" IsDateAdapterRequired="true" @ref="_chart" />
+            </div>
+        </div>
+        <div class="buttons-container">
+            <BitButton Style="margin:5px" Variant="BitVariant.Fill" OnClick="RandomizeData">Randomize Data</BitButton>
+            <BitButton Style="margin:5px" Variant="BitVariant.Outline" OnClick="AddDataset">Add Dataset</BitButton>
+            <BitButton Style="margin:5px" Variant="BitVariant.Outline" OnClick="RemoveDataset">Remove Dataset</BitButton>
+        </div>
+    </ExamplePreview>
+</ComponentExampleBox>
\ No newline at end of file
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartBubbleDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartBubbleDemo.razor.cs
new file mode 100644
index 0000000000..980b61ce59
--- /dev/null
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartBubbleDemo.razor.cs
@@ -0,0 +1,374 @@
+namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Extras.Chart;
+
+public partial class _BitChartBubbleDemo
+{
+    private const int INITAL_COUNT = 5;
+
+    private BitChart _chart = default!;
+    private BitChartBubbleConfig _config = default!;
+
+    protected override void OnInitialized()
+    {
+        _config = new BitChartBubbleConfig
+        {
+            Options = new BitChartLineOptions
+            {
+                Responsive = true,
+                Title = new BitChartOptionsTitle
+                {
+                    Display = true,
+                    Text = "BitChart Bubble Chart"
+                },
+                Tooltips = new BitChartTooltips
+                {
+                    Mode = BitChartInteractionMode.Nearest,
+                    Intersect = true
+                },
+                Hover = new BitChartHover
+                {
+                    Mode = BitChartInteractionMode.Nearest,
+                    Intersect = true
+                },
+                Scales = new BitChartScales
+                {
+                    XAxes =
+                    [
+                        new BitChartLinearCartesianAxis
+                        {
+                            ScaleLabel = new BitChartScaleLabel
+                            {
+                                LabelString = "Value"
+                            },
+                            GridLines = new BitChartGridLines
+                            {
+                                Color = "gray"
+                            }
+                        }
+                    ],
+                    YAxes =
+                    [
+                        new BitChartLinearCartesianAxis
+                        {
+                            ScaleLabel = new BitChartScaleLabel
+                            {
+                                LabelString = "Value"
+                            },
+                            GridLines = new BitChartGridLines
+                            {
+                                Color = "gray"
+                            }
+                        }
+                    ]
+                }
+            }
+        };
+
+        _config.Data.Labels.AddRange(BitChartDemoUtils.GetNextDays(INITAL_COUNT).Select(d => d.ToString("o")));
+
+        var dataset1 = new BitChartBubbleDataset(BitChartDemoUtils.CreateRandomBubblePoints(10))
+        {
+            Label = "My first dataset",
+            BackgroundColor = BitChartColorUtil.FromDrawingColor(BitChartDemoColors.Red),
+            BorderColor = BitChartColorUtil.FromDrawingColor(BitChartDemoColors.Red),
+        };
+
+        var dataset2 = new BitChartBubbleDataset(BitChartDemoUtils.CreateRandomBubblePoints(10))
+        {
+            Label = "My second dataset",
+            BackgroundColor = BitChartColorUtil.FromDrawingColor(BitChartDemoColors.Blue),
+            BorderColor = BitChartColorUtil.FromDrawingColor(BitChartDemoColors.Blue),
+        };
+
+        var dataset3 = new BitChartBubbleDataset(BitChartDemoUtils.CreateRandomBubblePoints(10))
+        {
+            Label = "Dataset with point data",
+            BackgroundColor = BitChartColorUtil.FromDrawingColor(BitChartDemoColors.Green),
+            BorderColor = BitChartColorUtil.FromDrawingColor(BitChartDemoColors.Green),
+        };
+
+        _config.Data.Datasets.Add(dataset1);
+        _config.Data.Datasets.Add(dataset2);
+        _config.Data.Datasets.Add(dataset3);
+    }
+
+    private void RandomizeData()
+    {
+        foreach (IBitChartDataset dataset in _config.Data.Datasets)
+        {
+            if (dataset is BitChartBubbleDataset bubbleDataset)
+            {
+                int count = bubbleDataset.Count;
+                bubbleDataset.Clear();
+                bubbleDataset.AddRange(BitChartDemoUtils.CreateRandomBubblePoints(count));
+            }
+        }
+
+        _chart.Update();
+    }
+
+    private void AddDataset()
+    {
+        string color = BitChartColorUtil.FromDrawingColor(BitChartDemoColors.All[_config.Data.Datasets.Count % BitChartDemoColors.All.Count]);
+        var newDataset = new BitChartBubbleDataset(BitChartDemoUtils.CreateRandomBubblePoints(_config.Data.Labels.Count))
+        {
+            Label = $"Dataset {_config.Data.Datasets.Count + 1}",
+            BackgroundColor = color,
+            BorderColor = color,
+        };
+
+        _config.Data.Datasets.Add(newDataset);
+        _chart.Update();
+    }
+
+    private void RemoveDataset()
+    {
+        IList<IBitChartDataset> datasets = _config.Data.Datasets;
+
+        if (datasets.Count == 0) return;
+
+        datasets.RemoveAt(datasets.Count - 1);
+        _chart.Update();
+    }
+
+
+
+    private readonly string razorCode = @"
+<BitChart Config=""_config"" IsDateAdapterRequired=""true"" @ref=""_chart"" />
+
+<BitButton OnClick=""RandomizeData"">Randomize Data</BitButton>
+<BitButton OnClick=""AddDataset"">Add Dataset</BitButton>
+<BitButton OnClick=""RemoveDataset"">Remove Dataset</BitButton>";
+    private readonly string csharpCode = @"
+private const int INITAL_COUNT = 5;
+
+private BitChart _chart = default!;
+private BitChartBubbleConfig _config = default!;
+
+
+protected override void OnInitialized()
+{
+    _config = new BitChartBubbleConfig
+    {
+        Options = new BitChartLineOptions
+        {
+            Responsive = true,
+            Title = new BitChartOptionsTitle
+            {
+                Display = true,
+                Text = ""BitChart Bubble Chart""
+            },
+            Tooltips = new BitChartTooltips
+            {
+                Mode = BitChartInteractionMode.Nearest,
+                Intersect = true
+            },
+            Hover = new BitChartHover
+            {
+                Mode = BitChartInteractionMode.Nearest,
+                Intersect = true
+            },
+            Scales = new BitChartScales
+            {
+                XAxes =
+                [
+                    new BitChartLinearCartesianAxis
+                    {
+                        ScaleLabel = new BitChartScaleLabel
+                        {
+                            LabelString = ""Value""
+                        },
+                        GridLines = new BitChartGridLines
+                        {
+                            Color = ""gray""
+                        }
+                    }
+                ],
+                YAxes =
+                [
+                    new BitChartLinearCartesianAxis
+                    {
+                        ScaleLabel = new BitChartScaleLabel
+                        {
+                            LabelString = ""Value""
+                        },
+                        GridLines = new BitChartGridLines
+                        {
+                            Color = ""gray""
+                        }
+                    }
+                ]
+            }
+        }
+    };
+
+    _config.Data.Labels.AddRange(BitChartDemoUtils.GetNextDays(INITAL_COUNT).Select(d => d.ToString(""o"")));
+
+    var dataset1 = new BitChartBubbleDataset(BitChartDemoUtils.CreateRandomBubblePoints(10))
+    {
+        Label = ""My first dataset"",
+        BackgroundColor = BitChartColorUtil.FromDrawingColor(BitChartDemoColors.Red),
+        BorderColor = BitChartColorUtil.FromDrawingColor(BitChartDemoColors.Red),
+    };
+
+    var dataset2 = new BitChartBubbleDataset(BitChartDemoUtils.CreateRandomBubblePoints(10))
+    {
+        Label = ""My second dataset"",
+        BackgroundColor = BitChartColorUtil.FromDrawingColor(BitChartDemoColors.Blue),
+        BorderColor = BitChartColorUtil.FromDrawingColor(BitChartDemoColors.Blue),
+    };
+
+    var dataset3 = new BitChartBubbleDataset(BitChartDemoUtils.CreateRandomBubblePoints(10))
+    {
+        Label = ""Dataset with point data"",
+        BackgroundColor = BitChartColorUtil.FromDrawingColor(BitChartDemoColors.Green),
+        BorderColor = BitChartColorUtil.FromDrawingColor(BitChartDemoColors.Green),
+    };
+
+    _config.Data.Datasets.Add(dataset1);
+    _config.Data.Datasets.Add(dataset2);
+    _config.Data.Datasets.Add(dataset3);
+}
+
+private void RandomizeData()
+{
+    foreach (IBitChartDataset dataset in _config.Data.Datasets)
+    {
+        if (dataset is BitChartBubbleDataset bubbleDataset)
+        {
+            int count = bubbleDataset.Count;
+            bubbleDataset.Clear();
+            bubbleDataset.AddRange(BitChartDemoUtils.CreateRandomBubblePoints(count));
+        }
+    }
+
+    _chart.Update();
+}
+
+private void AddDataset()
+{
+    string color = BitChartColorUtil.FromDrawingColor(BitChartDemoColors.All[_config.Data.Datasets.Count % BitChartDemoColors.All.Count]);
+    var newDataset = new BitChartBubbleDataset(BitChartDemoUtils.CreateRandomBubblePoints(_config.Data.Labels.Count))
+    {
+        Label = $""Dataset {_config.Data.Datasets.Count + 1}"",
+        BackgroundColor = color,
+        BorderColor = color,
+    };
+
+    _config.Data.Datasets.Add(newDataset);
+    _chart.Update();
+}
+
+private void RemoveDataset()
+{
+    IList<IBitChartDataset> datasets = _config.Data.Datasets;
+
+    if (datasets.Count == 0) return;
+
+    datasets.RemoveAt(datasets.Count - 1);
+    _chart.Update();
+}
+
+public static class BitChartDemoColors
+{
+    private static readonly Lazy<IReadOnlyList<System.Drawing.Color>> _all = new(() =>
+    [
+        Red, Orange, Yellow, Green, Blue, Purple, Grey
+    ]);
+
+    public static IReadOnlyList<System.Drawing.Color> All => _all.Value;
+
+    public static readonly System.Drawing.Color Red = System.Drawing.Color.FromArgb(255, 99, 132);
+    public static readonly System.Drawing.Color Orange = System.Drawing.Color.FromArgb(255, 159, 64);
+    public static readonly System.Drawing.Color Yellow = System.Drawing.Color.FromArgb(255, 205, 86);
+    public static readonly System.Drawing.Color Green = System.Drawing.Color.FromArgb(75, 192, 192);
+    public static readonly System.Drawing.Color Blue = System.Drawing.Color.FromArgb(54, 162, 235);
+    public static readonly System.Drawing.Color Purple = System.Drawing.Color.FromArgb(153, 102, 255);
+    public static readonly System.Drawing.Color Grey = System.Drawing.Color.FromArgb(201, 203, 207);
+}
+
+public static class BitChartDemoUtils
+{
+    public static readonly Random _rng = new();
+
+    public static IReadOnlyList<string> Months { get; } = new ReadOnlyCollection<string>(
+    [
+        ""January"", ""February"", ""March"", ""April"", ""May"", ""June"", ""July"", ""August"", ""September"", ""October"", ""November"", ""December""
+    ]);
+
+    private static int RandomScalingFactorThreadUnsafe(int min, int max) => _rng.Next(min, max);
+
+    public static int RandomScalingFactor()
+    {
+        lock (_rng)
+        {
+            return RandomScalingFactorThreadUnsafe(0, 100);
+        }
+    }
+
+    public static IEnumerable<int> RandomScalingFactor(int count, int min = 0, int max = 100)
+    {
+        int[] factors = new int[count];
+        lock (_rng)
+        {
+            for (int i = 0; i < count; i++)
+            {
+                factors[i] = RandomScalingFactorThreadUnsafe(min, max);
+            }
+        }
+
+        return factors;
+    }
+
+    public static IEnumerable<DateTime> GetNextDays(int count)
+    {
+        DateTime now = DateTime.Now;
+        DateTime[] factors = new DateTime[count];
+        for (int i = 0; i < factors.Length; i++)
+        {
+            factors[i] = now.AddDays(i);
+        }
+
+        return factors;
+    }
+
+    public static List<BitChartBubblePoint> CreateRandomBubblePoints(int count)
+    {
+        List<BitChartBubblePoint> points = new();
+
+        for (int i = 0; i < count; i++)
+        {
+            double x = RandomScalingFactor();
+            double y = RandomScalingFactor();
+            double radius = RandomScalingFactor() % 20 + 5;
+
+            points.Add(new BitChartBubblePoint(x, y, radius));
+        }
+
+        return points;
+    }
+}
+
+public static class IListExtensions
+{
+    public static void AddRange<T>(this IList<T> list, IEnumerable<T> items)
+    {
+        if (list == null)
+            throw new ArgumentNullException(nameof(list));
+
+        if (items == null)
+            throw new ArgumentNullException(nameof(items));
+
+        if (list is List<T> asList)
+        {
+            asList.AddRange(items);
+        }
+        else
+        {
+            foreach (T item in items)
+            {
+                list.Add(item);
+            }
+        }
+    }
+}";
+}
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartDoughnutDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartDoughnutDemo.razor.cs
index ee8ca86a46..a4df417fa7 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartDoughnutDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartDoughnutDemo.razor.cs
@@ -65,10 +65,10 @@ protected override void OnInitialized()
 
 public static class BitChartDemoColors
 {
-    private static readonly Lazy<IReadOnlyList<System.Drawing.Color>> _all = new Lazy<IReadOnlyList<System.Drawing.Color>>(() => new System.Drawing.Color[7]
-    {
-                Red, Orange, Yellow, Green, Blue, Purple, Grey
-    });
+    private static readonly Lazy<IReadOnlyList<System.Drawing.Color>> _all = new(() =>
+    [
+        Red, Orange, Yellow, Green, Blue, Purple, Grey
+    ]);
 
     public static IReadOnlyList<System.Drawing.Color> All => _all.Value;
 
@@ -83,12 +83,12 @@ public static class BitChartDemoColors
 
 public static class BitChartDemoUtils
 {
-    public static readonly Random _rng = new Random();
+    public static readonly Random _rng = new();
 
-    public static IReadOnlyList<string> Months { get; } = new ReadOnlyCollection<string>(new[]
-    {
-            ""January"", ""February"", ""March"", ""April"", ""May"", ""June"", ""July"", ""August"", ""September"", ""October"", ""November"", ""December""
-    });
+    public static IReadOnlyList<string> Months { get; } = new ReadOnlyCollection<string>(
+    [
+        ""January"", ""February"", ""March"", ""April"", ""May"", ""June"", ""July"", ""August"", ""September"", ""October"", ""November"", ""December""
+    ]);
 
     private static int RandomScalingFactorThreadUnsafe(int min, int max) => _rng.Next(min, max);
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartHorizontalBarDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartHorizontalBarDemo.razor.cs
index fe051260dc..0ff69559ce 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartHorizontalBarDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartHorizontalBarDemo.razor.cs
@@ -22,6 +22,29 @@ protected override void OnInitialized()
                 {
                     Display = true,
                     Text = "BitChart Horizontal Bar Chart"
+                },
+                Scales = new BitChartBarScales
+                {
+                    XAxes =
+                    [
+                        new BitChartLinearCartesianAxis
+                        {
+                            GridLines = new BitChartGridLines
+                            {
+                                Color = "gray"
+                            }
+                        }
+                    ],
+                    YAxes =
+                    [
+                        new BitChartBarCategoryAxis
+                        {
+                            GridLines = new BitChartGridLines
+                            {
+                                Color = "gray"
+                            }
+                        }
+                    ]
                 }
             }
         };
@@ -72,6 +95,29 @@ protected override void OnInitialized()
             {
                 Display = true,
                 Text = ""BitChart Horizontal Bar Chart""
+            },
+            Scales = new BitChartBarScales
+            {
+                XAxes =
+                [
+                    new BitChartLinearCartesianAxis
+                    {
+                        GridLines = new BitChartGridLines
+                        {
+                            Color = ""gray""
+                        }
+                    }
+                ],
+                YAxes =
+                [
+                    new BitChartBarCategoryAxis
+                    {
+                        GridLines = new BitChartGridLines
+                        {
+                            Color = ""gray""
+                        }
+                    }
+                ]
             }
         }
     };
@@ -99,10 +145,10 @@ protected override void OnInitialized()
 
 public static class BitChartDemoColors
 {
-    private static readonly Lazy<IReadOnlyList<System.Drawing.Color>> _all = new Lazy<IReadOnlyList<System.Drawing.Color>>(() => new System.Drawing.Color[7]
-    {
-                Red, Orange, Yellow, Green, Blue, Purple, Grey
-    });
+    private static readonly Lazy<IReadOnlyList<System.Drawing.Color>> _all = new(() =>
+    [
+        Red, Orange, Yellow, Green, Blue, Purple, Grey
+    ]);
 
     public static IReadOnlyList<System.Drawing.Color> All => _all.Value;
 
@@ -117,12 +163,12 @@ public static class BitChartDemoColors
 
 public static class BitChartDemoUtils
 {
-    public static readonly Random _rng = new Random();
+    public static readonly Random _rng = new();
 
-    public static IReadOnlyList<string> Months { get; } = new ReadOnlyCollection<string>(new[]
-    {
-            ""January"", ""February"", ""March"", ""April"", ""May"", ""June"", ""July"", ""August"", ""September"", ""October"", ""November"", ""December""
-    });
+    public static IReadOnlyList<string> Months { get; } = new ReadOnlyCollection<string>(
+    [
+        ""January"", ""February"", ""March"", ""April"", ""May"", ""June"", ""July"", ""August"", ""September"", ""October"", ""November"", ""December""
+    ]);
 
     private static int RandomScalingFactorThreadUnsafe(int min, int max) => _rng.Next(min, max);
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartLineDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartLineDemo.razor.cs
index 956e4ee332..de42558081 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartLineDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartLineDemo.razor.cs
@@ -31,26 +31,34 @@ protected override void OnInitialized()
                 },
                 Scales = new BitChartScales
                 {
-                    XAxes = new List<BitChartCartesianAxis>
-                    {
+                    XAxes =
+                    [
                         new BitChartCategoryAxis
                         {
                             ScaleLabel = new BitChartScaleLabel
                             {
                                 LabelString = "Month"
+                            },
+                            GridLines = new BitChartGridLines
+                            {
+                                Color = "gray"
                             }
                         }
-                    },
-                    YAxes = new List<BitChartCartesianAxis>
-                    {
+                    ],
+                    YAxes =
+                    [
                         new BitChartLinearCartesianAxis
                         {
                             ScaleLabel = new BitChartScaleLabel
                             {
                                 LabelString = "Value"
+                            },
+                            GridLines = new BitChartGridLines
+                            {
+                                Color = "gray"
                             }
                         }
-                    }
+                    ]
                 }
             }
         };
@@ -110,26 +118,34 @@ protected override void OnInitialized()
             },
             Scales = new BitChartScales
             {
-                XAxes = new List<BitChartCartesianAxis>
-                {
+                XAxes =
+                [
                     new BitChartCategoryAxis
                     {
                         ScaleLabel = new BitChartScaleLabel
                         {
                             LabelString = ""Month""
+                        },
+                        GridLines = new BitChartGridLines
+                        {
+                            Color = ""gray""
                         }
                     }
-                },
-                YAxes = new List<BitChartCartesianAxis>
-                {
+                ],
+                YAxes =
+                [
                     new BitChartLinearCartesianAxis
                     {
                         ScaleLabel = new BitChartScaleLabel
                         {
                             LabelString = ""Value""
+                        },
+                        GridLines = new BitChartGridLines
+                        {
+                            Color = ""gray""
                         }
                     }
-                }
+                ]
             }
         }
     };
@@ -157,10 +173,10 @@ protected override void OnInitialized()
 
 public static class BitChartDemoColors
 {
-    private static readonly Lazy<IReadOnlyList<System.Drawing.Color>> _all = new Lazy<IReadOnlyList<System.Drawing.Color>>(() => new System.Drawing.Color[7]
-    {
-                Red, Orange, Yellow, Green, Blue, Purple, Grey
-    });
+    private static readonly Lazy<IReadOnlyList<System.Drawing.Color>> _all = new(() =>
+    [
+        Red, Orange, Yellow, Green, Blue, Purple, Grey
+    ]);
 
     public static IReadOnlyList<System.Drawing.Color> All => _all.Value;
 
@@ -175,12 +191,12 @@ public static class BitChartDemoColors
 
 public static class BitChartDemoUtils
 {
-    public static readonly Random _rng = new Random();
+    public static readonly Random _rng = new();
 
-    public static IReadOnlyList<string> Months { get; } = new ReadOnlyCollection<string>(new[]
-    {
-            ""January"", ""February"", ""March"", ""April"", ""May"", ""June"", ""July"", ""August"", ""September"", ""October"", ""November"", ""December""
-    });
+    public static IReadOnlyList<string> Months { get; } = new ReadOnlyCollection<string>(
+    [
+        ""January"", ""February"", ""March"", ""April"", ""May"", ""June"", ""July"", ""August"", ""September"", ""October"", ""November"", ""December""
+    ]);
 
     private static int RandomScalingFactorThreadUnsafe(int min, int max) => _rng.Next(min, max);
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartPieDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartPieDemo.razor
index cd9edfff9e..844693ec55 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartPieDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartPieDemo.razor
@@ -14,8 +14,6 @@
             <BitButton Style="margin:5px" Variant="BitVariant.Fill" OnClick="RandomizePieData">Randomize Data</BitButton>
             <BitButton Style="margin:5px" Variant="BitVariant.Outline" OnClick="AddPieDataset">Add Dataset</BitButton>
             <BitButton Style="margin:5px" Variant="BitVariant.Outline" OnClick="RemovePieDataset">Remove Dataset</BitButton>
-            <BitButton Style="margin:5px" Variant="BitVariant.Outline" OnClick="AddPieData">Add Data</BitButton>
-            <BitButton Style="margin:5px" Variant="BitVariant.Outline" OnClick="RemovePieData">Remove Data</BitButton>
         </div>
     </ExamplePreview>
 </ComponentExampleBox>
\ No newline at end of file
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartPieDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartPieDemo.razor.cs
index e68f519e38..99ff876da6 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartPieDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartPieDemo.razor.cs
@@ -22,9 +22,9 @@ protected override void OnInitialized()
             }
         };
 
-        BitChartPieDataset<int> dataset = new BitChartPieDataset<int>(BitChartDemoUtils.RandomScalingFactor(INITAL_COUNT))
+        var dataset = new BitChartPieDataset<int>(BitChartDemoUtils.RandomScalingFactor(INITAL_COUNT))
         {
-            BackgroundColor = BitChartDemoColors.All.Take(INITAL_COUNT).Select(c => BitChartColorUtil.FromDrawingColor(System.Drawing.Color.FromArgb(220, c))).ToArray()
+            BackgroundColor = BitChartDemoColors.All.Take(INITAL_COUNT).Select(color => BitChartColorUtil.FromDrawingColor(color)).ToArray()
         };
         _config.Data.Labels.AddRange(BitChartDemoUtils.Months.Take(INITAL_COUNT));
         _config.Data.Datasets.Add(dataset);
@@ -55,9 +55,9 @@ private void RandomizePieData()
     private void AddPieDataset()
     {
         int count = _config.Data.Labels.Count;
-        BitChartPieDataset<int> dataset = new BitChartPieDataset<int>(BitChartDemoUtils.RandomScalingFactor(count, -100, 100))
+        var dataset = new BitChartPieDataset<int>(BitChartDemoUtils.RandomScalingFactor(count, -100, 100))
         {
-            BackgroundColor = BitChartDemoColors.All.Take(count).Select(BitChartColorUtil.FromDrawingColor).ToArray()
+            BackgroundColor = BitChartDemoColors.All.Take(count).Select(color => BitChartColorUtil.FromDrawingColor(color)).ToArray()
         };
 
         _config.Data.Datasets.Add(dataset);
@@ -74,52 +74,14 @@ private void RemovePieDataset()
         _chart.Update();
     }
 
-    private void AddPieData()
-    {
-        if (_config.Data.Datasets.Count == 0)
-            return;
-
-        string month = BitChartDemoUtils.Months[_config.Data.Labels.Count % BitChartDemoUtils.Months.Count];
-        _config.Data.Labels.Add(month);
-
-        foreach (IDataset<int> dataset in _config.Data.Datasets)
-        {
-            dataset.Add(BitChartDemoUtils.RandomScalingFactor());
-        }
-
-        _chart.Update();
-    }
-
-    private void RemovePieData()
-    {
-        if (_config.Data.Datasets.Count == 0 ||
-            _config.Data.Labels.Count == 0)
-        {
-            return;
-        }
-
-        _config.Data.Labels.RemoveAt(_config.Data.Labels.Count - 1);
-
-        foreach (IDataset<int> dataset in _config.Data.Datasets)
-        {
-            dataset.RemoveAt(dataset.Count - 1);
-        }
-
-        _chart.Update();
-    }
-
 
 
     private readonly string razorCode = @"
 <BitChart Config=""_config"" @ref=""_chart"" />
 
-<div>
-    <BitButton OnClick=""RandomizePieData"">Randomize Data</BitButton>
-    <BitButton OnClick=""AddPieDataset"">Add Dataset</BitButton>
-    <BitButton OnClick=""RemovePieDataset"">Remove Dataset</BitButton>
-    <BitButton OnClick=""AddPieData"">Add Data</BitButton>
-    <BitButton OnClick=""RemovePieData"">Remove Data</BitButton>
-</div>";
+<BitButton OnClick=""RandomizePieData"">Randomize Data</BitButton>
+<BitButton OnClick=""AddPieDataset"">Add Dataset</BitButton>
+<BitButton OnClick=""RemovePieDataset"">Remove Dataset</BitButton>";
     private readonly string csharpCode = @"
 private const int INITAL_COUNT = 5;
 
@@ -141,9 +103,10 @@ protected override void OnInitialized()
         }
     };
 
-    BitChartPieDataset<int> dataset = new BitChartPieDataset<int>(BitChartDemoUtils.RandomScalingFactor(INITAL_COUNT))
+    
+    var dataset = new BitChartPieDataset<int>(BitChartDemoUtils.RandomScalingFactor(INITAL_COUNT))
     {
-        BackgroundColor = BitChartDemoColors.All.Take(INITAL_COUNT).Select(c => BitChartColorUtil.FromDrawingColor(System.Drawing.Color.FromArgb(220, c))).ToArray()
+        BackgroundColor = BitChartDemoColors.All.Take(INITAL_COUNT).Select(color => BitChartColorUtil.FromDrawingColor(color)).ToArray()
     };
     _config.Data.Labels.AddRange(BitChartDemoUtils.Months.Take(INITAL_COUNT));
     _config.Data.Datasets.Add(dataset);
@@ -174,9 +137,9 @@ private void RandomizePieData()
 private void AddPieDataset()
 {
     int count = _config.Data.Labels.Count;
-    BitChartPieDataset<int> dataset = new BitChartPieDataset<int>(BitChartDemoUtils.RandomScalingFactor(count, -100, 100))
+    var dataset = new BitChartPieDataset<int>(BitChartDemoUtils.RandomScalingFactor(count, -100, 100))
     {
-        BackgroundColor = BitChartDemoColors.All.Take(count).Select(BitChartColorUtil.FromDrawingColor).ToArray()
+        BackgroundColor = BitChartDemoColors.All.Take(count).Select(color => BitChartColorUtil.FromDrawingColor(color)).ToArray()
     };
 
     _config.Data.Datasets.Add(dataset);
@@ -193,46 +156,12 @@ private void RemovePieDataset()
     _chart.Update();
 }
 
-private void AddPieData()
-{
-    if (_config.Data.Datasets.Count == 0)
-        return;
-
-    string month = BitChartDemoUtils.Months[_config.Data.Labels.Count % BitChartDemoUtils.Months.Count];
-    _config.Data.Labels.Add(month);
-
-    foreach (IDataset<int> dataset in _config.Data.Datasets)
-    {
-        dataset.Add(BitChartDemoUtils.RandomScalingFactor());
-    }
-
-    _chart.Update();
-}
-
-private void RemovePieData()
-{
-    if (_config.Data.Datasets.Count == 0 ||
-        _config.Data.Labels.Count == 0)
-    {
-        return;
-    }
-
-    _config.Data.Labels.RemoveAt(_config.Data.Labels.Count - 1);
-
-    foreach (IDataset<int> dataset in _config.Data.Datasets)
-    {
-        dataset.RemoveAt(dataset.Count - 1);
-    }
-
-    _chart.Update();
-}
-
 public static class BitChartDemoColors
 {
-    private static readonly Lazy<IReadOnlyList<System.Drawing.Color>> _all = new Lazy<IReadOnlyList<System.Drawing.Color>>(() => new System.Drawing.Color[7]
-    {
-                Red, Orange, Yellow, Green, Blue, Purple, Grey
-    });
+    private static readonly Lazy<IReadOnlyList<System.Drawing.Color>> _all = new(() =>
+    [
+        Red, Orange, Yellow, Green, Blue, Purple, Grey
+    ]);
 
     public static IReadOnlyList<System.Drawing.Color> All => _all.Value;
 
@@ -247,12 +176,12 @@ public static class BitChartDemoColors
 
 public static class BitChartDemoUtils
 {
-    public static readonly Random _rng = new Random();
+    public static readonly Random _rng = new();
 
-    public static IReadOnlyList<string> Months { get; } = new ReadOnlyCollection<string>(new[]
-    {
-            ""January"", ""February"", ""March"", ""April"", ""May"", ""June"", ""July"", ""August"", ""September"", ""October"", ""November"", ""December""
-    });
+    public static IReadOnlyList<string> Months { get; } = new ReadOnlyCollection<string>(
+    [
+        ""January"", ""February"", ""March"", ""April"", ""May"", ""June"", ""July"", ""August"", ""September"", ""October"", ""November"", ""December""
+    ]);
 
     private static int RandomScalingFactorThreadUnsafe(int min, int max) => _rng.Next(min, max);
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartPolarAreaDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartPolarAreaDemo.razor
new file mode 100644
index 0000000000..d6d5860edd
--- /dev/null
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartPolarAreaDemo.razor
@@ -0,0 +1,18 @@
+<ComponentExampleBox Title="PolarArea Chart" RazorCode="@razorCode" CsharpCode="@csharpCode" Id="example1">
+    <ExamplePreview>
+        <div class="example-desc">
+            Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.
+            This type of chart is often useful when we want to show a comparison data similar to a pie chart, but also show a scale of values for context.
+        </div>
+        <div class="chart-wrapper">
+            <div class="chart-container">
+                <BitChart Config="_config" @ref="_chart" />
+            </div>
+        </div>
+        <div class="buttons-container">
+            <BitButton Style="margin:5px" Variant="BitVariant.Fill" OnClick="RandomizePolarAreaData">Randomize Data</BitButton>
+            <BitButton Style="margin:5px" Variant="BitVariant.Outline" OnClick="AddPolarAreaDataset">Add Dataset</BitButton>
+            <BitButton Style="margin:5px" Variant="BitVariant.Outline" OnClick="RemovePolarAreaDataset">Remove Dataset</BitButton>
+        </div>
+    </ExamplePreview>
+</ComponentExampleBox>
\ No newline at end of file
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartPolarAreaDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartPolarAreaDemo.razor.cs
new file mode 100644
index 0000000000..d983923c0e
--- /dev/null
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartPolarAreaDemo.razor.cs
@@ -0,0 +1,259 @@
+namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Extras.Chart;
+
+public partial class _BitChartPolarAreaDemo
+{
+    private const int INITAL_COUNT = 6;
+
+    private BitChart _chart = default!;
+    private BitChartPolarAreaConfig _config = default!;
+
+    protected override void OnInitialized()
+    {
+        _config = new BitChartPolarAreaConfig
+        {
+            Options = new BitChartPolarAreaOptions
+            {
+                Responsive = true,
+                Title = new BitChartOptionsTitle
+                {
+                    Display = true,
+                    Text = "BitChart PolarArea Chart"
+                },
+                Scale = new BitChartLinearRadialAxis
+                {
+                    GridLines = new BitChartGridLines
+                    {
+                        Color = "gray"
+                    }
+                }
+            }
+        };
+
+        var dataset = new BitChartPolarAreaDataset<int>(BitChartDemoUtils.RandomScalingFactor(INITAL_COUNT))
+        {
+            BackgroundColor = BitChartDemoColors.All.Take(INITAL_COUNT).Select(color => BitChartColorUtil.FromDrawingColor(color)).ToArray()
+        };
+        _config.Data.Labels.AddRange(BitChartDemoUtils.Months.Take(INITAL_COUNT));
+        _config.Data.Datasets.Add(dataset);
+    }
+
+    private void RandomizePolarAreaData()
+    {
+        foreach (IDataset<int> dataset in _config.Data.Datasets)
+        {
+            int count = dataset.Count;
+            dataset.Clear();
+            for (int i = 0; i < count; i++)
+            {
+                if (BitChartDemoUtils._rng.NextDouble() < 0.2)
+                {
+                    dataset.Add(0);
+                }
+                else
+                {
+                    dataset.Add(BitChartDemoUtils.RandomScalingFactor());
+                }
+            }
+        }
+
+        _chart.Update();
+    }
+
+    private void AddPolarAreaDataset()
+    {
+        int count = _config.Data.Labels.Count;
+        BitChartPolarAreaDataset<int> dataset = new BitChartPolarAreaDataset<int>(BitChartDemoUtils.RandomScalingFactor(count, -100, 100))
+        {
+            BackgroundColor = BitChartDemoColors.All.Take(count).Select(color => BitChartColorUtil.FromDrawingColor(color)).ToArray()
+        };
+
+        _config.Data.Datasets.Add(dataset);
+        _chart.Update();
+    }
+
+    private void RemovePolarAreaDataset()
+    {
+        IList<IBitChartDataset> datasets = _config.Data.Datasets;
+        if (datasets.Count == 0)
+            return;
+
+        datasets.RemoveAt(datasets.Count - 1);
+        _chart.Update();
+    }
+
+
+
+    private readonly string razorCode = @"
+<BitChart Config=""_config"" @ref=""_chart"" />
+
+<BitButton OnClick=""RandomizePolarAreaData"">Randomize Data</BitButton>
+<BitButton OnClick= ""AddPolarAreaDataset"" > Add Dataset</BitButton>
+<BitButton OnClick= ""RemovePolarAreaDataset"" > Remove Dataset</BitButton>";
+    private readonly string csharpCode = @"
+private const int INITAL_COUNT = 5;
+
+private BitChart _chart = default!;
+private BitChartPolarAreaConfig _config = default!;
+
+protected override void OnInitialized()
+{
+    _config = new BitChartPolarAreaConfig
+    {
+        Options = new BitChartPolarAreaOptions
+        {
+            Responsive = true,
+            Title = new BitChartOptionsTitle
+            {
+                Display = true,
+                Text = ""BitChart PolarArea Chart""
+            },
+            Scale = new BitChartLinearRadialAxis
+            {
+                GridLines = new BitChartGridLines
+                {
+                    Color = ""gray""
+                }
+            }
+        }
+    };
+
+    var dataset = new BitChartPolarAreaDataset<int>(BitChartDemoUtils.RandomScalingFactor(INITAL_COUNT))
+    {
+        BackgroundColor = BitChartDemoColors.All.Take(INITAL_COUNT).Select(color => BitChartColorUtil.FromDrawingColor(color)).ToArray()
+    };
+    _config.Data.Labels.AddRange(BitChartDemoUtils.Months.Take(INITAL_COUNT));
+    _config.Data.Datasets.Add(dataset);
+}
+
+private void RandomizePolarAreaData()
+{
+    foreach (IDataset<int> dataset in _config.Data.Datasets)
+    {
+        int count = dataset.Count;
+        dataset.Clear();
+        for (int i = 0; i < count; i++)
+        {
+            if (BitChartDemoUtils._rng.NextDouble() < 0.2)
+            {
+                dataset.Add(0);
+            }
+            else
+            {
+                dataset.Add(BitChartDemoUtils.RandomScalingFactor());
+            }
+        }
+    }
+
+    _chart.Update();
+}
+
+private void AddPolarAreaDataset()
+{
+    int count = _config.Data.Labels.Count;
+    BitChartPolarAreaDataset<int> dataset = new BitChartPolarAreaDataset<int>(BitChartDemoUtils.RandomScalingFactor(count, -100, 100))
+    {
+        BackgroundColor = BitChartDemoColors.All.Take(count).Select(color => BitChartColorUtil.FromDrawingColor(color)).ToArray()
+    };
+
+    _config.Data.Datasets.Add(dataset);
+    _chart.Update();
+}
+
+private void RemovePolarAreaDataset()
+{
+    IList<IBitChartDataset> datasets = _config.Data.Datasets;
+    if (datasets.Count == 0)
+        return;
+
+    datasets.RemoveAt(datasets.Count - 1);
+    _chart.Update();
+}
+
+public static class BitChartDemoColors
+{
+    private static readonly Lazy<IReadOnlyList<System.Drawing.Color>> _all = new(() =>
+    [
+        Red, Orange, Yellow, Green, Blue, Purple, Grey
+    ]);
+
+    public static IReadOnlyList<System.Drawing.Color> All => _all.Value;
+
+    public static readonly System.Drawing.Color Red = System.Drawing.Color.FromArgb(255, 99, 132);
+    public static readonly System.Drawing.Color Orange = System.Drawing.Color.FromArgb(255, 159, 64);
+    public static readonly System.Drawing.Color Yellow = System.Drawing.Color.FromArgb(255, 205, 86);
+    public static readonly System.Drawing.Color Green = System.Drawing.Color.FromArgb(75, 192, 192);
+    public static readonly System.Drawing.Color Blue = System.Drawing.Color.FromArgb(54, 162, 235);
+    public static readonly System.Drawing.Color Purple = System.Drawing.Color.FromArgb(153, 102, 255);
+    public static readonly System.Drawing.Color Grey = System.Drawing.Color.FromArgb(201, 203, 207);
+}
+
+public static class BitChartDemoUtils
+{
+    public static readonly Random _rng = new();
+
+    public static IReadOnlyList<string> Months { get; } = new ReadOnlyCollection<string>(
+    [
+        ""January"", ""February"", ""March"", ""April"", ""May"", ""June"", ""July"", ""August"", ""September"", ""October"", ""November"", ""December""
+    ]);
+
+    private static int RandomScalingFactorThreadUnsafe(int min, int max) => _rng.Next(min, max);
+
+    public static int RandomScalingFactor()
+    {
+        lock (_rng)
+        {
+            return RandomScalingFactorThreadUnsafe(0, 100);
+        }
+    }
+
+    public static IEnumerable<int> RandomScalingFactor(int count, int min = 0, int max = 100)
+    {
+        int[] factors = new int[count];
+        lock (_rng)
+        {
+            for (int i = 0; i < count; i++)
+            {
+                factors[i] = RandomScalingFactorThreadUnsafe(min, max);
+            }
+        }
+
+        return factors;
+    }
+
+    public static IEnumerable<DateTime> GetNextDays(int count)
+    {
+        DateTime now = DateTime.Now;
+        DateTime[] factors = new DateTime[count];
+        for (int i = 0; i < factors.Length; i++)
+        {
+            factors[i] = now.AddDays(i);
+        }
+
+        return factors;
+    }
+}
+
+public static class IListExtensions
+{
+    public static void AddRange<T>(this IList<T> list, IEnumerable<T> items)
+    {
+        if (list == null)
+            throw new ArgumentNullException(nameof(list));
+
+        if (items == null)
+            throw new ArgumentNullException(nameof(items));
+
+        if (list is List<T> asList)
+        {
+            asList.AddRange(items);
+        }
+        else
+        {
+            foreach (T item in items)
+            {
+                list.Add(item);
+            }
+        }
+    }
+}";
+}
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartRadarDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartRadarDemo.razor
new file mode 100644
index 0000000000..d0bb13dcd8
--- /dev/null
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartRadarDemo.razor
@@ -0,0 +1,20 @@
+<ComponentExampleBox Title="Radar Chart" RazorCode="@razorCode" CsharpCode="@csharpCode" Id="example1">
+    <ExamplePreview>
+        <div class="example-desc">
+            A radar chart is a way of showing multiple data points and the variation between them.
+            They are often useful for comparing the points of two or more different data sets.
+        </div>
+        <div class="chart-wrapper">
+            <div class="chart-container">
+                <BitChart Config="_config" @ref="_chart" />
+            </div>
+        </div>
+        <div class="buttons-container">
+            <BitButton Style="margin:5px" Variant="BitVariant.Fill" OnClick="RandomizeRadarData">Randomize Data</BitButton>
+            <BitButton Style="margin:5px" Variant="BitVariant.Outline" OnClick="AddRadarDataset">Add Dataset</BitButton>
+            <BitButton Style="margin:5px" Variant="BitVariant.Outline" OnClick="RemoveRadarDataset">Remove Dataset</BitButton>
+            <BitButton Style="margin:5px" Variant="BitVariant.Outline" OnClick="AddRadarData">Add Data</BitButton>
+            <BitButton Style="margin:5px" Variant="BitVariant.Outline" OnClick="RemoveRadarData">Remove Data</BitButton>
+        </div>
+    </ExamplePreview>
+</ComponentExampleBox>
\ No newline at end of file
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartRadarDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartRadarDemo.razor.cs
new file mode 100644
index 0000000000..4d6aa47e37
--- /dev/null
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartRadarDemo.razor.cs
@@ -0,0 +1,368 @@
+namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Extras.Chart;
+
+public partial class _BitChartRadarDemo
+{
+    private const int INITAL_COUNT = 8;
+
+    private BitChart _chart = default!;
+    private BitChartRadarConfig _config = default!;
+
+    protected override void OnInitialized()
+    {
+        _config = new BitChartRadarConfig
+        {
+            Options = new BitChartRadarOptions()
+            {
+                Responsive = true,
+                Title = new BitChartOptionsTitle
+                {
+                    Display = true,
+                    Text = "BitChart Radar Chart"
+                },
+                Scale = new BitChartLinearRadialAxis
+                {
+                    GridLines = new BitChartGridLines
+                    {
+                        Color = "gray"
+                    }
+                }
+            }
+        };
+
+        IDataset<int> dataset1 = new BitChartRadarDataset<int>(BitChartDemoUtils.RandomScalingFactor(INITAL_COUNT))
+        {
+            Label = "Dataset 1",
+            BackgroundColor = BitChartColorUtil.FromDrawingColor(System.Drawing.Color.FromArgb(128, BitChartDemoColors.Red))
+        };
+
+        IDataset<int> dataset2 = new BitChartRadarDataset<int>(BitChartDemoUtils.RandomScalingFactor(INITAL_COUNT))
+        {
+            Label = "Dataset 2",
+            BackgroundColor = BitChartColorUtil.FromDrawingColor(System.Drawing.Color.FromArgb(128, BitChartDemoColors.Blue))
+        };
+
+        IDataset<int> dataset3 = new BitChartRadarDataset<int>(BitChartDemoUtils.RandomScalingFactor(INITAL_COUNT))
+        {
+            Label = "Dataset 3",
+            BackgroundColor = BitChartColorUtil.FromDrawingColor(System.Drawing.Color.FromArgb(128, BitChartDemoColors.Orange))
+        };
+
+
+        _config.Data.Datasets.Add(dataset1);
+        _config.Data.Datasets.Add(dataset2);
+        _config.Data.Datasets.Add(dataset3);
+        _config.Data.Labels.AddRange(BitChartDemoUtils.Months.Take(INITAL_COUNT));
+    }
+
+    private void RandomizeRadarData()
+    {
+        foreach (IDataset<int> dataset in _config.Data.Datasets)
+        {
+            int count = dataset.Count;
+            dataset.Clear();
+            for (int i = 0; i < count; i++)
+            {
+                if (BitChartDemoUtils._rng.NextDouble() < 0.2)
+                {
+                    dataset.Add(0);
+                }
+                else
+                {
+                    dataset.Add(BitChartDemoUtils.RandomScalingFactor());
+                }
+            }
+        }
+
+        _chart.Update();
+    }
+
+    private void AddRadarDataset()
+    {
+        System.Drawing.Color color = BitChartDemoColors.All[_config.Data.Datasets.Count % BitChartDemoColors.All.Count];
+        IDataset<int> dataset = new BitChartRadarDataset<int>(BitChartDemoUtils.RandomScalingFactor(_config.Data.Labels.Count))
+        {
+            Label = $"Dataset {_config.Data.Datasets.Count + 1}",
+            BackgroundColor = BitChartColorUtil.FromDrawingColor(System.Drawing.Color.FromArgb(128, color)),
+            BorderColor = BitChartColorUtil.FromDrawingColor(color),
+            BorderWidth = 1
+        };
+
+        _config.Data.Datasets.Add(dataset);
+        _chart.Update();
+    }
+
+    private void RemoveRadarDataset()
+    {
+        IList<IBitChartDataset> datasets = _config.Data.Datasets;
+        if (datasets.Count == 0)
+            return;
+
+        datasets.RemoveAt(datasets.Count - 1);
+        _chart.Update();
+    }
+
+    private void AddRadarData()
+    {
+        if (_config.Data.Datasets.Count == 0)
+            return;
+
+        string month = BitChartDemoUtils.Months[_config.Data.Labels.Count % BitChartDemoUtils.Months.Count];
+        _config.Data.Labels.Add(month);
+
+        foreach (IDataset<int> dataset in _config.Data.Datasets)
+        {
+            dataset.Add(BitChartDemoUtils.RandomScalingFactor());
+        }
+
+        _chart.Update();
+    }
+
+    private void RemoveRadarData()
+    {
+        if (_config.Data.Datasets.Count == 0 ||
+            _config.Data.Labels.Count == 0)
+        {
+            return;
+        }
+
+        _config.Data.Labels.RemoveAt(_config.Data.Labels.Count - 1);
+
+        foreach (IDataset<int> dataset in _config.Data.Datasets)
+        {
+            dataset.RemoveAt(dataset.Count - 1);
+        }
+
+        _chart.Update();
+    }
+
+
+
+    private readonly string razorCode = @"
+<BitChart Config=""_config"" @ref=""_chart"" />
+
+<BitButton OnClick=""RandomizeRadarData"">Randomize Data</BitButton>
+<BitButton OnClick= ""AddRadarDataset"" > Add Dataset</BitButton>
+<BitButton OnClick= ""RemoveRadarDataset"" > Remove Dataset</BitButton>
+<BitButton OnClick= ""AddRadarData"" > Add Data</BitButton>
+<BitButton OnClick= ""RemoveRadarData"" > Remove Data</BitButton>";
+    private readonly string csharpCode = @"
+private const int INITAL_COUNT = 8;
+
+private BitChart _chart = default!;
+private BitChartRadarConfig _config = default!;
+
+protected override void OnInitialized()
+{
+    _config = new BitChartRadarConfig
+    {
+        Options = new BitChartRadarOptions()
+        {
+            Responsive = true,
+            Title = new BitChartOptionsTitle
+            {
+                Display = true,
+                Text = ""BitChart Radar Chart""
+            },
+            Scale = new BitChartLinearRadialAxis
+            {
+                GridLines = new BitChartGridLines
+                {
+                    Color = ""gray""
+                }
+            }
+        }
+    };
+
+    IDataset<int> dataset1 = new BitChartRadarDataset<int>(BitChartDemoUtils.RandomScalingFactor(INITAL_COUNT))
+    {
+        Label = ""Dataset 1"",
+        BackgroundColor = BitChartColorUtil.FromDrawingColor(System.Drawing.Color.FromArgb(128, BitChartDemoColors.Red))
+    };
+
+    IDataset<int> dataset2 = new BitChartRadarDataset<int>(BitChartDemoUtils.RandomScalingFactor(INITAL_COUNT))
+    {
+        Label = ""Dataset 2"",
+        BackgroundColor = BitChartColorUtil.FromDrawingColor(System.Drawing.Color.FromArgb(128, BitChartDemoColors.Blue))
+    };
+
+    IDataset<int> dataset3 = new BitChartRadarDataset<int>(BitChartDemoUtils.RandomScalingFactor(INITAL_COUNT))
+    {
+        Label = ""Dataset 3"",
+        BackgroundColor = BitChartColorUtil.FromDrawingColor(System.Drawing.Color.FromArgb(128, BitChartDemoColors.Orange))
+    };
+
+
+    _config.Data.Datasets.Add(dataset1);
+    _config.Data.Datasets.Add(dataset2);
+    _config.Data.Datasets.Add(dataset3);
+}
+
+private void RandomizeRadarData()
+{
+    foreach (IDataset<int> dataset in _config.Data.Datasets)
+    {
+        int count = dataset.Count;
+        dataset.Clear();
+        for (int i = 0; i < count; i++)
+        {
+            if (BitChartDemoUtils._rng.NextDouble() < 0.2)
+            {
+                dataset.Add(0);
+            }
+            else
+            {
+                dataset.Add(BitChartDemoUtils.RandomScalingFactor());
+            }
+        }
+    }
+
+    _chart.Update();
+}
+
+private void AddRadarDataset()
+{
+    System.Drawing.Color color = BitChartDemoColors.All[_config.Data.Datasets.Count % BitChartDemoColors.All.Count];
+    IDataset<int> dataset = new BitChartRadarDataset<int>(BitChartDemoUtils.RandomScalingFactor(_config.Data.Labels.Count))
+    {
+        Label = $""Dataset {_config.Data.Datasets.Count + 1}"",
+        BackgroundColor = BitChartColorUtil.FromDrawingColor(System.Drawing.Color.FromArgb(128, color)),
+        BorderColor = BitChartColorUtil.FromDrawingColor(color),
+        BorderWidth = 1
+    };
+
+    _config.Data.Datasets.Add(dataset);
+    _chart.Update();
+}
+
+private void RemoveRadarDataset()
+{
+    IList<IBitChartDataset> datasets = _config.Data.Datasets;
+    if (datasets.Count == 0)
+        return;
+
+    datasets.RemoveAt(datasets.Count - 1);
+    _chart.Update();
+}
+
+private void AddRadarData()
+{
+    if (_config.Data.Datasets.Count == 0)
+        return;
+
+    string month = BitChartDemoUtils.Months[_config.Data.Labels.Count % BitChartDemoUtils.Months.Count];
+    _config.Data.Labels.Add(month);
+
+    foreach (IDataset<int> dataset in _config.Data.Datasets)
+    {
+        dataset.Add(BitChartDemoUtils.RandomScalingFactor());
+    }
+
+    _chart.Update();
+}
+
+private void RemoveRadarData()
+{
+    if (_config.Data.Datasets.Count == 0 ||
+        _config.Data.Labels.Count == 0)
+    {
+        return;
+    }
+
+    _config.Data.Labels.RemoveAt(_config.Data.Labels.Count - 1);
+
+    foreach (IDataset<int> dataset in _config.Data.Datasets)
+    {
+        dataset.RemoveAt(dataset.Count - 1);
+    }
+
+    _chart.Update();
+}
+
+public static class BitChartDemoColors
+{
+    private static readonly Lazy<IReadOnlyList<System.Drawing.Color>> _all = new(() =>
+    [
+        Red, Orange, Yellow, Green, Blue, Purple, Grey
+    ]);
+
+    public static IReadOnlyList<System.Drawing.Color> All => _all.Value;
+
+    public static readonly System.Drawing.Color Red = System.Drawing.Color.FromArgb(255, 99, 132);
+    public static readonly System.Drawing.Color Orange = System.Drawing.Color.FromArgb(255, 159, 64);
+    public static readonly System.Drawing.Color Yellow = System.Drawing.Color.FromArgb(255, 205, 86);
+    public static readonly System.Drawing.Color Green = System.Drawing.Color.FromArgb(75, 192, 192);
+    public static readonly System.Drawing.Color Blue = System.Drawing.Color.FromArgb(54, 162, 235);
+    public static readonly System.Drawing.Color Purple = System.Drawing.Color.FromArgb(153, 102, 255);
+    public static readonly System.Drawing.Color Grey = System.Drawing.Color.FromArgb(201, 203, 207);
+}
+
+public static class BitChartDemoUtils
+{
+    public static readonly Random _rng = new();
+
+    public static IReadOnlyList<string> Months { get; } = new ReadOnlyCollection<string>(
+    [
+        ""January"", ""February"", ""March"", ""April"", ""May"", ""June"", ""July"", ""August"", ""September"", ""October"", ""November"", ""December""
+    ]);
+
+    private static int RandomScalingFactorThreadUnsafe(int min, int max) => _rng.Next(min, max);
+
+    public static int RandomScalingFactor()
+    {
+        lock (_rng)
+        {
+            return RandomScalingFactorThreadUnsafe(0, 100);
+        }
+    }
+
+    public static IEnumerable<int> RandomScalingFactor(int count, int min = 0, int max = 100)
+    {
+        int[] factors = new int[count];
+        lock (_rng)
+        {
+            for (int i = 0; i < count; i++)
+            {
+                factors[i] = RandomScalingFactorThreadUnsafe(min, max);
+            }
+        }
+
+        return factors;
+    }
+
+    public static IEnumerable<DateTime> GetNextDays(int count)
+    {
+        DateTime now = DateTime.Now;
+        DateTime[] factors = new DateTime[count];
+        for (int i = 0; i < factors.Length; i++)
+        {
+            factors[i] = now.AddDays(i);
+        }
+
+        return factors;
+    }
+}
+
+public static class IListExtensions
+{
+    public static void AddRange<T>(this IList<T> list, IEnumerable<T> items)
+    {
+        if (list == null)
+            throw new ArgumentNullException(nameof(list));
+
+        if (items == null)
+            throw new ArgumentNullException(nameof(items));
+
+        if (list is List<T> asList)
+        {
+            asList.AddRange(items);
+        }
+        else
+        {
+            foreach (T item in items)
+            {
+                list.Add(item);
+            }
+        }
+    }
+}";
+}
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartScatterDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartScatterDemo.razor
new file mode 100644
index 0000000000..270eea26c1
--- /dev/null
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartScatterDemo.razor
@@ -0,0 +1,18 @@
+<ComponentExampleBox Title="Scatter" RazorCode="@razorCode" CsharpCode="@csharpCode" Id="example7">
+    <ExamplePreview>
+        <div class="example-desc">
+            Scatter charts are based on basic line charts with the x-axis changed to a linear axis.
+            To use a scatter chart, data must be passed as objects containing X and Y properties. The example below creates a scatter chart with 4 points.
+        </div>
+        <div class="chart-wrapper">
+            <div class="chart-container">
+                <BitChart Config="_config" IsDateAdapterRequired="true" @ref="_chart" />
+            </div>
+        </div>
+        <div class="buttons-container">
+            <BitButton Style="margin:5px" Variant="BitVariant.Fill" OnClick="RandomizeData">Randomize Data</BitButton>
+            <BitButton Style="margin:5px" Variant="BitVariant.Outline" OnClick="AddDataset">Add Dataset</BitButton>
+            <BitButton Style="margin:5px" Variant="BitVariant.Outline" OnClick="RemoveDataset">Remove Dataset</BitButton>
+        </div>
+    </ExamplePreview>
+</ComponentExampleBox>
\ No newline at end of file
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartScatterDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartScatterDemo.razor.cs
new file mode 100644
index 0000000000..6df03e4da8
--- /dev/null
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartScatterDemo.razor.cs
@@ -0,0 +1,340 @@
+namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Extras.Chart;
+
+public partial class _BitChartScatterDemo
+{
+    private const int INITAL_COUNT = 5;
+
+    private BitChart _chart = default!;
+    private BitChartScatterConfig _config = default!;
+
+    protected override void OnInitialized()
+    {
+        _config = new BitChartScatterConfig() 
+        { 
+            Options = new BitChartLineOptions
+            {
+                Scales = new BitChartScales
+                {
+                    XAxes =
+                    [
+                        new BitChartLinearCartesianAxis
+                        {
+                            ScaleLabel = new BitChartScaleLabel
+                            {
+                                LabelString = "Value"
+                            },
+                            GridLines = new BitChartGridLines
+                            {
+                                Color = "gray"
+                            }
+                        }
+                    ],
+                    YAxes =
+                    [
+                        new BitChartLinearCartesianAxis
+                        {
+                            ScaleLabel = new BitChartScaleLabel
+                            {
+                                LabelString = "Value"
+                            },
+                            GridLines = new BitChartGridLines
+                            {
+                                Color = "gray"
+                            }
+                        }
+                    ]
+                }
+            }
+        };
+
+        _config.Data.Labels.AddRange(BitChartDemoUtils.GetNextDays(INITAL_COUNT).Select(d => d.ToString("o")));
+
+        var dataset1 = new BitChartScatterDataset(BitChartDemoUtils.CreateRandomPoints(10))
+        {
+            Label = "My first dataset",
+            BackgroundColor = BitChartColorUtil.FromDrawingColor(BitChartDemoColors.Red),
+            BorderColor = BitChartColorUtil.FromDrawingColor(BitChartDemoColors.Red),
+        };
+
+        var dataset2 = new BitChartScatterDataset(BitChartDemoUtils.CreateRandomPoints(10))
+        {
+            Label = "My second dataset",
+            BackgroundColor = BitChartColorUtil.FromDrawingColor(BitChartDemoColors.Blue),
+            BorderColor = BitChartColorUtil.FromDrawingColor(BitChartDemoColors.Blue),
+        };
+
+        var dataset3 = new BitChartScatterDataset(BitChartDemoUtils.CreateRandomPoints(10))
+        {
+            Label = "Dataset with point data",
+            BackgroundColor = BitChartColorUtil.FromDrawingColor(BitChartDemoColors.Green),
+            BorderColor = BitChartColorUtil.FromDrawingColor(BitChartDemoColors.Green),
+        };
+
+        _config.Data.Datasets.Add(dataset1);
+        _config.Data.Datasets.Add(dataset2);
+        _config.Data.Datasets.Add(dataset3);
+    }
+
+    private void RandomizeData()
+    {
+        foreach (IBitChartDataset dataset in _config.Data.Datasets)
+        {
+            if (dataset is BitChartScatterDataset scatterDataset)
+            {
+                int count = scatterDataset.Count;
+                scatterDataset.Clear();
+                scatterDataset.AddRange(BitChartDemoUtils.CreateRandomPoints(count));
+            }
+        }
+
+        _chart.Update();
+    }
+
+    private void AddDataset()
+    {
+        string color = BitChartColorUtil.FromDrawingColor(BitChartDemoColors.All[_config.Data.Datasets.Count % BitChartDemoColors.All.Count]);
+        var newDataset = new BitChartScatterDataset(BitChartDemoUtils.CreateRandomPoints(_config.Data.Labels.Count))
+        {
+            Label = $"Dataset {_config.Data.Datasets.Count + 1}",
+            BackgroundColor = color,
+            BorderColor = color,
+        };
+
+        _config.Data.Datasets.Add(newDataset);
+        _chart.Update();
+    }
+
+    private void RemoveDataset()
+    {
+        IList<IBitChartDataset> datasets = _config.Data.Datasets;
+
+        if (datasets.Count == 0) return;
+
+        datasets.RemoveAt(datasets.Count - 1);
+        _chart.Update();
+    }
+
+
+
+    private readonly string razorCode = @"
+<BitChart Config=""_config"" IsDateAdapterRequired=""true"" @ref=""_chart"" />
+
+<BitButton OnClick=""RandomizeData"">Randomize Data</BitButton>
+<BitButton OnClick=""AddDataset"">Add Dataset</BitButton>
+<BitButton OnClick=""RemoveDataset"">Remove Dataset</BitButton>";
+    private readonly string csharpCode = @"
+private const int INITAL_COUNT = 5;
+
+private BitChart _chart = default!;
+private BitChartScatterConfig _config = default!;
+
+protected override void OnInitialized()
+{
+    _config = new BitChartScatterConfig() 
+    { 
+        Options = new BitChartLineOptions
+        {
+            Scales = new BitChartScales
+            {
+                XAxes =
+                [
+                    new BitChartLinearCartesianAxis
+                    {
+                        ScaleLabel = new BitChartScaleLabel
+                        {
+                            LabelString = ""Value""
+                        },
+                        GridLines = new BitChartGridLines
+                        {
+                            Color = ""gray""
+                        }
+                    }
+                ],
+                YAxes =
+                [
+                    new BitChartLinearCartesianAxis
+                    {
+                        ScaleLabel = new BitChartScaleLabel
+                        {
+                            LabelString = ""Value""
+                        },
+                        GridLines = new BitChartGridLines
+                        {
+                            Color = ""gray""
+                        }
+                    }
+                ]
+            }
+        }
+    };
+
+    _config.Data.Labels.AddRange(BitChartDemoUtils.GetNextDays(INITAL_COUNT).Select(d => d.ToString(""o"")));
+
+    var dataset1 = new BitChartScatterDataset(BitChartDemoUtils.CreateRandomPoints(10))
+    {
+        Label = ""My first dataset"",
+        BackgroundColor = BitChartColorUtil.FromDrawingColor(BitChartDemoColors.Red),
+        BorderColor = BitChartColorUtil.FromDrawingColor(BitChartDemoColors.Red),
+    };
+
+    var dataset2 = new BitChartScatterDataset(BitChartDemoUtils.CreateRandomPoints(10))
+    {
+        Label = ""My second dataset"",
+        BackgroundColor = BitChartColorUtil.FromDrawingColor(BitChartDemoColors.Blue),
+        BorderColor = BitChartColorUtil.FromDrawingColor(BitChartDemoColors.Blue),
+    };
+
+    var dataset3 = new BitChartScatterDataset(BitChartDemoUtils.CreateRandomPoints(10))
+    {
+        Label = ""Dataset with point data"",
+        BackgroundColor = BitChartColorUtil.FromDrawingColor(BitChartDemoColors.Green),
+        BorderColor = BitChartColorUtil.FromDrawingColor(BitChartDemoColors.Green),
+    };
+
+    _config.Data.Datasets.Add(dataset1);
+    _config.Data.Datasets.Add(dataset2);
+    _config.Data.Datasets.Add(dataset3);
+}
+
+private void RandomizeData()
+{
+    foreach (IBitChartDataset dataset in _config.Data.Datasets)
+    {
+        if (dataset is BitChartScatterDataset scatterDataset)
+        {
+            int count = scatterDataset.Count;
+            scatterDataset.Clear();
+            scatterDataset.AddRange(BitChartDemoUtils.CreateRandomPoints(count));
+        }
+    }
+
+    _chart.Update();
+}
+
+private void AddDataset()
+{
+    string color = BitChartColorUtil.FromDrawingColor(BitChartDemoColors.All[_config.Data.Datasets.Count % BitChartDemoColors.All.Count]);
+    var newDataset = new BitChartScatterDataset(BitChartDemoUtils.CreateRandomPoints(_config.Data.Labels.Count))
+    {
+        Label = $""Dataset {_config.Data.Datasets.Count + 1}"",
+        BackgroundColor = color,
+        BorderColor = color,
+    };
+
+    _config.Data.Datasets.Add(newDataset);
+    _chart.Update();
+}
+
+private void RemoveDataset()
+{
+    IList<IBitChartDataset> datasets = _config.Data.Datasets;
+
+    if (datasets.Count == 0) return;
+
+    datasets.RemoveAt(datasets.Count - 1);
+    _chart.Update();
+}
+
+public static class BitChartDemoColors
+{
+    private static readonly Lazy<IReadOnlyList<System.Drawing.Color>> _all = new(() =>
+    [
+        Red, Orange, Yellow, Green, Blue, Purple, Grey
+    ]);
+
+    public static IReadOnlyList<System.Drawing.Color> All => _all.Value;
+
+    public static readonly System.Drawing.Color Red = System.Drawing.Color.FromArgb(255, 99, 132);
+    public static readonly System.Drawing.Color Orange = System.Drawing.Color.FromArgb(255, 159, 64);
+    public static readonly System.Drawing.Color Yellow = System.Drawing.Color.FromArgb(255, 205, 86);
+    public static readonly System.Drawing.Color Green = System.Drawing.Color.FromArgb(75, 192, 192);
+    public static readonly System.Drawing.Color Blue = System.Drawing.Color.FromArgb(54, 162, 235);
+    public static readonly System.Drawing.Color Purple = System.Drawing.Color.FromArgb(153, 102, 255);
+    public static readonly System.Drawing.Color Grey = System.Drawing.Color.FromArgb(201, 203, 207);
+}
+
+public static class BitChartDemoUtils
+{
+    public static readonly Random _rng = new();
+
+    public static IReadOnlyList<string> Months { get; } = new ReadOnlyCollection<string>(
+    [
+        ""January"", ""February"", ""March"", ""April"", ""May"", ""June"", ""July"", ""August"", ""September"", ""October"", ""November"", ""December""
+    ]);
+
+    private static int RandomScalingFactorThreadUnsafe(int min, int max) => _rng.Next(min, max);
+
+    public static int RandomScalingFactor()
+    {
+        lock (_rng)
+        {
+            return RandomScalingFactorThreadUnsafe(0, 100);
+        }
+    }
+
+    public static IEnumerable<int> RandomScalingFactor(int count, int min = 0, int max = 100)
+    {
+        int[] factors = new int[count];
+        lock (_rng)
+        {
+            for (int i = 0; i < count; i++)
+            {
+                factors[i] = RandomScalingFactorThreadUnsafe(min, max);
+            }
+        }
+
+        return factors;
+    }
+
+    public static IEnumerable<DateTime> GetNextDays(int count)
+    {
+        DateTime now = DateTime.Now;
+        DateTime[] factors = new DateTime[count];
+        for (int i = 0; i < factors.Length; i++)
+        {
+            factors[i] = now.AddDays(i);
+        }
+
+        return factors;
+    }
+
+    public static List<BitChartPoint> CreateRandomPoints(int count)
+    {
+        List<BitChartPoint> points = new();
+
+        for (int i = 0; i < count; i++)
+        {
+            double x = RandomScalingFactor();
+            double y = RandomScalingFactor();
+
+            points.Add(new BitChartPoint(x, y));
+        }
+
+        return points;
+    }
+}
+
+public static class IListExtensions
+{
+    public static void AddRange<T>(this IList<T> list, IEnumerable<T> items)
+    {
+        if (list == null)
+            throw new ArgumentNullException(nameof(list));
+
+        if (items == null)
+            throw new ArgumentNullException(nameof(items));
+
+        if (list is List<T> asList)
+        {
+            asList.AddRange(items);
+        }
+        else
+        {
+            foreach (T item in items)
+            {
+                list.Add(item);
+            }
+        }
+    }
+}";
+}
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartStackedBarDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartStackedBarDemo.razor.cs
index 41631185d2..381c1f1165 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartStackedBarDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartStackedBarDemo.razor.cs
@@ -26,20 +26,28 @@ protected override void OnInitialized()
                 },
                 Scales = new BitChartBarScales
                 {
-                    XAxes = new List<BitChartCartesianAxis>
-                    {
+                    XAxes =
+                    [
                         new BitChartBarCategoryAxis
                         {
-                            Stacked = true
+                            Stacked = true,
+                            GridLines = new BitChartGridLines
+                            {
+                                Color = "gray"
+                            }
                         }
-                    },
-                    YAxes = new List<BitChartCartesianAxis>
-                    {
+                    ],
+                    YAxes =
+                    [
                         new BitChartBarLinearCartesianAxis
                         {
-                            Stacked = true
+                            Stacked = true,
+                            GridLines = new BitChartGridLines
+                            {
+                                Color = "gray"
+                            }
                         }
-                    }
+                    ]
                 }
             }
         };
@@ -98,20 +106,28 @@ protected override void OnInitialized()
             },
             Scales = new BitChartBarScales
             {
-                XAxes = new List<BitChartCartesianAxis>
-                {
+                XAxes =
+                [
                     new BitChartBarCategoryAxis
                     {
-                        Stacked = true
+                        Stacked = true,
+                        GridLines = new BitChartGridLines
+                        {
+                            Color = ""gray""
+                        }
                     }
-                },
-                YAxes = new List<BitChartCartesianAxis>
-                {
+                ],
+                YAxes =
+                [
                     new BitChartBarLinearCartesianAxis
                     {
-                        Stacked = true
+                        Stacked = true,
+                        GridLines = new BitChartGridLines
+                        {
+                            Color = ""gray""
+                        }
                     }
-                }
+                ]
             }
         }
     };
@@ -143,10 +159,10 @@ protected override void OnInitialized()
 
 public static class BitChartDemoColors
 {
-    private static readonly Lazy<IReadOnlyList<System.Drawing.Color>> _all = new Lazy<IReadOnlyList<System.Drawing.Color>>(() => new System.Drawing.Color[7]
-    {
-                Red, Orange, Yellow, Green, Blue, Purple, Grey
-    });
+    private static readonly Lazy<IReadOnlyList<System.Drawing.Color>> _all = new(() =>
+    [
+        Red, Orange, Yellow, Green, Blue, Purple, Grey
+    ]);
 
     public static IReadOnlyList<System.Drawing.Color> All => _all.Value;
 
@@ -161,12 +177,12 @@ public static class BitChartDemoColors
 
 public static class BitChartDemoUtils
 {
-    public static readonly Random _rng = new Random();
+    public static readonly Random _rng = new();
 
-    public static IReadOnlyList<string> Months { get; } = new ReadOnlyCollection<string>(new[]
-    {
-            ""January"", ""February"", ""March"", ""April"", ""May"", ""June"", ""July"", ""August"", ""September"", ""October"", ""November"", ""December""
-    });
+    public static IReadOnlyList<string> Months { get; } = new ReadOnlyCollection<string>(
+    [
+        ""January"", ""February"", ""March"", ""April"", ""May"", ""June"", ""July"", ""August"", ""September"", ""October"", ""November"", ""December""
+    ]);
 
     private static int RandomScalingFactorThreadUnsafe(int min, int max) => _rng.Next(min, max);
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartTimeDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartTimeDemo.razor.cs
index 050fcdd8b7..de9aa6bd1f 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartTimeDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/_BitChartTimeDemo.razor.cs
@@ -31,8 +31,8 @@ protected override void OnInitialized()
                 },
                 Scales = new BitChartScales
                 {
-                    XAxes = new List<BitChartCartesianAxis>
-                    {
+                    XAxes =
+                    [
                         new BitChartTimeAxis
                         {
                             ScaleLabel = new BitChartScaleLabel
@@ -43,18 +43,26 @@ protected override void OnInitialized()
                             {
                                 TooltipFormat = "dd MMM HH:mm"
                             },
+                            GridLines = new BitChartGridLines
+                            {
+                                Color = "gray"
+                            }
                         }
-                    },
-                    YAxes = new List<BitChartCartesianAxis>
-                    {
+                    ],
+                    YAxes =
+                    [
                         new BitChartLinearCartesianAxis
                         {
                             ScaleLabel = new BitChartScaleLabel
                             {
                                 LabelString = "Value"
+                            },
+                            GridLines = new BitChartGridLines
+                            {
+                                Color = "gray"
                             }
                         }
-                    }
+                    ]
                 }
             }
         };
@@ -197,13 +205,11 @@ private void RemoveData()
     private readonly string razorCode = @"
 <BitChart Config=""_config"" IsDateAdapterRequired=""true"" @ref=""_chart"" />
 
-<div>
-    <BitButton OnClick=""RandomizeData"">Randomize Data</BitButton>
-    <BitButton OnClick=""AddDataset"">Add Dataset</BitButton>
-    <BitButton OnClick=""RemoveDataset"">Remove Dataset</BitButton>
-    <BitButton OnClick=""AddData"">Add Data</BitButton>
-    <BitButton OnClick=""RemoveData"">Remove Data</BitButton>
-</div>";
+<BitButton OnClick=""RandomizeData"">Randomize Data</BitButton>
+<BitButton OnClick=""AddDataset"">Add Dataset</BitButton>
+<BitButton OnClick=""RemoveDataset"">Remove Dataset</BitButton>
+<BitButton OnClick=""AddData"">Add Data</BitButton>
+<BitButton OnClick=""RemoveData"">Remove Data</BitButton>";
     private readonly string csharpCode = @"
 private const int INITAL_COUNT = 5;
 
@@ -221,7 +227,7 @@ protected override void OnInitialized()
             Title = new BitChartOptionsTitle
             {
                 Display = true,
-                Text = ""ChartJs.Blazor Time Scale Chart""
+                Text = ""BitChart Time Scale Chart""
             },
             Tooltips = new BitChartTooltips
             {
@@ -235,8 +241,8 @@ protected override void OnInitialized()
             },
             Scales = new BitChartScales
             {
-                XAxes = new List<BitChartCartesianAxis>
-                {
+                XAxes =
+                [
                     new BitChartTimeAxis
                     {
                         ScaleLabel = new BitChartScaleLabel
@@ -245,20 +251,28 @@ protected override void OnInitialized()
                         },
                         Time = new BitChartTimeOptions
                         {
-                            TooltipFormat = ""ll HH:mm""
+                            TooltipFormat = ""dd MMM HH:mm""
                         },
+                        GridLines = new BitChartGridLines
+                        {
+                            Color = ""gray""
+                        }
                     }
-                },
-                YAxes = new List<BitChartCartesianAxis>
-                {
+                ],
+                YAxes =
+                [
                     new BitChartLinearCartesianAxis
                     {
                         ScaleLabel = new BitChartScaleLabel
                         {
                             LabelString = ""Value""
+                        },
+                        GridLines = new BitChartGridLines
+                        {
+                            Color = ""gray""
                         }
                     }
-                }
+                ]
             }
         }
     };
@@ -398,10 +412,10 @@ private void RemoveData()
 
 public static class BitChartDemoColors
 {
-    private static readonly Lazy<IReadOnlyList<System.Drawing.Color>> _all = new Lazy<IReadOnlyList<System.Drawing.Color>>(() => new System.Drawing.Color[7]
-    {
-                Red, Orange, Yellow, Green, Blue, Purple, Grey
-    });
+    private static readonly Lazy<IReadOnlyList<System.Drawing.Color>> _all = new(() =>
+    [
+        Red, Orange, Yellow, Green, Blue, Purple, Grey
+    ]);
 
     public static IReadOnlyList<System.Drawing.Color> All => _all.Value;
 
@@ -416,12 +430,12 @@ public static class BitChartDemoColors
 
 public static class BitChartDemoUtils
 {
-    public static readonly Random _rng = new Random();
+    public static readonly Random _rng = new();
 
-    public static IReadOnlyList<string> Months { get; } = new ReadOnlyCollection<string>(new[]
-    {
-            ""January"", ""February"", ""March"", ""April"", ""May"", ""June"", ""July"", ""August"", ""September"", ""October"", ""November"", ""December""
-    });
+    public static IReadOnlyList<string> Months { get; } = new ReadOnlyCollection<string>(
+    [
+        ""January"", ""February"", ""March"", ""April"", ""May"", ""June"", ""July"", ""August"", ""September"", ""October"", ""November"", ""December""
+    ]);
 
     private static int RandomScalingFactorThreadUnsafe(int min, int max) => _rng.Next(min, max);
 

From 92b49ac8a957d14233fd4788b20c00ed07100b44 Mon Sep 17 00:00:00 2001
From: Mohammad Aminsafaei <m.aminsafaei@outlook.com>
Date: Wed, 4 Sep 2024 23:12:30 +0330
Subject: [PATCH 14/38] fix(blazorui): resolve display issue of BitDropMenu
 #8500 (#8501)

---
 .../Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.scss      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.scss b/src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.scss
index 77c709462e..21785b6385 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.scss
@@ -1,11 +1,11 @@
 @import "../../../Styles/functions.scss";
 
 .bit-drm {
-    display: flex;
     gap: spacing(1);
     cursor: pointer;
     width: fit-content;
     align-items: center;
+    display: inline-flex;
     outline: transparent;
     text-decoration: none;
     box-sizing: border-box;

From e9a634d3bcbd2ee9085a8fa2bc50d68a0a35794b Mon Sep 17 00:00:00 2001
From: Saleh Yusefnejad <msynk@outlook.com>
Date: Wed, 4 Sep 2024 23:36:57 +0330
Subject: [PATCH 15/38] feat(blazorui): improve BitDropMenu demo page #8503
 (#8505)

---
 .../Navs/DropMenu/BitDropMenuDemo.razor       | 44 +++++-------
 .../DropMenu/BitDropMenuDemo.razor.samples.cs | 70 +++++++++----------
 .../Navs/DropMenu/BitDropMenuDemo.razor.scss  | 16 ++---
 3 files changed, 59 insertions(+), 71 deletions(-)

diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor
index 2c73aa6d87..55d275a42e 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor
@@ -17,9 +17,7 @@
                     <BitToggle>Toggle me</BitToggle>
                 </BitStack>
             </BitDropMenu>
-
             <br />
-
             <BitDropMenu Text="Disabled" IsEnabled="false">
                 <BitStack Gap="1rem" Style="padding:0.5rem">
                     <BitText Typography="BitTypography.Subtitle1">This is the content</BitText>
@@ -27,9 +25,7 @@
                     <BitToggle>Toggle me</BitToggle>
                 </BitStack>
             </BitDropMenu>
-
             <br />
-
             <BitDropMenu Text="Transparent" Transparent>
                 <BitStack Gap="1rem" Style="padding:0.5rem">
                     <BitText Typography="BitTypography.Subtitle1">This is the content</BitText>
@@ -42,17 +38,14 @@
 
     <ComponentExampleBox Title="Icon" RazorCode="@example2RazorCode" Id="example2">
         <ExamplePreview>
-            <div>Managing drop menu icons.</div>
-
-            <BitDropMenu Text="Add Icon" IconName="@BitIconName.Emoji2">
+            <div>Customizing the drop menu icons.</div><br />
+            <BitDropMenu Text="IconName" IconName="@BitIconName.Emoji2">
                 <BitStack Gap="1rem" Style="padding:0.5rem">
                     <BitText Typography="BitTypography.Subtitle1">This is the content</BitText>
                 </BitStack>
             </BitDropMenu>
-
-            <br />
-
-            <BitDropMenu Text="Custom ChevronDownIcon" ChevronDownIcon="@BitIconName.OpenInNewTab">
+            <br /><br />
+            <BitDropMenu Text="ChevronDownIcon" ChevronDownIcon="@BitIconName.DoubleChevronDown">
                 <BitStack Gap="1rem" Style="padding:0.5rem">
                     <BitText Typography="BitTypography.Subtitle1">This is the content</BitText>
                 </BitStack>
@@ -60,13 +53,12 @@
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="Templates" RazorCode="@example3RazorCode" Id="example3">
+    <ComponentExampleBox Title="Template" RazorCode="@example3RazorCode" Id="example3">
         <ExamplePreview>
-            <div>Here are some examples of customizing the drop menu content.</div>
-
+            <div>Here is an example of customizing the drop menu.</div><br />
             <BitDropMenu Text="Add Icon" IconName="@BitIconName.Emoji2">
                 <Template>
-                    <div style="display:flex;gap:10px;"
+                    <div style="display:flex;gap:10px;">
                         <BitIcon IconName="@BitIconName.Airplane" Color="BitColor.Tertiary" />
                         <span>A template</span>
                         <BitRippleLoading CustomSize="20" Color="BitColor.Tertiary" />
@@ -83,9 +75,7 @@
 
     <ComponentExampleBox Title="Events" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
         <ExamplePreview>
-            <div>
-                Managing drop menu click event (OnClick).
-            </div>
+            <div>Utilizing the drop menu OnClick event:</div><br />
             <BitDropMenu Text="@($"Click me ({clickCounter})")" OnClick="() => clickCounter++">
                 <BitStack Gap="1rem" Style="padding:0.5rem">
                     <BitText Typography="BitTypography.Subtitle1">This is the content</BitText>
@@ -96,27 +86,25 @@
 
     <ComponentExampleBox Title="Style & Class" RazorCode="@example5RazorCode" Id="example5">
         <ExamplePreview>
-            <div>Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.</div>
+            <div>Further customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.</div>
             <br /><br />
-            <div>Component's Style & Class:</div>
-            <br />
-            <div class="example-content">
+            <div>Component's Style & Class:</div><br />
+            <div>
                 <BitDropMenu Text="Styled Drop menu" Style="background-color: transparent; border-color: blueviolet; color: blueviolet;">
                     <BitStack Gap="1rem" Style="padding:0.5rem">
                         <BitText Typography="BitTypography.Subtitle1">This is the content</BitText>
                     </BitStack>
                 </BitDropMenu>
-
+                <br />
                 <BitDropMenu Text="Classed Drop menu" Class="custom-class">
                     <BitStack Gap="1rem" Style="padding:0.5rem">
                         <BitText Typography="BitTypography.Subtitle1">This is the content</BitText>
                     </BitStack>
                 </BitDropMenu>
             </div>
-            <br /><br /><br />
-            <div><b>Styles</b> & <b>Classes</b>:</div>
-            <br />
-            <div class="example-content">
+            <br /><br /><br /><br />
+            <div><b>Styles</b> & <b>Classes</b>:</div><br />
+            <div>
                 <BitDropMenu Text="Styled Drop menu"
                              Styles="@(new() { Root = "background-color: peachpuff; border-color: peachpuff; min-width: 6rem;",
                                                Text = "color: tomato; font-weight: bold;",
@@ -125,7 +113,7 @@
                         <BitText Typography="BitTypography.Subtitle1">This is the content</BitText>
                     </BitStack>
                 </BitDropMenu>
-
+                <br />
                 <BitDropMenu Text="Classed Drop menu"
                              Classes="@(new() { Root = "custom-root",
                                                 Text = "custom-text",
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor.samples.cs
index a257e2ff9c..b4f1b0847e 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor.samples.cs
@@ -28,13 +28,13 @@ public partial class BitDropMenuDemo
 </BitDropMenu>";
 
     private readonly string example2RazorCode = @"
-<BitDropMenu Text=""Add Icon"" IconName=""@BitIconName.Emoji2"">
+<BitDropMenu Text=""IconName"" IconName=""@BitIconName.Emoji2"">
     <BitStack Gap=""1rem"" Style=""padding:0.5rem"">
         <BitText Typography=""BitTypography.Subtitle1"">This is the content</BitText>
     </BitStack>
 </BitDropMenu>
 
-<BitDropMenu Text=""Custom ChevronDownIcon"" ChevronDownIcon=""@BitIconName.OpenInNewTab"">
+<BitDropMenu Text=""ChevronDownIcon"" ChevronDownIcon=""@BitIconName.DoubleChevronDown"">
     <BitStack Gap=""1rem"" Style=""padding:0.5rem"">
         <BitText Typography=""BitTypography.Subtitle1"">This is the content</BitText>
     </BitStack>
@@ -43,7 +43,7 @@ public partial class BitDropMenuDemo
     private readonly string example3RazorCode = @"
 <BitDropMenu Text=""Add Icon"" IconName=""@BitIconName.Emoji2"">
     <Template>
-        <div style=""display:flex;gap:10px;""
+        <div style=""display:flex;gap:10px;"">
             <BitIcon IconName=""@BitIconName.Airplane"" Color=""BitColor.Tertiary"" />
             <span>A template</span>
             <BitRippleLoading CustomSize=""20"" Color=""BitColor.Tertiary"" />
@@ -67,38 +67,38 @@ public partial class BitDropMenuDemo
 
     private readonly string example5RazorCode = @"
 <style>
-.custom-class {
-    border-radius: 1rem;
-    border-color: blueviolet;
-    transition: background-color 1s;
-    background: linear-gradient(90deg, magenta, transparent) blue;
-}
-
-.custom-class:hover {
-    border-color: magenta;
-    background-color: magenta;
-}
-
-.custom-root {
-    color: aqua;
-    min-width: 7.2rem;
-    font-weight: bold;
-    border-radius: 1rem;
-    border-color: aqua;
-    box-shadow: aqua 0 0 0.5rem;
-}
-
-.custom-root:hover {
-    background-color: gray;
-}
-
-.custom-text {
-    text-shadow: tomato 0 0 0.5rem;
-}
-
-.custom-opened {
-    color: green;
-}
+    .custom-class {
+        border-radius: 1rem;
+        border-color: blueviolet;
+        transition: background-color 1s;
+        background: linear-gradient(90deg, magenta, transparent) blue;
+    }
+
+    .custom-class:hover {
+        border-color: magenta;
+        background-color: magenta;
+    }
+
+    .custom-root {
+        color: aqua;
+        min-width: 7.2rem;
+        font-weight: bold;
+        border-color: aqua;
+        border-radius: 1rem;
+        box-shadow: aqua 0 0 0.5rem;
+    }
+
+    .custom-root:hover {
+        background-color: gray;
+    }
+
+    .custom-text {
+        text-shadow: tomato 0 0 0.5rem;
+    }
+
+    .custom-opened {
+        color: green;
+    }
 </style>
 
 <BitDropMenu Text=""Styled Drop menu"" Style=""background-color: transparent; border-color: blueviolet; color: blueviolet;"">
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor.scss
index 69aa805b8c..0cfcf63ee0 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor.scss
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor.scss
@@ -4,24 +4,24 @@
         border-color: blueviolet;
         transition: background-color 1s;
         background: linear-gradient(90deg, magenta, transparent) blue;
-    }
 
-    .custom-class:hover {
-        border-color: magenta;
-        background-color: magenta;
+        &:hover {
+            border-color: magenta;
+            background-color: magenta;
+        }
     }
 
     .custom-root {
         color: aqua;
         min-width: 7.2rem;
         font-weight: bold;
-        border-radius: 1rem;
         border-color: aqua;
+        border-radius: 1rem;
         box-shadow: aqua 0 0 0.5rem;
-    }
 
-    .custom-root:hover {
-        background-color: gray;
+        &:hover {
+            background-color: gray;
+        }
     }
 
     .custom-text {

From 3d98b6bdae959e3bec9e7d784cfa685932e61c25 Mon Sep 17 00:00:00 2001
From: Yaser Moradi <ysmoradi@outlook.com>
Date: Thu, 5 Sep 2024 06:32:05 +0200
Subject: [PATCH 16/38] feat(templates): rename Auto Blazor mode to BlazorAuto
 in Boilerplate #8508 (#8509)

---
 .github/workflows/admin-sample.cd.yml                    | 2 +-
 .github/workflows/todo-sample.cd.yml                     | 2 +-
 .../Boilerplate.Client.Core/Services/AppRenderMode.cs    | 4 ++--
 .../src/Client/Boilerplate.Client.Maui/App.xaml.cs       | 9 ++++++++-
 4 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/.github/workflows/admin-sample.cd.yml b/.github/workflows/admin-sample.cd.yml
index 7ab207964d..5a1aa55e40 100644
--- a/.github/workflows/admin-sample.cd.yml
+++ b/.github/workflows/admin-sample.cd.yml
@@ -55,7 +55,7 @@ jobs:
 
     - name: Configure app render mode
       run: |
-          sed -i 's/Auto;/BlazorWebAssembly;/g' AdminPanel/src/Client/AdminPanel.Client.Core/Services/AppRenderMode.cs
+          sed -i 's/BlazorAuto;/BlazorWebAssembly;/g' AdminPanel/src/Client/AdminPanel.Client.Core/Services/AppRenderMode.cs
       
     - name: Generate CSS/JS files
       run: dotnet build AdminPanel/src/Client/AdminPanel.Client.Core/AdminPanel.Client.Core.csproj -t:BeforeBuildTasks -p:Version="${{ vars.APPLICATION_DISPLAY_VERSION}}" --no-restore -c Release
diff --git a/.github/workflows/todo-sample.cd.yml b/.github/workflows/todo-sample.cd.yml
index 04d7a562d3..84d1448da8 100644
--- a/.github/workflows/todo-sample.cd.yml
+++ b/.github/workflows/todo-sample.cd.yml
@@ -54,7 +54,7 @@ jobs:
     - name: Configure app render mode
       run: |
           sed -i 's/public static readonly bool PrerenderEnabled = false;/public static readonly bool PrerenderEnabled = true;/g' TodoSample/src/Client/TodoSample.Client.Core/Services/AppRenderMode.cs
-          sed -i 's/Auto;/BlazorWebAssembly;/g' TodoSample/src/Client/TodoSample.Client.Core/Services/AppRenderMode.cs
+          sed -i 's/BlazorAuto;/BlazorWebAssembly;/g' TodoSample/src/Client/TodoSample.Client.Core/Services/AppRenderMode.cs
 
     - name: Changes for static-todo.bitplatform.dev - Part 1
       run:  sed -i 's/http:\/\/localhost:4030/https:\/\/static-todo.bitplatform.dev/g' TodoSample/src/Server/TodoSample.Server.Web/Program.Middlewares.cs
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/AppRenderMode.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/AppRenderMode.cs
index a30f825a69..d6a4a87b8e 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/AppRenderMode.cs
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/AppRenderMode.cs
@@ -8,7 +8,7 @@ public static class AppRenderMode
     public static readonly bool PrerenderEnabled = false;
 
     // https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes#render-modes
-    public static IComponentRenderMode Auto { get; } = new InteractiveAutoRenderMode(PrerenderEnabled);
+    public static IComponentRenderMode BlazorAuto { get; } = new InteractiveAutoRenderMode(PrerenderEnabled);
     public static IComponentRenderMode BlazorWebAssembly { get; } = new InteractiveWebAssemblyRenderMode(PrerenderEnabled);
     public static IComponentRenderMode BlazorServer { get; } = new InteractiveServerRenderMode(PrerenderEnabled);
     public static IComponentRenderMode? StaticSsr { get; } = null /*Pre-rendering without interactivity*/;
@@ -17,7 +17,7 @@ public static class AppRenderMode
     public static IComponentRenderMode? Current =>
         AppEnvironment.IsDev()
         ? BlazorServer // For better development experience.
-        : Auto; // For better production experience.
+        : BlazorAuto; // For better production experience.
 
     /// <summary>
     /// To enable/disable pwa support, navigate to Directory.Build.props and modify the PwaEnabled flag.
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/App.xaml.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/App.xaml.cs
index 51ddaa1f57..2e92d69f44 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/App.xaml.cs
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/App.xaml.cs
@@ -4,10 +4,17 @@ namespace Boilerplate.Client.Maui;
 
 public partial class App
 {
+    private readonly Page mainPage;
+
     public App(MainPage mainPage)
     {
         InitializeComponent();
 
-        MainPage = new NavigationPage(mainPage);
+        this.mainPage = new NavigationPage(mainPage);
+    }
+
+    protected override Window CreateWindow(IActivationState? activationState)
+    {
+        return new Window(mainPage) { };
     }
 }

From aee4ddd766eb700db18a8d17661d15886c4d3c71 Mon Sep 17 00:00:00 2001
From: Saleh Yusefnejad <msynk@outlook.com>
Date: Thu, 5 Sep 2024 11:50:15 +0330
Subject: [PATCH 17/38] feat(blazorui): improve BitDropMenu #8504 (#8506)

---
 .../Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.razor.cs  | 2 +-
 .../Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.scss      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

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 236ab5d336..38ec31b2aa 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.razor.cs
@@ -141,7 +141,7 @@ await _js.ToggleCallout(_dotnetObj,
                                 0,
                                 "",
                                 "",
-                                true,
+                                false,
                                 RootElementClass);
     }
 }
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.scss b/src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.scss
index 21785b6385..06e58cd927 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.scss
@@ -15,7 +15,7 @@
     font-weight: $tg-font-weight;
     background-color: $clr-bg-pri;
     border-radius: $shp-border-radius;
-    padding: spacing(0.75) spacing(1.5);
+    padding: spacing(1.0) spacing(1.5);
 
     @media (hover: hover) {
         &:hover {

From 231a05a90a128421fb0d3e9c7d737ae665b0fac7 Mon Sep 17 00:00:00 2001
From: Mohammad Aminsafaei <m.aminsafaei@outlook.com>
Date: Thu, 5 Sep 2024 17:58:50 +0330
Subject: [PATCH 18/38] fix(blazorui): resolve position issues of AM/PM buttons
 in RTL mode of TimePicker in BitDatePicker #8502 (#8510)

---
 .../Inputs/_Pickers/DatePicker/BitDatePicker.scss     | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DatePicker/BitDatePicker.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DatePicker/BitDatePicker.scss
index cf02ee6606..6a63a2e750 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DatePicker/BitDatePicker.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DatePicker/BitDatePicker.scss
@@ -50,6 +50,13 @@
             border-color: $clr-err;
         }
     }
+
+    &.bit-rtl {
+        .bit-dtp-am-pm {
+            order: -1;
+            direction: rtl;
+        }
+    }
 }
 
 .bit-dtp-lbl {
@@ -694,9 +701,9 @@
 .bit-dtp-am-pm {
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
-    margin-left: spacing(2);
     padding: spacing(1.6) 0;
+    justify-content: space-between;
+    margin-inline-start: spacing(2);
 }
 
 .bit-dtp-tin {

From 432b8cfe234468d08974944b52b2fc350ca37dc5 Mon Sep 17 00:00:00 2001
From: Mohammad Aminsafaei <m.aminsafaei@outlook.com>
Date: Thu, 5 Sep 2024 20:47:12 +0330
Subject: [PATCH 19/38] fix(blazorui): resolve animation issue in
 BitDateRangePicker #8513 (#8517)

---
 .../DateRangePicker/BitDateRangePicker.scss   | 21 ++++++++-----------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DateRangePicker/BitDateRangePicker.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DateRangePicker/BitDateRangePicker.scss
index 1135ebb837..d936918449 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DateRangePicker/BitDateRangePicker.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DateRangePicker/BitDateRangePicker.scss
@@ -170,9 +170,13 @@
     box-sizing: border-box;
     z-index: $zindex-callout;
     font-size: spacing(1.75);
+    animation-fill-mode: both;
+    animation-duration: 0.367s;
+    font-family: $tg-font-family;
     box-shadow: $box-shadow-callout;
     border-radius: $shp-border-radius;
-    font-family: $tg-font-family;
+    animation-name: bit-fade-show, bit-slide-down;
+    animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
 }
 
 .bit-dtrp-rsp {
@@ -274,10 +278,6 @@
     outline: none;
     box-shadow: none;
     box-sizing: border-box;
-    animation-duration: 167ms;
-    animation-fill-mode: both;
-    animation-name: bit-fade-in, bit-slide-down;
-    animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
 }
 
 .bit-dtrp-sdt {
@@ -326,14 +326,14 @@
     border: none;
     aspect-ratio: 1;
     font-weight: 400;
+    color: $clr-fg-pri;
     position: relative;
     text-align: center;
     font-size: spacing(1.5);
     line-height: spacing(3.5);
     animation-fill-mode: both;
     animation-duration: 0.267s;
-    animation-name: bit-fade-in;
-    color: $clr-fg-pri;
+    animation-name: bit-fade-show;
     animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
 }
 
@@ -480,6 +480,7 @@
     overflow: hidden;
     font-weight: 600;
     text-align: start;
+    color: $clr-fg-pri;
     position: relative;
     align-items: center;
     white-space: nowrap;
@@ -489,13 +490,8 @@
     padding: 0 spacing(1.25);
     font-size: spacing(1.75);
     line-height: spacing(3.5);
-    animation-fill-mode: both;
-    animation-duration: 0.267s;
-    animation-name: bit-fade-show;
     background-color: transparent;
-    color: $clr-fg-pri;
     border-radius: $shp-border-radius;
-    animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
 }
 
 .bit-dtrp-ptb {
@@ -864,6 +860,7 @@
     .bit-dtrp-cal {
         display: block;
         z-index: unset;
+        animation: none;
         position: relative;
     }
 }
\ No newline at end of file

From 2f092168df9bb306103466e65ba9f265fedb72a4 Mon Sep 17 00:00:00 2001
From: Saleh Yusefnejad <msynk@outlook.com>
Date: Thu, 5 Sep 2024 21:23:09 +0330
Subject: [PATCH 20/38] feat(templates): apply new design of signup page #8404
 (#8514)

---
 .../Components/Layout/MainLayout.razor.scss   |   6 +-
 .../Pages/Identity/SignUpPage.razor           | 115 ++++++++++--------
 .../wwwroot/images/icons/github-icon.svg      |   4 +-
 .../wwwroot/images/icons/google-icon.svg      |   3 +
 .../wwwroot/images/icons/x-icon.svg           |   3 +
 .../Shared/Dtos/Identity/SignUpRequestDto.cs  |   6 +-
 .../src/Shared/Resources/AppStrings.fa.resx   |   3 +
 .../src/Shared/Resources/AppStrings.fr.resx   |   5 +-
 .../src/Shared/Resources/AppStrings.resx      |   5 +-
 9 files changed, 91 insertions(+), 59 deletions(-)
 create mode 100644 src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/icons/google-icon.svg
 create mode 100644 src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/icons/x-icon.svg

diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/MainLayout.razor.scss b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/MainLayout.razor.scss
index 569ff92786..812df4c04a 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/MainLayout.razor.scss
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/MainLayout.razor.scss
@@ -70,14 +70,14 @@ main {
     .form {
         width: 100%;
         display: flex;
+        padding: 2rem;
         position: relative;
         text-align: center;
         align-items: center;
-        max-width: rem2(504px);
+        max-width: rem2(450px);
         justify-content: center;
         flex-flow: column nowrap;
         border-radius: rem2(4px);
-        padding: rem2(48px) rem2(16px);
         box-shadow: $bit-box-shadow-callout;
         background-color: $bit-color-background-primary;
     }
@@ -122,7 +122,7 @@ main {
     }
 
     .form-submit-button {
-        margin-top: rem2(20px);
+        width: 100%;
         margin-bottom: rem2(10px);
     }
 
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignUpPage.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignUpPage.razor
index f31b7fe4c3..e8582bcd10 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignUpPage.razor
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignUpPage.razor
@@ -19,51 +19,68 @@
             @Localizer[nameof(AppStrings.SignUp)]
         </BitText>
         <br /><br />
-        <BitButton Style="width:300px"
-                   IsLoading="isWaiting"
-                   Color="BitColor.Tertiary"
-                   Variant="BitVariant.Outline"
-                   ButtonType="BitButtonType.Button"
-                   OnClick="WrapHandled(GoogleSignUp)">
-            @Localizer[AppStrings.GoogleSignUpButtonText]
-        </BitButton>
-        <br />
-        <BitButton Style="width:300px"
-                   IsLoading="isWaiting"
-                   Color="BitColor.Tertiary"
-                   Variant="BitVariant.Outline"
-                   ButtonType="BitButtonType.Button"
-                   OnClick="WrapHandled(GitHubSignUp)">
-            @Localizer[AppStrings.GitHubSignUpButtonText]
-        </BitButton>
+        <BitStack Horizontal Gap="1rem">
+            <BitButton IsLoading="isWaiting"
+                       Color="BitColor.Tertiary"
+                       Variant="BitVariant.Text"
+                       ButtonType="BitButtonType.Button"
+                       OnClick="WrapHandled(GoogleSignUp)"
+                       Title="@Localizer[AppStrings.GoogleSignUpButtonText]">
+                <svg width="32" height="32" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M33.2337 15.4497C33.1503 14.5997 32.4337 13.9663 31.5837 13.9663H19.0003C18.0837 13.9663 17.3337 14.7163 17.3337 15.633V18.483C17.3337 19.3997 18.0837 20.1497 19.0003 20.1497H26.517C26.3337 21.683 25.3337 23.9997 23.117 25.5497C21.7003 26.533 19.817 27.2164 17.3337 27.2164C17.217 27.2164 17.117 27.2163 17.0003 27.1997C12.7503 27.0663 9.15033 24.2164 7.85033 20.2997C7.50033 19.2497 7.30033 18.1497 7.30033 16.9997C7.30033 15.8497 7.50033 14.733 7.83366 13.6997C7.93366 13.3997 8.05033 13.0997 8.18366 12.7997C9.717 9.34969 13.067 6.91635 17.0003 6.79968C17.1003 6.78302 17.217 6.783 17.3337 6.783C19.717 6.783 21.5003 7.56632 22.7503 8.43298C23.4003 8.88298 24.267 8.78299 24.8337 8.23299L27.1503 5.96635C27.8837 5.24968 27.817 4.03298 26.9837 3.43298C24.3337 1.48298 21.1003 0.333008 17.3337 0.333008C17.217 0.333008 17.117 0.333024 17.0003 0.349691C10.617 0.466357 5.13366 4.16636 2.45033 9.51636C1.31699 11.783 0.666992 14.3163 0.666992 16.9997C0.666992 19.683 1.31699 22.2163 2.45033 24.483H2.467C5.15033 29.833 10.6337 33.533 17.0003 33.6497C17.117 33.6663 17.217 33.6663 17.3337 33.6663C21.8337 33.6663 25.617 32.183 28.367 29.633C31.517 26.7163 33.3337 22.4497 33.3337 17.3663C33.3337 16.6497 33.3003 16.033 33.2337 15.4497Z" fill="#E6E6E6" />
+                </svg>
+            </BitButton>
+
+            <BitButton IsLoading="isWaiting"
+                       Color="BitColor.Tertiary"
+                       Variant="BitVariant.Text"
+                       ButtonType="BitButtonType.Button"
+                       OnClick="WrapHandled(GitHubSignUp)"
+                       Title="@Localizer[AppStrings.GitHubSignUpButtonText]">
+                <svg width="32" height="32" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path fill-rule="evenodd" clip-rule="evenodd" d="M19.9404 0C8.91388 0 0 8.97959 0 20.0886C0 28.9686 5.71143 36.4853 13.6347 39.1457C14.6253 39.3457 14.9882 38.7135 14.9882 38.1816C14.9882 37.7159 14.9555 36.1196 14.9555 34.4563C9.40857 35.6539 8.25347 32.0616 8.25347 32.0616C7.36204 29.7335 6.04122 29.1351 6.04122 29.1351C4.22571 27.9045 6.17347 27.9045 6.17347 27.9045C8.18735 28.0375 9.24408 29.9665 9.24408 29.9665C11.0265 33.0261 13.8988 32.1616 15.0543 31.6294C15.2192 30.3322 15.7478 29.4343 16.309 28.9355C11.8849 28.4698 7.2302 26.7404 7.2302 19.0241C7.2302 16.829 8.02204 15.0331 9.27673 13.6363C9.07878 13.1376 8.38531 11.0751 9.4751 8.31469C9.4751 8.31469 11.1588 7.78245 14.9551 10.3767C16.5804 9.93701 18.2566 9.71331 19.9404 9.71143C21.6241 9.71143 23.3404 9.94449 24.9253 10.3767C28.722 7.78245 30.4057 8.31469 30.4057 8.31469C31.4955 11.0751 30.8016 13.1376 30.6037 13.6363C31.8914 15.0331 32.6506 16.829 32.6506 19.0241C32.6506 26.7404 27.9959 28.4363 23.5388 28.9355C24.2653 29.5673 24.8922 30.7645 24.8922 32.6604C24.8922 35.3543 24.8596 37.5163 24.8596 38.1812C24.8596 38.7135 25.2229 39.3457 26.2131 39.1461C34.1363 36.4849 39.8478 28.9686 39.8478 20.0886C39.8804 8.97959 30.9339 0 19.9404 0Z" fill="#E6E6E6" />
+                </svg>
+            </BitButton>
+
+            <BitButton IsLoading="isWaiting"
+                       Color="BitColor.Tertiary"
+                       Variant="BitVariant.Text"
+                       ButtonType="BitButtonType.Button"
+                       OnClick="WrapHandled(TwitterSignUp)"
+                       Title="@Localizer[AppStrings.TwitterSignUpButtonText]">
+                <svg width="32" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M1.53555 0.799805L12.909 17.3811L0.982422 31.1998H3.52461L14.0355 19.0217L22.3887 31.1998H30.3996L18.498 13.8498L29.7621 0.799805H27.2215L17.373 12.2092L9.54648 0.799805H1.53555Z" fill="#E6E6E6" />
+                </svg>
+            </BitButton>
+        </BitStack>
         <br />
-        <BitButton Style="width:300px"
-                   IsLoading="isWaiting"
-                   Color="BitColor.Tertiary"
-                   Variant="BitVariant.Outline"
-                   ButtonType="BitButtonType.Button"
-                   OnClick="WrapHandled(TwitterSignUp)">
-            @Localizer[AppStrings.TwitterSignUpButtonText]
-        </BitButton>
-        <br /><br />
-        <BitSeparator Style="width:100%">Or</BitSeparator>
+        <BitSeparator Style="width:100%">@Localizer[AppStrings.Or]</BitSeparator>
         <br />
         <EditForm Model="signUpModel" OnValidSubmit="WrapHandled(DoSignUp)">
             <AppDataAnnotationsValidator />
-            <div class="form-input-container">
-                <BitTextField @bind-Value="signUpModel.Email"
-                              Type="BitTextFieldType.Email"
-                              Label="@Localizer[nameof(AppStrings.Email)]"
-                              Placeholder="@Localizer[nameof(AppStrings.EmailPlaceholder)]" />
-                <ValidationMessage For="@(() => signUpModel.Email)" />
-            </div>
-            <div class="form-input-container">
-                <BitTextField @bind-Value="signUpModel.PhoneNumber"
-                              Type="BitTextFieldType.Tel"
-                              Label="@Localizer[nameof(AppStrings.PhoneNumber)]"
-                              Placeholder="@Localizer[nameof(AppStrings.PhoneNumberPlaceholder)]" />
-                <ValidationMessage For="@(() => signUpModel.PhoneNumber)" />
-            </div>
+
+            <BitPivot >
+                <BitPivotItem HeaderText="@Localizer[nameof(AppStrings.Email)]">
+                    <br />
+                    <div class="form-input-container">
+                        <BitTextField @bind-Value="signUpModel.Email"
+                                      Type="BitTextFieldType.Email"
+                                      Label="@Localizer[nameof(AppStrings.Email)]"
+                                      Placeholder="@Localizer[nameof(AppStrings.EmailPlaceholder)]" />
+                        <ValidationMessage For="@(() => signUpModel.Email)" />
+                    </div>
+                </BitPivotItem>
+                <BitPivotItem HeaderText="@Localizer[nameof(AppStrings.PhoneNumber)]">
+                    <br />
+                    <div class="form-input-container">
+                        <BitTextField @bind-Value="signUpModel.PhoneNumber"
+                                      Type="BitTextFieldType.Tel"
+                                      Label="@Localizer[nameof(AppStrings.PhoneNumber)]"
+                                      Placeholder="@Localizer[nameof(AppStrings.PhoneNumberPlaceholder)]" />
+                        <ValidationMessage For="@(() => signUpModel.PhoneNumber)" />
+                    </div>
+                </BitPivotItem>
+            </BitPivot>
             <div class="form-input-container">
                 <BitTextField @bind-Value="signUpModel.Password"
                               CanRevealPassword="true"
@@ -73,14 +90,14 @@
                               Placeholder="@Localizer[nameof(AppStrings.PasswordPlaceholder)]" />
                 <ValidationMessage For="@(() => signUpModel.Password)" />
             </div>
-            <div class="form-input-container">
+            @* <div class="form-input-container">
                 <BitCheckbox Class="form-checkbox" @bind-Value="signUpModel.TermsAccepted">
                     <LabelTemplate>
                         <span>@Localizer[nameof(AppStrings.TermsMessage)]&nbsp<BitLink Href="@Urls.TermsPage">@Localizer[nameof(AppStrings.TermsTitle)]</BitLink></span>
                     </LabelTemplate>
                 </BitCheckbox>
                 <ValidationMessage For="@(() => signUpModel.TermsAccepted)" />
-            </div>
+            </div> *@
 
             @*#if (captcha == "reCaptcha")*@
             <div class="form-input-container">
@@ -94,17 +111,17 @@
                 @Localizer[nameof(AppStrings.SignUp)]
             </BitButton>
             <br /><br />
-            <div>
+            <BitText Typography="BitTypography.Body2">
                 @Localizer[nameof(AppStrings.SignInMessageInSignUp)]
                 <BitLink Href="@Urls.SignInPage">@Localizer[nameof(AppStrings.SignIn)]</BitLink>
-            </div>
-            <br />
-            <div>
-                @Localizer[nameof(AppStrings.ConfirmMessageInSignUp)]
+                @Localizer[nameof(AppStrings.Or)]
                 <BitLink Href="@($"{Urls.ConfirmPage}?email={Uri.EscapeDataString(signUpModel.Email??"")}&phoneNumber={Uri.EscapeDataString(signUpModel.PhoneNumber??"")}")">
                     @Localizer[nameof(AppStrings.Confirm)]
                 </BitLink>
-            </div>
+            </BitText>
+            <BitText Typography="BitTypography.Body2">
+                By signing up, you agree to our <BitLink Href="@Urls.TermsPage">@Localizer[nameof(AppStrings.TermsTitle)]</BitLink>
+            </BitText>
         </EditForm>
     </div>
 </div>
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/icons/github-icon.svg b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/icons/github-icon.svg
index 017e500b46..83c223f849 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/icons/github-icon.svg
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/icons/github-icon.svg
@@ -1,3 +1,3 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill="#777" d="M8.69857 2.10443C7.58096 1.84473 6.41869 1.84473 5.30108 2.10443C4.6556 1.70854 4.1628 1.5266 3.8044 1.4498C3.65143 1.41528 3.49491 1.39901 3.33811 1.40134C3.26677 1.40328 3.19575 1.41185 3.126 1.42694L3.11685 1.42877L3.1132 1.4306H3.11045L3.23571 1.87037L3.11045 1.43151C3.04622 1.44967 2.98674 1.48166 2.9362 1.52526C2.88566 1.56885 2.84527 1.62299 2.81788 1.68386C2.54814 2.28793 2.49676 2.96698 2.67251 3.60477C2.21732 4.15641 1.96926 4.84981 1.97125 5.565C1.97125 6.98489 2.39 7.9394 3.10405 8.55289C3.60417 8.9826 4.21126 9.21117 4.82017 9.34191C4.7196 9.62077 4.694 9.91609 4.71411 10.2178V10.7645C4.342 10.8423 4.08417 10.8176 3.9004 10.7572C3.67091 10.6813 3.49445 10.5287 3.32531 10.3092C3.23689 10.1909 3.1545 10.0683 3.07845 9.94169L3.02634 9.85666C2.96053 9.74723 2.89225 9.63932 2.82154 9.533C2.64783 9.27609 2.39 8.95426 1.97308 8.84454L1.53057 8.72843L1.29834 9.61346L1.74085 9.72957C1.814 9.74786 1.90908 9.81643 2.06543 10.0459C2.12303 10.1309 2.17697 10.2196 2.23914 10.322L2.30131 10.4226C2.38725 10.5616 2.486 10.7152 2.60028 10.8651C2.8316 11.1668 3.14703 11.4713 3.61514 11.6258C3.93514 11.7319 4.29903 11.7575 4.71411 11.6935V13.4004C4.71411 13.5217 4.76228 13.6379 4.84801 13.7237C4.93374 13.8094 5.05001 13.8576 5.17126 13.8576H8.8284C8.94964 13.8576 9.06592 13.8094 9.15165 13.7237C9.23738 13.6379 9.28554 13.5217 9.28554 13.4004V10.1428C9.28554 9.85483 9.27274 9.5906 9.19137 9.34466C9.79754 9.21666 10.4001 8.98809 10.8974 8.55837C11.6106 7.94031 12.0284 6.97666 12.0284 5.54854V5.54763C12.0261 4.83829 11.778 4.15168 11.3262 3.60477C11.5018 2.96727 11.4504 2.28858 11.1809 1.68477C11.1537 1.62383 11.1135 1.56958 11.0631 1.52582C11.0127 1.48207 10.9534 1.44988 10.8892 1.43151L10.7639 1.87037C10.8892 1.43151 10.8883 1.43151 10.8874 1.43151L10.8855 1.4306L10.8819 1.42877L10.8737 1.42694C10.8511 1.42107 10.8282 1.41649 10.8051 1.41323C10.7572 1.40624 10.709 1.40227 10.6606 1.40134C10.5038 1.39903 10.3473 1.41529 10.1943 1.4498C9.83686 1.5266 9.34406 1.70854 8.69857 2.10443Z" />
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.9404 0C8.91388 0 0 8.97959 0 20.0886C0 28.9686 5.71143 36.4853 13.6347 39.1457C14.6253 39.3457 14.9882 38.7135 14.9882 38.1816C14.9882 37.7159 14.9555 36.1196 14.9555 34.4563C9.40857 35.6539 8.25347 32.0616 8.25347 32.0616C7.36204 29.7335 6.04122 29.1351 6.04122 29.1351C4.22571 27.9045 6.17347 27.9045 6.17347 27.9045C8.18735 28.0375 9.24408 29.9665 9.24408 29.9665C11.0265 33.0261 13.8988 32.1616 15.0543 31.6294C15.2192 30.3322 15.7478 29.4343 16.309 28.9355C11.8849 28.4698 7.2302 26.7404 7.2302 19.0241C7.2302 16.829 8.02204 15.0331 9.27673 13.6363C9.07878 13.1376 8.38531 11.0751 9.4751 8.31469C9.4751 8.31469 11.1588 7.78245 14.9551 10.3767C16.5804 9.93701 18.2566 9.71331 19.9404 9.71143C21.6241 9.71143 23.3404 9.94449 24.9253 10.3767C28.722 7.78245 30.4057 8.31469 30.4057 8.31469C31.4955 11.0751 30.8016 13.1376 30.6037 13.6363C31.8914 15.0331 32.6506 16.829 32.6506 19.0241C32.6506 26.7404 27.9959 28.4363 23.5388 28.9355C24.2653 29.5673 24.8922 30.7645 24.8922 32.6604C24.8922 35.3543 24.8596 37.5163 24.8596 38.1812C24.8596 38.7135 25.2229 39.3457 26.2131 39.1461C34.1363 36.4849 39.8478 28.9686 39.8478 20.0886C39.8804 8.97959 30.9339 0 19.9404 0Z" fill="#E6E6E6"/>
 </svg>
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/icons/google-icon.svg b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/icons/google-icon.svg
new file mode 100644
index 0000000000..99870a2b52
--- /dev/null
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/icons/google-icon.svg
@@ -0,0 +1,3 @@
+<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33.2337 15.4497C33.1503 14.5997 32.4337 13.9663 31.5837 13.9663H19.0003C18.0837 13.9663 17.3337 14.7163 17.3337 15.633V18.483C17.3337 19.3997 18.0837 20.1497 19.0003 20.1497H26.517C26.3337 21.683 25.3337 23.9997 23.117 25.5497C21.7003 26.533 19.817 27.2164 17.3337 27.2164C17.217 27.2164 17.117 27.2163 17.0003 27.1997C12.7503 27.0663 9.15033 24.2164 7.85033 20.2997C7.50033 19.2497 7.30033 18.1497 7.30033 16.9997C7.30033 15.8497 7.50033 14.733 7.83366 13.6997C7.93366 13.3997 8.05033 13.0997 8.18366 12.7997C9.717 9.34969 13.067 6.91635 17.0003 6.79968C17.1003 6.78302 17.217 6.783 17.3337 6.783C19.717 6.783 21.5003 7.56632 22.7503 8.43298C23.4003 8.88298 24.267 8.78299 24.8337 8.23299L27.1503 5.96635C27.8837 5.24968 27.817 4.03298 26.9837 3.43298C24.3337 1.48298 21.1003 0.333008 17.3337 0.333008C17.217 0.333008 17.117 0.333024 17.0003 0.349691C10.617 0.466357 5.13366 4.16636 2.45033 9.51636C1.31699 11.783 0.666992 14.3163 0.666992 16.9997C0.666992 19.683 1.31699 22.2163 2.45033 24.483H2.467C5.15033 29.833 10.6337 33.533 17.0003 33.6497C17.117 33.6663 17.217 33.6663 17.3337 33.6663C21.8337 33.6663 25.617 32.183 28.367 29.633C31.517 26.7163 33.3337 22.4497 33.3337 17.3663C33.3337 16.6497 33.3003 16.033 33.2337 15.4497Z" fill="#E6E6E6"/>
+</svg>
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/icons/x-icon.svg b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/icons/x-icon.svg
new file mode 100644
index 0000000000..a8273f4eed
--- /dev/null
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/icons/x-icon.svg
@@ -0,0 +1,3 @@
+<svg width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.53555 0.799805L12.909 17.3811L0.982422 31.1998H3.52461L14.0355 19.0217L22.3887 31.1998H30.3996L18.498 13.8498L29.7621 0.799805H27.2215L17.373 12.2092L9.54648 0.799805H1.53555Z" fill="#E6E6E6"/>
+</svg>
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Dtos/Identity/SignUpRequestDto.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Dtos/Identity/SignUpRequestDto.cs
index 390a721630..094f6108ff 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Dtos/Identity/SignUpRequestDto.cs
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Dtos/Identity/SignUpRequestDto.cs
@@ -16,9 +16,9 @@ public class SignUpRequestDto : IdentityRequestDto
     public string? Password { get; set; }
 
     /// <example>true</example>
-    [Range(typeof(bool), "true", "true", ErrorMessage = nameof(AppStrings.YouHaveToAcceptTerms))]
-    [Display(Name = nameof(AppStrings.TermsAccepted))]
-    public bool TermsAccepted { get; set; }
+    //[Range(typeof(bool), "true", "true", ErrorMessage = nameof(AppStrings.YouHaveToAcceptTerms))]
+    //[Display(Name = nameof(AppStrings.TermsAccepted))]
+    //public bool TermsAccepted { get; set; }
 
     //#if (captcha == "reCaptcha")
     /// <example>null</example>
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.fa.resx b/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.fa.resx
index 42d7cacac7..fc72e79c0a 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.fa.resx
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.fa.resx
@@ -310,6 +310,9 @@
   </data>
     <data name="YouHaveToAcceptTerms" xml:space="preserve">
     <value>شما باید با شرایط ما موافقت کنید.</value>
+  </data>
+    <data name="AcceptTermsMessage" xml:space="preserve">
+    <value>با ثبت نام، شما موافقت کردید با</value>
   </data>
     <data name="Gender" xml:space="preserve">
     <value>جنسیت</value>
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.fr.resx b/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.fr.resx
index 02e06a5d2a..c0faabec9c 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.fr.resx
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.fr.resx
@@ -310,6 +310,9 @@
   </data>
     <data name="YouHaveToAcceptTerms" xml:space="preserve">
     <value>Vous devez accepter nos conditions.</value>
+  </data>
+    <data name="AcceptTermsMessage" xml:space="preserve">
+    <value>En vous inscrivant, vous acceptez notre</value>
   </data>
     <data name="Gender" xml:space="preserve">
     <value>Genre</value>
@@ -522,7 +525,7 @@
     <value>Vous n'avez pas reçu l'e-mail de confirmation ?</value>
   </data>
     <data name="Or" xml:space="preserve">
-    <value>OU</value>
+    <value>Ou</value>
   </data>
     <data name="ProfileImage" xml:space="preserve">
     <value>Image de profil</value>
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.resx b/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.resx
index ae935da21a..e8c19ccde3 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.resx
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.resx
@@ -310,6 +310,9 @@
   </data>
     <data name="YouHaveToAcceptTerms" xml:space="preserve">
     <value>You must agree to our terms.</value>
+  </data>
+    <data name="AcceptTermsMessage" xml:space="preserve">
+    <value>By signing up, you agree to our</value>
   </data>
     <data name="Gender" xml:space="preserve">
     <value>Gender</value>
@@ -522,7 +525,7 @@
     <value>Haven’t you received the confirmation email?</value>
   </data>
     <data name="Or" xml:space="preserve">
-    <value>OR</value>
+    <value>Or</value>
   </data>
     <data name="ProfileImage" xml:space="preserve">
     <value>Profile Image</value>

From 6d5d1521127d672dc38189c05ad2d3eab763bac9 Mon Sep 17 00:00:00 2001
From: Mohammad Hossein Rastegarinia <mh.rastegari@outlook.com>
Date: Thu, 5 Sep 2024 21:54:16 +0330
Subject: [PATCH 21/38] feat(blazorui): add SideRail to all demo pages #8518
 (#8519)

---
 .../Components/ComponentExampleBox.razor      |  4 +--
 .../Components/ComponentExampleBox.razor.scss |  1 -
 .../Components/SideRail.razor                 | 29 +++++++++----------
 .../Components/SideRail.razor.cs              | 11 +++++++
 .../Extensions/IJSRuntimeExtensions.cs        |  5 ++++
 .../Components/Buttons/BitButtonDemo.razor    |  3 +-
 .../Components/Buttons/BitButtonDemo.razor.cs | 18 ------------
 .../Scripts/app.ts                            |  7 +++++
 .../Shared/MainLayout.razor.scss              |  1 +
 9 files changed, 40 insertions(+), 39 deletions(-)

diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentExampleBox.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentExampleBox.razor
index 99b74e2c0d..dd473865ca 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentExampleBox.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentExampleBox.razor
@@ -1,8 +1,8 @@
 @inherits AppComponentBase
 
-<section class="box" id="@Id">
+<section class="box">
     <div class="box-header">
-        <BitText Typography="BitTypography.H5" Class="section-title">@Title</BitText>
+        <BitText Typography="BitTypography.H5" Class="section-title" Id="@Id" example-section-title>@Title</BitText>
         <div class="header-btn-group">
             <BitActionButton OnClick="() => showCode = !showCode"
                              Class="@($"header-btn show-code{(showCode ? " code-shown":"")}")"
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentExampleBox.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentExampleBox.razor.scss
index 860afa83c8..11f2102693 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentExampleBox.razor.scss
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentExampleBox.razor.scss
@@ -8,7 +8,6 @@
     display: flex;
     max-width: 100%;
     flex-flow: column nowrap;
-    scroll-margin: rem2(80px);
     margin-bottom: rem2(36px);
     justify-content: flex-start;
 }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/SideRail.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/SideRail.razor
index 98e5418ffc..c292db00b7 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/SideRail.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/SideRail.razor
@@ -1,18 +1,15 @@
 @inherits AppComponentBase
 
-@if (Items is not null && Items.Count > 0)
-{
-    <ul class="side-rail">
-        <li><b>Content</b></li>
-        @foreach (var item in Items)
-        {
-            <li>
-                <BitLink OnClick="@(() => ScrollToItem(item))" NoUnderline>
-                    <BitText Typography="BitTypography.Body2">
-                        @item.Title
-                    </BitText>
-                </BitLink>
-            </li>
-        }
-    </ul>
-}
\ No newline at end of file
+<ul class="side-rail">
+    <li><b>On this page</b></li>
+    @foreach (var item in Items)
+    {
+        <li>
+            <BitLink OnClick="@(() => ScrollToItem(item))" NoUnderline>
+                <BitText Typography="BitTypography.Body2" Style="text-align: start;">
+                    @item.Title
+                </BitText>
+            </BitLink>
+        </li>
+    }
+</ul>
\ No newline at end of file
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/SideRail.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/SideRail.razor.cs
index 08b82b58b0..a4cbdc897b 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/SideRail.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/SideRail.razor.cs
@@ -10,4 +10,15 @@ private async Task ScrollToItem(SideRailItem targetItem)
 
         await JSRuntime.ScrollToElement(targetItem.Id);
     }
+
+    protected override async Task OnAfterFirstRenderAsync()
+    {
+        var sideRailItems = await JSRuntime.GetSideRailItems();
+
+        Items = sideRailItems.ToList();
+
+        StateHasChanged();
+
+        await base.OnAfterFirstRenderAsync();
+    }
 }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Extensions/IJSRuntimeExtensions.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Extensions/IJSRuntimeExtensions.cs
index 1804d5bdad..5037428723 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Extensions/IJSRuntimeExtensions.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Extensions/IJSRuntimeExtensions.cs
@@ -12,6 +12,11 @@ public static async Task ScrollToElement(this IJSRuntime jsRuntime, string targe
         await jsRuntime.InvokeVoidAsync("scrollToElement", targetElementId);
     }
 
+    public static async ValueTask<SideRailItem[]> GetSideRailItems(this IJSRuntime jsRuntime)
+    {
+        return await jsRuntime.InvokeAsync<SideRailItem[]>("getSideRailItems");
+    }
+
     public static async Task CopyToClipboard(this IJSRuntime jsRuntime, string codeSampleContentForCopy)
     {
         await jsRuntime.InvokeVoidAsync("copyToClipboard", codeSampleContentForCopy);
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitButtonDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitButtonDemo.razor
index 1a6489c5ca..0a940b3268 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitButtonDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitButtonDemo.razor
@@ -12,8 +12,7 @@
                ComponentDescription="Buttons enable users to take actions with a single tap. They're commonly used in forms, dialog panels, and specialized for tasks like navigation or repeated actions."
                ComponentParameters="componentParameters"
                ComponentSubEnums="componentSubEnums"
-               ComponentSubClasses="componentSubClasses"
-               SideRailItems="sideRailItems">
+               ComponentSubClasses="componentSubClasses">
     <ComponentExampleBox Title="Basic" RazorCode="@example1RazorCode" Id="example1">
         <ExamplePreview>
             <BitButton>Button</BitButton>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitButtonDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitButtonDemo.razor.cs
index 99cb269095..efcb3b7228 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitButtonDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitButtonDemo.razor.cs
@@ -438,24 +438,6 @@ public partial class BitButtonDemo
         }
     ];
 
-    private readonly List<SideRailItem> sideRailItems =
-    [
-        new() { Id="example1", Title="Basic" },
-        new() { Id="example2", Title="Primary & Secondary" },
-        new() { Id="example3", Title="Variant" },
-        new() { Id="example4", Title="Icon" },
-        new() { Id="example5", Title="Loading" },
-        new() { Id="example6", Title="Loading Label" },
-        new() { Id="example7", Title="Href" },
-        new() { Id="example8", Title="Button Type" },
-        new() { Id="example9", Title="Templates" },
-        new() { Id="example10", Title="Events" },
-        new() { Id="example11", Title="Size" },
-        new() { Id="example12", Title="Color" },
-        new() { Id="example13", Title="Style & Class" },
-        new() { Id="example14", Title="RTL" },
-    ];
-
     private bool fillIsLoading;
     private bool outlineIsLoading;
     private bool textIsLoading;
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Scripts/app.ts b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Scripts/app.ts
index 38b963e2e5..7531b119c6 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Scripts/app.ts
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Scripts/app.ts
@@ -22,6 +22,13 @@ function scrollToElement(targetElementId: string) {
     }
 }
 
+function getSideRailItems() {
+    return Array.from(document.querySelectorAll<HTMLElement>('[example-section-title]')).map((element) => ({
+        id: element.id,
+        title: element.innerText
+    }));
+}
+
 function copyToClipboard(codeSampleContentForCopy: string) {
     navigator.clipboard.writeText(codeSampleContentForCopy);
 }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/MainLayout.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/MainLayout.razor.scss
index dc2f934ed3..52bb1fdcc9 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/MainLayout.razor.scss
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/MainLayout.razor.scss
@@ -84,6 +84,7 @@ main {
         bottom: rem2(8px);
         position: absolute;
         margin-right: rem2(175px);
+        scroll-margin: rem2(80px);
         color: $bit-color-foreground-primary;
 
         @include lt-lg {

From 1107ae8b79163bcb731994e2889d16cfe454cd77 Mon Sep 17 00:00:00 2001
From: Mohammad Hossein Rastegarinia <mh.rastegari@outlook.com>
Date: Thu, 5 Sep 2024 22:33:40 +0330
Subject: [PATCH 22/38] Remove redundant Items parameter from SideRail (#8520)
 (#8521)

* Remove unnecessary parameter from SideRail #8520

* Make Items a private field

* Fix naming
---
 .../Components/ComponentDemo.razor                            | 2 +-
 .../Components/ComponentDemo.razor.cs                         | 1 -
 .../Bit.BlazorUI.Demo.Client.Core/Components/SideRail.razor   | 2 +-
 .../Components/SideRail.razor.cs                              | 4 ++--
 4 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentDemo.razor
index c038d6aa28..31d10ac0fc 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentDemo.razor
@@ -55,5 +55,5 @@
             <ComponentEnumsTable Enums="_componentBaseSubEnums" />
         </section>
     </div>
-    <SideRail Items="SideRailItems" />
+    <SideRail />
 </div>
\ No newline at end of file
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentDemo.razor.cs
index 8485f2676e..cc67574b63 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentDemo.razor.cs
@@ -10,7 +10,6 @@ public partial class ComponentDemo
     [Parameter] public List<ComponentSubClass> ComponentSubClasses { get; set; } = [];
     [Parameter] public List<ComponentSubEnum> ComponentSubEnums { get; set; } = [];
     [Parameter] public List<ComponentParameter> ComponentPublicMembers { get; set; } = [];
-    [Parameter] public List<SideRailItem> SideRailItems { get; set; } = [];
 
 
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/SideRail.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/SideRail.razor
index c292db00b7..7d4166924d 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/SideRail.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/SideRail.razor
@@ -2,7 +2,7 @@
 
 <ul class="side-rail">
     <li><b>On this page</b></li>
-    @foreach (var item in Items)
+    @foreach (var item in _items)
     {
         <li>
             <BitLink OnClick="@(() => ScrollToItem(item))" NoUnderline>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/SideRail.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/SideRail.razor.cs
index a4cbdc897b..122d8a1e2e 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/SideRail.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/SideRail.razor.cs
@@ -2,7 +2,7 @@
 
 public partial class SideRail
 {
-    [Parameter] public List<SideRailItem> Items { get; set; } = [];
+    private List<SideRailItem> _items { get; set; } = [];
 
     private async Task ScrollToItem(SideRailItem targetItem)
     {
@@ -15,7 +15,7 @@ protected override async Task OnAfterFirstRenderAsync()
     {
         var sideRailItems = await JSRuntime.GetSideRailItems();
 
-        Items = sideRailItems.ToList();
+        _items = sideRailItems.ToList();
 
         StateHasChanged();
 

From 10ee1c3597e361d1a701f43d6c46521ee3ffa9ac Mon Sep 17 00:00:00 2001
From: Mahsa Mohammadi <mohammadi.it91@yahoo.com>
Date: Fri, 6 Sep 2024 14:35:08 +0330
Subject: [PATCH 23/38] feat(websites): add Run project to Boilerplate docs and
 improve other pages on Platform website #8468 (#8471)

---
 .../Templates/Templates01OverviewPage.razor   |   6 +-
 .../Templates03GettingStartedPage.razor       |  87 +++++--
 .../Templates03GettingStartedPage.razor.cs    |  39 ++-
 .../Templates03GettingStartedPage.razor.scss  |  16 +-
 .../Templates04ProjectStructurePage.razor     |   6 +-
 .../Templates05CreateProjectPage.razor        |  27 ++-
 .../Templates/Templates06RunProjectPage.razor | 227 ++++++++++++++++++
 .../Templates06RunProjectPage.razor.cs        |   5 +
 .../Templates06RunProjectPage.razor.scss      |  61 +++++
 .../Shared/MainLayout.razor.cs                |   9 +-
 .../Shared/MainLayout.razor.scss              |   1 -
 .../compilerconfig.json                       |   6 +
 .../images/templates/launch-options.webp      | Bin 0 -> 9836 bytes
 .../wwwroot/images/templates/render-mode.webp | Bin 0 -> 13934 bytes
 .../images/templates/virtualization.webp      | Bin 0 -> 19866 bytes
 .../images/templates/vs-code-docker.webp      | Bin 0 -> 13292 bytes
 16 files changed, 437 insertions(+), 53 deletions(-)
 create mode 100644 src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates06RunProjectPage.razor
 create mode 100644 src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates06RunProjectPage.razor.cs
 create mode 100644 src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates06RunProjectPage.razor.scss
 create mode 100644 src/Websites/Platform/src/Bit.Websites.Platform.Client/wwwroot/images/templates/launch-options.webp
 create mode 100644 src/Websites/Platform/src/Bit.Websites.Platform.Client/wwwroot/images/templates/render-mode.webp
 create mode 100644 src/Websites/Platform/src/Bit.Websites.Platform.Client/wwwroot/images/templates/virtualization.webp
 create mode 100644 src/Websites/Platform/src/Bit.Websites.Platform.Client/wwwroot/images/templates/vs-code-docker.webp

diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates01OverviewPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates01OverviewPage.razor
index 30c887d721..a09cf263d0 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates01OverviewPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates01OverviewPage.razor
@@ -1,8 +1,4 @@
-@page "/todo-template"
-@page "/admin-panel"
-@page "/templates"
-@page "/todo-template/overview"
-@page "/admin-panel/overview"
+@page "/templates"
 @page "/templates/overview"
 @inherits AppComponentBase
 
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates03GettingStartedPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates03GettingStartedPage.razor
index 4c0ddd32e9..185869625c 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates03GettingStartedPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates03GettingStartedPage.razor
@@ -15,19 +15,15 @@
             <BitText Typography="BitTypography.H5" Gutter>Setup your development environment</BitText>
             <br />
             <BitPivot>
-                <BitPivotItem HeaderText="One-step setup">
+                <BitPivotItem HeaderText="Easy setup">
                     <br />
                     <BitText Typography="BitTypography.H6" Gutter>
-                        Windows - Visual Studio & Visual Studio Code
+                        For Windows: Visual Studio & Visual Studio Code
                     </BitText>
                     <br />
                     <BitText Typography="BitTypography.Body1" Gutter>
-                        To enhance the developer experience, we’ve consolidated the installation process into a single,
-                        easy-to-use chain of commands.
-                        <br />
-                        The components are installed using the
-                        <a href="https://aka.ms/getwinget" target="_blank">Windows Package Manager (WinGet)</a>
-                        which is installed by default on Windows 11.
+                        To streamline your development setup, we’ve simplified the installation process into a straightforward sequence of commands.
+                        These components are installed via the <a href="https://aka.ms/getwinget" target="_blank">Windows Package Manager (WinGet)</a>, which comes pre-installed on Windows 11.
                         <br /><br />
                         The default commands listed below are required for Web & API development, however,
                         you can choose other options too, then click the Copy button and paste them into
@@ -36,18 +32,20 @@
                     <br />
                     <BitStack Gap="1rem">
                         <BitCheckbox Label="Cross-platform development" @bind-Value="enableCrossPlatform" />
+                        <BitCheckbox Label="Virtualization (Docker, WSL, Android Emulators)" @bind-Value="enableVirtualization" />
                         <BitCheckbox Label="Visual Studio" @bind-Value="installVs" />
                         <BitCheckbox Label="Visual Studio Code" @bind-Value="installVsCode" />
-                        <BitButton IconName="@BitIconName.Copy" OnClick="CopyCommandsToClipboard">@copyButtonText</BitButton>
                     </BitStack>
-                    <br />
-                    List of commands:
+                    <br /><br />
+                    <BitText Typography="BitTypography.H5" Gutter>Installation Script</BitText>
+                    <BitButton IconName="@BitIconName.Copy" OnClick="CopyCommandsToClipboard">@copyButtonText</BitButton>
                     <CodeBox MaxHeight="300px" HideCopyButton>@GetDisplayableSelectedCommands()</CodeBox>
                     @if (installVs)
                     {
                         <br />
+                        <BitText Typography="BitTypography.H5" Gutter>Visual Studio Extensions</BitText>
                         <div class="section-card-txt">
-                            <b>Note</b>: you can install the following extensions for Visual Studio to have a better development experience:
+                            Install the following extensions for Visual Studio to have a better development experience:
                             <ol>
                                 <li>
                                     <a href="https://marketplace.visualstudio.com/items?itemName=Failwyn.WebCompiler64" target="_blank">Web Compiler 2022+ extension</a>
@@ -58,6 +56,28 @@
                             </ol>
                         </div>
                     }
+                    @if (enableVirtualization)
+                    {
+                        <BitText Typography="BitTypography.H5" Gutter>Virtualization Instructions</BitText>
+                        <div>
+                            Make sure Virtualization is enabled on your system:
+                            <br />
+                            <br />
+                            <div class="image-container">
+                                <img class="image" src="images/templates/virtualization.webp" />
+                            </div>
+                            If this feature shown as not enabled in <i>Task Manager</i>, please refer to the following video:
+                            <br />
+                            <br />
+                            <div class="video-container">
+                                <iframe src="https://www.youtube.com/embed/ZDeje9wgDp4"
+                                        width="560" height="315" title="YouTube video player" frameborder="0" allowfullscreen
+                                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
+                                </iframe>
+                            </div>
+                            <br />
+                        </div>
+                    }
                 </BitPivotItem>
                 <BitPivotItem HeaderText="Step-by-step setup">
                     <br />
@@ -87,7 +107,7 @@ tar zxf $HOME/dotnet.tar.gz -C "$HOME/.dotnet"
 echo 'PATH=$HOME/.dotnet:$HOME/.dotnet/tools:$PATH' >> ~/.bashrc
 export PATH=$HOME/.dotnet:$HOME/.dotnet/tools:$PATH
 dotnet dev-certs https --trust
-rm dotnet.tar.gz</CodeBox>
+rm $HOME/dotnet.tar.gz</CodeBox>
                                 </BitAccordion>
                             }
                         </li>
@@ -144,6 +164,31 @@ rm dotnet.tar.gz</CodeBox>
                         }
                     </ol>
                     <br />
+                    @if (devOS is "Windows")
+                    {
+                        <BitText Typography="BitTypography.H5" Gutter>Virtualization Instructions (Docker, WSL, Android Emulators)</BitText>
+                        <ol>
+                            <li>
+                                Make sure Virtualization is enabled on your system:
+                                <br />
+                                <div class="image-container">
+                                    <img class="image" src="images/templates/virtualization.webp" />
+                                </div>
+                            </li>
+                            <li>
+                                If this feature shown as not enabled in <i>Task Manager</i>, please refer to the following video:
+                                <br />
+                                <br />
+                                <div class="video-container">
+                                    <iframe src="https://www.youtube.com/embed/ZDeje9wgDp4"
+                                            width="560" height="315" title="YouTube video player" frameborder="0" allowfullscreen
+                                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
+                                    </iframe>
+                                </div>
+                                <br />
+                            </li>
+                        </ol>
+                    }
                     <BitText Typography="BitTypography.H5" Gutter>IDE specific requirements</BitText>
                     <br />
                     @if (devOS is "Windows")
@@ -153,7 +198,7 @@ rm dotnet.tar.gz</CodeBox>
                             <div class="section-card-txt">
                                 <ul>
                                     <li>
-                                        <a href="https://visualstudio.microsoft.com/downloads/" target="_blank">Microsoft Visual Studio</a> 2022 - Version 17.8.0 or higher
+                                        <a href="https://visualstudio.microsoft.com/downloads/" target="_blank">Microsoft Visual Studio</a> 2022 - Version 17.11 or higher
                                         <ul dir="auto">
                                             <li>
                                                 Workloads:
@@ -176,7 +221,10 @@ rm dotnet.tar.gz</CodeBox>
                                     </li>
                                 </ul>
                             </div>
-                            <img class="image" alt="VS Setup" src="/images/templates/vs-setup.webp" />
+                            @if (showCrossPlatform)
+                            {
+                                <img class="image" alt="VS Setup" src="/images/templates/vs-setup.webp" />
+                            }
                         </BitStack>
                     }
                     <BitText Typography="BitTypography.H6" Gutter>VS Code</BitText>
@@ -186,6 +234,7 @@ rm dotnet.tar.gz</CodeBox>
                                 <a href="https://code.visualstudio.com/#alt-downloads" title="VS Code" rel="nofollow">Visual Studio Code</a> with following extensions:
                                 <ul dir="auto">
                                     <li><a href="https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit" title="C# Dev Kit" rel="nofollow">C# Dev Kit</a></li>
+                                    <li><a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers" title="Dev Containers" rel="nofollow">Dev Containers</a></li>
                                     <li><a href="https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass" title="Live Sass Compiler" rel="nofollow">Live Sass Compiler</a></li>
                                     <li><a href="https://marketplace.visualstudio.com/items?itemName=kevin-chatham.aspnetcorerazor-html-css-class-completion" title="Razor/Blazor CSS IntelliSense" rel="nofollow">Razor/Blazor CSS IntelliSense</a></li>
                                     <li><a href="https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.blazorwasm-companion" title="BlazorWasmDebugging" rel="nofollow">BlazorWasmDebugging</a></li>
@@ -201,6 +250,7 @@ rm dotnet.tar.gz</CodeBox>
                             @if (showCrossPlatform)
                             {
                                 <CodeBox>code --install-extension ms-dotnettools.csdevkit
+code --install-extension ms-vscode-remote.remote-containers
 code --install-extension ms-dotnettools.blazorwasm-companion
 code --install-extension glenn2223.live-sass
 code --install-extension kevin-chatham.aspnetcorerazor-html-css-class-completion
@@ -209,11 +259,14 @@ code --install-extension DominicVonk.vscode-resx-editor</CodeBox>
                             }
                             else
                             {
-                                <CodeBox>code --install-extension ms-dotnettools.csdevkit
+                                <CodeBox>
+code --install-extension ms-dotnettools.csdevkit
+code --install-extension ms-vscode-remote.remote-containers
 code --install-extension ms-dotnettools.blazorwasm-companion
 code --install-extension glenn2223.live-sass
 code --install-extension kevin-chatham.aspnetcorerazor-html-css-class-completion
-code --install-extension DominicVonk.vscode-resx-editor</CodeBox>
+code --install-extension DominicVonk.vscode-resx-editor
+                                </CodeBox>
                             }
                         </BitAccordion>
                     </div>
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates03GettingStartedPage.razor.cs b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates03GettingStartedPage.razor.cs
index 6435918918..159cee0f5a 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates03GettingStartedPage.razor.cs
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates03GettingStartedPage.razor.cs
@@ -9,6 +9,7 @@ public partial class Templates03GettingStartedPage
     private bool installVs;
     private bool installVsCode;
     private bool enableCrossPlatform;
+    private bool enableVirtualization;
     private string devOS = "Windows";
     private string copyButtonText = "Copy commands";
     private bool showCrossPlatform;
@@ -16,7 +17,8 @@ public partial class Templates03GettingStartedPage
     private List<(string text, string command)> GetSelectedComands()
     {
         List<(string text, string command)> selectedCommandGroups = [.. commandGroups[CommandGroup.Core]];
-
+        if (enableVirtualization)
+            selectedCommandGroups.AddRange(commandGroups[CommandGroup.Virtualization]);
         if (enableCrossPlatform)
             selectedCommandGroups.AddRange(commandGroups[CommandGroup.Additional]);
         if (installVsCode)
@@ -56,12 +58,6 @@ private async Task CopyCommandsToClipboard()
             (text:"echo 'Set execution policy';",
             command:"Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser -Force;"),
 
-            (text:@"echo 'Enable long paths files in Windows https://learn.microsoft.com/en-us/windows/win32/fileio/maximum-file-path-limitation';",
-            command:@"New-ItemProperty -Path ""HKLM:\SYSTEM\CurrentControlSet\Control\FileSystem"" -Name ""LongPathsEnabled"" -Value 1 -PropertyType DWORD -Force;"),
-
-            (text:@"echo 'Enable Windows developer mode https://learn.microsoft.com/en-us/windows/apps/get-started/developer-mode-features-and-debugging#use-regedit-to-enable-your-device';",
-            command:@"New-ItemProperty -Path ""HKLM:\SOFTWARE\Microsoft\Windows\CurrentVersion\AppModelUnlock"" -Name ""AllowDevelopmentWithoutDevLicense"" -Value 1 -PropertyType DWORD -Force;"),
-
             (text:"echo 'Install - Update winget';",
             command:"$ProgressPreference = 'SilentlyContinue'; Install-PackageProvider -Name \"NuGet\" -Force; Set-PSRepository -Name \"PSGallery\" -InstallationPolicy Trusted; Install-Script winget-install -Force; winget-install -Force;"),
 
@@ -84,7 +80,13 @@ private async Task CopyCommandsToClipboard()
         [CommandGroup.Additional] =
         [
             (text:@"echo 'Install MAUI workloads https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?tabs=visual-studio-code#install-net-and-net-maui-workloads';",
-            command:"dotnet workload install maui;")
+            command:"dotnet workload install maui;"),
+
+            (text:@"echo 'Enable long paths files in Windows https://learn.microsoft.com/en-us/windows/win32/fileio/maximum-file-path-limitation';",
+            command:@"New-ItemProperty -Path ""HKLM:\SYSTEM\CurrentControlSet\Control\FileSystem"" -Name ""LongPathsEnabled"" -Value 1 -PropertyType DWORD -Force;"),
+
+            (text:@"echo 'Enable Windows developer mode https://learn.microsoft.com/en-us/windows/apps/get-started/developer-mode-features-and-debugging#use-regedit-to-enable-your-device';",
+            command:@"New-ItemProperty -Path ""HKLM:\SOFTWARE\Microsoft\Windows\CurrentVersion\AppModelUnlock"" -Name ""AllowDevelopmentWithoutDevLicense"" -Value 1 -PropertyType DWORD -Force;"),
         ],
 
         [CommandGroup.VS] =
@@ -110,6 +112,9 @@ private async Task CopyCommandsToClipboard()
             (text:@"echo 'Install the C# Dev Kit extension for Visual Studio Code https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit';",
             command:"code --install-extension ms-dotnettools.csdevkit;"),
 
+            (text:@"echo 'Install Dev Containers extension for Visual Studio Code https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers';",
+            command:"code --install-extension ms-vscode-remote.remote-containers;"),
+
             (text:@"echo 'Install the Blazor WASM Companion extension for Visual Studio Code https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.blazorwasm-companion';",
             command:"code --install-extension ms-dotnettools.blazorwasm-companion;"),
 
@@ -124,6 +129,23 @@ private async Task CopyCommandsToClipboard()
 
             (text:@"echo 'Install the RESX Editor extension for Visual Studio Code https://marketplace.visualstudio.com/items?itemName=DominicVonk.vscode-resx-editor';",
             command:"code --install-extension DominicVonk.vscode-resx-editor;"),
+        ],
+        [CommandGroup.Virtualization] =
+        [
+            (text:@"echo 'Install WSL';",
+            command:"wsl --install;"),
+
+            (text:@"echo 'Install HyperV';",
+            command:"Enable-WindowsOptionalFeature -FeatureName Microsoft-Hyper-V-All -Online -NoRestart;"),
+
+            (text:@"echo 'Install HyperVisior Platform';",
+            command:"Enable-WindowsOptionalFeature -FeatureName HypervisorPlatform -Online -NoRestart;"),
+
+            (text:@"echo 'Install Virtual Machine Platform';",
+            command:"Enable-WindowsOptionalFeature -FeatureName VirtualMachinePlatform -Online -NoRestart;"),
+
+            (text:@"echo 'Install Docker Desktop';",
+            command:"winget install Docker.DockerDesktop --accept-source-agreements --accept-package-agreements;"),
         ]
     };
 
@@ -134,5 +156,6 @@ private enum CommandGroup
         AdditionalVS,
         VS,
         VSCode,
+        Virtualization
     }
 }
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates03GettingStartedPage.razor.scss b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates03GettingStartedPage.razor.scss
index 576276fc8b..4ea473b058 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates03GettingStartedPage.razor.scss
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates03GettingStartedPage.razor.scss
@@ -23,13 +23,23 @@
     @include SectionCardText;
 }
 
+.image-container {
+    @include ImageContainer;
+}
+
 .row {
     display: flex;
 }
 
-.image{
-    width: rem2(600px);
-    margin-left: rem2(30px);
+.image {
+    @include Image;
+    width: rem2(500px);
+}
+
+.video-container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
 }
 
 ::deep .plt-drp{
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates04ProjectStructurePage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates04ProjectStructurePage.razor
index bf70fe93d2..3343bab688 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates04ProjectStructurePage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates04ProjectStructurePage.razor
@@ -1,6 +1,4 @@
-@page "/todo-template/project-structure"
-@page "/admin-panel/project-structure"
-@page "/templates/project-structure"
+@page "/templates/project-structure"
 @inherits AppComponentBase
 
 <PageOutlet Url="templates/project-structure"
@@ -12,7 +10,7 @@
     <br />
     <section class="section-card">
         <div class="section-card-txt">
-            To examine the structure, start by creating a project with the following command in the command line:
+            To explore the structure of your project, start by creating a new project using the following command in the command line:
             <br />
             <CodeBox>dotnet new bit-bp –-name MyFirstProject</CodeBox>
         </div>
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates05CreateProjectPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates05CreateProjectPage.razor
index 7b6b0577e2..dca4e7b97a 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates05CreateProjectPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates05CreateProjectPage.razor
@@ -1,6 +1,4 @@
-@page "/todo-template/create-project"
-@page "/admin-panel/create-project"
-@page "/templates/create-project"
+@page "/templates/create-project"
 @inherits AppComponentBase
 
 <PageOutlet Url="templates/create-project"
@@ -15,9 +13,11 @@
         Let's make our next cross platform project a success with Bit.Boilerplate.
     </BitText>
     <br />
-    <CodeBox>
-        @GetFinalCommand()
-    </CodeBox>
+    <BitSticky Top="90px">
+        <CodeBox>
+            @GetFinalCommand()
+        </CodeBox>
+    </BitSticky>
     <br />
 
     <BitGrid Columns="2"
@@ -129,8 +129,8 @@
             <CodeBox>
                 @GetAppCenterCommand()
             </CodeBox>
-            By adding the --appCenter true parameter to the dotnet new command, App Center will be integrated for macOS,
-            Windows, iOS, and Android platforms.
+            Adding --appCenter true parameter to the dotnet new command allows you to capture errors, crashes, and analytics data
+            seamlessly across all supported platforms.
         </BitGridItem>
 
         <BitGridItem Class="grid-item">
@@ -156,7 +156,12 @@
             <CodeBox>
                 @GetSignalRCommand()
             </CodeBox>
-            Enabling this parameter will provide you with sample code for SignalR.
+            Enabling this parameter will include sample code for SignalR, which can be used to implement real-time functionalities, such as chat, in your Blazor project.
+            <br />
+            <br />
+            <b>Note:</b>
+            <br />  
+            This setting does not affect the enabling or disabling of Blazor Server.
         </BitGridItem>
 
         <BitGridItem Class="grid-item">
@@ -229,7 +234,7 @@
                         <br />
                         <br />
                         Supported options include SqlServer, PostgreSQL, MySQL, Cosmos, and Other.
-                        If you require a database not listed among the options, select Other. After project initialization, you can add the desired <a href="https://learn.microsoft.com/en-us/ef/core/providers/" target="_blank">database</a>
+                        If you require a database not listed among the options, select Other. After project creation, you can add the desired <a href="https://learn.microsoft.com/en-us/ef/core/providers/" target="_blank">database</a>
                         package and configure it in the AddDbContextPool method which is located in the Program.Services.cs file within the Server.Api project.
                         <br />
                         <br />
@@ -332,4 +337,4 @@
     </section>
 </div>
 
-<NavigationButtons Prev="Project structure" PrevUrl="/templates/project-structure" />
+<NavigationButtons Prev="Project structure" PrevUrl="/templates/project-structure" Next="Run project" NextUrl="/templates/run-project" />
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates06RunProjectPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates06RunProjectPage.razor
new file mode 100644
index 0000000000..ce3a109438
--- /dev/null
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates06RunProjectPage.razor
@@ -0,0 +1,227 @@
+@page "/templates/run-project"
+@inherits AppComponentBase
+
+<PageOutlet Url="templates/run-project"
+            Title="Run project - Templates"
+            Description="Run project of the project templates of the bit platform" />
+
+<div class="page-container">
+    <BitText Typography="BitTypography.H3" Gutter>Project Run Guidelines</BitText>
+    <br />
+    <br />
+    <section class="section-card">
+        <div class="section-card-txt">
+            The process for running the project varies based on the Api parameter set during project initiation:
+            <br />
+            <ul>
+                <li>
+                    <b>--api Integrated:</b> Simply run the Server.Web project (Running Server.Api is optional but not required).
+                </li>
+                <li>
+                    <b>--api Standalone:</b> Run both the Server.Api and Server.Web projects.
+                </li>
+            </ul>
+        </div>
+    </section>
+    <br />
+    <section class="section-card">
+        <div class="section-card-txt">
+            <BitText Typography="BitTypography.H5" Gutter>Login Credentials</BitText>
+            Upon project run, please use the following credentials to sign in:
+            <ul>
+                <li>
+                    <b>Email:</b> test@bitplatform.dev
+                </li>
+                <li>
+                    <b>Password:</b> 123456
+                </li>
+            </ul>
+        </div>
+    </section>
+    <br />
+    <section class="section-card">
+        <div class="section-card-txt">
+            <BitText Typography="BitTypography.H5" Gutter>Development Environment</BitText>
+            The project is configured to use Blazor Server as the default mode to enhance the development experience,
+            enabling features such as <a href="https://learn.microsoft.com/en-us/visualstudio/debugger/hot-reload?view=vs-2022" target="_blank">Visual Studio .NET Hot Reload</a>
+            and <a href="https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-watch" target="_blank">dotnet watch</a>. To utilize the Hot Reload feature,
+            ensure that you have the latest versions of Visual Studio, the .NET SDK, 
+            <a href="https://marketplace.visualstudio.com/items?itemName=Failwyn.WebCompiler64" target="_blank">Web Compiler 2022+</a> for Visual Studio,
+            and <a href="https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass" target="_blank">Live Sass Compiler</a>  for VS Code installed. 
+            This setup allows for automatic application of changes made to .razor,
+            .scss, or .cs files without the need to rebuild the project. If any changes to these files do not take effect without a rebuild, please feel free to create an issue 
+            <a href="https://github.com/bitfoundation/bitplatform/issues/new/choose" target="_blank">here</a>.
+        </div>
+    </section>
+    <br />
+    <section class="section-card">
+        <div class="section-card-txt">
+            <BitText Typography="BitTypography.H5" Gutter>Blazor Mode Selection</BitText>
+            To choose between Blazor modes, refer to the Client.Core/Services/AppRenderMode.cs file. By default, for development it
+            is Blazor Server and for Production it is Blazor Auto.
+            <br />
+            Blazor Auto is selected for production to optimize the user experience. On the first visit, the website will load quickly
+            in Blazor Server mode, while Blazor WebAssembly files are downloaded in the background. Subsequent visits will utilize Blazor
+            WebAssembly, enhancing performance.
+            <CodeBox>public static IComponentRenderMode? Current =&gt;
+    AppEnvironment.IsDev()
+    ? BlazorServer // For better development experience.
+    : BlazorAuto;  // For better production experience.</CodeBox>
+            <BitText Typography="BitTypography.H5" Gutter>Debugging in Blazor WebAssembly</BitText>
+            To debug the project in Blazor WebAssembly mode, change the Current value to BlazorWebAssembly for development. To fully
+            utilize debugging features, set the Launch profile to Server.Web-BlazorWebAssembly.
+            <br />
+            <br />
+            <BitText Typography="BitTypography.H5" Gutter>Running in Blazor WebAssembly Standalone Mode</BitText>
+            To run the project in Blazor WebAssembly Standalone mode, set <i>BlazorWebAssemblyStandalone</i> to true in the Directory.Build.props file.
+            Additionally, run Client.Web in addition to server project.
+            <br />
+            <div class="image-container">
+                <img class="image" src="images/templates/launch-options.webp" />
+            </div>
+        </div>
+    </section>
+    <br />
+    <section class="section-card">
+        <div class="section-card-txt">
+            <BitText Typography="BitTypography.H5" Gutter>Visual Studio / Visual Studio Code Additional Launch Options</BitText>
+            The project also supports additional launch profiles, including Docker, IIS Express, and WSL. These options provide flexibility
+            for developers to test the project according to their specific requirements.
+            <br />
+            <br />
+            Although the Docker option is available in Visual Studio, we recommend using it in Visual Studio Code. This is because, in Visual Studio,
+            selecting Docker as the launch profile causes code changes to take a significant amount of time to apply. In contrast, Visual Studio Code
+            offers a more efficient workflow.
+            <br />
+            <br />
+            By clicking on <b>Open a Remote Window</b> and selecting <b>Reopen in Container</b> from the dropdown, you can run the project in Docker in the background.
+            This approach allows Visual Studio Code to operate within Docker, along with all its extensions and SDKs, leading to a much faster development experience.
+            <br />
+            <div class="image-container">
+                <img class="image" src="images/templates/vs-code-docker.webp" />
+            </div>
+        </div>
+    </section>
+    <br />
+    <section class="section-card">
+        <div class="section-card-txt">
+            <BitText Typography="BitTypography.H5" Gutter>Connecting Client to Server</BitText>
+            To connect the client to the server, set the <i>ServerAddress</i> inside Client.Core/appsettings.json to the appropriate IP address. The default value does not need
+            to be changed for Web, Windows app, or Android Emulator.
+            <br />
+            <br />
+            For iOS and Android devices, there are two solutions:
+            <ol>
+                <li>
+                    <b>Same Network Connection:</b> Ensure that your Android/iOS device and PC are on the same network, and make sure the firewall does not interfere.
+                    A sample configuration would look like this:
+                    <code>"ServerAddress": "http://192.168.1.17:5000/"</code>
+                </li>
+                <li>
+                    <b>Dev Tunnels:</b> Alternatively, you can use dev tunnels. Below is a sample value for dev tunnels:
+                    <br />
+                    <code>"ServerAddress": "https://r3c136gg-5030.euw.devtunnels.ms"</code>
+                    <br />
+                    For additional details about dev tunnels, please refer to the following video.
+                    <br />
+                    <br />
+                    <div class="video-container">
+                        <iframe src="https://www.youtube.com/embed/72hs_IlE-GY"
+                                width="560" height="315" title="YouTube video player" frameborder="0" allowfullscreen
+                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
+                        </iframe>
+                    </div>
+                    <br />
+                </li>
+            </ol>
+        </div>
+    </section>
+    <br />
+    <section class="section-card">
+        <div class="section-card-txt">
+            <BitText Typography="BitTypography.H5" Gutter>Run Windows Apps</BitText>
+            To run the project on the Windows platform, either set Client.Maui or Client.Windows as the startup project. If you need to access the Developer Tools, simply use
+            <i>Ctrl + Shift + I</i> on the opened windows application.
+        </div>
+    </section>
+    <br />
+    <section class="section-card">
+        <div class="section-card-txt">
+            <BitText Typography="BitTypography.H5" Gutter>Android, iOS Browser Dev Tools</BitText>
+            Opening Browser Dev Tools for Android and iOS can be somewhat complex. For more detailed instructions applicable to macOS, which also apply to Windows
+            and Linux, please refer to the following video:
+            <br />
+            <br />
+            <div class="video-container">
+                <iframe src="https://www.youtube.com/embed/iIa0HhV1ZsY"
+                        width="560" height="315" title="YouTube video player" frameborder="0" allowfullscreen
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
+                </iframe>
+            </div>
+            <br />
+            You can use the same techinque to inspect web apps running inside Android/iOS devices and simulators.
+        </div>
+    </section>
+    <br />
+    <section class="section-card">
+        <div class="section-card-txt">
+            <BitText Typography="BitTypography.H5" Gutter>Run MAUI in VS Code for iOS, Android and macOS</BitText>
+            To run MAUI in VS Code for iOS, Android and macOS, assuming all the requirements are installed based on our documentation, see the following video:
+            <br />
+            <br />
+            <div class="video-container">
+                <iframe src="https://www.youtube.com/embed/rumfIg9qJ_Y?start=1700"
+                        width="560" height="315" title="YouTube video player" frameborder="0" allowfullscreen
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
+                </iframe>
+            </div>
+            <br />
+            Next in order to run on an Android Device follow the instructions in this video:
+            <br />
+            <br />
+            <div class="video-container">
+                <iframe src="https://www.youtube.com/embed/ZkrUR3A9aM4"
+                        width="560" height="315" title="YouTube video player" frameborder="0" allowfullscreen
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
+                </iframe>
+            </div>
+            <br />
+            And in order to run on an iOS device see this video:
+            <br />
+            <br />
+            <div class="video-container">
+                <iframe src="https://www.youtube.com/embed/B-kZ-AgEeO8"
+                        width="560" height="315" title="YouTube video player" frameborder="0" allowfullscreen
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
+                </iframe>
+            </div>
+            <br />
+        </div>
+    </section>
+    <br />
+    <section class="section-card">
+        <div class="section-card-txt">
+            <BitText Typography="BitTypography.H5" Gutter>Run MAUI in Visual Studio for iOS, Android</BitText>
+            Running your project on Android, Windows, and Web using Visual Studio is straightforward. However, testing a macOS version with Visual Studio isn't possible.
+            For iOS, if you have a Mac connected to the same network as your Windows PC, you can follow 
+            <a href="https://learn.microsoft.com/en-us/dotnet/maui/ios/pair-to-mac?view=net-maui-8.0" target="_blank">this documentation</a> 
+            to connect your Visual Studio to the mac device and run the iOS project using Visual Studio while coding on Windows.
+            <br />
+            <br />
+            If you don't have a Mac but do have an Apple Developer Account and an iOS device,
+            you can follow the guide below to test the iOS version on Windows and Visual Studio without needing a Mac.
+            Set the MAUI project as the startup project.
+            <br />
+            <br />
+            <div class="video-container">
+                <iframe src="https://www.youtube.com/embed/snQ1C6Cppr8"
+                        width="560" height="315" title="YouTube video player" frameborder="0" allowfullscreen
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
+                </iframe>
+            </div>
+        </div>
+    </section>
+    <br />
+    <br />
+</div>
+<NavigationButtons Prev="Create project" PrevUrl="/templates/create-project" />
\ No newline at end of file
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates06RunProjectPage.razor.cs b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates06RunProjectPage.razor.cs
new file mode 100644
index 0000000000..18d155bdef
--- /dev/null
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates06RunProjectPage.razor.cs
@@ -0,0 +1,5 @@
+namespace Bit.Websites.Platform.Client.Pages.Templates;
+
+public partial class Templates06RunProjectPage
+{
+}
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates06RunProjectPage.razor.scss b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates06RunProjectPage.razor.scss
new file mode 100644
index 0000000000..b5d5314a4c
--- /dev/null
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates06RunProjectPage.razor.scss
@@ -0,0 +1,61 @@
+@import '../../Styles/abstracts/_media-queries.scss';
+@import '../../Styles/abstracts/_functions.scss';
+@import '../../Styles/abstracts/_colors.scss';
+@import '../../Styles/abstracts/_mixins.scss';
+
+.page-container {
+    @include PageContainer;
+}
+
+.page-main-title {
+    @include PageMainTitle;
+}
+
+.page-desc {
+    @include PageDescription;
+}
+
+.section-card {
+    @include SectionCard;
+}
+
+.section-card-txt {
+    @include SectionCardText;
+}
+
+.image-container {
+    @include ImageContainer;
+}
+
+.row {
+    display: flex;
+}
+
+.image {
+    @include Image;
+    width: rem2(500px);
+}
+
+.video-container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+
+::deep .plt-drp {
+    width: rem2(150px);
+    margin-left: rem2(20px);
+}
+
+::deep {
+    a {
+        color: $bit-color-primary;
+    }
+
+    .link-btn {
+        padding: 0;
+        width: 2rem;
+        height: 2rem;
+        padding-top: 2px;
+    }
+}
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/MainLayout.razor.cs b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/MainLayout.razor.cs
index 69815363c7..5fcbb2c865 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/MainLayout.razor.cs
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/MainLayout.razor.cs
@@ -29,11 +29,12 @@ public partial class MainLayout : IDisposable
 
     private readonly List<BitNavItem> templatesNavItems =
     [
-        new BitNavItem { Text = "Overview", Url = "/templates/overview", AdditionalUrls = ["/admin-panel/overview", "/todo-template/overview"] },
+        new BitNavItem { Text = "Overview", Url = "/templates/overview" },
         new BitNavItem { Text = "Samples", Url = "/templates/samples" },
-        new BitNavItem { Text = "Getting started", Url = "/templates/getting-started", AdditionalUrls = ["/templates/development-prerequisites", "/admin-panel/development-prerequisites", "/todo-template/development-prerequisites"] },
-        new BitNavItem { Text = "Project structure", Url = "/templates/project-structure", AdditionalUrls = ["/admin-panel/project-structure", "/todo-template/project-structure"] },
-        new BitNavItem { Text = "Create project", Url = "/templates/create-project", AdditionalUrls = ["/admin-panel/create-project", "/todo-template/create-project"] }
+        new BitNavItem { Text = "Getting started", Url = "/templates/getting-started" },
+        new BitNavItem { Text = "Project structure", Url = "/templates/project-structure" },
+        new BitNavItem { Text = "Create project", Url = "/templates/create-project" },
+        new BitNavItem { Text = "Run project", Url = "/templates/run-project" }
     ];
 
     private readonly List<BitNavItem> bswupNavItems =
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/MainLayout.razor.scss b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/MainLayout.razor.scss
index 22a5180ee3..08c78575af 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/MainLayout.razor.scss
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/MainLayout.razor.scss
@@ -22,7 +22,6 @@
 .site-content {
     width: 100%;
     margin: 0 auto;
-    overflow: hidden;
     position: relative;
     padding-top: rem2(65px);
     padding-left: rem2(60px);
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/compilerconfig.json b/src/Websites/Platform/src/Bit.Websites.Platform.Client/compilerconfig.json
index 2c3382703a..8a0b46344e 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/compilerconfig.json
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/compilerconfig.json
@@ -113,6 +113,12 @@
         "minify": { "enabled": false },
         "options": { "sourceMap": false }
     },
+    {
+        "outputFile": "Pages/Templates/Templates06RunProjectPage.razor.css",
+        "inputFile": "Pages/Templates/Templates06RunProjectPage.razor.scss",
+        "minify": { "enabled": false },
+        "options": { "sourceMap": false }
+    },
     {
         "outputFile": "Pages/Bswup/Bswup01OverviewPage.razor.css",
         "inputFile": "Pages/Bswup/Bswup01OverviewPage.razor.scss",
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/wwwroot/images/templates/launch-options.webp b/src/Websites/Platform/src/Bit.Websites.Platform.Client/wwwroot/images/templates/launch-options.webp
new file mode 100644
index 0000000000000000000000000000000000000000..bf307ab13da540a50d39682ac4e9b2c58ceef19c
GIT binary patch
literal 9836
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
ST11~+Gp~Z9IQ<k_2NM9sC8pN^

literal 0
HcmV?d00001

diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/wwwroot/images/templates/render-mode.webp b/src/Websites/Platform/src/Bit.Websites.Platform.Client/wwwroot/images/templates/render-mode.webp
new file mode 100644
index 0000000000000000000000000000000000000000..a9593589c7473d1da95600df0a336e92bed592eb
GIT binary patch
literal 13934
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
IpF}zU03y{hb^rhX

literal 0
HcmV?d00001

diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/wwwroot/images/templates/virtualization.webp b/src/Websites/Platform/src/Bit.Websites.Platform.Client/wwwroot/images/templates/virtualization.webp
new file mode 100644
index 0000000000000000000000000000000000000000..0505e6527cecd577db922f4aa56aec8e58372d8b
GIT binary patch
literal 19866
zcmV((K;XYpNk&GJO#lE_MM6+kP&golO#lE8ApxBMDq#YX0X~sLoJ%F6qamd7O6af>
z31x2bKs6Wpxy9klgq*YGr{D-sxWK;vo*PI1X^Q@N_iNtw@>xgXUy+Nadp9ONq<L=o
zpZ_=1pZkAMKk$FqJ$8B={n_;i`w{x{?+gD|_WRwp_`gsO>b{R3@4x<gkN<rChyVZo
z2f$zQul4``{j9(G`zimL|I_O`|3}mV|Ierg|NggrpMOF8g!47}Z}uO_kL^B|{x$Ni
z-9Neh<NtH^i~iTeZ(Mng{Cn(Y<Ug{1lmEs2=jONX-`~F0eI@uO{XeKL<Dba?%71J8
ziuGy!i?+X0|9kr-><jBh&p+1xc>IR+K>h>#2jnNgUz-1D|6%>#@-yrM`5*JY_TO~B
zDSxN%efx*{-}`>xKg++e|GxhL{<rp%>1X)A`oHAA(SG6kR{ZPyU;W?l|Lp&7zQMni
z|55*){qOw0|Bv@S|NsB};{W>g^ZSwi|J^_KyZ`wzyR=%0n|G8(O%+7z{Gu{^Ficn1
zUv8vc4q%xGE7X<LJmA-y!w>dTw}D@wy;8Ji2BF0oVHpDe!rH)Apt-%T@3NKnGtBtJ
z1iEvAMnQCHBdRL(7K9${qc$tFSJEfY8I57SE%9%Qd{&<@lDwp(Jcn-NCgTzHbShz&
z@H6ASOfq4U447oYCK)iva{SvyoQ#VyT$u4<LW240w+-2`UbR}3sL!1`Y`HPw#4saZ
zqb3w|&xgWCxT<Z2$3#IkB#dcObf_V)^VlY&p1I0EA1Hy|7?raFF|0SmzAf=@i+oWL
z)sv%m6Ja$+SjCnaP%c(g)a5HGE_61`NwZ;!8b&#$_aw7doGOH5(Ns>q$|EL<qILY=
z3*>PtarHz=pXQQ)rw+0pM_2E|^LY5sNR;fg@o49vQ9m*jIHIV~*JqgRNj&3v03_LU
zOK>a{-B@!#x)jWmkm%tkO13R;@f8-$PJV=X!>c3U!H7V_*N&J{;Y7WK(&r@^@Ea<c
zWV2A+|LI89b$+sO%I&ZFxuT4~x%V)6#tFS^syFzik6`!%iSBjPBs3F}VrDj|)&^@%
zP{kh9-lC!wC<NND#0U5z63U4*&d7h0#^ywCnxv`+yM26RD8iu~O?#q0SppC>Z7TrC
zW~J;1&-x4hmCP_!LRq5D>_@CM1Uqg`#ZA!v1ETgU;zS0E@;ovIMTApiO;ph;?utmR
z|992D6+{FyHAPA32|DByI>pJP0W^ukJk|cRjx0i87>)5%2hACX+xcB1mEFVV*nc?I
z`RC_#7@t2GEU7&gX^o4KVHE3L6e@4oc1uiVdX`TirOOL|1hnxmXr2)dspt!dJv)UV
za53Cwq9+kq0O3eD<XZteSs^#RrZE_lAkukco2Z?CltxVzMC<xvw9-}sf!||kr>q5n
zw(Qky(xau@@G>>*<6hT%0HnzbT!SceoONzd85%6&`&9$kR-(d0i-}4GHnjJls1{#Q
z*Slw1iNx6V;UtK#9M*3PGt*+|-iN))rQ?}cjih`Q35B<LL}bxaIa^&uMFFf6t9;#A
ziz0MVz3{1)%C_IH>L^CNyh-zE9|eM8ZQfBCG*u4mb-^I%!hCsrS4@?vuyt-x>;>+c
z=D9kblZ&_hovI1#sqnhJ3#lN!N)fVkpk3Ik&&>BeK>D{IE*M1#U#0ugsg%Y*J!-*a
z`rnQ^UxtxK?`MXp!AdK=dUoP(JnF;V%F_G@ysJg}5stAP7UtF_4LJpfH46iGZ3MuG
zhg5Uosyt+0;#ik16emBjxq{}^Rtt1j<CDPh!u-lbk<5<nE0^{UHzQ7L@r|61l~!;2
z1|ZcLRH?*vx+R;_u`l|iZ`lrW0Z<6-9W3~mGS+cObRe$0@^>nZHNQ*bEFXS549x`l
zDxyM5w<D2@)+Yi-FOtTdQ$u7>4VIst9iP$zcYRFs6O5A8)FM^HcUpKq%raq<S^=qV
zHo)9g1JI8ZR5)aZ<|5ZPLMg}3wmY689)raas`>5yCJGOOjR{aCuq%E?YHV%=a9iK~
z-n;xNek$JYsMc$HC{WA$+l;g);~$Zmg>zs!_%H&G|A(6u5GU;m$lafsDfYEcRG6wu
zmBEPY42}*p5}SqTvA;<9c#f{ci7fEoKj+uLPO+WZv0&?d2#WwWhk6c_z-Hay@;iQg
z7%KUSY2vu9VEtArsB(Uv7UM;HxCE;s6eGVIU5Lv9BYzNH=j&j#EH%=KXv>(|E_K&*
z8Hg~g<Y`dg5B9dKY@KkIL1#->N2fnWdq4^S%l&XI7qj$jn*(U+ys~mx6sKFfK*q%a
zcVT(~^U!TMGYAb?&xN<QDlT<E+@!db&Fa=rP|P>ns}5hCb!I3yYIj#M<&uvL7C4t8
z^x%_cJLWCe-)-SEFMPxqEgofznr>#yKzO#rZtd}8ek0GTR7zoLqigr|qwQeW0a6HM
zTRi<~HuEsDV&`uae@Szt1Wsq7w;Fa1Dc7X<P#})J5dRw>MpUbPo1=Mw^s1Oh(oyz$
z(O0H|4)6>csC}uA1v3J60j^w_Dx@f4=mzRMu(@x|i7g@s3|x>5O16sEiw)40eO&oL
z7FhS%R6owoAk8|@aHqRW#o_9>pQC&~4IFd1`~D~xc$xL*rPU&y?s6CxdtZw}%GueY
zHkr{0w5qZF=Pf|w6TrHGz+-5*N)n&Ju_9@_d*dPo5EWS`f;3pVVx_5-AgcfW!<6qM
zlDL04u?;SL-}?O1r5%5+8k`oSCzW~s#U;xHzixT6cZ810(j3k>7)YGki6R53h|tp1
zE2!TLCimXBKV6H?AR0kAa06zvC0+IACL3FB!iigyRMh+PU+O*o3Lfsdy~(;P7e{(I
zA)F;^w4y#(s&{m9WRs%uKytRyAWkr^nSwxSp$0Q`l%?Fdbf0nkMG@^wsuUk?10W2-
z3@iyTAs{BcKO7*p{F2$TmX-a9i&fj#MOj!xC)bHKIt;=6+fqwf-}G9oMogI(3RBL{
zqzbFRqySSZrbz6}pz%SusUj~53^tHD4oD@NU;S@GAZHzt++S;XP+Sq(1D7cZd?2*l
zrT_Kz$p}^e0RBeG4a-IVumeEhMm<l%0=Mzn3172cKiJFY2`Qzn2Bfd|0;c_>ZdaBF
z(f94r?CiY?^}z<+ZW17hoc~UH{f@MmwOT>)fIo-Aga;A1pqVfSIJdL7q3!21G>6tu
z>|$^^1nhfE5UMKOlE^1;)g>fqlpJ%#&&98J;4~{j0l7r$(r9nG%)8GggRoWkxMmm;
zNJnou*tMJwV%ZvOTHL`1Z`=!e;6J-wL%_QhO*rK1(!w`dUzooUb|Mb8;l;(FogD&+
zL%TEArH)pEj{AJ)>;eaWWgRVjp@V7C9#BM~)pvFRlp{oqAp7I&!)+xD24P!(dYC1q
zb~UfHrqnS*H5TJ&44!;;*OhJruzkPIy%ME3Wkpfdn*_yT1MR_-k+X#}1{WDVmPfII
zT)x70hHuaqHkR=lPA2M5cdWdQFIT^H(50p+_Dd1WFk|!~Cpl>hvX@8{q`qTr?GWbm
zqJEAtOGb#WgvygKlbia+)0P6LLe?bq0^OAFmm$wv3+=Ky;KGbtmGzO|F+Kh9`WeyM
zv~T{;!5|nIyb{y+V<o~HB~=dI@}u{5Pcdi=t*$Dr`XX6lb1-%ppotUNLWa%E-?Za;
zGy1y|{c}RtDI%e$HaLLAM6inowWFD^ZEJ_~<YBb2)<H#gGtO9mkheS4L@{5+W87!i
zRf)nV;v7E>Wqtc8v4<FCYRrsy3$Jw}Vh@&+cvZ*cIa!&S=m49pU}x(b+FlMUNCioD
zz&vrCe=3R@p0&SS!$tl{DgFX&6JZgcLcD44e5YN9hW`oXf~$Qr(H5ZBya=;@at|1$
zf=DsFa9#JMsnlv!2fR<TEG`uJ@BXGaP2pvR=4V<yjbIy8UWFaqIGhnV0@C@fFZF&v
zXU8Cn%JC9<<4(bLd0^r@ltnLt>|9#mLa^pHjiN6R7FsJsNztgL{VBq17ZhnJ<(-uH
z%EZ<IhmRbzfB*mhMayrA5rPnpOp)KqQ=#__gbRRVVer@)Xwh&}s?#Qtz5qCSDWJvO
z;rvb;hLoM6_yot>0B5k!001UmTS(iTPzOWYyCaWxBONgbZZ2p50A!8u$v7UdUa^Hd
z*K^m$vkOJ0mM>4TY+e5y7(E1Q+SiIOaMzepV?3OFA+oNX8->~Th{$06NE2J&3)ds0
z)`km+*;IXC#;B>@;im^+M<4vws&?9ww5$VuCI`qt5b~K3^RJWLe`9Z@A#Wlq*BxIu
zJ!8fWokG{zm>^uQ02LL&y3kxy<pVePZ@=xXL{C%lvPm{LT?xCp_rT$a?<CB>cIjk<
znDd!xvK_@*9pR;BIx*J@?6`*zuxhDHrIeHY;pIOT8!><JeujD#Zc`cQ8b85)xJSR3
zM`fxqOy}^2_@zz+>sEj8p&nQ)fJD{RTr8$7k{ICf1+ib8@yQnVp%DRwwxwsHB4*QZ
zc`y)C#@yAKy?+{%4EKB_b~TCEiZ6#q@{m?Arvslj)&k>MR$gsBRk})~>P`b%Yxl0j
z);P24RpP~Gj}jN5LFcsXqGC=g*ePJXJ?`8Efs(yap#O$+rZ^Vv67MO;82iHgs}cba
zO7e?ph{wet3<3MiEZz{_j}NJAH$ywH@a)mEa0tF-{SJsef-E}tOZ<x;763un1m;)Q
zZ_SKhRt$ihXd_WigGC&Ht%v{*GWr2rc)PyDojL79f|ca4Tm1ERiDdcr4ImP@asuY5
zFc@8Va1NCq=WB0*eS>7-l?df`M^9jYIK|hYIfrL5No<tAV89b`<BgtEar*R@SH)2v
zr{G`M^2J<q#p&vsw%Dp=zvQWYIPIhKa;x-eXYVJlw%C<F4R^>~CQZ6WwarBZruz&U
z3Ab_d+P=md-^@$bwb>K7>S*F}oN<vW=5|=zlAZ1#NwyYP0YbcW&<JqVK_4Dj5p8-n
zMIQ|FUU!r~CdpCxT^B)$40g++_&6V9m4bFqaA}$S=|Gn4)06?7#?g40k&WZaRprAE
zRYt*DS{EA|b@Bz8spca5riJmBGyj_@2*4-aADQJ#`Y(>E>j9dDxON)!UzMW#`4cwo
zvAw)zmVMNYm*q1Y=?M=6(GK)#zrCxBV#=Z?=u8{wE3()E*^zfW6W|%;C8)5B+@@0b
z^&^g427B%BFMMZw3qHzKvnji3c`u?JO4nHCnvvq37!s%$8(W|cP?p8*&K}8opF#2w
zBZ{`KnuWxb8Y{q5a;g2hhVuH&+z5;{;dwsg0Mg!r6EVK*uuh1H_!;uZ^mc13V!Sv{
zwO^#5(D7oc8Yp~f2LEtlMd4{Go73Uy>N3Czaj51159wG@PBAy}CJNYhbOWClR#F^r
z1%Me{@fOWm0gm;Ts%{-zsg*Bb;#f83t_l!FY$yN#00?A64+lRpGKHrH6!#EAqW<aR
zyT~_x=)oyZg|PqO!V<Vowwfnl2}IRvTG2>ghetS_&7Z?%V_<1DaiQZVmTg5AjG#eX
zA7mE7A#mmhY`G(qEOfkEP?5HOzBR$c^KNOc`C^o=L_H&(anNp55G~bm7s_r;)-~~K
zEmy7EO)l+qATZ(Qtlx-ux;lQwcpM3V>lqWg_&qGV{jizbXZB(;@abFw+SL_TPKldD
zF78>+)lAd}y~XvBV667;TkyTmWUKNQtN`|>(E!Cp69Jm0rF{RosTh(Q+j81lK6?(v
z<D>P1<IchWnVT{5A=B~U-Lgx&z!16pn%nqnQh6E~9(b3aNc3b_jhY`!$+sZxqNh)P
zFFgqLs$!1B3$Llx`864m66l!zGWK_=$63BrVpss{-^E<ZGjH}yDe#)V*Jn+(U1BW6
zM5iVnh#8tby||jqZ!Tt!Irn_EkJ0DsZ_eKana)G48TG6zaTnr$4n`L7Ep_}k_J`QT
z1e{wtyu`67B!Qqbz>t8J(8^3%&}1YcRukjvnhIlYiB!#25P_d0`Wx@FilPg&!GB6u
z%rfSyka^cKu4Ok84<(VO7#;gr5wRUmR}u-;yGp2CF{8AuLb7CmtRh-%rw)e_j`u=<
zAwpPA4T%WbF;DO#8q3x9dXxn<=G)4X(J4RKzH6`*PEU+}(s~SW2VYNxgxYr2c$bCD
z-v~X;IX4@kDATFI9&$d&k5R*3MH>cnw?Wv!m%S<PX$+fUV~8Kj{;Sh)M7tY1dhXgO
znf`a?@`L&~MN4^eiHW;A3}n%@ZFj}P-w*<gF?+1Qxg7H*@-u2HD+S&9osh_RSU1i0
z0x%vX!*tKWHU1GG<&=F*wp<Y0-|zyEgXW|q=|#otTXS@^Iig3nwPebGK?UShxtsb5
z17OtA{kF8bNwNvQD-o38qUU~+c=`}u%bMVq^Y8-nHXBJ{3dz<qKAX^nGfi2y!n_>l
zMe8h#VR@a{ukAc5PeJoGA0#d<LoG_)Ey&qLF+dTR#(>@4@QOq9_wg%hZIKLHyv)i(
zQ3oR1%lA2hLp0mH`jUD+lx22{6{gy<>+bi`%{hyMptwtv>$M8@EGl|gV4!Pm`0E=#
zXR%?RvO7Y|1`GjGa`7;Pxh#V=M7{(Wgd0M}o$2w-%J|aPe8#-e9#n!zA7G(X&uJEG
z^n^ze4{xQz?#eRlz0+7D#6y>=XLF``GAUVTqk^_5($Wp5g=<3Y)@z=zKXCa~uV0SC
zkGBzG?{@`mh5+i*t|r5&-|hZ$$Fm_2>3<HOkB*#7*!3C}L6iovn}L2VE8+K=#cAgX
zE8rwb{Q{3qJ(av4UgF6bBWg<L0%I$snu?`>y)e>q<cx8fWg^iQI0ADX2Nlt(pHt+s
zCD}f@1N$O*8u1e;d-X+4{4~DUnn<W6=$2%@bL#*HAu8aNP%_Yi<hx?sybnE;;d=R^
zyIk`Ki<@gMV^)vkXP-?XFttCttsng$d^qy*-R``0N^ay*EWc_}=nswtE!y0OJz_wm
z{M0!%hhJs4+~jw(my$$xRDQ!<JP;3?vN*08JA`pmWR8Z<2*Lu7ou9D>gX%M9IdY#p
zj&$oa&9djjv-L<KP-(1#7}2#7Fhcs9Jo>e~V#Rg_AA;aACuA&u;~g{w1MQX10KW^S
zVkM0bU$>?f+J@!T@(hHj#wT8C9NnR&EPn9aCAY-gxv5cohcURWNpdZB)*=h4DyQx?
zQoOt$)flQQoU!>`A9&I{n<-uuEq5Ikd2vc2F#@N0?v37N38-H=F^C?umB$5m&V;&+
zb>x$$FvZSK#8Hom+Qr8nPq^1g{74wR(Te!O7fLiQO{4bQ$#_Ml7DiMxU`_KKvCrwK
z>3q|qnuNMYja<fR<j6{Ib&f5B_%1fEwZah46f&>bu{9P-6vJ{zl%iIdQeyQGj{l1Z
z^=w!6b#_4K#Y8XP??jh+L@wT|pXQ4~o}4x(r4TBomq<IW>BK%dNDoMbip}4O_j50A
zoNxpfT2Pzo?3Ox<T?w=nRLrqmjFeXrJOL*9&*mAl8;dvw`LX~s#5%tur55_QUdu)W
z)lLW0`ea}{ZL`y&Gh%ce%xv!|H-c^!pmROk82W(C&O`HdMNyl4diw!bc)5crOYJbm
zoMK^57M-SI@XCK_9!S<4b>&$p9_i!4GFVy#d2y2yRqz%+Sp}?G2c|5*Ge&hV{m}jU
ztY?R6!h+Z9y!1Pr^=MkYRz-EN-#zd-Kw+{so8{ikSNK&o^6rD0`T9@1UemSkZ7}hx
zU_VTyyvN$&<`I$F6!blDa9<|r0+L^tHwh5}SS>dAGbOf*wKz%MJU2I)Jt*!7L0Ud_
zxaQCNM9;Va1<Hgcce-J$O%1!drXNlVls>osirVV>^LLfD>3jt-7B*LB9R49!J$SM#
z*sD_VlcA*)oyqn8yM_E7x!giPPeB)I>4>LAOba@prEPPFn~2P(DP&ffc#)~hn}94{
zykBdYABH9jo5b1BNHp6-{ZRy6$JocXtXg<ZGOHUrA($DoMiF2H9sNhvG*GhbH+bG_
zStF5X5cI@p4Y=#L%}<^+dM8i7xdH<r@_@l<6F^Oq4A@EBi|o5OJHVXPvWYi+=fIEY
z`2+LPF}-3hd>V>B@&FX-EDI$x%^%_8165&y!GK|Jhe-3C^FhA2qj#JQ96Xf?7GPX3
zu%IE~cDQ|*7j5{YmYr-NMhZJUKwrEqKv1)vJ~g5BK#w-bgzqWbcaXns61hNrQ{$hw
zK>>hR_%35U30{zT!Eiu`1Zr+)H97bX+5OC9z_rj+s5S=WA@~7gMC0l$U5!}#6`5N=
z73bC4e=)#DKreRCQ!eYt?FJ0rk7jl?zd_{YzAwCnFE{444r7C01*bP?4=Pz7$b%Np
z#zIY_V0D2K`V-Jxdc)OP_|QgNyON8Z+u}mb9<Rjc9W%E`4|?X_^AI0>2pLT<U-n4j
z(-)T+IQT6-G(x%uX2!3zITBk(mXqcx4<d_QZNC6h+*x0X75C}AE9W!_Q%{mEZorTG
zk(24YL_TzEl(FeV62p^u-;`fGn<tzERIL>#4wWV-)9s?>lUiFai?`}*oI587R%(zq
zUq522o3RUxXCgYO=Rj<h(mZ#-=>6JW1USQN3(0O^1!bg0tKXy8a7DH}VSg^%VU(;B
z$$ZXfY^R2_VHn->>{qJ(&WDXH;M8f90OGKEEX71e6jA5b2{w)=ujGF7ur3YVEOvnQ
zE+D4lfQd?481Kfi=`<~%Ucq^?L525C`d+RVL9u%pZw~JQ%mhV~4wp#!;y`f2?bhGQ
zmX{u3!%Y13Mf}PrPq2sJoN7BZ8YH!%5_2ibUgBZ^KDF(p%q+cA+uUSjG8zX=P2#$E
zlraBZj#Bqh&zNr>Aw_ZLNL>*Jc6W(k?(1U}%#rXpk&h;~e#ZYY^DNS~F2=PkT`j)V
zLmkX{<Ti({X5#N9zjv4*0|)gS`yEOGqhdPzB?ptqEjYo0fl1jD&<E__jW&HRN#7%<
z3((7IGl%=&qYP3yVmRV$6mSmqSZon>ru!2a<C%+WR+ya&tBgb2J@I`CYi9)fnrAt(
z>==E4I>Phvg{t|@YA0y!x6o(;-5jh}RqvHjEuLcpA&z`vmd=dU2`==X*Zt}q%BGv_
zoLYJ1U#t|Y)PT>Jf)P#0Dv%@qc$O~dnJarCqtbTWyippcGG)~-9-z%rOF==|Mh(aF
zLG&2%kL5<cs=#4Imu|4W;mRS6NhcZE6Mnv!e|g-M<Rd#uK9#<DcyenTy4Eaf5j>@)
z%631~Z0vuV$IpbcV^YfvVMWkQxMr0dks%<@IunN>E2a)qnWN$ENUPkuRF4e4rz8L@
z-se%Z%y-r{5Z_i`7_Y*E3(<wqRr6>;xY$CgFCaZho*5=WJB<-FX)-!Z_>EcUm{$ME
zbDUqU1R^`!_OEtScE5Q<@;bb(m(=kdiTCqs-oXShx8`Uf+rQTy+E_|}s!|_T2H>UW
zvOcXZR&0pQz4j!*II~HfLDn#nh+7^E@pbDBg&Ns583A)NZ;***L9P<OK&osw2ESR2
z(SaH;F9-!mO-HsqzuCT-?1{sEvwHK{bKVJ~q=;p(;zZ6N8lM8?bSXq;+`W7}1b|OL
zhB0}^l|wBl!UQ8RxN$vDC}OYg21PMYEi0!)WyY~Ty;VzSxNX@togb7$vulO@dSZI=
zY{gjp5pQGK9@@Tq&<?kTtQImAv=0pn58rv#eZ#A5>}K^I^a&c}KvALHQw-zR>mA@Q
z6K-!01s)jWcruxMa#O6cf}G6^{CM3{I48L!_h*7prZp>!@!A`d=W7dNfqqfR-(~?k
zXbAt}FELpFOb<?+a*jkvA|U$FSlS~WsFsxfJ;l{cG(Z(+@tPV*n%+kXUT^Xm1|tOM
z);iS4y9LeDLsJ97yjeR`jeA=fktQDpj;2aINT2`!00ElbV$4SLg8|ut6w<OLT>9*j
z^k%Casg3_+YAy_!j7l-xG&2xn3xLoAeTr3v9rzO3c)t$Lj135$e3Z(z68*tlw(=P~
zS}qVff&}aMZ#I=e*e6Pv{nc)i2mhl!eVcNa@$*M2qPh>v)9=ra25C>1n=kasWw`|q
z$fjO|09uwwJWE8@`l@2J7X%0DMkun^zuu$FT+p2?vEQe}<$Fr5ZqQNHr$xk)#s-<U
zvGM`t9y&AVBG#0~d_xC3+wZD4tQ{l1uYBa?Ip_25)t7-k9{d0^Rf!etdyr$;pa294
z*c`(e>!wV@OQ)e!z=o*m#W31iMl!jNw%<VtrUW%dRw;#yu3~w>WCX3%%~Rvf8S5FY
z%_clQ`Q!LyoCKBuDJWA_@sah`as>W1`Ssm5kpe{M0%5PRLgu>wy18!Wy4Q1T)|Mus
zuzS?Swrhx>r)u%`Y#8&A3wn?6{*4O$#x%K$@-n?u?yXX84y%qO9~6(LbWD<@{AmzR
z)Mot}vW(KYB91@(>F7ixN(J(oWIQ<B*;GM-tEAGMyKWkXV4i|uj?g*bsMZ~<bi8v2
zeGHGLLHoSd4pN5W*_Z8UeF93nnTg0Hn(;2_dHF9NF0!gxe)*W^5t!D>2#euybsD_Z
zgaa$1gRIGnMKDgDl;<^tkn0-h)oG(*CKvkJ$9yMeQ|0#}T1gzr5_SEE@PVA>)Bms*
zDnB|GP`u~!o>1?;W8o)_;sO3HsYsBk%D2({*S@;eBL1-{a6_ahHNfxDW*2qiu~gi=
zs?CW{Cn%rS9kA>kRl1M1Vj@?v0^!PG65yKWymG;-cG5WFRZATKW&4Cn=Cm^r?ueE7
z1&V5had6c+(dsLVT=Ap@nm>DNN5%MDJ9vkTi)XGALYPCPBKRX8pHkw1`J{aL^2%72
zKxzGA*KW0FGZk3?WOA15;ljvqR}>w8XdQw|Q`zX=k-ygU>tDlb&sG~2&d7RkKdDw?
zJ8Vww&4j%8^zg4-wh=c^&Enrlp+d?j<kb`Q!&P`J-FE6X;-^H_-pm6OrB}K+%Uaa(
zr!AFvWS@mj+bM<7+pQJ6q%TwiQ5&?g;fq5r6D!=#WoHic`;AcZ6u6KgQnrE}^TuY{
z-XtKQVPY^t<{d6{z~zE57D8y9g!cNUy)hLag{BFK3If`4tE?tylm&$ZX~`#C4_AnO
zE2^y*4g1edmpG-XC*1d(ABZ%;4Zd{?G@5yY2x0SdFk*Dc<PvilmS}qAw;Q_&kIUAV
z@)!AxQ9i)o64pbNVAHb%kjBWna(iP#KF(X-f;r9HbNVxSJ7NJWPTV4g?1|!{PzQQk
zQJX1pvJ7nGjJ4~SUr(BKYz4D~PlHVd8*k@MRa_2xZek@95bH?}cbOB_lOH~`7dH!)
zEa(Hy?GKa88e+vvq3k<S_0mVkQL5PyjO1DYjXma1Yh$&hZ(fgWpU&n8Kt;Y9cG6mK
zrMxi1(_v?1-H68vJLpcda1YdSNT6X-?Dyu=QzY~cb7w1oWQH>ogGtBw>`dLk@o^%C
z;I7PVI6n4MgJ)uj=;i-Amm>DUE8aO^)w`4S3JA~N?3JM}z;2%zQC7odu&WH>8?c5P
zW++@8k^z0@R?3WYc#SZ@(6TPx=5=-oye#gX9NGWsEhSx-aXnXEbqQA5PrkIbb-j#6
zT&^S18TYOKmqmZC08AZ)dqeqUY0TM?&&{`g`1`t_isiHAin<p{8Ni{&K2s5SH%Nf&
zfClTihbM)C!bGfp*|Qluvtw@rajF*M3eV`Pitvm#X1wgKAl><y#r<*y!t?1niO!Z|
zT}UX7Z$2}T1|$!vlCV&sjA5%?v{;>VQ(C&$)qF+|<d44Q)ez@E&%FW$pk&-9MkGU2
z)ky4x()4xL<j#<YBETPt=($a)A1|LA#$kaPfxcu*cb)1ABz1l1iIlM|i)}vbi_(x6
z<R#f7cVuwtKNcfV!IAZ-r5U6X$opyS=LSlgUD4L1SX}PH&95+)M1DUN_XR@h1cL1$
zH>=goSe7Yf!$*yy!jUQqDe0ON^Wm259;3WgcrRF#TT2HwoEa>usr~#E7>K{s+0EBn
zP}P4lwmH;vJI6rTUSd2s^G$Wve343w4}b5X;lgq7u&V|1@SAmilB^3<`f5gQ@qan(
zLf8bpurAkLy94e8wg>LZw>c9&2G{Wg7%0r+^5)Za`+zom4STMyOzDnJV8L8&y98@X
z2}|_YvdxDZ?D5@S%T-|fjq|B|Rb`V#HsiVFfE&#2V(8KCFCwl76o@~0*!CHR#9N?N
zYv2D{`TxmQuF6z`Oi+HH^)KBd-jB}dDTR53-!u0sRxnvrXpFP)nR!zXe*_xiL8MW(
zM++<MuuTcdE{-V~M?kkJ&=yr}CDZ<ZU!WwJft*5@4t`QcL0!j>d1{TIuxo9xRbxuY
zIMXi4{v#gU69M-ZPI_>3*)glfjuD21G*_wA%-=XAQ{Clz;FvBaX4Y5TkNZjUo(k^{
zJz{!|oS2l(7gLuE)s&1O<c;b^`2e8&Mr2exl)m7(@{PaZYPvFP^_{PLZU!i7eZjrS
zt&2TWM3UlqsAw`fKQwNv45KMIAPQVJARs-Hda<OHDEr<vY=p@$uMZQ?<c9vg)aAeN
zCTQR_?pO7_A>L>Sm{Wo02uc0-TO!*i;XEJ>y(!3t20z)W?syn)!1A!!u737#rD%7A
z>Y*DbczJJv3BfuN6)l&u^qZ!PY7KLJ%qUVyfYPDS$W;e%?=XUKoJV!>*Pk*viHO5E
zJH=mUT-ZX-7w!n1NAF@L%0whtqr`imF*C^>V%KQIXv&S&ERN6D5gsR&z&f|aA+B`}
zrv8%k0EzShH2~Dz7DA4Et5-*EDPjtQ!VWb0V;jMVy(KWwD>=5oMtYVwkSP;A`3kU>
z=3(oe4oe4y`a_2a|F>WO*3&w79dE2B7)>cagz%5=Q<Q^X1fv5D2??I;)hs37IBr)^
ze;PdCgF_S+YGA#kb=3umNlG{iqtsUjGJq;g=lJU_(ypw)%JHNTJ+JwVsSTyc>At2l
z9#j0_L!<rUHYTmOaB!v{f>Ri#S#8YH%ZO8xl<B3-;M1kyr%dp}0eRGng6jjJwv1V3
z?@z(ibAc5Xi{0o$-wyphgO=+^E@0V6L~T-z6KiM?EHt8cDshOFEF-4o8P^!4<ADC}
zcXz7h_wQyOQ!!AR9d3oS>J%l-%8E!1_|Z6Z5Ipy_c!QtEh%+#aI@|}p<opD2T6M=?
zvD5%oaILXeyOMwcTlgqcIr0OuvMh0zLMZAH&+R%sBWSXzc;@3cT{amYp^f*2QFPys
zm?lf5jTj&k9=SqZVyy!oBOTN{{T=F+CVjA)7$#K$VxMhP%_6+9GuC%$#G@dszVauz
zQ2P&8cu!HsZ)GJqQH$4~G-tj6C*=>)$X)6slT2hDv9PpFGfyFn4Y7U667yOOz<J;<
zYjIia%xZfEJR4h=E3#fSmcbiBAa=bLM35DiuW!PnEdaNaSzM1)mZQdyXpu}N%5~vT
zB05Qz>J}*M)A=OQ82sOzidmD$@>rNAVr0X#;egik(7s*wz1fGaoUGVDJM8Zg4uj7<
z?#+nOTCLf5Ms~g1L~9MKcQTYr9ALL3RS#aFG&HZOP{>trEvU*Ia@UvaecQX49#HS|
zi+Zt1`M~0xw>(i;ajq&}&1i_hH<Z)Oq=SnOS_G^po133I*)^((`H2%ySOHFEdOS(z
zLe>A0E67hv+%+(L3Tz|<{Mjv84lE?<I$nbGWrB3ohqSA-y3bbZd&ezv=6x=&uA2{c
zkglPV9P~67di-DiAL!$GXVmUD+muMAC$R=rYXIEIz%uS3t*DfYJ4^!id5a5t2W#h$
z(iFg9_^s()iOH0XzHipK>P-2v=8wZQB>h)#y5cB7Cfi-9lg&$Q4#{noGuRKVs=Y8f
zr2ZcG>;uRtm>kfejW7uvO`huah0k26E}i$Na8J#?h)-xBq5<BDkIuRs7xhVH7e6Z_
zoijvf>)f(i$$|uD%~N19BG|}?WZu80nC#Z=_C(usW#3495RDO8ha@<loA*7YH4^&u
z2jz3_^twH-GHXRmYO5G8SHk`8Wems2Dz4SV2qldc4=gM&^@Z>IHfIc9^Mp&dbMJm3
zokp<gxJ#tRA_KqkonCo?hIzRZ=Is}Ez{S!;cI=<(rz7LQjkS-49Y0lm@bn41ft&L)
z=ljiq$A9s$E(WAeBeE@GbG(o>4me4qgO6MbD(;RO-KA3A`>iQ5oTCBh4Sy;mFxOoa
z+1gn4^Qu;&UO55G=Rjc_j)Lh1vys@Ng@S_6)GpCtXVFF8NAJ`Y+Gvdc4u&A>@QxnD
z5-vg5E|_Bk`cAV>s`O{T{uf-Az1B%f_@}KcO|gdvkbu41KM5=;V!QGS7u8@o!lYPK
zjSqZiI-39h00!Ubkw!X(GlBmQW`XU+j0`+o!l67HR9T=A3Z2G%J{t{vAG%+QnOleE
z!!{+wgmX4VO4(FRKhC=S{DgW||7;=*j0*p>s}hZaM(vtnNv-2L(SP!SGW)Lf0H@pF
zn||}gp$v?v94~<!b;j2(qf+ewjpd^JP!pc=_kQ_XrJHG>KJ&d*2)~8aYwV%0%Yd^(
z)iT`{K6Ejc-#!0$TpsNta?v$ZlGGyoZyJ^o#^<gwHQlDsB*K>yJK?e7qc2bFLTl_t
zgWfp;`uq1v1JZw@v{(uf-`e>z)L%-pc9o#knr>+jNb`*qhGtuOKWmmqlTzy|)066A
z!c}25=2;wa&jKyoTbMyYCd=(17loqytnsTtO-x<O7m|<&v3=>2dB&XG2y`z}rE6fG
z*e`4xv9X+Bw2U|I`xhhq6+lR#!<udTCctsVAQ)-rp%wN7ES}ZjtqSlJg$C)>z8R9O
z1p7+$n2=VQ)zqPkNbVZDE)}$q_9pJFqRv*84Ti{?aP8ziA)a5}-xe@f;2;Zw{6+QV
zf@#{=I>006ExW-oifQnaJD;sMmCRHNNN9$I@b2^*Xp2;5f_S909?k!vD?uC`=v8p!
ze*!|XGA<T%YnY0I3;~DN#&5`+%i{KX`mtRNWFyDc4fJ9Sb*?@XMIZN7H=@;>>Cu>&
z0-ONlzS+d0MC#7Rs6u~q<z;K@3MSr6X=|vDocm+PEZ`QKyZETasj?dhB$IonjCmS{
zd70f6CJijegOm`{5pA`I*NTGj@DAzRMf+YE_cZ~{kYF8<43-L*;A@Jc6cTJxC&Vp=
zXi;+L|B=aMT%b4t<XI84vBhwp3CoA~0lui07V6A7;yfcGzoRy#H|wY4DsLz1$v>h!
zPt4Z;(n)qa<2zNP<tRd7DwK(|)clr2%-8wDetdQS^b?RhVvNe+n9(3JdU%DOQ*dd;
zEj2Qvd5m&GpvRUL`5Jf`J$LaH5GVW?hNVO@VlYrThOIaA(Vy51gmMYV7x*+r`lcKM
z^9dW?jSFCsjk{&T{W}&PP9rkLd`+|XFqu|I{$pf|3^b7Hv-|veE*h@WKFVHjpwLOf
z^Btdt!T8w*#9_|QWb|}l<CQ$BEq-O{C-*jRfsGFi{)3YNXmA#0Q$T%o^WbmME#8!0
z&V}pRY*fiI>bgiZSH!=@zbyjRhMH$zOGSkR6IEls+y$c^`I1m=bZBqOR_}c@h-klJ
z)-l$Z54dFdFml${?b$C1WmIIE%5%Zh+9tc;xh^gaSh57_E_Lr?CXU@8GJTk_PY3tH
zrk`Wns<GY_!+SZ*-Z*q?fSCq^Q}QJzLg4_3tMkFs`v?B{%@>7zxBUuJ!qae_BUDcD
z$;FWfSL}49rm`lcylRv`lrqDPCosI9M2&#O-Z_~7jKS?urhVJyoq}f==*o1!izi~$
zFC~LAHuF@svh@2%v8?mHpUbvsImx#Nw$Tc+0Q8ByqmNUU2A<7vCay93v`ymQOu10{
z=%Wj&k1i0mLQ`IDCOLc@9%84(2i&LBEnHc)e07>KB05d}>4L(S|LPc4(Vjb=msSen
z(JBcf%mz1~0%`)`1-?By#Y9x@z&#~XmG{8YP??}*@ij_5Jc#_l^Q7ZGFzhf*=Q_mO
z*fYod0|^#<3=@2dWK??zKurEHJp=QSTZ%G7NOgDK6K~t*Tb`>P$%LEC{aS8tYj~=Q
zP7sw8oR;6qi%qs-*ZgPy_zKpc-Oln`wK?j~DNHfTq(;o?U3rs}>`<S(dLayAi3B<d
zy(>r3lu>VJh@tj*+8&XlIB@g3a?^Y0NepvAE@ozeYERfWxLFCbUh^N}`!`W0a=t8@
zhiyaf5cit2-JIv{f!xFlW8|ED-ZN4kl^+OA{#I)XxF!@26~}uDT)?%?NEHHs-M%nh
z3R~fm*x#kAzhu7osZ@%@s^MA<%PDUINMJ@*5>PJg$}7z@6X9DJVTP|4yH|swmhzI8
z+3xYDhPt(o1sfNRqVH<mYPo82{#CIP^SJP)gF<>rwR>CAkw_@ya=Vw;6klnZdUoa6
zjX7o`*PGY_-kTqHsGyO#wu%;)dj!X=yqnOlU*az=yk<nVUYDTWeVNYZ5=A5JRZi)l
z7$Z<XV1J=BSw{P*Uu~Ro`DqtxCI+~UTTL8G4oN^a6;lMxwY%$v?Ru>&fi?xY8OZGy
zJx>Z-oAKx}>4-&kGgr<f2q7B_6F(%kdxgvMqju`4-H_C$B58U;Il!aW=|Zf`LeJiF
z(~q_EFf>-auyBm3wkiPI9sTFsLsr~HlZ*g4CkKhdcNFo=<_#kSWVeM2>kI8MwVG+t
zL~jw(d5tXXn>!f;totK4dI5Iaum6BeVfaGQyI)^N9C}fiZtb=<KTh#|3$Eud*}3*J
za*D*zoVr@jBuSmul<gUKNszJg3kGot7lIS3qVm6y?u!s#bE^}SMHA;I3HR$8R)B~Y
zO10HR6Y#S=fWS_sc-P3KVjUSr7Ajk&4i&wU6(HAHVf8IW?+v2<Hs^#_gs-E%D%5af
z3kL!oixo}rLPnFYwBT`_9RDZ>`?d4>hZeJfD$9-=!oV$ier4KDN2uE2_E8~x`Wbxy
ztaB?wN;zEN9&KAtn@usI;qa(<$`#r0!s#qhpl5!c;-5*ytanuXaCdtGw1}Jah=vD{
zKy=l5k5x}h2)F~w@;|3|Tw&03lGFkVsr$z!uzgl-$<c}~hGyx}rrnc?!t5}R7IcZM
zexNPimXg@BYU2A?-DR%nYWM=5amC(JmfA2Dc5c#WgQA#Q(#emmNpHZD4-#O`XM)bM
zjetq`!qO5X6Zj&6!>zGZeV2La;xs#8&CEd%&g6Dj53v>5mou@h*YoBaUAQ~wib6LP
zd<q{ryLz1+M4-6YXERd8Z;g%1#3y1#K*E7cJt{S7y}1lx6%^S;k5;}v<{s<u8oDY$
zxu#Cy>VOi7R{Tx(Lf8_iA23`K*i~`|%KCb=xIkMf;qJ0=FcZD)Y;X`nHVA6@)tVe{
z8E`e1WpZO`#dz#Gmyp=3ZXW2ts@*(KMsc>3(C}QIyR{*DEn5QDfTg_YB<&8o$`8E}
zBs4TXLztz%?RooCyIJm0P5$<ph+UA$;v7dlaVJJ&>B^l=v>_C_zkL;VUJ{jLPk?vV
zn7a1txR7g_u^UioWsw_NNeD}TP*i8p@itH@l%dQBUu6Z4J9&95G)N?{Hoo)|fZ*TD
zY_K<X`0D*}in|vwI3WweJ9s*11&`#7Z7D1XhyE=EDIW{wa$JDU{X;^TV(q$HZezs!
zz{7$YmyU79Fz2wxMG^8{<$moWYzBNVAQD9mkIFZQVuP7`<4{_E+<m<3+pLU(nx@Pg
zp;8eJd0&~$no;eSCw8=gkkf0#-pC(HUj9DlRd}v4aPQb(^_et;D_8wz#@M<o%eYWM
z@1=<E;##CAAWxmEZ7iH(2kKg9Q7sBTBkeMO@ay>%MsCeAG12I0Ek)-k&=C*nA693z
z8jtbFK=gjUwKpsS;8pFL{qh**RF))^j{rxvm6+VPdQ+97l(#gNXzZ*R<_J7Kld`f+
z%~MaO=ETzKcQ*6>H3!${WpI-d3CA=}tIni?f;<e#c`@+i0Tf}=CG$3s1*btCsTtn7
zE#>)-A{?AmhOWj3wm~(unddEialD@N98BsaY5}o#HQ*l~ok#1b$QvSrUk;b8h`P;(
z<7igzwuw8}Y0yyaSiF+<QS1p(=aGWoFUHd#_vTNz=vZ5PKBWXbSk(<T33ly(vsTdg
zf&(?{vpK{;L!n_^J@zn-L)n4&{{(=HJI{&7VDe|-rlb+yb)MV0jsSd#+#pFoPcpUA
zp5Y9mv+0qlT+Dz+V+4fyt1>M;7%6-X?D_4uhwcajnH)w~hiY@g*6;n~cj-3*BIKNi
zuoVzpy_K*nFNv!55*x_Kd9Tp$Bf6VWpv9^G@o9*CMf#xJVgqFH8ox0qFcIX3y_R4(
zDRl>$NEm)n4s}C!6?_)pPhQ-cb{s2FG-u|*CCjX$jyC`hi*;84c*IO+jwx}?cI03=
z1Q|NgToUoS`J_!SGqS=%NzCp{TftMUQkIJo@sAJ%ezAE`_78*UI6QE*BEtfdU&Cht
zc|Z(yN7!$9=YgW3aC;J{_XDoOao#$=XMw;V^`b(=AQ@is{he{iOPv)C?;~ob*5bBj
zdFN3fW(yH?&;M}6Wq69zYu_ZA79zR>!>&nj(F=$is1)JWu66!85Lx76_F!kY>(-VQ
zQ+_f5?yF48Ejh69V8-MA+g}JkrAayAgJIOxRG+ubU{6UVBL(c>+`}uO4b8pdrr^&K
z0xb_~+q`00-}|A_vhdVY6-|u!%#`f_kCZtAM;)Y52(M|pou3uwU9pRqt{$z=fB_QZ
zm!QSX*kY@$glrlFuogvgOIFUlc|t%iHqal7*U9#m_J4FCoE}l9ODEV1s<;F(lP97q
z87&;xyE1_~@5a$+8u28ZenH#&<8?9d>OV&fcxNL*i&VL&k!)lf^;yX)N${)GUSa;<
z7#P-W3KXgOh-VTh?%g^jIH+z}D!MtZTG%UDcZV3$Z!7DUDy=zcE)EwN_^}$SDGTI=
z)ML*C%^-vO1ZVVmLuG0<Y+x*Eaj#o3TVQ00)DBjmtXIp5dsb+mZjc{_>}=RI$o<Rw
ze)Whv>l7)+Q*JF&>(A_jjEA@89teY8LdoqUs9EqDgBo?9+oZ;*cDAC6a>!wl%VU+3
zT<)c9*2Gzax%t}C-j)ljNhd)Ebe=CqFOzxCmf2OIK6G{x>PE?v(knY!6h;Sk!b^w*
z^WY=3M9bxP1tZJQT5MncO`us_U1L)a_mIaD$6mT#gr@&zFT=Uuspi3hr#hpRXF6fZ
zd(4Lxc6^2GBVbcHG8;N~5Lb_+UFrf&%dVWn8=A8@Y}TOvS)uAE3rQm6iUDiyVOR~Q
zKAZ>NJkO5a<YFKd7QpLzsXL(woRzmiK?l7!!m&KK1oh)@qvu@AEg)CY+iNDc0d%-!
zP-{g?{R6y9^|%!MfMYwhf05>F4tS{>?>khQ3B)u_L(2W<e6^<qPL>qpd15SW6WK_M
zSQ>wg?61x&+47V>m541Nep+l~_>b^m>jiYOoQwz3fa7Iv+^qWehEkVM-6IdGre!Lg
zCJQ$3>Mka1a8DZlW)AC22Hr$K#{exs=<KL6X6vGD96*?RB$QHi2J;;xG8RJc7oW9_
z$#JwF3L%;AlJIv7<(rqC{7wRD?>W7|WD04^t`1wh9Q`G2;Ejunu#oc(<Cwr>x^?*W
z5Z<GxPoUH$(eD_A2Y5Iepo^V8WSR(s06|_eq)Ws_0#a()J0W4iU}f)cbOeAn0vDEu
zxS1tNZMqc|A)Tv^`9x>*pQpjIeI@U?%qMJ)y>`zHC<16x`S(%xb1;w=dJ$X8M!!mf
zC}f-B$9?40Tx;;T>*u<So-K$>c}C~vV6db*oG46|Z7{5ct_E;;W^h~wvB6YVo{q+%
zF^rLrxSO`OBA>8PBFms&d6mjJN@FW(+}Ax5r&_BXJrqUbWPT_2c*M!!`rRDN8KoEg
zq!6WZs#hdu8AM{DLP!4qcutJbdUayJvEDEgo|weuaejx)jUVe_BTIzuSTLYeIQTjj
zDVOZ9^cnx6m+x)!m_Of4Kr-$O2q|ugDP5rNCFt}=$bVzorrymyqWOQyg3`^grXv}F
z6tgWOE_am2ih))kHcCmX0cL;fs`u#p`^97q{~O*0t$yx#YG?E(CE#PFPw&^<(DiU<
zUH*`4z;4Djk6@l}Fhww%c4-RX&WS6a=hwUy0`#yC8v$Z`V3YZY@u0JScY~Z=VBtT7
zK<K@6e)?1e;{w=$hde^eR;)mBOA<z3&lR09qCBoUpVh`^#T=uiS->)&gQGZOg0*#N
zf39-f@{#IEvp&*~Gf|{~X^4MEkrBHKE)%%o&G5i7>w&O3nb-{)r^8JqokO|vmgUf$
z#s*WK>i{9Ly5B?r7JYnz8GGihdDwm)tG#j&ztWMIOsC`8J{Ka3P&{D<S<jych{T$k
zl%BKFr9DA6b`{vjWG6mvJq$--{xtfPVKy~jdkjvM508~`ws$tQ;P<tRhx`g42T33A
zOzEw5xBn=p#)_~5a*EO-E4ZuvsLt2!Rp&O0d-odOz?AAJI;#bb=_nr-1V#JfWMKjx
zUZ~P&cngsR`pIAMNzAH3Q&;E0^q>y}NwJ6aPFbicf<XSC-H#$4Kb`b()Jp#Crw+W2
z?yXcOv)Coe3QyZPZ)?U`A6-U8%);96TZxUq3(}F9xq5b)s@=in*ZTSp)EQiIuRew}
zICXxQRfI4OTQm@rf%5}|Wk@sdxt+!;wS-{w?pH{SG+;SQ^*~6e^EA1I6T^3Gw#kq-
zPDJX&M|R_;&M>w4rn->wZX+@^ljo*}C=LHr227&+It(J5xv-s7s;~g+_{pxa0be5h
zEEOw(6<prvW<l<5Y%>AvaiLJYB1ExZam6MOkJxcCT*jg$2ha`j7#}-vp9(o2XKVZ4
z33#MnoulR5fBlSqCBIEbIepM5x|^vkPs+b`7z3`~as|Vccy$QkhbC1lf%!T-)Kf(f
z=X}Cx1jP@!j+TE>V;s|?6O#@^a1d!|^dRS2o5w<Vx-@<G1B(@+T>T6BT;d@<{6XX#
zl{LeTkoxHwZLraKSOSh5He>>Z%l6oJSxAar=OsyJ6}*cRz*dRT2jeMhIQnGc>%jQv
zv=NAr(=GOCo!1%|VN#H&&;cg#?l)GZM>m9-87$1Cvt7Ul?_3*sjXu_28dj=4N$)y$
zq-GygRT%K7^B#SM7Kq1tvu^C`qARk01rz%aW;jPo(i%M`H^@jKO_0}zJN>Okj7t!*
z?WO$DLFxyZE%E~swl5|mJ=Ygk5hZa9Aj$3uIssr_;m%n-wgRbcpFs)dv#3Ex>-&MU
z!ytZ`*a%&;$_Yeb7$DMXDTcwOT^)~>PE2g-Ci!pzL|<e5|5OMGueEOlHM!GzfD(pE
z_NZR<freNEg|?+sb}K{Eh^k&E9GfC|Q@7duUZOuXa+Gk#nV_UP5Ip%GdqE$H{(t0p
z*WhGa2T!{`gIADHdK+wKUEwAPAWjd?Ui(GF=co&`InKBO?SN3}m;IoFn2RO~?{OR}
zUk;le4>j6%IP2nriS<B!%Oxh0P^YO=&3W$flz$f+u)k!|u;UXreer;Q?{rtP4C|92
zOVfS#{5=z#5p2EgP`&rP;rpncP32bq%KzXeYCoY;9Q7!U0W4`FNwc`&D~F{7&U#G0
z4f!`RN?tiv(stU7Xbt5HIQaiLU9EI<V8S)Bqa7Y2Mbtl@c+A#HGcy5u4TSRf1m%;A
z`UbBT7tSk;FvuG={!tM0*)rNct4JO1Ks;*OKYFcRZ7Rxg&YMFaQ9o?PU4Z5KMw86<
zJIYH=F!Os4(f`O%_JoBh@k@5Z+j$V5%vP9UTrJN~LgfQSS~FJ8X)70X*V}{N6#10G
zs&D`!pcw1prvsxtQAIC%Rp`lz?{h|OvFOi*sU~7IJt-2%K@UcE>cr~^lnxSAI0ez9
z+1Y?4U~3v{P82l@PP1{$+JfhYspNSMaixh@i9&(kFcfW*Ds{4@1n2TAom~S)+bZ$z
zlY2t{;Tl$VxuAJ@h8;8|nXHQ`5xPb;N}x;K7G{W}ppDX4k=Hm|?9cF-d!-=Cp6z;=
z&mBJ<SdYBrH6|_Vvx8AjnE-#(I^OUVGrSOywdXS_yEm&GU}J<v+^8?H54=U`u{r2U
z5lbTGO^x5iYki+ov%_bqhbzZk7wZ>D{WWfEAS3Y2#c5<-o-`SV#(>I(QvCbI0Xn2!
z*dxQQqGz6`jUx(<)0v=63A-!bp}WtzgQ8`YY)XWKF?}`1i7!tjgYyrz=OzZ9R;>_e
z__Z^gAsaf9ZW!hGr?S<*4SoNl*@r>{hjaOZrb*2D{~_ft3NJdSg)kCW3*@EfNmC1>
z#_N__E-b!N(_TDyWWGmBW~b@FhV^JJJdYhv$JR<E9LxSkEZ_sw-R9Hh*hi5%0u=YL
z1t7e|p2{X&QHe#3(e}H-=b^1%7ypCbPn&&DwJW!uDtStTE$jwIJ%0S(BAgm{JZ35=
zkA{1^75)?mF9W;0vH#!!H<w1WJ1?UO^{s*n%m-`u{+YPorhxrsLco}Gj{P6(G8Oh1
zF!Ox$d@2x0D-kxWvga#2Yeg^aI9hR*EUklxgej*%>9GR!nwM{u)xT2LZO4oo=VA%8
zcj}hw06ul}h3otOh}7bW8}aU0#k=WQg5w^{*DIu{G^~LePP9^0w`3pR<5Y4}8u0ea
z8Wq7YOm1Ymz?2M$Pb&!$LkcdR$qK&AB-B$VUkks1AUm@DXL^fQ`OoC^%K>g_X$m>v
zfLVmc3agx<&~|u1z5}t@;-15^D;w61uLz47l8m(5Cg_1(gSs45sc>0GpqP1C&QHaQ
z_9dNFs2UIJUB3eg(%@`w)aDV=ptLxYeQKT>x3)ncK>azMRm)U`2yfas?HRgyLEQ$Z
z6^r)*>B<E35iixLf;=-m6I_}yWR2XdOJXS(?mht};E6W5h4}flCIn0cuA_HmfKb2^
zZ1p={{*4~~^4hdr8-i3n>$6JkXTJzXf~09IOF0GHq#93c3{WtU{LrvttQ(0C*t|_3
zEfdc&wuG4d>HNy8lA&iT#tg-~8j6_gS2OYqMFYrmV~lPII`V#5=}ON^3&LwI-M8N-
zpvh6p;Zel=vSOk+0|1+j0@=A&&3dL`VDskjxRj^6yxN_W{vDvO*Sai?$Pwdr<<iHV
z4E+yg+=X?fK|4Lmh)~{ff?uwvYRAyS`mtvX!O0xiT^j*T5Easkic{VhyOJ)mO~NIi
zN<yT8WeifQ|I;RrX%ZtK!Ys)Hx97~3m?@F}hL}yih@ksH;T@%)eH4jf82<u>byJH7
z)BVG|4Qh>Hu@Kcfzh2CM*E&r3UGfZzQe`I2wogZ9aTN2S;D(}^@3%L8<r7wFyLl2j
zp~VSM1rIxYDxwYMZdzL%l{Lq$@%h&GlqRDz`@BstAI8Rnkb?C7*ygLEN3o+KwlGtm
zkxIV>jI^c3?bAn0O#Nr_IfPHB2A0Bss29Vp?BD71uI0`7)#mO9FqB1_(A7D8I`{i@
zCQn&OZZ>QC=na!$g<;<Y;goF8r2W)|_!?lFn-|BKl5xyXOyWpZI+lUFi<dF?m+r~p
zE&Ol~Sw{|Q6MUB7H`-i0H)Us?;|t(jfIhNuB5)G<>8vS4Z2V=D_0?JcRj?(&`?bc=
z!RfNId)``skq!*IA9B0%F~$%8Se%C!o-pb1Tn56Tn*^}BUk^+niTy;XzDT#}6J8UP
zEC9Sc>|HIxNjOuR^1BtYztJnCrfx2I6)bTbn5RA??9;;w?Bf&0|7B^IlLp$|dP~#t
zUV|9Lv_e32kUJnULFGXi8+~jPB9JzW`z;jn6d8)FkQz%h0%N6?Ol%5CI=kTKLtD>f
zSqBis6?OED)<s`yI4p$Y{?6&HG?%iLwXU5EZ|5Qm04vH7_j(gicI1v|6K6`5j@q!`
z;!^S=s_P-H{%F<RxC;ub=TzYvdeR-8UI*5*fgvvkp*rq6HANDjGiOe~dgN!y^Ce79
zc4^G+nEOY$U>p%BFzH1pkEYR1jqtG4ZV7w422XgeVZ4U~ooF@O#P3KbTQ!o^aOddw
zGN_pE%TaPt5BEDeiY!Z0{_Sx2WyWeG13<!?R;~cnwx+BZp%37v_|M`JfZ~NctffAY
zP$z1f3W*+svG22ojnV|x*yAX~mt4E=Qb~!jCX<a=uktON!Mc+CrdFvMzE%lf>~V1t
zYYdP-NCXVM_zbQG+oqo(!(e(HOET5uu5=Mr2a;{{@}J_9pEC>eBw<R3W(#RcME8jX
zSajOP664$R8TBC?;1rc#4elp)A39b(McB(a;J|PFGtf6Z^&&!`_*gc^5)ZV-CpR6e
z1Zqn75B6eS#6q?6h}P{T4%4qL0Se`RxqSJq?laDF;!;N8*LTOiWh2%iq%neF2$?{#
zIhla<O2`RvX0*Zbu{XNQ)zv7_nh(R?r_&{qtcAgT>PkRxV{tU-Mb)0c#ApPbh}I#a
ze5HPgk!SmmI#us}z#rFfRcML8ypg2Xj}Z`%k#%z+upAu)Iz6+&!^4*G5JTU_Z8*=z
zYy08B+h0wQmI!6G`w6Z7YecmC<$V!?u+jR1<t^j@$U9Q>eQyar70N9HQ_?Fj(alOI
zT#1Q7+`mvN(j|`YLhf~yKWj|^O?U{f2q9Dx#vmWR>ia5{gn&<UaB}-|sVY&#K+-W3
zI1zRe7vNI|HG#)vbBtb&g=#gCoDfodhLPA6Dv?vbh7g4vr!x-p&A8E><lmn?R*(;l
zI-i+F5`!0wZFYDYcwoiE<0n%f>Hh~~OtYJ7P10omxQBuTW;EJP2bBw8Qfe(`;~9TG
zBSxa*_~hFeW`yD5h{;u_Z|gueo7@aeJR2YqpaIL%rzcorX4~LvVpiOgk<c9vanIrM
z<Xm)N$Tvzpont(`?U2~%JQ`$9EF{RkURc@a1jP-qh%S_jHqN&`LVmmwe&)-{{W5bq
z@F&cA-V_Qk7B<P8^p-yBQAa0ae`3r6hvK{8X+7ouh6eZpc;_C(T@&FvZG(9uG{P4y
zkNT*@l?0swY{aChXXf91=_`mgCiGRF+L40Agf%8ML@*{JKql%-N^Xrb3!OG<t7j>(
zfvJq(oChH3+Q=SDBC;es0C&s~!evLNXYHi^X@%2z2H1D0qPzhQyO*Cs8_D%ueYB*u
zK(P7s<7^y2p+1vzpkIWyrxV4)GcZ-1Hj~j8(WNx{Fn80#+<wfppvq85ryuQ%D*afe
zI?cvT!JhVKdIud$cQ^`rzDU{j)$^MXH!xj*kJ2iPE)%}TmV#||as%YMht9)jsKZi@
zslrH>$;x{G+>3s##m^qvvy8KK`YRk}TeHk`&f|q9>fIGHaRbC~8(rUp`L)JGt6Fv=
z&EFrpl%Cg!F+#C@{6b2`hH(as-97erGl)cFkM)KXAp-W(siuabvaJppm98K8MJBb3
z4TGbbto`ytD52!zD35_G9hv33IGrnG70B6C!#le^l`OD9q=^#k3#Ik}He%|%1E@gn
z0;dZ6p}eL@N!`714MDZ-!8pkl3~dxuYeAK?<sZ<rzbWn)xQ!EL$XqB;|8H8<og1uf
zpYkf{S!K`RHz>A<og`O$v+EitLA*<AkB^{1!M)Nn{LJFs6utR2xs_X_P7GVMcs9x7
zQr%OO0FpX1gbbaZ7G}=TXc_U~J!sH94y&HL^%GK6q{Y~0v1)E@w9vysbNU*#^;9q^
zEFM={{xj@IzbAd9s6LylzEZO)JV*lo%#Xb@LHakZd$VG^k<;H5K-g2>!h#x*zDMTv
zF_Q`>()FwQAYtw8_Yx4pFAhyW#3bd_4&m<};1S2_TXpezfUk{rrqG+9De#?BFv0TX
z&=h#OAkFT59ra;${S7J+@72$S219kbW!S3{X_pRoW#BRUt&JmwCxC&R!%>|Ezqi7C
znN)vD+xs?`K)H@pU?X?!GOONDqjOL!_OGBv?xCG#<GB!XqQT0{&F<V3u=9vmYsqjh
zKyvM6d6CX_lzbwYuEX_Q?p_ZZf<MzU+03IlGOE87S=G5uB(&uE(f6*#JbU_KoH-sP
z90cZtEMTFHi0i#N&T71C3EoKsB`1IN$1v)7(Yh6!OJl(_II`<V`&E9^La|j00gyrC
z<?TrV|6(kS4<+>3`2d1-af3lem_m!2UoncvDfNH3@Q!m5RV&XpB34Hrzv@jd>1uR=
z#A>7~J)32z-e!^-CA)0N*ZbU?E3boxsL#&{19TE6-{(IwkWnG5djRVsgjX}0ZF%?k
Rs&A~Ib$}IoeJzh9003Woz`Xzf

literal 0
HcmV?d00001

diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/wwwroot/images/templates/vs-code-docker.webp b/src/Websites/Platform/src/Bit.Websites.Platform.Client/wwwroot/images/templates/vs-code-docker.webp
new file mode 100644
index 0000000000000000000000000000000000000000..fb9915e64435a58b38e2969b9ff1df0173ef81f3
GIT binary patch
literal 13292
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

literal 0
HcmV?d00001


From 2aba813ffa2f7a0fe790d2b607b5950ea7dc9764 Mon Sep 17 00:00:00 2001
From: Mohammad Aminsafaei <m.aminsafaei@outlook.com>
Date: Fri, 6 Sep 2024 15:27:03 +0330
Subject: [PATCH 24/38] fix(blazorui): resolve size issues of BitImage #8430
 (#8516)

---
 .../Utilities/Image/BitImage.razor.cs         | 51 ++++++++++++++-----
 .../Components/Utilities/Image/BitImage.scss  | 10 ++++
 .../Utilities/Image/BitImageDemo.razor        |  3 ++
 .../Utilities/Image/BitImageDemo.razor.cs     |  9 ++--
 4 files changed, 56 insertions(+), 17 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Image/BitImage.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Image/BitImage.razor.cs
index d45e41867e..cb37b492e0 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Image/BitImage.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Image/BitImage.razor.cs
@@ -21,7 +21,7 @@ public partial class BitImage : BitComponentBase
     /// <summary>
     /// Specifies the cover style to be used for this image.
     /// </summary>
-    [Parameter] public BitImageCoverStyle CoverStyle { get; set; }
+    [Parameter] public BitImageCoverStyle? CoverStyle { get; set; }
 
     /// <summary>
     /// The image height value.
@@ -37,7 +37,7 @@ public partial class BitImage : BitComponentBase
     /// <summary>
     /// Used to determine how the image is scaled and cropped to fit the frame.
     /// </summary>
-    [Parameter] public BitImageFit ImageFit { get; set; }
+    [Parameter] public BitImageFit? ImageFit { get; set; }
 
     /// <summary>
     /// Allows for browser-level image loading (lazy or eager).
@@ -110,33 +110,56 @@ protected override void RegisterCssStyles()
     {
         StyleBuilder.Register(() => Styles?.Root);
 
-        StyleBuilder.Register(() => Width.HasValue() ? $"width:{Width}" : string.Empty);
+        StyleBuilder.Register(() => Width.HasValue() ? $"width:{GetValueWithUnit(Width)}" : string.Empty);
 
-        StyleBuilder.Register(() => Height.HasValue() ? $"height:{Height}" : string.Empty);
+        StyleBuilder.Register(() => Height.HasValue() ? $"height:{GetValueWithUnit(Height)}" : string.Empty);
     }
 
 
 
+    private string GetValueWithUnit(string? val)
+    {
+        if (double.TryParse(val, out double result))
+        {
+            return FormattableString.Invariant($"{result}px");
+        }
+
+        return val!;
+    }
+
     private string GetImageClasses()
     {
         StringBuilder className = new StringBuilder();
 
         className.Append("bit-img-img");
 
-        className.Append(' ').Append(ImageFit switch
+        className.Append(ImageFit switch
         {
-            BitImageFit.Center => "bit-img-ctr",
-            BitImageFit.Contain => "bit-img-cnt",
-            BitImageFit.Cover => "bit-img-cvr",
-            BitImageFit.CenterCover => "bit-img-ccv",
-            BitImageFit.CenterContain => "bit-img-cct",
-            _ => "bit-img-non"
+            BitImageFit.None => " bit-img-non",
+            BitImageFit.Center => " bit-img-ctr",
+            BitImageFit.Contain => " bit-img-cnt",
+            BitImageFit.Cover => " bit-img-cvr",
+            BitImageFit.CenterCover => " bit-img-ccv",
+            BitImageFit.CenterContain => " bit-img-cct",
+            _ => null
         });
 
-        className.Append(' ').Append(CoverStyle switch
+        if (ImageFit.HasValue is false && (Width.HasValue() ^ Height.HasValue()))
+        {
+            if (Width.HasValue())
+            {
+                className.Append(" bit-img-ihw");
+            }
+            else
+            {
+                className.Append(" bit-img-ihh");
+            }
+        }
+
+        className.Append(CoverStyle switch
         {
-            BitImageCoverStyle.Portrait => "bit-img-por",
-            _ => "bit-img-lan"
+            BitImageCoverStyle.Landscape => " bit-img-lan",
+            _ => " bit-img-por"
         });
 
         if (_loadingState == BitImageLoadingState.Loaded || (_loadingState == BitImageLoadingState.NotLoaded && ShouldStartVisible))
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Image/BitImage.scss b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Image/BitImage.scss
index ab41528b4d..19120e1d45 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Image/BitImage.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Image/BitImage.scss
@@ -36,6 +36,16 @@
     display: block;
 }
 
+.bit-img-ihh {
+    width: auto;
+    height: 100%;
+}
+
+.bit-img-ihw {
+    width: 100%;
+    height: auto;
+}
+
 .bit-img-vis {
     opacity: 1;
 }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Image/BitImageDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Image/BitImageDemo.razor
index 2727d6b459..6d80d01719 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Image/BitImageDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Image/BitImageDemo.razor
@@ -27,6 +27,7 @@
                     <BitLabel>Width</BitLabel>
                     <BitImage Width="9rem"
                               Alt="BitImage with width"
+                              Style="background-color: #00ffff17"
                               Src="_content/Bit.BlazorUI.Demo.Client.Core/images/bit-logo-blue.png" />
                 </div>
                 <br />
@@ -34,6 +35,7 @@
                     <BitLabel>Height</BitLabel>
                     <BitImage Height="5rem"
                               Alt="BitImage with height"
+                              Style="background-color: #00ffff17"
                               Src="_content/Bit.BlazorUI.Demo.Client.Core/images/bit-logo-blue.png" />
                 </div>
                 <br />
@@ -42,6 +44,7 @@
                     <BitImage Width="256px"
                               Height="128px"
                               Alt="BitImage with width and height"
+                              Style="background-color: #00ffff17"
                               Src="_content/Bit.BlazorUI.Demo.Client.Core/images/bit-logo-blue.png" />
                 </div>
             </div>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Image/BitImageDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Image/BitImageDemo.razor.cs
index a0bde79431..f4b7795cbf 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Image/BitImageDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Image/BitImageDemo.razor.cs
@@ -135,8 +135,8 @@ public partial class BitImageDemo
             Id = "image-class-style",
             Title = "BitImageClassStyles",
             Description = "",
-            Parameters = new()
-            {
+            Parameters =
+            [
                 new()
                 {
                     Name = "Root",
@@ -151,7 +151,7 @@ public partial class BitImageDemo
                     DefaultValue = "null",
                     Description="Custom CSS classes/styles for the image element."
                 }
-            }
+            ]
         }
     ];
 
@@ -262,15 +262,18 @@ public partial class BitImageDemo
     private readonly string example2RazorCode = @"
 <BitImage Width=""9rem""
           Alt=""BitImage with width""
+          Style=""background-color: #00ffff17""
           Src=""images/bit-logo-blue.png"" />
                 
 <BitImage Height=""5rem""
           Alt=""BitImage with height""
+          Style=""background-color: #00ffff17""
           Src=""images/bit-logo-blue.png"" />
              
 <BitImage Width=""256px""
           Height=""128px""
           Alt=""BitImage with width and height""
+          Style=""background-color: #00ffff17""
           Src=""images/bit-logo-blue.png"" />";
 
     private readonly string example3RazorCode = @"

From 845ad6a8b8b6a28e89052f0d958960d9223b0e2b Mon Sep 17 00:00:00 2001
From: Mohammad Hossein Rastegarinia <mh.rastegari@outlook.com>
Date: Fri, 6 Sep 2024 15:45:28 +0330
Subject: [PATCH 25/38] feat(blazorui): update old content of BitSpacer demo
 page #8526 (#8528)

---
 .../Pages/Components/Layouts/Spacer/BitSpacerDemo.razor     | 6 +++---
 .../Pages/Components/Layouts/Spacer/BitSpacerDemo.razor.cs  | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Spacer/BitSpacerDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Spacer/BitSpacerDemo.razor
index b7d55b1b97..16f33eaf1c 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Spacer/BitSpacerDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Spacer/BitSpacerDemo.razor
@@ -21,11 +21,11 @@
     <ComponentExampleBox Title="Width" RazorCode="@example2RazorCode" Id="example2">
         <ExamplePreview>
             <div style="display: flex; width: 100%;">
-                <BitSpinner />
+                <BitProgress Circular Indeterminate />
                 <BitSpacer Width="64" />
-                <BitSpinner />
+                <BitProgress Circular Indeterminate />
                 <BitSpacer Width="64" />
-                <BitSpinner />
+                <BitProgress Circular Indeterminate />
             </div>
         </ExamplePreview>
     </ComponentExampleBox>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Spacer/BitSpacerDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Spacer/BitSpacerDemo.razor.cs
index 65ff68ad5c..e94da59545 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Spacer/BitSpacerDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Spacer/BitSpacerDemo.razor.cs
@@ -26,11 +26,11 @@ public partial class BitSpacerDemo
 
     private readonly string example2RazorCode = @"
 <div style=""display: flex; width: 100%;"">
-    <BitSpinner />
+    <BitProgress Circular Indeterminate />
     <BitSpacer Width=""64"" />
-    <BitSpinner />
+    <BitProgress Circular Indeterminate />
     <BitSpacer Width=""64"" />
-    <BitSpinner />
+    <BitProgress Circular Indeterminate />
 </div>";
 
 }

From 7397c49368a1a5e2bc33a06dd0ccde3bc7fb8706 Mon Sep 17 00:00:00 2001
From: Saleh Yusefnejad <msynk@outlook.com>
Date: Fri, 6 Sep 2024 17:00:02 +0330
Subject: [PATCH 26/38] feat(blazorui): improve NavMenu of BlazorUI demo #8522
 (#8523)

---
 .../Inputs/SearchBox/BitSearchBoxDemo.razor    |  2 +-
 .../Shared/NavMenu.razor.cs                    | 18 ++++++++++++++----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor
index 4987f349ed..4f43bc858a 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor
@@ -146,7 +146,7 @@
             </ExamplePreview>
         </ComponentExampleBox>
 
-        <ComponentExampleBox Title="Suggest List" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
+        <ComponentExampleBox Title="Suggestion (AutoComplete)" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
             <ExamplePreview>
                 <div>Examples of BitSearchBox with suggestion list, including custom filtering, minimum trigger characters, and more.</div>
                 <br /><br /><br />
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/NavMenu.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/NavMenu.razor.cs
index 3ad5efc4c5..20c6ff884a 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/NavMenu.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/NavMenu.razor.cs
@@ -31,12 +31,12 @@ public partial class NavMenu : IDisposable
                 new() { Text = "Calendar", Url = "/components/calendar" },
                 new() { Text = "Checkbox", Url = "/components/checkbox", AdditionalUrls = ["/components/check-box"] },
                 new() { Text = "ChoiceGroup", Url = "/components/choicegroup", AdditionalUrls = ["/components/choice-group"], Description = "Radio, RadioButton" },
-                new() { Text = "Dropdown", Url = "/components/dropdown", Description = "Select, MultiSelect, ComboBox" },
+                new() { Text = "Dropdown", Url = "/components/dropdown", Description = "Select, MultiSelect, ComboBox", Data = "Chips" },
                 new() { Text = "FileUpload", Url = "/components/fileupload", AdditionalUrls = ["/components/file-upload"] },
                 new() { Text = "NumberField", Url = "/components/numberfield", AdditionalUrls = ["/components/numerictextfield", "/components/numeric-text-field"], Description = "NumberInput" },
                 new() { Text = "OtpInput", Url = "/components/otpinput", AdditionalUrls = ["/components/otp-input"] },
                 new() { Text = "Rating", Url = "/components/rating" },
-                new() { Text = "SearchBox", Url = "/components/searchbox", AdditionalUrls = ["/components/search-box"] },
+                new() { Text = "SearchBox", Url = "/components/searchbox", AdditionalUrls = ["/components/search-box"], Data = "AutoComplete" },
                 new() { Text = "Slider", Url = "/components/slider", Description = "Range" },
                 new() { Text = "SpinButton", Url = "/components/spinbutton", AdditionalUrls = ["/components/spin-button"] },
                 new() { Text = "TextField", Url = "/components/textfield", AdditionalUrls = ["/components/text-field"], Description = "TextInput" },
@@ -65,7 +65,7 @@ public partial class NavMenu : IDisposable
                 new() { Text = "Header", Url = "/components/header" },
                 new() { Text = "Layout", Url = "/components/layout" },
                 new() { Text = "Spacer", Url = "/components/spacer" },
-                new() { Text = "Stack", Url = "/components/stack" },
+                new() { Text = "Stack", Url = "/components/stack", Description = "WrapPanel" },
             ],
         },
         new()
@@ -201,7 +201,17 @@ private void HandleChange(string text)
         _filteredNavItems = _allNavItems;
         if (string.IsNullOrEmpty(text)) return;
 
-        _filteredNavItems = _flatNavItemList.FindAll(item => text.Split(' ').Where(t => t.HasValue()).Any(t => $"{item.Text} {item.Description}".Contains(t, StringComparison.InvariantCultureIgnoreCase)));
+        var mainItems = _flatNavItemList
+                            .FindAll(item => text.Split(' ')
+                                                 .Where(t => t.HasValue())
+                                                 .Any(t => $"{item.Text} {item.Description}".Contains(t, StringComparison.InvariantCultureIgnoreCase)));
+
+        var subItems = _flatNavItemList
+                            .FindAll(item => text.Split(' ')
+                                                 .Where(t => t.HasValue())
+                                                 .Any(t => item.Data?.ToString()?.Contains(t, StringComparison.InvariantCultureIgnoreCase) ?? false));
+
+        _filteredNavItems = [.. mainItems, .. subItems];
     }
 
     private async Task HandleOnItemClick(BitNavItem item)

From f9cea7f62fbde4b61db6f67bc74b4be607ffe33d Mon Sep 17 00:00:00 2001
From: Mohammad Hossein Rastegarinia <mh.rastegari@outlook.com>
Date: Fri, 6 Sep 2024 20:42:03 +0330
Subject: [PATCH 27/38] feat(blazorui): improve BitPagination demo page #8531
 (#8532)

---
 .../Navs/Pagination/BitPaginationDemo.razor   | 12 +++++--
 .../BitPaginationDemo.razor.samples.cs        | 36 +++++++++++++++++--
 .../Pagination/BitPaginationDemo.razor.scss   | 13 ++++++-
 3 files changed, 55 insertions(+), 6 deletions(-)

diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor
index 5bb192c947..6ad58ca61f 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor
@@ -18,7 +18,7 @@
     <ComponentExampleBox Title="Variants" RazorCode="@example2RazorCode" Id="example2">
         <ExamplePreview>
             <div>The pagination offers three variants: Fill (default), Outline, and Text.</div>
-            <br />
+            <br /><br />
             <div>Fill</div>
             <BitPagination Count="5" Variant="BitVariant.Fill" />
             <br /><br />
@@ -184,14 +184,18 @@
                 <br /><br />
                 <BitPagination Count="5"
                                Variant="BitVariant.Outline"
-                               Classes="@(new() { Root = "custom-root", Button = "custom-button" })" />
+                               Classes="@(new() { Root = "custom-root",
+                                                  Button = "custom-button",
+                                                  SelectedButton = "custom-selected-button"})" />
             </div>
         </ExamplePreview>
     </ComponentExampleBox>
 
     <ComponentExampleBox Title="Binding" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
         <ExamplePreview>
-            <div style="max-width:250px">
+            <div>Examples of one-way and two-way data binding with BitPagination.</div>
+            <br /><br />
+            <div style="max-width: 250px;">
                 <div>One-way:</div>
                 <br />
                 <BitPagination Count="5" SelectedPage="oneWaySelectedPage" />
@@ -215,6 +219,8 @@
 
     <ComponentExampleBox Title="RTL" RazorCode="@example12RazorCode" Id="example12">
         <ExamplePreview>
+            <div>Use BitPagination in right-to-left (RTL).</div>
+            <br /><br />
             <div dir="rtl">
                 <BitPagination Dir="BitDir.Rtl" Count="5" Variant="BitVariant.Fill" />
                 <br /><br />
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor.samples.cs
index d705245baf..aeb37696da 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor.samples.cs
@@ -72,12 +72,42 @@ public partial class BitPaginationDemo
 <BitPagination Count=""5"" Size=""BitSize.Large"" Variant=""BitVariant.Outline"" />";
 
     private readonly string example10RazorCode = @"
+<style>
+    .custom-class {
+        margin-left: 1rem;
+        border-radius: 0.125rem;
+        box-shadow: aqua 0 0 0.5rem;
+        background-color: #00ffff7d;
+    }
+
+
+    .custom-root {
+        margin-left: 1rem;
+    }
+
+    .custom-button {
+        color: seagreen;
+        border-radius: 50%;
+        border-color: seagreen;
+    }
+
+    .custom-button:hover {
+        color: white;
+        background-color: mediumseagreen;
+    }
+
+    .custom-selected-button {
+        color: white;
+        background-color: seagreen;
+    }
+</style>
+
 <BitPagination Count=""5""
                NextIcon=""@BitIconName.ChevronDown""
                PreviousIcon=""@BitIconName.ChevronUp""
                Style=""margin-left: 1rem; flex-flow: column;"" />
 
-<BitPagination Count=""5"" Class=""custom-class"" />
+<BitPagination Count=""5"" Class=""custom-class"" />    
 
 <BitPagination Count=""5""
                Styles=""@(new() { Root = ""margin-left: 1rem; gap: 1rem;"",
@@ -86,7 +116,9 @@ public partial class BitPaginationDemo
 
 <BitPagination Count=""5""
                Variant=""BitVariant.Outline""
-               Classes=""@(new() { Root = ""custom-root"", Button = ""custom-button"" })"" />";
+               Classes=""@(new() { Root = ""custom-root"",
+                                  Button = ""custom-button"",
+                                  SelectedButton = ""custom-selected-button""})"" />";
 
     private readonly string example11RazorCode = @"
 <BitPagination Count=""5"" SelectedPage=""oneWaySelectedPage"" />
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor.scss
index 7f517c8270..cdc77dc912 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor.scss
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor.scss
@@ -7,11 +7,22 @@
     }
 
     .custom-root {
-        color: aqua;
         margin-left: 1rem;
     }
 
     .custom-button {
+        color: seagreen;
         border-radius: 50%;
+        border-color: seagreen;
+    }
+
+    .custom-button:hover {
+        color: white;
+        background-color: mediumseagreen;
+    }
+
+    .custom-selected-button {
+        color: white;
+        background-color: seagreen;
     }
 }

From e64f40ce889cf1ec85c583071dcb60d946b70582 Mon Sep 17 00:00:00 2001
From: Mohammad Hossein Rastegarinia <mh.rastegari@outlook.com>
Date: Sat, 7 Sep 2024 09:10:55 +0330
Subject: [PATCH 28/38] fix(blazorui): resolve issues of BitLayout demo page
 #8527 (#8529)

---
 .../Layouts/Layout/BitLayoutDemo.razor        | 31 ++++++++---------
 .../Layouts/Layout/BitLayoutDemo.razor.cs     | 33 ++++++++++---------
 2 files changed, 34 insertions(+), 30 deletions(-)

diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Layout/BitLayoutDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Layout/BitLayoutDemo.razor
index 395cc79314..87c7bec1ef 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Layout/BitLayoutDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Layout/BitLayoutDemo.razor
@@ -26,7 +26,7 @@
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="NavMenu" RazorCode="@example2RazorCode" CsharpCode="example2CsharpCode" Id="example2">
+    <ComponentExampleBox Title="NavMenu" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
         <ExamplePreview>
             <BitToggle Label="Hide NavMenu" @bind-Value="hideNavMenu" />
             <br />
@@ -49,15 +49,15 @@
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="Classes & Styles" RazorCode="@example3RazorCode" Id="example3">
+    <ComponentExampleBox Title="Styles & Classes" RazorCode="@example3RazorCode" Id="example3">
         <ExamplePreview>
             <div class="container">
-                <BitLayout Classes="@(new() { Header="header2",
-                                              Main="main2",
-                                              NavMenu="nav-menu2",
-                                              MainContent="main-content2",
-                                              Footer="footer2" })"
-                           Styles="@(new() { Main="height:300px" })">
+                <BitLayout Styles="@(new() { Main = "height: 19rem;" })" 
+                           Classes="@(new() { Header = "header2",
+                                              Main = "main2",
+                                              NavMenu = "nav-menu2",
+                                              MainContent = "main-content2",
+                                              Footer = "footer2" })">
                     <Header>Header</Header>
                     <NavMenu>NavMenu</NavMenu>
                     <Main>Main</Main>
@@ -75,13 +75,14 @@
             </div>
             <br />
             <div class="container">
-                <BitLayout HeaderHeight="headerHeight" FooterHeight="footerHeight"
-                           Style="color:black"
-                           Styles="@(new() { Header="background:lightcoral",
-                                              Main="background:lightgreen",
-                                              NavMenu="padding:1rem",
-                                              MainContent="padding:1rem",
-                                              Footer="background:lightblue" })">
+                <BitLayout HeaderHeight="headerHeight" 
+                           FooterHeight="footerHeight"
+                           Styles="@(new() { Root = "color: black;",
+                                             Header = "background: lightcoral;",
+                                             Main = "background: lightgreen;",
+                                             NavMenu = "padding: 1rem;",
+                                             MainContent = "padding: 1rem;",
+                                             Footer = "background: lightblue;" })">
                     <Header>Header</Header>
                     <NavMenu>NavMenu</NavMenu>
                     <Main>Main</Main>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Layout/BitLayoutDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Layout/BitLayoutDemo.razor.cs
index c4ebd29bc2..9762cf4716 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Layout/BitLayoutDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Layout/BitLayoutDemo.razor.cs
@@ -176,6 +176,7 @@ public partial class BitLayoutDemo
     }
 </style>
 
+
 <BitLayout>
     <Header>
         <div class=""header"">Header</div>
@@ -215,6 +216,7 @@ public partial class BitLayoutDemo
     }
 </style>
 
+
 <BitToggle Label=""Hide NavMenu"" @bind-Value=""hideNavMenu"" />
 
 <BitLayout HideNavMenu=""hideNavMenu"">
@@ -235,7 +237,7 @@ public partial class BitLayoutDemo
 private bool hideNavMenu;";
 
     private readonly string example3RazorCode = @"
-< style>
+<style>
     .header {
         color: black;
         display: flex;
@@ -279,12 +281,13 @@ public partial class BitLayoutDemo
     }
 </style>
 
-<BitLayout Classes=""@(new() { Header=""header"",
-                              Main=""main"",
-                              NavMenu=""nav-menu2"",
-                              MainContent=""main-content"",
-                              Footer=""footer"" })""
-           Styles=""@(new() { Main=""height:300px"" })"">
+
+<BitLayout Styles=""@(new() { Main = ""height: 19rem;"" })"" 
+           Classes=""@(new() { Header = ""header2"",
+                              Main = ""main2"",
+                              NavMenu = ""nav-menu2"",
+                              MainContent = ""main-content2"",
+                              Footer = ""footer2"" })"">
     <Header>Header</Header>
     <NavMenu>NavMenu</NavMenu>
     <Main>Main</Main>
@@ -295,14 +298,14 @@ public partial class BitLayoutDemo
 <BitNumberField Label=""Header height"" @bind-Value=""headerHeight"" />
 <BitNumberField Label=""Footer height"" @bind-Value=""footerHeight"" />
 
-<div class=""container"">
-<BitLayout HeaderHeight=""headerHeight"" FooterHeight=""footerHeight""
-           Style=""color:black""
-           Styles=""@(new() { Header=""background:lightcoral"",
-                             Main=""background:lightgreen"",
-                             NavMenu=""padding:1rem"",
-                             MainContent=""padding:1rem"",
-                             Footer=""background:lightblue"" })"">
+<BitLayout HeaderHeight=""headerHeight"" 
+           FooterHeight=""footerHeight""
+           Styles=""@(new() { Root = ""color: black;"",
+                             Header = ""background: lightcoral;"",
+                             Main = ""background: lightgreen;"",
+                             NavMenu = ""padding: 1rem;"",
+                             MainContent = ""padding: 1rem;"",
+                             Footer = ""background: lightblue;"" })"">
     <Header>Header</Header>
     <NavMenu>NavMenu</NavMenu>
     <Main>Main</Main>

From 8d4d8676461ef9680409455ec651b605317a34b8 Mon Sep 17 00:00:00 2001
From: Mohammad Aminsafaei <m.aminsafaei@outlook.com>
Date: Sat, 7 Sep 2024 13:13:55 +0330
Subject: [PATCH 29/38] feat(blazorui): improve BitDropdown demo page #8524
 (#8533)

---
 .../Dropdown/_BitDropdownCustomDemo.razor     |  624 +++++----
 .../Dropdown/_BitDropdownCustomDemo.razor.cs  |    4 +-
 .../_BitDropdownCustomDemo.razor.samples.cs   | 1241 +++++++++--------
 .../Dropdown/_BitDropdownItemDemo.razor       |  619 ++++----
 .../Dropdown/_BitDropdownItemDemo.razor.cs    |    4 +-
 .../_BitDropdownItemDemo.razor.samples.cs     |  994 ++++++-------
 .../Dropdown/_BitDropdownOptionDemo.razor     |  694 ++++-----
 .../Dropdown/_BitDropdownOptionDemo.razor.cs  |    4 +-
 .../_BitDropdownOptionDemo.razor.samples.cs   |  969 +++++++------
 9 files changed, 2740 insertions(+), 2413 deletions(-)

diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor
index c666379bdc..8410439e3c 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor
@@ -35,117 +35,224 @@
     </ExamplePreview>
 </ComponentExampleBox>
 
-<ComponentExampleBox Title="Style & Class" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
+<ComponentExampleBox Title="Prefix & Suffix" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
     <ExamplePreview>
-        <div>Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.</div>
-        <br /><br />
+        <div>Use prefixes and suffixes in BitDropdown, including combinations and the disabled state.</div>
+        <br />
         <div class="example-content">
-            <div>Component's Style & Class:</div><br />
-            <BitDropdown Items="GetBasicCustoms()"
-                         NameSelectors="nameSelectors"
-                         Placeholder="Select an item"
-                         Style="margin: 1rem; box-shadow: aqua 0 0 0.5rem; text-shadow: aqua 0 0 0.5rem;" />
-            <br />
-            <BitDropdown Items="GetBasicCustoms()"
+            <BitDropdown Label="Prefix"
+                         Prefix="Fruits:"
+                         Items="GetBasicCustoms()"
                          NameSelectors="nameSelectors"
-                         Placeholder="Select an item"
-                         Class="custom-class" />
-            <br /><br /><br /><br />
-            <div>Item's Style & Class:</div><br />
-            <BitDropdown Items="GetStyleClassCustoms()"
+                         Placeholder="Select an item" />
+            <br /><br />
+            <BitDropdown Label="Suffix"
+                         Suffix="kg"
+                         Items="GetBasicCustoms()"
                          NameSelectors="nameSelectors"
                          Placeholder="Select an item" />
-            <br /><br /><br /><br />
-            <div><b>Styles</b> & <b>Classes</b>:</div><br />
-            <BitDropdown Label="Styles"
+            <br /><br />
+            <BitDropdown Label="Prefix and Suffix"
+                         Prefix="Fruits:"
+                         Suffix="kg"
                          Items="GetBasicCustoms()"
                          NameSelectors="nameSelectors"
-                         Placeholder="Select an item"
-                         Styles="@(new() { Label = "text-shadow: dodgerblue 0 0 0.5rem;",
-                                           Container = "box-shadow: dodgerblue 0 0 0.5rem; border-color: lightskyblue; color: lightskyblue;",
-                                           ItemHeader = "color: dodgerblue; text-shadow: dodgerblue 0 0 0.5rem;",
-                                           ItemButton = "color: lightskyblue",
-                                           Callout = "border-radius: 0.25rem; box-shadow: lightskyblue 0 0 0.5rem;" })" />
-            <br />
-            <BitDropdown Label="Classes"
+                         Placeholder="Select an item" />
+            <br /><br />
+            <BitDropdown Label="Disabled"
+                         Prefix="Fruits:"
+                         Suffix="kg"
                          Items="GetBasicCustoms()"
                          NameSelectors="nameSelectors"
                          Placeholder="Select an item"
-                         Classes="@(new() { Callout = "custom-callout",
-                                            Container = "custom-container",
-                                            ItemButton = "custom-item-button",
-                                            ScrollContainer = "custom-scroll-container" })" />
+                         IsEnabled="false" />
         </div>
     </ExamplePreview>
 </ComponentExampleBox>
 
-<ComponentExampleBox Title="Binding" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
+<ComponentExampleBox Title="FitWidth" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
     <ExamplePreview>
-        <div>Demonstrates two-way binding and change event handling for dropdowns, showcasing single and multi-select scenarios.</div>
+        <div>Enables fit-content width for the dropdown that sets the width of the component based on its content size.</div>
         <br /><br />
-        <div class="example-content">
-            <div>Two-way binding:</div><br />
-            <BitDropdown @bind-Value="controlledValue"
-                         Label="Single select"
+        <BitDropdown Label="Single select" FitWidth
+                     Items="GetBasicCustoms()"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select an item" />
+        <br /><br />
+        <BitDropdown Label="Multi select" FitWidth
+                     Items="GetBasicCustoms()"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select items"
+                     IsMultiSelect="true" />
+    </ExamplePreview>
+</ComponentExampleBox>
+
+<ComponentExampleBox Title="NoBorder" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
+    <ExamplePreview>
+        <div>The dropdown can be rendered without any border.</div>
+        <br /><br />
+        <div style="max-width:10rem">
+            <BitDropdown NoBorder
                          Items="GetBasicCustoms()"
                          NameSelectors="nameSelectors"
                          Placeholder="Select an item" />
-            <br />
-            <div>Selected Value: @controlledValue</div>
             <br /><br />
-            <BitDropdown @bind-Values="controlledValues"
-                         Label="Multi select"
+            <BitDropdown NoBorder
                          Items="GetBasicCustoms()"
                          NameSelectors="nameSelectors"
                          Placeholder="Select items"
                          IsMultiSelect="true" />
-            <br />
-            <div>Selected Values: @string.Join(",", controlledValues)</div>
-            <br /><br /><br /><br />
-            <div>OnChange:</div><br />
-            <BitDropdown Label="Single select"
+        </div>
+    </ExamplePreview>
+</ComponentExampleBox>
+
+<ComponentExampleBox Title="Responsive" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
+    <ExamplePreview>
+        <div>When the <b>IsResponsive</b> parameter is true, on small screens the drop down items will render in a side panel.</div>
+        <br />
+        <div class="example-content">
+            <BitDropdown Label="Responsive Dropdown"
                          Items="GetBasicCustoms()"
+                         NameSelectors="nameSelectors"
                          Placeholder="Select an item"
+                         IsResponsive=true />
+        </div>
+    </ExamplePreview>
+</ComponentExampleBox>
+
+<ComponentExampleBox Title="Drop direction" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
+    <ExamplePreview>
+        <div>Explores different drop directions for the BitDropdown component, including automatic and explicit directions.</div>
+        <br />
+        <div class="example-content">
+            <BitDropdown Label="All"
+                         Items="dropDirectionCustoms"
                          NameSelectors="nameSelectors"
-                         TItem="BitDropdownCustom" TValue="string"
-                         OnValuesChange="(BitDropdownCustom[] items) => changedItem = items.SingleOrDefault()" />
-            <br />
-            <div>Changed Value: @changedItem?.Value</div>
+                         Placeholder="Select an item"
+                         DropDirection="BitDropDirection.All" />
             <br /><br />
-            <BitDropdown Label="Multi select"
-                         IsMultiSelect="true"
+            <BitDropdown Label="TopAndBottom"
+                         Items="dropDirectionCustoms"
+                         NameSelectors="nameSelectors"
+                         Placeholder="Select an item"
+                         DropDirection="BitDropDirection.TopAndBottom" />
+        </div>
+    </ExamplePreview>
+</ComponentExampleBox>
+
+<ComponentExampleBox Title="Clear button" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
+    <ExamplePreview>
+        <div>Shows the usage of the clear button in BitDropdown, allowing users to clear selected values in single and multi-select dropdowns.</div>
+        <br />
+        <div class="example-content">
+            <BitDropdown @bind-Value="clearValue"
+                         Label="Single select dropdown"
                          Items="GetBasicCustoms()"
-                         Placeholder="Select items"
                          NameSelectors="nameSelectors"
-                         TItem="BitDropdownCustom" TValue="string"
-                         OnValuesChange="(BitDropdownCustom[] items) => changedItems = items" />
+                         Placeholder="Select an option"
+                         ShowClearButton="true" />
             <br />
-            <div>Changed Values: @string.Join(",", changedItems.Select(i => i.Value))</div>
-            <br /><br /><br /><br />
-            <div>OnSelectItem:</div><br />
-            <BitDropdown Label="Single select"
+            <div>Value: @clearValue</div>
+            <br /><br /><br />
+            <BitDropdown @bind-Values="clearValues"
+                         Label="Multi select dropdown"
                          Items="GetBasicCustoms()"
-                         DefaultValue="@string.Empty"
-                         Placeholder="Select an item"
                          NameSelectors="nameSelectors"
-                         OnSelectItem="(BitDropdownCustom item) => selectedItem1 = item" />
+                         Placeholder="Select options"
+                         IsMultiSelect="true"
+                         ShowClearButton="true" />
             <br />
-            <div>Selected Value: @selectedItem1?.Value</div>
+            <div>Values: @string.Join(',', clearValues)</div>
+        </div>
+    </ExamplePreview>
+</ComponentExampleBox>
+
+<ComponentExampleBox Title="SearchBox" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
+    <ExamplePreview>
+        <div>Examples of dropdowns with search functionality, including default and custom search functions.</div>
+        <br /><br />
+        <div class="example-content">
+            <BitDropdown Label="Single select & auto focus"
+                         Items="GetBasicCustoms()"
+                         NameSelectors="nameSelectors"
+                         Placeholder="Select an item"
+                         ShowSearchBox="true"
+                         AutoFocusSearchBox="true"
+                         SearchBoxPlaceholder="Search item" />
             <br /><br />
             <BitDropdown Label="Multi select"
-                         IsMultiSelect="true"
                          Items="GetBasicCustoms()"
+                         NameSelectors="nameSelectors"
                          Placeholder="Select items"
-                         DefaultValue="@string.Empty"
+                         IsMultiSelect="true"
+                         ShowSearchBox="true"
+                         SearchBoxPlaceholder="Search items" />
+            <br /><br /><br /><br />
+            <div><b>Custom search function</b>:</div><br />
+            <BitDropdown Label="Single select & auto focus"
+                         Items="GetBasicCustoms()"
                          NameSelectors="nameSelectors"
-                         OnSelectItem="(BitDropdownCustom item) => selectedItem2 = item" />
-            <br />
-            <div>Selected Value: @selectedItem2?.Value</div>
+                         Placeholder="Select an item"
+                         ShowSearchBox="true"
+                         AutoFocusSearchBox="true"
+                         SearchFunction="(items, text) => items.Where(i => i.Text?.StartsWith(text, StringComparison.OrdinalIgnoreCase) ?? false).ToArray()"
+                         SearchBoxPlaceholder="Search item" />
+            <br /><br />
+            <BitDropdown Label="Multi select"
+                         Items="GetBasicCustoms()"
+                         NameSelectors="nameSelectors"
+                         Placeholder="Select items"
+                         IsMultiSelect="true"
+                         ShowSearchBox="true"
+                         SearchFunction="(items, text) => items.Where(i => i.Text?.EndsWith(text, StringComparison.OrdinalIgnoreCase) ?? false).ToArray()"
+                         SearchBoxPlaceholder="Search items" />
+        </div>
+    </ExamplePreview>
+</ComponentExampleBox>
+
+<ComponentExampleBox Title="Validation" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
+    <ExamplePreview>
+        <div>Demonstrates how validation can be applied to BitDropdown, including required fields, numeric input, character constraints, email validation, and range validation.</div>
+        <br />
+        <div class="example-content">
+            @if (string.IsNullOrEmpty(successMessage))
+            {
+                <EditForm Model="validationModel" OnValidSubmit="HandleValidSubmit" OnInvalidSubmit="HandleInvalidSubmit">
+                    <DataAnnotationsValidator />
+
+                    <BitDropdown @bind-Value="validationModel.Category"
+                                 Label="Select 1 item"
+                                 Items="GetBasicCustoms()"
+                                 NameSelectors="nameSelectors"
+                                 Placeholder="Select and item" />
+
+                    <ValidationMessage For="@(() => validationModel.Category)" />
+
+                    <br />
+
+                    <BitDropdown @bind-Values="validationModel.Products"
+                                 Label="Select min 1 and max 2 items"
+                                 Items="GetBasicCustoms()"
+                                 NameSelectors="nameSelectors"
+                                 Placeholder="Select items"
+                                 IsMultiSelect="true" />
+
+                    <ValidationMessage For="@(() => validationModel.Products)" />
+
+                    <br />
+
+                    <BitButton ButtonType="BitButtonType.Submit">Submit</BitButton>
+                </EditForm>
+            }
+            else
+            {
+                <BitMessage Color="BitColor.Success">@successMessage</BitMessage>
+            }
         </div>
     </ExamplePreview>
 </ComponentExampleBox>
 
-<ComponentExampleBox Title="Customization" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
+<ComponentExampleBox Title="Customization" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
     <ExamplePreview>
         <div>Shows how to customize dropdowns using templates for header, text, item, placeholder, label, and callout sections.</div>
         <br /><br />
@@ -225,64 +332,109 @@
     </ExamplePreview>
 </ComponentExampleBox>
 
-<ComponentExampleBox Title="Responsive" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
-    <ExamplePreview>
-        <div>When the <b>IsResponsive</b> parameter is true, on small screens the drop down items will render in a side panel.</div>
-        <br />
-        <div class="example-content">
-            <BitDropdown Label="Responsive Dropdown"
-                         Items="GetBasicCustoms()"
-                         NameSelectors="nameSelectors"
-                         Placeholder="Select an item"
-                         IsResponsive=true />
-        </div>
-    </ExamplePreview>
-</ComponentExampleBox>
-
-<ComponentExampleBox Title="SearchBox" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
+<ComponentExampleBox Title="Binding" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
     <ExamplePreview>
-        <div>Examples of dropdowns with search functionality, including default and custom search functions.</div>
+        <div>Demonstrates two-way binding and change event handling for dropdowns, showcasing single and multi-select scenarios.</div>
         <br /><br />
         <div class="example-content">
-            <BitDropdown Label="Single select & auto focus"
+            <div>Two-way binding:</div><br />
+            <BitDropdown @bind-Value="controlledValue"
+                         Label="Single select"
                          Items="GetBasicCustoms()"
                          NameSelectors="nameSelectors"
-                         Placeholder="Select an item"
-                         ShowSearchBox="true"
-                         AutoFocusSearchBox="true"
-                         SearchBoxPlaceholder="Search item" />
+                         Placeholder="Select an item" />
+            <br />
+            <div>Selected Value: @controlledValue</div>
             <br /><br />
-            <BitDropdown Label="Multi select"
+            <BitDropdown @bind-Values="controlledValues"
+                         Label="Multi select"
                          Items="GetBasicCustoms()"
                          NameSelectors="nameSelectors"
                          Placeholder="Select items"
-                         IsMultiSelect="true"
-                         ShowSearchBox="true"
-                         SearchBoxPlaceholder="Search items" />
+                         IsMultiSelect="true" />
+            <br />
+            <div>Selected Values: @string.Join(",", controlledValues)</div>
             <br /><br /><br /><br />
-            <div><b>Custom search function</b>:</div><br />
-            <BitDropdown Label="Single select & auto focus"
+            <div>OnChange:</div><br />
+            <BitDropdown Label="Single select"
+                         Items="GetBasicCustoms()"
+                         Placeholder="Select an item"
+                         NameSelectors="nameSelectors"
+                         TItem="BitDropdownCustom" TValue="string"
+                         OnValuesChange="(BitDropdownCustom[] items) => changedItem = items.SingleOrDefault()" />
+            <br />
+            <div>Changed Value: @changedItem?.Value</div>
+            <br /><br />
+            <BitDropdown Label="Multi select"
+                         IsMultiSelect="true"
                          Items="GetBasicCustoms()"
+                         Placeholder="Select items"
                          NameSelectors="nameSelectors"
+                         TItem="BitDropdownCustom" TValue="string"
+                         OnValuesChange="(BitDropdownCustom[] items) => changedItems = items" />
+            <br />
+            <div>Changed Values: @string.Join(",", changedItems.Select(i => i.Value))</div>
+            <br /><br /><br /><br />
+            <div>OnSelectItem:</div><br />
+            <BitDropdown Label="Single select"
+                         Items="GetBasicCustoms()"
+                         DefaultValue="@string.Empty"
                          Placeholder="Select an item"
-                         ShowSearchBox="true"
-                         AutoFocusSearchBox="true"
-                         SearchFunction="(items, text) => items.Where(i => i.Text?.StartsWith(text, StringComparison.OrdinalIgnoreCase) ?? false).ToArray()"
-                         SearchBoxPlaceholder="Search item" />
+                         NameSelectors="nameSelectors"
+                         OnSelectItem="(BitDropdownCustom item) => selectedItem1 = item" />
+            <br />
+            <div>Selected Value: @selectedItem1?.Value</div>
             <br /><br />
             <BitDropdown Label="Multi select"
+                         IsMultiSelect="true"
                          Items="GetBasicCustoms()"
+                         Placeholder="Select items"
+                         DefaultValue="@string.Empty"
+                         NameSelectors="nameSelectors"
+                         OnSelectItem="(BitDropdownCustom item) => selectedItem2 = item" />
+            <br />
+            <div>Selected Value: @selectedItem2?.Value</div>
+        </div>
+    </ExamplePreview>
+</ComponentExampleBox>
+
+<ComponentExampleBox Title="Virtualization" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
+    <ExamplePreview>
+        <div>Demonstrates virtualization in the BitDropdown component for handling large datasets efficiently.</div>
+        <br /><br /><br />
+        <div class="example-content">
+            <div>With <b>Items</b>:</div><br />
+            <BitDropdown Label="Single select"
+                         Items="virtualizeCustoms1"
+                         NameSelectors="nameSelectors"
+                         Placeholder="Select an item"
+                         Virtualize="true" />
+            <br />
+            <BitDropdown Label="Multi select"
+                         Items="virtualizeCustoms2"
                          NameSelectors="nameSelectors"
+                         IsMultiSelect="true"
                          Placeholder="Select items"
+                         Virtualize="true" />
+            <br /><br /><br /><br />
+            <div>With <b>ItemsProvider</b>:</div><br />
+            <BitDropdown Label="Single select"
+                         Virtualize="true"
+                         ItemsProvider="LoadItems"
+                         NameSelectors="nameSelectors"
+                         Placeholder="Select an item" />
+            <br />
+            <BitDropdown Label="Multi select"
+                         Virtualize="true"
                          IsMultiSelect="true"
-                         ShowSearchBox="true"
-                         SearchFunction="(items, text) => items.Where(i => i.Text?.EndsWith(text, StringComparison.OrdinalIgnoreCase) ?? false).ToArray()"
-                         SearchBoxPlaceholder="Search items" />
+                         ItemsProvider="LoadItems"
+                         NameSelectors="nameSelectors"
+                         Placeholder="Select items" />
         </div>
     </ExamplePreview>
 </ComponentExampleBox>
 
-<ComponentExampleBox Title="ComboBox" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
+<ComponentExampleBox Title="ComboBox" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
     <ExamplePreview>
         <div>When the <b>Combo</b> parameter is true, you can type in BitDropdown input and search between items.</div>
         <br />
@@ -295,9 +447,24 @@
                          NameSelectors="comboBoxNameSelectors" />
             <br />
             <div>Value: @comboBoxValueSample1</div>
-            <br /><br /><br /><br />
-            <div>When the <b>Chips</b> parameter is true, shows the selected items like chips in the ComboBox.</div>
+            <br /><br />
+            <BitDropdown @bind-Values="comboBoxValues1"
+                         Combo IsMultiSelect
+                         Label="Multi select combo box"
+                         Placeholder="Select an option"
+                         Items="comboBoxCustoms"
+                         NameSelectors="comboBoxNameSelectors" />
             <br />
+            <div>Values: @string.Join(',', comboBoxValues1)</div>
+        </div>
+    </ExamplePreview>
+</ComponentExampleBox>
+
+<ComponentExampleBox Title="Chips" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
+    <ExamplePreview>
+        <div>When the <b>Chips</b> parameter is true, shows the selected items like chips in the ComboBox.</div>
+        <br />
+        <div class="example-content">
             <BitDropdown @bind-Value="comboBoxValueSample2"
                          Combo Chips
                          Label="Single select combo box & chips"
@@ -306,8 +473,23 @@
                          NameSelectors="comboBoxNameSelectors" />
             <br />
             <div>Value: @comboBoxValueSample2</div>
-            <br /><br /><br /><br />
-            <div>When the <b>Dynamic</b> parameter is true, you can add a new item in the ComboBox.</div>
+            <br /><br />
+            <BitDropdown @bind-Values="comboBoxValues2"
+                         Combo Chips IsMultiSelect
+                         Label="Multi select combo box & chips"
+                         Placeholder="Select an option"
+                         Items="comboBoxCustoms"
+                         NameSelectors="comboBoxNameSelectors" />
+            <br />
+            <div>Values: @string.Join(',', comboBoxValues2)</div>
+        </div>
+    </ExamplePreview>
+</ComponentExampleBox>
+
+<ComponentExampleBox Title="Dynamic ComboBox" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
+    <ExamplePreview>
+        <div>When the <b>Dynamic</b> parameter is true, you can add a new item in the ComboBox.</div>
+        <div class="example-content">
             <br />
             <BitDropdown @bind-Value="comboBoxValueSample3"
                          Combo Dynamic
@@ -319,8 +501,11 @@
                          OnDynamicAdd="(BitDropdownCustom item) => HandleOnDynamicAdd(item)" />
             <br />
             <div>Value: @comboBoxValueSample3</div>
-            <br /><br /><br /><br />
-            <div>When the <b>Combo</b>, <b>Chips</b> and <b>Dynamic</b> parameters are true, you can add a new item in the ComboBox (pressing the enter key or touching the add button on the mobile).</div>
+        </div>
+        <br /><br /><br /><br />
+        <div>When the <b>Combo</b>, <b>Chips</b> and <b>Dynamic</b> parameters are true, you can add a new item in the ComboBox (pressing the enter key or touching the add button on the mobile).</div>
+        <br />
+        <div class="example-content">
             <br />
             <BitDropdown @bind-Value="comboBoxValueSample4"
                          Combo Chips Dynamic
@@ -334,58 +519,66 @@
             <br />
             <div>Value: @comboBoxValueSample4</div>
             <br /><br />
-            <BitDropdown @bind-Values="comboBoxValues"
-                         Combo Chips Dynamic
+            <BitDropdown @bind-Values="comboBoxValues3"
+                         Combo Chips Dynamic IsMultiSelect
                          Label="Multi select combo box, chips & dynamic"
                          Placeholder="Select options"
                          Items="comboBoxCustoms"
-                         IsMultiSelect="true"
                          IsResponsive="true"
                          NameSelectors="comboBoxNameSelectors"
                          DynamicValueGenerator="@((BitDropdownCustom item) => item.Text ?? "")"
                          OnDynamicAdd="(BitDropdownCustom item) => HandleOnDynamicAdd(item)" />
             <br />
-            <div>Values: @string.Join(',', comboBoxValues)</div>
+            <div>Values: @string.Join(',', comboBoxValues3)</div>
         </div>
     </ExamplePreview>
 </ComponentExampleBox>
 
-<ComponentExampleBox Title="Prefix & Suffix" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
+<ComponentExampleBox Title="Style & Class" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16">
     <ExamplePreview>
-        <div>Use prefixes and suffixes in BitDropdown, including combinations and the disabled state.</div>
-        <br />
+        <div>Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.</div>
+        <br /><br />
         <div class="example-content">
-            <BitDropdown Label="Prefix"
-                         Prefix="Fruits:"
-                         Items="GetBasicCustoms()"
+            <div>Component's Style & Class:</div><br />
+            <BitDropdown Items="GetBasicCustoms()"
                          NameSelectors="nameSelectors"
-                         Placeholder="Select an item" />
-            <br /><br />
-            <BitDropdown Label="Suffix"
-                         Suffix="kg"
-                         Items="GetBasicCustoms()"
+                         Placeholder="Select an item"
+                         Style="margin: 1rem; box-shadow: aqua 0 0 0.5rem; text-shadow: aqua 0 0 0.5rem;" />
+            <br />
+            <BitDropdown Items="GetBasicCustoms()"
+                         NameSelectors="nameSelectors"
+                         Placeholder="Select an item"
+                         Class="custom-class" />
+            <br /><br /><br /><br />
+            <div>Item's Style & Class:</div><br />
+            <BitDropdown Items="GetStyleClassCustoms()"
                          NameSelectors="nameSelectors"
                          Placeholder="Select an item" />
-            <br /><br />
-            <BitDropdown Label="Prefix and Suffix"
-                         Prefix="Fruits:"
-                         Suffix="kg"
+            <br /><br /><br /><br />
+            <div><b>Styles</b> & <b>Classes</b>:</div><br />
+            <BitDropdown Label="Styles"
                          Items="GetBasicCustoms()"
                          NameSelectors="nameSelectors"
-                         Placeholder="Select an item" />
-            <br /><br />
-            <BitDropdown Label="Disabled"
-                         Prefix="Fruits:"
-                         Suffix="kg"
+                         Placeholder="Select an item"
+                         Styles="@(new() { Label = "text-shadow: dodgerblue 0 0 0.5rem;",
+                                           Container = "box-shadow: dodgerblue 0 0 0.5rem; border-color: lightskyblue; color: lightskyblue;",
+                                           ItemHeader = "color: dodgerblue; text-shadow: dodgerblue 0 0 0.5rem;",
+                                           ItemButton = "color: lightskyblue",
+                                           Callout = "border-radius: 0.25rem; box-shadow: lightskyblue 0 0 0.5rem;" })" />
+            <br />
+            <BitDropdown Label="Classes"
                          Items="GetBasicCustoms()"
                          NameSelectors="nameSelectors"
                          Placeholder="Select an item"
-                         IsEnabled="false" />
+                         Classes="@(new() { Callout = "custom-callout",
+                                            Container = "custom-container",
+                                            ItemButton = "custom-item-button",
+                                            ScrollContainer = "custom-scroll-container" })" />
         </div>
     </ExamplePreview>
 </ComponentExampleBox>
 
-<ComponentExampleBox Title="RTL" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
+<ComponentExampleBox Title="RTL" RazorCode="@example17RazorCode" CsharpCode="@example17CsharpCode" Id="example17">
     <ExamplePreview>
         <div>Use BitDropdown in right-to-left (RTL).</div>
         <br />
@@ -405,164 +598,3 @@
         </div>
     </ExamplePreview>
 </ComponentExampleBox>
-
-<ComponentExampleBox Title="Drop direction" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
-    <ExamplePreview>
-        <div>Explores different drop directions for the BitDropdown component, including automatic and explicit directions.</div>
-        <br />
-        <div class="example-content">
-            <BitDropdown Label="All"
-                         Items="dropDirectionCustoms"
-                         NameSelectors="nameSelectors"
-                         Placeholder="Select an item"
-                         DropDirection="BitDropDirection.All" />
-            <br /><br />
-            <BitDropdown Label="TopAndBottom"
-                         Items="dropDirectionCustoms"
-                         NameSelectors="nameSelectors"
-                         Placeholder="Select an item"
-                         DropDirection="BitDropDirection.TopAndBottom" />
-        </div>
-    </ExamplePreview>
-</ComponentExampleBox>
-
-<ComponentExampleBox Title="Clear button" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
-    <ExamplePreview>
-        <div>Shows the usage of the clear button in BitDropdown, allowing users to clear selected values in single and multi-select dropdowns.</div>
-        <br />
-        <div class="example-content">
-            <BitDropdown @bind-Value="clearValue"
-                         Label="Single select dropdown"
-                         Items="GetBasicCustoms()"
-                         NameSelectors="nameSelectors"
-                         Placeholder="Select an option"
-                         ShowClearButton="true" />
-            <br />
-            <div>Value: @clearValue</div>
-            <br /><br /><br />
-            <BitDropdown @bind-Values="clearValues"
-                         Label="Multi select dropdown"
-                         Items="GetBasicCustoms()"
-                         NameSelectors="nameSelectors"
-                         Placeholder="Select options"
-                         IsMultiSelect="true"
-                         ShowClearButton="true" />
-            <br />
-            <div>Values: @string.Join(',', clearValues)</div>
-        </div>
-    </ExamplePreview>
-</ComponentExampleBox>
-
-<ComponentExampleBox Title="Validation" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
-    <ExamplePreview>
-        <div>Demonstrates how validation can be applied to BitDropdown, including required fields, numeric input, character constraints, email validation, and range validation.</div>
-        <br />
-        <div class="example-content">
-            @if (string.IsNullOrEmpty(successMessage))
-            {
-                <EditForm Model="validationModel" OnValidSubmit="HandleValidSubmit" OnInvalidSubmit="HandleInvalidSubmit">
-                    <DataAnnotationsValidator />
-
-                    <BitDropdown @bind-Value="validationModel.Category"
-                                 Label="Select 1 item"
-                                 Items="GetBasicCustoms()"
-                                 NameSelectors="nameSelectors"
-                                 Placeholder="Select and item" />
-
-                    <ValidationMessage For="@(() => validationModel.Category)" />
-
-                    <br />
-
-                    <BitDropdown @bind-Values="validationModel.Products"
-                                 Label="Select min 1 and max 2 items"
-                                 Items="GetBasicCustoms()"
-                                 NameSelectors="nameSelectors"
-                                 Placeholder="Select items"
-                                 IsMultiSelect="true" />
-
-                    <ValidationMessage For="@(() => validationModel.Products)" />
-
-                    <br />
-
-                    <BitButton ButtonType="BitButtonType.Submit">Submit</BitButton>
-                </EditForm>
-            }
-            else
-            {
-                <BitMessage Color="BitColor.Success">@successMessage</BitMessage>
-            }
-        </div>
-    </ExamplePreview>
-</ComponentExampleBox>
-
-<ComponentExampleBox Title="Virtualization" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
-    <ExamplePreview>
-        <div>Demonstrates virtualization in the BitDropdown component for handling large datasets efficiently.</div>
-        <br /><br /><br />
-        <div class="example-content">
-            <div>With <b>Items</b>:</div><br />
-            <BitDropdown Label="Single select"
-                         Items="virtualizeCustoms1"
-                         NameSelectors="nameSelectors"
-                         Placeholder="Select an item"
-                         Virtualize="true" />
-            <br />
-            <BitDropdown Label="Multi select"
-                         Items="virtualizeCustoms2"
-                         NameSelectors="nameSelectors"
-                         IsMultiSelect="true"
-                         Placeholder="Select items"
-                         Virtualize="true" />
-            <br /><br /><br /><br />
-            <div>With <b>ItemsProvider</b>:</div><br />
-            <BitDropdown Label="Single select"
-                         Virtualize="true"
-                         ItemsProvider="LoadItems"
-                         NameSelectors="nameSelectors"
-                         Placeholder="Select an item" />
-            <br />
-            <BitDropdown Label="Multi select"
-                         Virtualize="true"
-                         IsMultiSelect="true"
-                         ItemsProvider="LoadItems"
-                         NameSelectors="nameSelectors"
-                         Placeholder="Select items" />
-        </div>
-    </ExamplePreview>
-</ComponentExampleBox>
-
-<ComponentExampleBox Title="FitWidth" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
-    <ExamplePreview>
-        <div>Enables fit-content width for the dropdown that sets the width of the component based on its content size.</div>
-        <br /><br />
-        <BitDropdown Label="Single select" FitWidth
-                     Items="GetBasicCustoms()"
-                     NameSelectors="nameSelectors"
-                     Placeholder="Select an item" />
-        <br /><br />
-        <BitDropdown Label="Multi select" FitWidth
-                     Items="GetBasicCustoms()"
-                     NameSelectors="nameSelectors"
-                     Placeholder="Select items"
-                     IsMultiSelect="true" />
-    </ExamplePreview>
-</ComponentExampleBox>
-
-<ComponentExampleBox Title="NoBorder" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
-    <ExamplePreview>
-        <div>The dropdown can be rendered without any border.</div>
-        <br /><br />
-        <div style="max-width:10rem">
-            <BitDropdown NoBorder
-                         Items="GetBasicCustoms()"
-                         NameSelectors="nameSelectors"
-                         Placeholder="Select an item" />
-            <br /><br />
-            <BitDropdown NoBorder
-                         Items="GetBasicCustoms()"
-                         NameSelectors="nameSelectors"
-                         Placeholder="Select items"
-                         IsMultiSelect="true" />
-        </div>
-    </ExamplePreview>
-</ComponentExampleBox>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.cs
index 85a16e9cdd..77e4fd62cb 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.cs
@@ -131,7 +131,9 @@ private List<BitDropdownCustom> GetRtlCustoms() =>
     private string comboBoxValueSample2 = default!;
     private string comboBoxValueSample3 = default!;
     private string comboBoxValueSample4 = default!;
-    private ICollection<string> comboBoxValues = [];
+    private ICollection<string> comboBoxValues1 = [];
+    private ICollection<string> comboBoxValues2 = [];
+    private ICollection<string> comboBoxValues3 = [];
 
     protected override void OnInitialized()
     {
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs
index 87d88f1311..1f4bbebc90 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs
@@ -73,94 +73,192 @@ public class BitDropdownCustom
 };";
 
     private readonly string example2RazorCode = @"
-<style>
-    .custom-class {
-        margin-inline: 1rem;
-        box-shadow: dodgerblue 0 0 0.5rem;
-        text-shadow: dodgerblue 0 0 0.5rem;
-    }
-
-
-    .custom-fruit {
-        background-color: #a5104457;
-    }
-
-    .custom-veg {
-        background-color: #1c73324d;
-    }
-
-
-    .custom-callout {
-        border-radius: 1rem;
-        border-color: lightgray;
-        backdrop-filter: blur(20px);
-        background-color: transparent;
-        box-shadow: darkgray 0 0 0.5rem;
-    }
+<BitDropdown Label=""Prefix""
+             Prefix=""Fruits:""
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item"" />
 
-    .custom-container, .custom-container:after {
-        border-radius: 1rem;
-    }
+<BitDropdown Label=""Suffix""
+             Suffix=""kg""
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item"" />
 
-    .custom-item-button {
-        border-bottom: 1px solid gray;
-    }
+<BitDropdown Label=""Prefix and Suffix""
+             Prefix=""Fruits:""
+             Suffix=""kg""
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item"" />
 
-    .custom-item-button:hover {
-        background-color: rgba(255, 255, 255, 0.2);
-    }
+<BitDropdown Label=""Disabled""
+             Prefix=""Fruits:""
+             Suffix=""kg""
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item""
+             IsEnabled=""false"" />";
+    private readonly string example2CsharpCode = @"
+public class BitDropdownCustom
+{
+    public string? Label { get; set; }
+    public string? Key { get; set; }
+    public object? Payload { get; set; }
+    public bool Disabled { get; set; }
+    public bool Visible { get; set; } = true;
+    public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
+    public string? Text { get; set; }
+    public string? Title { get; set; }
+    public string? Value { get; set; }
+}
 
-    .custom-scroll-container div:last-child .custom-item-button {
-        border-bottom: none;
-    }
-</style>
+private List<BitDropdownCustom> GetBasicCustoms() => new()
+{
+    new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { Type = BitDropdownItemType.Divider },
+    new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};
 
+private BitDropdownNameSelectors<BitDropdownCustom, string?> nameSelectors = new() 
+{
+    AriaLabel = { Selector = c => c.Label },
+    Id = { Selector = c => c.Key },
+    Data = { Selector = c => c.Payload },
+    IsEnabled = { Selector = c => c.Disabled is false },
+    IsHidden = { Selector = c => c.Visible is false },
+    ItemType = { Selector = c => c.Type },
+    Text = { Selector = c => c.Text },
+    Title = { Selector = c => c.Title },
+    Value = { Selector = c => c.Value },
+};";
 
-<BitDropdown Items=""GetBasicCustoms()""
+    private readonly string example3RazorCode = @"
+<BitDropdown Label=""Single select"" FitWidth
+             Items=""GetBasicCustoms()""
              NameSelectors=""nameSelectors""
-             Placeholder=""Select an item""
-             Style=""margin: 1rem; box-shadow: aqua 0 0 0.5rem; text-shadow: aqua 0 0 0.5rem;"" />
+             Placeholder=""Select an item"" />
 
-<BitDropdown Items=""GetBasicCustoms()""
+<BitDropdown Label=""Multi select"" FitWidth
+             Items=""GetBasicCustoms()""
              NameSelectors=""nameSelectors""
-             Placeholder=""Select an item""
-             Class=""custom-class"" />
+             Placeholder=""Select items""
+             IsMultiSelect=""true"" />";
+    private readonly string example3CsharpCode = @"
+public class BitDropdownCustom
+{
+    public string? Label { get; set; }
+    public string? Key { get; set; }
+    public object? Payload { get; set; }
+    public bool Disabled { get; set; }
+    public bool Visible { get; set; } = true;
+    public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
+    public string? Text { get; set; }
+    public string? Title { get; set; }
+    public string? Value { get; set; }
+}
 
+private List<BitDropdownCustom> GetBasicCustoms() => new()
+{
+    new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { Type = BitDropdownItemType.Divider },
+    new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};
 
-<BitDropdown Items=""GetStyleClassCustoms()""
+private BitDropdownNameSelectors<BitDropdownCustom, string?> nameSelectors = new() 
+{
+    AriaLabel = { Selector = c => c.Label },
+    Id = { Selector = c => c.Key },
+    Data = { Selector = c => c.Payload },
+    IsEnabled = { Selector = c => c.Disabled is false },
+    IsHidden = { Selector = c => c.Visible is false },
+    ItemType = { Selector = c => c.Type },
+    Text = { Selector = c => c.Text },
+    Title = { Selector = c => c.Title },
+    Value = { Selector = c => c.Value },
+};";
+
+    private readonly string example4RazorCode = @"
+<BitDropdown NoBorder
+             Items=""GetBasicCustoms()""
              NameSelectors=""nameSelectors""
              Placeholder=""Select an item"" />
 
-
-<BitDropdown Label=""Styles""
+<BitDropdown NoBorder
              Items=""GetBasicCustoms()""
              NameSelectors=""nameSelectors""
-             Placeholder=""Select an item""
-             Styles=""@(new() { Label = ""text-shadow: dodgerblue 0 0 0.5rem;"",
-                               Container = ""box-shadow: dodgerblue 0 0 0.5rem; border-color: lightskyblue; color: lightskyblue;"",
-                               ItemHeader = ""color: dodgerblue; text-shadow: dodgerblue 0 0 0.5rem;"",
-                               ItemButton = ""color: lightskyblue"",
-                               Callout = ""border-radius: 0.25rem; box-shadow: lightskyblue 0 0 0.5rem;"" })"" />
+             Placeholder=""Select items""
+             IsMultiSelect=""true"" />";
+    private readonly string example4CsharpCode = @"
+public class BitDropdownCustom
+{
+    public string? Label { get; set; }
+    public string? Key { get; set; }
+    public object? Payload { get; set; }
+    public bool Disabled { get; set; }
+    public bool Visible { get; set; } = true;
+    public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
+    public string? Text { get; set; }
+    public string? Title { get; set; }
+    public string? Value { get; set; }
+}
 
-<BitDropdown Label=""Classes""
+private List<BitDropdownCustom> GetBasicCustoms() => new()
+{
+    new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { Type = BitDropdownItemType.Divider },
+    new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};
+
+private BitDropdownNameSelectors<BitDropdownCustom, string?> nameSelectors = new() 
+{
+    AriaLabel = { Selector = c => c.Label },
+    Id = { Selector = c => c.Key },
+    Data = { Selector = c => c.Payload },
+    IsEnabled = { Selector = c => c.Disabled is false },
+    IsHidden = { Selector = c => c.Visible is false },
+    ItemType = { Selector = c => c.Type },
+    Text = { Selector = c => c.Text },
+    Title = { Selector = c => c.Title },
+    Value = { Selector = c => c.Value },
+};";
+
+    private readonly string example5RazorCode = @"
+<BitDropdown Label=""Responsive Dropdown""
              Items=""GetBasicCustoms()""
              NameSelectors=""nameSelectors""
              Placeholder=""Select an item""
-             Classes=""@(new() { Callout = ""custom-callout"",
-                                Container = ""custom-container"",
-                                ItemButton = ""custom-item-button"",
-                                ScrollContainer = ""custom-scroll-container"" })"" />";
-    private readonly string example2CsharpCode = @"
+             IsResponsive=true />";
+    private readonly string example5CsharpCode = @"
 public class BitDropdownCustom
 {
     public string? Label { get; set; }
-    public string? CssClass { get; set; }
     public string? Key { get; set; }
     public object? Payload { get; set; }
     public bool Disabled { get; set; }
     public bool Visible { get; set; } = true;
     public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
-    public string? CssStyle { get; set; }
     public string? Text { get; set; }
     public string? Title { get; set; }
     public string? Value { get; set; }
@@ -180,97 +278,239 @@ public class BitDropdownCustom
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 };
 
-private List<BitDropdownCustom> GetStyleClassCustoms() => new()
+private BitDropdownNameSelectors<BitDropdownCustom, string?> nameSelectors = new() 
 {
-    new() { Type = BitDropdownItemType.Header, Text = ""Fruits"", CssStyle = ""text-align: center;"" },
-    new() { Text = ""Apple"", Value = ""f-app"", CssClass = ""custom-fruit"" },
-    new() { Text = ""Banana"", Value = ""f-ban"", CssClass = ""custom-fruit"" },
-    new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true, CssClass = ""custom-fruit"" },
-    new() { Text = ""Grape"", Value = ""f-gra"", CssClass = ""custom-fruit"" },
-    new() { Type = BitDropdownItemType.Divider, CssStyle = ""padding: 0 0.25rem;"" },
-    new() { Type = BitDropdownItemType.Header, Text = ""Vegetables"", CssStyle = ""text-align: center;"" },
-    new() { Text = ""Broccoli"", Value = ""v-bro"", CssClass = ""custom-veg"" },
-    new() { Text = ""Carrot"", Value = ""v-car"", CssClass = ""custom-veg"" },
-    new() { Text = ""Lettuce"", Value = ""v-let"", CssClass = ""custom-veg"" }
-};
+    AriaLabel = { Selector = c => c.Label },
+    Id = { Selector = c => c.Key },
+    Data = { Selector = c => c.Payload },
+    IsEnabled = { Selector = c => c.Disabled is false },
+    IsHidden = { Selector = c => c.Visible is false },
+    ItemType = { Selector = c => c.Type },
+    Text = { Selector = c => c.Text },
+    Title = { Selector = c => c.Title },
+    Value = { Selector = c => c.Value },
+};";
+
+    private readonly string example6RazorCode = @"
+<BitDropdown Label=""All""
+             Items=""dropDirectionCustoms""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item""
+             DropDirection=""BitDropDirection.All"" />
+
+<BitDropdown Label=""TopAndBottom""
+             Items=""dropDirectionCustoms""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item""
+             DropDirection=""BitDropDirection.TopAndBottom"" />";
+    private readonly string example6CsharpCode = @"
+private ICollection<BitDropdownCustom>? dropDirectionCustoms;
+
+protected override void OnInitialized()
+{
+    dropDirectionCustoms = Enumerable.Range(1, 15)
+                                     .Select(c => new BitDropdownCustom { Value = c.ToString(), Text = $""Category {c}"" })
+                                     .ToArray();
+}
 
 private BitDropdownNameSelectors<BitDropdownCustom, string?> nameSelectors = new() 
 {
     AriaLabel = { Selector = c => c.Label },
-    Class = { Selector = c => c.CssClass },
     Id = { Selector = c => c.Key },
     Data = { Selector = c => c.Payload },
     IsEnabled = { Selector = c => c.Disabled is false },
     IsHidden = { Selector = c => c.Visible is false },
     ItemType = { Selector = c => c.Type },
-    Style = { Selector = c => c.CssStyle },
     Text = { Selector = c => c.Text },
     Title = { Selector = c => c.Title },
     Value = { Selector = c => c.Value },
 };";
 
-    private readonly string example3RazorCode = @"
-<BitDropdown @bind-Value=""controlledValue""
-             Label=""Single select""
+    private readonly string example7RazorCode = @"
+<BitDropdown @bind-Value=""clearValue""
+             Label=""Single select dropdown""
              Items=""GetBasicCustoms()""
              NameSelectors=""nameSelectors""
-             Placeholder=""Select an item"" />
-<div>Selected Value: @controlledValue</div>
+             Placeholder=""Select an option""
+             ShowClearButton=""true"" />
+<div>Value: @clearValue</div>
 
-<BitDropdown @bind-Values=""controlledValues""
-             Label=""Multi select""
+
+<BitDropdown @bind-Values=""clearValues""
+             Label=""Multi select dropdown""
              Items=""GetBasicCustoms()""
              NameSelectors=""nameSelectors""
-             Placeholder=""Select items""
-             IsMultiSelect=""true"" />
-<div>Selected Values: @string.Join("","", controlledValues)</div>
+             Placeholder=""Select options""
+             IsMultiSelect=""true""
+             ShowClearButton=""true"" />
+<div>Values: @string.Join(',', clearValues)</div>";
+    private readonly string example7CsharpCode = @"
+private string? clearValue = ""f-app"";
+private ICollection<string?> clearValues = new[] { ""f-app"", ""f-ban"" };
+
+public class BitDropdownCustom
+{
+    public string? Label { get; set; }
+    public string? Key { get; set; }
+    public object? Payload { get; set; }
+    public bool Disabled { get; set; }
+    public bool Visible { get; set; } = true;
+    public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
+    public string? Text { get; set; }
+    public string? Title { get; set; }
+    public string? Value { get; set; }
+}
 
+private List<BitDropdownCustom> GetBasicCustoms() => new()
+{
+    new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { Type = BitDropdownItemType.Divider },
+    new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};
 
+private BitDropdownNameSelectors<BitDropdownCustom, string?> nameSelectors = new() 
+{
+    AriaLabel = { Selector = c => c.Label },
+    Id = { Selector = c => c.Key },
+    Data = { Selector = c => c.Payload },
+    IsEnabled = { Selector = c => c.Disabled is false },
+    IsHidden = { Selector = c => c.Visible is false },
+    ItemType = { Selector = c => c.Type },
+    Text = { Selector = c => c.Text },
+    Title = { Selector = c => c.Title },
+    Value = { Selector = c => c.Value },
+};";
 
-<BitDropdown Label=""Single select""
+    private readonly string example8RazorCode = @"
+<BitDropdown Label=""Single select & auto foucs""
              Items=""GetBasicCustoms()""
-             Placeholder=""Select an item""
              NameSelectors=""nameSelectors""
-             TItem=""BitDropdownCustom"" TValue=""string""
-             OnValuesChange=""(BitDropdownCustom[] items) => changedItem = items.SingleOrDefault()"" />
-<div>Changed Value: @changedItem?.Value</div>
+             Placeholder=""Select an item""
+             ShowSearchBox=""true""
+             AutoFocusSearchBox=""true""
+             SearchBoxPlaceholder=""Search item"" />
 
 <BitDropdown Label=""Multi select""
-             IsMultiSelect=""true""
              Items=""GetBasicCustoms()""
-             Placeholder=""Select items""
              NameSelectors=""nameSelectors""
-             TItem=""BitDropdownCustom"" TValue=""string""
-             OnValuesChange=""(BitDropdownCustom[] items) => changedItems = items"" />
-<div>Changed Values: @string.Join("","", changedItems.Select(i => i.Value))</div>
+             Placeholder=""Select items""
+             IsMultiSelect=""true""
+             ShowSearchBox=""true""
+             SearchBoxPlaceholder=""Search items"" />
 
 
 
-<BitDropdown Label=""Single select""
+<BitDropdown Label=""Single select & auto focus""
              Items=""GetBasicCustoms()""
-             DefaultValue=""@string.Empty""
-             Placeholder=""Select an item""
              NameSelectors=""nameSelectors""
-             OnSelectItem=""(BitDropdownCustom item) => selectedItem1 = item"" />
-<div>Selected Value: @selectedItem1?.Value</div>
+             Placeholder=""Select an item""
+             ShowSearchBox=""true""
+             AutoFocusSearchBox=""true""
+             SearchFunction=""(items, text) => items.Where(i => i.Text?.StartsWith(text, StringComparison.OrdinalIgnoreCase) ?? false).ToArray()""
+             SearchBoxPlaceholder=""Search item"" />
 
 <BitDropdown Label=""Multi select""
-             IsMultiSelect=""true""
              Items=""GetBasicCustoms()""
-             Placeholder=""Select items""
-             DefaultValue=""@string.Empty""
              NameSelectors=""nameSelectors""
-             OnSelectItem=""(BitDropdownCustom item) => selectedItem2 = item"" />
-<div>Selected Value: @selectedItem2?.Value</div>";
-    private readonly string example3CsharpCode = @"
-private string? controlledValue = ""f-app"";
-private ICollection<string?> controlledValues = new[] { ""f-app"", ""f-ban"" };
+             Placeholder=""Select items""
+             IsMultiSelect=""true""
+             ShowSearchBox=""true""
+             SearchFunction=""(items, text) => items.Where(i => i.Text?.EndsWith(text, StringComparison.OrdinalIgnoreCase) ?? false).ToArray()""
+             SearchBoxPlaceholder=""Search items"" />";
+    private readonly string example8CsharpCode = @"
+public class BitDropdownCustom
+{
+    public string? Label { get; set; }
+    public string? Key { get; set; }
+    public object? Payload { get; set; }
+    public bool Disabled { get; set; }
+    public bool Visible { get; set; } = true;
+    public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
+    public string? Text { get; set; }
+    public string? Title { get; set; }
+    public string? Value { get; set; }
+}
+
+private List<BitDropdownCustom> GetBasicCustoms() => new()
+{
+    new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { Type = BitDropdownItemType.Divider },
+    new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};
+
+private BitDropdownNameSelectors<BitDropdownCustom, string?> nameSelectors = new() 
+{
+    AriaLabel = { Selector = c => c.Label },
+    Id = { Selector = c => c.Key },
+    Data = { Selector = c => c.Payload },
+    IsEnabled = { Selector = c => c.Disabled is false },
+    IsHidden = { Selector = c => c.Visible is false },
+    ItemType = { Selector = c => c.Type },
+    Text = { Selector = c => c.Text },
+    Title = { Selector = c => c.Title },
+    Value = { Selector = c => c.Value },
+};";
+
+    private readonly string example9RazorCode = @"
+@using System.ComponentModel.DataAnnotations;
+
+<style>
+    .validation-message {
+        color: #A4262C;
+        font-size: 0.75rem;
+    }
+</style>
+
+<EditForm Model=""validationModel"" OnValidSubmit=""HandleValidSubmit"" OnInvalidSubmit=""HandleInvalidSubmit"">
+    <DataAnnotationsValidator />
+
+    <BitDropdown @bind-Value=""validationModel.Category""
+                 Label=""Select 1 item""
+                 Items=""GetBasicCustoms()""
+                 NameSelectors=""nameSelectors""
+                 Placeholder=""Select and item"" />
+    <ValidationMessage For=""@(() => validationModel.Category)"" />
+
+    <BitDropdown @bind-Values=""validationModel.Products""
+                 Label=""Select min 1 and max 2 items""
+                 Items=""GetBasicCustoms()""
+                 NameSelectors=""nameSelectors""
+                 Placeholder=""Select items""
+                 IsMultiSelect=""true"" />
+    <ValidationMessage For=""@(() => validationModel.Products)"" />
+
+    <BitButton ButtonType=""BitButtonType.Submit"">Submit</BitButton>
+</EditForm>";
+    private readonly string example9CsharpCode = @"
+public class FormValidationDropdownModel
+{
+    [MaxLength(2, ErrorMessage = ""The property {0} have more than {1} elements"")]
+    [MinLength(1, ErrorMessage = ""The property {0} doesn't have at least {1} elements"")]
+    public ICollection<string?> Products { get; set; } = new List<string?>();
+
+    [Required]
+    public string Category { get; set; }
+}
 
-private BitDropdownCustom? changedItem;
-private BitDropdownCustom[] changedItems = Array.Empty<BitDropdownCustom>();
+private FormValidationDropdownModel validationModel = new();
 
-private BitDropdownCustom? selectedItem1;
-private BitDropdownCustom? selectedItem2;
+private async Task HandleValidSubmit() { }
+
+private void HandleInvalidSubmit() { }
 
 public class BitDropdownCustom
 {
@@ -299,7 +539,7 @@ public class BitDropdownCustom
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 };
 
-private BitDropdownNameSelectors<BitDropdownCustom, string?> nameSelectors = new() 
+private BitDropdownNameSelectors<BitDropdownCustom, string> nameSelectors = new() 
 {
     AriaLabel = { Selector = c => c.Label },
     Id = { Selector = c => c.Key },
@@ -312,7 +552,7 @@ public class BitDropdownCustom
     Value = { Selector = c => c.Value },
 };";
 
-    private readonly string example4RazorCode = @"
+    private readonly string example10RazorCode = @"
 <style>
     .custom-drp {
         gap: 10px;
@@ -418,7 +658,7 @@ public class BitDropdownCustom
         <BitActionButton IconName=""@BitIconName.Add"">New Item</BitActionButton>
     </CalloutFooterTemplate>
 </BitDropdown>";
-    private readonly string example4CsharpCode = @"
+    private readonly string example10CsharpCode = @"
 public class BitDropdownCustom
 {
     public string? Label { get; set; }
@@ -463,263 +703,69 @@ public class DropdownItemData
     Value = { Selector = c => c.Value },
 };";
 
-    private readonly string example5RazorCode = @"
-<BitDropdown Label=""Responsive Dropdown""
-             Items=""GetBasicCustoms()""
-             NameSelectors=""nameSelectors""
-             Placeholder=""Select an item""
-             IsResponsive=true />";
-    private readonly string example5CsharpCode = @"
-public class BitDropdownCustom
-{
-    public string? Label { get; set; }
-    public string? Key { get; set; }
-    public object? Payload { get; set; }
-    public bool Disabled { get; set; }
-    public bool Visible { get; set; } = true;
-    public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
-    public string? Text { get; set; }
-    public string? Title { get; set; }
-    public string? Value { get; set; }
-}
-
-private List<BitDropdownCustom> GetBasicCustoms() => new()
-{
-    new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
-    new() { Text = ""Apple"", Value = ""f-app"" },
-    new() { Text = ""Banana"", Value = ""f-ban"" },
-    new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true },
-    new() { Text = ""Grape"", Value = ""f-gra"" },
-    new() { Type = BitDropdownItemType.Divider },
-    new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header },
-    new() { Text = ""Broccoli"", Value = ""v-bro"" },
-    new() { Text = ""Carrot"", Value = ""v-car"" },
-    new() { Text = ""Lettuce"", Value = ""v-let"" }
-};
-
-private BitDropdownNameSelectors<BitDropdownCustom, string?> nameSelectors = new() 
-{
-    AriaLabel = { Selector = c => c.Label },
-    Id = { Selector = c => c.Key },
-    Data = { Selector = c => c.Payload },
-    IsEnabled = { Selector = c => c.Disabled is false },
-    IsHidden = { Selector = c => c.Visible is false },
-    ItemType = { Selector = c => c.Type },
-    Text = { Selector = c => c.Text },
-    Title = { Selector = c => c.Title },
-    Value = { Selector = c => c.Value },
-};";
-
-    private readonly string example6RazorCode = @"
-<BitDropdown Label=""Single select & auto foucs""
+    private readonly string example11RazorCode = @"
+<BitDropdown @bind-Value=""controlledValue""
+             Label=""Single select""
              Items=""GetBasicCustoms()""
              NameSelectors=""nameSelectors""
-             Placeholder=""Select an item""
-             ShowSearchBox=""true""
-             AutoFocusSearchBox=""true""
-             SearchBoxPlaceholder=""Search item"" />
+             Placeholder=""Select an item"" />
+<div>Selected Value: @controlledValue</div>
 
-<BitDropdown Label=""Multi select""
+<BitDropdown @bind-Values=""controlledValues""
+             Label=""Multi select""
              Items=""GetBasicCustoms()""
              NameSelectors=""nameSelectors""
              Placeholder=""Select items""
-             IsMultiSelect=""true""
-             ShowSearchBox=""true""
-             SearchBoxPlaceholder=""Search items"" />
+             IsMultiSelect=""true"" />
+<div>Selected Values: @string.Join("","", controlledValues)</div>
 
 
 
-<BitDropdown Label=""Single select & auto focus""
+<BitDropdown Label=""Single select""
              Items=""GetBasicCustoms()""
-             NameSelectors=""nameSelectors""
              Placeholder=""Select an item""
-             ShowSearchBox=""true""
-             AutoFocusSearchBox=""true""
-             SearchFunction=""(items, text) => items.Where(i => i.Text?.StartsWith(text, StringComparison.OrdinalIgnoreCase) ?? false).ToArray()""
-             SearchBoxPlaceholder=""Search item"" />
-
-<BitDropdown Label=""Multi select""
-             Items=""GetBasicCustoms()""
              NameSelectors=""nameSelectors""
-             Placeholder=""Select items""
-             IsMultiSelect=""true""
-             ShowSearchBox=""true""
-             SearchFunction=""(items, text) => items.Where(i => i.Text?.EndsWith(text, StringComparison.OrdinalIgnoreCase) ?? false).ToArray()""
-             SearchBoxPlaceholder=""Search items"" />";
-    private readonly string example6CsharpCode = @"
-public class BitDropdownCustom
-{
-    public string? Label { get; set; }
-    public string? Key { get; set; }
-    public object? Payload { get; set; }
-    public bool Disabled { get; set; }
-    public bool Visible { get; set; } = true;
-    public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
-    public string? Text { get; set; }
-    public string? Title { get; set; }
-    public string? Value { get; set; }
-}
-
-private List<BitDropdownCustom> GetBasicCustoms() => new()
-{
-    new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
-    new() { Text = ""Apple"", Value = ""f-app"" },
-    new() { Text = ""Banana"", Value = ""f-ban"" },
-    new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true },
-    new() { Text = ""Grape"", Value = ""f-gra"" },
-    new() { Type = BitDropdownItemType.Divider },
-    new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header },
-    new() { Text = ""Broccoli"", Value = ""v-bro"" },
-    new() { Text = ""Carrot"", Value = ""v-car"" },
-    new() { Text = ""Lettuce"", Value = ""v-let"" }
-};
-
-private BitDropdownNameSelectors<BitDropdownCustom, string?> nameSelectors = new() 
-{
-    AriaLabel = { Selector = c => c.Label },
-    Id = { Selector = c => c.Key },
-    Data = { Selector = c => c.Payload },
-    IsEnabled = { Selector = c => c.Disabled is false },
-    IsHidden = { Selector = c => c.Visible is false },
-    ItemType = { Selector = c => c.Type },
-    Text = { Selector = c => c.Text },
-    Title = { Selector = c => c.Title },
-    Value = { Selector = c => c.Value },
-};";
-
-    private readonly string example7RazorCode = @"
-<BitDropdown @bind-Value=""comboBoxValueSample1""
-             Combo
-             Label=""Single select combo box""
-             Placeholder=""Select an option""
-             Items=""comboBoxCustoms""
-             NameSelectors=""comboBoxNameSelectors"" />
-<div>Value: @comboBoxValueSample1</div>
-
-<BitDropdown @bind-Value=""comboBoxValueSample2""
-             Combo Chips
-             Label=""Single select combo box & chips""
-             Placeholder=""Select an option""
-             Items=""comboBoxCustoms""
-             NameSelectors=""comboBoxNameSelectors"" />
-<div>Value: @comboBoxValueSample2</div>
-
-<BitDropdown @bind-Value=""comboBoxValueSample3""
-             Combo Dynamic
-             Label=""Single select combo box & dynamic""
-             Placeholder=""Select an option""
-             Items=""comboBoxCustoms""
-             NameSelectors=""comboBoxNameSelectors""
-             DynamicValueGenerator=""@((BitDropdownCustom item) => item.Text ?? """")""
-             OnDynamicAdd=""(BitDropdownCustom item) => HandleOnDynamicAdd(item)"" />
-<div>Value: @comboBoxValueSample3</div>
-
-<BitDropdown @bind-Value=""comboBoxValueSample4""
-             Combo Chips Dynamic
-             Label=""Single select combo box, chips & dynamic""
-             Placeholder=""Select an option""
-             Items=""comboBoxCustoms""
-             IsResponsive=""true""
-             NameSelectors=""comboBoxNameSelectors""
-             DynamicValueGenerator=""@((BitDropdownCustom item) => item.Text ?? """")""
-             OnDynamicAdd=""(BitDropdownCustom item) => HandleOnDynamicAdd(item)"" />
-<div>Value: @comboBoxValueSample4</div>
+             TItem=""BitDropdownCustom"" TValue=""string""
+             OnValuesChange=""(BitDropdownCustom[] items) => changedItem = items.SingleOrDefault()"" />
+<div>Changed Value: @changedItem?.Value</div>
 
-<BitDropdown @bind-Values=""comboBoxValues""
-             Combo Chips Dynamic
-             Label=""Multi select combo box, chips & dynamic""
-             Placeholder=""Select options""
-             Items=""comboBoxCustoms""
+<BitDropdown Label=""Multi select""
              IsMultiSelect=""true""
-             IsResponsive=""true""
-             NameSelectors=""comboBoxNameSelectors""
-             DynamicValueGenerator=""@((BitDropdownCustom item) => item.Text ?? """")""
-             OnDynamicAdd=""(BitDropdownCustom item) => HandleOnDynamicAdd(item)"" />
-<div>Values: @string.Join(',', comboBoxValues)</div>";
-    private readonly string example7CsharpCode = @"
-private string comboBoxValueSample1 = default!;
-private string comboBoxValueSample2 = default!;
-private string comboBoxValueSample3 = default!;
-private string comboBoxValueSample4 = default!;
-private ICollection<string> comboBoxValues = [];
-
-private void HandleOnDynamicAdd(BitDropdownCustom item)
-{
-    comboBoxCustoms.Add(item);
-}
-
-public class BitDropdownCustom
-{
-    public string? Label { get; set; }
-    public string? Key { get; set; }
-    public object? Payload { get; set; }
-    public bool Disabled { get; set; }
-    public bool Visible { get; set; } = true;
-    public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
-    public string? Text { get; set; }
-    public string? Title { get; set; }
-    public string? Value { get; set; }
-}
-
-private List<BitDropdownCustom> comboBoxCustoms = new()
-{
-    new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
-    new() { Text = ""Apple"", Value = ""f-app"" },
-    new() { Text = ""Banana"", Value = ""f-ban"" },
-    new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true },
-    new() { Text = ""Grape"", Value = ""f-gra"" },
-    new() { Type = BitDropdownItemType.Divider },
-    new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header },
-    new() { Text = ""Broccoli"", Value = ""v-bro"" },
-    new() { Text = ""Carrot"", Value = ""v-car"" },
-    new() { Text = ""Lettuce"", Value = ""v-let"" }
-};
-
-private BitDropdownNameSelectors<BitDropdownCustom, string> comboBoxNameSelectors = new()
-{
-    AriaLabel = { Selector = c => c.Label },
-    Class = { Selector = c => c.CssClass },
-    Id = { Selector = c => c.Key },
-    Data = { Selector = c => c.Payload },
-    IsEnabled = { Selector = c => c.Disabled is false },
-    IsHidden = { Selector = c => c.Visible is false },
-    ItemType = { Selector = c => c.Type },
-    Style = { Selector = c => c.CssStyle },
-    Text = { Selector = c => c.Text },
-    Title = { Selector = c => c.Title },
-    Value = { Selector = c => c.Value },
-    ValueSetter = (BitDropdownCustom item, string value) => item.Value = value,
-    TextSetter = (string? text, BitDropdownCustom item) => item.Text = text
-};";
-
-    private readonly string example8RazorCode = @"
-<BitDropdown Label=""Prefix""
-             Prefix=""Fruits:""
              Items=""GetBasicCustoms()""
+             Placeholder=""Select items""
              NameSelectors=""nameSelectors""
-             Placeholder=""Select an item"" />
+             TItem=""BitDropdownCustom"" TValue=""string""
+             OnValuesChange=""(BitDropdownCustom[] items) => changedItems = items"" />
+<div>Changed Values: @string.Join("","", changedItems.Select(i => i.Value))</div>
+
 
-<BitDropdown Label=""Suffix""
-             Suffix=""kg""
-             Items=""GetBasicCustoms()""
-             NameSelectors=""nameSelectors""
-             Placeholder=""Select an item"" />
 
-<BitDropdown Label=""Prefix and Suffix""
-             Prefix=""Fruits:""
-             Suffix=""kg""
+<BitDropdown Label=""Single select""
              Items=""GetBasicCustoms()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
              NameSelectors=""nameSelectors""
-             Placeholder=""Select an item"" />
+             OnSelectItem=""(BitDropdownCustom item) => selectedItem1 = item"" />
+<div>Selected Value: @selectedItem1?.Value</div>
 
-<BitDropdown Label=""Disabled""
-             Prefix=""Fruits:""
-             Suffix=""kg""
+<BitDropdown Label=""Multi select""
+             IsMultiSelect=""true""
              Items=""GetBasicCustoms()""
+             Placeholder=""Select items""
+             DefaultValue=""@string.Empty""
              NameSelectors=""nameSelectors""
-             Placeholder=""Select an item""
-             IsEnabled=""false"" />";
-    private readonly string example8CsharpCode = @"
+             OnSelectItem=""(BitDropdownCustom item) => selectedItem2 = item"" />
+<div>Selected Value: @selectedItem2?.Value</div>";
+    private readonly string example11CsharpCode = @"
+private string? controlledValue = ""f-app"";
+private ICollection<string?> controlledValues = new[] { ""f-app"", ""f-ban"" };
+
+private BitDropdownCustom? changedItem;
+private BitDropdownCustom[] changedItems = Array.Empty<BitDropdownCustom>();
+
+private BitDropdownCustom? selectedItem1;
+private BitDropdownCustom? selectedItem2;
+
 public class BitDropdownCustom
 {
     public string? Label { get; set; }
@@ -760,20 +806,35 @@ public class BitDropdownCustom
     Value = { Selector = c => c.Value },
 };";
 
-    private readonly string example9RazorCode = @"
-<BitDropdown Label=""تک انتخابی""
-             Items=""GetRtlCustoms()""
+    private readonly string example12RazorCode = @"
+<BitDropdown Label=""Single select""
+             Items=""virtualizeCustoms1""
              NameSelectors=""nameSelectors""
-             Placeholder=""لطفا انتخاب کنید""
-             Dir=""BitDir.Rtl"" />
+             Placeholder=""Select an item""
+             Virtualize=""true"" />
 
-<BitDropdown Label=""چند انتخابی""
-             Items=""GetRtlCustoms()""
+<BitDropdown Label=""Multi select""
+             Items=""virtualizeCustoms2""
              NameSelectors=""nameSelectors""
-             Placeholder=""انتخاب چند گزینه ای""
              IsMultiSelect=""true""
-             Dir=""BitDir.Rtl"" />";
-    private readonly string example9CsharpCode = @"
+             Placeholder=""Select items""
+             Virtualize=""true"" />
+
+
+
+<BitDropdown Label=""Single select""
+             Virtualize=""true""
+             ItemsProvider=""LoadItems""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item"" />
+
+<BitDropdown Label=""Multi select""
+             Virtualize=""true""
+             IsMultiSelect=""true""
+             ItemsProvider=""LoadItems""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select items"" />";
+    private readonly string example12CsharpCode = @"
 public class BitDropdownCustom
 {
     public string? Label { get; set; }
@@ -787,19 +848,19 @@ public class BitDropdownCustom
     public string? Value { get; set; }
 }
 
-private List<BitDropdownCustom> GetRtlCustoms() => new()
+private ICollection<BitDropdownCustom>? virtualizeCustoms1;
+private ICollection<BitDropdownCustom>? virtualizeCustoms2;
+
+protected override void OnInitialized()
 {
-    new() { Type = BitDropdownItemType.Header, Text = ""میوه ها"" },
-    new() { Text = ""سیب"", Value = ""f-app"" },
-    new() { Text = ""موز"", Value = ""f-ban"" },
-    new() { Text = ""پرتقال"", Value = ""f-ora"", Disabled = true },
-    new() { Text = ""انگور"", Value = ""f-gra"" },
-    new() { Type = BitDropdownItemType.Divider },
-    new() { Type = BitDropdownItemType.Header, Text = ""سیزیجات"" },
-    new() { Text = ""کلم بروكلی"", Value = ""v-bro"" },
-    new() { Text = ""هویج"", Value = ""v-car"" },
-    new() { Text = ""کاهو"", Value = ""v-let"" }
-};
+    virtualizeCustoms1 = Enumerable.Range(1, 10_000)
+                                   .Select(c => new BitDropdownCustom { Text = $""Category {c}"", Value = c.ToString() })
+                                   .ToArray();
+
+    virtualizeCustoms2 = Enumerable.Range(1, 10_000)
+                                   .Select(c => new BitDropdownCustom { Text = $""Category {c}"", Value = c.ToString() })
+                                   .ToArray();
+}
 
 private BitDropdownNameSelectors<BitDropdownCustom, string?> nameSelectors = new() 
 {
@@ -812,64 +873,67 @@ public class BitDropdownCustom
     Text = { Selector = c => c.Text },
     Title = { Selector = c => c.Title },
     Value = { Selector = c => c.Value },
-};";
+};
 
-    private readonly string example10RazorCode = @"
-<BitDropdown Label=""All""
-             Items=""dropDirectionCustoms""
-             NameSelectors=""nameSelectors""
-             Placeholder=""Select an item""
-             DropDirection=""BitDropDirection.All"" />
+private async ValueTask<BitDropdownItemsProviderResult<BitDropdownCustom>> LoadItems(
+    BitDropdownItemsProviderRequest<BitDropdownCustom> request)
+{
+    try
+    {
+        // https://docs.microsoft.com/en-us/odata/concepts/queryoptions-overview
 
-<BitDropdown Label=""TopAndBottom""
-             Items=""dropDirectionCustoms""
-             NameSelectors=""nameSelectors""
-             Placeholder=""Select an item""
-             DropDirection=""BitDropDirection.TopAndBottom"" />";
-    private readonly string example10CsharpCode = @"
-private ICollection<BitDropdownCustom>? dropDirectionCustoms;
+        var query = new Dictionary<string, object?>()
+        {
+            { ""$top"", request.Count == 0 ? 50 : request.Count },
+            { ""$skip"", request.StartIndex }
+        };
 
-protected override void OnInitialized()
-{
-    dropDirectionCustoms = Enumerable.Range(1, 15)
-                                     .Select(c => new BitDropdownCustom { Value = c.ToString(), Text = $""Category {c}"" })
-                                     .ToArray();
-}
+        if (string.IsNullOrEmpty(request.Search) is false)
+        {
+            query.Add(""$filter"", $""contains(Name,'{request.Search}')"");
+        }
 
-private BitDropdownNameSelectors<BitDropdownCustom, string?> nameSelectors = new() 
-{
-    AriaLabel = { Selector = c => c.Label },
-    Id = { Selector = c => c.Key },
-    Data = { Selector = c => c.Payload },
-    IsEnabled = { Selector = c => c.Disabled is false },
-    IsHidden = { Selector = c => c.Visible is false },
-    ItemType = { Selector = c => c.Type },
-    Text = { Selector = c => c.Text },
-    Title = { Selector = c => c.Title },
-    Value = { Selector = c => c.Value },
-};";
+        var url = NavManager.GetUriWithQueryParameters(""Products/GetProducts"", query);
 
-    private readonly string example11RazorCode = @"
-<BitDropdown @bind-Value=""clearValue""
-             Label=""Single select dropdown""
-             Items=""GetBasicCustoms()""
-             NameSelectors=""nameSelectors""
-             Placeholder=""Select an option""
-             ShowClearButton=""true"" />
-<div>Value: @clearValue</div>
+        var data = await HttpClient.GetFromJsonAsync(url, AppJsonContext.Default.PagedResultProductDto);
 
+        var items = data!.Items.Select(i => new BitDropdownCustom
+        {
+            Text = i.Name,
+            Value = i.Id.ToString(),
+            Payload = i,
+            Label = i.Name,
+            Disabled = false,
+            Type = BitDropdownItemType.Normal
+        }).ToList();
 
-<BitDropdown @bind-Values=""clearValues""
-             Label=""Multi select dropdown""
-             Items=""GetBasicCustoms()""
-             NameSelectors=""nameSelectors""
-             Placeholder=""Select options""
-             IsMultiSelect=""true""
-             ShowClearButton=""true"" />
-<div>Values: @string.Join(',', clearValues)</div>";
-    private readonly string example11CsharpCode = @"
-private string? clearValue = ""f-app"";
-private ICollection<string?> clearValues = new[] { ""f-app"", ""f-ban"" };
+        return BitDropdownItemsProviderResult.From(items, data!.TotalCount);
+    }
+    catch
+    {
+        return BitDropdownItemsProviderResult.From(new List<BitDropdownCustom>(), 0);
+    }
+}";
+
+    private readonly string example13RazorCode = @"
+<BitDropdown @bind-Value=""comboBoxValueSample1""
+             Combo
+             Label=""Single select combo box""
+             Placeholder=""Select an option""
+             Items=""comboBoxCustoms""
+             NameSelectors=""comboBoxNameSelectors"" />
+<div>Value: @comboBoxValueSample1</div>
+
+<BitDropdown @bind-Values=""comboBoxValues1""
+             Combo IsMultiSelect
+             Label=""Multi select combo box""
+             Placeholder=""Select an option""
+             Items=""comboBoxCustoms""
+             NameSelectors=""comboBoxNameSelectors"" />
+<div>Values: @string.Join(',', comboBoxValues1)</div>";
+    private readonly string example13CsharpCode = @"
+private string comboBoxValueSample1 = default!;
+private ICollection<string> comboBoxValues1 = [];
 
 public class BitDropdownCustom
 {
@@ -884,7 +948,7 @@ public class BitDropdownCustom
     public string? Value { get; set; }
 }
 
-private List<BitDropdownCustom> GetBasicCustoms() => new()
+private List<BitDropdownCustom> comboBoxCustoms = new()
 {
     new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
     new() { Text = ""Apple"", Value = ""f-app"" },
@@ -898,65 +962,42 @@ public class BitDropdownCustom
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 };
 
-private BitDropdownNameSelectors<BitDropdownCustom, string?> nameSelectors = new() 
+private BitDropdownNameSelectors<BitDropdownCustom, string> comboBoxNameSelectors = new()
 {
     AriaLabel = { Selector = c => c.Label },
+    Class = { Selector = c => c.CssClass },
     Id = { Selector = c => c.Key },
     Data = { Selector = c => c.Payload },
     IsEnabled = { Selector = c => c.Disabled is false },
     IsHidden = { Selector = c => c.Visible is false },
     ItemType = { Selector = c => c.Type },
+    Style = { Selector = c => c.CssStyle },
     Text = { Selector = c => c.Text },
     Title = { Selector = c => c.Title },
     Value = { Selector = c => c.Value },
+    ValueSetter = (BitDropdownCustom item, string value) => item.Value = value,
+    TextSetter = (string? text, BitDropdownCustom item) => item.Text = text
 };";
 
-    private readonly string example12RazorCode = @"
-@using System.ComponentModel.DataAnnotations;
-
-<style>
-    .validation-message {
-        color: #A4262C;
-        font-size: 0.75rem;
-    }
-</style>
-
-<EditForm Model=""validationModel"" OnValidSubmit=""HandleValidSubmit"" OnInvalidSubmit=""HandleInvalidSubmit"">
-    <DataAnnotationsValidator />
-
-    <BitDropdown @bind-Value=""validationModel.Category""
-                 Label=""Select 1 item""
-                 Items=""GetBasicCustoms()""
-                 NameSelectors=""nameSelectors""
-                 Placeholder=""Select and item"" />
-    <ValidationMessage For=""@(() => validationModel.Category)"" />
-
-    <BitDropdown @bind-Values=""validationModel.Products""
-                 Label=""Select min 1 and max 2 items""
-                 Items=""GetBasicCustoms()""
-                 NameSelectors=""nameSelectors""
-                 Placeholder=""Select items""
-                 IsMultiSelect=""true"" />
-    <ValidationMessage For=""@(() => validationModel.Products)"" />
-
-    <BitButton ButtonType=""BitButtonType.Submit"">Submit</BitButton>
-</EditForm>";
-    private readonly string example12CsharpCode = @"
-public class FormValidationDropdownModel
-{
-    [MaxLength(2, ErrorMessage = ""The property {0} have more than {1} elements"")]
-    [MinLength(1, ErrorMessage = ""The property {0} doesn't have at least {1} elements"")]
-    public ICollection<string?> Products { get; set; } = new List<string?>();
-
-    [Required]
-    public string Category { get; set; }
-}
-
-private FormValidationDropdownModel validationModel = new();
-
-private async Task HandleValidSubmit() { }
+    private readonly string example14RazorCode = @"
+<BitDropdown @bind-Value=""comboBoxValueSample2""
+             Combo Chips
+             Label=""Single select combo box & chips""
+             Placeholder=""Select an option""
+             Items=""comboBoxCustoms""
+             NameSelectors=""comboBoxNameSelectors"" />
+<div>Value: @comboBoxValueSample2</div>
 
-private void HandleInvalidSubmit() { }
+<BitDropdown @bind-Values=""comboBoxValues2""
+             Combo Chips IsMultiSelect
+             Label=""Multi select combo box & chips""
+             Placeholder=""Select an option""
+             Items=""comboBoxCustoms""
+             NameSelectors=""comboBoxNameSelectors"" />
+<div>Values: @string.Join(',', comboBoxValues2)</div>";
+    private readonly string example14CsharpCode = @"
+private string comboBoxValueSample2 = default!;
+private ICollection<string> comboBoxValues2 = [];
 
 public class BitDropdownCustom
 {
@@ -971,7 +1012,7 @@ public class BitDropdownCustom
     public string? Value { get; set; }
 }
 
-private List<BitDropdownCustom> GetBasicCustoms() => new()
+private List<BitDropdownCustom> comboBoxCustoms = new()
 {
     new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
     new() { Text = ""Apple"", Value = ""f-app"" },
@@ -985,48 +1026,65 @@ public class BitDropdownCustom
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 };
 
-private BitDropdownNameSelectors<BitDropdownCustom, string> nameSelectors = new() 
+private BitDropdownNameSelectors<BitDropdownCustom, string> comboBoxNameSelectors = new()
 {
     AriaLabel = { Selector = c => c.Label },
+    Class = { Selector = c => c.CssClass },
     Id = { Selector = c => c.Key },
     Data = { Selector = c => c.Payload },
     IsEnabled = { Selector = c => c.Disabled is false },
     IsHidden = { Selector = c => c.Visible is false },
     ItemType = { Selector = c => c.Type },
+    Style = { Selector = c => c.CssStyle },
     Text = { Selector = c => c.Text },
     Title = { Selector = c => c.Title },
     Value = { Selector = c => c.Value },
+    ValueSetter = (BitDropdownCustom item, string value) => item.Value = value,
+    TextSetter = (string? text, BitDropdownCustom item) => item.Text = text
 };";
 
-    private readonly string example13RazorCode = @"
-<BitDropdown Label=""Single select""
-             Items=""virtualizeCustoms1""
-             NameSelectors=""nameSelectors""
-             Placeholder=""Select an item""
-             Virtualize=""true"" />
-
-<BitDropdown Label=""Multi select""
-             Items=""virtualizeCustoms2""
-             NameSelectors=""nameSelectors""
-             IsMultiSelect=""true""
-             Placeholder=""Select items""
-             Virtualize=""true"" />
+    private readonly string example15RazorCode = @"
+<BitDropdown @bind-Value=""comboBoxValueSample3""
+             Combo Dynamic
+             Label=""Single select combo box & dynamic""
+             Placeholder=""Select an option""
+             Items=""comboBoxCustoms""
+             NameSelectors=""comboBoxNameSelectors""
+             DynamicValueGenerator=""@((BitDropdownCustom item) => item.Text ?? """")""
+             OnDynamicAdd=""(BitDropdownCustom item) => HandleOnDynamicAdd(item)"" />
+<div>Value: @comboBoxValueSample3</div>
 
+<BitDropdown @bind-Value=""comboBoxValueSample4""
+             Combo Chips Dynamic
+             Label=""Single select combo box, chips & dynamic""
+             Placeholder=""Select an option""
+             Items=""comboBoxCustoms""
+             IsResponsive=""true""
+             NameSelectors=""comboBoxNameSelectors""
+             DynamicValueGenerator=""@((BitDropdownCustom item) => item.Text ?? """")""
+             OnDynamicAdd=""(BitDropdownCustom item) => HandleOnDynamicAdd(item)"" />
+<div>Value: @comboBoxValueSample4</div>
 
+<BitDropdown @bind-Values=""comboBoxValues3""
+             Combo Chips Dynamic IsMultiSelect
+             Label=""Multi select combo box, chips & dynamic""
+             Placeholder=""Select options""
+             Items=""comboBoxCustoms""
+             IsResponsive=""true""
+             NameSelectors=""comboBoxNameSelectors""
+             DynamicValueGenerator=""@((BitDropdownCustom item) => item.Text ?? """")""
+             OnDynamicAdd=""(BitDropdownCustom item) => HandleOnDynamicAdd(item)"" />
+<div>Values: @string.Join(',', comboBoxValues3)</div>";
+    private readonly string example15CsharpCode = @"
+private string comboBoxValueSample3 = default!;
+private string comboBoxValueSample4 = default!;
+private ICollection<string> comboBoxValues3 = [];
 
-<BitDropdown Label=""Single select""
-             Virtualize=""true""
-             ItemsProvider=""LoadItems""
-             NameSelectors=""nameSelectors""
-             Placeholder=""Select an item"" />
+private void HandleOnDynamicAdd(BitDropdownCustom item)
+{
+    comboBoxCustoms.Add(item);
+}
 
-<BitDropdown Label=""Multi select""
-             Virtualize=""true""
-             IsMultiSelect=""true""
-             ItemsProvider=""LoadItems""
-             NameSelectors=""nameSelectors""
-             Placeholder=""Select items"" />";
-    private readonly string example13CsharpCode = @"
 public class BitDropdownCustom
 {
     public string? Label { get; set; }
@@ -1040,93 +1098,126 @@ public class BitDropdownCustom
     public string? Value { get; set; }
 }
 
-private ICollection<BitDropdownCustom>? virtualizeCustoms1;
-private ICollection<BitDropdownCustom>? virtualizeCustoms2;
-
-protected override void OnInitialized()
+private List<BitDropdownCustom> comboBoxCustoms = new()
 {
-    virtualizeCustoms1 = Enumerable.Range(1, 10_000)
-                                   .Select(c => new BitDropdownCustom { Text = $""Category {c}"", Value = c.ToString() })
-                                   .ToArray();
-
-    virtualizeCustoms2 = Enumerable.Range(1, 10_000)
-                                   .Select(c => new BitDropdownCustom { Text = $""Category {c}"", Value = c.ToString() })
-                                   .ToArray();
-}
+    new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { Type = BitDropdownItemType.Divider },
+    new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};
 
-private BitDropdownNameSelectors<BitDropdownCustom, string?> nameSelectors = new() 
+private BitDropdownNameSelectors<BitDropdownCustom, string> comboBoxNameSelectors = new()
 {
     AriaLabel = { Selector = c => c.Label },
+    Class = { Selector = c => c.CssClass },
     Id = { Selector = c => c.Key },
     Data = { Selector = c => c.Payload },
     IsEnabled = { Selector = c => c.Disabled is false },
     IsHidden = { Selector = c => c.Visible is false },
     ItemType = { Selector = c => c.Type },
+    Style = { Selector = c => c.CssStyle },
     Text = { Selector = c => c.Text },
     Title = { Selector = c => c.Title },
     Value = { Selector = c => c.Value },
-};
+    ValueSetter = (BitDropdownCustom item, string value) => item.Value = value,
+    TextSetter = (string? text, BitDropdownCustom item) => item.Text = text
+};";
 
-private async ValueTask<BitDropdownItemsProviderResult<BitDropdownCustom>> LoadItems(
-    BitDropdownItemsProviderRequest<BitDropdownCustom> request)
-{
-    try
-    {
-        // https://docs.microsoft.com/en-us/odata/concepts/queryoptions-overview
+    private readonly string example16RazorCode = @"
+<style>
+    .custom-class {
+        margin-inline: 1rem;
+        box-shadow: dodgerblue 0 0 0.5rem;
+        text-shadow: dodgerblue 0 0 0.5rem;
+    }
 
-        var query = new Dictionary<string, object?>()
-        {
-            { ""$top"", request.Count == 0 ? 50 : request.Count },
-            { ""$skip"", request.StartIndex }
-        };
 
-        if (string.IsNullOrEmpty(request.Search) is false)
-        {
-            query.Add(""$filter"", $""contains(Name,'{request.Search}')"");
-        }
+    .custom-fruit {
+        background-color: #a5104457;
+    }
 
-        var url = NavManager.GetUriWithQueryParameters(""Products/GetProducts"", query);
+    .custom-veg {
+        background-color: #1c73324d;
+    }
 
-        var data = await HttpClient.GetFromJsonAsync(url, AppJsonContext.Default.PagedResultProductDto);
 
-        var items = data!.Items.Select(i => new BitDropdownCustom
-        {
-            Text = i.Name,
-            Value = i.Id.ToString(),
-            Payload = i,
-            Label = i.Name,
-            Disabled = false,
-            Type = BitDropdownItemType.Normal
-        }).ToList();
+    .custom-callout {
+        border-radius: 1rem;
+        border-color: lightgray;
+        backdrop-filter: blur(20px);
+        background-color: transparent;
+        box-shadow: darkgray 0 0 0.5rem;
+    }
 
-        return BitDropdownItemsProviderResult.From(items, data!.TotalCount);
+    .custom-container, .custom-container:after {
+        border-radius: 1rem;
     }
-    catch
-    {
-        return BitDropdownItemsProviderResult.From(new List<BitDropdownCustom>(), 0);
+
+    .custom-item-button {
+        border-bottom: 1px solid gray;
     }
-}";
 
-    private readonly string example14RazorCode = @"
-<BitDropdown Label=""Single select"" FitWidth
-             Items=""GetBasicCustoms()""
+    .custom-item-button:hover {
+        background-color: rgba(255, 255, 255, 0.2);
+    }
+
+    .custom-scroll-container div:last-child .custom-item-button {
+        border-bottom: none;
+    }
+</style>
+
+
+<BitDropdown Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item""
+             Style=""margin: 1rem; box-shadow: aqua 0 0 0.5rem; text-shadow: aqua 0 0 0.5rem;"" />
+
+<BitDropdown Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item""
+             Class=""custom-class"" />
+
+
+<BitDropdown Items=""GetStyleClassCustoms()""
              NameSelectors=""nameSelectors""
              Placeholder=""Select an item"" />
 
-<BitDropdown Label=""Multi select"" FitWidth
+
+<BitDropdown Label=""Styles""
              Items=""GetBasicCustoms()""
              NameSelectors=""nameSelectors""
-             Placeholder=""Select items""
-             IsMultiSelect=""true"" />";
-    private readonly string example14CsharpCode = @"
+             Placeholder=""Select an item""
+             Styles=""@(new() { Label = ""text-shadow: dodgerblue 0 0 0.5rem;"",
+                               Container = ""box-shadow: dodgerblue 0 0 0.5rem; border-color: lightskyblue; color: lightskyblue;"",
+                               ItemHeader = ""color: dodgerblue; text-shadow: dodgerblue 0 0 0.5rem;"",
+                               ItemButton = ""color: lightskyblue"",
+                               Callout = ""border-radius: 0.25rem; box-shadow: lightskyblue 0 0 0.5rem;"" })"" />
+
+<BitDropdown Label=""Classes""
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item""
+             Classes=""@(new() { Callout = ""custom-callout"",
+                                Container = ""custom-container"",
+                                ItemButton = ""custom-item-button"",
+                                ScrollContainer = ""custom-scroll-container"" })"" />";
+    private readonly string example16CsharpCode = @"
 public class BitDropdownCustom
 {
     public string? Label { get; set; }
+    public string? CssClass { get; set; }
     public string? Key { get; set; }
     public object? Payload { get; set; }
     public bool Disabled { get; set; }
     public bool Visible { get; set; } = true;
     public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
+    public string? CssStyle { get; set; }
     public string? Text { get; set; }
     public string? Title { get; set; }
     public string? Value { get; set; }
@@ -1146,31 +1237,49 @@ public class BitDropdownCustom
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 };
 
+private List<BitDropdownCustom> GetStyleClassCustoms() => new()
+{
+    new() { Type = BitDropdownItemType.Header, Text = ""Fruits"", CssStyle = ""text-align: center;"" },
+    new() { Text = ""Apple"", Value = ""f-app"", CssClass = ""custom-fruit"" },
+    new() { Text = ""Banana"", Value = ""f-ban"", CssClass = ""custom-fruit"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true, CssClass = ""custom-fruit"" },
+    new() { Text = ""Grape"", Value = ""f-gra"", CssClass = ""custom-fruit"" },
+    new() { Type = BitDropdownItemType.Divider, CssStyle = ""padding: 0 0.25rem;"" },
+    new() { Type = BitDropdownItemType.Header, Text = ""Vegetables"", CssStyle = ""text-align: center;"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"", CssClass = ""custom-veg"" },
+    new() { Text = ""Carrot"", Value = ""v-car"", CssClass = ""custom-veg"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"", CssClass = ""custom-veg"" }
+};
+
 private BitDropdownNameSelectors<BitDropdownCustom, string?> nameSelectors = new() 
 {
     AriaLabel = { Selector = c => c.Label },
+    Class = { Selector = c => c.CssClass },
     Id = { Selector = c => c.Key },
     Data = { Selector = c => c.Payload },
     IsEnabled = { Selector = c => c.Disabled is false },
     IsHidden = { Selector = c => c.Visible is false },
     ItemType = { Selector = c => c.Type },
+    Style = { Selector = c => c.CssStyle },
     Text = { Selector = c => c.Text },
     Title = { Selector = c => c.Title },
     Value = { Selector = c => c.Value },
 };";
 
-    private readonly string example15RazorCode = @"
-<BitDropdown NoBorder
-             Items=""GetBasicCustoms()""
+    private readonly string example17RazorCode = @"
+<BitDropdown Label=""تک انتخابی""
+             Items=""GetRtlCustoms()""
              NameSelectors=""nameSelectors""
-             Placeholder=""Select an item"" />
+             Placeholder=""لطفا انتخاب کنید""
+             Dir=""BitDir.Rtl"" />
 
-<BitDropdown NoBorder
-             Items=""GetBasicCustoms()""
+<BitDropdown Label=""چند انتخابی""
+             Items=""GetRtlCustoms()""
              NameSelectors=""nameSelectors""
-             Placeholder=""Select items""
-             IsMultiSelect=""true"" />";
-    private readonly string example15CsharpCode = @"
+             Placeholder=""انتخاب چند گزینه ای""
+             IsMultiSelect=""true""
+             Dir=""BitDir.Rtl"" />";
+    private readonly string example17CsharpCode = @"
 public class BitDropdownCustom
 {
     public string? Label { get; set; }
@@ -1184,18 +1293,18 @@ public class BitDropdownCustom
     public string? Value { get; set; }
 }
 
-private List<BitDropdownCustom> GetBasicCustoms() => new()
+private List<BitDropdownCustom> GetRtlCustoms() => new()
 {
-    new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
-    new() { Text = ""Apple"", Value = ""f-app"" },
-    new() { Text = ""Banana"", Value = ""f-ban"" },
-    new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true },
-    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { Type = BitDropdownItemType.Header, Text = ""میوه ها"" },
+    new() { Text = ""سیب"", Value = ""f-app"" },
+    new() { Text = ""موز"", Value = ""f-ban"" },
+    new() { Text = ""پرتقال"", Value = ""f-ora"", Disabled = true },
+    new() { Text = ""انگور"", Value = ""f-gra"" },
     new() { Type = BitDropdownItemType.Divider },
-    new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header },
-    new() { Text = ""Broccoli"", Value = ""v-bro"" },
-    new() { Text = ""Carrot"", Value = ""v-car"" },
-    new() { Text = ""Lettuce"", Value = ""v-let"" }
+    new() { Type = BitDropdownItemType.Header, Text = ""سیزیجات"" },
+    new() { Text = ""کلم بروكلی"", Value = ""v-bro"" },
+    new() { Text = ""هویج"", Value = ""v-car"" },
+    new() { Text = ""کاهو"", Value = ""v-let"" }
 };
 
 private BitDropdownNameSelectors<BitDropdownCustom, string?> nameSelectors = new() 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor
index 8923493926..73c6f879d8 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor
@@ -34,111 +34,224 @@
     </ExamplePreview>
 </ComponentExampleBox>
 
-<ComponentExampleBox Title="Style & Class" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
+<ComponentExampleBox Title="Prefix & Suffix" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
     <ExamplePreview>
-        <div>Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.</div>
-        <br /><br />
+        <div>Use prefixes and suffixes in BitDropdown, including combinations and the disabled state.</div>
+        <br />
         <div class="example-content">
-            <div>Component's Style & Class:</div><br />
-            <BitDropdown Items="GetBasicItems()"
-                         DefaultValue="@string.Empty"
+            <BitDropdown Label="Prefix"
+                         Prefix="Fruits:"
+                         Items="GetBasicItems()"
                          Placeholder="Select an item"
-                         Style="margin: 1rem; box-shadow: aqua 0 0 0.5rem; text-shadow: aqua 0 0 0.5rem;" />
-            <br />
-            <BitDropdown Items="GetBasicItems()"
-                         DefaultValue="@string.Empty"
+                         TItem="BitDropdownItem<string>"
+                         TValue="string" />
+            <br /><br />
+            <BitDropdown Label="Suffix"
+                         Suffix="kg"
+                         Items="GetBasicItems()"
                          Placeholder="Select an item"
-                         Class="custom-class" />
-            <br /><br /><br /><br />
-            <div>Item's Style & Class:</div><br />
-            <BitDropdown Items="GetStyleClassItems()"
-                         DefaultValue="@string.Empty"
-                         Placeholder="Select an item" />
-            <br /><br /><br /><br />
-            <div><b>Styles</b> & <b>Classes</b>:</div><br />
-            <BitDropdown Label="Styles"
+                         TItem="BitDropdownItem<string>"
+                         TValue="string" />
+            <br /><br />
+            <BitDropdown Label="Prefix and Suffix"
+                         Prefix="Fruits:"
+                         Suffix="kg"
                          Items="GetBasicItems()"
-                         DefaultValue="@string.Empty"
                          Placeholder="Select an item"
-                         Styles="@(new() { Label = "text-shadow: dodgerblue 0 0 0.5rem;",
-                                           Container = "box-shadow: dodgerblue 0 0 0.5rem; border-color: lightskyblue; color: lightskyblue;",
-                                           ItemHeader = "color: dodgerblue; text-shadow: dodgerblue 0 0 0.5rem;",
-                                           ItemButton = "color: lightskyblue",
-                                           Callout = "border-radius: 0.25rem; box-shadow: lightskyblue 0 0 0.5rem;" })" />
-            <br />
-            <BitDropdown Label="Classes"
+                         TItem="BitDropdownItem<string>"
+                         TValue="string" />
+            <br /><br />
+            <BitDropdown Label="Disabled"
+                         Prefix="Fruits:"
+                         Suffix="kg"
                          Items="GetBasicItems()"
-                         DefaultValue="@string.Empty"
                          Placeholder="Select an item"
-                         Classes="@(new() { Callout = "custom-callout",
-                                            Container = "custom-container",
-                                            ItemButton = "custom-item-button",
-                                            ScrollContainer = "custom-scroll-container" })" />
+                         TItem="BitDropdownItem<string>"
+                         TValue="string"
+                         IsEnabled="false" />
         </div>
     </ExamplePreview>
 </ComponentExampleBox>
 
-<ComponentExampleBox Title="Binding" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
+<ComponentExampleBox Title="FitWidth" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
     <ExamplePreview>
-        <div>Demonstrates two-way binding and change event handling for dropdowns, showcasing single and multi-select scenarios.</div>
+        <div>Enables fit-content width for the dropdown that sets the width of the component based on its content size.</div>
         <br /><br />
-        <div class="example-content">
-            <div><b>Two-way binding</b>:</div><br />
-            <BitDropdown @bind-Value="controlledValue"
-                         Label="Single select"
+        <BitDropdown Label="Single select" FitWidth
+                     Items="GetBasicItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item" />
+        <br /><br />
+        <BitDropdown Label="Multi select" FitWidth
+                     Items="GetBasicItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select items"
+                     IsMultiSelect="true" />
+    </ExamplePreview>
+</ComponentExampleBox>
+
+<ComponentExampleBox Title="NoBorder" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
+    <ExamplePreview>
+        <div>The dropdown can be rendered without any border.</div>
+        <br /><br />
+        <div style="max-width:10rem">
+            <BitDropdown NoBorder
                          Items="GetBasicItems()"
+                         DefaultValue="@string.Empty"
                          Placeholder="Select an item" />
-            <br />
-            <div>Selected Value: @controlledValue</div>
             <br /><br />
-            <BitDropdown @bind-Values="controlledValues"
-                         Label="Multi select"
+            <BitDropdown NoBorder
                          Items="GetBasicItems()"
+                         DefaultValue="@string.Empty"
                          Placeholder="Select items"
                          IsMultiSelect="true" />
-            <br />
-            <div>Selected Values: @string.Join(",", controlledValues)</div>
-            <br /><br /><br /><br />
-            <div><b>OnChange</b>:</div><br />
-            <BitDropdown Label="Single select"
+        </div>
+    </ExamplePreview>
+</ComponentExampleBox>
+
+<ComponentExampleBox Title="Responsive" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
+    <ExamplePreview>
+        <div>When the <b>IsResponsive</b> parameter is true, on small screens the drop down items will render in a side panel.</div>
+        <br />
+        <div class="example-content">
+            <BitDropdown Label="Responsive Dropdown"
                          Items="GetBasicItems()"
+                         DefaultValue="@string.Empty"
                          Placeholder="Select an item"
-                         TItem="BitDropdownItem<string>" TValue="string"
-                         OnValuesChange="(BitDropdownItem<string>[] items) => changedItem = items.SingleOrDefault()" />
+                         IsResponsive=true />
+        </div>
+    </ExamplePreview>
+</ComponentExampleBox>
+
+<ComponentExampleBox Title="Drop direction" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
+    <ExamplePreview>
+        <div>Explores different drop directions for the BitDropdown component, including automatic and explicit directions.</div>
+        <br />
+        <div class="example-content">
+            <BitDropdown Label="All"
+                         Items="dropDirectionItems"
+                         DefaultValue="@string.Empty"
+                         Placeholder="Select an item"
+                         DropDirection="BitDropDirection.All" />
+            <br /><br />
+            <BitDropdown Label="TopAndBottom"
+                         Items="dropDirectionItems"
+                         DefaultValue="@string.Empty"
+                         Placeholder="Select an item"
+                         DropDirection="BitDropDirection.TopAndBottom" />
+        </div>
+    </ExamplePreview>
+</ComponentExampleBox>
+
+<ComponentExampleBox Title="Clear button" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
+    <ExamplePreview>
+        <div>Shows the usage of the clear button in BitDropdown, allowing users to clear selected values in single and multi-select dropdowns.</div>
+        <br />
+        <div class="example-content">
+            <BitDropdown @bind-Value="clearValue"
+                         Label="Single select dropdown"
+                         Items="GetBasicItems()"
+                         Placeholder="Select an option"
+                         ShowClearButton="true" />
             <br />
-            <div>Changed Value: @changedItem?.Value</div>
+            <div>Value: @clearValue</div>
+            <br><br /><br />
+            <BitDropdown @bind-Values="clearValues"
+                         Label="Multi select dropdown"
+                         Items="GetBasicItems()"
+                         Placeholder="Select options"
+                         IsMultiSelect="true"
+                         ShowClearButton="true" />
+            <br />
+            <div>Values: @string.Join(',', clearValues)</div>
+        </div>
+    </ExamplePreview>
+</ComponentExampleBox>
+
+<ComponentExampleBox Title="SearchBox" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
+    <ExamplePreview>
+        <div>Examples of dropdowns with search functionality, including default and custom search functions.</div>
+        <br /><br />
+        <div class="example-content">
+            <BitDropdown Label="Single select & auto focus"
+                         Items="GetBasicItems()"
+                         DefaultValue="@string.Empty"
+                         Placeholder="Select an item"
+                         ShowSearchBox="true"
+                         AutoFocusSearchBox="true"
+                         SearchBoxPlaceholder="Search item" />
             <br /><br />
             <BitDropdown Label="Multi select"
-                         IsMultiSelect="true"
                          Items="GetBasicItems()"
+                         DefaultValue="@string.Empty"
                          Placeholder="Select items"
-                         TItem="BitDropdownItem<string>" TValue="string"
-                         OnValuesChange="(BitDropdownItem<string>[] items) => changedItems = items" />
-            <br />
-            <div>Changed Values: @string.Join(",", changedItems.Select(i => i.Value))</div>
+                         IsMultiSelect="true"
+                         ShowSearchBox="true"
+                         SearchBoxPlaceholder="Search items" />
             <br /><br /><br /><br />
-            <div><b>OnSelectItem</b>:</div><br />
-            <BitDropdown Label="Single select"
+            <div><b>Custom search function</b>:</div><br />
+            <BitDropdown Label="Single select & auto focus"
                          Items="GetBasicItems()"
                          DefaultValue="@string.Empty"
                          Placeholder="Select an item"
-                         OnSelectItem="(BitDropdownItem<string> item) => selectedItem1 = item" />
-            <br />
-            <div>Selected Value: @selectedItem1?.Value</div>
+                         ShowSearchBox="true"
+                         AutoFocusSearchBox="true"
+                         SearchFunction="(items, text) => items.Where(i => i.Text?.StartsWith(text, StringComparison.OrdinalIgnoreCase) ?? false).ToArray()"
+                         SearchBoxPlaceholder="Search item" />
             <br /><br />
             <BitDropdown Label="Multi select"
                          Items="GetBasicItems()"
                          DefaultValue="@string.Empty"
                          Placeholder="Select items"
                          IsMultiSelect="true"
-                         OnSelectItem="(BitDropdownItem<string> item) => selectedItem2 = item" />
-            <br />
-            <div>Selected Value: @selectedItem2?.Value</div>
+                         ShowSearchBox="true"
+                         SearchFunction="(items, text) => items.Where(i => i.Text?.EndsWith(text, StringComparison.OrdinalIgnoreCase) ?? false).ToArray()"
+                         SearchBoxPlaceholder="Search items" />
+        </div>
+    </ExamplePreview>
+</ComponentExampleBox>
+
+<ComponentExampleBox Title="Validation" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
+    <ExamplePreview>
+        <div>Demonstrates how validation can be applied to BitDropdown, including required fields, numeric input, character constraints, email validation, and range validation.</div>
+        <br />
+        <div class="example-content">
+            @if (string.IsNullOrEmpty(successMessage))
+            {
+                <EditForm Model="validationModel" OnValidSubmit="HandleValidSubmit" OnInvalidSubmit="HandleInvalidSubmit">
+                    <DataAnnotationsValidator />
+
+                    <BitDropdown @bind-Value="validationModel.Category"
+                                 Label="Select 1 item"
+                                 Items="GetBasicItems()"
+                                 Placeholder="Select and item" />
+
+                    <ValidationMessage For="@(() => validationModel.Category)" />
+
+                    <br />
+
+                    <BitDropdown @bind-Values="validationModel.Products"
+                                 Label="Select min 1 and max 2 items"
+                                 Items="GetBasicItems()"
+                                 Placeholder="Select items"
+                                 IsMultiSelect="true" />
+
+                    <ValidationMessage For="@(() => validationModel.Products)" />
+
+                    <br />
+
+                    <BitButton ButtonType="BitButtonType.Submit">Submit</BitButton>
+                </EditForm>
+            }
+            else
+            {
+                <BitMessage Color="BitColor.Success">@successMessage</BitMessage>
+            }
         </div>
     </ExamplePreview>
 </ComponentExampleBox>
 
-<ComponentExampleBox Title="Customization" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
+<ComponentExampleBox Title="Customization" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
     <ExamplePreview>
         <div>Shows how to customize dropdowns using templates for header, text, item, placeholder, label, and callout sections.</div>
         <br /><br />
@@ -218,64 +331,103 @@
     </ExamplePreview>
 </ComponentExampleBox>
 
-<ComponentExampleBox Title="Responsive" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
-    <ExamplePreview>
-        <div>When the <b>IsResponsive</b> parameter is true, on small screens the drop down items will render in a side panel.</div>
-        <br />
-        <div class="example-content">
-            <BitDropdown Label="Responsive Dropdown"
-                         Items="GetBasicItems()"
-                         DefaultValue="@string.Empty"
-                         Placeholder="Select an item"
-                         IsResponsive=true />
-        </div>
-    </ExamplePreview>
-</ComponentExampleBox>
-
-<ComponentExampleBox Title="SearchBox" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
+<ComponentExampleBox Title="Binding" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
     <ExamplePreview>
-        <div>Examples of dropdowns with search functionality, including default and custom search functions.</div>
+        <div>Demonstrates two-way binding and change event handling for dropdowns, showcasing single and multi-select scenarios.</div>
         <br /><br />
         <div class="example-content">
-            <BitDropdown Label="Single select & auto focus"
+            <div><b>Two-way binding</b>:</div><br />
+            <BitDropdown @bind-Value="controlledValue"
+                         Label="Single select"
                          Items="GetBasicItems()"
-                         DefaultValue="@string.Empty"
-                         Placeholder="Select an item"
-                         ShowSearchBox="true"
-                         AutoFocusSearchBox="true"
-                         SearchBoxPlaceholder="Search item" />
-            <br /><br />
-            <BitDropdown Label="Multi select"
+                         Placeholder="Select an item" />
+            <br />
+            <div>Selected Value: @controlledValue</div>
+            <br /><br />
+            <BitDropdown @bind-Values="controlledValues"
+                         Label="Multi select"
                          Items="GetBasicItems()"
-                         DefaultValue="@string.Empty"
                          Placeholder="Select items"
+                         IsMultiSelect="true" />
+            <br />
+            <div>Selected Values: @string.Join(",", controlledValues)</div>
+            <br /><br /><br /><br />
+            <div><b>OnChange</b>:</div><br />
+            <BitDropdown Label="Single select"
+                         Items="GetBasicItems()"
+                         Placeholder="Select an item"
+                         TItem="BitDropdownItem<string>" TValue="string"
+                         OnValuesChange="(BitDropdownItem<string>[] items) => changedItem = items.SingleOrDefault()" />
+            <br />
+            <div>Changed Value: @changedItem?.Value</div>
+            <br /><br />
+            <BitDropdown Label="Multi select"
                          IsMultiSelect="true"
-                         ShowSearchBox="true"
-                         SearchBoxPlaceholder="Search items" />
+                         Items="GetBasicItems()"
+                         Placeholder="Select items"
+                         TItem="BitDropdownItem<string>" TValue="string"
+                         OnValuesChange="(BitDropdownItem<string>[] items) => changedItems = items" />
+            <br />
+            <div>Changed Values: @string.Join(",", changedItems.Select(i => i.Value))</div>
             <br /><br /><br /><br />
-            <div><b>Custom search function</b>:</div><br />
-            <BitDropdown Label="Single select & auto focus"
+            <div><b>OnSelectItem</b>:</div><br />
+            <BitDropdown Label="Single select"
                          Items="GetBasicItems()"
                          DefaultValue="@string.Empty"
                          Placeholder="Select an item"
-                         ShowSearchBox="true"
-                         AutoFocusSearchBox="true"
-                         SearchFunction="(items, text) => items.Where(i => i.Text?.StartsWith(text, StringComparison.OrdinalIgnoreCase) ?? false).ToArray()"
-                         SearchBoxPlaceholder="Search item" />
+                         OnSelectItem="(BitDropdownItem<string> item) => selectedItem1 = item" />
+            <br />
+            <div>Selected Value: @selectedItem1?.Value</div>
             <br /><br />
             <BitDropdown Label="Multi select"
                          Items="GetBasicItems()"
                          DefaultValue="@string.Empty"
                          Placeholder="Select items"
                          IsMultiSelect="true"
-                         ShowSearchBox="true"
-                         SearchFunction="(items, text) => items.Where(i => i.Text?.EndsWith(text, StringComparison.OrdinalIgnoreCase) ?? false).ToArray()"
-                         SearchBoxPlaceholder="Search items" />
+                         OnSelectItem="(BitDropdownItem<string> item) => selectedItem2 = item" />
+            <br />
+            <div>Selected Value: @selectedItem2?.Value</div>
+        </div>
+    </ExamplePreview>
+</ComponentExampleBox>
+
+<ComponentExampleBox Title="Virtualization" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
+    <ExamplePreview>
+        <div>Demonstrates virtualization in the BitDropdown component for handling large datasets efficiently.</div>
+        <br /><br /><br />
+        <div class="example-content">
+            <div>With <b>Items</b>:</div><br />
+            <BitDropdown Label="Single select"
+                         Items="virtualizeItems1"
+                         DefaultValue="@string.Empty"
+                         Placeholder="Select an item"
+                         Virtualize="true" />
+            <br />
+            <BitDropdown Label="Multi select"
+                         Items="virtualizeItems2"
+                         DefaultValue="@string.Empty"
+                         IsMultiSelect="true"
+                         Placeholder="Select items"
+                         Virtualize="true" />
+            <br /><br /><br /><br />
+            <div>With <b>ItemsProvider</b>:</div><br />
+            <BitDropdown Label="Single select"
+                         Virtualize="true"
+                         ItemsProvider="LoadItems"
+                         Placeholder="Select an item"
+                         TItem="BitDropdownItem<string>" TValue="string" />
+            <br />
+            <BitDropdown Label="Multi select"
+                         Virtualize="true"
+                         IsMultiSelect="true"
+                         ItemsProvider="LoadItems"
+                         Placeholder="Select items"
+                         TItem="BitDropdownItem<string>" TValue="string" />
         </div>
     </ExamplePreview>
 </ComponentExampleBox>
 
-<ComponentExampleBox Title="ComboBox" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
+<ComponentExampleBox Title="ComboBox" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
     <ExamplePreview>
         <div>When the <b>Combo</b> parameter is true, you can type in BitDropdown input and search between items.</div>
         <br />
@@ -287,9 +439,23 @@
                          Items="comboBoxItems" />
             <br />
             <div>Value: @comboBoxValueSample1</div>
-            <br /><br /><br /><br />
-            <div>When the <b>Chips</b> parameter is true, shows the selected items like chips in the ComboBox.</div>
+            <br /><br />
+            <BitDropdown @bind-Values="comboBoxValues1"
+                         Combo IsMultiSelect
+                         Label="Multi select combo box"
+                         Placeholder="Select an option"
+                         Items="comboBoxItems" />
             <br />
+            <div>Values: @string.Join(',', comboBoxValues1)</div>
+        </div>
+    </ExamplePreview>
+</ComponentExampleBox>
+
+<ComponentExampleBox Title="Chips" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
+    <ExamplePreview>
+        <div>When the <b>Chips</b> parameter is true, shows the selected items like chips in the ComboBox.</div>
+        <br />
+        <div class="example-content">
             <BitDropdown @bind-Value="comboBoxValueSample2"
                          Combo Chips
                          Label="Single select combo box & chips"
@@ -297,9 +463,23 @@
                          Items="comboBoxItems" />
             <br />
             <div>Value: @comboBoxValueSample2</div>
-            <br /><br /><br /><br />
-            <div>When the <b>Dynamic</b> parameter is true, you can add a new item in the ComboBox.</div>
+            <br /><br />
+            <BitDropdown @bind-Values="comboBoxValues2"
+                         Combo Chips IsMultiSelect
+                         Label="Multi select combo box & chips"
+                         Placeholder="Select an option"
+                         Items="comboBoxItems" />
             <br />
+            <div>Values: @string.Join(',', comboBoxValues2)</div>
+        </div>
+    </ExamplePreview>
+</ComponentExampleBox>
+
+<ComponentExampleBox Title="Dynamic ComboBox" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
+    <ExamplePreview>
+        <div>When the <b>Dynamic</b> parameter is true, you can add a new item in the ComboBox.</div>
+        <br />
+        <div class="example-content">
             <BitDropdown @bind-Value="comboBoxValueSample3"
                          Combo Dynamic
                          Label="Single select combo box & dynamic"
@@ -309,8 +489,11 @@
                          OnDynamicAdd="(BitDropdownItem<string> item) => HandleOnDynamicAdd(item)" />
             <br />
             <div>Value: @comboBoxValueSample3</div>
-            <br /><br /><br /><br />
-            <div>When the <b>Combo</b>, <b>Chips</b> and <b>Dynamic</b> parameters are true, you can add a new item in the ComboBox (pressing the enter key or touching the add button on the mobile).</div>
+        </div>
+        <br /><br /><br /><br />
+        <div>When the <b>Combo</b>, <b>Chips</b> and <b>Dynamic</b> parameters are true, you can add a new item in the ComboBox (pressing the enter key or touching the add button on the mobile).</div>
+        <br />
+        <div class="example-content">
             <br />
             <BitDropdown @bind-Value="comboBoxValueSample4"
                          Combo Chips Dynamic
@@ -323,7 +506,7 @@
             <br />
             <div>Value: @comboBoxValueSample4</div>
             <br /><br />
-            <BitDropdown @bind-Values="comboBoxValues"
+            <BitDropdown @bind-Values="comboBoxValues3"
                          Combo Chips Dynamic
                          Label="Multi select combo box, chips & dynamic"
                          Placeholder="Select options"
@@ -333,51 +516,56 @@
                          DynamicValueGenerator="(BitDropdownItem<string> item) => item.Text"
                          OnDynamicAdd="(BitDropdownItem<string> item) => HandleOnDynamicAdd(item)" />
             <br />
-            <div>Values: @string.Join(',', comboBoxValues)</div>
+            <div>Values: @string.Join(',', comboBoxValues3)</div>
         </div>
     </ExamplePreview>
 </ComponentExampleBox>
 
-<ComponentExampleBox Title="Prefix & Suffix" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
+<ComponentExampleBox Title="Style & Class" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16">
     <ExamplePreview>
-        <div>Use prefixes and suffixes in BitDropdown, including combinations and the disabled state.</div>
-        <br />
+        <div>Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.</div>
+        <br /><br />
         <div class="example-content">
-            <BitDropdown Label="Prefix"
-                         Prefix="Fruits:"
-                         Items="GetBasicItems()"
+            <div>Component's Style & Class:</div><br />
+            <BitDropdown Items="GetBasicItems()"
+                         DefaultValue="@string.Empty"
                          Placeholder="Select an item"
-                         TItem="BitDropdownItem<string>"
-                         TValue="string" />
-            <br /><br />
-            <BitDropdown Label="Suffix"
-                         Suffix="kg"
-                         Items="GetBasicItems()"
+                         Style="margin: 1rem; box-shadow: aqua 0 0 0.5rem; text-shadow: aqua 0 0 0.5rem;" />
+            <br />
+            <BitDropdown Items="GetBasicItems()"
+                         DefaultValue="@string.Empty"
                          Placeholder="Select an item"
-                         TItem="BitDropdownItem<string>"
-                         TValue="string" />
-            <br /><br />
-            <BitDropdown Label="Prefix and Suffix"
-                         Prefix="Fruits:"
-                         Suffix="kg"
+                         Class="custom-class" />
+            <br /><br /><br /><br />
+            <div>Item's Style & Class:</div><br />
+            <BitDropdown Items="GetStyleClassItems()"
+                         DefaultValue="@string.Empty"
+                         Placeholder="Select an item" />
+            <br /><br /><br /><br />
+            <div><b>Styles</b> & <b>Classes</b>:</div><br />
+            <BitDropdown Label="Styles"
                          Items="GetBasicItems()"
+                         DefaultValue="@string.Empty"
                          Placeholder="Select an item"
-                         TItem="BitDropdownItem<string>"
-                         TValue="string" />
-            <br /><br />
-            <BitDropdown Label="Disabled"
-                         Prefix="Fruits:"
-                         Suffix="kg"
+                         Styles="@(new() { Label = "text-shadow: dodgerblue 0 0 0.5rem;",
+                                           Container = "box-shadow: dodgerblue 0 0 0.5rem; border-color: lightskyblue; color: lightskyblue;",
+                                           ItemHeader = "color: dodgerblue; text-shadow: dodgerblue 0 0 0.5rem;",
+                                           ItemButton = "color: lightskyblue",
+                                           Callout = "border-radius: 0.25rem; box-shadow: lightskyblue 0 0 0.5rem;" })" />
+            <br />
+            <BitDropdown Label="Classes"
                          Items="GetBasicItems()"
+                         DefaultValue="@string.Empty"
                          Placeholder="Select an item"
-                         TItem="BitDropdownItem<string>"
-                         TValue="string"
-                         IsEnabled="false" />
+                         Classes="@(new() { Callout = "custom-callout",
+                                            Container = "custom-container",
+                                            ItemButton = "custom-item-button",
+                                            ScrollContainer = "custom-scroll-container" })" />
         </div>
     </ExamplePreview>
 </ComponentExampleBox>
 
-<ComponentExampleBox Title="RTL" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
+<ComponentExampleBox Title="RTL" RazorCode="@example17RazorCode" CsharpCode="@example17CsharpCode" Id="example17">
     <ExamplePreview>
         <div>Use BitDropdown in right-to-left (RTL).</div>
         <br />
@@ -397,160 +585,3 @@
         </div>
     </ExamplePreview>
 </ComponentExampleBox>
-
-<ComponentExampleBox Title="Drop direction" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
-    <ExamplePreview>
-        <div>Explores different drop directions for the BitDropdown component, including automatic and explicit directions.</div>
-        <br />
-        <div class="example-content">
-            <BitDropdown Label="All"
-                         Items="dropDirectionItems"
-                         DefaultValue="@string.Empty"
-                         Placeholder="Select an item"
-                         DropDirection="BitDropDirection.All" />
-            <br /><br />
-            <BitDropdown Label="TopAndBottom"
-                         Items="dropDirectionItems"
-                         DefaultValue="@string.Empty"
-                         Placeholder="Select an item"
-                         DropDirection="BitDropDirection.TopAndBottom" />
-        </div>
-    </ExamplePreview>
-</ComponentExampleBox>
-
-<ComponentExampleBox Title="Clear button" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
-    <ExamplePreview>
-        <div>Shows the usage of the clear button in BitDropdown, allowing users to clear selected values in single and multi-select dropdowns.</div>
-        <br />
-        <div class="example-content">
-            <BitDropdown @bind-Value="clearValue"
-                         Label="Single select dropdown"
-                         Items="GetBasicItems()"
-                         Placeholder="Select an option"
-                         ShowClearButton="true" />
-            <br />
-            <div>Value: @clearValue</div>
-            <br><br /><br />
-            <BitDropdown @bind-Values="clearValues"
-                         Label="Multi select dropdown"
-                         Items="GetBasicItems()"
-                         Placeholder="Select options"
-                         IsMultiSelect="true"
-                         ShowClearButton="true" />
-            <br />
-            <div>Values: @string.Join(',', clearValues)</div>
-        </div>
-    </ExamplePreview>
-</ComponentExampleBox>
-
-<ComponentExampleBox Title="Validation" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
-    <ExamplePreview>
-        <div>Demonstrates how validation can be applied to BitDropdown, including required fields, numeric input, character constraints, email validation, and range validation.</div>
-        <br />
-        <div class="example-content">
-            @if (string.IsNullOrEmpty(successMessage))
-            {
-                <EditForm Model="validationModel" OnValidSubmit="HandleValidSubmit" OnInvalidSubmit="HandleInvalidSubmit">
-                    <DataAnnotationsValidator />
-
-                    <BitDropdown @bind-Value="validationModel.Category"
-                                 Label="Select 1 item"
-                                 Items="GetBasicItems()"
-                                 Placeholder="Select and item" />
-
-                    <ValidationMessage For="@(() => validationModel.Category)" />
-
-                    <br />
-
-                    <BitDropdown @bind-Values="validationModel.Products"
-                                 Label="Select min 1 and max 2 items"
-                                 Items="GetBasicItems()"
-                                 Placeholder="Select items"
-                                 IsMultiSelect="true" />
-
-                    <ValidationMessage For="@(() => validationModel.Products)" />
-
-                    <br />
-
-                    <BitButton ButtonType="BitButtonType.Submit">Submit</BitButton>
-                </EditForm>
-            }
-            else
-            {
-                <BitMessage Color="BitColor.Success">@successMessage</BitMessage>
-            }
-        </div>
-    </ExamplePreview>
-</ComponentExampleBox>
-
-<ComponentExampleBox Title="Virtualization" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
-    <ExamplePreview>
-        <div>Demonstrates virtualization in the BitDropdown component for handling large datasets efficiently.</div>
-        <br /><br /><br />
-        <div class="example-content">
-            <div>With <b>Items</b>:</div><br />
-            <BitDropdown Label="Single select"
-                         Items="virtualizeItems1"
-                         DefaultValue="@string.Empty"
-                         Placeholder="Select an item"
-                         Virtualize="true" />
-            <br />
-            <BitDropdown Label="Multi select"
-                         Items="virtualizeItems2"
-                         DefaultValue="@string.Empty"
-                         IsMultiSelect="true"
-                         Placeholder="Select items"
-                         Virtualize="true" />
-            <br /><br /><br /><br />
-            <div>With <b>ItemsProvider</b>:</div><br />
-            <BitDropdown Label="Single select"
-                         Virtualize="true"
-                         ItemsProvider="LoadItems"
-                         Placeholder="Select an item"
-                         TItem="BitDropdownItem<string>" TValue="string" />
-            <br />
-            <BitDropdown Label="Multi select"
-                         Virtualize="true"
-                         IsMultiSelect="true"
-                         ItemsProvider="LoadItems"
-                         Placeholder="Select items"
-                         TItem="BitDropdownItem<string>" TValue="string" />
-        </div>
-    </ExamplePreview>
-</ComponentExampleBox>
-
-<ComponentExampleBox Title="FitWidth" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
-    <ExamplePreview>
-        <div>Enables fit-content width for the dropdown that sets the width of the component based on its content size.</div>
-        <br /><br />
-        <BitDropdown Label="Single select" FitWidth
-                     Items="GetBasicItems()"
-                     DefaultValue="@string.Empty"
-                     Placeholder="Select an item" />
-        <br /><br />
-        <BitDropdown Label="Multi select" FitWidth
-                     Items="GetBasicItems()"
-                     DefaultValue="@string.Empty"
-                     Placeholder="Select items"
-                     IsMultiSelect="true" />
-    </ExamplePreview>
-</ComponentExampleBox>
-
-<ComponentExampleBox Title="NoBorder" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
-    <ExamplePreview>
-        <div>The dropdown can be rendered without any border.</div>
-        <br /><br />
-        <div style="max-width:10rem">
-            <BitDropdown NoBorder
-                         Items="GetBasicItems()"
-                         DefaultValue="@string.Empty"
-                         Placeholder="Select an item" />
-            <br /><br />
-            <BitDropdown NoBorder
-                         Items="GetBasicItems()"
-                         DefaultValue="@string.Empty"
-                         Placeholder="Select items"
-                         IsMultiSelect="true" />
-        </div>
-    </ExamplePreview>
-</ComponentExampleBox>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.cs
index fd06ad0280..5edae632c1 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.cs
@@ -100,7 +100,9 @@ private List<BitDropdownItem<string>> GetStyleClassItems() =>
     private string comboBoxValueSample2 = default!;
     private string comboBoxValueSample3 = default!;
     private string comboBoxValueSample4 = default!;
-    private ICollection<string> comboBoxValues = [];
+    private ICollection<string> comboBoxValues1 = [];
+    private ICollection<string> comboBoxValues2 = [];
+    private ICollection<string> comboBoxValues3 = [];
 
     protected override void OnInitialized()
     {
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.samples.cs
index 937a8dd25b..37a6c71265 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.samples.cs
@@ -46,83 +46,36 @@ public partial class _BitDropdownItemDemo
 };";
 
     private readonly string example2RazorCode = @"
-<style>
-    .custom-class {
-        margin-inline: 1rem;
-        box-shadow: dodgerblue 0 0 0.5rem;
-        text-shadow: dodgerblue 0 0 0.5rem;
-    }
-
-
-    .custom-fruit {
-        background-color: #a5104457;
-    }
-
-    .custom-veg {
-        background-color: #1c73324d;
-    }
-
-
-    .custom-callout {
-        border-radius: 1rem;
-        border-color: lightgray;
-        backdrop-filter: blur(20px);
-        background-color: transparent;
-        box-shadow: darkgray 0 0 0.5rem;
-    }
-
-    .custom-container, .custom-container:after {
-        border-radius: 1rem;
-    }
-
-    .custom-item-button {
-        border-bottom: 1px solid gray;
-    }
-
-    .custom-item-button:hover {
-        background-color: rgba(255, 255, 255, 0.2);
-    }
-
-    .custom-scroll-container div:last-child .custom-item-button {
-        border-bottom: none;
-    }
-</style>
-
-
-<BitDropdown Items=""GetBasicItems()""
-             DefaultValue=""@string.Empty""
+<BitDropdown Label=""Prefix""
+             Prefix=""Fruits:""
+             Items=""GetBasicItems()""
              Placeholder=""Select an item""
-             Style=""margin: 1rem; box-shadow: aqua 0 0 0.5rem; text-shadow: aqua 0 0 0.5rem;"" />
+             TItem=""BitDropdownItem<string>""
+             TValue=""string"" />
 
-<BitDropdown Items=""GetBasicItems()""
-             DefaultValue=""@string.Empty""
+<BitDropdown Label=""Suffix""
+             Suffix=""kg""
+             Items=""GetBasicItems()""
              Placeholder=""Select an item""
-             Class=""custom-class"" />
-
-
-<BitDropdown Items=""GetStyleClassItems()""
-             DefaultValue=""@string.Empty""
-             Placeholder=""Select an item"" />
-
+             TItem=""BitDropdownItem<string>""
+             TValue=""string"" />
 
-<BitDropdown Label=""Styles""
+<BitDropdown Label=""Prefix and Suffix""
+             Prefix=""Fruits:""
+             Suffix=""kg""
              Items=""GetBasicItems()""
-             DefaultValue=""@string.Empty""
              Placeholder=""Select an item""
-             Styles=""@(new() { Label = ""text-shadow: dodgerblue 0 0 0.5rem;"",
-                               Container = ""box-shadow: dodgerblue 0 0 0.5rem; border-color: lightskyblue; color: lightskyblue;"",
-                               ItemHeader = ""color: dodgerblue; text-shadow: dodgerblue 0 0 0.5rem;"",
-                               ItemButton = ""color: lightskyblue"",
-                               Callout = ""border-radius: 0.25rem; box-shadow: lightskyblue 0 0 0.5rem;"" })"" />
+             TItem=""BitDropdownItem<string>""
+             TValue=""string"" />
 
-<BitDropdown Label=""Classes""
+<BitDropdown Label=""Disabled""
+             Prefix=""Fruits:""
+             Suffix=""kg""
              Items=""GetBasicItems()""
-             DefaultValue=""@string.Empty""
              Placeholder=""Select an item""
-             Classes=""@(new() { Callout = ""custom-callout"",
-                                Container = ""custom-container"",
-                                ItemButton = ""custom-item-button"",
-                                ScrollContainer = ""custom-scroll-container"" })"" />";
+             TItem=""BitDropdownItem<string>""
+             TValue=""string""
+             IsEnabled=""false"" />";
     private readonly string example2CsharpCode = @"
 private List<BitDropdownItem<string>> GetBasicItems() => new()
 {
@@ -136,79 +89,20 @@ public partial class _BitDropdownItemDemo
     new() { Text = ""Broccoli"", Value = ""v-bro"" },
     new() { Text = ""Carrot"", Value = ""v-car"" },
     new() { Text = ""Lettuce"", Value = ""v-let"" }
-};
-
-private List<BitDropdownItem<string>> GetStyleClassItems() => new()
-{
-    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"", Style = ""text-align: center;"" },
-    new() { Text = ""Apple"", Value = ""f-app"", Class = ""custom-fruit"" },
-    new() { Text = ""Banana"", Value = ""f-ban"", Class = ""custom-fruit"" },
-    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false, Class = ""custom-fruit"" },
-    new() { Text = ""Grape"", Value = ""f-gra"", Class = ""custom-fruit"" },
-    new() { ItemType = BitDropdownItemType.Divider, Style = ""padding: 0 0.25rem;"" },
-    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"", Style = ""text-align: center;"" },
-    new() { Text = ""Broccoli"", Value = ""v-bro"", Class = ""custom-veg"" },
-    new() { Text = ""Carrot"", Value = ""v-car"", Class = ""custom-veg"" },
-    new() { Text = ""Lettuce"", Value = ""v-let"", Class = ""custom-veg"" }
 };";
 
     private readonly string example3RazorCode = @"
-<BitDropdown @bind-Value=""controlledValue""
-             Label=""Single select""
-             Items=""GetBasicItems()""
-             Placeholder=""Select an item"" />
-<div>Selected Value: @controlledValue</div>
-
-<BitDropdown @bind-Values=""controlledValues""
-             Label=""Multi select""
-             Items=""GetBasicItems()""
-             Placeholder=""Select items""
-             IsMultiSelect=""true"" />
-<div>Selected Values: @string.Join("","", controlledValues)</div>
-
-
-
-<BitDropdown Label=""Single select""
-             Items=""GetBasicItems()""
-             Placeholder=""Select an item""
-             TItem=""BitDropdownItem<string>"" TValue=""string""
-             OnValuesChange=""(BitDropdownItem<string>[] items) => changedItem = items.SingleOrDefault()"" />
-<div>Changed Value: @changedItem?.Value</div>
-            
-<BitDropdown Label=""Multi select""
-             IsMultiSelect=""true""
-             Items=""GetBasicItems()""
-             Placeholder=""Select items""
-             TItem=""BitDropdownItem<string>"" TValue=""string""
-             OnValuesChange=""(BitDropdownItem<string>[] items) => changedItems = items"" />
-<div>Changed Values: @string.Join("","", changedItems.Select(i => i.Value))</div>
-
-
-
-<BitDropdown Label=""Single select""
+<BitDropdown Label=""Single select"" FitWidth
              Items=""GetBasicItems()""
              DefaultValue=""@string.Empty""
-             Placeholder=""Select an item""
-             OnSelectItem=""(BitDropdownItem<string> item) => selectedItem1 = item"" />
-<div>Selected Value: @selectedItem1?.Value</div>
+             Placeholder=""Select an item"" />
 
-<BitDropdown Label=""Multi select""
+<BitDropdown Label=""Multi select"" FitWidth
              Items=""GetBasicItems()""
              DefaultValue=""@string.Empty""
              Placeholder=""Select items""
-             IsMultiSelect=""true""
-             OnSelectItem=""(BitDropdownItem<string> item) => selectedItem2 = item"" />
-<div>Selected Value: @selectedItem2?.Value</div>";
+             IsMultiSelect=""true"" />";
     private readonly string example3CsharpCode = @"
-private string controlledValue = ""f-app"";
-private ICollection<string?> controlledValues = new[] { ""f-app"", ""f-ban"" };
-
-private BitDropdownItem<string>? changedItem;
-private BitDropdownItem<string>[] changedItems = Array.Empty<BitDropdownItem<string>>();
-
-private BitDropdownItem<string>? selectedItem1;
-private BitDropdownItem<string>? selectedItem2;
-
 private List<BitDropdownItem<string>> GetBasicItems() => new()
 {
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
@@ -224,188 +118,17 @@ public partial class _BitDropdownItemDemo
 };";
 
     private readonly string example4RazorCode = @"
-<style>
-    .custom-drp {
-        gap: 10px;
-        display: flex;
-        align-items: center;
-        flex-flow: row nowrap;
-        justify-content: flex-start;
-    }
-
-    .custom-drp.custom-drp-lbl {
-        color: dodgerblue;
-    }
-
-    .custom-drp.custom-drp-txt {
-        color: goldenrod;
-    }
-
-    .custom-drp.custom-drp-ph {
-        color: orangered;
-    }
-
-    .custom-drp.custom-drp-item {
-        width: 100%;
-        cursor: pointer;
-    }
-
-    .custom-drp.custom-drp-header {
-        width: 100%;
-        padding: 5px 12px;
-        color: #ff4600;
-        font-weight: bold;
-    }
-</style>
-
-<BitDropdown Label=""Header template""
-             Items=""GetDataItems()""
-             DefaultValue=""@string.Empty""
-             Placeholder=""Select an item"">
-    <HeaderTemplate Context=""item"">
-        <div class=""custom-drp custom-drp-header"">
-            <BitIcon IconName=""@((item.Data as DropdownItemData)?.IconName)"" />
-            <div>@item.Text</div>
-        </div>
-    </HeaderTemplate>
-</BitDropdown>
-
-<BitDropdown Label=""Text & Item templates""
-             Items=""GetDataItems()""
-             DefaultValue=""@string.Empty""
-             Placeholder=""Select an item"">
-    <TextTemplate Context=""dropdown"">
-        <div class=""custom-drp custom-drp-txt"">
-            <BitIcon IconName=""@((dropdown.SelectedItem?.Data as DropdownItemData)?.IconName)"" />
-            <div>@dropdown.SelectedItem?.Text</div>
-        </div>
-    </TextTemplate>
-    <ItemTemplate Context=""item"">
-        <div class=""custom-drp custom-drp-item"">
-            <BitIcon IconName=""@((item.Data as DropdownItemData)?.IconName)"" />
-            <div Style=""text-decoration:underline"">@item.Text</div>
-        </div>
-    </ItemTemplate>
-</BitDropdown>
-
-<BitDropdown Label=""Placeholder template""
-             Items=""GetDataItems()""
-             DefaultValue=""@string.Empty""
-             Placeholder=""Select an item"">
-    <PlaceholderTemplate Context=""dropdown"">
-        <div class=""custom-drp custom-drp-ph"">
-            <BitIcon IconName=""@BitIconName.MessageFill"" />
-            <div>@dropdown.Placeholder</div>
-        </div>
-    </PlaceholderTemplate>
-</BitDropdown>
-
-<BitDropdown Label=""Label template""
-             Items=""GetDataItems()""
-             DefaultValue=""@string.Empty""
-             Placeholder=""Select an item"">
-    <LabelTemplate>
-        <div class=""custom-drp custom-drp-lbl"">
-            <div>Custom label</div>
-            <BitIcon IconName=""@BitIconName.Info"" AriaLabel=""Info"" />
-        </div>
-    </LabelTemplate>
-</BitDropdown>
-
-<BitDropdown Label=""CaretDownIconName""
-             Items=""GetDataItems()""
-             DefaultValue=""@string.Empty""
-             Placeholder=""Select an item""
-             CaretDownIconName=""@BitIconName.ScrollUpDown"" />
-
-<BitDropdown Label=""Callout templates""
-             Items=""GetBasicItems()""
-             DefaultValue=""@string.Empty""
-             Placeholder=""Select an item"">
-    <CalloutHeaderTemplate>
-        <div Style=""padding:0.5rem;border-bottom:1px solid #555"">Best in the world</div>
-    </CalloutHeaderTemplate>
-    <CalloutFooterTemplate>
-        <BitActionButton IconName=""@BitIconName.Add"">New Item</BitActionButton>
-    </CalloutFooterTemplate>
-</BitDropdown>";
-    private readonly string example4CsharpCode = @"
-public class DropdownItemData
-{
-    public string? IconName { get; set; }
-}
-
-private List<BitDropdownItem<string>> GetDataItems() =>  new()
-{
-    new() { ItemType = BitDropdownItemType.Header, Text = ""Items"", Data = new DropdownItemData { IconName = ""BulletedList2"" } },
-    new() { Text = ""Item a"", Value = ""A"", Data = new DropdownItemData { IconName = ""Memo"" } },
-    new() { Text = ""Item b"", Value = ""B"", Data = new DropdownItemData { IconName = ""Print"" } },
-    new() { Text = ""Item c"", Value = ""C"", Data = new DropdownItemData { IconName = ""ShoppingCart"" } },
-    new() { ItemType = BitDropdownItemType.Divider },
-    new() { ItemType = BitDropdownItemType.Header, Text = ""More Items"", Data = new DropdownItemData { IconName = ""BulletedTreeList"" } },
-    new() { Text = ""Item d"", Value = ""D"", Data = new DropdownItemData { IconName = ""Train"" } },
-    new() { Text = ""Item e"", Value = ""E"", Data = new DropdownItemData { IconName = ""Repair"" } },
-    new() { Text = ""Item f"", Value = ""F"", Data = new DropdownItemData { IconName = ""Running"" } }
-};";
-
-    private readonly string example5RazorCode = @"
-<BitDropdown Label=""Responsive Dropdown""
-             Items=""GetBasicItems()""
-             DefaultValue=""@string.Empty""
-             Placeholder=""Select an item""
-             IsResponsive=true />";
-    private readonly string example5CsharpCode = @"
-private List<BitDropdownItem<string>> GetBasicItems() => new()
-{
-    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
-    new() { Text = ""Apple"", Value = ""f-app"" },
-    new() { Text = ""Banana"", Value = ""f-ban"" },
-    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
-    new() { Text = ""Grape"", Value = ""f-gra"" },
-    new() { ItemType = BitDropdownItemType.Divider },
-    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
-    new() { Text = ""Broccoli"", Value = ""v-bro"" },
-    new() { Text = ""Carrot"", Value = ""v-car"" },
-    new() { Text = ""Lettuce"", Value = ""v-let"" }
-};";
-
-    private readonly string example6RazorCode = @"
-<BitDropdown Label=""Single select & auto focus""
-             Items=""GetBasicItems()""
-             DefaultValue=""@string.Empty""
-             Placeholder=""Select an item""
-             ShowSearchBox=""true""
-             AutoFocusSearchBox=""true""
-             SearchBoxPlaceholder=""Search item"" />
-
-<BitDropdown Label=""Multi select""
-             Items=""GetBasicItems()""
-             DefaultValue=""@string.Empty""
-             Placeholder=""Select items""
-             IsMultiSelect=""true""
-             ShowSearchBox=""true""
-             SearchBoxPlaceholder=""Search items"" />
-
-
-
-<BitDropdown Label=""Single select & auto focus""
+<BitDropdown NoBorder
              Items=""GetBasicItems()""
              DefaultValue=""@string.Empty""
-             Placeholder=""Select an item""
-             ShowSearchBox=""true""
-             AutoFocusSearchBox=""true""
-             SearchFunction=""(items, text) => items.Where(i => i.Text?.StartsWith(text, StringComparison.OrdinalIgnoreCase) ?? false).ToArray()""
-             SearchBoxPlaceholder=""Search item"" />
+             Placeholder=""Select an item"" />
 
-<BitDropdown Label=""Multi select""
+<BitDropdown NoBorder
              Items=""GetBasicItems()""
              DefaultValue=""@string.Empty""
              Placeholder=""Select items""
-             IsMultiSelect=""true""
-             ShowSearchBox=""true""
-             SearchFunction=""(items, text) => items.Where(i => i.Text?.EndsWith(text, StringComparison.OrdinalIgnoreCase) ?? false).ToArray()""
-             SearchBoxPlaceholder=""Search items"" />";
-    private readonly string example6CsharpCode = @"
+             IsMultiSelect=""true"" />";
+    private readonly string example4CsharpCode = @"
 private List<BitDropdownItem<string>> GetBasicItems() => new()
 {
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
@@ -420,103 +143,13 @@ public class DropdownItemData
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 };";
 
-    private readonly string example7RazorCode = @"
-<BitDropdown @bind-Value=""comboBoxValueSample1""
-             Combo
-             Label=""Single select combo box""
-             Placeholder=""Select an option""
-             Items=""comboBoxItems"" />
-<div>Value: @comboBoxValueSample1</div>
-
-<BitDropdown @bind-Value=""comboBoxValueSample2""
-             Combo Chips
-             Label=""Single select combo box & chips""
-             Placeholder=""Select an option""
-             Items=""comboBoxItems"" />
-<div>Value: @comboBoxValueSample2</div>
-
-<BitDropdown @bind-Value=""comboBoxValueSample3""
-             Combo Dynamic
-             Label=""Single select combo box & dynamic""
-             Placeholder=""Select an option""
-             Items=""comboBoxItems""
-             DynamicValueGenerator=""(BitDropdownItem<string> item) => item.Text""
-             OnDynamicAdd=""(BitDropdownItem<string> item) => HandleOnDynamicAdd(item)"" />
-<div>Value: @comboBoxValueSample3</div>
-
-<BitDropdown @bind-Value=""comboBoxValueSample4""
-             Combo Chips Dynamic
-             Label=""Single select combo box, chips & dynamic""
-             Placeholder=""Select an option""
-             Items=""comboBoxItems""
-             IsResponsive=""true""
-             DynamicValueGenerator=""(BitDropdownItem<string> item) => item.Text""
-             OnDynamicAdd=""(BitDropdownItem<string> item) => HandleOnDynamicAdd(item)"" />
-<div>Value: @comboBoxValueSample4</div>
-
-<BitDropdown @bind-Values=""comboBoxValues""
-             Combo Chips Dynamic
-             Label=""Multi select combo box, chips & dynamic""
-             Placeholder=""Select options""
-             Items=""comboBoxItems""
-             IsMultiSelect=""true""
-             IsResponsive=""true""
-             DynamicValueGenerator=""(BitDropdownItem<string> item) => item.Text""
-             OnDynamicAdd=""(BitDropdownItem<string> item) => HandleOnDynamicAdd(item)"" />
-<div>Values: @string.Join(',', comboBoxValues)</div>";
-    private readonly string example7CsharpCode = @"
-private string comboBoxValueSample1 = default!;
-private string comboBoxValueSample2 = default!;
-private string comboBoxValueSample3 = default!;
-private string comboBoxValueSample4 = default!;
-private ICollection<string?> comboBoxValues = [];
-
-private List<BitDropdownItem<string>> comboBoxItems = new()
-{
-    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
-    new() { Text = ""Apple"", Value = ""f-app"" },
-    new() { Text = ""Banana"", Value = ""f-ban"" },
-    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
-    new() { Text = ""Grape"", Value = ""f-gra"" },
-    new() { ItemType = BitDropdownItemType.Divider },
-    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
-    new() { Text = ""Broccoli"", Value = ""v-bro"" },
-    new() { Text = ""Carrot"", Value = ""v-car"" },
-    new() { Text = ""Lettuce"", Value = ""v-let"" }
-};";
-
-    private readonly string example8RazorCode = @"
-<BitDropdown Label=""Prefix""
-             Prefix=""Fruits:""
-             Items=""GetBasicItems()""
-             Placeholder=""Select an item""
-             TItem=""BitDropdownItem<string>""
-             TValue=""string"" />
-
-<BitDropdown Label=""Suffix""
-             Suffix=""kg""
-             Items=""GetBasicItems()""
-             Placeholder=""Select an item""
-             TItem=""BitDropdownItem<string>""
-             TValue=""string"" />
-
-<BitDropdown Label=""Prefix and Suffix""
-             Prefix=""Fruits:""
-             Suffix=""kg""
-             Items=""GetBasicItems()""
-             Placeholder=""Select an item""
-             TItem=""BitDropdownItem<string>""
-             TValue=""string"" />
-
-<BitDropdown Label=""Disabled""
-             Prefix=""Fruits:""
-             Suffix=""kg""
+    private readonly string example5RazorCode = @"
+<BitDropdown Label=""Responsive Dropdown""
              Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
              Placeholder=""Select an item""
-             TItem=""BitDropdownItem<string>""
-             TValue=""string""
-             IsEnabled=""false"" />";
-    private readonly string example8CsharpCode = @"
+             IsResponsive=true />";
+    private readonly string example5CsharpCode = @"
 private List<BitDropdownItem<string>> GetBasicItems() => new()
 {
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
@@ -531,35 +164,7 @@ Combo Chips Dynamic
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 };";
 
-    private readonly string example9RazorCode = @"
-<BitDropdown Label=""تک انتخابی""
-             Items=""GetRtlItems()""
-             DefaultValue=""@string.Empty""
-             Placeholder=""لطفا انتخاب کنید""
-             Dir=""BitDir.Rtl"" />
-
-<BitDropdown Label=""چند انتخابی""
-             Items=""GetRtlItems()""
-             DefaultValue=""@string.Empty""
-             Placeholder=""انتخاب چند گزینه ای""
-             IsMultiSelect=""true""
-             Dir=""BitDir.Rtl"" />";
-    private readonly string example9CsharpCode = @"
-private List<BitDropdownItem<string>> GetRtlItems() => new()
-{
-    new() { ItemType = BitDropdownItemType.Header, Text = ""میوه ها"" },
-    new() { Text = ""سیب"", Value = ""f-app"" },
-    new() { Text = ""موز"", Value = ""f-ban"" },
-    new() { Text = ""پرتقال"", Value = ""f-ora"", IsEnabled = false },
-    new() { Text = ""انگور"", Value = ""f-gra"" },
-    new() { ItemType = BitDropdownItemType.Divider },
-    new() { ItemType = BitDropdownItemType.Header, Text = ""سیزیجات"" },
-    new() { Text = ""کلم بروكلی"", Value = ""v-bro"" },
-    new() { Text = ""هویج"", Value = ""v-car"" },
-    new() { Text = ""کاهو"", Value = ""v-let"" }
-};";
-
-    private readonly string example10RazorCode = @"
+    private readonly string example6RazorCode = @"
 <BitDropdown Label=""All""
              Items=""dropDirectionItems""
              DefaultValue=""@string.Empty""
@@ -571,7 +176,7 @@ Combo Chips Dynamic
              DefaultValue=""@string.Empty""
              Placeholder=""Select an item""
              DropDirection=""BitDropDirection.TopAndBottom"" />";
-    private readonly string example10CsharpCode = @"
+    private readonly string example6CsharpCode = @"
 private ICollection<BitDropdownItem<string>>? dropDirectionItems;
 
 protected override void OnInitialized()
@@ -581,7 +186,7 @@ protected override void OnInitialized()
                                        .ToArray();
 }";
 
-    private readonly string example11RazorCode = @"
+    private readonly string example7RazorCode = @"
 <BitDropdown @bind-Value=""clearValue""
              Label=""Single select dropdown""
              Items=""GetBasicItems()""
@@ -597,7 +202,7 @@ protected override void OnInitialized()
              IsMultiSelect=""true""
              ShowClearButton=""true"" />
 <div>Values: @string.Join(',', clearValues)</div>";
-    private readonly string example11CsharpCode = @"
+    private readonly string example7CsharpCode = @"
 private string? clearValue = ""f-app"";
 private ICollection<string?> clearValues = new[] { ""f-app"", ""f-ban"" };
 
@@ -615,7 +220,58 @@ protected override void OnInitialized()
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 };";
 
-    private readonly string example12RazorCode = @"
+    private readonly string example8RazorCode = @"
+<BitDropdown Label=""Single select & auto focus""
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             ShowSearchBox=""true""
+             AutoFocusSearchBox=""true""
+             SearchBoxPlaceholder=""Search item"" />
+
+<BitDropdown Label=""Multi select""
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select items""
+             IsMultiSelect=""true""
+             ShowSearchBox=""true""
+             SearchBoxPlaceholder=""Search items"" />
+
+
+
+<BitDropdown Label=""Single select & auto focus""
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             ShowSearchBox=""true""
+             AutoFocusSearchBox=""true""
+             SearchFunction=""(items, text) => items.Where(i => i.Text?.StartsWith(text, StringComparison.OrdinalIgnoreCase) ?? false).ToArray()""
+             SearchBoxPlaceholder=""Search item"" />
+
+<BitDropdown Label=""Multi select""
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select items""
+             IsMultiSelect=""true""
+             ShowSearchBox=""true""
+             SearchFunction=""(items, text) => items.Where(i => i.Text?.EndsWith(text, StringComparison.OrdinalIgnoreCase) ?? false).ToArray()""
+             SearchBoxPlaceholder=""Search items"" />";
+    private readonly string example8CsharpCode = @"
+private List<BitDropdownItem<string>> GetBasicItems() => new()
+{
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};";
+
+    private readonly string example9RazorCode = @"
 @using System.ComponentModel.DataAnnotations;
 
 <style>
@@ -634,31 +290,227 @@ protected override void OnInitialized()
                  Placeholder=""Select an item"" />
     <ValidationMessage For=""@(() => validationModel.Category)"" />
 
-    <BitDropdown @bind-Values=""validationModel.Products""
-                 Label=""Select min 1 and max 2 items""
-                 Items=""GetBasicItems()""
-                 Placeholder=""Select items""
-                 IsMultiSelect=""true"" />
-    <ValidationMessage For=""@(() => validationModel.Products)"" />
+    <BitDropdown @bind-Values=""validationModel.Products""
+                 Label=""Select min 1 and max 2 items""
+                 Items=""GetBasicItems()""
+                 Placeholder=""Select items""
+                 IsMultiSelect=""true"" />
+    <ValidationMessage For=""@(() => validationModel.Products)"" />
+
+    <BitButton ButtonType=""BitButtonType.Submit"">Submit</BitButton>
+</EditForm>";
+    private readonly string example9CsharpCode = @"
+public class FormValidationDropdownModel
+{
+    [MaxLength(2, ErrorMessage = ""The property {0} have more than {1} elements"")]
+    [MinLength(1, ErrorMessage = ""The property {0} doesn't have at least {1} elements"")]
+    public ICollection<string?> Products { get; set; } = new List<string?>();
+
+    [Required]
+    public string Category { get; set; }
+}
+
+private FormValidationDropdownModel validationModel = new();
+
+private async Task HandleValidSubmit() { }
+
+private void HandleInvalidSubmit() { }
+
+private List<BitDropdownItem<string>> GetBasicItems() => new()
+{
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};";
+
+    private readonly string example10RazorCode = @"
+<style>
+    .custom-drp {
+        gap: 10px;
+        display: flex;
+        align-items: center;
+        flex-flow: row nowrap;
+        justify-content: flex-start;
+    }
+
+    .custom-drp.custom-drp-lbl {
+        color: dodgerblue;
+    }
+
+    .custom-drp.custom-drp-txt {
+        color: goldenrod;
+    }
+
+    .custom-drp.custom-drp-ph {
+        color: orangered;
+    }
+
+    .custom-drp.custom-drp-item {
+        width: 100%;
+        cursor: pointer;
+    }
+
+    .custom-drp.custom-drp-header {
+        width: 100%;
+        padding: 5px 12px;
+        color: #ff4600;
+        font-weight: bold;
+    }
+</style>
+
+<BitDropdown Label=""Header template""
+             Items=""GetDataItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item"">
+    <HeaderTemplate Context=""item"">
+        <div class=""custom-drp custom-drp-header"">
+            <BitIcon IconName=""@((item.Data as DropdownItemData)?.IconName)"" />
+            <div>@item.Text</div>
+        </div>
+    </HeaderTemplate>
+</BitDropdown>
+
+<BitDropdown Label=""Text & Item templates""
+             Items=""GetDataItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item"">
+    <TextTemplate Context=""dropdown"">
+        <div class=""custom-drp custom-drp-txt"">
+            <BitIcon IconName=""@((dropdown.SelectedItem?.Data as DropdownItemData)?.IconName)"" />
+            <div>@dropdown.SelectedItem?.Text</div>
+        </div>
+    </TextTemplate>
+    <ItemTemplate Context=""item"">
+        <div class=""custom-drp custom-drp-item"">
+            <BitIcon IconName=""@((item.Data as DropdownItemData)?.IconName)"" />
+            <div Style=""text-decoration:underline"">@item.Text</div>
+        </div>
+    </ItemTemplate>
+</BitDropdown>
+
+<BitDropdown Label=""Placeholder template""
+             Items=""GetDataItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item"">
+    <PlaceholderTemplate Context=""dropdown"">
+        <div class=""custom-drp custom-drp-ph"">
+            <BitIcon IconName=""@BitIconName.MessageFill"" />
+            <div>@dropdown.Placeholder</div>
+        </div>
+    </PlaceholderTemplate>
+</BitDropdown>
+
+<BitDropdown Label=""Label template""
+             Items=""GetDataItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item"">
+    <LabelTemplate>
+        <div class=""custom-drp custom-drp-lbl"">
+            <div>Custom label</div>
+            <BitIcon IconName=""@BitIconName.Info"" AriaLabel=""Info"" />
+        </div>
+    </LabelTemplate>
+</BitDropdown>
+
+<BitDropdown Label=""CaretDownIconName""
+             Items=""GetDataItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             CaretDownIconName=""@BitIconName.ScrollUpDown"" />
+
+<BitDropdown Label=""Callout templates""
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item"">
+    <CalloutHeaderTemplate>
+        <div Style=""padding:0.5rem;border-bottom:1px solid #555"">Best in the world</div>
+    </CalloutHeaderTemplate>
+    <CalloutFooterTemplate>
+        <BitActionButton IconName=""@BitIconName.Add"">New Item</BitActionButton>
+    </CalloutFooterTemplate>
+</BitDropdown>";
+    private readonly string example10CsharpCode = @"
+public class DropdownItemData
+{
+    public string? IconName { get; set; }
+}
+
+private List<BitDropdownItem<string>> GetDataItems() =>  new()
+{
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Items"", Data = new DropdownItemData { IconName = ""BulletedList2"" } },
+    new() { Text = ""Item a"", Value = ""A"", Data = new DropdownItemData { IconName = ""Memo"" } },
+    new() { Text = ""Item b"", Value = ""B"", Data = new DropdownItemData { IconName = ""Print"" } },
+    new() { Text = ""Item c"", Value = ""C"", Data = new DropdownItemData { IconName = ""ShoppingCart"" } },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""More Items"", Data = new DropdownItemData { IconName = ""BulletedTreeList"" } },
+    new() { Text = ""Item d"", Value = ""D"", Data = new DropdownItemData { IconName = ""Train"" } },
+    new() { Text = ""Item e"", Value = ""E"", Data = new DropdownItemData { IconName = ""Repair"" } },
+    new() { Text = ""Item f"", Value = ""F"", Data = new DropdownItemData { IconName = ""Running"" } }
+};";
+
+    private readonly string example11RazorCode = @"
+<BitDropdown @bind-Value=""controlledValue""
+             Label=""Single select""
+             Items=""GetBasicItems()""
+             Placeholder=""Select an item"" />
+<div>Selected Value: @controlledValue</div>
+
+<BitDropdown @bind-Values=""controlledValues""
+             Label=""Multi select""
+             Items=""GetBasicItems()""
+             Placeholder=""Select items""
+             IsMultiSelect=""true"" />
+<div>Selected Values: @string.Join("","", controlledValues)</div>
+
+
+
+<BitDropdown Label=""Single select""
+             Items=""GetBasicItems()""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownItem<string>"" TValue=""string""
+             OnValuesChange=""(BitDropdownItem<string>[] items) => changedItem = items.SingleOrDefault()"" />
+<div>Changed Value: @changedItem?.Value</div>
+            
+<BitDropdown Label=""Multi select""
+             IsMultiSelect=""true""
+             Items=""GetBasicItems()""
+             Placeholder=""Select items""
+             TItem=""BitDropdownItem<string>"" TValue=""string""
+             OnValuesChange=""(BitDropdownItem<string>[] items) => changedItems = items"" />
+<div>Changed Values: @string.Join("","", changedItems.Select(i => i.Value))</div>
+
 
-    <BitButton ButtonType=""BitButtonType.Submit"">Submit</BitButton>
-</EditForm>";
-    private readonly string example12CsharpCode = @"
-public class FormValidationDropdownModel
-{
-    [MaxLength(2, ErrorMessage = ""The property {0} have more than {1} elements"")]
-    [MinLength(1, ErrorMessage = ""The property {0} doesn't have at least {1} elements"")]
-    public ICollection<string?> Products { get; set; } = new List<string?>();
 
-    [Required]
-    public string Category { get; set; }
-}
+<BitDropdown Label=""Single select""
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             OnSelectItem=""(BitDropdownItem<string> item) => selectedItem1 = item"" />
+<div>Selected Value: @selectedItem1?.Value</div>
 
-private FormValidationDropdownModel validationModel = new();
+<BitDropdown Label=""Multi select""
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select items""
+             IsMultiSelect=""true""
+             OnSelectItem=""(BitDropdownItem<string> item) => selectedItem2 = item"" />
+<div>Selected Value: @selectedItem2?.Value</div>";
+    private readonly string example11CsharpCode = @"
+private string controlledValue = ""f-app"";
+private ICollection<string?> controlledValues = new[] { ""f-app"", ""f-ban"" };
 
-private async Task HandleValidSubmit() { }
+private BitDropdownItem<string>? changedItem;
+private BitDropdownItem<string>[] changedItems = Array.Empty<BitDropdownItem<string>>();
 
-private void HandleInvalidSubmit() { }
+private BitDropdownItem<string>? selectedItem1;
+private BitDropdownItem<string>? selectedItem2;
 
 private List<BitDropdownItem<string>> GetBasicItems() => new()
 {
@@ -674,7 +526,7 @@ private void HandleInvalidSubmit() { }
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 };";
 
-    private readonly string example13RazorCode = @"
+    private readonly string example12RazorCode = @"
 <BitDropdown Label=""Single select""
              Items=""virtualizeItems1""
              DefaultValue=""@string.Empty""
@@ -702,7 +554,7 @@ private void HandleInvalidSubmit() { }
              ItemsProvider=""LoadItems""
              Placeholder=""Select items""
              TItem=""BitDropdownItem<string>"" TValue=""string"" />";
-    private readonly string example13CsharpCode = @"
+    private readonly string example12CsharpCode = @"
 private ICollection<BitDropdownItem<string>>? virtualizeItems1;
 private ICollection<BitDropdownItem<string>>? virtualizeItems2;
 
@@ -757,19 +609,57 @@ private async ValueTask<BitDropdownItemsProviderResult<BitDropdownItem<string>>>
     }
 }";
 
+    private readonly string example13RazorCode = @"
+<BitDropdown @bind-Value=""comboBoxValueSample1""
+             Combo
+             Label=""Single select combo box""
+             Placeholder=""Select an option""
+             Items=""comboBoxItems"" />
+<div>Value: @comboBoxValueSample1</div>
+
+<BitDropdown @bind-Values=""comboBoxValues1""
+             Combo IsMultiSelect
+             Label=""Multi select combo box""
+             Placeholder=""Select an option""
+             Items=""comboBoxItems"" />
+<div>Values: @string.Join(',', comboBoxValues1)</div>";
+    private readonly string example13CsharpCode = @"
+private string comboBoxValueSample1 = default!;
+private ICollection<string?> comboBoxValues1 = [];
+
+private List<BitDropdownItem<string>> comboBoxItems = new()
+{
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};";
+
     private readonly string example14RazorCode = @"
-<BitDropdown Label=""Single select"" FitWidth
-             Items=""GetBasicItems()""
-             DefaultValue=""@string.Empty""
-             Placeholder=""Select an item"" />
+<BitDropdown @bind-Value=""comboBoxValueSample2""
+             Combo Chips
+             Label=""Single select combo box & chips""
+             Placeholder=""Select an option""
+             Items=""comboBoxItems"" />
+<div>Value: @comboBoxValueSample2</div>
 
-<BitDropdown Label=""Multi select"" FitWidth
-             Items=""GetBasicItems()""
-             DefaultValue=""@string.Empty""
-             Placeholder=""Select items""
-             IsMultiSelect=""true"" />";
+<BitDropdown @bind-Values=""comboBoxValues2""
+             Combo Chips IsMultiSelect
+             Label=""Multi select combo box & chips""
+             Placeholder=""Select an option""
+             Items=""comboBoxItems"" />
+<div>Values: @string.Join(',', comboBoxValues2)</div>";
     private readonly string example14CsharpCode = @"
-private List<BitDropdownItem<string>> GetBasicItems() => new()
+private string comboBoxValueSample2 = default!;
+private ICollection<string?> comboBoxValues2 = [];
+
+private List<BitDropdownItem<string>> comboBoxItems = new()
 {
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
     new() { Text = ""Apple"", Value = ""f-app"" },
@@ -784,17 +674,133 @@ private async ValueTask<BitDropdownItemsProviderResult<BitDropdownItem<string>>>
 };";
 
     private readonly string example15RazorCode = @"
-<BitDropdown NoBorder
-             Items=""GetBasicItems()""
+<BitDropdown @bind-Value=""comboBoxValueSample3""
+             Combo Dynamic
+             Label=""Single select combo box & dynamic""
+             Placeholder=""Select an option""
+             Items=""comboBoxItems""
+             DynamicValueGenerator=""(BitDropdownItem<string> item) => item.Text""
+             OnDynamicAdd=""(BitDropdownItem<string> item) => HandleOnDynamicAdd(item)"" />
+<div>Value: @comboBoxValueSample3</div>
+
+<BitDropdown @bind-Value=""comboBoxValueSample4""
+             Combo Chips Dynamic
+             Label=""Single select combo box, chips & dynamic""
+             Placeholder=""Select an option""
+             Items=""comboBoxItems""
+             IsResponsive=""true""
+             DynamicValueGenerator=""(BitDropdownItem<string> item) => item.Text""
+             OnDynamicAdd=""(BitDropdownItem<string> item) => HandleOnDynamicAdd(item)"" />
+<div>Value: @comboBoxValueSample4</div>
+
+<BitDropdown @bind-Values=""comboBoxValues3""
+             Combo Chips Dynamic
+             Label=""Multi select combo box, chips & dynamic""
+             Placeholder=""Select options""
+             Items=""comboBoxItems""
+             IsMultiSelect=""true""
+             IsResponsive=""true""
+             DynamicValueGenerator=""(BitDropdownItem<string> item) => item.Text""
+             OnDynamicAdd=""(BitDropdownItem<string> item) => HandleOnDynamicAdd(item)"" />
+<div>Values: @string.Join(',', comboBoxValues3)</div>";
+    private readonly string example15CsharpCode = @"
+private string comboBoxValueSample3 = default!;
+private string comboBoxValueSample4 = default!;
+private ICollection<string?> comboBoxValues3 = [];
+
+private List<BitDropdownItem<string>> comboBoxItems = new()
+{
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};";
+
+    private readonly string example16RazorCode = @"
+<style>
+    .custom-class {
+        margin-inline: 1rem;
+        box-shadow: dodgerblue 0 0 0.5rem;
+        text-shadow: dodgerblue 0 0 0.5rem;
+    }
+
+
+    .custom-fruit {
+        background-color: #a5104457;
+    }
+
+    .custom-veg {
+        background-color: #1c73324d;
+    }
+
+
+    .custom-callout {
+        border-radius: 1rem;
+        border-color: lightgray;
+        backdrop-filter: blur(20px);
+        background-color: transparent;
+        box-shadow: darkgray 0 0 0.5rem;
+    }
+
+    .custom-container, .custom-container:after {
+        border-radius: 1rem;
+    }
+
+    .custom-item-button {
+        border-bottom: 1px solid gray;
+    }
+
+    .custom-item-button:hover {
+        background-color: rgba(255, 255, 255, 0.2);
+    }
+
+    .custom-scroll-container div:last-child .custom-item-button {
+        border-bottom: none;
+    }
+</style>
+
+
+<BitDropdown Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             Style=""margin: 1rem; box-shadow: aqua 0 0 0.5rem; text-shadow: aqua 0 0 0.5rem;"" />
+
+<BitDropdown Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             Class=""custom-class"" />
+
+
+<BitDropdown Items=""GetStyleClassItems()""
              DefaultValue=""@string.Empty""
              Placeholder=""Select an item"" />
 
-<BitDropdown NoBorder
+
+<BitDropdown Label=""Styles""
              Items=""GetBasicItems()""
              DefaultValue=""@string.Empty""
-             Placeholder=""Select items""
-             IsMultiSelect=""true"" />";
-    private readonly string example15CsharpCode = @"
+             Placeholder=""Select an item""
+             Styles=""@(new() { Label = ""text-shadow: dodgerblue 0 0 0.5rem;"",
+                               Container = ""box-shadow: dodgerblue 0 0 0.5rem; border-color: lightskyblue; color: lightskyblue;"",
+                               ItemHeader = ""color: dodgerblue; text-shadow: dodgerblue 0 0 0.5rem;"",
+                               ItemButton = ""color: lightskyblue"",
+                               Callout = ""border-radius: 0.25rem; box-shadow: lightskyblue 0 0 0.5rem;"" })"" />
+
+<BitDropdown Label=""Classes""
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             Classes=""@(new() { Callout = ""custom-callout"",
+                                Container = ""custom-container"",
+                                ItemButton = ""custom-item-button"",
+                                ScrollContainer = ""custom-scroll-container"" })"" />";
+    private readonly string example16CsharpCode = @"
 private List<BitDropdownItem<string>> GetBasicItems() => new()
 {
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
@@ -807,5 +813,47 @@ private async ValueTask<BitDropdownItemsProviderResult<BitDropdownItem<string>>>
     new() { Text = ""Broccoli"", Value = ""v-bro"" },
     new() { Text = ""Carrot"", Value = ""v-car"" },
     new() { Text = ""Lettuce"", Value = ""v-let"" }
+};
+
+private List<BitDropdownItem<string>> GetStyleClassItems() => new()
+{
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"", Style = ""text-align: center;"" },
+    new() { Text = ""Apple"", Value = ""f-app"", Class = ""custom-fruit"" },
+    new() { Text = ""Banana"", Value = ""f-ban"", Class = ""custom-fruit"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false, Class = ""custom-fruit"" },
+    new() { Text = ""Grape"", Value = ""f-gra"", Class = ""custom-fruit"" },
+    new() { ItemType = BitDropdownItemType.Divider, Style = ""padding: 0 0.25rem;"" },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"", Style = ""text-align: center;"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"", Class = ""custom-veg"" },
+    new() { Text = ""Carrot"", Value = ""v-car"", Class = ""custom-veg"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"", Class = ""custom-veg"" }
+};";
+
+    private readonly string example17RazorCode = @"
+<BitDropdown Label=""تک انتخابی""
+             Items=""GetRtlItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""لطفا انتخاب کنید""
+             Dir=""BitDir.Rtl"" />
+
+<BitDropdown Label=""چند انتخابی""
+             Items=""GetRtlItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""انتخاب چند گزینه ای""
+             IsMultiSelect=""true""
+             Dir=""BitDir.Rtl"" />";
+    private readonly string example17CsharpCode = @"
+private List<BitDropdownItem<string>> GetRtlItems() => new()
+{
+    new() { ItemType = BitDropdownItemType.Header, Text = ""میوه ها"" },
+    new() { Text = ""سیب"", Value = ""f-app"" },
+    new() { Text = ""موز"", Value = ""f-ban"" },
+    new() { Text = ""پرتقال"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""انگور"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""سیزیجات"" },
+    new() { Text = ""کلم بروكلی"", Value = ""v-bro"" },
+    new() { Text = ""هویج"", Value = ""v-car"" },
+    new() { Text = ""کاهو"", Value = ""v-let"" }
 };";
 }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor
index 059db2cbe5..3c5aff939b 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor
@@ -60,61 +60,104 @@
     </ExamplePreview>
 </ComponentExampleBox>
 
-<ComponentExampleBox Title="Style & Class" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
+<ComponentExampleBox Title="Prefix & Suffix" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
     <ExamplePreview>
-        <div>Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.</div>
-        <br /><br />
+        <div>Use prefixes and suffixes in BitDropdown, including combinations and the disabled state.</div>
+        <br />
         <div class="example-content">
-            <div>Component's Style & Class:</div><br />
-            <BitDropdown Placeholder="Select an item"
-                         TItem="BitDropdownOption<string>" TValue="string"
-                         Style="margin: 1rem; box-shadow: aqua 0 0 0.5rem; text-shadow: aqua 0 0 0.5rem;">
+            <BitDropdown Label="Prefix"
+                         Prefix="Fruits:"
+                         Placeholder="Select an item"
+                         TItem="BitDropdownOption<string>"
+                         TValue="string">
                 @foreach (var item in basicItems)
                 {
                     <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
                 }
             </BitDropdown>
-            <br />
-            <BitDropdown Placeholder="Select an item"
-                         TItem="BitDropdownOption<string>" TValue="string"
-                         Class="custom-class">
+            <br /><br />
+            <BitDropdown Label="Suffix"
+                         Suffix="kg"
+                         Placeholder="Select an item"
+                         TItem="BitDropdownOption<string>"
+                         TValue="string">
                 @foreach (var item in basicItems)
                 {
                     <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
                 }
             </BitDropdown>
-            <br /><br /><br /><br />
-            <div>Item's Style & Class:</div><br />
-            <BitDropdown Placeholder="Select an item"
-                         TItem="BitDropdownOption<string>" TValue="string">
-                @foreach (var item in styleClassItems)
+            <br /><br />
+            <BitDropdown Label="Prefix and Suffix"
+                         Prefix="Fruits:"
+                         Suffix="kg"
+                         Placeholder="Select an item"
+                         TItem="BitDropdownOption<string>"
+                         TValue="string">
+                @foreach (var item in basicItems)
                 {
-                    <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" Style="@item.Style" Class="@item.Class" />
+                    <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
                 }
             </BitDropdown>
-            <br /><br /><br /><br />
-            <div><b>Styles</b> & <b>Classes</b>:</div><br />
-            <BitDropdown Label="Styles"
+            <br /><br />
+            <BitDropdown Label="Disabled"
+                         Prefix="Fruits:"
+                         Suffix="kg"
                          Placeholder="Select an item"
-                         TItem="BitDropdownOption<string>" TValue="string"
-                         Styles="@(new() { Label = "text-shadow: dodgerblue 0 0 0.5rem;",
-                                       Container = "box-shadow: dodgerblue 0 0 0.5rem; border-color: lightskyblue; color: lightskyblue;",
-                                       ItemHeader = "color: dodgerblue; text-shadow: dodgerblue 0 0 0.5rem;",
-                                       ItemButton = "color: lightskyblue",
-                                       Callout = "border-radius: 0.25rem; box-shadow: lightskyblue 0 0 0.5rem;" })">
+                         TItem="BitDropdownOption<string>"
+                         TValue="string"
+                         IsEnabled="false">
                 @foreach (var item in basicItems)
                 {
                     <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
                 }
             </BitDropdown>
-            <br />
-            <BitDropdown Label="Classes"
+        </div>
+    </ExamplePreview>
+</ComponentExampleBox>
+
+<ComponentExampleBox Title="FitWidth" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
+    <ExamplePreview>
+        <div>Enables fit-content width for the dropdown that sets the width of the component based on its content size.</div>
+        <br /><br />
+        <BitDropdown Label="Single select" FitWidth
+                     Placeholder="Select an item"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+        <br /><br />
+        <BitDropdown Label="Multi select" FitWidth
+                     Placeholder="Select items"
+                     IsMultiSelect="true"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+    </ExamplePreview>
+</ComponentExampleBox>
+
+<ComponentExampleBox Title="NoBorder" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
+    <ExamplePreview>
+        <div>The dropdown can be rendered without any border.</div>
+        <br /><br />
+        <div style="max-width:10rem">
+            <BitDropdown NoBorder
                          Placeholder="Select an item"
-                         TItem="BitDropdownOption<string>" TValue="string"
-                         Classes="@(new() { Callout = "custom-callout",
-                                        Container = "custom-container",
-                                        ItemButton = "custom-item-button",
-                                        ScrollContainer = "custom-scroll-container" })">
+                         TItem="BitDropdownOption<string>" TValue="string">
+                @foreach (var item in basicItems)
+                {
+                    <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+                }
+            </BitDropdown>
+            <br /><br />
+            <BitDropdown NoBorder
+                         Placeholder="Select items"
+                         IsMultiSelect="true"
+                         TItem="BitDropdownOption<string>" TValue="string">
                 @foreach (var item in basicItems)
                 {
                     <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
@@ -124,15 +167,14 @@
     </ExamplePreview>
 </ComponentExampleBox>
 
-<ComponentExampleBox Title="Binding" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
+<ComponentExampleBox Title="Responsive" RazorCode="@example5RazorCode" Id="example5">
     <ExamplePreview>
-        <div>Demonstrates two-way binding and change event handling for dropdowns, showcasing single and multi-select scenarios.</div>
-        <br /><br />
+        <div>When the <b>IsResponsive</b> parameter is true, on small screens the drop down items will render in a side panel.</div>
+        <br />
         <div class="example-content">
-            <div>Two-way binding:</div><br />
-            <BitDropdown @bind-Value="controlledValue"
-                         Label="Single select"
+            <BitDropdown Label="Responsive Dropdown"
                          Placeholder="Select an item"
+                         IsResponsive=true
                          TItem="BitDropdownOption<string>" TValue="string">
                 <BitDropdownOption ItemType="BitDropdownItemType.Header" Text="Fruits" Value="@string.Empty" />
                 <BitDropdownOption Text="Apple" Value="@("f-app")" />
@@ -141,17 +183,66 @@
                 <BitDropdownOption Text="Grape" Value="@("f-gra")" />
                 <BitDropdownOption ItemType="BitDropdownItemType.Divider" Value="@string.Empty" />
                 <BitDropdownOption ItemType="BitDropdownItemType.Header" Text="Vegetables" Value="@string.Empty" />
-                <BitDropdownOption Text="Broccoli" Value="@("v-bro")" />
-                <BitDropdownOption Text="Carrot" Value="@("v-car")" />
-                <BitDropdownOption Text="Lettuce" Value="@("v-let")" />
+                <BitDropdownOption Text="Broccoli" Value="@("f-bro")" />
+                <BitDropdownOption Text="Carrot" Value="@("f-car")" />
+                <BitDropdownOption Text="Lettuce" Value="@("f-let")" />
+            </BitDropdown>
+        </div>
+    </ExamplePreview>
+</ComponentExampleBox>
+
+<ComponentExampleBox Title="Drop direction" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
+    <ExamplePreview>
+        <div>Explores different drop directions for the BitDropdown component, including automatic and explicit directions.</div>
+        <br />
+        <div class="example-content">
+            <BitDropdown Label="All"
+                         Placeholder="Select an item"
+                         DropDirection="BitDropDirection.All"
+                         TItem="BitDropdownOption<string>" TValue="string">
+                @foreach (var item in dropDirectionItems)
+                {
+                    <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" />
+                }
             </BitDropdown>
-            <br />
-            <div>Selected Value: @controlledValue</div>
             <br /><br />
-            <BitDropdown @bind-Values="controlledValues"
-                         Label="Multi select"
-                         Placeholder="Select items"
+            <BitDropdown Label="TopAndBottom"
+                         Placeholder="Select an item"
+                         DropDirection="BitDropDirection.TopAndBottom"
+                         TItem="BitDropdownOption<string>" TValue="string">
+                @foreach (var item in dropDirectionItems)
+                {
+                    <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" />
+                }
+            </BitDropdown>
+        </div>
+    </ExamplePreview>
+</ComponentExampleBox>
+
+<ComponentExampleBox Title="Clear button" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
+    <ExamplePreview>
+        <div>Shows the usage of the clear button in BitDropdown, allowing users to clear selected values in single and multi-select dropdowns.</div>
+        <br />
+        <div class="example-content">
+            <BitDropdown @bind-Value="clearValue"
+                         Label="Single select dropdown"
+                         Placeholder="Select an option"
+                         ShowClearButton="true"
+                         TItem="BitDropdownOption<string>" TValue="string">
+                @foreach (var item in basicItems)
+                {
+                    <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+                }
+                <br />
+            </BitDropdown>
+            <br />
+            <div>Value: @clearValue</div>
+            <br /><br /><br />
+            <BitDropdown @bind-Values="clearValues"
+                         Label="Multi select dropdown"
+                         Placeholder="Select options"
                          IsMultiSelect="true"
+                         ShowClearButton="true"
                          TItem="BitDropdownOption<string>" TValue="string">
                 @foreach (var item in basicItems)
                 {
@@ -159,66 +250,121 @@
                 }
             </BitDropdown>
             <br />
-            <div>Selected Values: @string.Join(",", controlledValues)</div>
-            <br /><br /><br /><br />
-            <div>OnChange:</div><br />
-            <BitDropdown Label="Single select"
+            <div>Values: @string.Join(',', clearValues)</div>
+        </div>
+    </ExamplePreview>
+</ComponentExampleBox>
+
+<ComponentExampleBox Title="SearchBox" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
+    <ExamplePreview>
+        <div>Examples of dropdowns with search functionality, including default and custom search functions.</div>
+        <br /><br />
+        <div class="example-content">
+            <BitDropdown Label="Single select & auto focus"
                          Placeholder="Select an item"
-                         TItem="BitDropdownOption<string>" TValue="string"
-                         OnValuesChange="(BitDropdownOption<string>[] items) => changedItem = items.SingleOrDefault()">
+                         ShowSearchBox="true"
+                         AutoFocusSearchBox="true"
+                         SearchBoxPlaceholder="Search item"
+                         TItem="BitDropdownOption<string>" TValue="string">
                 @foreach (var item in basicItems)
                 {
                     <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
                 }
             </BitDropdown>
-            <br />
-            <div>Changed Value: @changedItem?.Value</div>
             <br /><br />
             <BitDropdown Label="Multi select"
-                         IsMultiSelect="true"
                          Placeholder="Select items"
-                         TItem="BitDropdownOption<string>" TValue="string"
-                         OnValuesChange="(BitDropdownOption<string>[] items) => changedItems = items">
+                         IsMultiSelect="true"
+                         ShowSearchBox="true"
+                         SearchBoxPlaceholder="Search items"
+                         TItem="BitDropdownOption<string>" TValue="string">
                 @foreach (var item in basicItems)
                 {
                     <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
                 }
             </BitDropdown>
-            <br />
-            <div>Changed Values: @string.Join(",", changedItems.Select(i => i.Value))</div>
             <br /><br /><br /><br />
-            <div>OnSelectItem:</div><br />
-            <BitDropdown Label="Single select"
-                         DefaultValue="@string.Empty"
+            <div><b>Custom search function</b>:</div><br />
+            <BitDropdown Label="Single select & auto focus"
                          Placeholder="Select an item"
-                         TItem="BitDropdownOption<string>" TValue="string"
-                         OnSelectItem="(BitDropdownOption<string> item) => selectedItem1 = item">
+                         ShowSearchBox="true"
+                         AutoFocusSearchBox="true"
+                         SearchFunction="(items, text) => items.Where(i => i.Text?.StartsWith(text, StringComparison.OrdinalIgnoreCase) ?? false).ToArray()"
+                         SearchBoxPlaceholder="Search item"
+                         TItem="BitDropdownOption<string>" TValue="string">
                 @foreach (var item in basicItems)
                 {
                     <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
                 }
             </BitDropdown>
-            <br />
-            <div>Selected Value: @selectedItem1?.Value</div>
             <br /><br />
             <BitDropdown Label="Multi select"
-                         IsMultiSelect="true"
-                         DefaultValue="@string.Empty"
                          Placeholder="Select items"
-                         TItem="BitDropdownOption<string>" TValue="string"
-                         OnSelectItem="(BitDropdownOption<string> item) => selectedItem2 = item">
+                         IsMultiSelect="true"
+                         ShowSearchBox="true"
+                         SearchFunction="(items, text) => items.Where(i => i.Text?.EndsWith(text, StringComparison.OrdinalIgnoreCase) ?? false).ToArray()"
+                         SearchBoxPlaceholder="Search items"
+                         TItem="BitDropdownOption<string>" TValue="string">
                 @foreach (var item in basicItems)
                 {
                     <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
                 }
             </BitDropdown>
-            <br />
-            <div>Selected Value: @selectedItem2?.Value</div>
         </div>
     </ExamplePreview>
 </ComponentExampleBox>
 
-<ComponentExampleBox Title="Customization" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
+<ComponentExampleBox Title="Validation" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
+    <ExamplePreview>
+        <div>Demonstrates how validation can be applied to BitDropdown, including required fields, numeric input, character constraints, email validation, and range validation.</div>
+        <br />
+        <div class="example-content">
+            @if (string.IsNullOrEmpty(successMessage))
+            {
+                <EditForm Model="validationModel" OnValidSubmit="HandleValidSubmit" OnInvalidSubmit="HandleInvalidSubmit">
+                    <DataAnnotationsValidator />
+
+                    <BitDropdown @bind-Value="validationModel.Category"
+                                 Label="Select 1 item"
+                                 Placeholder="Select and item"
+                                 TItem="BitDropdownOption<string>" TValue="string">
+                        @foreach (var item in basicItems)
+                        {
+                            <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+                        }
+                    </BitDropdown>
+
+                    <ValidationMessage For="@(() => validationModel.Category)" />
+
+                    <br />
+
+                    <BitDropdown @bind-Values="validationModel.Products"
+                                 Label="Select min 1 and max 2 items"
+                                 Placeholder="Select items"
+                                 IsMultiSelect="true"
+                                 TItem="BitDropdownOption<string>" TValue="string">
+                        @foreach (var item in basicItems)
+                        {
+                            <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+                        }
+                    </BitDropdown>
+
+                    <ValidationMessage For="@(() => validationModel.Products)" />
+
+                    <br />
+
+                    <BitButton ButtonType="BitButtonType.Submit">Submit</BitButton>
+                </EditForm>
+            }
+            else
+            {
+                <BitMessage Color="BitColor.Success">@successMessage</BitMessage>
+            }
+        </div>
+    </ExamplePreview>
+</ComponentExampleBox>
+
+<ComponentExampleBox Title="Customization" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
     <ExamplePreview>
         <div>Shows how to customize dropdowns using templates for header, text, item, placeholder, label, and callout sections.</div>
         <br /><br />
@@ -327,14 +473,15 @@
     </ExamplePreview>
 </ComponentExampleBox>
 
-<ComponentExampleBox Title="Responsive" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
+<ComponentExampleBox Title="Binding" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
     <ExamplePreview>
-        <div>When the <b>IsResponsive</b> parameter is true, on small screens the drop down items will render in a side panel.</div>
-        <br />
+        <div>Demonstrates two-way binding and change event handling for dropdowns, showcasing single and multi-select scenarios.</div>
+        <br /><br />
         <div class="example-content">
-            <BitDropdown Label="Responsive Dropdown"
+            <div>Two-way binding:</div><br />
+            <BitDropdown @bind-Value="controlledValue"
+                         Label="Single select"
                          Placeholder="Select an item"
-                         IsResponsive=true
                          TItem="BitDropdownOption<string>" TValue="string">
                 <BitDropdownOption ItemType="BitDropdownItemType.Header" Text="Fruits" Value="@string.Empty" />
                 <BitDropdownOption Text="Apple" Value="@("f-app")" />
@@ -343,81 +490,125 @@
                 <BitDropdownOption Text="Grape" Value="@("f-gra")" />
                 <BitDropdownOption ItemType="BitDropdownItemType.Divider" Value="@string.Empty" />
                 <BitDropdownOption ItemType="BitDropdownItemType.Header" Text="Vegetables" Value="@string.Empty" />
-                <BitDropdownOption Text="Broccoli" Value="@("f-bro")" />
-                <BitDropdownOption Text="Carrot" Value="@("f-car")" />
-                <BitDropdownOption Text="Lettuce" Value="@("f-let")" />
+                <BitDropdownOption Text="Broccoli" Value="@("v-bro")" />
+                <BitDropdownOption Text="Carrot" Value="@("v-car")" />
+                <BitDropdownOption Text="Lettuce" Value="@("v-let")" />
             </BitDropdown>
-        </div>
-    </ExamplePreview>
-</ComponentExampleBox>
-
-<ComponentExampleBox Title="SearchBox" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
-    <ExamplePreview>
-        <div>Examples of dropdowns with search functionality, including default and custom search functions.</div>
-        <br /><br />
-        <div class="example-content">
-            <BitDropdown Label="Single select & auto focus"
-                         Placeholder="Select an item"
-                         ShowSearchBox="true"
-                         AutoFocusSearchBox="true"
-                         SearchBoxPlaceholder="Search item"
+            <br />
+            <div>Selected Value: @controlledValue</div>
+            <br /><br />
+            <BitDropdown @bind-Values="controlledValues"
+                         Label="Multi select"
+                         Placeholder="Select items"
+                         IsMultiSelect="true"
                          TItem="BitDropdownOption<string>" TValue="string">
                 @foreach (var item in basicItems)
                 {
                     <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
                 }
             </BitDropdown>
+            <br />
+            <div>Selected Values: @string.Join(",", controlledValues)</div>
+            <br /><br /><br /><br />
+            <div>OnChange:</div><br />
+            <BitDropdown Label="Single select"
+                         Placeholder="Select an item"
+                         TItem="BitDropdownOption<string>" TValue="string"
+                         OnValuesChange="(BitDropdownOption<string>[] items) => changedItem = items.SingleOrDefault()">
+                @foreach (var item in basicItems)
+                {
+                    <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+                }
+            </BitDropdown>
+            <br />
+            <div>Changed Value: @changedItem?.Value</div>
             <br /><br />
             <BitDropdown Label="Multi select"
-                         Placeholder="Select items"
                          IsMultiSelect="true"
-                         ShowSearchBox="true"
-                         SearchBoxPlaceholder="Search items"
-                         TItem="BitDropdownOption<string>" TValue="string">
+                         Placeholder="Select items"
+                         TItem="BitDropdownOption<string>" TValue="string"
+                         OnValuesChange="(BitDropdownOption<string>[] items) => changedItems = items">
                 @foreach (var item in basicItems)
                 {
                     <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
                 }
             </BitDropdown>
+            <br />
+            <div>Changed Values: @string.Join(",", changedItems.Select(i => i.Value))</div>
             <br /><br /><br /><br />
-            <div><b>Custom search function</b>:</div><br />
-            <BitDropdown Label="Single select & auto focus"
+            <div>OnSelectItem:</div><br />
+            <BitDropdown Label="Single select"
+                         DefaultValue="@string.Empty"
                          Placeholder="Select an item"
-                         ShowSearchBox="true"
-                         AutoFocusSearchBox="true"
-                         SearchFunction="(items, text) => items.Where(i => i.Text?.StartsWith(text, StringComparison.OrdinalIgnoreCase) ?? false).ToArray()"
-                         SearchBoxPlaceholder="Search item"
-                         TItem="BitDropdownOption<string>" TValue="string">
+                         TItem="BitDropdownOption<string>" TValue="string"
+                         OnSelectItem="(BitDropdownOption<string> item) => selectedItem1 = item">
                 @foreach (var item in basicItems)
                 {
                     <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
                 }
             </BitDropdown>
+            <br />
+            <div>Selected Value: @selectedItem1?.Value</div>
             <br /><br />
             <BitDropdown Label="Multi select"
-                         Placeholder="Select items"
                          IsMultiSelect="true"
-                         ShowSearchBox="true"
-                         SearchFunction="(items, text) => items.Where(i => i.Text?.EndsWith(text, StringComparison.OrdinalIgnoreCase) ?? false).ToArray()"
-                         SearchBoxPlaceholder="Search items"
+                         DefaultValue="@string.Empty"
+                         Placeholder="Select items"
+                         TItem="BitDropdownOption<string>" TValue="string"
+                         OnSelectItem="(BitDropdownOption<string> item) => selectedItem2 = item">
+                @foreach (var item in basicItems)
+                {
+                    <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+                }
+            </BitDropdown>
+            <br />
+            <div>Selected Value: @selectedItem2?.Value</div>
+        </div>
+    </ExamplePreview>
+</ComponentExampleBox>
+
+<ComponentExampleBox Title="ComboBox" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
+    <ExamplePreview>
+        <div>When the <b>Combo</b> parameter is true, you can type in BitDropdown input and search between items.</div>
+        <br />
+        <div class="example-content">
+            <BitDropdown @bind-Value="comboBoxValueSample1"
+                         Combo
+                         Label="Single select combo box"
+                         Placeholder="Select an option"
+                         TItem="BitDropdownOption<string>" TValue="string">
+                @foreach (var item in comboBoxItems)
+                {
+                    <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+                }
+            </BitDropdown>
+            <br />
+            <div>Value: @comboBoxValueSample1</div>
+            <br /><br />
+            <BitDropdown @bind-Values="comboBoxValues1"
+                         Combo IsMultiSelect
+                         Label="Multi select combo box"
+                         Placeholder="Select an option"
                          TItem="BitDropdownOption<string>" TValue="string">
-                @foreach (var item in basicItems)
+                @foreach (var item in comboBoxItems)
                 {
                     <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
                 }
             </BitDropdown>
+            <br />
+            <div>Values: @string.Join(',', comboBoxValues1)</div>
         </div>
     </ExamplePreview>
 </ComponentExampleBox>
 
-<ComponentExampleBox Title="ComboBox" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
+<ComponentExampleBox Title="Chips" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
     <ExamplePreview>
-        <div>When the <b>Combo</b> parameter is true, you can type in BitDropdown input and search between items.</div>
+        <div>When the <b>Chips</b> parameter is true, shows the selected items like chips in the ComboBox.</div>
         <br />
         <div class="example-content">
-            <BitDropdown @bind-Value="comboBoxValueSample1"
-                         Combo
-                         Label="Single select combo box"
+            <BitDropdown @bind-Value="comboBoxValueSample2"
+                         Combo Chips
+                         Label="Single select combo box & chips"
                          Placeholder="Select an option"
                          TItem="BitDropdownOption<string>" TValue="string">
                 @foreach (var item in comboBoxItems)
@@ -426,13 +617,11 @@
                 }
             </BitDropdown>
             <br />
-            <div>Value: @comboBoxValueSample1</div>
-            <br /><br /><br /><br />
-            <div>When the <b>Chips</b> parameter is true, shows the selected items like chips in the ComboBox.</div>
-            <br />
-            <BitDropdown @bind-Value="comboBoxValueSample2"
-                         Combo Chips
-                         Label="Single select combo box & chips"
+            <div>Value: @comboBoxValueSample2</div>
+            <br /><br />
+            <BitDropdown @bind-Values="comboBoxValues2"
+                         Combo Chips IsMultiSelect
+                         Label="Multi select combo box & chips"
                          Placeholder="Select an option"
                          TItem="BitDropdownOption<string>" TValue="string">
                 @foreach (var item in comboBoxItems)
@@ -441,10 +630,16 @@
                 }
             </BitDropdown>
             <br />
-            <div>Value: @comboBoxValueSample2</div>
-            <br /><br /><br /><br />
-            <div>When the <b>Dynamic</b> parameter is true, you can add a new item in the ComboBox.</div>
-            <br />
+            <div>Values: @string.Join(',', comboBoxValues2)</div>
+        </div>
+    </ExamplePreview>
+</ComponentExampleBox>
+
+<ComponentExampleBox Title="Dynamic ComboBox" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
+    <ExamplePreview>
+        <div>When the <b>Dynamic</b> parameter is true, you can add a new item in the ComboBox.</div>
+        <br />
+        <div class="example-content">
             <BitDropdown @bind-Value="comboBoxValueSample3"
                          Combo Dynamic
                          Label="Single select combo box & dynamic"
@@ -459,9 +654,11 @@
             </BitDropdown>
             <br />
             <div>Value: @comboBoxValueSample3</div>
-            <br /><br /><br /><br />
-            <div>When the <b>Combo</b>, <b>Chips</b> and <b>Dynamic</b> parameters are true, you can add a new item in the ComboBox (pressing the enter key or touching the add button on the mobile).</div>
-            <br />
+        </div>
+        <br /><br /><br /><br />
+        <div>When the <b>Combo</b>, <b>Chips</b> and <b>Dynamic</b> parameters are true, you can add a new item in the ComboBox (pressing the enter key or touching the add button on the mobile).</div>
+        <br />
+        <div class="example-content">
             <BitDropdown @bind-Value="comboBoxValueSample4"
                          Combo Chips Dynamic
                          Label="Single select combo box, chips & dynamic"
@@ -478,7 +675,7 @@
             <br />
             <div>Value: @comboBoxValueSample4</div>
             <br /><br />
-            <BitDropdown @bind-Values="comboBoxValues"
+            <BitDropdown @bind-Values="comboBoxValues3"
                          Combo Chips Dynamic
                          Label="Multi select combo box, chips & dynamic"
                          Placeholder="Select options"
@@ -493,57 +690,66 @@
                 }
             </BitDropdown>
             <br />
-            <div>Values: @string.Join(',', comboBoxValues)</div>
+            <div>Values: @string.Join(',', comboBoxValues3)</div>
         </div>
     </ExamplePreview>
 </ComponentExampleBox>
 
-<ComponentExampleBox Title="Prefix & Suffix" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
+<ComponentExampleBox Title="Style & Class" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
     <ExamplePreview>
-        <div>Use prefixes and suffixes in BitDropdown, including combinations and the disabled state.</div>
-        <br />
+        <div>Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.</div>
+        <br /><br />
         <div class="example-content">
-            <BitDropdown Label="Prefix"
-                         Prefix="Fruits:"
-                         Placeholder="Select an item"
-                         TItem="BitDropdownOption<string>"
-                         TValue="string">
+            <div>Component's Style & Class:</div><br />
+            <BitDropdown Placeholder="Select an item"
+                         TItem="BitDropdownOption<string>" TValue="string"
+                         Style="margin: 1rem; box-shadow: aqua 0 0 0.5rem; text-shadow: aqua 0 0 0.5rem;">
                 @foreach (var item in basicItems)
                 {
                     <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
                 }
             </BitDropdown>
-            <br /><br />
-            <BitDropdown Label="Suffix"
-                         Suffix="kg"
-                         Placeholder="Select an item"
-                         TItem="BitDropdownOption<string>"
-                         TValue="string">
+            <br />
+            <BitDropdown Placeholder="Select an item"
+                         TItem="BitDropdownOption<string>" TValue="string"
+                         Class="custom-class">
                 @foreach (var item in basicItems)
                 {
                     <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
                 }
             </BitDropdown>
-            <br /><br />
-            <BitDropdown Label="Prefix and Suffix"
-                         Prefix="Fruits:"
-                         Suffix="kg"
+            <br /><br /><br /><br />
+            <div>Item's Style & Class:</div><br />
+            <BitDropdown Placeholder="Select an item"
+                         TItem="BitDropdownOption<string>" TValue="string">
+                @foreach (var item in styleClassItems)
+                {
+                    <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" Style="@item.Style" Class="@item.Class" />
+                }
+            </BitDropdown>
+            <br /><br /><br /><br />
+            <div><b>Styles</b> & <b>Classes</b>:</div><br />
+            <BitDropdown Label="Styles"
                          Placeholder="Select an item"
-                         TItem="BitDropdownOption<string>"
-                         TValue="string">
+                         TItem="BitDropdownOption<string>" TValue="string"
+                         Styles="@(new() { Label = "text-shadow: dodgerblue 0 0 0.5rem;",
+                                       Container = "box-shadow: dodgerblue 0 0 0.5rem; border-color: lightskyblue; color: lightskyblue;",
+                                       ItemHeader = "color: dodgerblue; text-shadow: dodgerblue 0 0 0.5rem;",
+                                       ItemButton = "color: lightskyblue",
+                                       Callout = "border-radius: 0.25rem; box-shadow: lightskyblue 0 0 0.5rem;" })">
                 @foreach (var item in basicItems)
                 {
                     <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
                 }
             </BitDropdown>
-            <br /><br />
-            <BitDropdown Label="Disabled"
-                         Prefix="Fruits:"
-                         Suffix="kg"
+            <br />
+            <BitDropdown Label="Classes"
                          Placeholder="Select an item"
-                         TItem="BitDropdownOption<string>"
-                         TValue="string"
-                         IsEnabled="false">
+                         TItem="BitDropdownOption<string>" TValue="string"
+                         Classes="@(new() { Callout = "custom-callout",
+                                        Container = "custom-container",
+                                        ItemButton = "custom-item-button",
+                                        ScrollContainer = "custom-scroll-container" })">
                 @foreach (var item in basicItems)
                 {
                     <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
@@ -553,7 +759,7 @@
     </ExamplePreview>
 </ComponentExampleBox>
 
-<ComponentExampleBox Title="RTL" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
+<ComponentExampleBox Title="RTL" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16">
     <ExamplePreview>
         <div>Use BitDropdown in right-to-left (RTL).</div>
         <br />
@@ -580,170 +786,4 @@
             </BitDropdown>
         </div>
     </ExamplePreview>
-</ComponentExampleBox>
-
-<ComponentExampleBox Title="Drop direction" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
-    <ExamplePreview>
-        <div>Explores different drop directions for the BitDropdown component, including automatic and explicit directions.</div>
-        <br />
-        <div class="example-content">
-            <BitDropdown Label="All"
-                         Placeholder="Select an item"
-                         DropDirection="BitDropDirection.All"
-                         TItem="BitDropdownOption<string>" TValue="string">
-                @foreach (var item in dropDirectionItems)
-                {
-                    <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" />
-                }
-            </BitDropdown>
-            <br /><br />
-            <BitDropdown Label="TopAndBottom"
-                         Placeholder="Select an item"
-                         DropDirection="BitDropDirection.TopAndBottom"
-                         TItem="BitDropdownOption<string>" TValue="string">
-                @foreach (var item in dropDirectionItems)
-                {
-                    <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" />
-                }
-            </BitDropdown>
-        </div>
-    </ExamplePreview>
-</ComponentExampleBox>
-
-<ComponentExampleBox Title="Clear button" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
-    <ExamplePreview>
-        <div>Shows the usage of the clear button in BitDropdown, allowing users to clear selected values in single and multi-select dropdowns.</div>
-        <br />
-        <div class="example-content">
-            <BitDropdown @bind-Value="clearValue"
-                         Label="Single select dropdown"
-                         Placeholder="Select an option"
-                         ShowClearButton="true"
-                         TItem="BitDropdownOption<string>" TValue="string">
-                @foreach (var item in basicItems)
-                {
-                    <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
-                }
-                <br />
-            </BitDropdown>
-            <br />
-            <div>Value: @clearValue</div>
-            <br /><br /><br />
-            <BitDropdown @bind-Values="clearValues"
-                         Label="Multi select dropdown"
-                         Placeholder="Select options"
-                         IsMultiSelect="true"
-                         ShowClearButton="true"
-                         TItem="BitDropdownOption<string>" TValue="string">
-                @foreach (var item in basicItems)
-                {
-                    <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
-                }
-            </BitDropdown>
-            <br />
-            <div>Values: @string.Join(',', clearValues)</div>
-        </div>
-    </ExamplePreview>
-</ComponentExampleBox>
-
-<ComponentExampleBox Title="Validation" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
-    <ExamplePreview>
-        <div>Demonstrates how validation can be applied to BitDropdown, including required fields, numeric input, character constraints, email validation, and range validation.</div>
-        <br />
-        <div class="example-content">
-            @if (string.IsNullOrEmpty(successMessage))
-            {
-                <EditForm Model="validationModel" OnValidSubmit="HandleValidSubmit" OnInvalidSubmit="HandleInvalidSubmit">
-                    <DataAnnotationsValidator />
-
-                    <BitDropdown @bind-Value="validationModel.Category"
-                                 Label="Select 1 item"
-                                 Placeholder="Select and item"
-                                 TItem="BitDropdownOption<string>" TValue="string">
-                        @foreach (var item in basicItems)
-                        {
-                            <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
-                        }
-                    </BitDropdown>
-
-                    <ValidationMessage For="@(() => validationModel.Category)" />
-
-                    <br />
-
-                    <BitDropdown @bind-Values="validationModel.Products"
-                                 Label="Select min 1 and max 2 items"
-                                 Placeholder="Select items"
-                                 IsMultiSelect="true"
-                                 TItem="BitDropdownOption<string>" TValue="string">
-                        @foreach (var item in basicItems)
-                        {
-                            <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
-                        }
-                    </BitDropdown>
-
-                    <ValidationMessage For="@(() => validationModel.Products)" />
-
-                    <br />
-
-                    <BitButton ButtonType="BitButtonType.Submit">Submit</BitButton>
-                </EditForm>
-            }
-            else
-            {
-                <BitMessage Color="BitColor.Success">@successMessage</BitMessage>
-            }
-        </div>
-    </ExamplePreview>
-</ComponentExampleBox>
-
-<ComponentExampleBox Title="FitWidth" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
-    <ExamplePreview>
-        <div>Enables fit-content width for the dropdown that sets the width of the component based on its content size.</div>
-        <br /><br />
-        <BitDropdown Label="Single select" FitWidth
-                     Placeholder="Select an item"
-                     TItem="BitDropdownOption<string>" TValue="string">
-            @foreach (var item in basicItems)
-            {
-                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
-            }
-        </BitDropdown>
-        <br /><br />
-        <BitDropdown Label="Multi select" FitWidth
-                     Placeholder="Select items"
-                     IsMultiSelect="true"
-                     TItem="BitDropdownOption<string>" TValue="string">
-            @foreach (var item in basicItems)
-            {
-                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
-            }
-        </BitDropdown>
-    </ExamplePreview>
-</ComponentExampleBox>
-
-<ComponentExampleBox Title="NoBorder" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
-    <ExamplePreview>
-        <div>The dropdown can be rendered without any border.</div>
-        <br /><br />
-        <div style="max-width:10rem">
-            <BitDropdown NoBorder
-                         Placeholder="Select an item"
-                         TItem="BitDropdownOption<string>" TValue="string">
-                @foreach (var item in basicItems)
-                {
-                    <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
-                }
-            </BitDropdown>
-            <br /><br />
-            <BitDropdown NoBorder
-                         Placeholder="Select items"
-                         IsMultiSelect="true"
-                         TItem="BitDropdownOption<string>" TValue="string">
-                @foreach (var item in basicItems)
-                {
-                    <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
-                }
-            </BitDropdown>
-        </div>
-    </ExamplePreview>
 </ComponentExampleBox>
\ No newline at end of file
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.cs
index 2c5cf4fea5..3d21c3107f 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.cs
@@ -88,7 +88,9 @@ public partial class _BitDropdownOptionDemo
     private string comboBoxValueSample2 = default!;
     private string comboBoxValueSample3 = default!;
     private string comboBoxValueSample4 = default!;
-    private ICollection<string> comboBoxValues = [];
+    private ICollection<string> comboBoxValues1 = [];
+    private ICollection<string> comboBoxValues2 = [];
+    private ICollection<string> comboBoxValues3 = [];
 
 
     protected override void OnInitialized()
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs
index 683618e601..5855fd0f1d 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs
@@ -72,98 +72,47 @@ public partial class _BitDropdownOptionDemo
 ];";
 
     private readonly string example2RazorCode = @"
-<style>
-    .custom-class {
-        margin-inline: 1rem;
-        box-shadow: dodgerblue 0 0 0.5rem;
-        text-shadow: dodgerblue 0 0 0.5rem;
-    }
-
-
-    .custom-fruit {
-        background-color: #a5104457;
-    }
-
-    .custom-veg {
-        background-color: #1c73324d;
-    }
-
-
-    .custom-callout {
-        border-radius: 1rem;
-        border-color: lightgray;
-        backdrop-filter: blur(20px);
-        background-color: transparent;
-        box-shadow: darkgray 0 0 0.5rem;
-    }
-
-    .custom-container, .custom-container:after {
-        border-radius: 1rem;
-    }
-
-    .custom-item-button {
-        border-bottom: 1px solid gray;
-    }
-
-    .custom-item-button:hover {
-        background-color: rgba(255, 255, 255, 0.2);
-    }
-
-    .custom-scroll-container div:last-child .custom-item-button {
-        border-bottom: none;
-    }
-</style>
-
-
-<BitDropdown Placeholder=""Select an item""
-             TItem=""BitDropdownOption<string>"" TValue=""string""
-             Style=""margin: 1rem; box-shadow: aqua 0 0 0.5rem; text-shadow: aqua 0 0 0.5rem;"">
+<BitDropdown Label=""Prefix""
+             Prefix=""Fruits:""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>""
+             TValue=""string"">
     @foreach (var item in basicItems)
     {
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>
 
-<BitDropdown Placeholder=""Select an item""
-             TItem=""BitDropdownOption<string>"" TValue=""string""
-             Class=""custom-class"">
+<BitDropdown Label=""Suffix""
+             Suffix=""kg""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>""
+             TValue=""string"">
     @foreach (var item in basicItems)
     {
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>
 
-
-<BitDropdown Placeholder=""Select an item""
-             TItem=""BitDropdownOption<string>"" TValue=""string"">
-    @foreach (var item in styleClassItems)
-    {
-        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" Style=""@item.Style"" Class=""@item.Class"" />
-    }
-</BitDropdown>
-
-
-<BitDropdown Label=""Styles""
+<BitDropdown Label=""Prefix and Suffix""
+             Prefix=""Fruits:""
+             Suffix=""kg""
              Placeholder=""Select an item""
-             TItem=""BitDropdownOption<string>"" TValue=""string""
-             Styles=""@(new() { Label = ""text-shadow: dodgerblue 0 0 0.5rem;"",
-                               Container = ""box-shadow: dodgerblue 0 0 0.5rem; border-color: lightskyblue; color: lightskyblue;"",
-                               ItemHeader = ""color: dodgerblue; text-shadow: dodgerblue 0 0 0.5rem;"",
-                               ItemButton = ""color: lightskyblue"",
-                               Callout = ""border-radius: 0.25rem; box-shadow: lightskyblue 0 0 0.5rem;"" })"">
+             TItem=""BitDropdownOption<string>""
+             TValue=""string"">
     @foreach (var item in basicItems)
     {
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>
 
-<BitDropdown Label=""Classes""
+<BitDropdown Label=""Disabled""
+             Prefix=""Fruits:""
+             Suffix=""kg""
              Placeholder=""Select an item""
-             TItem=""BitDropdownOption<string>"" TValue=""string""
-             Classes=""@(new() { Callout = ""custom-callout"",
-                                Container = ""custom-container"",
-                                ItemButton = ""custom-item-button"",
-                                ScrollContainer = ""custom-scroll-container"" })"">
+             TItem=""BitDropdownOption<string>""
+             TValue=""string""
+             IsEnabled=""false"">
     @foreach (var item in basicItems)
     {
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
@@ -182,113 +131,62 @@ public partial class _BitDropdownOptionDemo
     new() { Text = ""Broccoli"", Value = ""v-bro"" },
     new() { Text = ""Carrot"", Value = ""v-car"" },
     new() { Text = ""Lettuce"", Value = ""v-let"" }
-];
-
-private readonly List<BitDropdownItem<string>> styleClassItems =
-[
-    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"", Style = ""text-align: center;"" },
-    new() { Text = ""Apple"", Value = ""f-app"", Class = ""custom-fruit"" },
-    new() { Text = ""Banana"", Value = ""f-ban"", Class = ""custom-fruit"" },
-    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false, Class = ""custom-fruit"" },
-    new() { Text = ""Grape"", Value = ""f-gra"", Class = ""custom-fruit"" },
-    new() { ItemType = BitDropdownItemType.Divider, Style = ""padding: 0 0.25rem;"" },
-    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"", Style = ""text-align: center;"" },
-    new() { Text = ""Broccoli"", Value = ""v-bro"", Class = ""custom-veg"" },
-    new() { Text = ""Carrot"", Value = ""v-car"", Class = ""custom-veg"" },
-    new() { Text = ""Lettuce"", Value = ""v-let"", Class = ""custom-veg"" }
 ];";
 
     private readonly string example3RazorCode = @"
-<BitDropdown @bind-Value=""controlledValue""
-             Label=""Single select""
+<BitDropdown Label=""Single select"" FitWidth
              Placeholder=""Select an item""
              TItem=""BitDropdownOption<string>"" TValue=""string"">
-    <BitDropdownOption ItemType=""BitDropdownItemType.Header"" Text=""Fruits"" Value=""@string.Empty"" />
-    <BitDropdownOption Text=""Apple"" Value=""@(""f-app"")"" />
-    <BitDropdownOption Text=""Banana"" Value=""@(""f-ban"")"" />
-    <BitDropdownOption Text=""Orange"" Value=""@(""f-org"")"" IsEnabled=""false"" />
-    <BitDropdownOption Text=""Grape"" Value=""@(""f-gra"")"" />
-    <BitDropdownOption ItemType=""BitDropdownItemType.Divider"" Value=""@string.Empty"" />
-    <BitDropdownOption ItemType=""BitDropdownItemType.Header"" Text=""Vegetables"" Value=""@string.Empty"" />
-    <BitDropdownOption Text=""Broccoli"" Value=""@(""v-bro"")"" />
-    <BitDropdownOption Text=""Carrot"" Value=""@(""v-car"")"" />
-    <BitDropdownOption Text=""Lettuce"" Value=""@(""v-let"")"" />
-</BitDropdown>
-<div>Selected Value: @controlledValue</div>
-
-<BitDropdown @bind-Values=""controlledValues""
-             Label=""Multi select""
-             Placeholder=""Select items""
-             IsMultiSelect=""true""
-             TItem=""BitDropdownOption<string>"" TValue=""string"">
     @foreach (var item in basicItems)
     {
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>
-<div>Selected Values: @string.Join("","", controlledValues)</div>
-
-
-
-<BitDropdown Label=""Single select""
-             Placeholder=""Select an item""
-             TItem=""BitDropdownOption<string>"" TValue=""string""
-             OnValuesChange=""(BitDropdownOption<string>[] items) => changedItem = items.SingleOrDefault()"">
-    @foreach (var item in basicItems)
-    {
-        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
-    }
-</BitDropdown>
-<div>Changed Value: @changedItem?.Value</div>
 
-<BitDropdown Label=""Multi select""
-             IsMultiSelect=""true""
+<BitDropdown Label=""Multi select"" FitWidth
              Placeholder=""Select items""
-             TItem=""BitDropdownOption<string>"" TValue=""string""
-             OnValuesChange=""(BitDropdownOption<string>[] items) => changedItems = items"">
+             IsMultiSelect=""true""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
     @foreach (var item in basicItems)
     {
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
-</BitDropdown>
-<div>Changed Values: @string.Join("","", changedItems.Select(i => i.Value))</div>
-
-
+</BitDropdown>";
+    private readonly string example3CsharpCode = @"
+private readonly List<BitDropdownItem<string>> basicItems =
+[
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+];";
 
-<BitDropdown Label=""Single select""
-             DefaultValue=""@string.Empty""
+    private readonly string example4RazorCode = @"
+<BitDropdown NoBorder
              Placeholder=""Select an item""
-             TItem=""BitDropdownOption<string>"" TValue=""string""
-             OnSelectItem=""(BitDropdownOption<string> item) => selectedItem1 = item"">
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
     @foreach (var item in basicItems)
     {
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>
-<div>Selected Value: @selectedItem1?.Value</div>
 
-<BitDropdown Label=""Multi select""
-             IsMultiSelect=""true""
-             DefaultValue=""@string.Empty""
+<BitDropdown NoBorder
              Placeholder=""Select items""
-             TItem=""BitDropdownOption<string>"" TValue=""string""
-             OnSelectItem=""(BitDropdownOption<string> item) => selectedItem2 = item"">
+             IsMultiSelect=""true""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
     @foreach (var item in basicItems)
     {
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
-</BitDropdown>
-<div>Selected Value: @selectedItem2?.Value</div>";
-    private readonly string example3CsharpCode = @"
-private string controlledValue = ""f-app"";
-private ICollection<string?> controlledValues = new[] { ""f-app"", ""f-ban"" };
-
-private BitDropdownOption<string>? changedItem;
-private BitDropdownOption<string>[] changedItems = Array.Empty<BitDropdownOption<string>>();
-
-private BitDropdownOption<string>? selectedItem1;
-private BitDropdownOption<string>? selectedItem2;
-
+</BitDropdown>";
+    private readonly string example4CsharpCode = @"
 private readonly List<BitDropdownItem<string>> basicItems =
 [
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
@@ -303,29 +201,256 @@ public partial class _BitDropdownOptionDemo
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 ];";
 
-    private readonly string example4RazorCode = @"
-<style>
-    .custom-drp {
-        gap: 10px;
-        display: flex;
-        align-items: center;
-        flex-flow: row nowrap;
-        justify-content: flex-start;
-    }
+    private readonly string example5RazorCode = @"
+<BitDropdown Label=""Responsive Dropdown""
+             Placeholder=""Select an item""
+             IsResponsive=true
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    <BitDropdownOption ItemType=""BitDropdownItemType.Header"" Text=""Fruits"" Value=""@string.Empty"" />
+    <BitDropdownOption Text=""Apple"" Value=""@(""f-app"")"" />
+    <BitDropdownOption Text=""Banana"" Value=""@(""f-ban"")"" />
+    <BitDropdownOption Text=""Orange"" Value=""@(""f-org"")"" IsEnabled=""false"" />
+    <BitDropdownOption Text=""Grape"" Value=""@(""f-gra"")"" />
+    <BitDropdownOption ItemType=""BitDropdownItemType.Divider"" Value=""@string.Empty"" />
+    <BitDropdownOption ItemType=""BitDropdownItemType.Header"" Text=""Vegetables"" Value=""@string.Empty"" />
+    <BitDropdownOption Text=""Broccoli"" Value=""@(""f-bro"")"" />
+    <BitDropdownOption Text=""Carrot"" Value=""@(""f-car"")"" />
+    <BitDropdownOption Text=""Lettuce"" Value=""@(""f-let"")"" />
+</BitDropdown>";
 
-    .custom-drp.custom-drp-lbl {
-        color: dodgerblue;
+    private readonly string example6RazorCode = @"
+<BitDropdown Label=""All""
+             Placeholder=""Select an item""
+             DropDirection=""BitDropDirection.All""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in dropDirectionItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" />
     }
+</BitDropdown>
 
-    .custom-drp.custom-drp-txt {
-        color: goldenrod;
+<BitDropdown Label=""TopAndBottom""
+             Placeholder=""Select an item""
+             DropDirection=""BitDropDirection.TopAndBottom""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in dropDirectionItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" />
     }
+</BitDropdown>";
+    private readonly string example6CsharpCode = @"
+private ICollection<BitDropdownItem<string>> dropDirectionItems = default!;
 
-    .custom-drp.custom-drp-ph {
-        color: orangered;
-    }
+protected override void OnInitialized()
+{
+    dropDirectionItems = Enumerable.Range(1, 15)
+                                   .Select(c => new BitDropdownItem<string> { Value = c.ToString(), Text = $""Category {c}"" })
+                                   .ToArray();
+}";
 
-    .custom-drp.custom-drp-item {
+    private readonly string example7RazorCode = @"
+<BitDropdown @bind-Value=""clearValue""
+             Label=""Single select dropdown""
+             Placeholder=""Select an option""
+             ShowClearButton=""true""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+<div>Value: @clearValue</div>
+
+
+<BitDropdown @bind-Values=""clearValues""
+             Label=""Multi select dropdown""
+             Placeholder=""Select options""
+             IsMultiSelect=""true""
+             ShowClearButton=""true""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+<div>Values: @string.Join(',', clearValues)</div>";
+    private readonly string example7CsharpCode = @"
+private string? clearValue = ""f-app"";
+private ICollection<string?> clearValues = new[] { ""f-app"", ""f-ban"" };
+
+private readonly List<BitDropdownItem<string>> basicItems =
+[
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+];";
+
+    private readonly string example8RazorCode = @"
+<BitDropdown Label=""Single select & auto focus""
+             Placeholder=""Select an item""
+             ShowSearchBox=""true""
+             AutoFocusSearchBox=""true""
+             SearchBoxPlaceholder=""Search item""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+
+<BitDropdown Label=""Multi select""
+             Placeholder=""Select items""
+             IsMultiSelect=""true""
+             ShowSearchBox=""true""
+             SearchBoxPlaceholder=""Search items""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+
+
+
+<BitDropdown Label=""Single select & auto focus""
+             Placeholder=""Select an item""
+             ShowSearchBox=""true""
+             AutoFocusSearchBox=""true""
+             SearchFunction=""(items, text) => items.Where(i => i.Text?.StartsWith(text, StringComparison.OrdinalIgnoreCase) ?? false).ToArray()""
+             SearchBoxPlaceholder=""Search item""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+
+<BitDropdown Label=""Multi select""
+             Placeholder=""Select items""
+             IsMultiSelect=""true""
+             ShowSearchBox=""true""
+             SearchFunction=""(items, text) => items.Where(i => i.Text?.EndsWith(text, StringComparison.OrdinalIgnoreCase) ?? false).ToArray()""
+             SearchBoxPlaceholder=""Search items""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>";
+    private readonly string example8CsharpCode = @"
+private readonly List<BitDropdownItem<string>> basicItems =
+[
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+];";
+
+    private readonly string example9RazorCode = @"
+@using System.ComponentModel.DataAnnotations;
+
+<style>
+    .validation-message {
+        color: #A4262C;
+        font-size: 0.75rem;
+    }
+</style>
+
+<EditForm Model=""validationModel"" OnValidSubmit=""HandleValidSubmit"" OnInvalidSubmit=""HandleInvalidSubmit"">
+    <DataAnnotationsValidator />
+
+    <BitDropdown @bind-Value=""validationModel.Category""
+                 Label=""Select 1 item""
+                 Placeholder=""Select and item""
+                 TItem=""BitDropdownOption<string>"" TValue=""string"">
+        @foreach (var item in basicItems)
+        {
+            <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+        }
+    </BitDropdown>
+    <ValidationMessage For=""@(() => validationModel.Category)"" />
+
+    <BitDropdown @bind-Values=""validationModel.Products""
+                 Label=""Select min 1 and max 2 items""
+                 Placeholder=""Select items""
+                 IsMultiSelect=""true""
+                 TItem=""BitDropdownOption<string>"" TValue=""string"">
+        @foreach (var item in basicItems)
+        {
+            <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+        }
+    </BitDropdown>
+    <ValidationMessage For=""@(() => validationModel.Products)"" />
+
+    <BitButton ButtonType=""BitButtonType.Submit"">Submit</BitButton>
+</EditForm>";
+    private readonly string example9CsharpCode = @"
+public class FormValidationDropdownModel
+{
+    [MaxLength(2, ErrorMessage = ""The property {0} have more than {1} elements"")]
+    [MinLength(1, ErrorMessage = ""The property {0} doesn't have at least {1} elements"")]
+    public ICollection<string?> Products { get; set; } = new List<string?>();
+
+    [Required]
+    public string Category { get; set; }
+}
+
+private FormValidationDropdownModel validationModel = new();
+
+private async Task HandleValidSubmit() { }
+
+private void HandleInvalidSubmit() { }
+
+private readonly List<BitDropdownItem<string>> basicItems =
+[
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+];";
+
+    private readonly string example10RazorCode = @"
+<style>
+    .custom-drp {
+        gap: 10px;
+        display: flex;
+        align-items: center;
+        flex-flow: row nowrap;
+        justify-content: flex-start;
+    }
+
+    .custom-drp.custom-drp-lbl {
+        color: dodgerblue;
+    }
+
+    .custom-drp.custom-drp-txt {
+        color: goldenrod;
+    }
+
+    .custom-drp.custom-drp-ph {
+        color: orangered;
+    }
+
+    .custom-drp.custom-drp-item {
         width: 100%;
         cursor: pointer;
     }
@@ -438,7 +563,7 @@ public partial class _BitDropdownOptionDemo
         }
     </Options>
 </BitDropdown>";
-    private readonly string example4CsharpCode = @"
+    private readonly string example10CsharpCode = @"
 private readonly List<BitDropdownItem<string>> dataItems =
 [
     new() { ItemType = BitDropdownItemType.Header, Text = ""Items"", Data = new DropdownItemData { IconName = ""BulletedList2"" }  },
@@ -452,10 +577,10 @@ public partial class _BitDropdownOptionDemo
     new() { Text = ""Item f"", Value = ""F"", Data = new DropdownItemData { IconName = ""Running"" } }
 ];";
 
-    private readonly string example5RazorCode = @"
-<BitDropdown Label=""Responsive Dropdown""
+    private readonly string example11RazorCode = @"
+<BitDropdown @bind-Value=""controlledValue""
+             Label=""Single select""
              Placeholder=""Select an item""
-             IsResponsive=true
              TItem=""BitDropdownOption<string>"" TValue=""string"">
     <BitDropdownOption ItemType=""BitDropdownItemType.Header"" Text=""Fruits"" Value=""@string.Empty"" />
     <BitDropdownOption Text=""Apple"" Value=""@(""f-app"")"" />
@@ -464,65 +589,85 @@ public partial class _BitDropdownOptionDemo
     <BitDropdownOption Text=""Grape"" Value=""@(""f-gra"")"" />
     <BitDropdownOption ItemType=""BitDropdownItemType.Divider"" Value=""@string.Empty"" />
     <BitDropdownOption ItemType=""BitDropdownItemType.Header"" Text=""Vegetables"" Value=""@string.Empty"" />
-    <BitDropdownOption Text=""Broccoli"" Value=""@(""f-bro"")"" />
-    <BitDropdownOption Text=""Carrot"" Value=""@(""f-car"")"" />
-    <BitDropdownOption Text=""Lettuce"" Value=""@(""f-let"")"" />
-</BitDropdown>";
-    private readonly string example5CsharpCode = @"";
-
-    private readonly string example6RazorCode = @"
-<BitDropdown Label=""Single select & auto focus""
-             Placeholder=""Select an item""
-             ShowSearchBox=""true""
-             AutoFocusSearchBox=""true""
-             SearchBoxPlaceholder=""Search item""
-             TItem=""BitDropdownOption<string>"" TValue=""string"">
-    @foreach (var item in basicItems)
-    {
-        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
-    }
+    <BitDropdownOption Text=""Broccoli"" Value=""@(""v-bro"")"" />
+    <BitDropdownOption Text=""Carrot"" Value=""@(""v-car"")"" />
+    <BitDropdownOption Text=""Lettuce"" Value=""@(""v-let"")"" />
 </BitDropdown>
+<div>Selected Value: @controlledValue</div>
 
-<BitDropdown Label=""Multi select""
+<BitDropdown @bind-Values=""controlledValues""
+             Label=""Multi select""
              Placeholder=""Select items""
              IsMultiSelect=""true""
-             ShowSearchBox=""true""
-             SearchBoxPlaceholder=""Search items""
              TItem=""BitDropdownOption<string>"" TValue=""string"">
     @foreach (var item in basicItems)
     {
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>
+<div>Selected Values: @string.Join("","", controlledValues)</div>
 
 
 
-<BitDropdown Label=""Single select & auto focus""
+<BitDropdown Label=""Single select""
              Placeholder=""Select an item""
-             ShowSearchBox=""true""
-             AutoFocusSearchBox=""true""
-             SearchFunction=""(items, text) => items.Where(i => i.Text?.StartsWith(text, StringComparison.OrdinalIgnoreCase) ?? false).ToArray()""
-             SearchBoxPlaceholder=""Search item""
-             TItem=""BitDropdownOption<string>"" TValue=""string"">
+             TItem=""BitDropdownOption<string>"" TValue=""string""
+             OnValuesChange=""(BitDropdownOption<string>[] items) => changedItem = items.SingleOrDefault()"">
     @foreach (var item in basicItems)
     {
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>
+<div>Changed Value: @changedItem?.Value</div>
 
 <BitDropdown Label=""Multi select""
-             Placeholder=""Select items""
              IsMultiSelect=""true""
-             ShowSearchBox=""true""
-             SearchFunction=""(items, text) => items.Where(i => i.Text?.EndsWith(text, StringComparison.OrdinalIgnoreCase) ?? false).ToArray()""
-             SearchBoxPlaceholder=""Search items""
-             TItem=""BitDropdownOption<string>"" TValue=""string"">
+             Placeholder=""Select items""
+             TItem=""BitDropdownOption<string>"" TValue=""string""
+             OnValuesChange=""(BitDropdownOption<string>[] items) => changedItems = items"">
     @foreach (var item in basicItems)
     {
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
-</BitDropdown>";
-    private readonly string example6CsharpCode = @"
+</BitDropdown>
+<div>Changed Values: @string.Join("","", changedItems.Select(i => i.Value))</div>
+
+
+
+<BitDropdown Label=""Single select""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>"" TValue=""string""
+             OnSelectItem=""(BitDropdownOption<string> item) => selectedItem1 = item"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+<div>Selected Value: @selectedItem1?.Value</div>
+
+<BitDropdown Label=""Multi select""
+             IsMultiSelect=""true""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select items""
+             TItem=""BitDropdownOption<string>"" TValue=""string""
+             OnSelectItem=""(BitDropdownOption<string> item) => selectedItem2 = item"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+<div>Selected Value: @selectedItem2?.Value</div>";
+    private readonly string example11CsharpCode = @"
+private string controlledValue = ""f-app"";
+private ICollection<string?> controlledValues = new[] { ""f-app"", ""f-ban"" };
+
+private BitDropdownOption<string>? changedItem;
+private BitDropdownOption<string>[] changedItems = Array.Empty<BitDropdownOption<string>>();
+
+private BitDropdownOption<string>? selectedItem1;
+private BitDropdownOption<string>? selectedItem2;
+
 private readonly List<BitDropdownItem<string>> basicItems =
 [
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
@@ -537,7 +682,7 @@ public partial class _BitDropdownOptionDemo
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 ];";
 
-    private readonly string example7RazorCode = @"
+    private readonly string example12RazorCode = @"
 <BitDropdown @bind-Value=""comboBoxValueSample1""
              Combo
              Label=""Single select combo box""
@@ -548,8 +693,40 @@ public partial class _BitDropdownOptionDemo
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>
+<br />
 <div>Value: @comboBoxValueSample1</div>
+<br /><br />
+<BitDropdown @bind-Values=""comboBoxValues1""
+             Combo IsMultiSelect
+             Label=""Multi select combo box""
+             Placeholder=""Select an option""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in comboBoxItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+<br />
+<div>Values: @string.Join(',', comboBoxValues1)</div>";
+    private readonly string example12CsharpCode = @"
+private string comboBoxValueSample1 = default!;
+private ICollection<string> comboBoxValues1 = [];
 
+private readonly List<BitDropdownItem<string>> comboBoxItems =
+[
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+];";
+
+    private readonly string example13RazorCode = @"
 <BitDropdown @bind-Value=""comboBoxValueSample2""
              Combo Chips
              Label=""Single select combo box & chips""
@@ -560,8 +737,40 @@ Combo Chips
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>
+<br />
 <div>Value: @comboBoxValueSample2</div>
+<br /><br />
+<BitDropdown @bind-Values=""comboBoxValues2""
+             Combo Chips IsMultiSelect
+             Label=""Multi select combo box & chips""
+             Placeholder=""Select an option""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in comboBoxItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+<br />
+<div>Values: @string.Join(',', comboBoxValues2)</div>";
+    private readonly string example13CsharpCode = @"
+private string comboBoxValueSample2 = default!;
+private ICollection<string> comboBoxValues2 = [];
+
+private readonly List<BitDropdownItem<string>> comboBoxItems =
+[
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+];";
 
+    private readonly string example14RazorCode = @"
 <BitDropdown @bind-Value=""comboBoxValueSample3""
              Combo Dynamic
              Label=""Single select combo box & dynamic""
@@ -575,7 +784,7 @@ Combo Dynamic
     }
 </BitDropdown>
 <div>Value: @comboBoxValueSample3</div>
-
+        
 <BitDropdown @bind-Value=""comboBoxValueSample4""
              Combo Chips Dynamic
              Label=""Single select combo box, chips & dynamic""
@@ -591,27 +800,25 @@ Combo Chips Dynamic
 </BitDropdown>
 <div>Value: @comboBoxValueSample4</div>
 
-<BitDropdown @bind-Values=""comboBoxValues""
-                Combo Chips Dynamic
-                Label=""Multi select combo box, chips & dynamic""
-                Placeholder=""Select options""
-                IsMultiSelect=""true""
-                IsResponsive=""true""
-                DynamicValueGenerator=""(BitDropdownOption<string> item) => item.Text""
-                OnDynamicAdd=""(BitDropdownOption<string> item) => HandleOnDynamicAdd(item)""
-                TItem=""BitDropdownOption<string>"" TValue=""string"">
+<BitDropdown @bind-Values=""comboBoxValues3""
+             Combo Chips Dynamic
+             Label=""Multi select combo box, chips & dynamic""
+             Placeholder=""Select options""
+             IsMultiSelect=""true""
+             IsResponsive=""true""
+             DynamicValueGenerator=""(BitDropdownOption<string> item) => item.Text""
+             OnDynamicAdd=""(BitDropdownOption<string> item) => HandleOnDynamicAdd(item)""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
     @foreach (var item in comboBoxItems)
     {
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>
-<div>Values: @string.Join(',', comboBoxValues)</div>";
-    private readonly string example7CsharpCode = @"
-private string comboBoxValueSample1 = default!;
-private string comboBoxValueSample2 = default!;
+<div>Values: @string.Join(',', comboBoxValues3)</div>";
+    private readonly string example14CsharpCode = @"
 private string comboBoxValueSample3 = default!;
 private string comboBoxValueSample4 = default!;
-private ICollection<string> comboBoxValues = [];
+private ICollection<string> comboBoxValues3 = [];
 
 private void HandleOnDynamicAdd(BitDropdownOption<string> item)
 {
@@ -632,267 +839,105 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 ];";
 
-    private readonly string example8RazorCode = @"
-<BitDropdown Label=""Prefix""
-             Prefix=""Fruits:""
-             Placeholder=""Select an item""
-             TItem=""BitDropdownOption<string>""
-             TValue=""string"">
-    @foreach (var item in basicItems)
-    {
-        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    private readonly string example15RazorCode = @"
+<style>
+    .custom-class {
+        margin-inline: 1rem;
+        box-shadow: dodgerblue 0 0 0.5rem;
+        text-shadow: dodgerblue 0 0 0.5rem;
     }
-</BitDropdown>
 
-<BitDropdown Label=""Suffix""
-             Suffix=""kg""
-             Placeholder=""Select an item""
-             TItem=""BitDropdownOption<string>""
-             TValue=""string"">
-    @foreach (var item in basicItems)
-    {
-        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+
+    .custom-fruit {
+        background-color: #a5104457;
     }
-</BitDropdown>
 
-<BitDropdown Label=""Prefix and Suffix""
-             Prefix=""Fruits:""
-             Suffix=""kg""
-             Placeholder=""Select an item""
-             TItem=""BitDropdownOption<string>""
-             TValue=""string"">
-    @foreach (var item in basicItems)
-    {
-        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    .custom-veg {
+        background-color: #1c73324d;
     }
-</BitDropdown>
 
-<BitDropdown Label=""Disabled""
-             Prefix=""Fruits:""
-             Suffix=""kg""
-             Placeholder=""Select an item""
-             TItem=""BitDropdownOption<string>""
-             TValue=""string""
-             IsEnabled=""false"">
-    @foreach (var item in basicItems)
-    {
-        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+
+    .custom-callout {
+        border-radius: 1rem;
+        border-color: lightgray;
+        backdrop-filter: blur(20px);
+        background-color: transparent;
+        box-shadow: darkgray 0 0 0.5rem;
     }
-</BitDropdown>";
-    private readonly string example8CsharpCode = @"
-private readonly List<BitDropdownItem<string>> basicItems =
-[
-    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
-    new() { Text = ""Apple"", Value = ""f-app"" },
-    new() { Text = ""Banana"", Value = ""f-ban"" },
-    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
-    new() { Text = ""Grape"", Value = ""f-gra"" },
-    new() { ItemType = BitDropdownItemType.Divider },
-    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
-    new() { Text = ""Broccoli"", Value = ""v-bro"" },
-    new() { Text = ""Carrot"", Value = ""v-car"" },
-    new() { Text = ""Lettuce"", Value = ""v-let"" }
-];";
 
-    private readonly string example9RazorCode = @"
-<BitDropdown Label=""تک انتخابی""
-             Placeholder=""لطفا انتخاب کنید""
-             Dir=""BitDir.Rtl""
-             TItem=""BitDropdownOption<string>"" TValue=""string"">
-    @foreach (var item in rtlItems)
-    {
-        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    .custom-container, .custom-container:after {
+        border-radius: 1rem;
     }
-</BitDropdown>
 
-<BitDropdown Label=""چند انتخابی""
-             Placeholder=""انتخاب چند گزینه ای""
-             IsMultiSelect=""true""
-             Dir=""BitDir.Rtl""
-             TItem=""BitDropdownOption<string>"" TValue=""string"">
-    @foreach (var item in rtlItems)
-    {
-        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    .custom-item-button {
+        border-bottom: 1px solid gray;
     }
-</BitDropdown>";
-    private readonly string example9CsharpCode = @"
-private readonly List<BitDropdownItem<string>> rtlItems =
-[
-    new() { ItemType = BitDropdownItemType.Header, Text = ""میوه ها"" },
-    new() { Text = ""سیب"", Value = ""f-app"" },
-    new() { Text = ""موز"", Value = ""f-ban"" },
-    new() { Text = ""پرتقال"", Value = ""f-ora"", IsEnabled = false },
-    new() { Text = ""انگور"", Value = ""f-gra"" },
-    new() { ItemType = BitDropdownItemType.Divider },
-    new() { ItemType = BitDropdownItemType.Header, Text = ""سیزیجات"" },
-    new() { Text = ""کلم بروكلی"", Value = ""v-bro"" },
-    new() { Text = ""هویج"", Value = ""v-car"" },
-    new() { Text = ""کاهو"", Value = ""v-let"" }
-];";
 
-    private readonly string example10RazorCode = @"
-<BitDropdown Label=""All""
-             Placeholder=""Select an item""
-             DropDirection=""BitDropDirection.All""
-             TItem=""BitDropdownOption<string>"" TValue=""string"">
-    @foreach (var item in dropDirectionItems)
-    {
-        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" />
+    .custom-item-button:hover {
+        background-color: rgba(255, 255, 255, 0.2);
     }
-</BitDropdown>
 
-<BitDropdown Label=""TopAndBottom""
-             Placeholder=""Select an item""
-             DropDirection=""BitDropDirection.TopAndBottom""
-             TItem=""BitDropdownOption<string>"" TValue=""string"">
-    @foreach (var item in dropDirectionItems)
-    {
-        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" />
+    .custom-scroll-container div:last-child .custom-item-button {
+        border-bottom: none;
     }
-</BitDropdown>";
-    private readonly string example10CsharpCode = @"
-private ICollection<BitDropdownItem<string>> dropDirectionItems = default!;
+</style>
 
-protected override void OnInitialized()
-{
-    dropDirectionItems = Enumerable.Range(1, 15)
-                                   .Select(c => new BitDropdownItem<string> { Value = c.ToString(), Text = $""Category {c}"" })
-                                   .ToArray();
-}";
 
-    private readonly string example11RazorCode = @"
-<BitDropdown @bind-Value=""clearValue""
-             Label=""Single select dropdown""
-             Placeholder=""Select an option""
-             ShowClearButton=""true""
-             TItem=""BitDropdownOption<string>"" TValue=""string"">
+<BitDropdown Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>"" TValue=""string""
+             Style=""margin: 1rem; box-shadow: aqua 0 0 0.5rem; text-shadow: aqua 0 0 0.5rem;"">
     @foreach (var item in basicItems)
     {
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>
-<div>Value: @clearValue</div>
-
 
-<BitDropdown @bind-Values=""clearValues""
-             Label=""Multi select dropdown""
-             Placeholder=""Select options""
-             IsMultiSelect=""true""
-             ShowClearButton=""true""
-             TItem=""BitDropdownOption<string>"" TValue=""string"">
+<BitDropdown Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>"" TValue=""string""
+             Class=""custom-class"">
     @foreach (var item in basicItems)
     {
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>
-<div>Values: @string.Join(',', clearValues)</div>";
-    private readonly string example11CsharpCode = @"
-private string? clearValue = ""f-app"";
-private ICollection<string?> clearValues = new[] { ""f-app"", ""f-ban"" };
 
-private readonly List<BitDropdownItem<string>> basicItems =
-[
-    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
-    new() { Text = ""Apple"", Value = ""f-app"" },
-    new() { Text = ""Banana"", Value = ""f-ban"" },
-    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
-    new() { Text = ""Grape"", Value = ""f-gra"" },
-    new() { ItemType = BitDropdownItemType.Divider },
-    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
-    new() { Text = ""Broccoli"", Value = ""v-bro"" },
-    new() { Text = ""Carrot"", Value = ""v-car"" },
-    new() { Text = ""Lettuce"", Value = ""v-let"" }
-];";
-
-    private readonly string example12RazorCode = @"
-@using System.ComponentModel.DataAnnotations;
 
-<style>
-    .validation-message {
-        color: #A4262C;
-        font-size: 0.75rem;
+<BitDropdown Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in styleClassItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" Style=""@item.Style"" Class=""@item.Class"" />
     }
-</style>
-
-<EditForm Model=""validationModel"" OnValidSubmit=""HandleValidSubmit"" OnInvalidSubmit=""HandleInvalidSubmit"">
-    <DataAnnotationsValidator />
-
-    <BitDropdown @bind-Value=""validationModel.Category""
-                 Label=""Select 1 item""
-                 Placeholder=""Select and item""
-                 TItem=""BitDropdownOption<string>"" TValue=""string"">
-        @foreach (var item in basicItems)
-        {
-            <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
-        }
-    </BitDropdown>
-    <ValidationMessage For=""@(() => validationModel.Category)"" />
-
-    <BitDropdown @bind-Values=""validationModel.Products""
-                 Label=""Select min 1 and max 2 items""
-                 Placeholder=""Select items""
-                 IsMultiSelect=""true""
-                 TItem=""BitDropdownOption<string>"" TValue=""string"">
-        @foreach (var item in basicItems)
-        {
-            <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
-        }
-    </BitDropdown>
-    <ValidationMessage For=""@(() => validationModel.Products)"" />
-
-    <BitButton ButtonType=""BitButtonType.Submit"">Submit</BitButton>
-</EditForm>";
-    private readonly string example12CsharpCode = @"
-public class FormValidationDropdownModel
-{
-    [MaxLength(2, ErrorMessage = ""The property {0} have more than {1} elements"")]
-    [MinLength(1, ErrorMessage = ""The property {0} doesn't have at least {1} elements"")]
-    public ICollection<string?> Products { get; set; } = new List<string?>();
-
-    [Required]
-    public string Category { get; set; }
-}
-
-private FormValidationDropdownModel validationModel = new();
-
-private async Task HandleValidSubmit() { }
+</BitDropdown>
 
-private void HandleInvalidSubmit() { }
 
-private readonly List<BitDropdownItem<string>> basicItems =
-[
-    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
-    new() { Text = ""Apple"", Value = ""f-app"" },
-    new() { Text = ""Banana"", Value = ""f-ban"" },
-    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
-    new() { Text = ""Grape"", Value = ""f-gra"" },
-    new() { ItemType = BitDropdownItemType.Divider },
-    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
-    new() { Text = ""Broccoli"", Value = ""v-bro"" },
-    new() { Text = ""Carrot"", Value = ""v-car"" },
-    new() { Text = ""Lettuce"", Value = ""v-let"" }
-];";
-
-    private readonly string example14RazorCode = @"
-<BitDropdown Label=""Single select"" FitWidth
+<BitDropdown Label=""Styles""
              Placeholder=""Select an item""
-             TItem=""BitDropdownOption<string>"" TValue=""string"">
+             TItem=""BitDropdownOption<string>"" TValue=""string""
+             Styles=""@(new() { Label = ""text-shadow: dodgerblue 0 0 0.5rem;"",
+                               Container = ""box-shadow: dodgerblue 0 0 0.5rem; border-color: lightskyblue; color: lightskyblue;"",
+                               ItemHeader = ""color: dodgerblue; text-shadow: dodgerblue 0 0 0.5rem;"",
+                               ItemButton = ""color: lightskyblue"",
+                               Callout = ""border-radius: 0.25rem; box-shadow: lightskyblue 0 0 0.5rem;"" })"">
     @foreach (var item in basicItems)
     {
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>
 
-<BitDropdown Label=""Multi select"" FitWidth
-             Placeholder=""Select items""
-             IsMultiSelect=""true""
-             TItem=""BitDropdownOption<string>"" TValue=""string"">
+<BitDropdown Label=""Classes""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>"" TValue=""string""
+             Classes=""@(new() { Callout = ""custom-callout"",
+                                Container = ""custom-container"",
+                                ItemButton = ""custom-item-button"",
+                                ScrollContainer = ""custom-scroll-container"" })"">
     @foreach (var item in basicItems)
     {
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>";
-    private readonly string example14CsharpCode = @"
+    private readonly string example15CsharpCode = @"
 private readonly List<BitDropdownItem<string>> basicItems =
 [
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
@@ -905,39 +950,55 @@ private void HandleInvalidSubmit() { }
     new() { Text = ""Broccoli"", Value = ""v-bro"" },
     new() { Text = ""Carrot"", Value = ""v-car"" },
     new() { Text = ""Lettuce"", Value = ""v-let"" }
+];
+
+private readonly List<BitDropdownItem<string>> styleClassItems =
+[
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"", Style = ""text-align: center;"" },
+    new() { Text = ""Apple"", Value = ""f-app"", Class = ""custom-fruit"" },
+    new() { Text = ""Banana"", Value = ""f-ban"", Class = ""custom-fruit"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false, Class = ""custom-fruit"" },
+    new() { Text = ""Grape"", Value = ""f-gra"", Class = ""custom-fruit"" },
+    new() { ItemType = BitDropdownItemType.Divider, Style = ""padding: 0 0.25rem;"" },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"", Style = ""text-align: center;"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"", Class = ""custom-veg"" },
+    new() { Text = ""Carrot"", Value = ""v-car"", Class = ""custom-veg"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"", Class = ""custom-veg"" }
 ];";
 
-    private readonly string example15RazorCode = @"
-<BitDropdown NoBorder
-             Placeholder=""Select an item""
+    private readonly string example16RazorCode = @"
+<BitDropdown Label=""تک انتخابی""
+             Placeholder=""لطفا انتخاب کنید""
+             Dir=""BitDir.Rtl""
              TItem=""BitDropdownOption<string>"" TValue=""string"">
-    @foreach (var item in basicItems)
+    @foreach (var item in rtlItems)
     {
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>
 
-<BitDropdown NoBorder
-             Placeholder=""Select items""
+<BitDropdown Label=""چند انتخابی""
+             Placeholder=""انتخاب چند گزینه ای""
              IsMultiSelect=""true""
+             Dir=""BitDir.Rtl""
              TItem=""BitDropdownOption<string>"" TValue=""string"">
-    @foreach (var item in basicItems)
+    @foreach (var item in rtlItems)
     {
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>";
-    private readonly string example15CsharpCode = @"
-private readonly List<BitDropdownItem<string>> basicItems =
+    private readonly string example16CsharpCode = @"
+private readonly List<BitDropdownItem<string>> rtlItems =
 [
-    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
-    new() { Text = ""Apple"", Value = ""f-app"" },
-    new() { Text = ""Banana"", Value = ""f-ban"" },
-    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
-    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""میوه ها"" },
+    new() { Text = ""سیب"", Value = ""f-app"" },
+    new() { Text = ""موز"", Value = ""f-ban"" },
+    new() { Text = ""پرتقال"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""انگور"", Value = ""f-gra"" },
     new() { ItemType = BitDropdownItemType.Divider },
-    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
-    new() { Text = ""Broccoli"", Value = ""v-bro"" },
-    new() { Text = ""Carrot"", Value = ""v-car"" },
-    new() { Text = ""Lettuce"", Value = ""v-let"" }
+    new() { ItemType = BitDropdownItemType.Header, Text = ""سیزیجات"" },
+    new() { Text = ""کلم بروكلی"", Value = ""v-bro"" },
+    new() { Text = ""هویج"", Value = ""v-car"" },
+    new() { Text = ""کاهو"", Value = ""v-let"" }
 ];";
 }

From 8a8cea769ab6ab88db84c685fa9b4224869924fc Mon Sep 17 00:00:00 2001
From: Saleh Yusefnejad <msynk@outlook.com>
Date: Sat, 7 Sep 2024 19:25:53 +0330
Subject: [PATCH 30/38] feat(blazorui): add Alignment parameter to BitPivot
 #8512 (#8541)

---
 .../Components/Navs/Pivot/BitPivot.razor.cs   | 19 ++++
 .../Components/Navs/Pivot/BitPivot.scss       |  1 +
 .../Components/Navs/Pivot/BitPivotDemo.razor  | 33 ++++++-
 .../Navs/Pivot/BitPivotDemo.razor.cs          | 90 +++++++++++++++++--
 4 files changed, 134 insertions(+), 9 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.razor.cs
index 16c9664879..87d5a17350 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.razor.cs
@@ -7,6 +7,12 @@ public partial class BitPivot : BitComponentBase
 
 
 
+    /// <summary>
+    /// Determines the alignment of the header section of the pivot.
+    /// </summary>
+    [Parameter, ResetStyleBuilder]
+    public BitAlignment? Alignment { get; set; }
+
     /// <summary>
     /// The content of pivot, It can be Any custom tag
     /// </summary>
@@ -106,6 +112,19 @@ protected override void RegisterCssClasses()
     protected override void RegisterCssStyles()
     {
         StyleBuilder.Register(() => Styles?.Root);
+
+        StyleBuilder.Register(() => Alignment switch
+        {
+            BitAlignment.Start => "--bit-pvt-hal:flex-start",
+            BitAlignment.End => "--bit-pvt-hal:flex-end",
+            BitAlignment.Center => "--bit-pvt-hal:center",
+            BitAlignment.SpaceBetween => "--bit-pvt-hal:space-between",
+            BitAlignment.SpaceAround => "--bit-pvt-hal:space-around",
+            BitAlignment.SpaceEvenly => "--bit-pvt-hal:space-evenly",
+            BitAlignment.Baseline => "--bit-pvt-hal:baseline",
+            BitAlignment.Stretch => "--bit-pvt-hal:stretch",
+            _ => "--bit-pvt-hal:flex-start"
+        });
     }
 
     protected override async Task OnInitializedAsync()
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.scss b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.scss
index 845153d779..b56e20fe53 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.scss
@@ -25,6 +25,7 @@
 .bit-pvt-hct {
     display: flex;
     white-space: nowrap;
+    justify-content: var(--bit-pvt-hal);
 
     * {
         font-size: spacing(2);
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor
index 5aab40eda0..39d1d6c603 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor
@@ -340,7 +340,32 @@
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="Position" RazorCode="@example11RazorCode" Id="example11">
+    <ComponentExampleBox Title="Alignment" RazorCode="@example11RazorCode" Id="example11">
+        <ExamplePreview>
+            <BitPivot Alignment="BitAlignment.Center">
+                <BitPivotItem HeaderText="File">
+                    <div style="margin-top:10px">
+                        <h1>Pivot #1</h1>
+                        <p style="white-space:pre-wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu ligula quis orci accumsan pharetra. Fusce mattis sit amet enim vitae imperdiet. Maecenas hendrerit sapien nisl, quis consectetur mi bibendum vel. Pellentesque vel rhoncus quam, non bibendum arcu. Vivamus euismod tellus non felis finibus, dictum finibus eros elementum. Vivamus a massa sit amet leo volutpat blandit at vel tortor. Praesent posuere, nulla eu tempus accumsan, nibh elit rhoncus mauris, eu semper tellus risus et nisi. Duis felis ipsum, luctus eget ultrices sit amet, scelerisque quis metus.</p>
+                    </div>
+                </BitPivotItem>
+                <BitPivotItem HeaderText="Shared with me">
+                    <div style="margin-top:15px">
+                        <h2>Pivot #2</h2>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu ligula quis orci accumsan pharetra.</p>
+                    </div>
+                </BitPivotItem>
+                <BitPivotItem HeaderText="Recent">
+                    <div style="margin-top:10px">
+                        <h3>Pivot #3</h3>
+                        <p style="white-space:pre-wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu ligula quis orci accumsan pharetra. Fusce mattis sit amet enim vitae imperdiet. Maecenas hendrerit sapien nisl, quis consectetur mi bibendum vel. Pellentesque vel rhoncus quam, non bibendum arcu. Vivamus euismod tellus non felis finibus, dictum finibus eros elementum. Vivamus a massa sit amet leo volutpat blandit at vel tortor. Praesent posuere, nulla eu tempus accumsan, nibh elit rhoncus mauris, eu semper tellus risus et nisi. Duis felis ipsum, luctus eget ultrices sit amet, scelerisque quis metus.<br />Suspendisse blandit erat ac lobortis pulvinar. Donec nunc leo, tempus sit amet accumsan in, sagittis sed odio. Pellentesque tristique felis sed purus pellentesque, ac dictum ex fringilla. Integer a tincidunt eros, non porttitor turpis. Sed gravida felis massa, in viverra massa aliquam sit amet. Etiam vitae dolor in velit sodales tristique id nec turpis. Proin sit amet urna sollicitudin, malesuada enim et, lacinia mi. Fusce nisl massa, efficitur sit amet elementum convallis, porttitor vel turpis. Fusce congue dui sit amet mollis pulvinar. Suspendisse vulputate leo quis nunc tincidunt, nec dictum risus congue.</p>
+                    </div>
+                </BitPivotItem>
+            </BitPivot>
+        </ExamplePreview>
+    </ComponentExampleBox>
+
+    <ComponentExampleBox Title="Position" RazorCode="@example12RazorCode" Id="example12">
         <ExamplePreview>
             <div class="subtitle">Pivot Position: <strong>Top</strong></div>
             <div class="box">
@@ -440,7 +465,7 @@
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="Disabled state" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
+    <ComponentExampleBox Title="Disabled state" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
         <ExamplePreview>
             <BitButton OnClick="() => PivotEnabled = !PivotEnabled">Toggle Pivot's IsEnabled</BitButton>
             <BitButton OnClick="() => PivotItemEnabled = !PivotItemEnabled">Toggle Pivot Item's IsEnabled</BitButton>
@@ -467,7 +492,7 @@
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="Style & Class" RazorCode="@example13RazorCode" Id="example13">
+    <ComponentExampleBox Title="Style & Class" RazorCode="@example14RazorCode" Id="example14">
         <ExamplePreview>
             <div>
                 <div>Component's Style & Class:</div>
@@ -561,7 +586,7 @@
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="RTL" RazorCode="@example14RazorCode" Id="example14">
+    <ComponentExampleBox Title="RTL" RazorCode="@example15RazorCode" Id="example15">
         <ExamplePreview>
             <BitPivot Dir="BitDir.Rtl" OverflowBehavior="@BitPivotOverflowBehavior.Scroll">
                 <BitPivotItem HeaderText="اسناد" IconName="@BitIconName.Info">
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor.cs
index fd7ad18632..9d2e0aa896 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor.cs
@@ -4,6 +4,15 @@ public partial class BitPivotDemo
 {
     private readonly List<ComponentParameter> componentParameters =
     [
+        new()
+        {
+            Name = "Alignment",
+            Type = "BitAlignment?",
+            DefaultValue = "null",
+            Description = "Determines the alignment of the header section of the pivot.",
+            LinkType = LinkType.Link,
+            Href = "#alignment-enum",
+        },
         new()
         {
             Name = "ChildContent",
@@ -17,8 +26,8 @@ public partial class BitPivotDemo
             Type = "BitPivotClassStyles?",
             DefaultValue = "null",
             Description = "Custom CSS classes for different parts of the BitPivot component.",
+            LinkType = LinkType.Link,
             Href = "#pivot-class-styles",
-            LinkType = LinkType.Link
         },
         new()
         {
@@ -237,6 +246,55 @@ public partial class BitPivotDemo
 
     private readonly List<ComponentSubEnum> componentSubEnums =
     [
+        new()
+        {
+            Id = "alignment-enum",
+            Name = "BitAlignment",
+            Description = "",
+            Items =
+            [
+                new()
+                {
+                    Name = "Start",
+                    Value = "0",
+                },
+                new()
+                {
+                    Name = "End",
+                    Value = "1",
+                },
+                new()
+                {
+                    Name = "Center",
+                    Value = "2",
+                },
+                new()
+                {
+                    Name = "SpaceBetween",
+                    Value = "3",
+                },
+                new()
+                {
+                    Name = "SpaceAround",
+                    Value = "4",
+                },
+                new()
+                {
+                    Name = "SpaceEvenly",
+                    Value = "5",
+                },
+                new()
+                {
+                    Name = "Baseline",
+                    Value = "6",
+                },
+                new()
+                {
+                    Name = "Stretch",
+                    Value = "7",
+                }
+            ]
+        },
         new()
         {
             Id = "linkFormat-enum",
@@ -667,6 +725,28 @@ private void TogglePivotItemVisibility()
 </BitPivot>";
 
     private readonly string example11RazorCode = @"
+<BitPivot Alignment=""BitAlignment.Center"">
+    <BitPivotItem HeaderText=""File"">
+        <div style=""margin-top:10px"">
+            <h1>Pivot #1</h1>
+            <p style=""white-space:pre-wrap"">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu ligula quis orci accumsan pharetra. Fusce mattis sit amet enim vitae imperdiet. Maecenas hendrerit sapien nisl, quis consectetur mi bibendum vel. Pellentesque vel rhoncus quam, non bibendum arcu. Vivamus euismod tellus non felis finibus, dictum finibus eros elementum. Vivamus a massa sit amet leo volutpat blandit at vel tortor. Praesent posuere, nulla eu tempus accumsan, nibh elit rhoncus mauris, eu semper tellus risus et nisi. Duis felis ipsum, luctus eget ultrices sit amet, scelerisque quis metus.</p>
+        </div>
+    </BitPivotItem>
+    <BitPivotItem HeaderText=""Shared with me"">
+        <div style=""margin-top:15px"">
+            <h2>Pivot #2</h2>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu ligula quis orci accumsan pharetra.</p>
+        </div>
+    </BitPivotItem>
+    <BitPivotItem HeaderText=""Recent"">
+        <div style=""margin-top:10px"">
+            <h3>Pivot #3</h3>
+            <p style=""white-space:pre-wrap"">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu ligula quis orci accumsan pharetra. Fusce mattis sit amet enim vitae imperdiet. Maecenas hendrerit sapien nisl, quis consectetur mi bibendum vel. Pellentesque vel rhoncus quam, non bibendum arcu. Vivamus euismod tellus non felis finibus, dictum finibus eros elementum. Vivamus a massa sit amet leo volutpat blandit at vel tortor. Praesent posuere, nulla eu tempus accumsan, nibh elit rhoncus mauris, eu semper tellus risus et nisi. Duis felis ipsum, luctus eget ultrices sit amet, scelerisque quis metus.<br />Suspendisse blandit erat ac lobortis pulvinar. Donec nunc leo, tempus sit amet accumsan in, sagittis sed odio. Pellentesque tristique felis sed purus pellentesque, ac dictum ex fringilla. Integer a tincidunt eros, non porttitor turpis. Sed gravida felis massa, in viverra massa aliquam sit amet. Etiam vitae dolor in velit sodales tristique id nec turpis. Proin sit amet urna sollicitudin, malesuada enim et, lacinia mi. Fusce nisl massa, efficitur sit amet elementum convallis, porttitor vel turpis. Fusce congue dui sit amet mollis pulvinar. Suspendisse vulputate leo quis nunc tincidunt, nec dictum risus congue.</p>
+        </div>
+    </BitPivotItem>
+</BitPivot>";
+
+    private readonly string example12RazorCode = @"
 <style>
     .subtitle {
         padding: 20px 0 10px 0;
@@ -774,7 +854,7 @@ private void TogglePivotItemVisibility()
     </BitPivot>
 </div>";
 
-    private readonly string example12RazorCode = @"
+    private readonly string example13RazorCode = @"
 <BitButton OnClick=""() => PivotEnabled = !PivotEnabled"">Toggle Pivot's IsEnabled</BitButton>
 <BitButton OnClick=""() => PivotItemEnabled = !PivotItemEnabled"">Toggle Pivot Item's IsEnabled</BitButton>
 
@@ -798,11 +878,11 @@ private void TogglePivotItemVisibility()
         </div>
     </BitPivotItem>
 </BitPivot>";
-    private readonly string example12CsharpCode = @"
+    private readonly string example13CsharpCode = @"
 private bool PivotEnabled = true;
 private bool PivotItemEnabled = true;";
 
-    private readonly string example13RazorCode = @"
+    private readonly string example14RazorCode = @"
 <style>
     .custom-class {
         margin: 1rem;
@@ -911,7 +991,7 @@ private void TogglePivotItemVisibility()
     </BitPivotItem>
 </BitPivot>";
 
-    private readonly string example14RazorCode = @"
+    private readonly string example15RazorCode = @"
 <BitPivot Dir=""BitDir.Rtl"" OverflowBehavior=""@BitPivotOverflowBehavior.Scroll"">
     <BitPivotItem HeaderText=""اسناد"" IconName=""@BitIconName.Info"">
         <br />

From fbbacc236a79d9d1429a992189eec15038437605 Mon Sep 17 00:00:00 2001
From: Saleh Yusefnejad <msynk@outlook.com>
Date: Sat, 7 Sep 2024 19:27:42 +0330
Subject: [PATCH 31/38] feat(blazorui): add FullWidth parameter to BitSeparator
 #8511 (#8542)

---
 .../Utilities/Separator/BitSeparator.razor.cs | 11 ++++++++
 .../Utilities/Separator/BitSeparator.scss     |  2 +-
 .../Separator/BitSeparatorDemo.razor          | 26 +++++++++++++------
 .../Separator/BitSeparatorDemo.razor.cs       | 15 ++++++++++-
 4 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparator.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparator.razor.cs
index 30884b87f6..2c0ec12372 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparator.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparator.razor.cs
@@ -13,6 +13,12 @@ public partial class BitSeparator : BitComponentBase
     /// </summary>
     [Parameter] public RenderFragment? ChildContent { get; set; }
 
+    /// <summary>
+    /// Renders the separator in full width of its container.
+    /// </summary>
+    [Parameter, ResetStyleBuilder]
+    public bool FullWidth { get; set; }
+
     /// <summary>
     /// Whether the element is a vertical separator.
     /// </summary>
@@ -34,4 +40,9 @@ protected override void RegisterCssClasses()
             _ => "bit-spr-ctr"
         });
     }
+
+    protected override void RegisterCssStyles()
+    {
+        StyleBuilder.Register(() => FullWidth ? "width:100%" : string.Empty);
+    }
 }
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparator.scss b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparator.scss
index 7fea1b8b16..e5a409123e 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparator.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparator.scss
@@ -6,8 +6,8 @@
 
 .bit-spr-cnt {
     position: relative;
-    display: inline-block;
     color: $clr-fg-pri;
+    display: inline-block;
     background: $clr-bg-pri;
 }
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Separator/BitSeparatorDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Separator/BitSeparatorDemo.razor
index eb7f6e5a4d..cdb4b44946 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Separator/BitSeparatorDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Separator/BitSeparatorDemo.razor
@@ -12,18 +12,18 @@
         <ComponentExampleBox Title="Basic" RazorCode="@example1RazorCode" Id="example1">
             <ExamplePreview>
                 <div>
-                    <BitLabel>Empty separator</BitLabel>
+                    <div>Empty separator</div>
                     <BitSeparator />
                     <br />
-                    <BitLabel>Separator with text</BitLabel>
+                    <div>Separator with text</div>
                     <BitSeparator>Text</BitSeparator>
                     <br />
-                    <BitLabel>Separator with icon</BitLabel>
+                    <div>Separator with icon</div>
                     <BitSeparator><BitIcon IconName="Clock" /></BitSeparator>
                 </div>
             </ExamplePreview>
         </ComponentExampleBox>
-        <ComponentExampleBox Title="Vertical" RazorCode="@example2RazorCode" Id="example1">
+        <ComponentExampleBox Title="Vertical" RazorCode="@example2RazorCode" Id="example2">
             <ExamplePreview>
                 <div class="custom-horizontal-layout">
                     <span>Item 1</span>
@@ -38,11 +38,11 @@
                 </div>
             </ExamplePreview>
         </ComponentExampleBox>
-        <ComponentExampleBox Title="AlignContent" RazorCode="@example3RazorCode" Id="example1">
+        <ComponentExampleBox Title="AlignContent" RazorCode="@example3RazorCode" Id="example3">
             <ExamplePreview>
                 <div style="height: 28rem">
                     <div>
-                        <BitLabel>Horizontal separator with text</BitLabel>
+                        <div>Horizontal separator with text</div>
                         <BitSeparator AlignContent="@BitSeparatorAlignContent.Center">Center</BitSeparator>
                         <br />
                         <BitSeparator AlignContent="@BitSeparatorAlignContent.Start">Start</BitSeparator>
@@ -51,8 +51,7 @@
                     </div>
                     <br /><br />
                     <div style="height: 13rem">
-                        <BitLabel>Vertical separator with text</BitLabel>
-                        <br />
+                        <div>Vertical separator with text</div><br />
                         <BitSeparator Vertical AlignContent="@BitSeparatorAlignContent.Center">Center</BitSeparator>
                         <BitSeparator Vertical AlignContent="@BitSeparatorAlignContent.Start">Start</BitSeparator>
                         <BitSeparator Vertical AlignContent="@BitSeparatorAlignContent.End">End</BitSeparator>
@@ -60,5 +59,16 @@
                 </div>
             </ExamplePreview>
         </ComponentExampleBox>
+        <ComponentExampleBox Title="FullWidth" RazorCode="@example4RazorCode" Id="example4">
+            <ExamplePreview>
+                <div>While using inside a flex container with align-items css style:</div>
+                <br /><br />
+                <div style="display:flex;flex-direction:column;align-items:center">
+                    <BitSeparator>Normal</BitSeparator>
+                    <br />
+                    <BitSeparator FullWidth>FullWidth</BitSeparator>
+                </div>
+            </ExamplePreview>
+        </ComponentExampleBox>
     </ComponentDemo>
 </div>
\ No newline at end of file
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Separator/BitSeparatorDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Separator/BitSeparatorDemo.razor.cs
index 8dee391d19..1aa79b922e 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Separator/BitSeparatorDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Separator/BitSeparatorDemo.razor.cs
@@ -10,8 +10,8 @@ public partial class BitSeparatorDemo
             Type = "BitSeparatorAlignContent",
             DefaultValue = "BitSeparatorAlignContent.Center",
             Description = "Where the content should be aligned in the separator.",
+            LinkType = LinkType.Link,
             Href = "#separator-align-enum",
-            LinkType = LinkType.Link
         },
         new()
         {
@@ -21,6 +21,13 @@ public partial class BitSeparatorDemo
             Description = "The content of the Separator, it can be any custom tag or text."
         },
         new()
+        {
+            Name = "FullWidth",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Renders the separator in full width of its container."
+        },
+        new()
         {
             Name = "Vertical",
             Type = "bool",
@@ -97,6 +104,12 @@ public partial class BitSeparatorDemo
 <BitSeparator Vertical AlignContent=""@BitSeparatorAlignContent.Center"">Center</BitSeparator>
 <BitSeparator Vertical AlignContent=""@BitSeparatorAlignContent.Start"">Start</BitSeparator>
 <BitSeparator Vertical AlignContent=""@BitSeparatorAlignContent.End"">End</BitSeparator>";
+
+    private readonly string example4RazorCode = @"
+<div style=""display:flex;flex-direction:column;align-items:center"">
+    <BitSeparator>Normal</BitSeparator>
+    <BitSeparator FullWidth>FullWidth</BitSeparator>
+</div>";
 }
 
 

From 6ecbd42bfc71872456065a884e9b7d80b9a9f810 Mon Sep 17 00:00:00 2001
From: Saleh Yusefnejad <msynk@outlook.com>
Date: Sat, 7 Sep 2024 19:28:42 +0330
Subject: [PATCH 32/38] feat(blazorui): unify BitTextFieldType and
 BitOtpInputType enums into BitInputType #8537 (#8543)

---
 .../Inputs/OtpInput/BitOtpInputTests.cs       | 22 +++---
 .../Inputs/TextField/BitTextFieldTests.cs     | 10 +--
 .../BitTextFieldValidationTest.razor          |  2 +-
 .../BitTextFieldType.cs => BitInputType.cs}   | 14 ++--
 .../Inputs/OtpInput/BitOtpInput.razor.cs      | 64 ++++++++--------
 .../Inputs/OtpInput/BitOtpInputType.cs        | 19 -----
 .../Inputs/TextField/BitTextField.razor       |  8 +-
 .../Inputs/TextField/BitTextField.razor.cs    | 24 +++---
 .../Inputs/OtpInput/BitOtpInputDemo.razor     |  8 +-
 .../Inputs/OtpInput/BitOtpInputDemo.razor.cs  | 76 ++++++++++++-------
 .../Inputs/TextField/BitTextFieldDemo.razor   |  5 +-
 .../TextField/BitTextFieldDemo.razor.cs       | 32 ++++----
 12 files changed, 143 insertions(+), 141 deletions(-)
 rename src/BlazorUI/Bit.BlazorUI/Components/Inputs/{TextField/BitTextFieldType.cs => BitInputType.cs} (51%)
 delete mode 100644 src/BlazorUI/Bit.BlazorUI/Components/Inputs/OtpInput/BitOtpInputType.cs

diff --git a/src/BlazorUI/Bit.BlazorUI.Tests/Components/Inputs/OtpInput/BitOtpInputTests.cs b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Inputs/OtpInput/BitOtpInputTests.cs
index 76c3c1ba07..6cdbdc6ce3 100644
--- a/src/BlazorUI/Bit.BlazorUI.Tests/Components/Inputs/OtpInput/BitOtpInputTests.cs
+++ b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Inputs/OtpInput/BitOtpInputTests.cs
@@ -92,31 +92,31 @@ public void BitOtpInputVerticalTest(bool vertical)
     }
 
     [DataTestMethod,
-        DataRow(BitOtpInputType.Text),
-        DataRow(BitOtpInputType.Number),
-        DataRow(BitOtpInputType.Password)
+        DataRow(BitInputType.Text),
+        DataRow(BitInputType.Number),
+        DataRow(BitInputType.Password)
     ]
-    public void BitOtpInputTypeTest(BitOtpInputType inputType)
+    public void BitInputTypeTest(BitInputType inputType)
     {
         var com = RenderComponent<BitOtpInput>(parameters =>
         {
             parameters.Add(p => p.Length, 1);
-            parameters.Add(p => p.InputType, inputType);
+            parameters.Add(p => p.Type, inputType);
         });
 
         string inputTypeAttribute = inputType switch
         {
-            BitOtpInputType.Text => "text",
-            BitOtpInputType.Number => "number",
-            BitOtpInputType.Password => "password",
+            BitInputType.Text => "text",
+            BitInputType.Number => "number",
+            BitInputType.Password => "password",
             _ => string.Empty
         };
 
         string inputModeAttribute = inputType switch
         {
-            BitOtpInputType.Text => "text",
-            BitOtpInputType.Number => "numeric",
-            BitOtpInputType.Password => "text",
+            BitInputType.Text => "text",
+            BitInputType.Number => "numeric",
+            BitInputType.Password => "text",
             _ => string.Empty
         };
 
diff --git a/src/BlazorUI/Bit.BlazorUI.Tests/Components/Inputs/TextField/BitTextFieldTests.cs b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Inputs/TextField/BitTextFieldTests.cs
index 4cefd8b55d..1766d889d0 100644
--- a/src/BlazorUI/Bit.BlazorUI.Tests/Components/Inputs/TextField/BitTextFieldTests.cs
+++ b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Inputs/TextField/BitTextFieldTests.cs
@@ -119,7 +119,7 @@ public void BitTextFieldCanRevealPassword(bool isEnabled)
         var component = RenderComponent<BitTextField>(parameters =>
         {
             parameters.Add(p => p.IsEnabled, isEnabled);
-            parameters.Add(p => p.Type, BitTextFieldType.Password);
+            parameters.Add(p => p.Type, BitInputType.Password);
             parameters.Add(p => p.CanRevealPassword, true);
         });
 
@@ -137,11 +137,11 @@ public void BitTextFieldCanRevealPassword(bool isEnabled)
     }
 
     [DataTestMethod,
-        DataRow(BitTextFieldType.Password),
-        DataRow(BitTextFieldType.Number),
-        DataRow(BitTextFieldType.Tel)
+        DataRow(BitInputType.Password),
+        DataRow(BitInputType.Number),
+        DataRow(BitInputType.Tel)
     ]
-    public void BitTextFieldTypeTest(BitTextFieldType type)
+    public void BitInputTypeTest(BitInputType type)
     {
         var component = RenderComponent<BitTextField>(parameters =>
         {
diff --git a/src/BlazorUI/Bit.BlazorUI.Tests/Components/Inputs/TextField/BitTextFieldValidationTest.razor b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Inputs/TextField/BitTextFieldValidationTest.razor
index 2988b0acb4..a7d6c1b091 100644
--- a/src/BlazorUI/Bit.BlazorUI.Tests/Components/Inputs/TextField/BitTextFieldValidationTest.razor
+++ b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Inputs/TextField/BitTextFieldValidationTest.razor
@@ -44,7 +44,7 @@
     [Parameter] public string Placeholder { get; set; }
     [Parameter] public bool CanRevealPassword { get; set; }
     [Parameter] public string RevealPasswordAriaLabel { get; set; }
-    [Parameter] public BitTextFieldType Type { get; set; }
+    [Parameter] public BitInputType Type { get; set; }
     [Parameter] public string AriaLabel { get; set; }
     [Parameter] public string Label { get; set; }
     [Parameter] public string Prefix { get; set; }
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextFieldType.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/BitInputType.cs
similarity index 51%
rename from src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextFieldType.cs
rename to src/BlazorUI/Bit.BlazorUI/Components/Inputs/BitInputType.cs
index d64e3919f6..2b5d16e2ce 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextFieldType.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/BitInputType.cs
@@ -1,34 +1,34 @@
 namespace Bit.BlazorUI;
 
-public enum BitTextFieldType
+public enum BitInputType
 {
     /// <summary>
-    /// The TextField characters are shown as text.
+    /// The input expects text characters.
     /// </summary>
     Text,
 
     /// <summary>
-    /// The TextField characters are masked.
+    /// The input expects password characters.
     /// </summary>
     Password,
 
     /// <summary>
-    /// The TextField characters are number.
+    /// The input expects number characters.
     /// </summary>
     Number,
 
     /// <summary>
-    /// The TextField act as an email input.
+    /// The input expects email characters.
     /// </summary>
     Email,
 
     /// <summary>
-    /// The TextField act as a tel input.
+    /// The input expects tel characters.
     /// </summary>
     Tel,
 
     /// <summary>
-    /// The TextField act as a url input.
+    /// The input expects url characters.
     /// </summary>
     Url
 }
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/OtpInput/BitOtpInput.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/OtpInput/BitOtpInput.razor.cs
index dc72f93d36..cd65402b31 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/OtpInput/BitOtpInput.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/OtpInput/BitOtpInput.razor.cs
@@ -26,11 +26,6 @@ public partial class BitOtpInput : BitInputBase<string?>, IDisposable
     /// </summary>
     [Parameter] public BitOtpInputClassStyles? Classes { get; set; }
 
-    /// <summary>
-    /// Type of the inputs.
-    /// </summary>
-    [Parameter] public BitOtpInputType InputType { get; set; } = BitOtpInputType.Text;
-
     /// <summary>
     /// Length of the OTP or number of the inputs.
     /// </summary>
@@ -76,6 +71,11 @@ public partial class BitOtpInput : BitInputBase<string?>, IDisposable
     /// </summary>
     [Parameter] public BitOtpInputClassStyles? Styles { get; set; }
 
+    /// <summary>
+    /// Type of the inputs.
+    /// </summary>
+    [Parameter] public BitInputType? Type { get; set; }
+
     /// <summary>
     /// Defines whether to render inputs vertically.
     /// </summary>
@@ -99,7 +99,7 @@ public async Task SetPastedData(string pastedValue)
         if (IsEnabled is false) return;
         if (ValueHasBeenSet && ValueChanged.HasDelegate is false) return;
         if (pastedValue.HasNoValue()) return;
-        if (InputType is BitOtpInputType.Number && int.TryParse(pastedValue, out _) is false) return;
+        if (Type is BitInputType.Number && int.TryParse(pastedValue, out _) is false) return;
 
         SetInputsValue(pastedValue);
 
@@ -112,6 +112,20 @@ public async Task SetPastedData(string pastedValue)
 
     protected override string RootElementClass => "bit-otp";
 
+    protected override void RegisterCssClasses()
+    {
+        ClassBuilder.Register(() => Classes?.Root);
+
+        ClassBuilder.Register(() => Reversed ? "bit-otp-rvs" : string.Empty);
+
+        ClassBuilder.Register(() => Vertical ? "bit-otp-vrt" : string.Empty);
+    }
+
+    protected override void RegisterCssStyles()
+    {
+        StyleBuilder.Register(() => Styles?.Root);
+    }
+
     protected override void OnInitialized()
     {
         _inputRefs = new ElementReference[Length];
@@ -152,20 +166,6 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         }
     }
 
-    protected override void RegisterCssClasses()
-    {
-        ClassBuilder.Register(() => Classes?.Root);
-
-        ClassBuilder.Register(() => Reversed ? $"{RootElementClass}-rvs" : string.Empty);
-
-        ClassBuilder.Register(() => Vertical ? $"{RootElementClass}-vrt" : string.Empty);
-    }
-
-    protected override void RegisterCssStyles()
-    {
-        StyleBuilder.Register(() => Styles?.Root);
-    }
-
     protected override bool TryParseValueFromString(string? value, [MaybeNullWhen(false)] out string? result, [NotNullWhen(false)] out string? parsingErrorMessage)
     {
         result = value;
@@ -185,20 +185,22 @@ protected override void Dispose(bool disposing)
 
 
 
-    private string GetInputType() => InputType switch
+    private string GetInputType() => Type switch
     {
-        BitOtpInputType.Text => "text",
-        BitOtpInputType.Number => "number",
-        BitOtpInputType.Password => "password",
-        _ => string.Empty
+        BitInputType.Text => "text",
+        BitInputType.Number => "number",
+        BitInputType.Password => "password",
+        BitInputType.Email => "email",
+        BitInputType.Tel => "tel",
+        BitInputType.Url => "url",
+        _ => "text"
     };
 
-    private string GetInputMode() => InputType switch
+    private string GetInputMode() => Type switch
     {
-        BitOtpInputType.Text => "text",
-        BitOtpInputType.Number => "numeric",
-        BitOtpInputType.Password => "text",
-        _ => string.Empty
+        BitInputType.Text => "text",
+        BitInputType.Number => "numeric",
+        _ => "text"
     };
 
     private string GetInputStyles(int index)
@@ -273,7 +275,7 @@ private async Task HandleOnInput(ChangeEventArgs e, int index)
         {
             var diff = DiffValues(oldValue ?? string.Empty, newValue);
 
-            if (InputType is BitOtpInputType.Number && int.TryParse(diff, out _) is false)
+            if (Type is BitInputType.Number && int.TryParse(diff, out _) is false)
             {
                 _inputValues[index] = oldValue;
             }
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/OtpInput/BitOtpInputType.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/OtpInput/BitOtpInputType.cs
deleted file mode 100644
index 9d272a2abc..0000000000
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/OtpInput/BitOtpInputType.cs
+++ /dev/null
@@ -1,19 +0,0 @@
-namespace Bit.BlazorUI;
-
-public enum BitOtpInputType
-{
-    /// <summary>
-    /// The OtpInput characters are shown as text.
-    /// </summary>
-    Text,
-
-    /// <summary>
-    /// The OtpInput characters are masked.
-    /// </summary>
-    Password,
-
-    /// <summary>
-    /// The OtpInput characters are number.
-    /// </summary>
-    Number
-}
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor
index 7dfd26370c..01f4d121f9 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor
@@ -37,7 +37,7 @@
                 </div>
             }
 
-            @if (IsMultiline && Type == BitTextFieldType.Text)
+            @if (IsMultiline && Type == BitInputType.Text)
             {
                 <textarea @ref="InputElement" @attributes="InputHtmlAttributes"
                           @onclick="@HandleOnClick"
@@ -93,18 +93,18 @@
                        aria-describedby="@(Description.HasValue() || DescriptionTemplate is not null ? _descriptionId : null)" />
             }
 
-            @if (CanRevealPassword && Type == BitTextFieldType.Password)
+            @if (CanRevealPassword && Type == BitInputType.Password)
             {
                 <button @onclick="ToggleRevealPassword"
                         style="@Styles?.RevealPassword"
                         class="bit-tfl-prb @Classes?.RevealPassword"
                         type="button"
                         aria-label="@RevealPasswordAriaLabel"
-                        aria-pressed="@(_elementType == BitTextFieldType.Text ? "true" : "false")">
+                        aria-pressed="@(_elementType == BitInputType.Text ? "true" : "false")">
                     <span style="@Styles?.RevealPasswordIconContainer"
                           class="bit-tfl-rin @Classes?.RevealPasswordIconContainer">
                         <i style="@Styles?.RevealPasswordIcon"
-                           class="bit-tfl-ric bit-icon bit-icon--@(_elementType == BitTextFieldType.Text ? "Hide3" : "View") @Classes?.RevealPasswordIcon"
+                           class="bit-tfl-ric bit-icon bit-icon--@(_elementType == BitInputType.Text ? "Hide3" : "View") @Classes?.RevealPasswordIcon"
                            aria-hidden="true" />
                     </span>
                 </button>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor.cs
index b992494295..4de247201c 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor.cs
@@ -6,7 +6,7 @@ public partial class BitTextField : BitTextInputBase<string?>
 {
     private bool _hasFocus;
     private bool _isPasswordRevealed;
-    private BitTextFieldType _elementType;
+    private BitInputType _elementType;
     private string _inputId = string.Empty;
     private string _labelId = string.Empty;
     private string _inputType = string.Empty;
@@ -175,7 +175,7 @@ public partial class BitTextField : BitTextInputBase<string?>
     /// </summary>
     [Parameter, ResetClassBuilder]
     [CallOnSet(nameof(SetElementType))]
-    public BitTextFieldType Type { get; set; }
+    public BitInputType Type { get; set; } = BitInputType.Text;
 
 
 
@@ -193,7 +193,7 @@ protected override void RegisterCssClasses()
     {
         ClassBuilder.Register(() => Classes?.Root);
 
-        ClassBuilder.Register(() => IsMultiline && Type == BitTextFieldType.Text
+        ClassBuilder.Register(() => IsMultiline && Type == BitInputType.Text
                                     ? $"bit-tfl-{(IsResizable ? "mln" : "mlf")}"
                                     : string.Empty);
 
@@ -252,19 +252,19 @@ protected override bool TryParseValueFromString(string? value, [MaybeNullWhen(fa
 
     private void SetElementType()
     {
-        _elementType = Type is BitTextFieldType.Password && CanRevealPassword && _isPasswordRevealed
-                         ? BitTextFieldType.Text
+        _elementType = Type is BitInputType.Password && CanRevealPassword && _isPasswordRevealed
+                         ? BitInputType.Text
                          : Type;
 
         _inputType = _elementType switch
         {
-            BitTextFieldType.Text => "text",
-            BitTextFieldType.Password => "password",
-            BitTextFieldType.Number => "number",
-            BitTextFieldType.Email => "email",
-            BitTextFieldType.Tel => "tel",
-            BitTextFieldType.Url => "url",
-            _ => string.Empty,
+            BitInputType.Text => "text",
+            BitInputType.Number => "number",
+            BitInputType.Password => "password",
+            BitInputType.Email => "email",
+            BitInputType.Tel => "tel",
+            BitInputType.Url => "url",
+            _ => "text",
         };
     }
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/OtpInput/BitOtpInputDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/OtpInput/BitOtpInputDemo.razor
index db6c3d369e..ff865d354d 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/OtpInput/BitOtpInputDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/OtpInput/BitOtpInputDemo.razor
@@ -31,19 +31,19 @@
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="InputType" RazorCode="@example2RazorCode" Id="example2">
+    <ComponentExampleBox Title="Type" RazorCode="@example2RazorCode" Id="example2">
         <ExamplePreview>
             <div>Set different input types for the OTP input: text, number, and password.</div>
             <br />
             <div class="example-box">
                 <div class="lbl">Text</div>
-                <BitOtpInput InputType="BitOtpInputType.Text" />
+                <BitOtpInput Type="BitInputType.Text" />
                 <br />
                 <div class="lbl">Number</div>
-                <BitOtpInput InputType="BitOtpInputType.Number" />
+                <BitOtpInput Type="BitInputType.Number" />
                 <br />
                 <div class="lbl">Password</div>
-                <BitOtpInput InputType="BitOtpInputType.Password" />
+                <BitOtpInput Type="BitInputType.Password" />
             </div>
         </ExamplePreview>
     </ComponentExampleBox>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/OtpInput/BitOtpInputDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/OtpInput/BitOtpInputDemo.razor.cs
index 134bcbb949..0c2936b58f 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/OtpInput/BitOtpInputDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/OtpInput/BitOtpInputDemo.razor.cs
@@ -20,16 +20,7 @@ public partial class BitOtpInputDemo
             DefaultValue = "null",
             Description = "Custom CSS classes for different parts of the BitOtpInput.",
             LinkType = LinkType.Link,
-            Href = "#otpinput-class-styles",
-        },
-        new()
-        {
-            Name = "InputType",
-            Type = "BitOtpInputType",
-            DefaultValue = "BitOtpInputType.Text",
-            Description = "Type of the inputs.",
-            LinkType = LinkType.Link,
-            Href = "#inputType-enum",
+            Href = "#class-styles",
         },
         new()
         {
@@ -88,7 +79,16 @@ public partial class BitOtpInputDemo
             DefaultValue = "null",
             Description = "Custom CSS styles for different parts of the BitOtpInput.",
             LinkType = LinkType.Link,
-            Href = "#otpinput-class-styles",
+            Href = "#class-styles",
+        },
+        new()
+        {
+            Name = "Type",
+            Type = "BitInputType?",
+            DefaultValue = "null",
+            Description = "Type of the inputs.",
+            LinkType = LinkType.Link,
+            Href = "#input-type-enum",
         },
         new()
         {
@@ -102,7 +102,7 @@ public partial class BitOtpInputDemo
     [
         new()
         {
-            Id = "otpinput-class-styles",
+            Id = "class-styles",
             Title = "BitOtpInputClassStyles",
             Description = "",
             Parameters = new()
@@ -135,29 +135,47 @@ public partial class BitOtpInputDemo
     [
         new()
         {
-            Id = "inputType-enum",
-            Name = "BitOtpInputType",
-            Items = new()
-            {
+            Id = "input-type-enum",
+            Name = "BitInputType",
+            Items =
+            [
+                new()
+                {
+                    Name= "Text",
+                    Description="The input expects text characters.",
+                    Value="0",
+                },
                 new()
                 {
-                    Name = "Text",
-                    Description = "The OtpInput characters are shown as text.",
-                    Value = "0"
+                    Name= "Password",
+                    Description="The input expects password characters.",
+                    Value="1",
                 },
                 new()
                 {
-                    Name = "Password",
-                    Description = "The OtpInput characters are masked.",
-                    Value = "1"
+                    Name= "Number",
+                    Description="The input expects number characters.",
+                    Value="2",
                 },
                 new()
                 {
-                    Name = "Number",
-                    Description = "The OtpInput characters are number.",
-                    Value = "2"
+                    Name= "Email",
+                    Description="The input expects email characters.",
+                    Value="3",
+                },
+                new()
+                {
+                    Name= "Tel",
+                    Description="The input expects tel characters.",
+                    Value="4",
+                },
+                new()
+                {
+                    Name= "Url",
+                    Description="The input expects url characters.",
+                    Value="5",
                 }
-            }
+            ]
         }
     ];
     private readonly List<ComponentParameter> componentPublicMembers =
@@ -215,9 +233,9 @@ private void HandleInvalidSubmit()
 <BitOtpInput AutoFocus=""true"" />";
 
     private readonly string example2RazorCode = @"
-<BitOtpInput InputType=""BitOtpInputType.Text"" />
-<BitOtpInput InputType=""BitOtpInputType.Number"" />
-<BitOtpInput InputType=""BitOtpInputType.Password"" />";
+<BitOtpInput Type=""BitInputType.Text"" />
+<BitOtpInput Type=""BitInputType.Number"" />
+<BitOtpInput Type=""BitInputType.Password"" />";
 
     private readonly string example3RazorCode = @"
 <BitOtpInput />
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TextField/BitTextFieldDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TextField/BitTextFieldDemo.razor
index 1be940fa18..454b2f48d2 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TextField/BitTextFieldDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TextField/BitTextFieldDemo.razor
@@ -9,6 +9,7 @@
                ComponentDescription="Text fields give people a way to enter and edit text. They’re used in forms, modal dialogs, tables, and other surfaces where text input is required."
                ComponentParameters="componentParameters"
                ComponentSubClasses="componentSubClasses"
+               ComponentSubEnums="componentSubEnums"
                ComponentPublicMembers="componentPublicMembers">
     <ComponentExampleBox Title="Basics" RazorCode="@example1RazorCode" Id="example1">
         <ExamplePreview>
@@ -143,9 +144,9 @@
             <div>Shows BitTextField configured for password entry, including an option to reveal the password.</div>
             <br />
             <div class="example-box">
-                <BitTextField Label="Password" Type="BitTextFieldType.Password" />
+                <BitTextField Label="Password" Type="BitInputType.Password" />
                 <br />
-                <BitTextField Label="Reveal Password" Type="BitTextFieldType.Password" CanRevealPassword="true" />
+                <BitTextField Label="Reveal Password" Type="BitInputType.Password" CanRevealPassword="true" />
             </div>
         </ExamplePreview>
     </ComponentExampleBox>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TextField/BitTextFieldDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TextField/BitTextFieldDemo.razor.cs
index 251869accd..5384e0d53f 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TextField/BitTextFieldDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TextField/BitTextFieldDemo.razor.cs
@@ -215,11 +215,11 @@ public partial class BitTextFieldDemo
         new()
         {
             Name = "Type",
-            Type = "BitTextFieldType",
-            DefaultValue = "BitTextFieldType.Text",
+            Type = "BitInputType",
+            DefaultValue = "BitInputType.Text",
             Description = "Input type.",
             LinkType = LinkType.Link,
-            Href = "#text-field-type-enum"
+            Href = "#input-type-enum"
         }
     ];
 
@@ -352,48 +352,48 @@ public partial class BitTextFieldDemo
     [
         new()
         {
-            Id = "text-field-type-enum",
-            Name = "BitTextFieldType",
+            Id = "input-type-enum",
+            Name = "BitInputType",
             Description = "",
-            Items = new()
-            {
+            Items =
+            [
                 new()
                 {
                     Name= "Text",
-                    Description="The TextField characters are shown as text.",
+                    Description="The input expects text characters.",
                     Value="0",
                 },
                 new()
                 {
                     Name= "Password",
-                    Description="The TextField characters are masked.",
+                    Description="The input expects password characters.",
                     Value="1",
                 },
                 new()
                 {
                     Name= "Number",
-                    Description="The TextField characters are number.",
+                    Description="The input expects number characters.",
                     Value="2",
                 },
                 new()
                 {
                     Name= "Email",
-                    Description="The TextField act as an email input.",
+                    Description="The input expects email characters.",
                     Value="3",
                 },
                 new()
                 {
                     Name= "Tel",
-                    Description="The TextField act as a tel input.",
+                    Description="The input expects tel characters.",
                     Value="4",
                 },
                 new()
                 {
                     Name= "Url",
-                    Description="The TextField act as a url input.",
+                    Description="The input expects url characters.",
                     Value="5",
                 }
-            }
+            ]
         }
     ];
 
@@ -511,8 +511,8 @@ private void HandleInvalidSubmit()
 </BitTextField>";
 
     private readonly string example8RazorCode = @"
-<BitTextField Label=""Password"" Type=""BitTextFieldType.Password"" />
-<BitTextField Label=""Reveal Password"" Type=""BitTextFieldType.Password"" CanRevealPassword=""true"" />";
+<BitTextField Label=""Password"" Type=""BitInputType.Password"" />
+<BitTextField Label=""Reveal Password"" Type=""BitInputType.Password"" CanRevealPassword=""true"" />";
 
     private readonly string example9RazorCode = @"
 <BitTextField Label=""One-way"" Value=""@oneWayValue"" />

From 3f821f5eb0f5a861ff9694cbee05e918699550e8 Mon Sep 17 00:00:00 2001
From: Saleh Yusefnejad <msynk@outlook.com>
Date: Sat, 7 Sep 2024 19:30:02 +0330
Subject: [PATCH 33/38] feat(blazorui): rename Implementation section to API
 #8540 (#8544)

---
 .../Components/ComponentDemo.razor                          | 4 ++--
 .../Components/ComponentDemo.razor.scss                     | 6 +++++-
 .../Components/ComponentExampleBox.razor.scss               | 4 ++++
 .../Components/SideRail.razor.cs                            | 2 +-
 .../Shared/MainLayout.razor.scss                            | 1 -
 5 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentDemo.razor
index 31d10ac0fc..020e7c3ec3 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentDemo.razor
@@ -19,8 +19,8 @@
             <BitText Typography="BitTypography.H4" Class="subtitle">Usage</BitText>
             @ChildContent
         </section>
-        <section id="implementation-section" class="page-section">
-            <BitText Typography="BitTypography.H4" Class="subtitle">Implementation</BitText>
+        <section id="api-section" class="page-section">
+            <BitText Typography="BitTypography.H4" Class="subtitle">API</BitText>
 
             <ComponentParametersTable Name="@($"Bit{ComponentName}")" Parameters="ComponentParameters" />
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentDemo.razor.scss
index 5b707a5ed1..7186b83922 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentDemo.razor.scss
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentDemo.razor.scss
@@ -16,8 +16,12 @@
         flex-grow: 1;
     }
 
+    .page-section {
+        scroll-margin: rem2(80px);
+    }
+
     .sec-con {
-        scroll-margin: 80px;
+        scroll-margin: rem2(80px);
     }
 
     .table-view {
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentExampleBox.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentExampleBox.razor.scss
index 11f2102693..aff1c27294 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentExampleBox.razor.scss
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentExampleBox.razor.scss
@@ -57,6 +57,10 @@
 }
 
 ::deep {
+    .section-title {
+        scroll-margin: rem2(80px);
+    }
+
     .header-btn {
         height: 100%;
         min-height: rem2(40px);
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/SideRail.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/SideRail.razor.cs
index 122d8a1e2e..5bb213cc25 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/SideRail.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/SideRail.razor.cs
@@ -15,7 +15,7 @@ protected override async Task OnAfterFirstRenderAsync()
     {
         var sideRailItems = await JSRuntime.GetSideRailItems();
 
-        _items = sideRailItems.ToList();
+        _items = [.. sideRailItems, new() { Id = "api-section", Title = "API" }];
 
         StateHasChanged();
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/MainLayout.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/MainLayout.razor.scss
index 52bb1fdcc9..dc2f934ed3 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/MainLayout.razor.scss
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/MainLayout.razor.scss
@@ -84,7 +84,6 @@ main {
         bottom: rem2(8px);
         position: absolute;
         margin-right: rem2(175px);
-        scroll-margin: rem2(80px);
         color: $bit-color-foreground-primary;
 
         @include lt-lg {

From 59d4ff7d70fa1d5faef9e4e359641dd833c7fc77 Mon Sep 17 00:00:00 2001
From: Saleh Yusefnejad <msynk@outlook.com>
Date: Sat, 7 Sep 2024 19:30:28 +0330
Subject: [PATCH 34/38] feat(blazorui): change transparency of sticky api
 selector in demo pages #8545 (#8546)

---
 .../Demo/Client/Bit.BlazorUI.Demo.Client.Core/Styles/app.scss    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Styles/app.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Styles/app.scss
index 23aa62e5a9..14b32caf51 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Styles/app.scss
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Styles/app.scss
@@ -42,6 +42,7 @@ p {
 
 .pivot-sticky-header {
     z-index: 10;
+    opacity: 0.85;
     overflow: auto;
     position: sticky;
     padding: 0.25rem 0.5rem;

From bd923243310753d5688c1ace2f37c5bd8ed299b1 Mon Sep 17 00:00:00 2001
From: Saleh Yusefnejad <msynk@outlook.com>
Date: Sat, 7 Sep 2024 19:31:14 +0330
Subject: [PATCH 35/38] feat(templates): apply new design of Signin page in
 Boilerplate #8515 (#8535)

---
 .../Components/Layout/MainLayout.razor.scss   |   1 +
 .../Pages/Identity/SignInPage.razor           | 262 +++++++++++-------
 .../Pages/Identity/SignInPage.razor.cs        |   2 +
 .../Pages/Identity/SignInPage.razor.scss      |   4 +-
 .../Pages/Identity/SignUpPage.razor           |  28 +-
 .../wwwroot/images/icons/github-icon.svg      |   2 +-
 .../wwwroot/images/icons/google-icon.svg      |   2 +-
 .../wwwroot/images/icons/x-icon.svg           |   2 +-
 .../src/Shared/Resources/AppStrings.fa.resx   |   3 +
 .../src/Shared/Resources/AppStrings.fr.resx   |   3 +
 .../src/Shared/Resources/AppStrings.resx      |   3 +
 11 files changed, 191 insertions(+), 121 deletions(-)

diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/MainLayout.razor.scss b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/MainLayout.razor.scss
index 812df4c04a..effcd9f6ed 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/MainLayout.razor.scss
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/MainLayout.razor.scss
@@ -123,6 +123,7 @@ main {
 
     .form-submit-button {
         width: 100%;
+        max-width: rem2(300px);
         margin-bottom: rem2(10px);
     }
 
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignInPage.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignInPage.razor
index 11d4a6cdd6..c39d448ea6 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignInPage.razor
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignInPage.razor
@@ -21,122 +21,188 @@
 
         @if (requiresTwoFactor is false)
         {
-            <br /><br />
-            <BitButton Style="width:300px"
-                       IsLoading="isWaiting"
-                       Color="BitColor.Tertiary"
-                       Variant="BitVariant.Outline"
-                       ButtonType="BitButtonType.Button"
-                       OnClick="WrapHandled(GoogleSignIn)">
-                @Localizer[AppStrings.GoogleSignInButtonText]
-            </BitButton>
             <br />
-            <BitButton Style="width:300px"
-                       IsLoading="isWaiting"
-                       Color="BitColor.Tertiary"
-                       Variant="BitVariant.Outline"
-                       ButtonType="BitButtonType.Button"
-                       OnClick="WrapHandled(GitHubSignIn)">
-                @Localizer[AppStrings.GitHubSignInButtonText]
-            </BitButton>
-            <br />
-            <BitButton Style="width:300px"
-                       IsLoading="isWaiting"
-                       Color="BitColor.Tertiary"
-                       Variant="BitVariant.Outline"
-                       ButtonType="BitButtonType.Button"
-                       OnClick="WrapHandled(TwitterSignIn)">
-                @Localizer[AppStrings.TwitterSignInButtonText]
-            </BitButton>
-            <br /><br />
-            <BitSeparator Style="width:100%">Or</BitSeparator>
+
             <br />
-            <div class="form-input-container">
-                <BitTextField @bind-Value="model.Email"
-                              Type="BitTextFieldType.Email"
-                              Label="@Localizer[nameof(AppStrings.Email)]"
-                              Placeholder="@Localizer[nameof(AppStrings.EmailPlaceholder)]" />
-                <ValidationMessage For="@(() => model.Email)" />
+            <BitStack Horizontal Gap="1.5rem">
+                <BitButton IsLoading="isWaiting"
+                           Size="BitSize.Small"
+                           Color="BitColor.Tertiary"
+                           Variant="BitVariant.Text"
+                           ButtonType="BitButtonType.Button"
+                           OnClick="WrapHandled(GoogleSignIn)"
+                           Title="@Localizer[AppStrings.GoogleSignUpButtonText]">
+                    <BitImage Src="_content/Boilerplate.Client.Core/images/icons/google-icon.svg" />
+                </BitButton>
 
-                <BitTextField @bind-Value="model.PhoneNumber"
-                              Type="BitTextFieldType.Tel"
-                              Label="@Localizer[nameof(AppStrings.PhoneNumber)]"
-                              Placeholder="@Localizer[nameof(AppStrings.PhoneNumberPlaceholder)]" />
-                <ValidationMessage For="@(() => model.PhoneNumber)" />
-            </div>
-            <div class="form-input-container">
-                <BitTextField @bind-Value="model.Password"
-                              CanRevealPassword="true"
-                              Type="BitTextFieldType.Password"
-                              Label="@Localizer[nameof(AppStrings.Password)]"
-                              AutoComplete="@BitAutoCompleteValue.CurrentPassword"
-                              Placeholder="@Localizer[nameof(AppStrings.PasswordPlaceholder)]" />
-                <ValidationMessage For="@(() => model.Password)" />
+                <BitButton IsLoading="isWaiting"
+                           Size="BitSize.Small"
+                           Color="BitColor.Tertiary"
+                           Variant="BitVariant.Text"
+                           ButtonType="BitButtonType.Button"
+                           OnClick="WrapHandled(GitHubSignIn)"
+                           Title="@Localizer[AppStrings.GitHubSignUpButtonText]">
+                    <BitImage Src="_content/Boilerplate.Client.Core/images/icons/github-icon.svg" />
+                </BitButton>
 
-                <BitTextField @bind-Value="model.Otp"
-                              CanRevealPassword="true"
-                              Type="BitTextFieldType.Password"
-                              Label="@Localizer[nameof(AppStrings.Otp)]"
-                              AutoComplete="@BitAutoCompleteValue.OneTimeCode"
-                              Placeholder="@Localizer[nameof(AppStrings.OtpPlaceholder)]" />
-                <ValidationMessage For="@(() => model.Otp)" />
-                <BitButton IsLoading="isSendingOtp"
-                           OnClick="WrapHandled(SendOtp)"
-                           Style="margin-top:4px"
+                <BitButton IsLoading="isWaiting"
+                           Size="BitSize.Small"
+                           Color="BitColor.Tertiary"
+                           Variant="BitVariant.Text"
                            ButtonType="BitButtonType.Button"
-                           Variant="BitVariant.Outline">
-                    @Localizer[nameof(AppStrings.SendOtpButtonText)]
+                           OnClick="WrapHandled(TwitterSignIn)"
+                           Title="@Localizer[AppStrings.TwitterSignUpButtonText]">
+                    <BitImage Src="_content/Boilerplate.Client.Core/images/icons/x-icon.svg" />
                 </BitButton>
-            </div>
+            </BitStack>
+            <br />
+            <BitSeparator Style="width:100%">@Localizer[AppStrings.Or]</BitSeparator>
+            <br />
+            <BitPivot Style="width:100%;max-width:300px">
+                <BitPivotItem HeaderText="@Localizer[nameof(AppStrings.Email)]">
+                    <br />
+                    <div class="form-input-container">
+                        <BitTextField @bind-Value="model.Email"
+                                      Type="BitTextFieldType.Email"
+                                      Label="@Localizer[nameof(AppStrings.Email)]"
+                                      Placeholder="@Localizer[nameof(AppStrings.EmailPlaceholder)]" />
+                        <ValidationMessage For="@(() => model.Email)" />
+                    </div>
+                    <div class="form-input-container">
+                        <BitTextField @bind-Value="model.Password"
+                                      CanRevealPassword="true"
+                                      Type="BitTextFieldType.Password"
+                                      AutoComplete="@BitAutoCompleteValue.CurrentPassword"
+                                      Placeholder="@Localizer[nameof(AppStrings.PasswordPlaceholder)]">
+                            <LabelTemplate>
+                                <BitStack Horizontal>
+                                    <BitText>@Localizer[nameof(AppStrings.Password)]</BitText>
+                                    <BitSpacer />
+                                    <BitLink Href="@Urls.ForgotPasswordPage">@Localizer[nameof(AppStrings.ForgotPasswordLink)]</BitLink>
+                                </BitStack>
+                            </LabelTemplate>
+                        </BitTextField>
+                        <ValidationMessage For="@(() => model.Password)" />
+                    </div>
+                </BitPivotItem>
+                <BitPivotItem HeaderText="@Localizer[nameof(AppStrings.PhoneNumber)]">
+                    <br />
+                    <div class="form-input-container">
+                        <BitTextField @bind-Value="model.PhoneNumber"
+                                      Type="BitTextFieldType.Tel"
+                                      Label="@Localizer[nameof(AppStrings.PhoneNumber)]"
+                                      Placeholder="@Localizer[nameof(AppStrings.PhoneNumberPlaceholder)]" />
+                        <ValidationMessage For="@(() => model.PhoneNumber)" />
+                    </div>
+                    <div class="form-input-container">
+                        <BitTextField @bind-Value="model.Password"
+                                      CanRevealPassword="true"
+                                      Type="BitTextFieldType.Password"
+                                      Label="@Localizer[nameof(AppStrings.Password)]"
+                                      AutoComplete="@BitAutoCompleteValue.CurrentPassword"
+                                      Placeholder="@Localizer[nameof(AppStrings.PasswordPlaceholder)]">
+                            <LabelTemplate>
+                                <BitStack Horizontal>
+                                    <BitText>@Localizer[nameof(AppStrings.Password)]</BitText>
+                                    <BitSpacer />
+                                    <BitLink Href="@Urls.ForgotPasswordPage">@Localizer[nameof(AppStrings.ForgotPasswordLink)]</BitLink>
+                                </BitStack>
+                            </LabelTemplate>
+                        </BitTextField>
+                        <ValidationMessage For="@(() => model.Password)" />
+                    </div>
+                </BitPivotItem>
+                <BitPivotItem HeaderText="@Localizer[nameof(AppStrings.Otp)]">
+                    <br />
+                    <div class="form-input-container tfa-otp-container">
+                        <BitText>@Localizer[nameof(AppStrings.OtpEmailOrPhoneNumberSubtitle)]</BitText>
+                        <BitTextField @bind-Value="model.Email"
+                                      Type="BitTextFieldType.Email"
+                                      Placeholder="@Localizer[nameof(AppStrings.EmailPlaceholder)]" />
+                        <BitTextField @bind-Value="model.PhoneNumber"
+                                      Type="BitTextFieldType.Tel"
+                                      Placeholder="@Localizer[nameof(AppStrings.PhoneNumberPlaceholder)]" />
+                        <BitButton IsLoading="isSendingOtp"
+                                   Variant="BitVariant.Outline"
+                                   OnClick="WrapHandled(SendOtp)"
+                                   ButtonType="BitButtonType.Button">
+                            @Localizer[nameof(AppStrings.SendOtpButtonText)]
+                        </BitButton>
+                        <br />
+                        <BitOtpInput Length="6"
+                                     @ref="otpInputRef"
+                                     @bind-Value="model.Otp"
+                                     Style="justify-content:center"
+                                     OnFill="WrapHandled(DoSignIn)"
+                                     InputType="BitOtpInputType.Number" />
+                        <ValidationMessage For="@(() => model.Otp)" />
+                        <br />
+                    </div>
+                </BitPivotItem>
+            </BitPivot>
             <div class="form-input-container form-input-container--no-margin">
                 <BitCheckbox Class="form-checkbox" @bind-Value="model.RememberMe" Label="@Localizer[nameof(AppStrings.RememberMe)]" />
             </div>
         }
         else
         {
-            <h3 class="form-title">@Localizer[nameof(AppStrings.TwoFactorAuthTitle)]</h3>
-            <div>@Localizer[nameof(AppStrings.TfaProtectedSignInSubtitle)]</div>
+            <BitText Typography="BitTypography.H4" Gutter>@Localizer[nameof(AppStrings.TwoFactorAuthTitle)]</BitText>
+            <BitText Gutter>@Localizer[nameof(AppStrings.TfaProtectedSignInSubtitle)]</BitText>
             <br />
-            <div class="form-input-container">
-                <div>@Localizer[nameof(AppStrings.TfaEnterCodeInSignInMessage)]</div>
-                <BitTextField @bind-Value="model.TwoFactorCode"
-                              AutoComplete="@BitAutoCompleteValue.OneTimeCode"
-                              Placeholder="@Localizer[nameof(AppStrings.TwoFactorCode)]" />
-            </div>
-            <div class="form-input-container">
-                <div>@Localizer[nameof(AppStrings.TfaEnterRecoveryCodeInSignInMessage)]</div>
-                <BitTextField @bind-Value="model.TwoFactorRecoveryCode"
-                              AutoComplete="@BitAutoCompleteValue.OneTimeCode"
-                              Placeholder="@Localizer[nameof(AppStrings.TwoFactorRecoveryCode)]" />
-            </div>
-            <br />
-            <div class="form-input-container tfa-token-container">
-                <div>@Localizer[nameof(AppStrings.TfaTokenSignInTitle)]</div>
-                <BitButton Style="padding:0"
-                           IsLoading="isSendingTfaToken"
-                           ButtonType="BitButtonType.Button"
-                           OnClick="WrapHandled(SendTfaToken)">
-                    @Localizer[nameof(AppStrings.TfaTokenGenerateButtonText)]
-                </BitButton>
-                <BitTextField @bind-Value="model.TwoFactorToken" Style="flex-grow:1"
-                              AutoComplete="@BitAutoCompleteValue.OneTimeCode"
-                              Placeholder="@Localizer[nameof(AppStrings.TwoFactorToken)]" />
-            </div>
+            <BitPivot>
+                <BitPivotItem HeaderText="@Localizer[nameof(AppStrings.TwoFactorCode)]">
+                    <br />
+                    <BitStack HorizontalAlign="BitAlignment.Center">
+                        <div class="form-input-container tfa-pivot-item">
+                            <BitTextField @bind-Value="model.TwoFactorCode"
+                                          Label="@Localizer[nameof(AppStrings.TfaEnterCodeInSignInMessage)]"
+                                          AutoComplete="@BitAutoCompleteValue.OneTimeCode"
+                                          Placeholder="@Localizer[nameof(AppStrings.TwoFactorCode)]" />
+                        </div>
+                    </BitStack>
+                    <br /><br />
+                </BitPivotItem>
+                <BitPivotItem HeaderText="@Localizer[nameof(AppStrings.TwoFactorRecoveryCode)]">
+                    <br />
+                    <BitStack HorizontalAlign="BitAlignment.Center">
+                        <div class="form-input-container tfa-pivot-item">
+                            <BitTextField @bind-Value="model.TwoFactorRecoveryCode"
+                                          Label="@Localizer[nameof(AppStrings.TfaEnterRecoveryCodeInSignInMessage)]"
+                                          AutoComplete="@BitAutoCompleteValue.OneTimeCode"
+                                          Placeholder="@Localizer[nameof(AppStrings.TwoFactorRecoveryCode)]" />
+                        </div>
+                    </BitStack>
+                    <br /><br />
+                </BitPivotItem>
+                <BitPivotItem HeaderText="@Localizer[nameof(AppStrings.TwoFactorToken)]">
+                    <br />
+                    <BitStack HorizontalAlign="BitAlignment.Center">
+                        <div class="form-input-container tfa-pivot-item">
+                            <div>@Localizer[nameof(AppStrings.TfaTokenSignInTitle)]</div>
+                            <BitButton IsLoading="isSendingTfaToken"
+                                       ButtonType="BitButtonType.Button"
+                                       OnClick="WrapHandled(SendTfaToken)">
+                                @Localizer[nameof(AppStrings.TfaTokenGenerateButtonText)]
+                            </BitButton>
+                            <BitTextField @bind-Value="model.TwoFactorToken" Style="flex-grow:1"
+                                          AutoComplete="@BitAutoCompleteValue.OneTimeCode"
+                                          Placeholder="@Localizer[nameof(AppStrings.TwoFactorToken)]" />
+                        </div>
+                    </BitStack>
+                </BitPivotItem>
+            </BitPivot>
         }
         <br />
-        <BitButton IsLoading="isWaiting" Title="@Localizer[nameof(AppStrings.SignIn)]" ButtonType="BitButtonType.Submit">
+        <BitButton IsLoading="isWaiting"
+                   Class="form-submit-button"
+                   ButtonType="BitButtonType.Submit"
+                   Title="@Localizer[nameof(AppStrings.SignIn)]">
             @Localizer[nameof(AppStrings.SignIn)]
         </BitButton>
-        <br />
-        <div>
-            <BitLink Href="@Urls.ForgotPasswordPage">
-                @Localizer[nameof(AppStrings.ForgotPasswordLink)]
-            </BitLink>
-        </div>
-        <br />
-        <div>
+        <br /><br />
+        <BitText Typography="BitTypography.Body2">
             @Localizer[nameof(AppStrings.DontHaveAccountMessage)]
             <BitLink Href="@Urls.SignUpPage">@Localizer[nameof(AppStrings.SignUp)]</BitLink>
-        </div>
+        </BitText>
     </EditForm>
 </div>
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignInPage.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignInPage.razor.cs
index ada3ebe7d6..d93745d8e2 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignInPage.razor.cs
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignInPage.razor.cs
@@ -14,6 +14,7 @@ public partial class SignInPage
 
     private string? message;
     private BitColor messageColor;
+    private BitOtpInput otpInputRef = default!;
     private ElementReference messageRef = default!;
 
 
@@ -128,6 +129,7 @@ private async Task SendOtp()
         finally
         {
             isSendingOtp = false;
+            await otpInputRef.FocusAsync();
         }
     }
 
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignInPage.razor.scss b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignInPage.razor.scss
index daea7e3daf..5a14d3db4c 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignInPage.razor.scss
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignInPage.razor.scss
@@ -16,8 +16,6 @@
     margin-bottom: rem2(20px);
 }
 
-.tfa-token-container {
+.tfa-otp-container {
     gap: 4px;
-    display: flex;
-    flex-flow: column;
 }
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignUpPage.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignUpPage.razor
index e8582bcd10..b504b06475 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignUpPage.razor
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignUpPage.razor
@@ -26,9 +26,7 @@
                        ButtonType="BitButtonType.Button"
                        OnClick="WrapHandled(GoogleSignUp)"
                        Title="@Localizer[AppStrings.GoogleSignUpButtonText]">
-                <svg width="32" height="32" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M33.2337 15.4497C33.1503 14.5997 32.4337 13.9663 31.5837 13.9663H19.0003C18.0837 13.9663 17.3337 14.7163 17.3337 15.633V18.483C17.3337 19.3997 18.0837 20.1497 19.0003 20.1497H26.517C26.3337 21.683 25.3337 23.9997 23.117 25.5497C21.7003 26.533 19.817 27.2164 17.3337 27.2164C17.217 27.2164 17.117 27.2163 17.0003 27.1997C12.7503 27.0663 9.15033 24.2164 7.85033 20.2997C7.50033 19.2497 7.30033 18.1497 7.30033 16.9997C7.30033 15.8497 7.50033 14.733 7.83366 13.6997C7.93366 13.3997 8.05033 13.0997 8.18366 12.7997C9.717 9.34969 13.067 6.91635 17.0003 6.79968C17.1003 6.78302 17.217 6.783 17.3337 6.783C19.717 6.783 21.5003 7.56632 22.7503 8.43298C23.4003 8.88298 24.267 8.78299 24.8337 8.23299L27.1503 5.96635C27.8837 5.24968 27.817 4.03298 26.9837 3.43298C24.3337 1.48298 21.1003 0.333008 17.3337 0.333008C17.217 0.333008 17.117 0.333024 17.0003 0.349691C10.617 0.466357 5.13366 4.16636 2.45033 9.51636C1.31699 11.783 0.666992 14.3163 0.666992 16.9997C0.666992 19.683 1.31699 22.2163 2.45033 24.483H2.467C5.15033 29.833 10.6337 33.533 17.0003 33.6497C17.117 33.6663 17.217 33.6663 17.3337 33.6663C21.8337 33.6663 25.617 32.183 28.367 29.633C31.517 26.7163 33.3337 22.4497 33.3337 17.3663C33.3337 16.6497 33.3003 16.033 33.2337 15.4497Z" fill="#E6E6E6" />
-                </svg>
+                <BitImage Src="_content/Boilerplate.Client.Core/images/icons/google-icon.svg" />
             </BitButton>
 
             <BitButton IsLoading="isWaiting"
@@ -37,9 +35,7 @@
                        ButtonType="BitButtonType.Button"
                        OnClick="WrapHandled(GitHubSignUp)"
                        Title="@Localizer[AppStrings.GitHubSignUpButtonText]">
-                <svg width="32" height="32" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path fill-rule="evenodd" clip-rule="evenodd" d="M19.9404 0C8.91388 0 0 8.97959 0 20.0886C0 28.9686 5.71143 36.4853 13.6347 39.1457C14.6253 39.3457 14.9882 38.7135 14.9882 38.1816C14.9882 37.7159 14.9555 36.1196 14.9555 34.4563C9.40857 35.6539 8.25347 32.0616 8.25347 32.0616C7.36204 29.7335 6.04122 29.1351 6.04122 29.1351C4.22571 27.9045 6.17347 27.9045 6.17347 27.9045C8.18735 28.0375 9.24408 29.9665 9.24408 29.9665C11.0265 33.0261 13.8988 32.1616 15.0543 31.6294C15.2192 30.3322 15.7478 29.4343 16.309 28.9355C11.8849 28.4698 7.2302 26.7404 7.2302 19.0241C7.2302 16.829 8.02204 15.0331 9.27673 13.6363C9.07878 13.1376 8.38531 11.0751 9.4751 8.31469C9.4751 8.31469 11.1588 7.78245 14.9551 10.3767C16.5804 9.93701 18.2566 9.71331 19.9404 9.71143C21.6241 9.71143 23.3404 9.94449 24.9253 10.3767C28.722 7.78245 30.4057 8.31469 30.4057 8.31469C31.4955 11.0751 30.8016 13.1376 30.6037 13.6363C31.8914 15.0331 32.6506 16.829 32.6506 19.0241C32.6506 26.7404 27.9959 28.4363 23.5388 28.9355C24.2653 29.5673 24.8922 30.7645 24.8922 32.6604C24.8922 35.3543 24.8596 37.5163 24.8596 38.1812C24.8596 38.7135 25.2229 39.3457 26.2131 39.1461C34.1363 36.4849 39.8478 28.9686 39.8478 20.0886C39.8804 8.97959 30.9339 0 19.9404 0Z" fill="#E6E6E6" />
-                </svg>
+                <BitImage Src="_content/Boilerplate.Client.Core/images/icons/github-icon.svg" />
             </BitButton>
 
             <BitButton IsLoading="isWaiting"
@@ -48,9 +44,7 @@
                        ButtonType="BitButtonType.Button"
                        OnClick="WrapHandled(TwitterSignUp)"
                        Title="@Localizer[AppStrings.TwitterSignUpButtonText]">
-                <svg width="32" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M1.53555 0.799805L12.909 17.3811L0.982422 31.1998H3.52461L14.0355 19.0217L22.3887 31.1998H30.3996L18.498 13.8498L29.7621 0.799805H27.2215L17.373 12.2092L9.54648 0.799805H1.53555Z" fill="#E6E6E6" />
-                </svg>
+                <BitImage Src="_content/Boilerplate.Client.Core/images/icons/x-icon.svg" />
             </BitButton>
         </BitStack>
         <br />
@@ -59,7 +53,7 @@
         <EditForm Model="signUpModel" OnValidSubmit="WrapHandled(DoSignUp)">
             <AppDataAnnotationsValidator />
 
-            <BitPivot >
+            <BitPivot>
                 <BitPivotItem HeaderText="@Localizer[nameof(AppStrings.Email)]">
                     <br />
                     <div class="form-input-container">
@@ -91,12 +85,12 @@
                 <ValidationMessage For="@(() => signUpModel.Password)" />
             </div>
             @* <div class="form-input-container">
-                <BitCheckbox Class="form-checkbox" @bind-Value="signUpModel.TermsAccepted">
-                    <LabelTemplate>
-                        <span>@Localizer[nameof(AppStrings.TermsMessage)]&nbsp<BitLink Href="@Urls.TermsPage">@Localizer[nameof(AppStrings.TermsTitle)]</BitLink></span>
-                    </LabelTemplate>
-                </BitCheckbox>
-                <ValidationMessage For="@(() => signUpModel.TermsAccepted)" />
+            <BitCheckbox Class="form-checkbox" @bind-Value="signUpModel.TermsAccepted">
+            <LabelTemplate>
+            <span>@Localizer[nameof(AppStrings.TermsMessage)]&nbsp<BitLink Href="@Urls.TermsPage">@Localizer[nameof(AppStrings.TermsTitle)]</BitLink></span>
+            </LabelTemplate>
+            </BitCheckbox>
+            <ValidationMessage For="@(() => signUpModel.TermsAccepted)" />
             </div> *@
 
             @*#if (captcha == "reCaptcha")*@
@@ -111,7 +105,7 @@
                 @Localizer[nameof(AppStrings.SignUp)]
             </BitButton>
             <br /><br />
-            <BitText Typography="BitTypography.Body2">
+            <BitText Typography="BitTypography.Body2" Gutter>
                 @Localizer[nameof(AppStrings.SignInMessageInSignUp)]
                 <BitLink Href="@Urls.SignInPage">@Localizer[nameof(AppStrings.SignIn)]</BitLink>
                 @Localizer[nameof(AppStrings.Or)]
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/icons/github-icon.svg b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/icons/github-icon.svg
index 83c223f849..3ca894b2ba 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/icons/github-icon.svg
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/icons/github-icon.svg
@@ -1,3 +1,3 @@
-<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="32" height="32" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M19.9404 0C8.91388 0 0 8.97959 0 20.0886C0 28.9686 5.71143 36.4853 13.6347 39.1457C14.6253 39.3457 14.9882 38.7135 14.9882 38.1816C14.9882 37.7159 14.9555 36.1196 14.9555 34.4563C9.40857 35.6539 8.25347 32.0616 8.25347 32.0616C7.36204 29.7335 6.04122 29.1351 6.04122 29.1351C4.22571 27.9045 6.17347 27.9045 6.17347 27.9045C8.18735 28.0375 9.24408 29.9665 9.24408 29.9665C11.0265 33.0261 13.8988 32.1616 15.0543 31.6294C15.2192 30.3322 15.7478 29.4343 16.309 28.9355C11.8849 28.4698 7.2302 26.7404 7.2302 19.0241C7.2302 16.829 8.02204 15.0331 9.27673 13.6363C9.07878 13.1376 8.38531 11.0751 9.4751 8.31469C9.4751 8.31469 11.1588 7.78245 14.9551 10.3767C16.5804 9.93701 18.2566 9.71331 19.9404 9.71143C21.6241 9.71143 23.3404 9.94449 24.9253 10.3767C28.722 7.78245 30.4057 8.31469 30.4057 8.31469C31.4955 11.0751 30.8016 13.1376 30.6037 13.6363C31.8914 15.0331 32.6506 16.829 32.6506 19.0241C32.6506 26.7404 27.9959 28.4363 23.5388 28.9355C24.2653 29.5673 24.8922 30.7645 24.8922 32.6604C24.8922 35.3543 24.8596 37.5163 24.8596 38.1812C24.8596 38.7135 25.2229 39.3457 26.2131 39.1461C34.1363 36.4849 39.8478 28.9686 39.8478 20.0886C39.8804 8.97959 30.9339 0 19.9404 0Z" fill="#E6E6E6"/>
 </svg>
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/icons/google-icon.svg b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/icons/google-icon.svg
index 99870a2b52..9fd2acf123 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/icons/google-icon.svg
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/icons/google-icon.svg
@@ -1,3 +1,3 @@
-<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="32" height="32" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M33.2337 15.4497C33.1503 14.5997 32.4337 13.9663 31.5837 13.9663H19.0003C18.0837 13.9663 17.3337 14.7163 17.3337 15.633V18.483C17.3337 19.3997 18.0837 20.1497 19.0003 20.1497H26.517C26.3337 21.683 25.3337 23.9997 23.117 25.5497C21.7003 26.533 19.817 27.2164 17.3337 27.2164C17.217 27.2164 17.117 27.2163 17.0003 27.1997C12.7503 27.0663 9.15033 24.2164 7.85033 20.2997C7.50033 19.2497 7.30033 18.1497 7.30033 16.9997C7.30033 15.8497 7.50033 14.733 7.83366 13.6997C7.93366 13.3997 8.05033 13.0997 8.18366 12.7997C9.717 9.34969 13.067 6.91635 17.0003 6.79968C17.1003 6.78302 17.217 6.783 17.3337 6.783C19.717 6.783 21.5003 7.56632 22.7503 8.43298C23.4003 8.88298 24.267 8.78299 24.8337 8.23299L27.1503 5.96635C27.8837 5.24968 27.817 4.03298 26.9837 3.43298C24.3337 1.48298 21.1003 0.333008 17.3337 0.333008C17.217 0.333008 17.117 0.333024 17.0003 0.349691C10.617 0.466357 5.13366 4.16636 2.45033 9.51636C1.31699 11.783 0.666992 14.3163 0.666992 16.9997C0.666992 19.683 1.31699 22.2163 2.45033 24.483H2.467C5.15033 29.833 10.6337 33.533 17.0003 33.6497C17.117 33.6663 17.217 33.6663 17.3337 33.6663C21.8337 33.6663 25.617 32.183 28.367 29.633C31.517 26.7163 33.3337 22.4497 33.3337 17.3663C33.3337 16.6497 33.3003 16.033 33.2337 15.4497Z" fill="#E6E6E6"/>
 </svg>
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/icons/x-icon.svg b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/icons/x-icon.svg
index a8273f4eed..8d4b8f33ca 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/icons/x-icon.svg
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/icons/x-icon.svg
@@ -1,3 +1,3 @@
-<svg width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="32" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M1.53555 0.799805L12.909 17.3811L0.982422 31.1998H3.52461L14.0355 19.0217L22.3887 31.1998H30.3996L18.498 13.8498L29.7621 0.799805H27.2215L17.373 12.2092L9.54648 0.799805H1.53555Z" fill="#E6E6E6"/>
 </svg>
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.fa.resx b/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.fa.resx
index fc72e79c0a..7658cd1a0c 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.fa.resx
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.fa.resx
@@ -814,6 +814,9 @@
   </data>
     <data name="SendOtpButtonText" xml:space="preserve">
     <value>ارسال رمز یکبار مصرف و لینک جادویی</value>
+  </data>
+    <data name="OtpEmailOrPhoneNumberSubtitle" xml:space="preserve">
+    <value>ایمیل یا شماره تلفن خود را وارد کنید:</value>
   </data>
     <data name="EitherProvidePasswordOrOtp" xml:space="preserve">
     <value>رمز عبور اصلی یا یک‌بار مصرف را وارد کنید</value>
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.fr.resx b/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.fr.resx
index c0faabec9c..95d500b2fe 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.fr.resx
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.fr.resx
@@ -814,6 +814,9 @@
   </data>
     <data name="SendOtpButtonText" xml:space="preserve">
     <value>Envoyer un lien OTP et Magic</value>
+  </data>
+    <data name="OtpEmailOrPhoneNumberSubtitle" xml:space="preserve">
+    <value>Entrez votre email ou votre numéro de téléphone:</value>
   </data>
     <data name="EitherProvidePasswordOrOtp" xml:space="preserve">
     <value>Soit fournir un mot de passe, soit Otp</value>
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.resx b/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.resx
index e8c19ccde3..4bfee9b993 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.resx
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.resx
@@ -814,6 +814,9 @@
   </data>
     <data name="SendOtpButtonText" xml:space="preserve">
     <value>Send OTP and Magic link</value>
+  </data>
+    <data name="OtpEmailOrPhoneNumberSubtitle" xml:space="preserve">
+    <value>Enter your email or phone number:</value>
   </data>
     <data name="EitherProvidePasswordOrOtp" xml:space="preserve">
     <value>Either provide password or OTP</value>

From bf7b850b44e5e8287b30aec1b00af514c4b5005b Mon Sep 17 00:00:00 2001
From: Mohammad Aminsafaei <m.aminsafaei@outlook.com>
Date: Sun, 8 Sep 2024 20:08:29 +0330
Subject: [PATCH 36/38] fix(blazorui): resolve position issues of AM/PM buttons
 in RTL mode of TimePicker in BitDateRangePicker #8525 (#8550)

---
 .../_Pickers/DateRangePicker/BitDateRangePicker.scss  | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DateRangePicker/BitDateRangePicker.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DateRangePicker/BitDateRangePicker.scss
index d936918449..88bb2db206 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DateRangePicker/BitDateRangePicker.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DateRangePicker/BitDateRangePicker.scss
@@ -50,6 +50,13 @@
             border-color: $clr-err;
         }
     }
+
+    &.bit-rtl {
+        .bit-dtrp-am-pm {
+            order: -1;
+            direction: rtl;
+        }
+    }
 }
 
 .bit-dtrp-lbl {
@@ -730,9 +737,9 @@
 .bit-dtrp-am-pm {
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
-    margin-left: spacing(2);
     padding: spacing(1.6) 0;
+    justify-content: space-between;
+    margin-inline-start: spacing(2);
 }
 
 .bit-dtrp-tin {

From e618b1c0814e66b96a65ca3e7850f182914a31f0 Mon Sep 17 00:00:00 2001
From: Saleh Yusefnejad <msynk@outlook.com>
Date: Mon, 9 Sep 2024 14:15:58 +0330
Subject: [PATCH 37/38] feat(blazorui): add ChevronDownIcon parameter to BitNav
 #8549 (#8553)

---
 .../Bit.BlazorUI/Components/Navs/Nav/BitNav.razor.cs       | 5 +++++
 .../Bit.BlazorUI/Components/Navs/Nav/_BitNavChild.razor    | 6 +++---
 .../Pages/Components/Navs/Nav/BitNavDemo.razor.cs          | 7 +++++++
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNav.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNav.razor.cs
index 3736d49daf..9d6b476bc1 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNav.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNav.razor.cs
@@ -16,6 +16,11 @@ public partial class BitNav<TItem> : BitComponentBase, IDisposable where TItem :
 
 
 
+    /// <summary>
+    /// The custom icon name of the chevron-down element of the BitNav component.
+    /// </summary>
+    [Parameter] public string? ChevronDownIcon { get; set; }
+
     /// <summary>
     /// Items to render as children.
     /// </summary>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/_BitNavChild.razor b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/_BitNavChild.razor
index 5ab7184774..71f3ef7cae 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/_BitNavChild.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/_BitNavChild.razor
@@ -63,7 +63,7 @@
                     {
                         <div class="bit-nav-itg">
                             <div class="bit-nav-iit" style="@(Nav.ReversedChevron ? "flex-flow:row-reverse" : null)">
-                                <i class="bit-icon bit-icon--ChevronDown @(isExpanded ? "bit-nav-exp" : "")" aria-hidden="true" />
+                                <i class="bit-icon bit-icon--@(Nav.ChevronDownIcon.HasValue() ? Nav.ChevronDownIcon : "ChevronDown") @(isExpanded ? "bit-nav-exp" : "")" aria-hidden="true" />
                                 <span class="bit-nav-ghd">@text</span>
                             </div>
                             <div title="@description"
@@ -76,7 +76,7 @@
                     else
                     {
                         <div class="bit-nav-iit" style="@(Nav.ReversedChevron ? "flex-flow:row-reverse" : null)">
-                            <i class="bit-icon bit-icon--ChevronDown @(isExpanded ? "bit-nav-exp" : "")" aria-hidden="true" />
+                            <i class="bit-icon bit-icon--@(Nav.ChevronDownIcon.HasValue() ? Nav.ChevronDownIcon : "ChevronDown") @(isExpanded ? "bit-nav-exp" : "")" aria-hidden="true" />
                             <span class="bit-nav-ghd">@text</span>
                         </div>
                     }
@@ -117,7 +117,7 @@
                                 class="bit-nav-cbt @Nav.Classes?.ToggleButton"
                                 aria-expanded="@(isExpanded ? "true" : "false")"
                                 aria-label="@(isExpanded ? colAriaLabel : expAriaLabel)">
-                            <i class="bit-icon bit-icon--ChevronDown @(isExpanded ? "bit-nav-exp" : "")" aria-hidden="true" />
+                            <i class="bit-icon bit-icon--@(Nav.ChevronDownIcon.HasValue() ? Nav.ChevronDownIcon : "ChevronDown") @(isExpanded ? "bit-nav-exp" : "")" aria-hidden="true" />
                         </button>
                     }
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/BitNavDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/BitNavDemo.razor.cs
index d4a3e6f9f0..5b106ce113 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/BitNavDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/BitNavDemo.razor.cs
@@ -4,6 +4,13 @@ public partial class BitNavDemo
 {
     private readonly List<ComponentParameter> componentParameters =
     [
+        new()
+        {
+            Name = "ChevronDownIcon",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "The custom icon name of the chevron-down element of the BitNav component.",
+        },
         new()
         {
             Name = "ChildContent",

From 1e815ebefbf66b935cc4887503c9511bc8608dac Mon Sep 17 00:00:00 2001
From: Saleh Yusefnejad <msynk@outlook.com>
Date: Mon, 9 Sep 2024 18:07:31 +0330
Subject: [PATCH 38/38] feat(blazorui): add BodyClass and BodyStyle parameters
 to BitPivotItem #8536 (#8555)

---
 .../Components/Navs/Pivot/BitPivot.razor      |  4 +--
 .../Components/Navs/Pivot/BitPivot.razor.cs   | 31 +++++++++++++++----
 .../Navs/Pivot/BitPivotClassStyles.cs         |  4 +--
 .../Navs/Pivot/BitPivotItem.razor.cs          | 10 ++++++
 .../Components/Navs/Pivot/BitPivotDemo.razor  |  2 +-
 .../Navs/Pivot/BitPivotDemo.razor.cs          | 22 ++++++++++---
 .../Navs/Pivot/BitPivotDemo.razor.scss        |  2 +-
 7 files changed, 59 insertions(+), 16 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.razor b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.razor
index cb65def5e1..7a6c6e8d67 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.razor
@@ -20,8 +20,8 @@
         <div role="tabpanel"
              aria-hidden="false"
              aria-labelledby="@GetAriaLabelledby"
-             style="@GetSelectedItemStyle() @Styles?.ContentView"
-             class="bit-pvt-cct@((_selectedItem?.IsEnabled??false) ? "" : " disabled") @Classes?.ContentView">
+             style="@GetSelectedItemStyle()"
+             class="bit-pvt-cct @GetSelectedItemClass()">
             @(_selectedItem?.Body ?? _selectedItem?.ChildContent)
         </div>
     }
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.razor.cs
index 87d5a17350..2a42bdd6de 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.razor.cs
@@ -204,12 +204,31 @@ private void SelectItemByKey(string? key)
 
     private string GetSelectedItemStyle()
     {
-        return _selectedItem?.Visibility switch
-        {
-            BitVisibility.Collapsed => "visibility:hidden",
-            BitVisibility.Hidden => "display:none",
-            _ => string.Empty
-        };
+        List<string?> list =
+        [
+            _selectedItem?.Visibility switch
+            {
+                BitVisibility.Collapsed => "visibility:hidden",
+                BitVisibility.Hidden => "display:none",
+                _ => string.Empty
+            },
+            Styles?.Body,
+            _selectedItem?.BodyStyle
+        ];
+
+        return string.Join(';', list.Where(s => s.HasValue()));
+    }
+
+    private string GetSelectedItemClass()
+    {
+        List<string?> list =
+        [
+            (_selectedItem?.IsEnabled is false) ? "disabled" : string.Empty,
+            Classes?.Body,
+            _selectedItem?.BodyClass
+        ];
+
+        return string.Join(' ', list.Where(s => s.HasValue()));
     }
 
     private string GetAriaLabelledby => $"Pivot-{UniqueId}-Tab-{_allItems.FindIndex(i => i == _selectedItem)}";
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivotClassStyles.cs b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivotClassStyles.cs
index 8e0a84fce2..d6f10ec8e3 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivotClassStyles.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivotClassStyles.cs
@@ -13,9 +13,9 @@ public class BitPivotClassStyles
     public string? Header { get; set; }
 
     /// <summary>
-    /// Custom CSS classes/styles for the content view of the BitPivot.
+    /// Custom CSS classes/styles for the items body of the BitPivot.
     /// </summary>
-    public string? ContentView { get; set; }
+    public string? Body { get; set; }
 
     /// <summary>
     /// Custom CSS classes/styles for the header item of the BitPivot.
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivotItem.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivotItem.razor.cs
index 6862917ec7..f3cabd397c 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivotItem.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivotItem.razor.cs
@@ -12,6 +12,16 @@ public partial class BitPivotItem : BitComponentBase, IDisposable
     /// </summary>
     [Parameter] public RenderFragment? Body { get; set; }
 
+    /// <summary>
+    /// The custom css class of the content of the pivot item.
+    /// </summary>
+    [Parameter] public string? BodyClass { get; set; }
+
+    /// <summary>
+    /// The custom css style of the content of the pivot item.
+    /// </summary>
+    [Parameter] public string? BodyStyle { get; set; }
+
     /// <summary>
     /// The content of the pivot item, It can be Any custom tag or a text.
     /// </summary>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor
index 39d1d6c603..d927db6ad1 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor
@@ -562,7 +562,7 @@
                     </BitPivotItem>
                 </BitPivot>
                 <br />
-                <BitPivot Classes="@(new() { ContentView = "custom-content-view", SelectedItem = "custom-selected-item", Header = "custom-header" })">
+                <BitPivot Classes="@(new() { Body = "custom-body", SelectedItem = "custom-selected-item", Header = "custom-header" })">
                     <BitPivotItem HeaderText="File">
                         <div style="margin-top:10px">
                             <h1>Pivot #1</h1>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor.cs
index 9d2e0aa896..544a2e3b70 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor.cs
@@ -121,6 +121,20 @@ public partial class BitPivotDemo
                     Description = "The content of the pivot item, It can be Any custom tag or a text (alias of ChildContent).",
                 },
                 new()
+                {
+                    Name = "BodyClass",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "The custom css class of the content of the pivot item.",
+                },
+                new()
+                {
+                    Name = "BodyStyle",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "The custom css style of the content of the pivot item.",
+                },
+                new()
                 {
                     Name = "ChildContent",
                     Type = "RenderFragment?",
@@ -186,10 +200,10 @@ public partial class BitPivotDemo
                },
                new()
                {
-                   Name = "ContentView",
+                   Name = "Body",
                    Type = "string?",
                    DefaultValue = "null",
-                   Description = "Custom CSS classes/styles for the content view of the BitPivot."
+                   Description = "Custom CSS classes/styles for the items body of the BitPivot."
                },
                new()
                {
@@ -900,7 +914,7 @@ private void TogglePivotItemVisibility()
         border: 1px solid gray;
     }
 
-    .custom-content-view {
+    .custom-body {
         margin-top: 1rem;
         background-color: deepskyblue;
     }
@@ -970,7 +984,7 @@ private void TogglePivotItemVisibility()
     </BitPivotItem>
 </BitPivot>
 
-<BitPivot Classes=""@(new() { ContentView = ""custom-content-view"", SelectedItem = ""custom-selected-item"", Header = ""custom-header"" })"">
+<BitPivot Classes=""@(new() { Body = ""custom-body"", SelectedItem = ""custom-selected-item"", Header = ""custom-header"" })"">
     <BitPivotItem HeaderText=""File"">
         <div style=""margin-top:10px"">
             <h1>Pivot #1</h1>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor.scss
index 796537f5b9..e3bbba7e20 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor.scss
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor.scss
@@ -24,7 +24,7 @@
         border: 1px solid gray;
     }
 
-    .custom-content-view {
+    .custom-body {
         margin-top: 1rem;
         background-color: deepskyblue;
     }