From 45c49481d9d64bc073f0e59ff3220977ac5bed6f Mon Sep 17 00:00:00 2001
From: Carl Mathieu <carlh.mathieu@gmail.com>
Date: Wed, 26 Jul 2023 11:07:24 -0400
Subject: [PATCH] refactor(FloatingActionButton): lightweight styling for
 button

---
 .../Controls/v2/FloatingActionButton.xaml     | 1487 +++++++++--------
 1 file changed, 754 insertions(+), 733 deletions(-)

diff --git a/src/library/Uno.Material/Styles/Controls/v2/FloatingActionButton.xaml b/src/library/Uno.Material/Styles/Controls/v2/FloatingActionButton.xaml
index 11c9a7057..b4f40d148 100644
--- a/src/library/Uno.Material/Styles/Controls/v2/FloatingActionButton.xaml
+++ b/src/library/Uno.Material/Styles/Controls/v2/FloatingActionButton.xaml
@@ -1,735 +1,756 @@
 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-					xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-					xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-					xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-					xmlns:toolkit="using:Uno.UI.Toolkit"
-					xmlns:um="using:Uno.Material"
-					mc:Ignorable="d">
-
-	<ResourceDictionary.ThemeDictionaries>
-		<ResourceDictionary x:Key="Default">
-			<!--#region Default FAB Brushes-->
-			<StaticResource x:Key="FabForeground" ResourceKey="OnPrimaryContainerBrush" />
-			<StaticResource x:Key="FabForegroundPressed" ResourceKey="OnPrimaryContainerBrush" />
-			<StaticResource x:Key="FabForegroundPointerOver" ResourceKey="OnPrimaryContainerBrush" />
-			<StaticResource x:Key="FabForegroundDisabled" ResourceKey="OnSurfaceDisabledBrush" />
-			<StaticResource x:Key="FabBackground" ResourceKey="PrimaryContainerBrush" />
-			<StaticResource x:Key="FabBackgroundPressed" ResourceKey="PrimaryContainerBrush" />
-			<StaticResource x:Key="FabBackgroundPointerOver" ResourceKey="PrimaryContainerBrush" />
-			<StaticResource x:Key="FabBackgroundDisabled" ResourceKey="SystemControlTransparentBrush" />
-			<StaticResource x:Key="FabStateOverlayBackground" ResourceKey="SystemControlTransparentBrush" />
-			<StaticResource x:Key="FabStateOverlayBackgroundPointerOver" ResourceKey="OnPrimaryContainerHoverBrush" />
-			<StaticResource x:Key="FabStateOverlayBackgroundFocused" ResourceKey="OnPrimaryContainerFocusedBrush" />
-			<StaticResource x:Key="FabStateOverlayBackgroundPressed" ResourceKey="OnPrimaryContainerPressedBrush" />
-			<StaticResource x:Key="FabStateOverlayBackgroundDisabled" ResourceKey="OnSurfaceDisabledLowBrush" />
-			<!--#endregion-->
-
-			<!--#region Surface FAB Brushes-->
-			<StaticResource x:Key="FabSurfaceForeground" ResourceKey="OnPrimaryContainerBrush" />
-			<StaticResource x:Key="FabSurfaceForegroundPressed" ResourceKey="OnPrimaryContainerBrush" />
-			<StaticResource x:Key="FabSurfaceForegroundPointerOver" ResourceKey="OnPrimaryContainerBrush" />
-			<StaticResource x:Key="FabSurfaceForegroundDisabled" ResourceKey="OnSurfaceDisabledBrush" />
-			<StaticResource x:Key="FabSurfaceBackground" ResourceKey="SurfaceBrush" />
-			<StaticResource x:Key="FabSurfaceBackgroundPressed" ResourceKey="SurfaceBrush" />
-			<StaticResource x:Key="FabSurfaceBackgroundPointerOver" ResourceKey="SurfaceBrush" />
-			<StaticResource x:Key="FabSurfaceBackgroundDisabled" ResourceKey="SystemControlTransparentBrush" />
-			<StaticResource x:Key="FabSurfaceStateOverlayBackground" ResourceKey="SystemControlTransparentBrush" />
-			<StaticResource x:Key="FabSurfaceStateOverlayBackgroundPointerOver" ResourceKey="PrimaryHoverBrush" />
-			<StaticResource x:Key="FabSurfaceStateOverlayBackgroundFocused" ResourceKey="PrimaryFocusedBrush" />
-			<StaticResource x:Key="FabSurfaceStateOverlayBackgroundPressed" ResourceKey="PrimaryPressedBrush" />
-			<StaticResource x:Key="FabSurfaceStateOverlayBackgroundDisabled" ResourceKey="OnSurfaceDisabledLowBrush" />
-			<!--#endregion-->
-
-			<!--#region Secondary FAB Brushes-->
-			<StaticResource x:Key="FabSecondaryForeground" ResourceKey="OnSecondaryContainerBrush" />
-			<StaticResource x:Key="FabSecondaryForegroundDisabled" ResourceKey="OnSurfaceDisabledBrush" />
-			<StaticResource x:Key="FabSecondaryForegroundPointerOver" ResourceKey="OnSecondaryContainerBrush" />
-			<StaticResource x:Key="FabSecondaryForegroundPressed" ResourceKey="OnSecondaryContainerBrush" />			
-			<StaticResource x:Key="FabSecondaryBackground" ResourceKey="SecondaryContainerBrush" />
-			<StaticResource x:Key="FabSecondaryBackgroundPointerOver" ResourceKey="SecondaryContainerBrush" />
-			<StaticResource x:Key="FabSecondaryBackgroundPressed" ResourceKey="SecondaryContainerBrush" />
-			<StaticResource x:Key="FabSecondaryBackgroundDisabled" ResourceKey="SystemControlTransparentBrush" />
-			<StaticResource x:Key="FabSecondaryStateOverlayBackground" ResourceKey="SystemControlTransparentBrush" />
-			<StaticResource x:Key="FabSecondaryStateOverlayBackgroundPointerOver" ResourceKey="OnSecondaryContainerHoverBrush" />
-			<StaticResource x:Key="FabSecondaryStateOverlayBackgroundFocused" ResourceKey="OnSecondaryContainerFocusedBrush" />
-			<StaticResource x:Key="FabSecondaryStateOverlayBackgroundPressed" ResourceKey="OnSecondaryContainerPressedBrush" />
-			<StaticResource x:Key="FabSecondaryStateOverlayBackgroundDisabled" ResourceKey="OnSurfaceDisabledLowBrush" />
-			<!--#endregion-->
-
-			<!--#region Tertiary FAB Brushes-->
-			<StaticResource x:Key="FabTertiaryForeground" ResourceKey="OnTertiaryContainerBrush" />
-			<StaticResource x:Key="FabTertiaryForegroundPointerOver" ResourceKey="OnTertiaryContainerBrush" />
-			<StaticResource x:Key="FabTertiaryForegroundPressed" ResourceKey="OnTertiaryContainerBrush" />
-			<StaticResource x:Key="FabTertiaryForegroundDisabled" ResourceKey="OnSurfaceDisabledBrush" />
-			<StaticResource x:Key="FabTertiaryBackground" ResourceKey="TertiaryContainerBrush" />
-			<StaticResource x:Key="FabTertiaryBackgroundPointerOver" ResourceKey="TertiaryContainerBrush" />
-			<StaticResource x:Key="FabTertiaryBackgroundPressed" ResourceKey="TertiaryContainerBrush" />
-			<StaticResource x:Key="FabTertiaryBackgroundDisabled" ResourceKey="SystemControlTransparentBrush" />			
-			<StaticResource x:Key="FabTertiaryStateOverlayBackgroundPointerOver" ResourceKey="SystemControlTransparentBrush" />
-			<StaticResource x:Key="FabTertiaryStateOverlayBackgroundFocused" ResourceKey="SystemControlTransparentBrush" />
-			<StaticResource x:Key="FabTertiaryStateOverlayBackgroundPressed" ResourceKey="SystemControlTransparentBrush" />
-			<StaticResource x:Key="FabTertiaryStateOverlayBackgroundDisabled" ResourceKey="OnSurfaceDisabledLowBrush" />
-			<!--#endregion-->
-		</ResourceDictionary>
-
-		<ResourceDictionary x:Key="Light">
-			<!--#region Default FAB Brushes-->
-			<StaticResource x:Key="FabForeground" ResourceKey="OnPrimaryContainerBrush" />
-			<StaticResource x:Key="FabForegroundPressed" ResourceKey="OnPrimaryContainerBrush" />
-			<StaticResource x:Key="FabForegroundPointerOver" ResourceKey="OnPrimaryContainerBrush" />
-			<StaticResource x:Key="FabForegroundDisabled" ResourceKey="OnSurfaceDisabledBrush" />
-			<StaticResource x:Key="FabBackground" ResourceKey="PrimaryContainerBrush" />
-			<StaticResource x:Key="FabBackgroundPressed" ResourceKey="PrimaryContainerBrush" />
-			<StaticResource x:Key="FabBackgroundPointerOver" ResourceKey="PrimaryContainerBrush" />
-			<StaticResource x:Key="FabBackgroundDisabled" ResourceKey="SystemControlTransparentBrush" />
-			<StaticResource x:Key="FabStateOverlayBackground" ResourceKey="SystemControlTransparentBrush" />
-			<StaticResource x:Key="FabStateOverlayBackgroundPointerOver" ResourceKey="OnPrimaryContainerHoverBrush" />
-			<StaticResource x:Key="FabStateOverlayBackgroundFocused" ResourceKey="OnPrimaryContainerFocusedBrush" />
-			<StaticResource x:Key="FabStateOverlayBackgroundPressed" ResourceKey="OnPrimaryContainerPressedBrush" />
-			<StaticResource x:Key="FabStateOverlayBackgroundDisabled" ResourceKey="OnSurfaceDisabledLowBrush" />
-			<!--#endregion-->
-
-			<!--#region Surface FAB Brushes-->
-			<StaticResource x:Key="FabSurfaceForeground" ResourceKey="OnPrimaryContainerBrush" />
-			<StaticResource x:Key="FabSurfaceForegroundPressed" ResourceKey="OnPrimaryContainerBrush" />
-			<StaticResource x:Key="FabSurfaceForegroundPointerOver" ResourceKey="OnPrimaryContainerBrush" />
-			<StaticResource x:Key="FabSurfaceForegroundDisabled" ResourceKey="OnSurfaceDisabledBrush" />
-			<StaticResource x:Key="FabSurfaceBackground" ResourceKey="SurfaceBrush" />
-			<StaticResource x:Key="FabSurfaceBackgroundPressed" ResourceKey="SurfaceBrush" />
-			<StaticResource x:Key="FabSurfaceBackgroundPointerOver" ResourceKey="SurfaceBrush" />
-			<StaticResource x:Key="FabSurfaceBackgroundDisabled" ResourceKey="SystemControlTransparentBrush" />
-			<StaticResource x:Key="FabSurfaceStateOverlayBackground" ResourceKey="SystemControlTransparentBrush" />
-			<StaticResource x:Key="FabSurfaceStateOverlayBackgroundPointerOver" ResourceKey="PrimaryHoverBrush" />
-			<StaticResource x:Key="FabSurfaceStateOverlayBackgroundFocused" ResourceKey="PrimaryFocusedBrush" />
-			<StaticResource x:Key="FabSurfaceStateOverlayBackgroundPressed" ResourceKey="PrimaryPressedBrush" />
-			<StaticResource x:Key="FabSurfaceStateOverlayBackgroundDisabled" ResourceKey="OnSurfaceDisabledLowBrush" />
-			<!--#endregion-->
-
-			<!--#region Secondary FAB Brushes-->
-			<StaticResource x:Key="FabSecondaryForeground" ResourceKey="OnSecondaryContainerBrush" />
-			<StaticResource x:Key="FabSecondaryForegroundDisabled" ResourceKey="OnSurfaceDisabledBrush" />
-			<StaticResource x:Key="FabSecondaryForegroundPointerOver" ResourceKey="OnSecondaryContainerBrush" />
-			<StaticResource x:Key="FabSecondaryForegroundPressed" ResourceKey="OnSecondaryContainerBrush" />			
-			<StaticResource x:Key="FabSecondaryBackground" ResourceKey="SecondaryContainerBrush" />
-			<StaticResource x:Key="FabSecondaryBackgroundPointerOver" ResourceKey="SecondaryContainerBrush" />
-			<StaticResource x:Key="FabSecondaryBackgroundPressed" ResourceKey="SecondaryContainerBrush" />
-			<StaticResource x:Key="FabSecondaryBackgroundDisabled" ResourceKey="SystemControlTransparentBrush" />
-			<StaticResource x:Key="FabSecondaryStateOverlayBackground" ResourceKey="SystemControlTransparentBrush" />
-			<StaticResource x:Key="FabSecondaryStateOverlayBackgroundPointerOver" ResourceKey="OnSecondaryContainerHoverBrush" />
-			<StaticResource x:Key="FabSecondaryStateOverlayBackgroundFocused" ResourceKey="OnSecondaryContainerFocusedBrush" />
-			<StaticResource x:Key="FabSecondaryStateOverlayBackgroundPressed" ResourceKey="OnSecondaryContainerPressedBrush" />
-			<StaticResource x:Key="FabSecondaryStateOverlayBackgroundDisabled" ResourceKey="OnSurfaceDisabledLowBrush" />
-			<!--#endregion-->
-
-			<!--#region Tertiary FAB Brushes-->
-			<StaticResource x:Key="FabTertiaryForeground" ResourceKey="OnTertiaryContainerBrush" />
-			<StaticResource x:Key="FabTertiaryForegroundPointerOver" ResourceKey="OnTertiaryContainerBrush" />
-			<StaticResource x:Key="FabTertiaryForegroundPressed" ResourceKey="OnTertiaryContainerBrush" />
-			<StaticResource x:Key="FabTertiaryForegroundDisabled" ResourceKey="OnSurfaceDisabledBrush" />
-			<StaticResource x:Key="FabTertiaryBackground" ResourceKey="TertiaryContainerBrush" />
-			<StaticResource x:Key="FabTertiaryBackgroundPointerOver" ResourceKey="TertiaryContainerBrush" />
-			<StaticResource x:Key="FabTertiaryBackgroundPressed" ResourceKey="TertiaryContainerBrush" />
-			<StaticResource x:Key="FabTertiaryBackgroundDisabled" ResourceKey="SystemControlTransparentBrush" />			
-			<StaticResource x:Key="FabTertiaryStateOverlayBackgroundPointerOver" ResourceKey="SystemControlTransparentBrush" />
-			<StaticResource x:Key="FabTertiaryStateOverlayBackgroundFocused" ResourceKey="SystemControlTransparentBrush" />
-			<StaticResource x:Key="FabTertiaryStateOverlayBackgroundPressed" ResourceKey="SystemControlTransparentBrush" />
-			<StaticResource x:Key="FabTertiaryStateOverlayBackgroundDisabled" ResourceKey="OnSurfaceDisabledLowBrush" />
-			<!--#endregion-->
-		</ResourceDictionary>
-	</ResourceDictionary.ThemeDictionaries>
-
-	<!--#region Default FAB Resources-->
-	<Thickness x:Key="MaterialFabPadding">20</Thickness>
-	<x:Double x:Key="MaterialFabContentWidthOrHeight">16</x:Double>
-	<CornerRadius x:Key="MaterialFabCornerRadius">16</CornerRadius>
-	<!--#endregion-->
-
-	<!--#region Small FAB Resources-->
-	<Thickness x:Key="MaterialSmallFabPadding">12</Thickness>
-	<x:Double x:Key="MaterialSmallFabContentWidthOrHeight">16</x:Double>
-	<CornerRadius x:Key="MaterialSmallFabCornerRadius">12</CornerRadius>
-
-	<!--#endregion-->
-
-	<!--#region Large FAB Resources-->
-	<Thickness x:Key="MaterialLargeFabPadding">36</Thickness>
-	<x:Double x:Key="MaterialLargeFabContentWidthOrHeight">24</x:Double>
-	<CornerRadius x:Key="MaterialLargeFabCornerRadius">28</CornerRadius>
-	<!--#endregion-->
-
-	<x:Double x:Key="MaterialFabIconTextPadding">12</x:Double>
-
-
-	<!--#region Default Color Variants-->
-	<Style x:Key="MaterialFabStyle"
-		   TargetType="Button">
-		<Setter Property="Background" Value="{ThemeResource FabBackground}" />
-		<Setter Property="Foreground" Value="{ThemeResource FabForeground}" />
-		<Setter Property="FontFamily" Value="{ThemeResource MaterialMediumFontFamily}" />
-		<Setter Property="FontSize" Value="{ThemeResource LabelLargeFontSize}" />
-		<Setter Property="FontWeight" Value="{ThemeResource LabelLargeFontWeight}" />
-		<Setter Property="HorizontalContentAlignment" Value="Center" />
-		<Setter Property="VerticalContentAlignment" Value="Center" />
-		<Setter Property="CornerRadius" Value="{StaticResource MaterialFabCornerRadius}" />
-		<Setter Property="Padding" Value="{StaticResource MaterialFabPadding}" />
-
-		<!-- Workaround for WinUI issue: https://github.com/microsoft/microsoft-ui-xaml/issues/6388 -->
-		<Setter Property="um:ControlExtensions.Icon" Value="{x:Null}" />
-		<Setter Property="um:ControlExtensions.IconHeight" Value="{StaticResource MaterialFabContentWidthOrHeight}" />
-		<Setter Property="um:ControlExtensions.IconWidth" Value="{StaticResource MaterialFabContentWidthOrHeight}" />
-
-		<Setter Property="Template">
-			<Setter.Value>
-				<ControlTemplate TargetType="Button">
-					<Grid>
-						<toolkit:ElevatedView x:Name="ElevatedView"
-											  Margin="0,0,6,6"
-											  Background="Transparent"
-											  CornerRadius="{TemplateBinding CornerRadius}"
-											  Elevation="6">
-							<um:Ripple x:Name="Ripple"
-									   CornerRadius="{TemplateBinding CornerRadius}"
-									   Feedback="{TemplateBinding Foreground}"
-									   FeedbackOpacity="{StaticResource PressedOpacity}">
-
-								<Grid x:Name="Root"
-									  BorderBrush="{TemplateBinding BorderBrush}"
-									  BorderThickness="{TemplateBinding BorderThickness}"
-									  CornerRadius="{TemplateBinding CornerRadius}"
-									  Background="{TemplateBinding Background}">
-									<StackPanel x:Name="ContentPanel"
-												Padding="{TemplateBinding Padding}"
-												Orientation="Horizontal">
-
-										<!-- Icon -->
-										<Viewbox Width="{Binding Path=(um:ControlExtensions.IconWidth), RelativeSource={RelativeSource TemplatedParent}}"
-												 Height="{Binding Path=(um:ControlExtensions.IconHeight), RelativeSource={RelativeSource TemplatedParent}}"
-												 HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-												 VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-												 Visibility="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialNullToCollapsedConverter}, FallbackValue=Collapsed, TargetNullValue=Collapsed}">
-											<ContentPresenter x:Name="IconPresenter"
-															  Content="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}}"
-															  Foreground="{Binding Path=Foreground, RelativeSource={RelativeSource TemplatedParent}}" />
-										</Viewbox>
-
-										<!-- Icon/Content spacing -->
-										<Border Visibility="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialEmptyToCollapsed}, FallbackValue=Collapsed, TargetNullValue=Collapsed}">
-											<Border Width="{StaticResource MaterialFabIconTextPadding}"
-													Visibility="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialNullToCollapsedConverter}, FallbackValue=Collapsed, TargetNullValue=Collapsed}" />
-										</Border>
-
-										<!-- Content -->
-										<ContentPresenter x:Name="ContentPresenter"
-														  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-														  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-														  Content="{TemplateBinding Content}"
-														  ContentTemplate="{TemplateBinding ContentTemplate}"
-														  ContentTransitions="{TemplateBinding ContentTransitions}"
-														  FontFamily="{TemplateBinding FontFamily}"
-														  FontWeight="{TemplateBinding FontWeight}"
-														  FontSize="{TemplateBinding FontSize}" />
-									</StackPanel>
-
-									<Border x:Name="StateOverlay" />
-								</Grid>
-							</um:Ripple>
-						</toolkit:ElevatedView>
-
-						<VisualStateManager.VisualStateGroups>
-							<VisualStateGroup x:Name="CommonStates">
-
-								<VisualState x:Name="Normal" />
-
-								<VisualState x:Name="PointerOver">
-									<VisualState.Setters>
-										<Setter Target="StateOverlay.Background" Value="{ThemeResource FabStateOverlayBackgroundPointerOver}" />
-										<Setter Target="IconPresenter.Foreground" Value="{ThemeResource FabForegroundPointerOver}" />
-										<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource FabForegroundPointerOver}" />
-										<Setter Target="Root.Background" Value="{ThemeResource FabBackgroundPointerOver}" />
-									</VisualState.Setters>
-								</VisualState>
-								<VisualState x:Name="Pressed">
-									<VisualState.Setters>
-										<Setter Target="StateOverlay.Background" Value="{ThemeResource FabStateOverlayBackgroundPressed}" />
-										<Setter Target="IconPresenter.Foreground" Value="{ThemeResource FabForegroundPressed}" />
-										<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource FabForegroundPressed}" />
-										<Setter Target="Root.Background" Value="{ThemeResource FabBackgroundPressed}" />
-									</VisualState.Setters>
-								</VisualState>
-								<VisualState x:Name="Disabled">
-									<VisualState.Setters>
-										<Setter Target="IconPresenter.Foreground" Value="{ThemeResource FabForegroundDisabled}" />
-										<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource FabForegroundDisabled}" />
-										<Setter Target="Root.Background" Value="{ThemeResource FabBackgroundDisabled}" />
-										<Setter Target="StateOverlay.Background" Value="{ThemeResource FabStateOverlayBackgroundDisabled}" />
-									</VisualState.Setters>
-								</VisualState>
-							</VisualStateGroup>
-
-							<VisualStateGroup x:Name="FocusStates">
-
-								<VisualState x:Name="Focused">
-									<VisualState.Setters>
-										<Setter Target="StateOverlay.Background" Value="{ThemeResource FabStateOverlayBackgroundFocused}" />
-									</VisualState.Setters>
-								</VisualState>
-
-								<VisualState x:Name="PointerFocused" />
-
-								<VisualState x:Name="Unfocused" />
-							</VisualStateGroup>
-						</VisualStateManager.VisualStateGroups>
-					</Grid>
-				</ControlTemplate>
-			</Setter.Value>
-		</Setter>
-	</Style>
-
-	<Style x:Key="MaterialSurfaceFabStyle"
-		   BasedOn="{StaticResource MaterialFabStyle}"
-		   TargetType="Button">
-
-		<Setter Property="Background" Value="{ThemeResource FabSurfaceBackground}" />
-		<Setter Property="Foreground" Value="{ThemeResource FabSurfaceForeground}" />
-		<Setter Property="FontFamily" Value="{ThemeResource MaterialMediumFontFamily}" />
-		<Setter Property="HorizontalContentAlignment" Value="Center" />
-		<Setter Property="VerticalContentAlignment" Value="Center" />
-		<Setter Property="CornerRadius" Value="{StaticResource MaterialFabCornerRadius}" />
-		<Setter Property="Padding" Value="{StaticResource MaterialFabPadding}" />
-
-		<!-- Workaround for WinUI issue: https://github.com/microsoft/microsoft-ui-xaml/issues/6388 -->
-		<Setter Property="um:ControlExtensions.Icon" Value="{x:Null}" />
-		<Setter Property="um:ControlExtensions.IconHeight" Value="{StaticResource MaterialFabContentWidthOrHeight}" />
-		<Setter Property="um:ControlExtensions.IconWidth" Value="{StaticResource MaterialFabContentWidthOrHeight}" />
-
-		<Setter Property="Template">
-			<Setter.Value>
-				<ControlTemplate TargetType="Button">
-					<Grid>
-						<toolkit:ElevatedView x:Name="ElevatedView"
-											  Margin="0,0,6,6"
-											  Background="Transparent"
-											  CornerRadius="{TemplateBinding CornerRadius}"
-											  Elevation="6">
-							<um:Ripple x:Name="Ripple"
-									   CornerRadius="{TemplateBinding CornerRadius}"
-									   Feedback="{TemplateBinding Foreground}"
-									   FeedbackOpacity="{StaticResource PressedOpacity}">
-
-								<Grid x:Name="Root"
-									  BorderBrush="{TemplateBinding BorderBrush}"
-									  BorderThickness="{TemplateBinding BorderThickness}"
-									  CornerRadius="{TemplateBinding CornerRadius}"
-									  Background="{TemplateBinding Background}">
-									<StackPanel x:Name="ContentPanel"
-												Padding="{TemplateBinding Padding}"
-												Orientation="Horizontal">
-
-										<!-- Icon -->
-										<Viewbox Width="{Binding Path=(um:ControlExtensions.IconWidth), RelativeSource={RelativeSource TemplatedParent}}"
-												 Height="{Binding Path=(um:ControlExtensions.IconHeight), RelativeSource={RelativeSource TemplatedParent}}"
-												 HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-												 VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-												 Visibility="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialNullToCollapsedConverter}, FallbackValue=Collapsed, TargetNullValue=Collapsed}">
-											<ContentPresenter x:Name="IconPresenter"
-															  Content="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}}"
-															  Foreground="{Binding Path=Foreground, RelativeSource={RelativeSource TemplatedParent}}" />
-										</Viewbox>
-
-										<!-- Icon/Content spacing -->
-										<Border Visibility="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialEmptyToCollapsed}, FallbackValue=Collapsed, TargetNullValue=Collapsed}">
-											<Border Width="{StaticResource MaterialFabIconTextPadding}"
-													Visibility="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialNullToCollapsedConverter}, FallbackValue=Collapsed, TargetNullValue=Collapsed}" />
-										</Border>
-
-										<!-- Content -->
-										<ContentPresenter x:Name="ContentPresenter"
-														  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-														  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-														  Content="{TemplateBinding Content}"
-														  ContentTemplate="{TemplateBinding ContentTemplate}"
-														  ContentTransitions="{TemplateBinding ContentTransitions}"
-														  FontFamily="{TemplateBinding FontFamily}"
-														  FontWeight="{TemplateBinding FontWeight}"
-														  FontSize="{TemplateBinding FontSize}" />
-									</StackPanel>
-
-									<Border x:Name="StateOverlay" />
-								</Grid>
-							</um:Ripple>
-						</toolkit:ElevatedView>
-
-						<VisualStateManager.VisualStateGroups>
-							<VisualStateGroup x:Name="CommonStates">
-
-								<VisualState x:Name="Normal" />
-
-								<VisualState x:Name="PointerOver">
-									<VisualState.Setters>
-										<Setter Target="StateOverlay.Background" Value="{ThemeResource FabSurfaceStateOverlayBackgroundPointerOver}" />
-										<Setter Target="IconPresenter.Foreground" Value="{ThemeResource FabSurfaceForegroundPointerOver}" />
-										<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource FabSurfaceForegroundPointerOver}" />
-										<Setter Target="Root.Background" Value="{ThemeResource FabSurfaceBackgroundPointerOver}" />
-									</VisualState.Setters>
-								</VisualState>
-								<VisualState x:Name="Pressed">
-									<VisualState.Setters>
-										<Setter Target="StateOverlay.Background" Value="{ThemeResource FabSurfaceStateOverlayBackgroundPressed}" />
-										<Setter Target="IconPresenter.Foreground" Value="{ThemeResource FabSurfaceForegroundPressed}" />
-										<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource FabSurfaceForegroundPressed}" />
-										<Setter Target="Root.Background" Value="{ThemeResource FabSurfaceBackgroundPressed}" />
-									</VisualState.Setters>
-								</VisualState>
-								<VisualState x:Name="Disabled">
-									<VisualState.Setters>
-										<Setter Target="IconPresenter.Foreground" Value="{ThemeResource FabSurfaceForegroundDisabled}" />
-										<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource FabSurfaceForegroundDisabled}" />
-										<Setter Target="Root.Background" Value="{ThemeResource FabSurfaceBackgroundDisabled}" />
-										<Setter Target="StateOverlay.Background" Value="{ThemeResource FabSurfaceStateOverlayBackgroundDisabled}" />
-									</VisualState.Setters>
-								</VisualState>
-							</VisualStateGroup>
-
-							<VisualStateGroup x:Name="FocusStates">
-
-								<VisualState x:Name="Focused">
-									<VisualState.Setters>
-										<Setter Target="StateOverlay.Background" Value="{ThemeResource FabSurfaceStateOverlayBackgroundFocused}" />
-									</VisualState.Setters>
-								</VisualState>
-
-								<VisualState x:Name="PointerFocused" />
-
-								<VisualState x:Name="Unfocused" />
-							</VisualStateGroup>
-						</VisualStateManager.VisualStateGroups>
-					</Grid>
-				</ControlTemplate>
-			</Setter.Value>
-		</Setter>
-	</Style>
-
-	<Style x:Key="MaterialSecondaryFabStyle"
-		   BasedOn="{StaticResource MaterialFabStyle}"
-		   TargetType="Button">
-
-		<Setter Property="Background" Value="{ThemeResource FabSecondaryBackground}" />
-		<Setter Property="Foreground" Value="{ThemeResource FabSecondaryForeground}" />
-		<Setter Property="FontFamily" Value="{ThemeResource MaterialMediumFontFamily}" />
-		<Setter Property="HorizontalContentAlignment" Value="Center" />
-		<Setter Property="VerticalContentAlignment" Value="Center" />
-		<Setter Property="CornerRadius" Value="{StaticResource MaterialFabCornerRadius}" />
-		<Setter Property="Padding" Value="{StaticResource MaterialFabPadding}" />
-
-		<!-- Workaround for WinUI issue: https://github.com/microsoft/microsoft-ui-xaml/issues/6388 -->
-		<Setter Property="um:ControlExtensions.Icon" Value="{x:Null}" />
-		<Setter Property="um:ControlExtensions.IconHeight" Value="{StaticResource MaterialFabContentWidthOrHeight}" />
-		<Setter Property="um:ControlExtensions.IconWidth" Value="{StaticResource MaterialFabContentWidthOrHeight}" />
-
-		<Setter Property="Template">
-			<Setter.Value>
-				<ControlTemplate TargetType="Button">
-					<Grid>
-						<toolkit:ElevatedView x:Name="ElevatedView"
-											  Margin="0,0,6,6"
-											  Background="Transparent"
-											  CornerRadius="{TemplateBinding CornerRadius}"
-											  Elevation="6">
-							<um:Ripple x:Name="Ripple"
-									   CornerRadius="{TemplateBinding CornerRadius}"
-									   Feedback="{TemplateBinding Foreground}"
-									   FeedbackOpacity="{StaticResource PressedOpacity}">
-
-								<Grid x:Name="Root"
-									  BorderBrush="{TemplateBinding BorderBrush}"
-									  BorderThickness="{TemplateBinding BorderThickness}"
-									  CornerRadius="{TemplateBinding CornerRadius}"
-									  Background="{TemplateBinding Background}">
-									<StackPanel x:Name="ContentPanel"
-												Padding="{TemplateBinding Padding}"
-												Orientation="Horizontal">
-
-										<!-- Icon -->
-										<Viewbox Width="{Binding Path=(um:ControlExtensions.IconWidth), RelativeSource={RelativeSource TemplatedParent}}"
-												 Height="{Binding Path=(um:ControlExtensions.IconHeight), RelativeSource={RelativeSource TemplatedParent}}"
-												 HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-												 VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-												 Visibility="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialNullToCollapsedConverter}, FallbackValue=Collapsed, TargetNullValue=Collapsed}">
-											<ContentPresenter x:Name="IconPresenter"
-															  Content="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}}"
-															  Foreground="{Binding Path=Foreground, RelativeSource={RelativeSource TemplatedParent}}" />
-										</Viewbox>
-
-										<!-- Icon/Content spacing -->
-										<Border Visibility="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialEmptyToCollapsed}, FallbackValue=Collapsed, TargetNullValue=Collapsed}">
-											<Border Width="{StaticResource MaterialFabIconTextPadding}"
-													Visibility="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialNullToCollapsedConverter}, FallbackValue=Collapsed, TargetNullValue=Collapsed}" />
-										</Border>
-
-										<!-- Content -->
-										<ContentPresenter x:Name="ContentPresenter"
-														  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-														  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-														  Content="{TemplateBinding Content}"
-														  ContentTemplate="{TemplateBinding ContentTemplate}"
-														  ContentTransitions="{TemplateBinding ContentTransitions}"
-														  FontFamily="{TemplateBinding FontFamily}"
-														  FontWeight="{TemplateBinding FontWeight}"
-														  FontSize="{TemplateBinding FontSize}" />
-									</StackPanel>
-
-									<Border x:Name="StateOverlay" />
-								</Grid>
-							</um:Ripple>
-						</toolkit:ElevatedView>
-
-						<VisualStateManager.VisualStateGroups>
-							<VisualStateGroup x:Name="CommonStates">
-
-								<VisualState x:Name="Normal" />
-
-								<VisualState x:Name="PointerOver">
-									<VisualState.Setters>
-										<Setter Target="IconPresenter.Foreground" Value="{ThemeResource FabSecondaryForegroundPointerOver}" />
-										<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource FabSecondaryForegroundPointerOver}" />
-										<Setter Target="Root.Background" Value="{ThemeResource FabSecondaryBackgroundPointerOver}" />
-										<Setter Target="StateOverlay.Background" Value="{ThemeResource FabSecondaryStateOverlayBackgroundPointerOver}" />
-									</VisualState.Setters>
-								</VisualState>
-								<VisualState x:Name="Pressed">
-									<VisualState.Setters>
-										<Setter Target="IconPresenter.Foreground" Value="{ThemeResource FabSecondaryForegroundPressed}" />
-										<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource FabSecondaryForegroundPressed}" />
-										<Setter Target="Root.Background" Value="{ThemeResource FabSecondaryBackgroundPressed}" />
-										<Setter Target="StateOverlay.Background" Value="{ThemeResource FabSecondaryStateOverlayBackgroundPressed}" />
-									</VisualState.Setters>
-								</VisualState>
-								<VisualState x:Name="Disabled">
-									<VisualState.Setters>
-										<Setter Target="IconPresenter.Foreground" Value="{ThemeResource FabSecondaryForegroundDisabled}" />
-										<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource FabSecondaryForegroundDisabled}" />
-										<Setter Target="Root.Background" Value="{ThemeResource FabSecondaryBackgroundDisabled}" />
-										<Setter Target="StateOverlay.Background" Value="{ThemeResource FabSecondaryStateOverlayBackgroundDisabled}" />
-									</VisualState.Setters>
-								</VisualState>
-							</VisualStateGroup>
-
-							<VisualStateGroup x:Name="FocusStates">
-
-								<VisualState x:Name="Focused">
-									<VisualState.Setters>
-										<Setter Target="StateOverlay.Background" Value="{ThemeResource FabSecondaryStateOverlayBackgroundFocused}" />
-									</VisualState.Setters>
-								</VisualState>
-
-								<VisualState x:Name="PointerFocused" />
-
-								<VisualState x:Name="Unfocused" />
-							</VisualStateGroup>
-						</VisualStateManager.VisualStateGroups>
-					</Grid>
-				</ControlTemplate>
-			</Setter.Value>
-		</Setter>
-	</Style>
-
-	<Style x:Key="MaterialTertiaryFabStyle"
-		   BasedOn="{StaticResource MaterialFabStyle}"
-		   TargetType="Button">
-
-		<Setter Property="Background" Value="{ThemeResource FabTertiaryBackground}" />
-		<Setter Property="Foreground" Value="{ThemeResource FabTertiaryForeground}" />
-		<Setter Property="FontFamily" Value="{ThemeResource MaterialMediumFontFamily}" />
-		<Setter Property="HorizontalContentAlignment" Value="Center" />
-		<Setter Property="VerticalContentAlignment" Value="Center" />
-		<Setter Property="CornerRadius" Value="{StaticResource MaterialFabCornerRadius}" />
-		<Setter Property="Padding" Value="{StaticResource MaterialFabPadding}" />
-
-		<!-- Workaround for WinUI issue: https://github.com/microsoft/microsoft-ui-xaml/issues/6388 -->
-		<Setter Property="um:ControlExtensions.Icon" Value="{x:Null}" />
-		<Setter Property="um:ControlExtensions.IconHeight" Value="{StaticResource MaterialFabContentWidthOrHeight}" />
-		<Setter Property="um:ControlExtensions.IconWidth" Value="{StaticResource MaterialFabContentWidthOrHeight}" />
-
-		<Setter Property="Template">
-			<Setter.Value>
-				<ControlTemplate TargetType="Button">
-					<Grid>
-						<toolkit:ElevatedView x:Name="ElevatedView"
-											  Margin="0,0,6,6"
-											  Background="Transparent"
-											  CornerRadius="{TemplateBinding CornerRadius}"
-											  Elevation="6">
-							<um:Ripple x:Name="Ripple"
-									   CornerRadius="{TemplateBinding CornerRadius}"
-									   Feedback="{TemplateBinding Foreground}"
-									   FeedbackOpacity="{StaticResource PressedOpacity}">
-
-								<Grid x:Name="Root"
-									  BorderBrush="{TemplateBinding BorderBrush}"
-									  BorderThickness="{TemplateBinding BorderThickness}"
-									  CornerRadius="{TemplateBinding CornerRadius}"
-									  Background="{TemplateBinding Background}">
-									<StackPanel x:Name="ContentPanel"
-												Padding="{TemplateBinding Padding}"
-												Orientation="Horizontal">
-
-										<!-- Icon -->
-										<Viewbox Width="{Binding Path=(um:ControlExtensions.IconWidth), RelativeSource={RelativeSource TemplatedParent}}"
-												 Height="{Binding Path=(um:ControlExtensions.IconHeight), RelativeSource={RelativeSource TemplatedParent}}"
-												 HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-												 VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-												 Visibility="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialNullToCollapsedConverter}, FallbackValue=Collapsed, TargetNullValue=Collapsed}">
-											<ContentPresenter x:Name="IconPresenter"
-															  Content="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}}"
-															  Foreground="{Binding Path=Foreground, RelativeSource={RelativeSource TemplatedParent}}" />
-										</Viewbox>
-
-										<!-- Icon/Content spacing -->
-										<Border Visibility="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialEmptyToCollapsed}, FallbackValue=Collapsed, TargetNullValue=Collapsed}">
-											<Border Width="{StaticResource MaterialFabIconTextPadding}"
-													Visibility="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialNullToCollapsedConverter}, FallbackValue=Collapsed, TargetNullValue=Collapsed}" />
-										</Border>
-
-										<!-- Content -->
-										<ContentPresenter x:Name="ContentPresenter"
-														  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-														  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-														  Content="{TemplateBinding Content}"
-														  ContentTemplate="{TemplateBinding ContentTemplate}"
-														  ContentTransitions="{TemplateBinding ContentTransitions}"
-														  FontFamily="{TemplateBinding FontFamily}"
-														  FontWeight="{TemplateBinding FontWeight}"
-														  FontSize="{TemplateBinding FontSize}" />
-									</StackPanel>
-
-									<Border x:Name="StateOverlay" />
-								</Grid>
-							</um:Ripple>
-						</toolkit:ElevatedView>
-
-						<VisualStateManager.VisualStateGroups>
-							<VisualStateGroup x:Name="CommonStates">
-
-								<VisualState x:Name="Normal" />
-
-								<VisualState x:Name="PointerOver">
-									<VisualState.Setters>
-										<Setter Target="IconPresenter.Foreground" Value="{ThemeResource FabTertiaryForegroundPointerOver}" />
-										<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource FabTertiaryForegroundPointerOver}" />
-										<Setter Target="Root.Background" Value="{ThemeResource FabTertiaryBackgroundPointerOver}" />
-										<Setter Target="StateOverlay.Background" Value="{ThemeResource FabTertiaryStateOverlayBackgroundPointerOver}" />
-									</VisualState.Setters>
-								</VisualState>
-								<VisualState x:Name="Pressed">
-									<VisualState.Setters>
-										<Setter Target="IconPresenter.Foreground" Value="{ThemeResource FabTertiaryForegroundPressed}" />
-										<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource FabTertiaryForegroundPressed}" />
-										<Setter Target="Root.Background" Value="{ThemeResource FabTertiaryBackgroundPressed}" />
-										<Setter Target="StateOverlay.Background" Value="{ThemeResource FabTertiaryStateOverlayBackgroundPressed}" />
-									</VisualState.Setters>
-								</VisualState>
-								<VisualState x:Name="Disabled">
-									<VisualState.Setters>
-										<Setter Target="IconPresenter.Foreground" Value="{ThemeResource FabTertiaryForegroundDisabled}" />
-										<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource FabTertiaryForegroundDisabled}" />
-										<Setter Target="Root.Background" Value="{ThemeResource FabTertiaryBackgroundDisabled}" />
-										<Setter Target="StateOverlay.Background" Value="{ThemeResource FabTertiaryStateOverlayBackgroundDisabled}" />
-									</VisualState.Setters>
-								</VisualState>
-							</VisualStateGroup>
-
-							<VisualStateGroup x:Name="FocusStates">
-
-								<VisualState x:Name="Focused">
-									<VisualState.Setters>
-										<Setter Target="StateOverlay.Background" Value="{ThemeResource FabTertiaryStateOverlayBackgroundFocused}" />
-									</VisualState.Setters>
-								</VisualState>
-
-								<VisualState x:Name="PointerFocused" />
-
-								<VisualState x:Name="Unfocused" />
-							</VisualStateGroup>
-						</VisualStateManager.VisualStateGroups>
-					</Grid>
-				</ControlTemplate>
-			</Setter.Value>
-		</Setter>
-	</Style>
-	<!--#endregion-->
-
-	<!--#region Small Color Variants-->
-
-	<Style x:Key="MaterialSmallFabStyle"
-		   BasedOn="{StaticResource MaterialFabStyle}"
-		   TargetType="Button">
-		<Setter Property="CornerRadius" Value="{StaticResource MaterialSmallFabCornerRadius}" />
-		<Setter Property="Padding" Value="{StaticResource MaterialSmallFabPadding}" />
-		<Setter Property="um:ControlExtensions.IconHeight" Value="{StaticResource MaterialSmallFabContentWidthOrHeight}" />
-		<Setter Property="um:ControlExtensions.IconWidth" Value="{StaticResource MaterialSmallFabContentWidthOrHeight}" />
-	</Style>
-
-	<Style x:Key="MaterialSurfaceSmallFabStyle"
-		   BasedOn="{StaticResource MaterialSurfaceFabStyle}"
-		   TargetType="Button">
-		<Setter Property="CornerRadius" Value="{StaticResource MaterialSmallFabCornerRadius}" />
-		<Setter Property="Padding" Value="{StaticResource MaterialSmallFabPadding}" />
-		<Setter Property="um:ControlExtensions.IconHeight" Value="{StaticResource MaterialSmallFabContentWidthOrHeight}" />
-		<Setter Property="um:ControlExtensions.IconWidth" Value="{StaticResource MaterialSmallFabContentWidthOrHeight}" />
-	</Style>
-
-	<Style x:Key="MaterialSecondarySmallFabStyle"
-		   BasedOn="{StaticResource MaterialSecondaryFabStyle}"
-		   TargetType="Button">
-		<Setter Property="CornerRadius" Value="{StaticResource MaterialSmallFabCornerRadius}" />
-		<Setter Property="Padding" Value="{StaticResource MaterialSmallFabPadding}" />
-		<Setter Property="um:ControlExtensions.IconHeight" Value="{StaticResource MaterialSmallFabContentWidthOrHeight}" />
-		<Setter Property="um:ControlExtensions.IconWidth" Value="{StaticResource MaterialSmallFabContentWidthOrHeight}" />
-	</Style>
-
-	<Style x:Key="MaterialTertiarySmallFabStyle"
-		   BasedOn="{StaticResource MaterialTertiaryFabStyle}"
-		   TargetType="Button">
-		<Setter Property="CornerRadius" Value="{StaticResource MaterialSmallFabCornerRadius}" />
-		<Setter Property="Padding" Value="{StaticResource MaterialSmallFabPadding}" />
-		<Setter Property="um:ControlExtensions.IconHeight" Value="{StaticResource MaterialSmallFabContentWidthOrHeight}" />
-		<Setter Property="um:ControlExtensions.IconWidth" Value="{StaticResource MaterialSmallFabContentWidthOrHeight}" />
-	</Style>
-	<!--#endregion-->
-
-	<!--#region Large Color Variants-->
-	<Style x:Key="MaterialLargeFabStyle"
-		   BasedOn="{StaticResource MaterialFabStyle}"
-		   TargetType="Button">
-		<Setter Property="CornerRadius" Value="{StaticResource MaterialLargeFabCornerRadius}" />
-		<Setter Property="Padding" Value="{StaticResource MaterialLargeFabPadding}" />
-		<Setter Property="um:ControlExtensions.IconHeight" Value="{StaticResource MaterialLargeFabContentWidthOrHeight}" />
-		<Setter Property="um:ControlExtensions.IconWidth" Value="{StaticResource MaterialLargeFabContentWidthOrHeight}" />
-	</Style>
-
-	<Style x:Key="MaterialSurfaceLargeFabStyle"
-		   BasedOn="{StaticResource MaterialSurfaceFabStyle}"
-		   TargetType="Button">
-		<Setter Property="CornerRadius" Value="{StaticResource MaterialLargeFabCornerRadius}" />
-		<Setter Property="Padding" Value="{StaticResource MaterialLargeFabPadding}" />
-		<Setter Property="um:ControlExtensions.IconHeight" Value="{StaticResource MaterialLargeFabContentWidthOrHeight}" />
-		<Setter Property="um:ControlExtensions.IconWidth" Value="{StaticResource MaterialLargeFabContentWidthOrHeight}" />
-	</Style>
-	<Style x:Key="MaterialSecondaryLargeFabStyle"
-		   BasedOn="{StaticResource MaterialSecondaryFabStyle}"
-		   TargetType="Button">
-		<Setter Property="CornerRadius" Value="{StaticResource MaterialLargeFabCornerRadius}" />
-		<Setter Property="Padding" Value="{StaticResource MaterialLargeFabPadding}" />
-		<Setter Property="um:ControlExtensions.IconHeight" Value="{StaticResource MaterialLargeFabContentWidthOrHeight}" />
-		<Setter Property="um:ControlExtensions.IconWidth" Value="{StaticResource MaterialLargeFabContentWidthOrHeight}" />
-	</Style>
-	<Style x:Key="MaterialTertiaryLargeFabStyle"
-		   BasedOn="{StaticResource MaterialTertiaryFabStyle}"
-		   TargetType="Button">
-		<Setter Property="CornerRadius" Value="{StaticResource MaterialLargeFabCornerRadius}" />
-		<Setter Property="Padding" Value="{StaticResource MaterialLargeFabPadding}" />
-		<Setter Property="um:ControlExtensions.IconHeight" Value="{StaticResource MaterialLargeFabContentWidthOrHeight}" />
-		<Setter Property="um:ControlExtensions.IconWidth" Value="{StaticResource MaterialLargeFabContentWidthOrHeight}" />
-	</Style>
-	<!--#endregion-->
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+                    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+                    xmlns:toolkit="using:Uno.UI.Toolkit"
+                    xmlns:um="using:Uno.Material"
+                    mc:Ignorable="d">
+
+    <ResourceDictionary.ThemeDictionaries>
+        <ResourceDictionary x:Key="Default">
+            <!--#region Default FAB Brushes-->
+            <StaticResource x:Key="FabForeground" ResourceKey="OnPrimaryContainerBrush" />
+            <StaticResource x:Key="FabForegroundPressed" ResourceKey="OnPrimaryContainerBrush" />
+            <StaticResource x:Key="FabForegroundPointerOver" ResourceKey="OnPrimaryContainerBrush" />
+            <StaticResource x:Key="FabForegroundDisabled" ResourceKey="OnSurfaceDisabledBrush" />
+            <StaticResource x:Key="FabBackground" ResourceKey="PrimaryContainerBrush" />
+            <StaticResource x:Key="FabBackgroundPressed" ResourceKey="PrimaryContainerBrush" />
+            <StaticResource x:Key="FabBackgroundPointerOver" ResourceKey="PrimaryContainerBrush" />
+            <StaticResource x:Key="FabBackgroundDisabled" ResourceKey="SystemControlTransparentBrush" />
+            <StaticResource x:Key="FabStateOverlayBackground" ResourceKey="SystemControlTransparentBrush" />
+            <StaticResource x:Key="FabStateOverlayBackgroundPointerOver" ResourceKey="OnPrimaryContainerHoverBrush" />
+            <StaticResource x:Key="FabStateOverlayBackgroundFocused" ResourceKey="OnPrimaryContainerFocusedBrush" />
+            <StaticResource x:Key="FabStateOverlayBackgroundPressed" ResourceKey="OnPrimaryContainerPressedBrush" />
+            <StaticResource x:Key="FabStateOverlayBackgroundDisabled" ResourceKey="OnSurfaceDisabledLowBrush" />
+            <!--#endregion-->
+
+            <!--#region Surface FAB Brushes-->
+            <StaticResource x:Key="FabSurfaceForeground" ResourceKey="OnPrimaryContainerBrush" />
+            <StaticResource x:Key="FabSurfaceForegroundPressed" ResourceKey="OnPrimaryContainerBrush" />
+            <StaticResource x:Key="FabSurfaceForegroundPointerOver" ResourceKey="OnPrimaryContainerBrush" />
+            <StaticResource x:Key="FabSurfaceForegroundDisabled" ResourceKey="OnSurfaceDisabledBrush" />
+            <StaticResource x:Key="FabSurfaceBackground" ResourceKey="SurfaceBrush" />
+            <StaticResource x:Key="FabSurfaceBackgroundPressed" ResourceKey="SurfaceBrush" />
+            <StaticResource x:Key="FabSurfaceBackgroundPointerOver" ResourceKey="SurfaceBrush" />
+            <StaticResource x:Key="FabSurfaceBackgroundDisabled" ResourceKey="SystemControlTransparentBrush" />
+            <StaticResource x:Key="FabSurfaceStateOverlayBackground" ResourceKey="SystemControlTransparentBrush" />
+            <StaticResource x:Key="FabSurfaceStateOverlayBackgroundPointerOver" ResourceKey="PrimaryHoverBrush" />
+            <StaticResource x:Key="FabSurfaceStateOverlayBackgroundFocused" ResourceKey="PrimaryFocusedBrush" />
+            <StaticResource x:Key="FabSurfaceStateOverlayBackgroundPressed" ResourceKey="PrimaryPressedBrush" />
+            <StaticResource x:Key="FabSurfaceStateOverlayBackgroundDisabled" ResourceKey="OnSurfaceDisabledLowBrush" />
+            <!--#endregion-->
+
+            <!--#region Secondary FAB Brushes-->
+            <StaticResource x:Key="FabSecondaryForeground" ResourceKey="OnSecondaryContainerBrush" />
+            <StaticResource x:Key="FabSecondaryForegroundDisabled" ResourceKey="OnSurfaceDisabledBrush" />
+            <StaticResource x:Key="FabSecondaryForegroundPointerOver" ResourceKey="OnSecondaryContainerBrush" />
+            <StaticResource x:Key="FabSecondaryForegroundPressed" ResourceKey="OnSecondaryContainerBrush" />
+            <StaticResource x:Key="FabSecondaryBackground" ResourceKey="SecondaryContainerBrush" />
+            <StaticResource x:Key="FabSecondaryBackgroundPointerOver" ResourceKey="SecondaryContainerBrush" />
+            <StaticResource x:Key="FabSecondaryBackgroundPressed" ResourceKey="SecondaryContainerBrush" />
+            <StaticResource x:Key="FabSecondaryBackgroundDisabled" ResourceKey="SystemControlTransparentBrush" />
+            <StaticResource x:Key="FabSecondaryStateOverlayBackground" ResourceKey="SystemControlTransparentBrush" />
+            <StaticResource x:Key="FabSecondaryStateOverlayBackgroundPointerOver" ResourceKey="OnSecondaryContainerHoverBrush" />
+            <StaticResource x:Key="FabSecondaryStateOverlayBackgroundFocused" ResourceKey="OnSecondaryContainerFocusedBrush" />
+            <StaticResource x:Key="FabSecondaryStateOverlayBackgroundPressed" ResourceKey="OnSecondaryContainerPressedBrush" />
+            <StaticResource x:Key="FabSecondaryStateOverlayBackgroundDisabled" ResourceKey="OnSurfaceDisabledLowBrush" />
+            <!--#endregion-->
+
+            <!--#region Tertiary FAB Brushes-->
+            <StaticResource x:Key="FabTertiaryForeground" ResourceKey="OnTertiaryContainerBrush" />
+            <StaticResource x:Key="FabTertiaryForegroundPointerOver" ResourceKey="OnTertiaryContainerBrush" />
+            <StaticResource x:Key="FabTertiaryForegroundPressed" ResourceKey="OnTertiaryContainerBrush" />
+            <StaticResource x:Key="FabTertiaryForegroundDisabled" ResourceKey="OnSurfaceDisabledBrush" />
+            <StaticResource x:Key="FabTertiaryBackground" ResourceKey="TertiaryContainerBrush" />
+            <StaticResource x:Key="FabTertiaryBackgroundPointerOver" ResourceKey="TertiaryContainerBrush" />
+            <StaticResource x:Key="FabTertiaryBackgroundPressed" ResourceKey="TertiaryContainerBrush" />
+            <StaticResource x:Key="FabTertiaryBackgroundDisabled" ResourceKey="SystemControlTransparentBrush" />
+            <StaticResource x:Key="FabTertiaryStateOverlayBackgroundPointerOver" ResourceKey="SystemControlTransparentBrush" />
+            <StaticResource x:Key="FabTertiaryStateOverlayBackgroundFocused" ResourceKey="SystemControlTransparentBrush" />
+            <StaticResource x:Key="FabTertiaryStateOverlayBackgroundPressed" ResourceKey="SystemControlTransparentBrush" />
+            <StaticResource x:Key="FabTertiaryStateOverlayBackgroundDisabled" ResourceKey="OnSurfaceDisabledLowBrush" />
+            <!--#endregion-->
+
+            <!--#region Default FAB Resources-->
+            <Thickness x:Key="MaterialFabPadding">20</Thickness>
+            <x:Double x:Key="MaterialFabContentWidthOrHeight">16</x:Double>
+            <CornerRadius x:Key="MaterialFabCornerRadius">16</CornerRadius>
+            <!--#endregion-->
+
+            <!--#region Small FAB Resources-->
+            <Thickness x:Key="MaterialSmallFabPadding">12</Thickness>
+            <x:Double x:Key="MaterialSmallFabContentWidthOrHeight">16</x:Double>
+            <CornerRadius x:Key="MaterialSmallFabCornerRadius">12</CornerRadius>
+            <!--#endregion-->
+
+            <!--#region Large FAB Resources-->
+            <Thickness x:Key="MaterialLargeFabPadding">36</Thickness>
+            <x:Double x:Key="MaterialLargeFabContentWidthOrHeight">24</x:Double>
+            <CornerRadius x:Key="MaterialLargeFabCornerRadius">28</CornerRadius>
+            <!--#endregion-->
+
+            <x:Double x:Key="MaterialFabIconTextPadding">12</x:Double>
+        </ResourceDictionary>
+
+        <ResourceDictionary x:Key="Light">
+            <!--#region Default FAB Brushes-->
+            <StaticResource x:Key="FabForeground" ResourceKey="OnPrimaryContainerBrush" />
+            <StaticResource x:Key="FabForegroundPressed" ResourceKey="OnPrimaryContainerBrush" />
+            <StaticResource x:Key="FabForegroundPointerOver" ResourceKey="OnPrimaryContainerBrush" />
+            <StaticResource x:Key="FabForegroundDisabled" ResourceKey="OnSurfaceDisabledBrush" />
+            <StaticResource x:Key="FabBackground" ResourceKey="PrimaryContainerBrush" />
+            <StaticResource x:Key="FabBackgroundPressed" ResourceKey="PrimaryContainerBrush" />
+            <StaticResource x:Key="FabBackgroundPointerOver" ResourceKey="PrimaryContainerBrush" />
+            <StaticResource x:Key="FabBackgroundDisabled" ResourceKey="SystemControlTransparentBrush" />
+            <StaticResource x:Key="FabStateOverlayBackground" ResourceKey="SystemControlTransparentBrush" />
+            <StaticResource x:Key="FabStateOverlayBackgroundPointerOver" ResourceKey="OnPrimaryContainerHoverBrush" />
+            <StaticResource x:Key="FabStateOverlayBackgroundFocused" ResourceKey="OnPrimaryContainerFocusedBrush" />
+            <StaticResource x:Key="FabStateOverlayBackgroundPressed" ResourceKey="OnPrimaryContainerPressedBrush" />
+            <StaticResource x:Key="FabStateOverlayBackgroundDisabled" ResourceKey="OnSurfaceDisabledLowBrush" />
+            <!--#endregion-->
+
+            <!--#region Surface FAB Brushes-->
+            <StaticResource x:Key="FabSurfaceForeground" ResourceKey="OnPrimaryContainerBrush" />
+            <StaticResource x:Key="FabSurfaceForegroundPressed" ResourceKey="OnPrimaryContainerBrush" />
+            <StaticResource x:Key="FabSurfaceForegroundPointerOver" ResourceKey="OnPrimaryContainerBrush" />
+            <StaticResource x:Key="FabSurfaceForegroundDisabled" ResourceKey="OnSurfaceDisabledBrush" />
+            <StaticResource x:Key="FabSurfaceBackground" ResourceKey="SurfaceBrush" />
+            <StaticResource x:Key="FabSurfaceBackgroundPressed" ResourceKey="SurfaceBrush" />
+            <StaticResource x:Key="FabSurfaceBackgroundPointerOver" ResourceKey="SurfaceBrush" />
+            <StaticResource x:Key="FabSurfaceBackgroundDisabled" ResourceKey="SystemControlTransparentBrush" />
+            <StaticResource x:Key="FabSurfaceStateOverlayBackground" ResourceKey="SystemControlTransparentBrush" />
+            <StaticResource x:Key="FabSurfaceStateOverlayBackgroundPointerOver" ResourceKey="PrimaryHoverBrush" />
+            <StaticResource x:Key="FabSurfaceStateOverlayBackgroundFocused" ResourceKey="PrimaryFocusedBrush" />
+            <StaticResource x:Key="FabSurfaceStateOverlayBackgroundPressed" ResourceKey="PrimaryPressedBrush" />
+            <StaticResource x:Key="FabSurfaceStateOverlayBackgroundDisabled" ResourceKey="OnSurfaceDisabledLowBrush" />
+            <!--#endregion-->
+
+            <!--#region Secondary FAB Brushes-->
+            <StaticResource x:Key="FabSecondaryForeground" ResourceKey="OnSecondaryContainerBrush" />
+            <StaticResource x:Key="FabSecondaryForegroundDisabled" ResourceKey="OnSurfaceDisabledBrush" />
+            <StaticResource x:Key="FabSecondaryForegroundPointerOver" ResourceKey="OnSecondaryContainerBrush" />
+            <StaticResource x:Key="FabSecondaryForegroundPressed" ResourceKey="OnSecondaryContainerBrush" />
+            <StaticResource x:Key="FabSecondaryBackground" ResourceKey="SecondaryContainerBrush" />
+            <StaticResource x:Key="FabSecondaryBackgroundPointerOver" ResourceKey="SecondaryContainerBrush" />
+            <StaticResource x:Key="FabSecondaryBackgroundPressed" ResourceKey="SecondaryContainerBrush" />
+            <StaticResource x:Key="FabSecondaryBackgroundDisabled" ResourceKey="SystemControlTransparentBrush" />
+            <StaticResource x:Key="FabSecondaryStateOverlayBackground" ResourceKey="SystemControlTransparentBrush" />
+            <StaticResource x:Key="FabSecondaryStateOverlayBackgroundPointerOver" ResourceKey="OnSecondaryContainerHoverBrush" />
+            <StaticResource x:Key="FabSecondaryStateOverlayBackgroundFocused" ResourceKey="OnSecondaryContainerFocusedBrush" />
+            <StaticResource x:Key="FabSecondaryStateOverlayBackgroundPressed" ResourceKey="OnSecondaryContainerPressedBrush" />
+            <StaticResource x:Key="FabSecondaryStateOverlayBackgroundDisabled" ResourceKey="OnSurfaceDisabledLowBrush" />
+            <!--#endregion-->
+
+            <!--#region Tertiary FAB Brushes-->
+            <StaticResource x:Key="FabTertiaryForeground" ResourceKey="OnTertiaryContainerBrush" />
+            <StaticResource x:Key="FabTertiaryForegroundPointerOver" ResourceKey="OnTertiaryContainerBrush" />
+            <StaticResource x:Key="FabTertiaryForegroundPressed" ResourceKey="OnTertiaryContainerBrush" />
+            <StaticResource x:Key="FabTertiaryForegroundDisabled" ResourceKey="OnSurfaceDisabledBrush" />
+            <StaticResource x:Key="FabTertiaryBackground" ResourceKey="TertiaryContainerBrush" />
+            <StaticResource x:Key="FabTertiaryBackgroundPointerOver" ResourceKey="TertiaryContainerBrush" />
+            <StaticResource x:Key="FabTertiaryBackgroundPressed" ResourceKey="TertiaryContainerBrush" />
+            <StaticResource x:Key="FabTertiaryBackgroundDisabled" ResourceKey="SystemControlTransparentBrush" />
+            <StaticResource x:Key="FabTertiaryStateOverlayBackgroundPointerOver" ResourceKey="SystemControlTransparentBrush" />
+            <StaticResource x:Key="FabTertiaryStateOverlayBackgroundFocused" ResourceKey="SystemControlTransparentBrush" />
+            <StaticResource x:Key="FabTertiaryStateOverlayBackgroundPressed" ResourceKey="SystemControlTransparentBrush" />
+            <StaticResource x:Key="FabTertiaryStateOverlayBackgroundDisabled" ResourceKey="OnSurfaceDisabledLowBrush" />
+            <!--#endregion-->
+
+            <!--#region Default FAB Resources-->
+            <Thickness x:Key="MaterialFabPadding">20</Thickness>
+            <x:Double x:Key="MaterialFabContentWidthOrHeight">16</x:Double>
+            <CornerRadius x:Key="MaterialFabCornerRadius">16</CornerRadius>
+            <!--#endregion-->
+
+            <!--#region Small FAB Resources-->
+            <Thickness x:Key="MaterialSmallFabPadding">12</Thickness>
+            <x:Double x:Key="MaterialSmallFabContentWidthOrHeight">16</x:Double>
+            <CornerRadius x:Key="MaterialSmallFabCornerRadius">12</CornerRadius>
+            <!--#endregion-->
+
+            <!--#region Large FAB Resources-->
+            <Thickness x:Key="MaterialLargeFabPadding">36</Thickness>
+            <x:Double x:Key="MaterialLargeFabContentWidthOrHeight">24</x:Double>
+            <CornerRadius x:Key="MaterialLargeFabCornerRadius">28</CornerRadius>
+            <!--#endregion-->
+
+            <x:Double x:Key="MaterialFabIconTextPadding">12</x:Double>
+        </ResourceDictionary>
+    </ResourceDictionary.ThemeDictionaries>
+
+
+
+    <!--#region Default Color Variants-->
+    <Style x:Key="MaterialFabStyle"
+           TargetType="Button">
+        <Setter Property="Background" Value="{ThemeResource FabBackground}" />
+        <Setter Property="Foreground" Value="{ThemeResource FabForeground}" />
+        <Setter Property="FontFamily" Value="{ThemeResource MaterialMediumFontFamily}" />
+        <Setter Property="FontSize" Value="{ThemeResource LabelLargeFontSize}" />
+        <Setter Property="FontWeight" Value="{ThemeResource LabelLargeFontWeight}" />
+        <Setter Property="HorizontalContentAlignment" Value="Center" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="CornerRadius" Value="{ThemeResource MaterialFabCornerRadius}" />
+        <Setter Property="Padding" Value="{ThemeResource MaterialFabPadding}" />
+
+        <!-- Workaround for WinUI issue: https://github.com/microsoft/microsoft-ui-xaml/issues/6388 -->
+        <Setter Property="um:ControlExtensions.Icon" Value="{x:Null}" />
+        <Setter Property="um:ControlExtensions.IconHeight" Value="{ThemeResource MaterialFabContentWidthOrHeight}" />
+        <Setter Property="um:ControlExtensions.IconWidth" Value="{ThemeResource MaterialFabContentWidthOrHeight}" />
+
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="Button">
+                    <Grid>
+                        <toolkit:ElevatedView x:Name="ElevatedView"
+                                              Margin="0,0,6,6"
+                                              Background="Transparent"
+                                              CornerRadius="{TemplateBinding CornerRadius}"
+                                              Elevation="6">
+                            <um:Ripple x:Name="Ripple"
+                                       CornerRadius="{TemplateBinding CornerRadius}"
+                                       Feedback="{TemplateBinding Foreground}"
+                                       FeedbackOpacity="{StaticResource PressedOpacity}">
+
+                                <Grid x:Name="Root"
+                                      BorderBrush="{TemplateBinding BorderBrush}"
+                                      BorderThickness="{TemplateBinding BorderThickness}"
+                                      CornerRadius="{TemplateBinding CornerRadius}"
+                                      Background="{TemplateBinding Background}">
+                                    <StackPanel x:Name="ContentPanel"
+                                                Padding="{TemplateBinding Padding}"
+                                                Orientation="Horizontal">
+
+                                        <!-- Icon -->
+                                        <Viewbox Width="{Binding Path=(um:ControlExtensions.IconWidth), RelativeSource={RelativeSource TemplatedParent}}"
+                                                 Height="{Binding Path=(um:ControlExtensions.IconHeight), RelativeSource={RelativeSource TemplatedParent}}"
+                                                 HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                                 VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                                 Visibility="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialNullToCollapsedConverter}, FallbackValue=Collapsed, TargetNullValue=Collapsed}">
+                                            <ContentPresenter x:Name="IconPresenter"
+                                                              Content="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}}"
+                                                              Foreground="{Binding Path=Foreground, RelativeSource={RelativeSource TemplatedParent}}" />
+                                        </Viewbox>
+
+                                        <!-- Icon/Content spacing -->
+                                        <Border Visibility="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialEmptyToCollapsed}, FallbackValue=Collapsed, TargetNullValue=Collapsed}">
+                                            <Border Width="{ThemeResource MaterialFabIconTextPadding}"
+                                                    Visibility="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialNullToCollapsedConverter}, FallbackValue=Collapsed, TargetNullValue=Collapsed}" />
+                                        </Border>
+
+                                        <!-- Content -->
+                                        <ContentPresenter x:Name="ContentPresenter"
+                                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                                          Content="{TemplateBinding Content}"
+                                                          ContentTemplate="{TemplateBinding ContentTemplate}"
+                                                          ContentTransitions="{TemplateBinding ContentTransitions}"
+                                                          FontFamily="{TemplateBinding FontFamily}"
+                                                          FontWeight="{TemplateBinding FontWeight}"
+                                                          FontSize="{TemplateBinding FontSize}" />
+                                    </StackPanel>
+
+                                    <Border x:Name="StateOverlay" />
+                                </Grid>
+                            </um:Ripple>
+                        </toolkit:ElevatedView>
+
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="CommonStates">
+
+                                <VisualState x:Name="Normal" />
+
+                                <VisualState x:Name="PointerOver">
+                                    <VisualState.Setters>
+                                        <Setter Target="StateOverlay.Background" Value="{ThemeResource FabStateOverlayBackgroundPointerOver}" />
+                                        <Setter Target="IconPresenter.Foreground" Value="{ThemeResource FabForegroundPointerOver}" />
+                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource FabForegroundPointerOver}" />
+                                        <Setter Target="Root.Background" Value="{ThemeResource FabBackgroundPointerOver}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                                <VisualState x:Name="Pressed">
+                                    <VisualState.Setters>
+                                        <Setter Target="StateOverlay.Background" Value="{ThemeResource FabStateOverlayBackgroundPressed}" />
+                                        <Setter Target="IconPresenter.Foreground" Value="{ThemeResource FabForegroundPressed}" />
+                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource FabForegroundPressed}" />
+                                        <Setter Target="Root.Background" Value="{ThemeResource FabBackgroundPressed}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                                <VisualState x:Name="Disabled">
+                                    <VisualState.Setters>
+                                        <Setter Target="IconPresenter.Foreground" Value="{ThemeResource FabForegroundDisabled}" />
+                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource FabForegroundDisabled}" />
+                                        <Setter Target="Root.Background" Value="{ThemeResource FabBackgroundDisabled}" />
+                                        <Setter Target="StateOverlay.Background" Value="{ThemeResource FabStateOverlayBackgroundDisabled}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+
+                            <VisualStateGroup x:Name="FocusStates">
+
+                                <VisualState x:Name="Focused">
+                                    <VisualState.Setters>
+                                        <Setter Target="StateOverlay.Background" Value="{ThemeResource FabStateOverlayBackgroundFocused}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+
+                                <VisualState x:Name="PointerFocused" />
+
+                                <VisualState x:Name="Unfocused" />
+                            </VisualStateGroup>
+                        </VisualStateManager.VisualStateGroups>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <Style x:Key="MaterialSurfaceFabStyle"
+           BasedOn="{StaticResource MaterialFabStyle}"
+           TargetType="Button">
+
+        <Setter Property="Background" Value="{ThemeResource FabSurfaceBackground}" />
+        <Setter Property="Foreground" Value="{ThemeResource FabSurfaceForeground}" />
+        <Setter Property="FontFamily" Value="{ThemeResource MaterialMediumFontFamily}" />
+        <Setter Property="HorizontalContentAlignment" Value="Center" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="CornerRadius" Value="{ThemeResource MaterialFabCornerRadius}" />
+        <Setter Property="Padding" Value="{ThemeResource MaterialFabPadding}" />
+
+        <!-- Workaround for WinUI issue: https://github.com/microsoft/microsoft-ui-xaml/issues/6388 -->
+        <Setter Property="um:ControlExtensions.Icon" Value="{x:Null}" />
+        <Setter Property="um:ControlExtensions.IconHeight" Value="{ThemeResource MaterialFabContentWidthOrHeight}" />
+        <Setter Property="um:ControlExtensions.IconWidth" Value="{ThemeResource MaterialFabContentWidthOrHeight}" />
+
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="Button">
+                    <Grid>
+                        <toolkit:ElevatedView x:Name="ElevatedView"
+                                              Margin="0,0,6,6"
+                                              Background="Transparent"
+                                              CornerRadius="{TemplateBinding CornerRadius}"
+                                              Elevation="6">
+                            <um:Ripple x:Name="Ripple"
+                                       CornerRadius="{TemplateBinding CornerRadius}"
+                                       Feedback="{TemplateBinding Foreground}"
+                                       FeedbackOpacity="{StaticResource PressedOpacity}">
+
+                                <Grid x:Name="Root"
+                                      BorderBrush="{TemplateBinding BorderBrush}"
+                                      BorderThickness="{TemplateBinding BorderThickness}"
+                                      CornerRadius="{TemplateBinding CornerRadius}"
+                                      Background="{TemplateBinding Background}">
+                                    <StackPanel x:Name="ContentPanel"
+                                                Padding="{TemplateBinding Padding}"
+                                                Orientation="Horizontal">
+
+                                        <!-- Icon -->
+                                        <Viewbox Width="{Binding Path=(um:ControlExtensions.IconWidth), RelativeSource={RelativeSource TemplatedParent}}"
+                                                 Height="{Binding Path=(um:ControlExtensions.IconHeight), RelativeSource={RelativeSource TemplatedParent}}"
+                                                 HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                                 VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                                 Visibility="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialNullToCollapsedConverter}, FallbackValue=Collapsed, TargetNullValue=Collapsed}">
+                                            <ContentPresenter x:Name="IconPresenter"
+                                                              Content="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}}"
+                                                              Foreground="{Binding Path=Foreground, RelativeSource={RelativeSource TemplatedParent}}" />
+                                        </Viewbox>
+
+                                        <!-- Icon/Content spacing -->
+                                        <Border Visibility="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialEmptyToCollapsed}, FallbackValue=Collapsed, TargetNullValue=Collapsed}">
+                                            <Border Width="{ThemeResource MaterialFabIconTextPadding}"
+                                                    Visibility="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialNullToCollapsedConverter}, FallbackValue=Collapsed, TargetNullValue=Collapsed}" />
+                                        </Border>
+
+                                        <!-- Content -->
+                                        <ContentPresenter x:Name="ContentPresenter"
+                                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                                          Content="{TemplateBinding Content}"
+                                                          ContentTemplate="{TemplateBinding ContentTemplate}"
+                                                          ContentTransitions="{TemplateBinding ContentTransitions}"
+                                                          FontFamily="{TemplateBinding FontFamily}"
+                                                          FontWeight="{TemplateBinding FontWeight}"
+                                                          FontSize="{TemplateBinding FontSize}" />
+                                    </StackPanel>
+
+                                    <Border x:Name="StateOverlay" />
+                                </Grid>
+                            </um:Ripple>
+                        </toolkit:ElevatedView>
+
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="CommonStates">
+
+                                <VisualState x:Name="Normal" />
+
+                                <VisualState x:Name="PointerOver">
+                                    <VisualState.Setters>
+                                        <Setter Target="StateOverlay.Background" Value="{ThemeResource FabSurfaceStateOverlayBackgroundPointerOver}" />
+                                        <Setter Target="IconPresenter.Foreground" Value="{ThemeResource FabSurfaceForegroundPointerOver}" />
+                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource FabSurfaceForegroundPointerOver}" />
+                                        <Setter Target="Root.Background" Value="{ThemeResource FabSurfaceBackgroundPointerOver}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                                <VisualState x:Name="Pressed">
+                                    <VisualState.Setters>
+                                        <Setter Target="StateOverlay.Background" Value="{ThemeResource FabSurfaceStateOverlayBackgroundPressed}" />
+                                        <Setter Target="IconPresenter.Foreground" Value="{ThemeResource FabSurfaceForegroundPressed}" />
+                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource FabSurfaceForegroundPressed}" />
+                                        <Setter Target="Root.Background" Value="{ThemeResource FabSurfaceBackgroundPressed}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                                <VisualState x:Name="Disabled">
+                                    <VisualState.Setters>
+                                        <Setter Target="IconPresenter.Foreground" Value="{ThemeResource FabSurfaceForegroundDisabled}" />
+                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource FabSurfaceForegroundDisabled}" />
+                                        <Setter Target="Root.Background" Value="{ThemeResource FabSurfaceBackgroundDisabled}" />
+                                        <Setter Target="StateOverlay.Background" Value="{ThemeResource FabSurfaceStateOverlayBackgroundDisabled}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+
+                            <VisualStateGroup x:Name="FocusStates">
+
+                                <VisualState x:Name="Focused">
+                                    <VisualState.Setters>
+                                        <Setter Target="StateOverlay.Background" Value="{ThemeResource FabSurfaceStateOverlayBackgroundFocused}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+
+                                <VisualState x:Name="PointerFocused" />
+
+                                <VisualState x:Name="Unfocused" />
+                            </VisualStateGroup>
+                        </VisualStateManager.VisualStateGroups>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <Style x:Key="MaterialSecondaryFabStyle"
+           BasedOn="{StaticResource MaterialFabStyle}"
+           TargetType="Button">
+
+        <Setter Property="Background" Value="{ThemeResource FabSecondaryBackground}" />
+        <Setter Property="Foreground" Value="{ThemeResource FabSecondaryForeground}" />
+        <Setter Property="FontFamily" Value="{ThemeResource MaterialMediumFontFamily}" />
+        <Setter Property="HorizontalContentAlignment" Value="Center" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="CornerRadius" Value="{ThemeResource MaterialFabCornerRadius}" />
+        <Setter Property="Padding" Value="{ThemeResource MaterialFabPadding}" />
+
+        <!-- Workaround for WinUI issue: https://github.com/microsoft/microsoft-ui-xaml/issues/6388 -->
+        <Setter Property="um:ControlExtensions.Icon" Value="{x:Null}" />
+        <Setter Property="um:ControlExtensions.IconHeight" Value="{ThemeResource MaterialFabContentWidthOrHeight}" />
+        <Setter Property="um:ControlExtensions.IconWidth" Value="{ThemeResource MaterialFabContentWidthOrHeight}" />
+
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="Button">
+                    <Grid>
+                        <toolkit:ElevatedView x:Name="ElevatedView"
+                                              Margin="0,0,6,6"
+                                              Background="Transparent"
+                                              CornerRadius="{TemplateBinding CornerRadius}"
+                                              Elevation="6">
+                            <um:Ripple x:Name="Ripple"
+                                       CornerRadius="{TemplateBinding CornerRadius}"
+                                       Feedback="{TemplateBinding Foreground}"
+                                       FeedbackOpacity="{StaticResource PressedOpacity}">
+
+                                <Grid x:Name="Root"
+                                      BorderBrush="{TemplateBinding BorderBrush}"
+                                      BorderThickness="{TemplateBinding BorderThickness}"
+                                      CornerRadius="{TemplateBinding CornerRadius}"
+                                      Background="{TemplateBinding Background}">
+                                    <StackPanel x:Name="ContentPanel"
+                                                Padding="{TemplateBinding Padding}"
+                                                Orientation="Horizontal">
+
+                                        <!-- Icon -->
+                                        <Viewbox Width="{Binding Path=(um:ControlExtensions.IconWidth), RelativeSource={RelativeSource TemplatedParent}}"
+                                                 Height="{Binding Path=(um:ControlExtensions.IconHeight), RelativeSource={RelativeSource TemplatedParent}}"
+                                                 HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                                 VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                                 Visibility="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialNullToCollapsedConverter}, FallbackValue=Collapsed, TargetNullValue=Collapsed}">
+                                            <ContentPresenter x:Name="IconPresenter"
+                                                              Content="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}}"
+                                                              Foreground="{Binding Path=Foreground, RelativeSource={RelativeSource TemplatedParent}}" />
+                                        </Viewbox>
+
+                                        <!-- Icon/Content spacing -->
+                                        <Border Visibility="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialEmptyToCollapsed}, FallbackValue=Collapsed, TargetNullValue=Collapsed}">
+                                            <Border Width="{ThemeResource MaterialFabIconTextPadding}"
+                                                    Visibility="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialNullToCollapsedConverter}, FallbackValue=Collapsed, TargetNullValue=Collapsed}" />
+                                        </Border>
+
+                                        <!-- Content -->
+                                        <ContentPresenter x:Name="ContentPresenter"
+                                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                                          Content="{TemplateBinding Content}"
+                                                          ContentTemplate="{TemplateBinding ContentTemplate}"
+                                                          ContentTransitions="{TemplateBinding ContentTransitions}"
+                                                          FontFamily="{TemplateBinding FontFamily}"
+                                                          FontWeight="{TemplateBinding FontWeight}"
+                                                          FontSize="{TemplateBinding FontSize}" />
+                                    </StackPanel>
+
+                                    <Border x:Name="StateOverlay" />
+                                </Grid>
+                            </um:Ripple>
+                        </toolkit:ElevatedView>
+
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="CommonStates">
+
+                                <VisualState x:Name="Normal" />
+
+                                <VisualState x:Name="PointerOver">
+                                    <VisualState.Setters>
+                                        <Setter Target="IconPresenter.Foreground" Value="{ThemeResource FabSecondaryForegroundPointerOver}" />
+                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource FabSecondaryForegroundPointerOver}" />
+                                        <Setter Target="Root.Background" Value="{ThemeResource FabSecondaryBackgroundPointerOver}" />
+                                        <Setter Target="StateOverlay.Background" Value="{ThemeResource FabSecondaryStateOverlayBackgroundPointerOver}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                                <VisualState x:Name="Pressed">
+                                    <VisualState.Setters>
+                                        <Setter Target="IconPresenter.Foreground" Value="{ThemeResource FabSecondaryForegroundPressed}" />
+                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource FabSecondaryForegroundPressed}" />
+                                        <Setter Target="Root.Background" Value="{ThemeResource FabSecondaryBackgroundPressed}" />
+                                        <Setter Target="StateOverlay.Background" Value="{ThemeResource FabSecondaryStateOverlayBackgroundPressed}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                                <VisualState x:Name="Disabled">
+                                    <VisualState.Setters>
+                                        <Setter Target="IconPresenter.Foreground" Value="{ThemeResource FabSecondaryForegroundDisabled}" />
+                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource FabSecondaryForegroundDisabled}" />
+                                        <Setter Target="Root.Background" Value="{ThemeResource FabSecondaryBackgroundDisabled}" />
+                                        <Setter Target="StateOverlay.Background" Value="{ThemeResource FabSecondaryStateOverlayBackgroundDisabled}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+
+                            <VisualStateGroup x:Name="FocusStates">
+
+                                <VisualState x:Name="Focused">
+                                    <VisualState.Setters>
+                                        <Setter Target="StateOverlay.Background" Value="{ThemeResource FabSecondaryStateOverlayBackgroundFocused}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+
+                                <VisualState x:Name="PointerFocused" />
+
+                                <VisualState x:Name="Unfocused" />
+                            </VisualStateGroup>
+                        </VisualStateManager.VisualStateGroups>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <Style x:Key="MaterialTertiaryFabStyle"
+           BasedOn="{StaticResource MaterialFabStyle}"
+           TargetType="Button">
+
+        <Setter Property="Background" Value="{ThemeResource FabTertiaryBackground}" />
+        <Setter Property="Foreground" Value="{ThemeResource FabTertiaryForeground}" />
+        <Setter Property="FontFamily" Value="{ThemeResource MaterialMediumFontFamily}" />
+        <Setter Property="HorizontalContentAlignment" Value="Center" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="CornerRadius" Value="{ThemeResource MaterialFabCornerRadius}" />
+        <Setter Property="Padding" Value="{ThemeResource MaterialFabPadding}" />
+
+        <!-- Workaround for WinUI issue: https://github.com/microsoft/microsoft-ui-xaml/issues/6388 -->
+        <Setter Property="um:ControlExtensions.Icon" Value="{x:Null}" />
+        <Setter Property="um:ControlExtensions.IconHeight" Value="{ThemeResource MaterialFabContentWidthOrHeight}" />
+        <Setter Property="um:ControlExtensions.IconWidth" Value="{ThemeResource MaterialFabContentWidthOrHeight}" />
+
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="Button">
+                    <Grid>
+                        <toolkit:ElevatedView x:Name="ElevatedView"
+                                              Margin="0,0,6,6"
+                                              Background="Transparent"
+                                              CornerRadius="{TemplateBinding CornerRadius}"
+                                              Elevation="6">
+                            <um:Ripple x:Name="Ripple"
+                                       CornerRadius="{TemplateBinding CornerRadius}"
+                                       Feedback="{TemplateBinding Foreground}"
+                                       FeedbackOpacity="{StaticResource PressedOpacity}">
+
+                                <Grid x:Name="Root"
+                                      BorderBrush="{TemplateBinding BorderBrush}"
+                                      BorderThickness="{TemplateBinding BorderThickness}"
+                                      CornerRadius="{TemplateBinding CornerRadius}"
+                                      Background="{TemplateBinding Background}">
+                                    <StackPanel x:Name="ContentPanel"
+                                                Padding="{TemplateBinding Padding}"
+                                                Orientation="Horizontal">
+
+                                        <!-- Icon -->
+                                        <Viewbox Width="{Binding Path=(um:ControlExtensions.IconWidth), RelativeSource={RelativeSource TemplatedParent}}"
+                                                 Height="{Binding Path=(um:ControlExtensions.IconHeight), RelativeSource={RelativeSource TemplatedParent}}"
+                                                 HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                                 VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                                 Visibility="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialNullToCollapsedConverter}, FallbackValue=Collapsed, TargetNullValue=Collapsed}">
+                                            <ContentPresenter x:Name="IconPresenter"
+                                                              Content="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}}"
+                                                              Foreground="{Binding Path=Foreground, RelativeSource={RelativeSource TemplatedParent}}" />
+                                        </Viewbox>
+
+                                        <!-- Icon/Content spacing -->
+                                        <Border Visibility="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialEmptyToCollapsed}, FallbackValue=Collapsed, TargetNullValue=Collapsed}">
+                                            <Border Width="{ThemeResource MaterialFabIconTextPadding}"
+                                                    Visibility="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialNullToCollapsedConverter}, FallbackValue=Collapsed, TargetNullValue=Collapsed}" />
+                                        </Border>
+
+                                        <!-- Content -->
+                                        <ContentPresenter x:Name="ContentPresenter"
+                                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                                          Content="{TemplateBinding Content}"
+                                                          ContentTemplate="{TemplateBinding ContentTemplate}"
+                                                          ContentTransitions="{TemplateBinding ContentTransitions}"
+                                                          FontFamily="{TemplateBinding FontFamily}"
+                                                          FontWeight="{TemplateBinding FontWeight}"
+                                                          FontSize="{TemplateBinding FontSize}" />
+                                    </StackPanel>
+
+                                    <Border x:Name="StateOverlay" />
+                                </Grid>
+                            </um:Ripple>
+                        </toolkit:ElevatedView>
+
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="CommonStates">
+
+                                <VisualState x:Name="Normal" />
+
+                                <VisualState x:Name="PointerOver">
+                                    <VisualState.Setters>
+                                        <Setter Target="IconPresenter.Foreground" Value="{ThemeResource FabTertiaryForegroundPointerOver}" />
+                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource FabTertiaryForegroundPointerOver}" />
+                                        <Setter Target="Root.Background" Value="{ThemeResource FabTertiaryBackgroundPointerOver}" />
+                                        <Setter Target="StateOverlay.Background" Value="{ThemeResource FabTertiaryStateOverlayBackgroundPointerOver}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                                <VisualState x:Name="Pressed">
+                                    <VisualState.Setters>
+                                        <Setter Target="IconPresenter.Foreground" Value="{ThemeResource FabTertiaryForegroundPressed}" />
+                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource FabTertiaryForegroundPressed}" />
+                                        <Setter Target="Root.Background" Value="{ThemeResource FabTertiaryBackgroundPressed}" />
+                                        <Setter Target="StateOverlay.Background" Value="{ThemeResource FabTertiaryStateOverlayBackgroundPressed}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                                <VisualState x:Name="Disabled">
+                                    <VisualState.Setters>
+                                        <Setter Target="IconPresenter.Foreground" Value="{ThemeResource FabTertiaryForegroundDisabled}" />
+                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource FabTertiaryForegroundDisabled}" />
+                                        <Setter Target="Root.Background" Value="{ThemeResource FabTertiaryBackgroundDisabled}" />
+                                        <Setter Target="StateOverlay.Background" Value="{ThemeResource FabTertiaryStateOverlayBackgroundDisabled}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+
+                            <VisualStateGroup x:Name="FocusStates">
+
+                                <VisualState x:Name="Focused">
+                                    <VisualState.Setters>
+                                        <Setter Target="StateOverlay.Background" Value="{ThemeResource FabTertiaryStateOverlayBackgroundFocused}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+
+                                <VisualState x:Name="PointerFocused" />
+
+                                <VisualState x:Name="Unfocused" />
+                            </VisualStateGroup>
+                        </VisualStateManager.VisualStateGroups>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+    <!--#endregion-->
+
+    <!--#region Small Color Variants-->
+    <Style x:Key="MaterialSmallFabStyle"
+           BasedOn="{StaticResource MaterialFabStyle}"
+           TargetType="Button">
+        <Setter Property="CornerRadius" Value="{ThemeResource MaterialSmallFabCornerRadius}" />
+        <Setter Property="Padding" Value="{ThemeResource MaterialSmallFabPadding}" />
+        <Setter Property="um:ControlExtensions.IconHeight" Value="{ThemeResource MaterialSmallFabContentWidthOrHeight}" />
+        <Setter Property="um:ControlExtensions.IconWidth" Value="{ThemeResource MaterialSmallFabContentWidthOrHeight}" />
+    </Style>
+
+    <Style x:Key="MaterialSurfaceSmallFabStyle"
+           BasedOn="{StaticResource MaterialSurfaceFabStyle}"
+           TargetType="Button">
+        <Setter Property="CornerRadius" Value="{ThemeResource MaterialSmallFabCornerRadius}" />
+        <Setter Property="Padding" Value="{ThemeResource MaterialSmallFabPadding}" />
+        <Setter Property="um:ControlExtensions.IconHeight" Value="{ThemeResource MaterialSmallFabContentWidthOrHeight}" />
+        <Setter Property="um:ControlExtensions.IconWidth" Value="{ThemeResource MaterialSmallFabContentWidthOrHeight}" />
+    </Style>
+
+    <Style x:Key="MaterialSecondarySmallFabStyle"
+           BasedOn="{StaticResource MaterialSecondaryFabStyle}"
+           TargetType="Button">
+        <Setter Property="CornerRadius" Value="{ThemeResource MaterialSmallFabCornerRadius}" />
+        <Setter Property="Padding" Value="{ThemeResource MaterialSmallFabPadding}" />
+        <Setter Property="um:ControlExtensions.IconHeight" Value="{ThemeResource MaterialSmallFabContentWidthOrHeight}" />
+        <Setter Property="um:ControlExtensions.IconWidth" Value="{ThemeResource MaterialSmallFabContentWidthOrHeight}" />
+    </Style>
+
+    <Style x:Key="MaterialTertiarySmallFabStyle"
+           BasedOn="{StaticResource MaterialTertiaryFabStyle}"
+           TargetType="Button">
+        <Setter Property="CornerRadius" Value="{ThemeResource MaterialSmallFabCornerRadius}" />
+        <Setter Property="Padding" Value="{ThemeResource MaterialSmallFabPadding}" />
+        <Setter Property="um:ControlExtensions.IconHeight" Value="{ThemeResource MaterialSmallFabContentWidthOrHeight}" />
+        <Setter Property="um:ControlExtensions.IconWidth" Value="{ThemeResource MaterialSmallFabContentWidthOrHeight}" />
+    </Style>
+    <!--#endregion-->
+
+    <!--#region Large Color Variants-->
+    <Style x:Key="MaterialLargeFabStyle"
+           BasedOn="{StaticResource MaterialFabStyle}"
+           TargetType="Button">
+        <Setter Property="CornerRadius" Value="{ThemeResource MaterialLargeFabCornerRadius}" />
+        <Setter Property="Padding" Value="{ThemeResource MaterialLargeFabPadding}" />
+        <Setter Property="um:ControlExtensions.IconHeight" Value="{ThemeResource MaterialLargeFabContentWidthOrHeight}" />
+        <Setter Property="um:ControlExtensions.IconWidth" Value="{ThemeResource MaterialLargeFabContentWidthOrHeight}" />
+    </Style>
+
+    <Style x:Key="MaterialSurfaceLargeFabStyle"
+           BasedOn="{StaticResource MaterialSurfaceFabStyle}"
+           TargetType="Button">
+        <Setter Property="CornerRadius" Value="{ThemeResource MaterialLargeFabCornerRadius}" />
+        <Setter Property="Padding" Value="{ThemeResource MaterialLargeFabPadding}" />
+        <Setter Property="um:ControlExtensions.IconHeight" Value="{ThemeResource MaterialLargeFabContentWidthOrHeight}" />
+        <Setter Property="um:ControlExtensions.IconWidth" Value="{ThemeResource MaterialLargeFabContentWidthOrHeight}" />
+    </Style>
+
+    <Style x:Key="MaterialSecondaryLargeFabStyle"
+           BasedOn="{StaticResource MaterialSecondaryFabStyle}"
+           TargetType="Button">
+        <Setter Property="CornerRadius" Value="{ThemeResource MaterialLargeFabCornerRadius}" />
+        <Setter Property="Padding" Value="{ThemeResource MaterialLargeFabPadding}" />
+        <Setter Property="um:ControlExtensions.IconHeight" Value="{ThemeResource MaterialLargeFabContentWidthOrHeight}" />
+        <Setter Property="um:ControlExtensions.IconWidth" Value="{ThemeResource MaterialLargeFabContentWidthOrHeight}" />
+    </Style>
+
+    <Style x:Key="MaterialTertiaryLargeFabStyle"
+           BasedOn="{StaticResource MaterialTertiaryFabStyle}"
+           TargetType="Button">
+        <Setter Property="CornerRadius" Value="{ThemeResource MaterialLargeFabCornerRadius}" />
+        <Setter Property="Padding" Value="{ThemeResource MaterialLargeFabPadding}" />
+        <Setter Property="um:ControlExtensions.IconHeight" Value="{ThemeResource MaterialLargeFabContentWidthOrHeight}" />
+        <Setter Property="um:ControlExtensions.IconWidth" Value="{ThemeResource MaterialLargeFabContentWidthOrHeight}" />
+    </Style>
+    <!--#endregion-->
 </ResourceDictionary>