Resolved the Testing team reported issues

samples/Blazor.Toolkit.Samples.Client/Layout/MainLayout.razor

@@ -574,6 +574,9 @@
     .toc-item:hover {
         border-left-color: color-mix(in srgb, var(--accent) 28%, transparent) !important;
     }
+    .page-rtl .toc-item:hover {
+        border-right-color: color-mix(in srgb, var(--accent) 28%, transparent) !important;
+    }
 
     /* Existing UI rules */
     .search-popup.e-dialog.e-popup {
@@ -646,7 +649,8 @@
         padding: 0 5px;
     }
     .page-rtl .right-panel,
-    .page-rtl .top-left  {
+    .page-rtl .top-left,
+    .page-rtl .sidebar {
         direction: ltr;
     }
     .top-layout-title .syncfusion-logo {

samples/Blazor.Toolkit.Samples.Client/Layout/NavMenu.razor.css

@@ -146,9 +146,10 @@ details[open] > .menu-summary::after {
 
 .sidebar ::deep li a.nav-link {
     font-size: .8125rem;
-    font-weight: 400;
+    font-weight: 600 !important;
     font-stretch: 100%;
     line-height: 1.45;
+    letter-spacing: .18px;
 }
 
 .open-page {

samples/Blazor.Toolkit.Samples.Client/Layout/RightToc.razor

@@ -129,7 +129,6 @@
     }
     .page-rtl .toc-item:hover {
         border-right: 3px solid var(--accent);
-        border-left: 0 !important; 
     }
     .toc-item.level-5 {
         padding-left: 0;

samples/Blazor.Toolkit.Samples.Client/Pages/Components/Buttons/ButtonGroup.razor

@@ -185,7 +185,7 @@
 
 <CodePreview CodeSection="@IconsCode">
     <PreviewSection>
-        <div class="e-section">
+        <div id="icons" class="e-section">
             <label class="e-label">Icon-only</label>
             <SfButtonGroup>
                 <ButtonGroupButton aria-label="Bold"><span class="sb-icons e-bold"></span></ButtonGroupButton>
@@ -194,7 +194,7 @@
             </SfButtonGroup>
         </div>
 
-        <div class="e-section" style="margin-top:12px">
+        <div id="icons-text" class="e-section" style="margin-top:12px">
             <label class="e-label">Icon with text</label>
             <SfButtonGroup>
                 <ButtonGroupButton><span class="sb-icons e-align-left"></span>&nbsp;Left</ButtonGroupButton>
@@ -571,4 +571,12 @@
         color: var(--e-info-foreground, #6b7280);
         font-size: .9rem;
     }
+    #icons .e-btn-group .sb-icons::before,
+    #icons-text .e-btn-group .sb-icons::before {
+        transform: translateY(2px);
+    }
+    #icons .e-btn-group .sb-icons,
+    #icons-text .e-btn-group .sb-icons {
+        display: inline-flex;
+    }
 </style>

samples/Blazor.Toolkit.Samples.Client/Pages/Components/Calendars/Calendar.razor

@@ -98,7 +98,7 @@
 		<h5>Islamic Calendar</h5>
 	</Header>
 	<Content>
-		The Blazor Calendar component supports displaying the Islamic (Hijri) calendar. The Hijri calendar is a lunar calendar with 12 months and 354 or 355 days per year. To render the Islamic calendar, set the <code>CalendarMode</code> property to CalendarType.Islamic. This switches the calendar system used for display and selection.
+		The Blazor Calendar component supports displaying the Islamic (Hijri) Calendar. The Hijri Calendar is a lunar Calendar with 12 months and 354 or 355 days per year. To render the Islamic Calendar, set the <code>CalendarMode</code> property to CalendarType.Islamic. This switches the Calendar system used for display and selection.
 	</Content>
 </Description>
 
@@ -113,7 +113,7 @@
 		<h5>Week Number</h5>
 	</Header>
 	<Content>
-		The <code>WeekNumber</code> property is used to display week numbers alongside the calendar dates. This feature is particularly useful for business applications that reference ISO week numbers for planning and reporting purposes. Configure how the first week of the year is determined by using the <code>WeekRule</code> property (aligned with .NET CalendarWeekRule semantics).
+		The <code>WeekNumber</code> property is used to display week numbers alongside the Calendar dates. This feature is particularly useful for business applications that reference ISO week numbers for planning and reporting purposes. Configure how the first week of the year is determined by using the <code>WeekRule</code> property (aligned with .NET CalendarWeekRule semantics).
 	</Content>
 </Description>
 

samples/Blazor.Toolkit.Samples.Client/Pages/Components/Calendars/DatePicker.razor

@@ -133,7 +133,7 @@
 
 <Description>
 	<Header>
-		<h5>Islamic Calendar</h5>
+		<h5>Islamic Mode</h5>
 	</Header>
 	<Content>
 		The DatePicker control supports displaying the <code>Islamic</code> calendar (Hijri calendar). Islamic calendar or Hijri calendar is a lunar calendar consisting of 12 months in a year of 354 or 355 days.Users can either select a date from the Islamic calendar or manually enter a date. Additionally, you can use the ConvertToHijri and ConvertToGregorian methods to parse dates.

samples/Blazor.Toolkit.Samples.Client/Pages/Components/Calendars/TimePicker.razor

@@ -314,9 +314,9 @@
     <TimePickerMaskPlaceholder Hour=""hour"" Minute=""minute"" Second=""second""></TimePickerMaskPlaceholder>
 </SfTimePicker>
 code {
-	public DateTime? MaskTimeValue { get; set; } = new DateTime(2022, 12, 11, 11, 30, 00);
+	public DateTime? MaskTimeValue { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 11, 11, 30, 00);
 }";
-	public DateTime? MaskTimeValue { get; set; } = new DateTime(2022, 12, 11, 11, 30, 00);
+	public DateTime? MaskTimeValue { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 11, 11, 30, 00);
 
 	//TimeOnly
 	private string TimeOnlyCode => @"<SfTimePicker TValue=""TimeOnly"" @bind-Value=""@Value"" PlaceHolder=""Select a time""></SfTimePicker>";

samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/GettingStarted.razor

@@ -51,7 +51,7 @@
         <h5>Include Assets</h5>
     </Header>
     <Content>
-        <p>Include the Syncfusion theme CSS in your layout file (App.razor or _Host.cshtml). Add the following link in the <code>&lt;head&gt;</code> section:</p>
+        <p>Include the Syncfusion theme CSS in your layout file (App.razor or index.html). Add the following link in the <code>&lt;head&gt;</code> section:</p>
         <CodePreview FileName="HTML" IsCodeAlone="true" CodeSection="@CssAssets"></CodePreview>
         <p>Choose a theme that suits your application. Available themes include <code>bootstrap5</code>, <code>fluent</code>, <code>material</code>, and more.</p>
     </Content>

samples/Blazor.Toolkit.Samples.Client/Pages/Components/LayoutSection/NoteSection.razor

@@ -53,4 +53,8 @@
 		line-height: 1.7;
 		color: #3c3240;
 	}
+
+	.page-rtl .note-section__header {
+		direction: rtl;
+	}
 </style>

samples/Blazor.Toolkit.Samples.Client/Pages/Components/Popups/Dialog.razor

@@ -22,7 +22,7 @@
             <div>
                 <SfButton @onclick="@OpenDialog">Open Dialog</SfButton>
             </div>
-            <SfDialog Target="#target" Width="250px" @bind-Visible="@IsVisible" Header="Dialog Header" Content="Here dialog with Content property." ShowCloseIcon="true"></SfDialog>
+            <SfDialog Target="#target" Width="250px" @bind-Visible="@IsVisible" Header="Dialog Header" Content="Here Dialog with Content property." ShowCloseIcon="true"></SfDialog>
         </div>
         <style>
             #target {
@@ -37,7 +37,7 @@
         <h5>Modal Dialog</h5>
     </Header>
     <Content>
-        A modal dialog prevents users from interacting with the rest of the application until the dialog is closed. The <code>IsModal</code> property enables modal behavior by displaying an overlay behind the Dialog, ensuring users must complete their interaction with the Dialog before accessing other application content.
+        A modal Dialog prevents users from interacting with the rest of the application until the Dialog is closed. The <code>IsModal</code> property enables modal behavior by displaying an overlay behind the Dialog, ensuring users must complete their interaction with the Dialog before accessing other application content.
     </Content>
 </Description>
 
@@ -47,7 +47,7 @@
             <div>
                 <SfButton @onclick="@OpenModalDialog">Open Modal Dialog</SfButton>
             </div>
-            <SfDialog Target="#modaltarget" Width="250px" IsModal="true" @bind-Visible="@IsModalVisible" Header="Modal Dialog" Content="This is a modal dialog" ShowCloseIcon="true"></SfDialog>
+            <SfDialog Target="#modaltarget" Width="250px" IsModal="true" @bind-Visible="@IsModalVisible" Header="Modal Dialog" Content="This is a modal Dialog" ShowCloseIcon="true"></SfDialog>
         </div>
         <style>
             #modaltarget {
@@ -153,7 +153,7 @@
         <h5>Resizing Dialog</h5>
     </Header>
     <Content>
-        The resizable dialog can be created by setting the <code>EnableResize</code> property to true, which is used to change the size of a dialog dynamically and view its content with expanded mode. When enabled, users can interact with the dialog’s resize handles to modify its dimensions according to their needs. The <code>ResizeHandles</code> property configures the specific directions in which the dialog can be resized. Resize handles are interactive grip areas positioned on the dialog’s edges and corners that users can drag to modify the dialog dimensions.
+        The resizable Dialog can be created by setting the <code>EnableResize</code> property to true, which is used to change the size of a Dialog dynamically and view its content with expanded mode. When enabled, users can interact with the dialog’s resize handles to modify its dimensions according to their needs. The <code>ResizeHandles</code> property configures the specific directions in which the Dialog can be resized. Resize handles are interactive grip areas positioned on the dialog’s edges and corners that users can drag to modify the Dialog dimensions.
     </Content>
 </Description>
 
@@ -163,7 +163,7 @@
             <div>
                 <SfButton Content="Open Resize Dialog" @onclick="@OpenResizeDialog"></SfButton>
             </div>
-            <SfDialog Target="#target-resize" Width="300px" ShowCloseIcon="true" EnableResize="true" ResizeHandles="@dialogResizeDirections" @bind-Visible="@IsResizeVisible" Header="Resize Dialog" Content="This is a resizing dialog">
+            <SfDialog Target="#target-resize" Width="300px" ShowCloseIcon="true" EnableResize="true" ResizeHandles="@dialogResizeDirections" @bind-Visible="@IsResizeVisible" Header="Resize Dialog" Content="This is a resizing Dialog">
             </SfDialog>
         </div>
 
@@ -181,7 +181,7 @@
         <h5>Draggable Dialog</h5>
     </Header>
     <Content>
-        To enable dragging capabilities, set the <code>AllowDragging</code> property to true on the Dialog component. When enabled, users can drag the dialog by clicking and holding the dialog header area.
+        To enable dragging capabilities, set the <code>AllowDragging</code> property to true on the Dialog component. When enabled, users can drag the Dialog by clicking and holding the Dialog header area.
     </Content>
 </Description>
 
@@ -221,7 +221,7 @@
             <SfDialog Target="#btn-target" Width="250px" ShowCloseIcon="true" @bind-Visible="@IsButtonVisible">
                 <DialogTemplates>
                     <Header> Dialog </Header>
-                    <Content>This is a standard dialog with footer buttons</Content>
+                    <Content>This is a standard Dialog with footer buttons</Content>
                 </DialogTemplates>
                 <DialogButtons>
                     <DialogButton Content="OK" IsPrimary="true" OnClick="@OnOkClick" />
@@ -245,7 +245,7 @@
         <h5>Full Screen</h5>
     </Header>
     <Content>
-        You can show the dialog in full screen by passing <code>true</code> as argument to the dialog <code>ShowAsync</code> method. By using the Visible property, you can prevent the dialog from showing initially.
+        You can show the Dialog in full screen by passing <code>true</code> as argument to the Dialog <code>ShowAsync</code> method. By using the Visible property, you can prevent the Dialog from showing initially.
     </Content>
 </Description>
 
@@ -261,7 +261,7 @@
                 <Content>
                     <div style="padding:16px; line-height:1.7;">
                         <p>General knowledge helps people connect ideas across science, history, geography, technology, and daily life. It is the kind of information that makes conversations easier, decision-making clearer, and learning more enjoyable. For example, knowing how weather changes, why oceans influence climate, or how the internet connects devices gives a broader view of the world around us. Small facts often lead to bigger understanding, and that is why general knowledge remains useful in school, work, and everyday situations.</p>
-                        <p>In a full-screen dialog, this kind of descriptive content works well because it creates room for comfortable reading and smooth scrolling. Users can focus on the message without feeling constrained by a small panel, and the larger layout gives the demo a more polished presentation. A clear header, readable spacing, and meaningful text together improve the visual balance of the component and make the experience feel more complete, modern, and practical.</p>
+                        <p>In a full-screen Dialog, this kind of descriptive content works well because it creates room for comfortable reading and smooth scrolling. Users can focus on the message without feeling constrained by a small panel, and the larger layout gives the demo a more polished presentation. A clear header, readable spacing, and meaningful text together improve the visual balance of the component and make the experience feel more complete, modern, and practical.</p>
                     </div>
                 </Content>
             </DialogTemplates>
@@ -302,14 +302,14 @@
         <h5>Predefined Dialog</h5>
     </Header>
     <Content>
-        <p>The <code>SfDialogService</code> enables predefined dialogs (<b>Alert</b>, <b>Confirm</b>, <b>Prompt</b>) that can be invoked from code without declaring dialog components in each page. To use these features in a real project you must register Syncfusion services and add the dialog provider at app root.</p>
+        <p>The <code>SfDialogService</code> enables Predefined dialogs (<b>Alert</b>, <b>Confirm</b>, <b>Prompt</b>) that can be invoked from code without declaring Dialog components in each page. To use these features in a real project you must register Syncfusion services and add the Dialog provider at app root.</p>
 
         <h6>Register And Dialog Service</h6>
         <p>Add the Syncfusion services and register <code>SfDialogService</code> in <code>Program.cs</code> (or your startup file):</p>
         <CodePreview FileName="Program.cs" IsCodeAlone="true" CodeSection="builder.Services.AddScoped<SfDialogService/>();"></CodePreview>
 
         <h6>Add The Dialog Provider</h6>
-        <p>Place the dialog provider near the root of the app (for example in <code>App.razor</code> or your main layout) so predefined dialogs can render correctly:</p>
+        <p>Place the Dialog provider near the root of the app (for example in <code>App.razor</code> or your main layout) so Predefined dialogs can render correctly:</p>
         <CodePreview FileName="MainLayout.razor" IsCodeAlone="true" CodeSection="<SfDialogProvider/>"></CodePreview>
 
         <p>With these steps completed you can call <code>DialogService.AlertAsync</code>, <code>DialogService.ConfirmAsync</code>, and <code>DialogService.PromptAsync</code> from pages, components or services and capture results via the returned <code>Task</code>.</p>
@@ -335,7 +335,7 @@
     <div>
         <SfButton @onclick=""@OpenDialog"">Open Dialog</SfButton>
     </div>
-    <SfDialog Target=""#target"" Width=""250px"" @bind-Visible=""@IsVisible"" Header=""Dialog Header"" Content=""Here dialog with Content property."" ShowCloseIcon=""true""></SfDialog>
+    <SfDialog Target=""#target"" Width=""250px"" @bind-Visible=""@IsVisible"" Header=""Dialog Header"" Content=""Here Dialog with Content property."" ShowCloseIcon=""true""></SfDialog>
 </div>
     <style>
         #target {
@@ -355,7 +355,7 @@
     <div>
         <SfButton @onclick=""@OpenModalDialog"">Open Modal Dialog</SfButton>
      </div>
-    <SfDialog Target=""#modaltarget"" Width=""250px"" IsModal=""true"" @bind-Visible=""@IsModalVisible"" Header=""Modal Dialog"" Content=""This is a modal dialog"" ShowCloseIcon=""true""></SfDialog>
+    <SfDialog Target=""#modaltarget"" Width=""250px"" IsModal=""true"" @bind-Visible=""@IsModalVisible"" Header=""Modal Dialog"" Content=""This is a modal Dialog"" ShowCloseIcon=""true""></SfDialog>
 </div>
 
 <style>
@@ -402,7 +402,7 @@
     <div>
         <SfButton Content=""Open Resize Dialog"" @onclick=""@OpenResizeDialog""></SfButton>
     </div>
-    <SfDialog Target=""#target-resize"" Width=""300px"" ShowCloseIcon=""true"" EnableResize=""true"" ResizeHandles=""@dialogResizeDirections"" @bind-Visible=""@IsResizeVisible"" Header=""Resize Dialog"" Content=""This is a resizing dialog"">
+    <SfDialog Target=""#target-resize"" Width=""300px"" ShowCloseIcon=""true"" EnableResize=""true"" ResizeHandles=""@dialogResizeDirections"" @bind-Visible=""@IsResizeVisible"" Header=""Resize Dialog"" Content=""This is a resizing Dialog"">
     </SfDialog>
 </div>
 
@@ -428,7 +428,7 @@
     <SfDialog Target=""#btn-target"" Width=""250px"" ShowCloseIcon=""true"" @bind-Visible=""@IsButtonVisible"">
         <DialogTemplates>
             <Header> Dialog </Header>
-            <Content>This is a standard dialog with footer buttons</Content>
+            <Content>This is a standard Dialog with footer buttons</Content>
         </DialogTemplates>
         <DialogButtons>
             <DialogButton Content=""OK"" IsPrimary=""true"" OnClick=""@OnOkClick"" />
@@ -523,7 +523,7 @@
         <Content>
             <div style=""padding:16px; line-height:1.7;"">
                 <p>General knowledge helps people connect ideas across science, history, geography, technology, and daily life. It is the kind of information that makes conversations easier, decision-making clearer, and learning more enjoyable. For example, knowing how weather changes, why oceans influence climate, or how the internet connects devices gives a broader view of the world around us. Small facts often lead to bigger understanding, and that is why general knowledge remains useful in school, work, and everyday situations.</p>
-                <p>In a full-screen dialog, this kind of descriptive content works well because it creates room for comfortable reading and smooth scrolling. Users can focus on the message without feeling constrained by a small panel, and the larger layout gives the demo a more polished presentation. A clear header, readable spacing, and meaningful text together improve the visual balance of the component and make the experience feel more complete, modern, and practical.</p>
+                <p>In a full-screen Dialog, this kind of descriptive content works well because it creates room for comfortable reading and smooth scrolling. Users can focus on the message without feeling constrained by a small panel, and the larger layout gives the demo a more polished presentation. A clear header, readable spacing, and meaningful text together improve the visual balance of the component and make the experience feel more complete, modern, and practical.</p>
             </div>
         </Content>
     </DialogTemplates>

samples/Blazor.Toolkit.Samples.Client/Pages/Getting Started/BlazorWebApp.razor

@@ -101,7 +101,7 @@ cd BlazorWebApp"></CodePreview>
 		<h5>Add Stylesheet Reference</h5>
 	</Header>
 	<Content>
-		<p>Add the Syncfusion Blazor Toolkit theme stylesheet reference to the <code>Head</code> section in your <code>App.razor</code> or <code>_Host.cshtml</code> file:</p>
+		<p>Add the Syncfusion Blazor Toolkit theme stylesheet reference to the <code>Head</code> section in your <code>App.razor</code> file</p>
 		<p><b>Common Stylesheet (All Components)</b></p>
 		<p>Use the combined common stylesheet <code>fluent.min.css</code> which contains base styles and utilities shared across all components. This is the recommended stylesheet for most applications.</p>
 		<CodePreview FileName="App.razor (Common)" IsCodeAlone="true" CodeSection="@AppHeadCommon"></CodePreview>

samples/Blazor.Toolkit.Samples.Client/Pages/Getting Started/BlazorWebAssemblyApp.razor

@@ -81,7 +81,7 @@ cd BlazorWebAssemblyApp"></CodePreview>
 		<h5>Add Stylesheet Reference</h5>
 	</Header>
 	<Content>
-		<p>Add the Syncfusion Blazor Toolkit theme stylesheet reference to the <code>Head</code> section in your <code>index.html</code> file:</p>
+		<p>Add the Syncfusion Blazor Toolkit theme stylesheet reference to the <code>Head</code> section in your <code>index.html</code> file</p>
 		<p><b>Common Stylesheet (All Components)</b></p>
 		<p>Use the combined common stylesheet <code>fluent.min.css</code> which contains base styles and utilities shared across all components. This is the recommended stylesheet for most applications.</p>
 		<CodePreview FileName="index.html (Common)" IsCodeAlone="true" CodeSection="@IndexHeadCommon"></CodePreview>