From f28c457eccdd8ed53dfe4cfd33ce31636ed4685d Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Sat, 18 Apr 2026 15:05:21 +0330
Subject: [PATCH 1/5] add missing features to BitPersona #12250

---
 .../Notifications/Persona/BitPersona.razor    |  4 +-
 .../Notifications/Persona/BitPersona.razor.cs | 90 +++++++++++++++----
 .../Notifications/Persona/BitPersona.scss     | 75 +---------------
 .../Persona/BitPersonaCoinShape.cs            | 14 ---
 .../Persona/BitPersonaDemo.razor              | 81 +++++++++++++++--
 .../Persona/BitPersonaDemo.razor.cs           | 69 ++++++++------
 .../Persona/BitPersonaDemo.razor.samples.cs   | 90 +++++++++++++++++--
 7 files changed, 275 insertions(+), 148 deletions(-)
 delete mode 100644 src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersonaCoinShape.cs

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.razor b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.razor
index 716d079478..517dd018af 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.razor
@@ -82,8 +82,10 @@
                                  alt="@ImageAlt"
                                  width="@dimension"
                                  height="@dimension"
+                                 loading="@ImageLoading"
+                                 srcset="@ImageSrcSet"
                                  class="bit-prs-img @Classes?.Image"
-                                 style="display:@(_isLoaded ? "unset" : "none");@Styles?.Image" />
+                                 style="@(_isLoaded ? null : "opacity:0;" + Styles?.Image)" />
                         }
                     }
                 }
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.razor.cs
index 2b195f054a..8f4d4f261b 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.razor.cs
@@ -1,4 +1,6 @@
-namespace Bit.BlazorUI;
+using ErrorEventArgs = Microsoft.AspNetCore.Components.Web.ErrorEventArgs;
+
+namespace Bit.BlazorUI;
 
 /// <summary>
 /// A BitPersona is a visual representation of a person across products, typically showcasing the image that person has chosen to upload themselves. The control can also be used to show that person's online status.
@@ -38,6 +40,13 @@ public partial class BitPersona : BitComponentBase
     /// </summary>
     [Parameter] public RenderFragment? ActionTemplate { get; set; }
 
+    /// <summary>
+    /// If true, automatically generates a coin background color derived from the person's name or initials.
+    /// When set, this takes effect only when <see cref="CoinColor"/> is not explicitly provided.
+    /// </summary>
+    [Parameter, ResetClassBuilder]
+    public bool AutoCoinColor { get; set; }
+
     /// <summary>
     /// Custom CSS classes for different parts of the BitPersona component.
     /// </summary>
@@ -49,12 +58,6 @@ public partial class BitPersona : BitComponentBase
     [Parameter, ResetClassBuilder]
     public BitColor? CoinColor { get; set; }
 
-    /// <summary>
-    /// The shape of the coin.
-    /// </summary>
-    [Parameter, ResetClassBuilder]
-    public BitPersonaCoinShape? CoinShape { get; set; }
-
     /// <summary>
     /// Optional custom persona coin size in pixel.
     /// </summary>
@@ -89,7 +92,8 @@ public partial class BitPersona : BitComponentBase
     /// <summary>
     /// The user's initials to display in the image area when there is no image.
     /// </summary>
-    [Parameter] public string? ImageInitials { get; set; }
+    [Parameter, ResetClassBuilder]
+    public string? ImageInitials { get; set; }
 
     /// <summary>
     /// Optional Custom template for the image overlay.
@@ -101,6 +105,16 @@ public partial class BitPersona : BitComponentBase
     /// </summary>
     [Parameter] public string ImageOverlayText { get; set; } = "Edit image";
 
+    /// <summary>
+    /// Specifies the loading behavior of the image (e.g., "lazy" or "eager").
+    /// </summary>
+    [Parameter] public string? ImageLoading { get; set; }
+
+    /// <summary>
+    /// A set of image source URLs for different display densities or sizes (maps to the img srcset attribute).
+    /// </summary>
+    [Parameter] public string? ImageSrcSet { get; set; }
+
     /// <summary>
     /// Url to the image to use, should be a square aspect ratio and big enough to fit in the image area.
     /// </summary>
@@ -119,6 +133,16 @@ public partial class BitPersona : BitComponentBase
     [Parameter, ResetClassBuilder]
     public EventCallback<MouseEventArgs> OnImageClick { get; set; }
 
+    /// <summary>
+    /// Callback for when the image fails to load.
+    /// </summary>
+    [Parameter] public EventCallback<ErrorEventArgs> OnImageError { get; set; }
+
+    /// <summary>
+    /// Callback for when the image successfully loads.
+    /// </summary>
+    [Parameter] public EventCallback<ProgressEventArgs> OnImageLoad { get; set; }
+
     /// <summary>
     /// Optional text to display, usually a custom message set.
     /// The optional text will only be shown when using size100.
@@ -184,7 +208,8 @@ public partial class BitPersona : BitComponentBase
     /// <summary>
     /// Primary text to display, usually the name of the person.
     /// </summary>
-    [Parameter] public string? PrimaryText { get; set; }
+    [Parameter, ResetClassBuilder]
+    public string? PrimaryText { get; set; }
 
     /// <summary>
     /// Custom primary text template.
@@ -206,6 +231,12 @@ public partial class BitPersona : BitComponentBase
     /// </summary>
     [Parameter] public bool ShowInitialsUntilImageLoads { get; set; }
 
+    /// <summary>
+    /// If true, renders the coin with a square shape instead of the default circular shape.
+    /// </summary>
+    [Parameter, ResetClassBuilder]
+    public bool Squared { get; set; }
+
     /// <summary>
     /// If true, show the special coin for unknown persona. 
     /// It has '?' in place of initials, with static font and background colors.
@@ -308,15 +339,11 @@ protected override void RegisterCssClasses()
             BitColor.PrimaryBorder => "bit-prs-pbr",
             BitColor.SecondaryBorder => "bit-prs-sbr",
             BitColor.TertiaryBorder => "bit-prs-tbr",
+            null when AutoCoinColor => GetAutoCoinColorClass(),
             _ => "bit-prs-inf"
         });
 
-        ClassBuilder.Register(() => CoinShape switch
-        {
-            BitPersonaCoinShape.Circular => "bit-prs-crl",
-            BitPersonaCoinShape.Square => "bit-prs-sqr",
-            _ => "bit-prs-crl"
-        });
+        ClassBuilder.Register(() => Squared ? "bit-prs-sqr" : null);
     }
 
     protected override void RegisterCssStyles()
@@ -346,7 +373,7 @@ protected override void RegisterCssStyles()
 
         string? position = null;
         var presentationSize = CoinSize.Value / 3D;
-        if (CoinShape == BitPersonaCoinShape.Square)
+        if (Squared)
         {
             var presentationPosition = presentationSize / 3D;
             position = FormattableString.Invariant($"right:-{presentationPosition}px;bottom:-{presentationPosition}px;");
@@ -387,6 +414,23 @@ protected override void RegisterCssStyles()
         return $"width:{CoinSize.Value}px;";
     }
 
+    private static readonly string[] _autoCoinColorClasses = ["bit-prs-pri", "bit-prs-sec", "bit-prs-ter", "bit-prs-suc", "bit-prs-wrn", "bit-prs-err", "bit-prs-inf"];
+
+    private string GetAutoCoinColorClass()
+    {
+        var text = (ImageInitials.HasValue() ? ImageInitials : PrimaryText)?.Trim() ?? string.Empty;
+        if (text.HasNoValue()) return "bit-prs-inf";
+
+        // Stable DJB2 hash — not affected by .NET's randomized GetHashCode
+        uint hash = 5381;
+        foreach (var c in text)
+        {
+            hash = ((hash << 5) + hash) + c;
+        }
+
+        return _autoCoinColorClasses[hash % (uint)_autoCoinColorClasses.Length];
+    }
+
     private string GetInitials()
     {
         if (ImageInitials.HasValue()) return ImageInitials!;
@@ -440,6 +484,13 @@ private string GetPersonaImageDimension()
         };
     }
 
+    private string? GetImageStyle()
+    {
+        var hidden = _isLoaded ? null : "opacity:0;";
+        var style = $"{hidden}{Styles?.Image}";
+        return style.HasValue() ? style : null;
+    }
+
     private string? GetImageContainerClass()
     {
         var klass = $"{(CoinTemplate is null ? "bit-prs-imc" : null)} {GetCoinClass()} {Classes?.ImageContainer}".Trim();
@@ -463,21 +514,24 @@ private async Task HandleImageClick(MouseEventArgs e)
         await OnImageClick.InvokeAsync(e);
     }
 
-    private void HandleOnError(Microsoft.AspNetCore.Components.Web.ErrorEventArgs e)
+    private async Task HandleOnError(ErrorEventArgs e)
     {
         _hasError = true;
         _isLoaded = true;
+        await OnImageError.InvokeAsync(e);
         StateHasChanged();
     }
 
-    private void HandleOnLoad(ProgressEventArgs e)
+    private async Task HandleOnLoad(ProgressEventArgs e)
     {
         _isLoaded = true;
+        await OnImageLoad.InvokeAsync(e);
         StateHasChanged();
     }
 
     private void OnSetImageUrl()
     {
         _hasError = false;
+        _isLoaded = false;
     }
 }
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.scss b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.scss
index 5bfd5908d1..952331af86 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.scss
@@ -37,6 +37,7 @@
     overflow: hidden;
     font-weight: 600;
     position: relative;
+    border-radius: 50%;
     align-items: center;
     justify-content: center;
     border-width: $shp-border-width;
@@ -54,12 +55,6 @@
     }
 }
 
