[Stack] Add Reversed parameter

examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml

@@ -9243,6 +9243,11 @@
             Default is <see cref="F:Microsoft.FluentUI.AspNetCore.Components.Orientation.Horizontal"/>.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentStack.Reversed">
+            <summary>
+            Gets or sets a value indicating whether the stack is reversed.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentStack.Width">
             <summary>
             Gets or sets the width of the stack as a percentage string (default = 100%).

examples/Demo/Shared/Pages/Stack/Examples/StackExample.razor

@@ -8,6 +8,9 @@
     <div style="width: 150px;">
         Vertical<FluentListbox Items=@(Enum.GetValues<VerticalAlignment>()) @bind-SelectedOption="@Vertical"  />
     </div>
+    <div style="width: 150px;">
+        <FluentSwitch @bind-Value=Reversed Label=" Reversed" />
+    </div>
 </FluentStack>
 
 <p>Result:</p>
@@ -19,6 +22,7 @@
     <div class="demopanel">Vertical item 1</div>
     <div class="demopanel">Vertical item 2</div>
     <FluentStack Orientation="Orientation.Horizontal"
+                 Reversed="@Reversed"
                      HorizontalAlignment="@Horizontal"
                      VerticalAlignment="@Vertical"
                      HorizontalGap="4"
@@ -32,4 +36,5 @@
 {
     HorizontalAlignment Horizontal;
     VerticalAlignment Vertical;
-}
+    bool Reversed;
+}

src/Core/Components/Stack/FluentStack.razor

@@ -2,6 +2,6 @@
 
 @inherits FluentComponentBase
 
-<div id="@Id" class="@ClassValue" style="@StyleValue" @attributes="AdditionalAttributes">
+<div id="@Id" class="@ClassValue" style="@StyleValue" @attributes="AdditionalAttributes" reverse="@(Reversed == true ? "true" : "false")">
     @ChildContent
-</div>
+</div>

src/Core/Components/Stack/FluentStack.razor.cs

@@ -45,6 +45,12 @@ public partial class FluentStack : FluentComponentBase
     [Parameter]
     public Orientation Orientation { get; set; } = Orientation.Horizontal;
 
+    /// <summary>
+    /// Gets or sets a value indicating whether the stack is reversed.
+    /// </summary>
+    [Parameter]
+    public bool? Reversed { get; set; } = null;
+
     /// <summary>
     /// Gets or sets the width of the stack as a percentage string (default = 100%).
     /// </summary>

src/Core/Components/Stack/FluentStack.razor.css

@@ -1,9 +1,19 @@
-.stack-vertical {
+.stack-vertical {
     display: flex;
     flex-direction: column;
 }
 
 .stack-horizontal {
     display: flex;
     flex-direction: row;
-}
+}
+
+.stack-vertical[reverse='true'] {
+    display: flex;
+    flex-direction: column-reverse;
+}
+
+.stack-horizontal[reverse='true'] {
+    display: flex;
+    flex-direction: row-reverse;
+}