Update CheckboxThreeStates and FluentCheckbox components

Updated CheckboxThreeStates.razor to include additional FluentCheckbox components and modify existing ones. Renamed variables and added new ones in the @code section. Modified OnInitializedAsync and SetCheckStateChangedAsync methods in FluentCheckbox.razor.cs to handle value changes more effectively.

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Checkbox/Examples/CheckboxThreeStates.razor

@@ -1,17 +1,44 @@
 <div>
-    <FluentCheckbox @bind-CheckState="checkState"
+    <FluentCheckbox @bind-CheckState="checkState1"
+                    @bind-Value="value1"
                     ThreeState="true"
-                    Label="Three state" />
-    - CheckState is @(checkState is null ? "(null indeterminate)" : checkState.Value ? "checked" : "unchecked")
+                    Label="Three state = true" />
+    <span style="width: 50px; display: inline-block" />
+    Value = @value1- CheckState is @(checkState1 is null ? "(null indeterminate)" : checkState1.Value.ToString())
+    <br />
+
+    <FluentCheckbox @bind-Value="value2"
+                    ThreeState="false"
+                    Label="Three state = false" />
+    <span style="width: 50px; display: inline-block" />
+    Value = @value2
     <br />
     <FluentCheckbox @bind-CheckState="checkStateThreeStateOrderUncheckToIntermediate"
+                    @bind-Value="valueThreeStateOrderUncheckToIntermediate"
                     ThreeState="true"
                     ThreeStateOrderUncheckToIntermediate="true"
                     Label="Three state with order uncheck to intermediate" />
-    - CheckState is @(checkStateThreeStateOrderUncheckToIntermediate is null ? "(null indeterminate)" : checkStateThreeStateOrderUncheckToIntermediate.Value ? "checked" : "unchecked")
+    <span style="width: 50px; display: inline-block" />
+    Value: @valueThreeStateOrderUncheckToIntermediate - CheckState is
+    @(checkStateThreeStateOrderUncheckToIntermediate is null ? "(null indeterminate)" : checkStateThreeStateOrderUncheckToIntermediate.Value.ToString())
+
+    <br />
+    <FluentCheckbox @bind-CheckState="checkStateShowIntermediateWithThreeState"
+                    @bind-Value="valueShowIntermediateWithThreeState"
+                    ThreeState="true"
+                    ThreeStateOrderUncheckToIntermediate="true"
+                    Label="Three state with show intermediate" />
+    <span style="width: 50px; display: inline-block" />
+    Value: @valueShowIntermediateWithThreeState - CheckState is
+    @(checkStateShowIntermediateWithThreeState is null ? "(null indeterminate)" : checkStateShowIntermediateWithThreeState.Value.ToString())
 </div>
 
 @code {
-    private bool? checkState = true;
+    private bool? checkState1 = true;
+    private bool value1 = false;
+    private bool value2 = false;
     private bool? checkStateThreeStateOrderUncheckToIntermediate = false;
+    private bool valueThreeStateOrderUncheckToIntermediate = false;
+    private bool valueShowIntermediateWithThreeState = false;
+    private bool? checkStateShowIntermediateWithThreeState = false;
 }

src/Core/Components/Checkbox/FluentCheckbox.razor.cs

@@ -113,7 +113,7 @@ protected override async Task OnInitializedAsync()
 
             if (!ShowIndeterminate)
             {
-                await SetValueChangedAsync(Checked);
+                await SetValueChangedAsync(true);
                 Indeterminate = true;
                 await SetCheckStateChangedAsync(null);
             }
@@ -185,6 +185,15 @@ private async Task SetCheckStateChangedAsync(bool? newValue)
         }
 
         CheckState = newValue;
+        if(newValue is null)
+        {
+            await SetValueChangedAsync(false);
+        }
+        else
+        {
+            await SetValueChangedAsync(newValue.Value);
+        }
+
         if (CheckStateChanged.HasDelegate)
         {
             await CheckStateChanged.InvokeAsync(newValue);