-.bit-prs-crl {
-    .bit-prs-imc {
-        border-radius: 50%;
-    }
-}
-
 .bit-prs-sqr {
     .bit-prs-imc {
         border-radius: $shp-border-radius;
@@ -85,10 +80,13 @@
 }
 
 .bit-prs-img {
+    top: 0;
+    left: 0;
     opacity: 1;
     width: 100%;
     height: 100%;
     display: block;
+    position: absolute;
     object-fit: cover;
 }
 
@@ -130,7 +128,6 @@
 .bit-prs-ttx,
 .bit-prs-otx {
     overflow: hidden;
-    color: $clr-fg-pri;
     white-space: nowrap;
     text-overflow: ellipsis;
 }
@@ -234,14 +231,6 @@
 }
 
 .bit-prs-s24 {
-    .bit-prs-ima {
-        flex: 0 0 auto;
-        width: spacing(3);
-        height: spacing(3);
-        position: relative;
-        text-align: center;
-    }
-
     .bit-prs-imc {
         aspect-ratio: 1;
         width: spacing(3);
@@ -260,14 +249,6 @@
 }
 
 .bit-prs-s32 {
-    .bit-prs-ima {
-        flex: 0 0 auto;
-        width: spacing(4);
-        height: spacing(4);
-        position: relative;
-        text-align: center;
-    }
-
     .bit-prs-imc {
         aspect-ratio: 1;
         width: spacing(4);
@@ -286,14 +267,6 @@
 }
 
 .bit-prs-s40 {
-    .bit-prs-ima {
-        flex: 0 0 auto;
-        width: spacing(5);
-        height: spacing(5);
-        position: relative;
-        text-align: center;
-    }
-
     .bit-prs-imc {
         aspect-ratio: 1;
         width: spacing(5);
@@ -345,14 +318,6 @@
 }
 
 .bit-prs-s48 {
-    .bit-prs-ima {
-        flex: 0 0 auto;
-        width: spacing(6);
-        height: spacing(6);
-        position: relative;
-        text-align: center;
-    }
-
     .bit-prs-imc {
         aspect-ratio: 1;
         width: spacing(6);
@@ -403,14 +368,6 @@
 }
 
 .bit-prs-s56 {
-    .bit-prs-ima {
-        flex: 0 0 auto;
-        width: spacing(7);
-        height: spacing(7);
-        position: relative;
-        text-align: center;
-    }
-
     .bit-prs-imc {
         aspect-ratio: 1;
         width: spacing(7);
@@ -461,14 +418,6 @@
 }
 
 .bit-prs-s72 {
-    .bit-prs-ima {
-        flex: 0 0 auto;
-        width: spacing(9);
-        height: spacing(9);
-        position: relative;
-        text-align: center;
-    }
-
     .bit-prs-imc {
         aspect-ratio: 1;
         width: spacing(9);
@@ -521,14 +470,6 @@
 }
 
 .bit-prs-s100 {
-    .bit-prs-ima {
-        flex: 0 0 auto;
-        position: relative;
-        text-align: center;
-        width: spacing(12.5);
-        height: spacing(12.5);
-    }
-
     .bit-prs-imc {
         aspect-ratio: 1;
         width: spacing(12.5);
@@ -583,14 +524,6 @@
 }
 
 .bit-prs-s120 {
-    .bit-prs-ima {
-        flex: 0 0 auto;
-        width: spacing(15);
-        position: relative;
-        text-align: center;
-        height: spacing(15);
-    }
-
     .bit-prs-imc {
         aspect-ratio: 1;
         width: spacing(15);
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersonaCoinShape.cs b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersonaCoinShape.cs
deleted file mode 100644
index 7dc54ab1c1..0000000000
--- a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersonaCoinShape.cs
+++ /dev/null
@@ -1,14 +0,0 @@
-namespace Bit.BlazorUI;
-
-public enum BitPersonaCoinShape
-{
-    /// <summary>
-    /// Represents the traditional round shape of a coin.
-    /// </summary>
-    Circular,
-
-    /// <summary>
-    /// Represents a square-shaped coin.
-    /// </summary>
-    Square
-}
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor
index 0bb006dc65..c5b67df988 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor
@@ -125,17 +125,16 @@
                     CoinVariant="BitVariant.Text" />
     </DemoExample>
 
-    <DemoExample Title="Shape" RazorCode="@example4RazorCode" Id="example4">
+    <DemoExample Title="Squared" RazorCode="@example4RazorCode" Id="example4">
         <BitPersona PrimaryText="Saleh Xafan"
-                    SecondaryText="Developer"
+                    SecondaryText="Circle"
                     Size="BitPersonaSize.Size72"
-                    CoinShape="BitPersonaCoinShape.Circular"
                     ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
         <br /><br />
-        <BitPersona PrimaryText="Saleh Xafan"
-                    SecondaryText="Developer"
+        <BitPersona Squared
+                    PrimaryText="Saleh Xafan"
+                    SecondaryText="Square"
                     Size="BitPersonaSize.Size72"
-                    CoinShape="BitPersonaCoinShape.Square"
                     ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
     </DemoExample>
 
@@ -394,7 +393,73 @@
                     ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
     </DemoExample>
 
-    <DemoExample Title="Style &amp; Class" RazorCode="@example12RazorCode" Id="example12">
+    <DemoExample Title="AutoCoinColor" RazorCode="@example12RazorCode" Id="example12">
+        <div>Different people each get a distinct, consistent coin color automatically:</div>
+        <br />
+        <BitPersona AutoCoinColor PrimaryText="Annie Lindqvist" SecondaryText="Software Engineer" Size="BitPersonaSize.Size72" />
+        <br /><br />
+        <BitPersona AutoCoinColor PrimaryText="Saleh Khafan" SecondaryText="Developer" Size="BitPersonaSize.Size72" />
+        <br /><br />
+        <BitPersona AutoCoinColor PrimaryText="Ted Randall" SecondaryText="Designer" Size="BitPersonaSize.Size72" />
+        <br /><br />
+        <BitPersona AutoCoinColor PrimaryText="Carlos Slattery" SecondaryText="Manager" Size="BitPersonaSize.Size72" />
+        <br /><br />
+        <BitPersona AutoCoinColor PrimaryText="Elvia Atkins" SecondaryText="QA Engineer" Size="BitPersonaSize.Size72" />
+        <br /><br /><br /><br />
+        <div>Custom ImageInitials also influence the generated color:</div>
+        <br />
+        <BitPersona AutoCoinColor ImageInitials="ZZ" PrimaryText="Annie Lindqvist" SecondaryText="Software Engineer" Size="BitPersonaSize.Size72" />
+        <br /><br /><br /><br />
+        <div>CoinColor takes precedence over AutoCoinColor when set explicitly:</div>
+        <br />
+        <BitPersona AutoCoinColor CoinColor="BitColor.Success" PrimaryText="Annie Lindqvist" SecondaryText="Always green" Size="BitPersonaSize.Size72" />
+    </DemoExample>
+
+    <DemoExample Title="Image Events" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
+        <div>OnImageLoad — callback invoked when the image loads successfully:</div>
+        <br />
+        <BitPersona PrimaryText="Annie Lindqvist"
+                    SecondaryText="Software Engineer"
+                    Size="BitPersonaSize.Size72"
+                    OnImageLoad="() => imageLoadCount++"
+                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
+        <p>Image Load Count: @imageLoadCount</p>
+        <br /><br /><br /><br />
+        <div>OnImageError — callback invoked when the image fails to load:</div>
+        <br />
+        <BitPersona PrimaryText="Annie Lindqvist"
+                    SecondaryText="Software Engineer"
+                    Size="BitPersonaSize.Size72"
+                    OnImageError="() => imageErrorCount++"
+                    ImageUrl="invalid-image-url" />
+        <p>Image Error Count: @imageErrorCount</p>
+    </DemoExample>
+
+    <DemoExample Title="Image Loading" RazorCode="@example14RazorCode" Id="example14">
+        <div>ImageLoading controls when the browser fetches the image (maps to the HTML <b>loading</b> attribute):</div>
+        <br />
+        <BitPersona PrimaryText="Annie Lindqvist"
+                    SecondaryText="Lazy loaded"
+                    Size="BitPersonaSize.Size72"
+                    ImageLoading="lazy"
+                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
+        <br /><br />
+        <BitPersona PrimaryText="Annie Lindqvist"
+                    SecondaryText="Eagerly loaded"
+                    Size="BitPersonaSize.Size72"
+                    ImageLoading="eager"
+                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
+        <br /><br /><br /><br />
+        <div>ImageSrcSet provides alternate image sources for different screen densities (maps to the HTML <b>srcset</b> attribute):</div>
+        <br />
+        <BitPersona PrimaryText="Annie Lindqvist"
+                    SecondaryText="Software Engineer"
+                    Size="BitPersonaSize.Size72"
+                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png"
+                    ImageSrcSet="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png 1x, /_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png 2x" />
+    </DemoExample>
+
+    <DemoExample Title="Style &amp; Class" RazorCode="@example15RazorCode" Id="example15">
         <div>Component's Style & Class:</div><br />
         <BitPersona PrimaryText="Saleh Khafan"
                     Size="BitPersonaSize.Size72"
@@ -416,7 +481,7 @@
                                                PrimaryTextContainer = "custom-primary-text" })" />
     </DemoExample>
 
-    <DemoExample Title="RTL" RazorCode="@example13RazorCode" Id="example13">
+    <DemoExample Title="RTL" RazorCode="@example16RazorCode" Id="example16">
         <div dir="rtl">
             <BitPersona Dir="BitDir.Rtl"
                         PrimaryText="صالح یوسف نژاد"
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor.cs
index 0dba191589..24d00bbdd4 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor.cs
@@ -35,6 +35,13 @@ public partial class BitPersonaDemo
             Description = "Optional Custom template for the custom action element.",
         },
         new()
+        {
+            Name = "AutoCoinColor",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "If true, automatically generates a stable coin background color derived from the person's name or initials. Only takes effect when CoinColor is not explicitly set.",
+        },
+        new()
         {
             Name = "Classes",
             Type = "BitPersonaClassStyles",
@@ -54,12 +61,10 @@ public partial class BitPersonaDemo
         },
         new()
         {
-            Name = "CoinShape",
-            Type = "BitPersonaCoinShape?",
-            DefaultValue = "null",
-            Description = "The shape of the coin.",
-            LinkType = LinkType.Link,
-            Href = "#shape-enum",
+            Name = "Squared",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "If true, renders the coin with a square shape instead of the default circular shape.",
         },
         new()
         {
@@ -106,6 +111,13 @@ public partial class BitPersonaDemo
             Description = "The user's initials to display in the image area when there is no image.",
         },
         new()
+        {
+            Name = "ImageLoading",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "Specifies the loading behavior of the image. Maps to the HTML loading attribute (e.g., \"lazy\" or \"eager\").",
+        },
+        new()
         {
             Name = "ImageOverlayTemplate",
             Type = "RenderFragment?",
@@ -117,7 +129,14 @@ public partial class BitPersonaDemo
             Name = "ImageOverlayText",
             Type = "string?",
             DefaultValue = "Edit image",
-            Description = "The user's initials to display in the image area when there is no image.",
+            Description = "The text of the image overlay.",
+        },
+        new()
+        {
+            Name = "ImageSrcSet",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "A set of image source URLs for different display densities or sizes. Maps to the HTML img srcset attribute.",
         },
         new()
         {
@@ -141,6 +160,20 @@ public partial class BitPersonaDemo
             Description = "Callback for when the image clicked.",
         },
         new()
+        {
+            Name = "OnImageError",
+            Type = "EventCallback<ErrorEventArgs>",
+            DefaultValue = "null",
+            Description = "Callback for when the image fails to load.",
+        },
+        new()
+        {
+            Name = "OnImageLoad",
+            Type = "EventCallback<ProgressEventArgs>",
+            DefaultValue = "null",
+            Description = "Callback for when the image successfully loads.",
+        },
+        new()
         {
             Name = "OptionalText",
             Type = "string?",
@@ -563,26 +596,6 @@ public partial class BitPersonaDemo
             ]
         },
         new()
-        {
-            Id = "shape-enum",
-            Name = "BitPersonaCoinShape",
-            Items =
-            [
-                new()
-                {
-                    Name = "Circular",
-                    Description = "Represents the traditional round shape of a coin.",
-                    Value = "",
-                },
-                new()
-                {
-                    Name = "Square",
-                    Description = "Represents a square-shaped coin.",
-                    Value = "",
-                }
-            ]
-        },
-        new()
         {
             Id = "color-enum",
             Name = "BitColor",
@@ -726,6 +739,8 @@ public partial class BitPersonaDemo
 
     private int imageClickCount = 0;
     private int actionClickCount = 0;
+    private int imageLoadCount = 0;
+    private int imageErrorCount = 0;
     private bool isDetailsShown = true;
 
     private readonly Dictionary<BitPersonaPresence, BitIconInfo> _icons = new()
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor.samples.cs
index 49fc6f0af0..f11bcd1e3a 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor.samples.cs
@@ -105,16 +105,15 @@ public partial class BitPersonaDemo
 
     private readonly string example4RazorCode = @"
 <BitPersona PrimaryText=""Saleh Xafan""
-            SecondaryText=""Developer""
+            SecondaryText=""Circle""
             Size=""BitPersonaSize.Size72""
-            CoinShape=""BitPersonaCoinShape.Circular""
-            ImageUrl=""/images/persona/persona-female.png"" />
+            ImageUrl=""/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png"" />
 
-<BitPersona PrimaryText=""Saleh Xafan""
-            SecondaryText=""Developer""
+<BitPersona Squared
+            PrimaryText=""Saleh Xafan""
+            SecondaryText=""Square""
             Size=""BitPersonaSize.Size72""
-            CoinShape=""BitPersonaCoinShape.Square""
-            ImageUrl=""/images/persona/persona-female.png"" />";
+            ImageUrl=""/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png"" />";
 
     private readonly string example5RazorCode = @"
 <BitPersona PrimaryText=""Annie Lindqvist""
@@ -362,8 +361,81 @@ Edit image
     {BitPersonaPresence.Blocked, BitIconInfo.Bi(""ban"")},
     {BitPersonaPresence.Busy, BitIconInfo.Bi(""exclamation-circle-fill"")}
 };";
-
     private readonly string example12RazorCode = @"
+<BitPersona AutoCoinColor
+            PrimaryText=""Annie Lindqvist""
+            SecondaryText=""Software Engineer""
+            Size=""BitPersonaSize.Size72"" />
+
+<BitPersona AutoCoinColor
+            PrimaryText=""Saleh Khafan""
+            SecondaryText=""Developer""
+            Size=""BitPersonaSize.Size72"" />
+
+<BitPersona AutoCoinColor
+            PrimaryText=""Ted Randall""
+            SecondaryText=""Designer""
+            Size=""BitPersonaSize.Size72"" />
+
+<BitPersona AutoCoinColor
+            PrimaryText=""Carlos Slattery""
+            SecondaryText=""Manager""
+            Size=""BitPersonaSize.Size72"" />
+
+<BitPersona AutoCoinColor
+            PrimaryText=""Elvia Atkins""
+            SecondaryText=""QA Engineer""
+            Size=""BitPersonaSize.Size72"" />
+
+<BitPersona AutoCoinColor
+            ImageInitials=""ZZ""
+            PrimaryText=""Annie Lindqvist""
+            SecondaryText=""Software Engineer""
+            Size=""BitPersonaSize.Size72"" />
+
+<BitPersona AutoCoinColor
+            CoinColor=""BitColor.Success""
+            PrimaryText=""Annie Lindqvist""
+            SecondaryText=""Always green""
+            Size=""BitPersonaSize.Size72"" />";
+
+    private readonly string example13RazorCode = @"
+<BitPersona PrimaryText=""Annie Lindqvist""
+            SecondaryText=""Software Engineer""
+            Size=""BitPersonaSize.Size72""
+            OnImageLoad=""() => imageLoadCount++""
+            ImageUrl=""/images/persona/persona-female.png"" />
+<p>Image Load Count: @imageLoadCount</p>
+
+<BitPersona PrimaryText=""Annie Lindqvist""
+            SecondaryText=""Software Engineer""
+            Size=""BitPersonaSize.Size72""
+            OnImageError=""() => imageErrorCount++""
+            ImageUrl=""invalid-image-url"" />
+<p>Image Error Count: @imageErrorCount</p>";
+    private readonly string example13CsharpCode = @"
+private int imageLoadCount = 0;
+private int imageErrorCount = 0;";
+
+    private readonly string example14RazorCode = @"
+<BitPersona PrimaryText=""Annie Lindqvist""
+            SecondaryText=""Lazy loaded""
+            Size=""BitPersonaSize.Size72""
+            ImageLoading=""lazy""
+            ImageUrl=""/images/persona/persona-female.png"" />
+
+<BitPersona PrimaryText=""Annie Lindqvist""
+            SecondaryText=""Eagerly loaded""
+            Size=""BitPersonaSize.Size72""
+            ImageLoading=""eager""
+            ImageUrl=""/images/persona/persona-female.png"" />
+
+<BitPersona PrimaryText=""Annie Lindqvist""
+            SecondaryText=""Software Engineer""
+            Size=""BitPersonaSize.Size72""
+            ImageUrl=""/images/persona/persona-female.png""
+            ImageSrcSet=""/images/persona/persona-female.png 1x, /images/persona/persona-female.png 2x"" />";
+    private readonly string example15RazorCode = @"
 <style>
     .custom-class {
         padding: 1rem;
@@ -402,7 +474,7 @@ Edit image
             Classes=""@(new() { ImageContainer = ""custom-img-container"",
                                PrimaryTextContainer = ""custom-primary-text"" })"" />";
 
-    private readonly string example13RazorCode = @"
+    private readonly string example16RazorCode = @"
 <BitPersona Dir=""BitDir.Rtl""
             PrimaryText=""صالح یوسف نژاد""
             SecondaryText=""مهندس نرم افزار""

From 0a141ef6915c2101ab755776e33349e9f8de6a07 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Sat, 18 Apr 2026 15:13:42 +0330
Subject: [PATCH 2/5] add missing tests

---
 .../Notifications/Persona/BitPersonaTests.cs  | 218 ++++++++++++++++++
 1 file changed, 218 insertions(+)

diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Notifications/Persona/BitPersonaTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Notifications/Persona/BitPersonaTests.cs
index cd73b7a3ca..aa4efebd7a 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Notifications/Persona/BitPersonaTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Notifications/Persona/BitPersonaTests.cs
@@ -1,8 +1,10 @@
 using System.Collections.Generic;
+using System.Linq;
 using Bunit;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 using Microsoft.VisualStudio.TestTools.UnitTesting;
+using ErrorEventArgs = Microsoft.AspNetCore.Components.Web.ErrorEventArgs;
 
 namespace Bit.BlazorUI.Tests.Components.Notifications.Persona;
 
@@ -277,4 +279,220 @@ public void BitPersonaShouldRenderNoPresenceIconWhenNoMappingExists()
         // no presence icon should be rendered.
         Assert.IsEmpty(iconElements);
     }
+
+    [TestMethod]
+    public void BitPersonaSquaredShouldApplySquaredClass()
+    {
+        var component = RenderComponent<BitPersona>(parameters =>
+        {
+            parameters.Add(p => p.Squared, true);
+        });
+
+        var persona = component.Find(".bit-prs");
+
+        Assert.IsTrue(persona.ClassList.Contains("bit-prs-sqr"));
+        Assert.IsFalse(persona.ClassList.Contains("bit-prs-crl"));
+    }
+
+    [TestMethod]
+    public void BitPersonaDefaultShapeShouldBeCircular()
+    {
+        var component = RenderComponent<BitPersona>();
+
+        var persona = component.Find(".bit-prs");
+
+        Assert.IsTrue(persona.ClassList.Contains("bit-prs-crl"));
+        Assert.IsFalse(persona.ClassList.Contains("bit-prs-sqr"));
+    }
+
+    [TestMethod]
+    public void BitPersonaAutoCoinColorShouldApplyAColorClassFromKnownPalette()
+    {
+        var colorClasses = new[] { "bit-prs-pri", "bit-prs-sec", "bit-prs-ter", "bit-prs-suc", "bit-prs-wrn", "bit-prs-err", "bit-prs-inf" };
+
+        var component = RenderComponent<BitPersona>(parameters =>
+        {
+            parameters.Add(p => p.AutoCoinColor, true);
+            parameters.Add(p => p.PrimaryText, "Annie Lindqvist");
+        });
+
+        var persona = component.Find(".bit-prs");
+
+        Assert.IsTrue(colorClasses.Any(c => persona.ClassList.Contains(c)));
+    }
+
+    [TestMethod]
+    public void BitPersonaAutoCoinColorShouldBeDeterministicForSameName()
+    {
+        var colorClasses = new[] { "bit-prs-pri", "bit-prs-sec", "bit-prs-ter", "bit-prs-suc", "bit-prs-wrn", "bit-prs-err", "bit-prs-inf" };
+
+        var component1 = RenderComponent<BitPersona>(parameters =>
+        {
+            parameters.Add(p => p.AutoCoinColor, true);
+            parameters.Add(p => p.PrimaryText, "Saleh Khafan");
+        });
+
+        var component2 = RenderComponent<BitPersona>(parameters =>
+        {
+            parameters.Add(p => p.AutoCoinColor, true);
+            parameters.Add(p => p.PrimaryText, "Saleh Khafan");
+        });
+
+        var class1 = colorClasses.First(c => component1.Find(".bit-prs").ClassList.Contains(c));
+        var class2 = colorClasses.First(c => component2.Find(".bit-prs").ClassList.Contains(c));
+
+        Assert.AreEqual(class1, class2);
+    }
+
+    [TestMethod]
+    public void BitPersonaCoinColorShouldTakePrecedenceOverAutoCoinColor()
+    {
+        var component = RenderComponent<BitPersona>(parameters =>
+        {
+            parameters.Add(p => p.AutoCoinColor, true);
+            parameters.Add(p => p.CoinColor, BitColor.Warning);
+            parameters.Add(p => p.PrimaryText, "Annie Lindqvist");
+        });
+
+        var persona = component.Find(".bit-prs");
+
+        Assert.IsTrue(persona.ClassList.Contains("bit-prs-wrn"));
+    }
+
+    [TestMethod,
+        DataRow("lazy"),
+        DataRow("eager")
+    ]
+    public void BitPersonaImageLoadingAttributeShouldBeSet(string loading)
+    {
+        var component = RenderComponent<BitPersona>(parameters =>
+        {
+            parameters.Add(p => p.ImageUrl, "some-image.png");
+            parameters.Add(p => p.ImageLoading, loading);
+        });
+
+        var img = component.Find(".bit-prs-img");
+
+        Assert.AreEqual(loading, img.GetAttribute("loading"));
+    }
+
+    [TestMethod]
+    public void BitPersonaImageSrcSetAttributeShouldBeSet()
+    {
+        var srcSet = "img-1x.png 1x, img-2x.png 2x";
+
+        var component = RenderComponent<BitPersona>(parameters =>
+        {
+            parameters.Add(p => p.ImageUrl, "some-image.png");
+            parameters.Add(p => p.ImageSrcSet, srcSet);
+        });
+
+        var img = component.Find(".bit-prs-img");
+
+        Assert.AreEqual(srcSet, img.GetAttribute("srcset"));
+    }
+
+    [TestMethod]
+    public void BitPersonaImageShouldBeHiddenUntilLoaded()
+    {
+        var component = RenderComponent<BitPersona>(parameters =>
+        {
+            parameters.Add(p => p.ImageUrl, "some-image.png");
+        });
+
+        var img = component.Find(".bit-prs-img");
+        Assert.IsTrue(img.GetAttribute("style")?.Contains("opacity:0") ?? false);
+
+        img.TriggerEvent("onload", new ProgressEventArgs());
+
+        img = component.Find(".bit-prs-img");
+        Assert.IsFalse(img.GetAttribute("style")?.Contains("opacity:0") ?? false);
+    }
+
+    [TestMethod]
+    public void BitPersonaImageShouldBeHiddenAgainWhenImageUrlChanges()
+    {
+        var component = RenderComponent<BitPersona>(parameters =>
+        {
+            parameters.Add(p => p.ImageUrl, "image-1.png");
+        });
+
+        component.Find(".bit-prs-img").TriggerEvent("onload", new ProgressEventArgs());
+
+        Assert.IsFalse(component.Find(".bit-prs-img").GetAttribute("style")?.Contains("opacity:0") ?? false);
+
+        component.SetParametersAndRender(parameters =>
+        {
+            parameters.Add(p => p.ImageUrl, "image-2.png");
+        });
+
+        Assert.IsTrue(component.Find(".bit-prs-img").GetAttribute("style")?.Contains("opacity:0") ?? false);
+    }
+
+    [TestMethod]
+    public void BitPersonaOnImageLoadShouldBeInvoked()
+    {
+        var loaded = false;
+
+        var component = RenderComponent<BitPersona>(parameters =>
+        {
+            parameters.Add(p => p.ImageUrl, "some-image.png");
+            parameters.Add(p => p.OnImageLoad, EventCallback.Factory.Create<ProgressEventArgs>(this, _ => loaded = true));
+        });
+
+        component.Find(".bit-prs-img").TriggerEvent("onload", new ProgressEventArgs());
+
+        Assert.IsTrue(loaded);
+    }
+
+    [TestMethod]
+    public void BitPersonaOnImageErrorShouldBeInvoked()
+    {
+        var errored = false;
+
+        var component = RenderComponent<BitPersona>(parameters =>
+        {
+            parameters.Add(p => p.ImageUrl, "invalid-url.png");
+            parameters.Add(p => p.OnImageError, EventCallback.Factory.Create<ErrorEventArgs>(this, _ => errored = true));
+        });
+
+        component.Find(".bit-prs-img").TriggerEvent("onerror", new ErrorEventArgs());
+
+        Assert.IsTrue(errored);
+    }
+
+    [TestMethod]
+    public void BitPersonaOnImageErrorShouldFallbackToInitials()
+    {
+        var component = RenderComponent<BitPersona>(parameters =>
+        {
+            parameters.Add(p => p.PrimaryText, "Annie Lindqvist");
+            parameters.Add(p => p.ImageUrl, "invalid.png");
+        });
+
+        Assert.IsNotNull(component.Find(".bit-prs-img"));
+        Assert.IsEmpty(component.FindAll(".bit-prs-ini"));
+
+        component.Find(".bit-prs-img").TriggerEvent("onerror", new ErrorEventArgs());
+
+        Assert.IsEmpty(component.FindAll(".bit-prs-img"));
+        Assert.IsNotEmpty(component.FindAll(".bit-prs-ini"));
+    }
+
+    [TestMethod]
+    public void BitPersonaShowInitialsUntilImageLoadsShouldShowInitialsWhileLoading()
+    {
+        var component = RenderComponent<BitPersona>(parameters =>
+        {
+            parameters.Add(p => p.PrimaryText, "Annie Lindqvist");
+            parameters.Add(p => p.ImageUrl, "some-image.png");
+            parameters.Add(p => p.ShowInitialsUntilImageLoads, true);
+        });
+
+        Assert.IsNotEmpty(component.FindAll(".bit-prs-ini"));
+
+        component.Find(".bit-prs-img").TriggerEvent("onload", new ProgressEventArgs());
+
+        Assert.IsEmpty(component.FindAll(".bit-prs-ini"));
+    }
 }

From d9db94dcd00d4641847503d262e4c496373fe742 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Sun, 19 Apr 2026 11:02:57 +0330
Subject: [PATCH 3/5] resovle review comments

---
 .../{Utilities/Image => }/BitImageLoading.cs  |  0
 .../Notifications/Persona/BitPersona.razor    |  4 +--
 .../Notifications/Persona/BitPersona.razor.cs | 25 ++++++++---------
 .../Notifications/Persona/BitPersona.scss     |  2 ++
 .../Persona/BitPersonaDemo.razor              |  4 +--
 .../Persona/BitPersonaDemo.razor.cs           | 27 +++++++++++++++++--
 6 files changed, 42 insertions(+), 20 deletions(-)
 rename src/BlazorUI/Bit.BlazorUI/Components/{Utilities/Image => }/BitImageLoading.cs (100%)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Image/BitImageLoading.cs b/src/BlazorUI/Bit.BlazorUI/Components/BitImageLoading.cs
similarity index 100%
rename from src/BlazorUI/Bit.BlazorUI/Components/Utilities/Image/BitImageLoading.cs
rename to src/BlazorUI/Bit.BlazorUI/Components/BitImageLoading.cs
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.razor b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.razor
index 517dd018af..d965525d80 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.razor
@@ -82,10 +82,10 @@
                                  alt="@ImageAlt"
                                  width="@dimension"
                                  height="@dimension"
-                                 loading="@ImageLoading"
                                  srcset="@ImageSrcSet"
                                  class="bit-prs-img @Classes?.Image"
-                                 style="@(_isLoaded ? null : "opacity:0;" + Styles?.Image)" />
+                                 loading="@ImageLoading?.ToString().ToLower()"
+                                 style="@($"{(_isLoaded ? null : "opacity:0;")}{Styles?.Image}")" />
                         }
                     }
                 }
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.razor.cs
index 8f4d4f261b..620016c541 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.razor.cs
@@ -95,6 +95,11 @@ public partial class BitPersona : BitComponentBase
     [Parameter, ResetClassBuilder]
     public string? ImageInitials { get; set; }
 
+    /// <summary>
+    /// Specifies the loading behavior of the image (e.g., "lazy" or "eager").
+    /// </summary>
+    [Parameter] public BitImageLoading? ImageLoading { get; set; }
+
     /// <summary>
     /// Optional Custom template for the image overlay.
     /// </summary>
@@ -105,11 +110,6 @@ public partial class BitPersona : BitComponentBase
     /// </summary>
     [Parameter] public string ImageOverlayText { get; set; } = "Edit image";
 
-    /// <summary>
-    /// Specifies the loading behavior of the image (e.g., "lazy" or "eager").
-    /// </summary>
-    [Parameter] public string? ImageLoading { get; set; }
-
     /// <summary>
     /// A set of image source URLs for different display densities or sizes (maps to the img srcset attribute).
     /// </summary>
@@ -484,13 +484,6 @@ private string GetPersonaImageDimension()
         };
     }
 
-    private string? GetImageStyle()
-    {
-        var hidden = _isLoaded ? null : "opacity:0;";
-        var style = $"{hidden}{Styles?.Image}";
-        return style.HasValue() ? style : null;
-    }
-
     private string? GetImageContainerClass()
     {
         var klass = $"{(CoinTemplate is null ? "bit-prs-imc" : null)} {GetCoinClass()} {Classes?.ImageContainer}".Trim();
@@ -518,15 +511,19 @@ private async Task HandleOnError(ErrorEventArgs e)
     {
         _hasError = true;
         _isLoaded = true;
+        
+        await InvokeAsync(StateHasChanged);
+
         await OnImageError.InvokeAsync(e);
-        StateHasChanged();
     }
 
     private async Task HandleOnLoad(ProgressEventArgs e)
     {
         _isLoaded = true;
+        
+        await InvokeAsync(StateHasChanged);
+
         await OnImageLoad.InvokeAsync(e);
-        StateHasChanged();
     }
 
     private void OnSetImageUrl()
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.scss b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.scss
index 952331af86..14847f3851 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.scss
@@ -62,6 +62,7 @@
 }
 
 .bit-prs-imo {
+    z-index: 1;
     width: 100%;
     height: 100%;
     display: none;
@@ -83,6 +84,7 @@
     top: 0;
     left: 0;
     opacity: 1;
+    z-index: 1;
     width: 100%;
     height: 100%;
     display: block;
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor
index c5b67df988..a92cfecbc0 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor
@@ -441,13 +441,13 @@
         <BitPersona PrimaryText="Annie Lindqvist"
                     SecondaryText="Lazy loaded"
                     Size="BitPersonaSize.Size72"
-                    ImageLoading="lazy"
+                    ImageLoading="BitImageLoading.Lazy"
                     ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
         <br /><br />
         <BitPersona PrimaryText="Annie Lindqvist"
                     SecondaryText="Eagerly loaded"
                     Size="BitPersonaSize.Size72"
-                    ImageLoading="eager"
+                    ImageLoading="BitImageLoading.Eager"
                     ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
         <br /><br /><br /><br />
         <div>ImageSrcSet provides alternate image sources for different screen densities (maps to the HTML <b>srcset</b> attribute):</div>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor.cs
index 24d00bbdd4..8880a4b717 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor.cs
@@ -113,9 +113,11 @@ public partial class BitPersonaDemo
         new()
         {
             Name = "ImageLoading",
-            Type = "string?",
+            Type = "BitImageLoading?",
             DefaultValue = "null",
             Description = "Specifies the loading behavior of the image. Maps to the HTML loading attribute (e.g., \"lazy\" or \"eager\").",
+            LinkType = LinkType.Link,
+            Href = "#image-loading"
         },
         new()
         {
@@ -127,7 +129,7 @@ public partial class BitPersonaDemo
         new()
         {
             Name = "ImageOverlayText",
-            Type = "string?",
+            Type = "string",
             DefaultValue = "Edit image",
             Description = "The text of the image overlay.",
         },
@@ -733,6 +735,27 @@ public partial class BitPersonaDemo
                 },
             ]
         },
+        new()
+        {
+            Id = "image-loading",
+            Name = "BitImageLoading",
+            Description = "Represents the img loading attribute values explained here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading",
+            Items =
+            [
+                new()
+                {
+                    Name= "Eager",
+                    Description="The default behavior, eager tells the browser to load the image as soon as the img element is processed.",
+                    Value="0",
+                },
+                new()
+                {
+                    Name= "Lazy",
+                    Description="Tells the user agent to hold off on loading the image until the browser estimates that it will be needed imminently.",
+                    Value="1",
+                }
+            ]
+        },
     ];
 
 

From 439ca02eb31a1cf8e6e0ffbc3bfaeec54b259ffc Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Sun, 19 Apr 2026 12:06:47 +0330
Subject: [PATCH 4/5] resovle review comments II

---
 .../Notifications/Persona/BitPersona.razor.cs |  14 +-
 .../Notifications/Persona/BitPersona.scss     |  60 ++--
 .../Timeline/_BitTimelineCustomDemo.razor     |   2 +-
 .../_BitTimelineCustomDemo.razor.samples.cs   |   2 +-
 .../Lists/Timeline/_BitTimelineItemDemo.razor |   2 +-
 .../_BitTimelineItemDemo.razor.samples.cs     |   4 +-
 .../Timeline/_BitTimelineOptionDemo.razor     |   4 +-
 .../Timeline/_BitTimelineOptionDemo.razor.cs  |   6 +-
 .../Persona/BitPersonaDemo.razor              | 266 ++++++++---------
 .../Persona/BitPersonaDemo.razor.samples.cs   | 273 +++++++++---------
 .../Progress/Shimmer/BitShimmerDemo.razor     |   4 +-
 .../Progress/Shimmer/BitShimmerDemo.razor.cs  |   2 +-
 .../Notifications/Persona/BitPersonaTests.cs  |  17 +-
 13 files changed, 321 insertions(+), 335 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.razor.cs
index 620016c541..46fed1e498 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.razor.cs
@@ -507,28 +507,30 @@ private async Task HandleImageClick(MouseEventArgs e)
         await OnImageClick.InvokeAsync(e);
     }
 
-    private async Task HandleOnError(ErrorEventArgs e)
+    private void HandleOnError(ErrorEventArgs e)
     {
         _hasError = true;
         _isLoaded = true;
         
-        await InvokeAsync(StateHasChanged);
+        StateHasChanged();
 
-        await OnImageError.InvokeAsync(e);
+        OnImageError.InvokeAsync(e);
     }
 
-    private async Task HandleOnLoad(ProgressEventArgs e)
+    private void HandleOnLoad(ProgressEventArgs e)
     {
         _isLoaded = true;
         
-        await InvokeAsync(StateHasChanged);
+        StateHasChanged();
 
-        await OnImageLoad.InvokeAsync(e);
+        OnImageLoad.InvokeAsync(e);
     }
 
     private void OnSetImageUrl()
     {
         _hasError = false;
         _isLoaded = false;
+
+        StateHasChanged();
     }
 }
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.scss b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.scss
index 14847f3851..757c889870 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.scss
@@ -62,7 +62,7 @@
 }
 
 .bit-prs-imo {
-    z-index: 1;
+    z-index: 2;
     width: 100%;
     height: 100%;
     display: none;
@@ -88,12 +88,13 @@
     width: 100%;
     height: 100%;
     display: block;
-    position: absolute;
     object-fit: cover;
+    position: absolute;
 }
 
 .bit-prs-pre {
     top: auto;
+    z-index: 2;
     display: flex;
     width: spacing(1);
     height: spacing(1);
@@ -137,6 +138,7 @@
 .bit-prs-abt {
     left: 50%;
     bottom: 0;
+    z-index: 1;
     border: none;
     display: flex;
     cursor: pointer;
@@ -209,6 +211,8 @@
 }
 
 .bit-prs-s8 {
+    gap: spacing(1);
+
     .bit-prs-pre {
         position: static;
     }
@@ -217,10 +221,6 @@
         font-size: spacing(1.25);
     }
 
-    .bit-prs-det {
-        padding-inline-start: spacing(1);
-    }
-
     .bit-prs-ptx {
         font-size: spacing(1.5);
     }
@@ -233,16 +233,14 @@
 }
 
 .bit-prs-s24 {
+    gap: spacing(1);
+
     .bit-prs-imc {
         aspect-ratio: 1;
         width: spacing(3);
         font-size: spacing(1.75);
     }
 
-    .bit-prs-det {
-        padding-inline-start: spacing(1);
-    }
-
     .bit-prs-stx,
     .bit-prs-ttx,
     .bit-prs-otx {
@@ -251,16 +249,14 @@
 }
 
 .bit-prs-s32 {
+    gap: spacing(1);
+
     .bit-prs-imc {
         aspect-ratio: 1;
         width: spacing(4);
         font-size: spacing(1.75);
     }
 
-    .bit-prs-det {
-        padding-inline-start: spacing(1);
-    }
-
     .bit-prs-stx,
     .bit-prs-ttx,
     .bit-prs-otx {
@@ -269,6 +265,8 @@
 }
 
 .bit-prs-s40 {
+    gap: spacing(1.5);
+
     .bit-prs-imc {
         aspect-ratio: 1;
         width: spacing(5);
@@ -281,10 +279,6 @@
         font-size: spacing(0.85);
     }
 
-    .bit-prs-det {
-        padding-inline-start: spacing(1.5);
-    }
-
     .bit-prs-ptx {
         font-weight: 400;
         font-size: spacing(1.75);
@@ -320,6 +314,8 @@
 }
 
 .bit-prs-s48 {
+    gap: spacing(1.5);
+
     .bit-prs-imc {
         aspect-ratio: 1;
         width: spacing(6);
@@ -332,10 +328,6 @@
         font-size: spacing(0.85);
     }
 
-    .bit-prs-det {
-        padding-inline-start: spacing(1.5);
-    }
-
     .bit-prs-ptx {
         font-weight: 400;
         font-size: spacing(1.75);
@@ -370,6 +362,8 @@
 }
 
 .bit-prs-s56 {
+    gap: spacing(2);
+
     .bit-prs-imc {
         aspect-ratio: 1;
         width: spacing(7);
@@ -382,10 +376,6 @@
         font-size: spacing(1.25);
     }
 
-    .bit-prs-det {
-        padding-inline-start: spacing(2);
-    }
-
     .bit-prs-ptx {
         font-weight: 400;
         font-size: spacing(2.5);
@@ -420,6 +410,8 @@
 }
 
 .bit-prs-s72 {
+    gap: spacing(2);
+
     .bit-prs-imc {
         aspect-ratio: 1;
         width: spacing(9);
@@ -432,10 +424,6 @@
         font-size: spacing(1.5);
     }
 
-    .bit-prs-det {
-        padding-inline-start: spacing(2);
-    }
-
     .bit-prs-ptx {
         font-weight: 400;
         font-size: spacing(2.5);
@@ -472,6 +460,8 @@
 }
 
 .bit-prs-s100 {
+    gap: spacing(2);
+
     .bit-prs-imc {
         aspect-ratio: 1;
         width: spacing(12.5);
@@ -484,10 +474,6 @@
         font-size: spacing(2);
     }
 
-    .bit-prs-det {
-        padding-inline-start: spacing(2);
-    }
-
     .bit-prs-ptx {
         font-weight: 400;
         font-size: spacing(2.5);
@@ -526,6 +512,8 @@
 }
 
 .bit-prs-s120 {
+    gap: spacing(2);
+
     .bit-prs-imc {
         aspect-ratio: 1;
         width: spacing(15);
@@ -538,10 +526,6 @@
         font-size: spacing(2.5);
     }
 
-    .bit-prs-det {
-        padding-inline-start: spacing(2);
-    }
-
     .bit-prs-ptx {
         font-weight: 400;
         font-size: spacing(2.5);
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razor
index 35f2fb9c90..992d13b4ce 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razor
@@ -225,7 +225,7 @@
     {
         new()
         {
-            FirstContent = (item => @<BitPersona PrimaryText="Annie Lindqvist"
+            FirstContent = (item => @<BitPersona PrimaryText="Xafan Salina"
             Size="@BitPersonaSize.Size32"
             Presence="@BitPersonaPresence.Online"
             ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png" />),
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razor.samples.cs
index 91fed69ec7..976f3436c5 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razor.samples.cs
@@ -199,7 +199,7 @@ public class Event
 [
     new()
     {
-        FirstContent = (item => @<BitPersona PrimaryText=""Annie Lindqvist""
+        FirstContent = (item => @<BitPersona PrimaryText=""Xafan Salina""
                                              Size=""@BitPersonaSize.Size32""
                                              Presence=""@BitPersonaPresence.Online""
                                              ImageUrl=""https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png"" />),
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razor
index 914dde052a..d6b6cb75eb 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razor
@@ -225,7 +225,7 @@
         [
         new()
     {
-        PrimaryContent = (item => @<BitPersona PrimaryText="Annie Lindqvist"
+        PrimaryContent = (item => @<BitPersona PrimaryText="Xafan Salina"
             Size="@BitPersonaSize.Size32"
             Presence="@BitPersonaPresence.Online"
             ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png" />),
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razor.samples.cs
index 989607879f..ef12776e10 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razor.samples.cs
@@ -1,4 +1,4 @@
-namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Lists.Timeline;
+namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Lists.Timeline;
 
 public partial class _BitTimelineItemDemo
 {
@@ -102,7 +102,7 @@ public partial class _BitTimelineItemDemo
 [
     new()
     {
-        PrimaryContent = (item => @<BitPersona PrimaryText=""Annie Lindqvist""
+        PrimaryContent = (item => @<BitPersona PrimaryText=""Xafan Salina""
         Size=""@BitPersonaSize.Size32""
         Presence=""@BitPersonaPresence.Online""
         ImageUrl=""https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png"" />),
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razor
index afcea3917c..1904596ffb 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razor
@@ -122,7 +122,7 @@
     <BitTimeline TItem="BitTimelineOption">
         <BitTimelineOption>
             <PrimaryContent>
-                <BitPersona PrimaryText="Annie Lindqvist"
+                <BitPersona PrimaryText="Xafan Salina"
                             Size="@BitPersonaSize.Size32"
                             Presence="@BitPersonaPresence.Online"
                             ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png" />
@@ -182,7 +182,7 @@
     <BitTimeline TItem="BitTimelineOption" Horizontal>
         <BitTimelineOption>
             <PrimaryContent>
-                <BitPersona PrimaryText="Annie Lindqvist"
+                <BitPersona PrimaryText="Xafan Salina"
                             Size="@BitPersonaSize.Size32"
                             Presence="@BitPersonaPresence.Online"
                             ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png" />
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razor.cs
index c80208a8e0..ed8cb21826 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razor.cs
@@ -1,4 +1,4 @@
-namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Lists.Timeline;
+namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Lists.Timeline;
 
 public partial class _BitTimelineOptionDemo
 {
@@ -105,7 +105,7 @@ public partial class _BitTimelineOptionDemo
 <BitTimeline TItem=""BitTimelineOption"">
     <BitTimelineOption>
         <PrimaryContent>
-            <BitPersona PrimaryText=""Annie Lindqvist""
+            <BitPersona PrimaryText=""Xafan Salina""
                         Size=""@BitPersonaSize.Size32""
                         Presence=""@BitPersonaPresence.Online""
                         ImageUrl=""https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png"" />
@@ -165,7 +165,7 @@ public partial class _BitTimelineOptionDemo
 <BitTimeline TItem=""BitTimelineOption"" Horizontal>
     <BitTimelineOption>
         <PrimaryContent>
-            <BitPersona PrimaryText=""Annie Lindqvist""
+            <BitPersona PrimaryText=""Xafan Salina""
                         Size=""@BitPersonaSize.Size32""
                         Presence=""@BitPersonaPresence.Online""
                         ImageUrl=""https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png"" />
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor
index a92cfecbc0..fe47b16571 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor
@@ -16,7 +16,7 @@
         <BitPersona PrimaryText="Saleh Khafan"
                     Size="BitPersonaSize.Size72" />
         <br /><br />
-        <BitPersona PrimaryText="Annie Lindqvist"
+        <BitPersona PrimaryText="Xafan Salina"
                     Size="BitPersonaSize.Size72"
                     ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
         <br /><br />
@@ -26,53 +26,141 @@
                     Unknown />
     </DemoExample>
 
-    <DemoExample Title="Size" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
+    <DemoExample Title="Variant" RazorCode="@example2RazorCode" Id="example2">
+        <BitPersona PrimaryText="Saleh Xafan"
+                    SecondaryText="Developer"
+                    Size="BitPersonaSize.Size72"
+                    CoinVariant="BitVariant.Fill" />
+        <br /><br />
+        <BitPersona PrimaryText="Saleh Xafan"
+                    SecondaryText="Developer"
+                    Size="BitPersonaSize.Size72"
+                    CoinVariant="BitVariant.Outline" />
+        <br /><br />
+        <BitPersona PrimaryText="Saleh Xafan"
+                    SecondaryText="Developer"
+                    Size="BitPersonaSize.Size72"
+                    CoinVariant="BitVariant.Text" />
+    </DemoExample>
+
+    <DemoExample Title="Squared" RazorCode="@example3RazorCode" Id="example3">
+        <BitPersona PrimaryText="Saleh Xafan"
+                    SecondaryText="Circle"
+                    Size="BitPersonaSize.Size72"
+                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
+        <br /><br />
+        <BitPersona Squared
+                    PrimaryText="Saleh Xafan"
+                    SecondaryText="Square"
+                    Size="BitPersonaSize.Size72"
+                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
+    </DemoExample>
+
+    <DemoExample Title="Presence" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
+        <div>None:</div><br />
+        <BitPersona PrimaryText="Xafan Salina"
+                    SecondaryText="Software Engineer"
+                    Presence="BitPersonaPresence.None"
+                    PresenceIconNames="_iconNames"
+                    Size="BitPersonaSize.Size120"
+                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
+        <br /><br /><br /><br />
+        <div>Offline:</div><br />
+        <BitPersona PrimaryText="Xafan Salina"
+                    SecondaryText="Software Engineer"
+                    Presence="BitPersonaPresence.Offline"
+                    PresenceIconNames="_iconNames"
+                    Size="BitPersonaSize.Size120"
+                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
+        <br /><br /><br /><br />
+        <div>Online:</div><br />
+        <BitPersona PrimaryText="Xafan Salina"
+                    SecondaryText="Software Engineer"
+                    Presence="BitPersonaPresence.Online"
+                    PresenceIconNames="_iconNames"
+                    Size="BitPersonaSize.Size120"
+                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
+        <br /><br /><br /><br />
+        <div>Away:</div><br />
+        <BitPersona PrimaryText="Xafan Salina"
+                    SecondaryText="Software Engineer"
+                    Presence="BitPersonaPresence.Away"
+                    PresenceIconNames="_iconNames"
+                    Size="BitPersonaSize.Size120"
+                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
+        <br /><br /><br /><br />
+        <div>Do not Disturb (Dnd):</div><br />
+        <BitPersona PrimaryText="Xafan Salina"
+                    SecondaryText="Software Engineer"
+                    Presence="BitPersonaPresence.Dnd"
+                    PresenceIconNames="_iconNames"
+                    Size="BitPersonaSize.Size120"
+                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
+        <br /><br /><br /><br />
+        <div>Blocked:</div><br />
+        <BitPersona PrimaryText="Xafan Salina"
+                    SecondaryText="Software Engineer"
+                    Presence="BitPersonaPresence.Blocked"
+                    Size="BitPersonaSize.Size120"
+                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
+        <br /><br /><br /><br />
+        <div>Busy:</div><br />
+        <BitPersona PrimaryText="Xafan Salina"
+                    SecondaryText="Software Engineer"
+                    Presence="BitPersonaPresence.Busy"
+                    PresenceIconNames="_iconNames"
+                    Size="BitPersonaSize.Size120"
+                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
+    </DemoExample>
+
+    <DemoExample Title="Size" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
         <BitCheckbox @bind-Value="isDetailsShown" Label="Include BitPersona details" />
         <br /><br /><br /><br />
         <div>Size 8 Persona:</div><br />
-        <BitPersona PrimaryText="Annie Lindqvist"
+        <BitPersona PrimaryText="Xafan Salina"
                     SecondaryText="Secondary"
                     Size="BitPersonaSize.Size8"
                     HidePersonaDetails="!isDetailsShown"
+                    Presence="BitPersonaPresence.Online"
                     ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
         <br /><br /><br /><br />
         <div>Size 24 Persona:</div><br />
-        <BitPersona PrimaryText="Annie Lindqvist"
+        <BitPersona PrimaryText="Xafan Salina"
                     SecondaryText="Secondary"
                     Size="BitPersonaSize.Size24"
                     HidePersonaDetails="!isDetailsShown"
                     ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
         <br /><br /><br /><br />
         <div>Size 32 Persona:</div><br />
-        <BitPersona PrimaryText="Annie Lindqvist"
+        <BitPersona PrimaryText="Xafan Salina"
                     SecondaryText="Secondary"
                     Size=@BitPersonaSize.Size32
                     HidePersonaDetails="!isDetailsShown"
                     ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
         <br /><br /><br /><br />
         <div>Size 40 Persona:</div><br />
-        <BitPersona PrimaryText="Annie Lindqvist"
+        <BitPersona PrimaryText="Xafan Salina"
                     SecondaryText="Software Engineer"
                     Size="BitPersonaSize.Size40"
                     HidePersonaDetails="!isDetailsShown"
                     ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
         <br /><br /><br /><br />
         <div>Size 48 Persona:</div><br />
-        <BitPersona PrimaryText="Annie Lindqvist"
+        <BitPersona PrimaryText="Xafan Salina"
                     SecondaryText="Software Engineer"
                     Size="BitPersonaSize.Size48"
                     HidePersonaDetails="!isDetailsShown"
                     ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
         <br /><br /><br /><br />
         <div>Size 56 Persona:</div><br />
-        <BitPersona PrimaryText="Annie Lindqvist"
+        <BitPersona PrimaryText="Xafan Salina"
                     SecondaryText="Software Engineer"
                     Size="BitPersonaSize.Size56"
                     HidePersonaDetails="!isDetailsShown"
                     ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
         <br /><br /><br /><br />
         <div>Size 72 Persona:</div><br />
-        <BitPersona PrimaryText="Annie Lindqvist"
+        <BitPersona PrimaryText="Xafan Salina"
                     SecondaryText="Software Engineer"
                     TertiaryText="In a meeting"
                     Size="BitPersonaSize.Size72"
@@ -80,7 +168,7 @@
                     ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
         <br /><br /><br /><br />
         <div>Size 100 Persona:</div><br />
-        <BitPersona PrimaryText="Annie Lindqvist"
+        <BitPersona PrimaryText="Xafan Salina"
                     SecondaryText="Software Engineer"
                     TertiaryText="Off"
                     OptionalText="Available at 4:00pm"
@@ -89,7 +177,7 @@
                     ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
         <br /><br /><br /><br />
         <div>Size 120 Persona:</div><br />
-        <BitPersona PrimaryText="Annie Lindqvist"
+        <BitPersona PrimaryText="Xafan Salina"
                     SecondaryText="Software Engineer"
                     TertiaryText="In a meeting"
                     OptionalText="Available at 4:00pm"
@@ -99,7 +187,7 @@
         <br /><br /><br /><br />
         <div>CoinSize 150:</div><br />
         <BitPersona CoinSize="150"
-                    PrimaryText="Annie Lindqvist"
+                    PrimaryText="Xafan Salina"
                     SecondaryText="Software Engineer"
                     TertiaryText="In a meeting"
                     OptionalText="Available at 4:00pm"
@@ -108,39 +196,23 @@
                     ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
     </DemoExample>
 
-    <DemoExample Title="Variant" RazorCode="@example3RazorCode" Id="example3">
-        <BitPersona PrimaryText="Saleh Xafan"
-                    SecondaryText="Developer"
-                    Size="BitPersonaSize.Size72"
-                    CoinVariant="BitVariant.Fill" />
-        <br /><br />
-        <BitPersona PrimaryText="Saleh Xafan"
-                    SecondaryText="Developer"
-                    Size="BitPersonaSize.Size72"
-                    CoinVariant="BitVariant.Outline" />
-        <br /><br />
-        <BitPersona PrimaryText="Saleh Xafan"
-                    SecondaryText="Developer"
-                    Size="BitPersonaSize.Size72"
-                    CoinVariant="BitVariant.Text" />
-    </DemoExample>
-
-    <DemoExample Title="Squared" RazorCode="@example4RazorCode" Id="example4">
-        <BitPersona PrimaryText="Saleh Xafan"
-                    SecondaryText="Circle"
-                    Size="BitPersonaSize.Size72"
-                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
-        <br /><br />
-        <BitPersona Squared
-                    PrimaryText="Saleh Xafan"
-                    SecondaryText="Square"
-                    Size="BitPersonaSize.Size72"
-                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
+    <DemoExample Title="Reversed" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
+        <div>Adjust the texts position of BitPersona's image to be reversed.</div>
+        <br />
+        <div>
+            <BitPersona Reversed
+                        PrimaryText="Xafan Salina"
+                        SecondaryText="Software Engineer"
+                        Presence="BitPersonaPresence.Online"
+                        PresenceIconNames="_iconNames"
+                        Size="BitPersonaSize.Size120"
+                        ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
+        </div>
     </DemoExample>
 
-    <DemoExample Title="Action" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
+    <DemoExample Title="Action" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
         <div>Custom action can be revealed by hovering on the bottom of the image:</div><br />
-        <BitPersona PrimaryText="Annie Lindqvist"
+        <BitPersona PrimaryText="Xafan Salina"
                     SecondaryText="Software Engineer"
                     TertiaryText="In a meeting"
                     OptionalText="Available at 4:00pm"
@@ -149,10 +221,11 @@
                     OnActionClick="() => actionClickCount++"
                     ActionIconName="@BitIconName.CloudUpload"
                     ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
+        <br />
         <p>Action Click Count: @actionClickCount</p>
         <br /><br /><br /><br />
         <div>Hover over the image to reveal the image click action:</div><br />
-        <BitPersona PrimaryText="Annie Lindqvist"
+        <BitPersona PrimaryText="Xafan Salina"
                     SecondaryText="Software Engineer"
                     TertiaryText="In a meeting"
                     OptionalText="Available at 4:00pm"
@@ -160,10 +233,11 @@
                     Presence="BitPersonaPresence.Online"
                     OnImageClick="() => imageClickCount++"
                     ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
+        <br />
         <p>Image Click Count: @imageClickCount</p>
     </DemoExample>
 
-    <DemoExample Title="Initials" RazorCode="@example6RazorCode" Id="example6">
+    <DemoExample Title="Initials" RazorCode="@example8RazorCode" Id="example8">
         <div>Invalid ImageUrl:</div><br />
         <BitPersona PrimaryText="Saleh Khafan"
                     Size="BitPersonaSize.Size72"
@@ -177,85 +251,13 @@
         <BitPersona Size="BitPersonaSize.Size72" PrimaryText="Saleh Khafan" ImageInitials="S" />
     </DemoExample>
 
-    <DemoExample Title="PersonaPresence" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
-        <div>None:</div><br />
-        <BitPersona PrimaryText="Annie Lindqvist"
-                    SecondaryText="Software Engineer"
-                    Presence="BitPersonaPresence.None"
-                    PresenceIconNames="_iconNames"
-                    Size="BitPersonaSize.Size120"
-                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
-        <br /><br /><br /><br />
-        <div>Offline:</div><br />
-        <BitPersona PrimaryText="Annie Lindqvist"
-                    SecondaryText="Software Engineer"
-                    Presence="BitPersonaPresence.Offline"
-                    PresenceIconNames="_iconNames"
-                    Size="BitPersonaSize.Size120"
-                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
-        <br /><br /><br /><br />
-        <div>Online:</div><br />
-        <BitPersona PrimaryText="Annie Lindqvist"
-                    SecondaryText="Software Engineer"
-                    Presence="BitPersonaPresence.Online"
-                    PresenceIconNames="_iconNames"
-                    Size="BitPersonaSize.Size120"
-                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
-        <br /><br /><br /><br />
-        <div>Away:</div><br />
-        <BitPersona PrimaryText="Annie Lindqvist"
-                    SecondaryText="Software Engineer"
-                    Presence="BitPersonaPresence.Away"
-                    PresenceIconNames="_iconNames"
-                    Size="BitPersonaSize.Size120"
-                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
-        <br /><br /><br /><br />
-        <div>Do not Disturb (Dnd):</div><br />
-        <BitPersona PrimaryText="Annie Lindqvist"
-                    SecondaryText="Software Engineer"
-                    Presence="BitPersonaPresence.Dnd"
-                    PresenceIconNames="_iconNames"
-                    Size="BitPersonaSize.Size120"
-                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
-        <br /><br /><br /><br />
-        <div>Blocked:</div><br />
-        <BitPersona PrimaryText="Annie Lindqvist"
-                    SecondaryText="Software Engineer"
-                    Presence="BitPersonaPresence.Blocked"
-                    Size="BitPersonaSize.Size120"
-                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
-        <br /><br /><br /><br />
-        <div>Busy:</div><br />
-        <BitPersona PrimaryText="Annie Lindqvist"
-                    SecondaryText="Software Engineer"
-                    Presence="BitPersonaPresence.Busy"
-                    PresenceIconNames="_iconNames"
-                    Size="BitPersonaSize.Size120"
-                    ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
-    </DemoExample>
-
-    <DemoExample Title="Reversed" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
-        <div>Adjust the texts position of BitPersona's image to be reversed.</div>
-        <br />
-        <div>
-            <BitPersona Reversed
-                        PrimaryText="Annie Lindqvist"
-                        SecondaryText="Software Engineer"
-                        Presence="BitPersonaPresence.Online"
-                        PresenceIconNames="_iconNames"
-                        Size="BitPersonaSize.Size120"
-                        ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
-        </div>
-    </DemoExample>
-
-
     <DemoExample Title="Templates" RazorCode="@example9RazorCode" Id="example9">
         <div>Text templates:</div><br />
         <div>
             <BitPersona Size="BitPersonaSize.Size100" ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" OnImageClick="() => {}">
                 <PrimaryTextTemplate>
                     <BitIcon IconName="@BitIconName.Contact" Class="custom-ico" />
-                    Annie Lindqvist
+                    Xafan Salina
                 </PrimaryTextTemplate>
                 <SecondaryTextTemplate>
                     <BitIcon IconName="@BitIconName.Suitcase" Class="custom-ico" />
@@ -278,7 +280,7 @@
         <br /><br /><br /><br />
         <div>Coin template:</div><br />
         <div>
-            <BitPersona Size="BitPersonaSize.Size100" PrimaryText="Annie Lindqvist" SecondaryText="Software Engineer" Presence="BitPersonaPresence.Online" CoinVariant="BitVariant.Text">
+            <BitPersona Size="BitPersonaSize.Size100" PrimaryText="Xafan Salina" SecondaryText="Software Engineer" Presence="BitPersonaPresence.Online" CoinVariant="BitVariant.Text">
                 <CoinTemplate>
                     <img src="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" width="100px" height="100px" class="custom-coin" />
                 </CoinTemplate>
@@ -340,7 +342,7 @@
 
         <div>FontAwesome action icon (hover over the image):</div>
         <br />
-        <BitPersona PrimaryText="Annie Lindqvist"
+        <BitPersona PrimaryText="Xafan Salina"
                     SecondaryText="Software Engineer"
                     TertiaryText="In a meeting"
                     OptionalText="Available at 4:00pm"
@@ -357,35 +359,35 @@
 
         <div>Bootstrap Icons presence icons:</div>
         <br />
-        <BitPersona PrimaryText="Annie Lindqvist"
+        <BitPersona PrimaryText="Xafan Salina"
                     SecondaryText="Software Engineer"
                     Presence="BitPersonaPresence.Online"
                     PresenceIcons="_icons"
                     Size="BitPersonaSize.Size120"
                     ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
         <br /><br />
-        <BitPersona PrimaryText="Annie Lindqvist"
+        <BitPersona PrimaryText="Xafan Salina"
                     SecondaryText="Software Engineer"
                     Presence="BitPersonaPresence.Busy"
                     PresenceIcons="_icons"
                     Size="BitPersonaSize.Size120"
                     ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
         <br /><br />
-        <BitPersona PrimaryText="Annie Lindqvist"
+        <BitPersona PrimaryText="Xafan Salina"
                     SecondaryText="Software Engineer"
                     Presence="BitPersonaPresence.Away"
                     PresenceIcons="_icons"
                     Size="BitPersonaSize.Size120"
                     ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
         <br /><br />
-        <BitPersona PrimaryText="Annie Lindqvist"
+        <BitPersona PrimaryText="Xafan Salina"
                     SecondaryText="Software Engineer"
                     Presence="BitPersonaPresence.Dnd"
                     PresenceIcons="_icons"
                     Size="BitPersonaSize.Size120"
                     ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
         <br /><br />
-        <BitPersona PrimaryText="Annie Lindqvist"
+        <BitPersona PrimaryText="Xafan Salina"
                     SecondaryText="Software Engineer"
                     Presence="BitPersonaPresence.Offline"
                     PresenceIcons="_icons"
@@ -396,7 +398,7 @@
     <DemoExample Title="AutoCoinColor" RazorCode="@example12RazorCode" Id="example12">
         <div>Different people each get a distinct, consistent coin color automatically:</div>
         <br />
-        <BitPersona AutoCoinColor PrimaryText="Annie Lindqvist" SecondaryText="Software Engineer" Size="BitPersonaSize.Size72" />
+        <BitPersona AutoCoinColor PrimaryText="Xafan Salina" SecondaryText="Software Engineer" Size="BitPersonaSize.Size72" />
         <br /><br />
         <BitPersona AutoCoinColor PrimaryText="Saleh Khafan" SecondaryText="Developer" Size="BitPersonaSize.Size72" />
         <br /><br />
@@ -408,17 +410,17 @@
         <br /><br /><br /><br />
         <div>Custom ImageInitials also influence the generated color:</div>
         <br />
-        <BitPersona AutoCoinColor ImageInitials="ZZ" PrimaryText="Annie Lindqvist" SecondaryText="Software Engineer" Size="BitPersonaSize.Size72" />
+        <BitPersona AutoCoinColor ImageInitials="ZZ" PrimaryText="Xafan Salina" SecondaryText="Software Engineer" Size="BitPersonaSize.Size72" />
         <br /><br /><br /><br />
         <div>CoinColor takes precedence over AutoCoinColor when set explicitly:</div>
         <br />
-        <BitPersona AutoCoinColor CoinColor="BitColor.Success" PrimaryText="Annie Lindqvist" SecondaryText="Always green" Size="BitPersonaSize.Size72" />
+        <BitPersona AutoCoinColor CoinColor="BitColor.Success" PrimaryText="Xafan Salina" SecondaryText="Always green" Size="BitPersonaSize.Size72" />
     </DemoExample>
 
     <DemoExample Title="Image Events" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
         <div>OnImageLoad — callback invoked when the image loads successfully:</div>
         <br />
-        <BitPersona PrimaryText="Annie Lindqvist"
+        <BitPersona PrimaryText="Xafan Salina"
                     SecondaryText="Software Engineer"
                     Size="BitPersonaSize.Size72"
                     OnImageLoad="() => imageLoadCount++"
@@ -427,7 +429,7 @@
         <br /><br /><br /><br />
         <div>OnImageError — callback invoked when the image fails to load:</div>
         <br />
-        <BitPersona PrimaryText="Annie Lindqvist"
+        <BitPersona PrimaryText="Xafan Salina"
                     SecondaryText="Software Engineer"
                     Size="BitPersonaSize.Size72"
                     OnImageError="() => imageErrorCount++"
@@ -438,13 +440,13 @@
     <DemoExample Title="Image Loading" RazorCode="@example14RazorCode" Id="example14">
         <div>ImageLoading controls when the browser fetches the image (maps to the HTML <b>loading</b> attribute):</div>
         <br />
-        <BitPersona PrimaryText="Annie Lindqvist"
+        <BitPersona PrimaryText="Xafan Salina"
                     SecondaryText="Lazy loaded"
                     Size="BitPersonaSize.Size72"
                     ImageLoading="BitImageLoading.Lazy"
                     ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
         <br /><br />
-        <BitPersona PrimaryText="Annie Lindqvist"
+        <BitPersona PrimaryText="Xafan Salina"
                     SecondaryText="Eagerly loaded"
                     Size="BitPersonaSize.Size72"
                     ImageLoading="BitImageLoading.Eager"
@@ -452,7 +454,7 @@
         <br /><br /><br /><br />
         <div>ImageSrcSet provides alternate image sources for different screen densities (maps to the HTML <b>srcset</b> attribute):</div>
         <br />
-        <BitPersona PrimaryText="Annie Lindqvist"
+        <BitPersona PrimaryText="Xafan Salina"
                     SecondaryText="Software Engineer"
                     Size="BitPersonaSize.Size72"
                     ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png"
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor.samples.cs
index f11bcd1e3a..baf9881acd 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor.samples.cs
@@ -15,79 +15,6 @@ public partial class BitPersonaDemo
             Unknown />";
 
     private readonly string example2RazorCode = @"
-<BitCheckbox @bind-Value=""isDetailsShown"" Label=""Include BitPersona details"" />
-
-<BitPersona PrimaryText=""Annie Lindqvist""
-            SecondaryText=""Secondary""
-            Size=""BitPersonaSize.Size8""
-            HidePersonaDetails=""!isDetailsShown""
-            ImageUrl=""/images/persona/persona-female.png"" />
-
-<BitPersona PrimaryText=""Annie Lindqvist""
-            SecondaryText=""Secondary""
-            Size=""BitPersonaSize.Size24""
-            HidePersonaDetails=""!isDetailsShown""
-            ImageUrl=""/images/persona/persona-female.png"" />
-
-<BitPersona PrimaryText=""Annie Lindqvist""
-            SecondaryText=""Secondary""
-            Size=@BitPersonaSize.Size32
-            HidePersonaDetails=""!isDetailsShown""
-            ImageUrl=""/images/persona/persona-female.png"" />
-
-<BitPersona PrimaryText=""Annie Lindqvist""
-            SecondaryText=""Software Engineer""
-            Size=""BitPersonaSize.Size40""
-            HidePersonaDetails=""!isDetailsShown""
-            ImageUrl=""/images/persona/persona-female.png"" />
-
-<BitPersona PrimaryText=""Annie Lindqvist""
-            SecondaryText=""Software Engineer""
-            Size=""BitPersonaSize.Size48""
-            HidePersonaDetails=""!isDetailsShown""
-            ImageUrl=""/images/persona/persona-female.png"" />
-
-<BitPersona PrimaryText=""Annie Lindqvist""
-            SecondaryText=""Software Engineer""
-            Size=""BitPersonaSize.Size56""
-            HidePersonaDetails=""!isDetailsShown""
-            ImageUrl=""/images/persona/persona-female.png"" />
-
-<BitPersona PrimaryText=""Annie Lindqvist""
-            SecondaryText=""Software Engineer""
-            TertiaryText=""In a meeting""
-            Size=""BitPersonaSize.Size72""
-            HidePersonaDetails=""!isDetailsShown""
-            ImageUrl=""/images/persona/persona-female.png"" />
-
-<BitPersona PrimaryText=""Annie Lindqvist""
-            SecondaryText=""Software Engineer""
-            TertiaryText=""Off""
-            OptionalText=""Available at 4:00pm""
-            Size=""BitPersonaSize.Size100""
-            HidePersonaDetails=""!isDetailsShown""
-            ImageUrl=""/images/persona/persona-female.png"" />
-
-<BitPersona PrimaryText=""Annie Lindqvist""
-            SecondaryText=""Software Engineer""
-            TertiaryText=""In a meeting""
-            OptionalText=""Available at 4:00pm""
-            Size=""BitPersonaSize.Size120""
-            HidePersonaDetails=""!isDetailsShown""
-            ImageUrl=""/images/persona/persona-female.png"" />
-
-<BitPersona CoinSize=""150""
-            PrimaryText=""Annie Lindqvist""
-            SecondaryText=""Software Engineer""
-            TertiaryText=""In a meeting""
-            OptionalText=""Available at 4:00pm""
-            Size=""BitPersonaSize.Size120""
-            HidePersonaDetails=""!isDetailsShown""
-            ImageUrl=""/images/persona/persona-female.png"" />";
-    private readonly string example2CsharpCode = @"
-private bool isDetailsShown = true;";
-
-    private readonly string example3RazorCode = @"
 <BitPersona PrimaryText=""Saleh Xafan""
             SecondaryText=""Developer""
             Size=""BitPersonaSize.Size72""
@@ -103,7 +30,7 @@ public partial class BitPersonaDemo
             Size=""BitPersonaSize.Size72""
             CoinVariant=""BitVariant.Text"" />";
 
-    private readonly string example4RazorCode = @"
+    private readonly string example3RazorCode = @"
 <BitPersona PrimaryText=""Saleh Xafan""
             SecondaryText=""Circle""
             Size=""BitPersonaSize.Size72""
@@ -115,44 +42,9 @@ public partial class BitPersonaDemo
             Size=""BitPersonaSize.Size72""
             ImageUrl=""/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png"" />";
 
-    private readonly string example5RazorCode = @"
-<BitPersona PrimaryText=""Annie Lindqvist""
-            SecondaryText=""Software Engineer""
-            TertiaryText=""In a meeting""
-            OptionalText=""Available at 4:00pm""
-            Size=""BitPersonaSize.Size120""
-            Presence=""BitPersonaPresence.None""
-            OnActionClick=""() => actionClickCount++""
-            ActionIconName=""@BitIconName.CloudUpload""
-            ImageUrl=""/images/persona/persona-female.png"" />
-<p>Action Click Count: @actionClickCount</p>
-
-<BitPersona PrimaryText=""Annie Lindqvist""
-            SecondaryText=""Software Engineer""
-            TertiaryText=""In a meeting""
-            OptionalText=""Available at 4:00pm""
-            Size=""BitPersonaSize.Size120""
-            Presence=""BitPersonaPresence.Online""
-            OnImageClick=""() => imageClickCount++""
-            ImageUrl=""/images/persona/persona-female.png"" />
-<p>Image Click Count: @imageClickCount</p>";
-    private readonly string example5CsharpCode = @"
-private int imageClickCount = 0;
-private int actionClickCount = 0;";
-
-    private readonly string example6RazorCode = @"
-<BitPersona PrimaryText=""Saleh Khafan""
-            Size=""BitPersonaSize.Size72""
-            ShowInitialsUntilImageLoads
-            ImageUrl=""invalid-src"" />
-
-<BitPersona Size=""BitPersonaSize.Size72"" PrimaryText=""Saleh Xafan"" />
-
-<BitPersona Size=""BitPersonaSize.Size72"" PrimaryText=""Saleh Khafan"" ImageInitials=""S"" />";
-
-    private readonly string example7RazorCode = @"
+    private readonly string example4RazorCode = @"
 <div>None</div>
-<BitPersona PrimaryText=""Annie Lindqvist""
+<BitPersona PrimaryText=""Xafan Salina""
             SecondaryText=""Software Engineer""
             Presence=""BitPersonaPresence.None""
             PresenceIconNames=""_iconNames""
@@ -160,7 +52,7 @@ public partial class BitPersonaDemo
             ImageUrl=""/images/persona/persona-female.png"" />
 
 <div>Offline</div>
-<BitPersona PrimaryText=""Annie Lindqvist""
+<BitPersona PrimaryText=""Xafan Salina""
             SecondaryText=""Software Engineer""
             Presence=""BitPersonaPresence.Offline""
             PresenceIconNames=""_iconNames""
@@ -168,7 +60,7 @@ public partial class BitPersonaDemo
             ImageUrl=""/images/persona/persona-female.png"" />
 
 <div>Online</div>
-<BitPersona PrimaryText=""Annie Lindqvist""
+<BitPersona PrimaryText=""Xafan Salina""
             SecondaryText=""Software Engineer""
             Presence=""BitPersonaPresence.Online""
             PresenceIconNames=""_iconNames""
@@ -176,7 +68,7 @@ public partial class BitPersonaDemo
             ImageUrl=""/images/persona/persona-female.png"" />
 
 <div>Away</div>
-<BitPersona PrimaryText=""Annie Lindqvist""
+<BitPersona PrimaryText=""Xafan Salina""
             SecondaryText=""Software Engineer""
             Presence=""BitPersonaPresence.Away""
             PresenceIconNames=""_iconNames""
@@ -184,7 +76,7 @@ public partial class BitPersonaDemo
             ImageUrl=""/images/persona/persona-female.png"" />
 
 <div>Do not Disturb (Dnd)</div>
-<BitPersona PrimaryText=""Annie Lindqvist""
+<BitPersona PrimaryText=""Xafan Salina""
             SecondaryText=""Software Engineer""
             Presence=""BitPersonaPresence.Dnd""
             PresenceIconNames=""_iconNames""
@@ -192,20 +84,20 @@ public partial class BitPersonaDemo
             ImageUrl=""/images/persona/persona-female.png"" />
 
 <div>Blocked</div>
-<BitPersona PrimaryText=""Annie Lindqvist""
+<BitPersona PrimaryText=""Xafan Salina""
             SecondaryText=""Software Engineer""
             Presence=""BitPersonaPresence.Blocked""
             Size=""BitPersonaSize.Size120""
             ImageUrl=""/images/persona/persona-female.png"" />
 
 <div>Busy</div>
-<BitPersona PrimaryText=""Annie Lindqvist""
+<BitPersona PrimaryText=""Xafan Salina""
             SecondaryText=""Software Engineer""
             Presence=""BitPersonaPresence.Busy""
             PresenceIconNames=""_iconNames""
             Size=""BitPersonaSize.Size120""
             ImageUrl=""/images/persona/persona-female.png"" />";
-    private readonly string example7CsharpCode = @"
+    private readonly string example4CsharpCode = @"
 private readonly Dictionary<BitPersonaPresence, string> _iconNames = new()
 {
     {BitPersonaPresence.Offline, BitIconName.UnavailableOffline},
@@ -216,15 +108,88 @@ public partial class BitPersonaDemo
     {BitPersonaPresence.Busy, BitIconName.Blocked2Solid}
 };";
 
-    private readonly string example8RazorCode = @"
+    private readonly string example5RazorCode = @"
+<BitCheckbox @bind-Value=""isDetailsShown"" Label=""Include BitPersona details"" />
+
+<BitPersona PrimaryText=""Xafan Salina""
+            SecondaryText=""Secondary""
+            Size=""BitPersonaSize.Size8""
+            HidePersonaDetails=""!isDetailsShown""
+            ImageUrl=""/images/persona/persona-female.png"" />
+
+<BitPersona PrimaryText=""Xafan Salina""
+            SecondaryText=""Secondary""
+            Size=""BitPersonaSize.Size24""
+            HidePersonaDetails=""!isDetailsShown""
+            ImageUrl=""/images/persona/persona-female.png"" />
+
+<BitPersona PrimaryText=""Xafan Salina""
+            SecondaryText=""Secondary""
+            Size=@BitPersonaSize.Size32
+            HidePersonaDetails=""!isDetailsShown""
+            ImageUrl=""/images/persona/persona-female.png"" />
+
+<BitPersona PrimaryText=""Xafan Salina""
+            SecondaryText=""Software Engineer""
+            Size=""BitPersonaSize.Size40""
+            HidePersonaDetails=""!isDetailsShown""
+            ImageUrl=""/images/persona/persona-female.png"" />
+
+<BitPersona PrimaryText=""Xafan Salina""
+            SecondaryText=""Software Engineer""
+            Size=""BitPersonaSize.Size48""
+            HidePersonaDetails=""!isDetailsShown""
+            ImageUrl=""/images/persona/persona-female.png"" />
+
+<BitPersona PrimaryText=""Xafan Salina""
+            SecondaryText=""Software Engineer""
+            Size=""BitPersonaSize.Size56""
+            HidePersonaDetails=""!isDetailsShown""
+            ImageUrl=""/images/persona/persona-female.png"" />
+
+<BitPersona PrimaryText=""Xafan Salina""
+            SecondaryText=""Software Engineer""
+            TertiaryText=""In a meeting""
+            Size=""BitPersonaSize.Size72""
+            HidePersonaDetails=""!isDetailsShown""
+            ImageUrl=""/images/persona/persona-female.png"" />
+
+<BitPersona PrimaryText=""Xafan Salina""
+            SecondaryText=""Software Engineer""
+            TertiaryText=""Off""
+            OptionalText=""Available at 4:00pm""
+            Size=""BitPersonaSize.Size100""
+            HidePersonaDetails=""!isDetailsShown""
+            ImageUrl=""/images/persona/persona-female.png"" />
+
+<BitPersona PrimaryText=""Xafan Salina""
+            SecondaryText=""Software Engineer""
+            TertiaryText=""In a meeting""
+            OptionalText=""Available at 4:00pm""
+            Size=""BitPersonaSize.Size120""
+            HidePersonaDetails=""!isDetailsShown""
+            ImageUrl=""/images/persona/persona-female.png"" />
+
+<BitPersona CoinSize=""150""
+            PrimaryText=""Xafan Salina""
+            SecondaryText=""Software Engineer""
+            TertiaryText=""In a meeting""
+            OptionalText=""Available at 4:00pm""
+            Size=""BitPersonaSize.Size120""
+            HidePersonaDetails=""!isDetailsShown""
+            ImageUrl=""/images/persona/persona-female.png"" />";
+    private readonly string example5CsharpCode = @"
+private bool isDetailsShown = true;";
+
+    private readonly string example6RazorCode = @"
 <BitPersona Reversed
-            PrimaryText=""Annie Lindqvist""
+            PrimaryText=""Xafan Salina""
             SecondaryText=""Software Engineer""
             Presence=""BitPersonaPresence.Online""
             PresenceIconNames=""_iconNames""
             Size=""BitPersonaSize.Size120""
             ImageUrl=""/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png"" />";
-    private readonly string example8CsharpCode = @"
+    private readonly string example6CsharpCode = @"
 private readonly Dictionary<BitPersonaPresence, string> _iconNames = new()
 {
     {BitPersonaPresence.Offline, BitIconName.UnavailableOffline},
@@ -235,6 +200,40 @@ public partial class BitPersonaDemo
     {BitPersonaPresence.Busy, BitIconName.Blocked2Solid}
 };";
 
+    private readonly string example7RazorCode = @"
+<BitPersona PrimaryText=""Xafan Salina""
+            SecondaryText=""Software Engineer""
+            TertiaryText=""In a meeting""
+            OptionalText=""Available at 4:00pm""
+            Size=""BitPersonaSize.Size120""
+            Presence=""BitPersonaPresence.None""
+            OnActionClick=""() => actionClickCount++""
+            ActionIconName=""@BitIconName.CloudUpload""
+            ImageUrl=""/images/persona/persona-female.png"" />
+<p>Action Click Count: @actionClickCount</p>
+
+<BitPersona PrimaryText=""Xafan Salina""
+            SecondaryText=""Software Engineer""
+            TertiaryText=""In a meeting""
+            OptionalText=""Available at 4:00pm""
+            Size=""BitPersonaSize.Size120""
+            Presence=""BitPersonaPresence.Online""
+            OnImageClick=""() => imageClickCount++""
+            ImageUrl=""/images/persona/persona-female.png"" />
+<p>Image Click Count: @imageClickCount</p>";
+    private readonly string example7CsharpCode = @"
+private int imageClickCount = 0;
+private int actionClickCount = 0;";
+
+    private readonly string example8RazorCode = @"
+<BitPersona PrimaryText=""Saleh Khafan""
+            Size=""BitPersonaSize.Size72""
+            ShowInitialsUntilImageLoads
+            ImageUrl=""invalid-src"" />
+
+<BitPersona Size=""BitPersonaSize.Size72"" PrimaryText=""Saleh Xafan"" />
+
+<BitPersona Size=""BitPersonaSize.Size72"" PrimaryText=""Saleh Khafan"" ImageInitials=""S"" />";
 
     private readonly string example9RazorCode = @"
 <style>
@@ -252,7 +251,7 @@ public partial class BitPersonaDemo
 <BitPersona Size=""BitPersonaSize.Size100"" ImageUrl=""/images/persona/persona-female.png"" OnImageClick=""() => {}"">
     <PrimaryTextTemplate>
         <BitIcon IconName=""@BitIconName.Contact"" Class=""custom-ico"" />
-        Annie Lindqvist
+        Xafan Salina
     </PrimaryTextTemplate>
     <SecondaryTextTemplate>
         <BitIcon IconName=""@BitIconName.Suitcase"" Class=""custom-ico"" />
@@ -273,7 +272,7 @@ Edit image
 </BitPersona>
 
 
-<BitPersona Size=""BitPersonaSize.Size100"" PrimaryText=""Annie Lindqvist"" SecondaryText=""Software Engineer"" Presence=""BitPersonaPresence.Online"" CoinVariant=""BitVariant.Text"">
+<BitPersona Size=""BitPersonaSize.Size100"" PrimaryText=""Xafan Salina"" SecondaryText=""Software Engineer"" Presence=""BitPersonaPresence.Online"" CoinVariant=""BitVariant.Text"">
     <CoinTemplate>
         <img src=""/images/persona/persona-female.png"" width=""100px"" height=""100px"" class=""custom-coin"" />
     </CoinTemplate>
@@ -303,7 +302,7 @@ Edit image
     private readonly string example11RazorCode = @"
 <link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
 
-<BitPersona PrimaryText=""Annie Lindqvist""
+<BitPersona PrimaryText=""Xafan Salina""
             SecondaryText=""Software Engineer""
             TertiaryText=""In a meeting""
             OptionalText=""Available at 4:00pm""
@@ -317,35 +316,35 @@ Edit image
 
 <link rel=""stylesheet"" href=""https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"" />
 
-<BitPersona PrimaryText=""Annie Lindqvist""
+<BitPersona PrimaryText=""Xafan Salina""
             SecondaryText=""Software Engineer""
             Presence=""BitPersonaPresence.Online""
             PresenceIcons=""_icons""
             Size=""BitPersonaSize.Size120""
             ImageUrl=""/images/persona/persona-female.png"" />
 
-<BitPersona PrimaryText=""Annie Lindqvist""
+<BitPersona PrimaryText=""Xafan Salina""
             SecondaryText=""Software Engineer""
             Presence=""BitPersonaPresence.Busy""
             PresenceIcons=""_icons""
             Size=""BitPersonaSize.Size120""
             ImageUrl=""/images/persona/persona-female.png"" />
 
-<BitPersona PrimaryText=""Annie Lindqvist""
+<BitPersona PrimaryText=""Xafan Salina""
             SecondaryText=""Software Engineer""
             Presence=""BitPersonaPresence.Away""
             PresenceIcons=""_icons""
             Size=""BitPersonaSize.Size120""
             ImageUrl=""/images/persona/persona-female.png"" />
 
-<BitPersona PrimaryText=""Annie Lindqvist""
+<BitPersona PrimaryText=""Xafan Salina""
             SecondaryText=""Software Engineer""
             Presence=""BitPersonaPresence.Dnd""
             PresenceIcons=""_icons""
             Size=""BitPersonaSize.Size120""
             ImageUrl=""/images/persona/persona-female.png"" />
 
-<BitPersona PrimaryText=""Annie Lindqvist""
+<BitPersona PrimaryText=""Xafan Salina""
             SecondaryText=""Software Engineer""
             Presence=""BitPersonaPresence.Offline""
             PresenceIcons=""_icons""
@@ -363,7 +362,7 @@ Edit image
 };";
     private readonly string example12RazorCode = @"
 <BitPersona AutoCoinColor
-            PrimaryText=""Annie Lindqvist""
+            PrimaryText=""Xafan Salina""
             SecondaryText=""Software Engineer""
             Size=""BitPersonaSize.Size72"" />
 
@@ -389,25 +388,25 @@ Edit image
 
 <BitPersona AutoCoinColor
             ImageInitials=""ZZ""
-            PrimaryText=""Annie Lindqvist""
+            PrimaryText=""Xafan Salina""
             SecondaryText=""Software Engineer""
             Size=""BitPersonaSize.Size72"" />
 
 <BitPersona AutoCoinColor
             CoinColor=""BitColor.Success""
-            PrimaryText=""Annie Lindqvist""
+            PrimaryText=""Xafan Salina""
             SecondaryText=""Always green""
             Size=""BitPersonaSize.Size72"" />";
 
     private readonly string example13RazorCode = @"
-<BitPersona PrimaryText=""Annie Lindqvist""
+<BitPersona PrimaryText=""Xafan Salina""
             SecondaryText=""Software Engineer""
             Size=""BitPersonaSize.Size72""
             OnImageLoad=""() => imageLoadCount++""
             ImageUrl=""/images/persona/persona-female.png"" />
 <p>Image Load Count: @imageLoadCount</p>
 
-<BitPersona PrimaryText=""Annie Lindqvist""
+<BitPersona PrimaryText=""Xafan Salina""
             SecondaryText=""Software Engineer""
             Size=""BitPersonaSize.Size72""
             OnImageError=""() => imageErrorCount++""
@@ -418,19 +417,19 @@ Edit image
 private int imageErrorCount = 0;";
 
     private readonly string example14RazorCode = @"
-<BitPersona PrimaryText=""Annie Lindqvist""
+<BitPersona PrimaryText=""Xafan Salina""
             SecondaryText=""Lazy loaded""
             Size=""BitPersonaSize.Size72""
             ImageLoading=""lazy""
             ImageUrl=""/images/persona/persona-female.png"" />
 
-<BitPersona PrimaryText=""Annie Lindqvist""
+<BitPersona PrimaryText=""Xafan Salina""
             SecondaryText=""Eagerly loaded""
             Size=""BitPersonaSize.Size72""
             ImageLoading=""eager""
             ImageUrl=""/images/persona/persona-female.png"" />
 
-<BitPersona PrimaryText=""Annie Lindqvist""
+<BitPersona PrimaryText=""Xafan Salina""
             SecondaryText=""Software Engineer""
             Size=""BitPersonaSize.Size72""
             ImageUrl=""/images/persona/persona-female.png""
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Progress/Shimmer/BitShimmerDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Progress/Shimmer/BitShimmerDemo.razor
index 33736595f8..0621169f9e 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Progress/Shimmer/BitShimmerDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Progress/Shimmer/BitShimmerDemo.razor
@@ -1,4 +1,4 @@
-@page "/components/shimmer"
+@page "/components/shimmer"
 
 <PageOutlet Url="shimmer"
             Title="Shimmer"
@@ -69,7 +69,7 @@
                 <BitImage Height="8rem" Alt="bit logo"
                           Src="_content/Bit.BlazorUI.Demo.Client.Core/images/bit-logo-blue.png" />
                 <br />
-                <BitPersona PrimaryText="Annie Lindqvist"
+                <BitPersona PrimaryText="Xafan Salina"
                             SecondaryText="Software Engineer"
                             Size="@BitPersonaSize.Size56"
                             Presence="@BitPersonaPresence.Online"
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Progress/Shimmer/BitShimmerDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Progress/Shimmer/BitShimmerDemo.razor.cs
index 563e441cdb..1d926a067f 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Progress/Shimmer/BitShimmerDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Progress/Shimmer/BitShimmerDemo.razor.cs
@@ -309,7 +309,7 @@ Content loaded successfully.
         <BitImage Height=""8rem"" Alt=""bit logo""
                   Src=""/images/bit-logo-blue.png"" />
         <br />
-        <BitPersona PrimaryText=""Annie Lindqvist""
+        <BitPersona PrimaryText=""Xafan Salina""
                     SecondaryText=""Software Engineer""
                     Size=""@BitPersonaSize.Size56""
                     Presence=""@BitPersonaPresence.Online""
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Notifications/Persona/BitPersonaTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Notifications/Persona/BitPersonaTests.cs
index aa4efebd7a..c35631bc34 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Notifications/Persona/BitPersonaTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Notifications/Persona/BitPersonaTests.cs
@@ -301,7 +301,6 @@ public void BitPersonaDefaultShapeShouldBeCircular()
 
         var persona = component.Find(".bit-prs");
 
-        Assert.IsTrue(persona.ClassList.Contains("bit-prs-crl"));
         Assert.IsFalse(persona.ClassList.Contains("bit-prs-sqr"));
     }
 
@@ -313,7 +312,7 @@ public void BitPersonaAutoCoinColorShouldApplyAColorClassFromKnownPalette()
         var component = RenderComponent<BitPersona>(parameters =>
         {
             parameters.Add(p => p.AutoCoinColor, true);
-            parameters.Add(p => p.PrimaryText, "Annie Lindqvist");
+            parameters.Add(p => p.PrimaryText, "Xafan Salina");
         });
 
         var persona = component.Find(".bit-prs");
@@ -351,7 +350,7 @@ public void BitPersonaCoinColorShouldTakePrecedenceOverAutoCoinColor()
         {
             parameters.Add(p => p.AutoCoinColor, true);
             parameters.Add(p => p.CoinColor, BitColor.Warning);
-            parameters.Add(p => p.PrimaryText, "Annie Lindqvist");
+            parameters.Add(p => p.PrimaryText, "Xafan Salina");
         });
 
         var persona = component.Find(".bit-prs");
@@ -360,10 +359,10 @@ public void BitPersonaCoinColorShouldTakePrecedenceOverAutoCoinColor()
     }
 
     [TestMethod,
-        DataRow("lazy"),
-        DataRow("eager")
+        DataRow(BitImageLoading.Lazy),
+        DataRow(BitImageLoading.Eager)
     ]
-    public void BitPersonaImageLoadingAttributeShouldBeSet(string loading)
+    public void BitPersonaImageLoadingAttributeShouldBeSet(BitImageLoading loading)
     {
         var component = RenderComponent<BitPersona>(parameters =>
         {
@@ -373,7 +372,7 @@ public void BitPersonaImageLoadingAttributeShouldBeSet(string loading)
 
         var img = component.Find(".bit-prs-img");
 
-        Assert.AreEqual(loading, img.GetAttribute("loading"));
+        Assert.AreEqual(loading.ToString().ToLower(), img.GetAttribute("loading"));
     }
 
     [TestMethod]
@@ -466,7 +465,7 @@ public void BitPersonaOnImageErrorShouldFallbackToInitials()
     {
         var component = RenderComponent<BitPersona>(parameters =>
         {
-            parameters.Add(p => p.PrimaryText, "Annie Lindqvist");
+            parameters.Add(p => p.PrimaryText, "Xafan Salina");
             parameters.Add(p => p.ImageUrl, "invalid.png");
         });
 
@@ -484,7 +483,7 @@ public void BitPersonaShowInitialsUntilImageLoadsShouldShowInitialsWhileLoading(
     {
         var component = RenderComponent<BitPersona>(parameters =>
         {
-            parameters.Add(p => p.PrimaryText, "Annie Lindqvist");
+            parameters.Add(p => p.PrimaryText, "Xafan Salina");
             parameters.Add(p => p.ImageUrl, "some-image.png");
             parameters.Add(p => p.ShowInitialsUntilImageLoads, true);
         });

From b5ab071040ac6aaa4c4a5afc6e2d25e41f9a20cc Mon Sep 17 00:00:00 2001
From: Saleh Yusefnejad <msynk@outlook.com>
Date: Sun, 19 Apr 2026 14:08:58 +0330
Subject: [PATCH 5/5] resolve review comments III

---
 .../Notifications/Persona/BitPersonaDemo.razor      | 12 ++++++++----
 .../Persona/BitPersonaDemo.razor.samples.cs         | 13 ++++++++-----
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor
index fe47b16571..f7c70576c3 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor
@@ -425,6 +425,7 @@
                     Size="BitPersonaSize.Size72"
                     OnImageLoad="() => imageLoadCount++"
                     ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
+        <br />
         <p>Image Load Count: @imageLoadCount</p>
         <br /><br /><br /><br />
         <div>OnImageError — callback invoked when the image fails to load:</div>
@@ -434,10 +435,11 @@
                     Size="BitPersonaSize.Size72"
                     OnImageError="() => imageErrorCount++"
                     ImageUrl="invalid-image-url" />
+        <br />
         <p>Image Error Count: @imageErrorCount</p>
     </DemoExample>
 
-    <DemoExample Title="Image Loading" RazorCode="@example14RazorCode" Id="example14">
+    <DemoExample Title="ImageLoading" RazorCode="@example14RazorCode" Id="example14">
         <div>ImageLoading controls when the browser fetches the image (maps to the HTML <b>loading</b> attribute):</div>
         <br />
         <BitPersona PrimaryText="Xafan Salina"
@@ -451,7 +453,9 @@
                     Size="BitPersonaSize.Size72"
                     ImageLoading="BitImageLoading.Eager"
                     ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />
-        <br /><br /><br /><br />
+    </DemoExample>
+
+    <DemoExample Title="ImageSrcSet" RazorCode="@example15RazorCode" Id="example15">
         <div>ImageSrcSet provides alternate image sources for different screen densities (maps to the HTML <b>srcset</b> attribute):</div>
         <br />
         <BitPersona PrimaryText="Xafan Salina"
@@ -461,7 +465,7 @@
                     ImageSrcSet="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png 1x, /_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png 2x" />
     </DemoExample>
 
-    <DemoExample Title="Style &amp; Class" RazorCode="@example15RazorCode" Id="example15">
+    <DemoExample Title="Style &amp; Class" RazorCode="@example16RazorCode" Id="example16">
         <div>Component's Style & Class:</div><br />
         <BitPersona PrimaryText="Saleh Khafan"
                     Size="BitPersonaSize.Size72"
@@ -483,7 +487,7 @@
                                                PrimaryTextContainer = "custom-primary-text" })" />
     </DemoExample>
 
-    <DemoExample Title="RTL" RazorCode="@example16RazorCode" Id="example16">
+    <DemoExample Title="RTL" RazorCode="@example17RazorCode" Id="example17">
         <div dir="rtl">
             <BitPersona Dir="BitDir.Rtl"
                         PrimaryText="صالح یوسف نژاد"
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor.samples.cs
index baf9881acd..3a037b03bf 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor.samples.cs
@@ -360,6 +360,7 @@ Edit image
     {BitPersonaPresence.Blocked, BitIconInfo.Bi(""ban"")},
     {BitPersonaPresence.Busy, BitIconInfo.Bi(""exclamation-circle-fill"")}
 };";
+
     private readonly string example12RazorCode = @"
 <BitPersona AutoCoinColor
             PrimaryText=""Xafan Salina""
@@ -420,21 +421,23 @@ Edit image
 <BitPersona PrimaryText=""Xafan Salina""
             SecondaryText=""Lazy loaded""
             Size=""BitPersonaSize.Size72""
-            ImageLoading=""lazy""
+            ImageLoading=""BitImageLoading.Lazy""
             ImageUrl=""/images/persona/persona-female.png"" />
 
 <BitPersona PrimaryText=""Xafan Salina""
             SecondaryText=""Eagerly loaded""
             Size=""BitPersonaSize.Size72""
-            ImageLoading=""eager""
-            ImageUrl=""/images/persona/persona-female.png"" />
+            ImageLoading=""BitImageLoading.Eager""
+            ImageUrl=""/images/persona/persona-female.png"" />";
 
+    private readonly string example15RazorCode = @"
 <BitPersona PrimaryText=""Xafan Salina""
             SecondaryText=""Software Engineer""
             Size=""BitPersonaSize.Size72""
             ImageUrl=""/images/persona/persona-female.png""
             ImageSrcSet=""/images/persona/persona-female.png 1x, /images/persona/persona-female.png 2x"" />";
-    private readonly string example15RazorCode = @"
+
+    private readonly string example16RazorCode = @"
 <style>
     .custom-class {
         padding: 1rem;
@@ -473,7 +476,7 @@ Edit image
             Classes=""@(new() { ImageContainer = ""custom-img-container"",
                                PrimaryTextContainer = ""custom-primary-text"" })"" />";
 
-    private readonly string example16RazorCode = @"
+    private readonly string example17RazorCode = @"
 <BitPersona Dir=""BitDir.Rtl""
             PrimaryText=""صالح یوسف نژاد""
             SecondaryText=""مهندس نرم افزار""