Update CaptionButtonForeground resource and WindowDrawnDecorations layout (#779)

* fix: update CaptionButtonForeground resource key and remove cursor setter.

* fix: update WindowDrawnDecorations layout.

* feat: add CaptionButtonDisabledForeground for disabled state and WindowCustomizationsPage.

.github/workflows/deploy.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
 
       - name: Setup dotnet
         uses: actions/setup-dotnet@v5
@@ -32,7 +32,7 @@ jobs:
         run: touch $OUTPUT_PATH/.nojekyll
 
       - name: Commit wwwroot to GitHub Pages
-        uses: JamesIves/github-pages-deploy-action@v4.5.0
+        uses: JamesIves/github-pages-deploy-action@v4
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           branch: gh-pages

.github/workflows/pack-nightly.yml

@@ -31,7 +31,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
 
       - name: Get Version
         run: |
@@ -62,7 +62,7 @@ jobs:
         run: dotnet nuget push "nugets/*.nupkg" --api-key ${{ secrets.IRIHI_NUGET_API_KEY }} --source irihi.tech --skip-duplicate
 
       - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4.6.2
+        uses: actions/upload-artifact@v7
         with:
           name: nugets
           path: nugets

.github/workflows/pack.yml

@@ -47,7 +47,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
 
       - name: Pack Semi.Avalonia
         if: ${{ inputs.Semi_Avalonia }}
@@ -70,7 +70,7 @@ jobs:
         run: dotnet nuget push "nugets/*.nupkg" --api-key ${{ secrets.NUGET_ORG_API_KEY }} --source https://api.nuget.org/v3/index.json --skip-duplicate
 
       - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4.6.2
+        uses: actions/upload-artifact@v7
         with:
           name: nugets
           path: nugets

.github/workflows/publish.yml

@@ -75,11 +75,11 @@ jobs:
     runs-on: windows-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
       - name: Publish win-x64
         run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r win-x64 -c Release -o publish --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true
       - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4.6.2
+        uses: actions/upload-artifact@v7
         with:
           name: Semi.Avalonia.Demo.Desktop.win-x64
           path: |
@@ -91,13 +91,13 @@ jobs:
     runs-on: windows-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
       - name: Enable Native AOT in .csproj
         run: sed -i 's#<!--<PublishAot>true</PublishAot>-->#<PublishAot>true</PublishAot>#' demo/Semi.Avalonia.Demo.Desktop/Semi.Avalonia.Demo.Desktop.csproj
       - name: Publish win-x64 AOT
         run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r win-x64 -c Release -o publish
       - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4.6.2
+        uses: actions/upload-artifact@v7
         with:
           name: Semi.Avalonia.Demo.Desktop.win-x64.NativeAOT
           path: |
@@ -109,11 +109,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
       - name: Publish linux-x64
         run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r linux-x64 -c Release -o publish --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true
       - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4.6.2
+        uses: actions/upload-artifact@v7
         with:
           name: Semi.Avalonia.Demo.Desktop.linux-x64
           path: |
@@ -125,13 +125,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
       - name: Enable Native AOT in .csproj
         run: sed -i 's#<!--<PublishAot>true</PublishAot>-->#<PublishAot>true</PublishAot>#' demo/Semi.Avalonia.Demo.Desktop/Semi.Avalonia.Demo.Desktop.csproj
       - name: Publish linux-x64 AOT
         run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r linux-x64 -c Release -o publish
       - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4.6.2
+        uses: actions/upload-artifact@v7
         with:
           name: Semi.Avalonia.Demo.Desktop.linux-x64.NativeAOT
           path: |
@@ -143,11 +143,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
       - name: Publish linux-x64 DRM
         run: dotnet publish demo/Semi.Avalonia.Demo.Drm -r linux-x64 -c Release -o publish --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true
       - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4.6.2
+        uses: actions/upload-artifact@v7
         with:
           name: Semi.Avalonia.Demo.Drm.linux-x64
           path: |
@@ -159,13 +159,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
       - name: Enable Native AOT in .csproj
         run: sed -i 's#<!--<PublishAot>true</PublishAot>-->#<PublishAot>true</PublishAot>#' demo/Semi.Avalonia.Demo.Drm/Semi.Avalonia.Demo.Drm.csproj
       - name: Publish linux-x64 AOT
         run: dotnet publish demo/Semi.Avalonia.Demo.Drm -r linux-x64 -c Release -o publish
       - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4.6.2
+        uses: actions/upload-artifact@v7
         with:
           name: Semi.Avalonia.Demo.Drm.linux-x64.NativeAOT
           path: |
@@ -177,11 +177,11 @@ jobs:
     runs-on: macos-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
       - name: Publish osx-arm64
         run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r osx-arm64 -c Release -o publish --sc /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true
       - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4.6.2
+        uses: actions/upload-artifact@v7
         with:
           name: Semi.Avalonia.Demo.Desktop.osx-arm64
           path: |
@@ -193,13 +193,13 @@ jobs:
     runs-on: macos-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
       - name: Enable Native AOT in .csproj
         run: sed -i '' 's#<!--<PublishAot>true</PublishAot>-->#<PublishAot>true</PublishAot>#' demo/Semi.Avalonia.Demo.Desktop/Semi.Avalonia.Demo.Desktop.csproj
       - name: Publish osx-arm64 AOT
         run: dotnet publish demo/Semi.Avalonia.Demo.Desktop -r osx-arm64 -c Release -o publish
       - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4.6.2
+        uses: actions/upload-artifact@v7
         with:
           name: Semi.Avalonia.Demo.Desktop.osx-arm64.NativeAOT
           path: |
@@ -211,7 +211,7 @@ jobs:
     runs-on: windows-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
       - name: Install Android workload
         run: dotnet workload install android
       - name: Restore Dependencies
@@ -219,7 +219,7 @@ jobs:
       - name: Publish Android
         run: dotnet publish demo/Semi.Avalonia.Demo.Android -c Release -f net10.0-android --no-restore -o publish /p:RuntimeIdentifier=android-arm64
       - name: Upload a Build Artifact
-        uses: actions/upload-artifact@v4.6.2
+        uses: actions/upload-artifact@v7
         with:
           name: android-arm64
           path: publish/*Signed.apk

.github/workflows/release-tag.yml

@@ -41,7 +41,7 @@ jobs:
     needs: [ nuget,publish ]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/download-artifact@v4.3.0
+      - uses: actions/download-artifact@v8
 
       - name: Display structure of downloaded files
         run: ls -R
@@ -62,7 +62,7 @@ jobs:
         run: ls -R
 
       - name: Release
-        uses: softprops/action-gh-release@v2.3.2
+        uses: softprops/action-gh-release@v2
         if: startsWith(github.ref, 'refs/tags/') || github.event_name == 'workflow_dispatch'
         with:
           generate_release_notes: true

Nuget.Config

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<configuration>
+    <packageSources>
+        <add key="avalonia-nightly" value="https://nuget-feed-nightly.avaloniaui.net/v3/index.json" />
+    </packageSources>
+</configuration>

demo/Directory.Packages.props

@@ -1,13 +1,12 @@
 <Project>
     <PropertyGroup>
         <ManagePackageVersionsCentrally>true</ManagePackageVersionsCentrally>
-        <AvaloniaVersion>12.0.999-cibuild0061987-alpha</AvaloniaVersion>
-        <DataGridVersion>11.3.10</DataGridVersion>
+        <AvaloniaVersion>12.0.0-rc1</AvaloniaVersion>
+        <DataGridVersion>12.0.0-rc1</DataGridVersion>
         <SkiaSharpVersion>3.119.1</SkiaSharpVersion>
     </PropertyGroup>
     <ItemGroup>
         <PackageVersion Include="Avalonia" Version="$(AvaloniaVersion)"/>
-<!--        <PackageVersion Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />-->
         <PackageVersion Include="Avalonia.Desktop" Version="$(AvaloniaVersion)" />
         <PackageVersion Include="Avalonia.LinuxFramebuffer" Version="$(AvaloniaVersion)"/>
         <PackageVersion Include="Avalonia.iOS" Version="$(AvaloniaVersion)" />
@@ -15,6 +14,7 @@
         <PackageVersion Include="Avalonia.Android" Version="$(AvaloniaVersion)" />
         <PackageVersion Include="Avalonia.Controls.ColorPicker" Version="$(AvaloniaVersion)"/>
         <PackageVersion Include="Avalonia.Controls.DataGrid" Version="$(DataGridVersion)"/>
+        <PackageVersion Include="AvaloniaUI.DiagnosticsSupport" Version="2.2.0-beta3"/>
 
         <PackageVersion Include="SkiaSharp" Version="$(SkiaSharpVersion)"/>
         <PackageVersion Include="SkiaSharp.NativeAssets.WebAssembly" Version="$(SkiaSharpVersion)"/>
@@ -22,6 +22,5 @@
         <PackageVersion Include="Xamarin.AndroidX.Core.SplashScreen" Version="1.2.0"/>
 
         <PackageVersion Include="CommunityToolkit.Mvvm" Version="8.4.0"/>
-        <PackageVersion Include="Irihi.Avalonia.Shared" Version="0.3.1"/>
     </ItemGroup>
 </Project>

demo/Semi.Avalonia.Demo.Android/Application.cs

@@ -0,0 +1,20 @@
+using Android.App;
+using Android.Runtime;
+using Avalonia;
+using Avalonia.Android;
+
+namespace Semi.Avalonia.Demo.Android;
+
+[Application]
+public class Application : AvaloniaAndroidApplication<App>
+{
+    protected Application(nint javaReference, JniHandleOwnership transfer) : base(javaReference, transfer)
+    {
+    }
+
+    protected override AppBuilder CustomizeAppBuilder(AppBuilder builder)
+    {
+        return base.CustomizeAppBuilder(builder)
+            .WithSourceHanSansCNFont();
+    }
+}

demo/Semi.Avalonia.Demo.Android/MainActivity.cs

@@ -1,6 +1,5 @@
 using Android.App;
 using Android.Content.PM;
-using Avalonia;
 using Avalonia.Android;
 
 namespace Semi.Avalonia.Demo.Android;
@@ -12,11 +11,4 @@ namespace Semi.Avalonia.Demo.Android;
     MainLauncher = true,
     LaunchMode = LaunchMode.SingleTop,
     ConfigurationChanges = ConfigChanges.Orientation | ConfigChanges.ScreenSize | ConfigChanges.UiMode)]
-public class MainActivity : AvaloniaMainActivity
-{
-    protected override AppBuilder CustomizeAppBuilder(AppBuilder builder)
-    {
-        return base.CustomizeAppBuilder(builder)
-            .WithSourceHanSansCNFont();
-    }
-}
+public class MainActivity : AvaloniaMainActivity;

demo/Semi.Avalonia.Demo.Android/Semi.Avalonia.Demo.Android.csproj

@@ -2,7 +2,7 @@
     <PropertyGroup>
         <OutputType>Exe</OutputType>
         <TargetFramework>net10.0-android</TargetFramework>
-        <SupportedOSPlatformVersion>21</SupportedOSPlatformVersion>
+        <SupportedOSPlatformVersion>23</SupportedOSPlatformVersion>
         <Nullable>enable</Nullable>
         <ApplicationId>com.irihitech.Semi.Avalonia</ApplicationId>
         <ApplicationVersion>1</ApplicationVersion>
@@ -13,6 +13,12 @@
         <RootNamespace>Semi.Avalonia.Demo.Android</RootNamespace>
     </PropertyGroup>
 
+    <!-- Use CoreCLR on Android -->
+    <PropertyGroup Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'android'">
+        <UseMonoRuntime>false</UseMonoRuntime>
+        <PublishReadyToRun>true</PublishReadyToRun>
+    </PropertyGroup>
+
     <ItemGroup>
         <AndroidResource Include="Icon.png" Link="Resources\drawable\Icon.png"/>
         <AvaloniaResource Include="..\Fonts\*" Link="Assets\Fonts\%(Filename)%(Extension)" />

demo/Semi.Avalonia.Demo/App.axaml

@@ -10,7 +10,7 @@
         <semi:SemiTheme Locale="zh-CN" />
         <semi:SemiPopupAnimations />
         <semi:ColorPickerSemiTheme />
-        <!-- <semi:DataGridSemiTheme /> -->
+        <semi:DataGridSemiTheme />
         <!-- <semi:TreeDataGridSemiTheme /> -->
     </Application.Styles>
     <Application.Resources>

demo/Semi.Avalonia.Demo/App.axaml.cs

@@ -12,6 +12,9 @@ public partial class App : Application
     public override void Initialize()
     {
         AvaloniaXamlLoader.Load(this);
+#if DEBUG
+        this.AttachDeveloperTools();
+#endif
         this.DataContext = new ApplicationViewModel();
     }
 
@@ -22,7 +25,7 @@ public partial class App : Application
             case IClassicDesktopStyleApplicationLifetime desktop:
                 // Line below is needed to remove Avalonia data validation.
                 // Without this line you will get duplicate validations from both Avalonia and CT
-                BindingPlugins.DataValidators.RemoveAt(0);
+                // BindingPlugins.DataValidators.RemoveAt(0);
                 desktop.MainWindow = new MainWindow();
                 break;
             case ISingleViewApplicationLifetime singleView:

demo/Semi.Avalonia.Demo/Pages/ButtonSpinnerDemo.axaml

@@ -35,5 +35,30 @@
                 VerticalAlignment="Center"
                 Text="A.S.I.A" />
         </ButtonSpinner>
+        <ButtonSpinner
+            Height="30"
+            AllowSpin="{Binding #allowSpinCheck.IsChecked}"
+            BorderThickness="1"
+            ShowButtonSpinner="{Binding #showSpinCheck.IsChecked}"
+            Spin="OnSpin"
+            Theme="{StaticResource SplitButtonSpinner}">
+            <TextBlock
+                HorizontalAlignment="Center"
+                VerticalAlignment="Center"
+                Text="A.S.I.A" />
+        </ButtonSpinner>
+        <ButtonSpinner
+            Height="30"
+            AllowSpin="{Binding #allowSpinCheck.IsChecked}"
+            ButtonSpinnerLocation="Left"
+            BorderThickness="1"
+            ShowButtonSpinner="{Binding #showSpinCheck.IsChecked}"
+            Spin="OnSpin"
+            Theme="{StaticResource SplitButtonSpinner}">
+            <TextBlock
+                HorizontalAlignment="Center"
+                VerticalAlignment="Center"
+                Text="A.S.I.A" />
+        </ButtonSpinner>
     </StackPanel>
 </UserControl>

demo/Semi.Avalonia.Demo/Pages/CalendarDatePickerDemo.axaml

@@ -33,6 +33,6 @@
             Margin="0,0,0,8"
             CustomDateFormatString="ddd, MMM d"
             SelectedDateFormat="Custom" />
-        <CalendarDatePicker Margin="0,0,0,8" Watermark="Watermark" />
+        <CalendarDatePicker Margin="0,0,0,8" PlaceholderText="Placeholder" />
     </StackPanel>
 </UserControl>

demo/Semi.Avalonia.Demo/Pages/CarouselPageDemo.axaml

@@ -0,0 +1,69 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             x:Class="Semi.Avalonia.Demo.Pages.CarouselPageDemo">
+    <DockPanel>
+        <ScrollViewer DockPanel.Dock="Right" Width="220">
+            <StackPanel Margin="12" Spacing="8">
+                <TextBlock Text="Configuration" FontWeight="SemiBold" FontSize="16"
+                           Foreground="{DynamicResource SystemControlHighlightAccentBrush}" />
+
+                <TextBlock Text="Navigation" FontWeight="SemiBold" FontSize="13" />
+                <StackPanel Spacing="6">
+                    <Button Content="Previous" Click="OnPrevious" HorizontalAlignment="Stretch" />
+                    <Button Content="Next" Click="OnNext" HorizontalAlignment="Stretch" />
+                </StackPanel>
+
+                <Separator />
+
+                <TextBlock Text="Status" FontWeight="SemiBold" FontSize="13" />
+                <TextBlock Name="StatusText" Text="Page 1 of 3" Opacity="0.7" TextWrapping="Wrap" />
+            </StackPanel>
+        </ScrollViewer>
+
+        <Border DockPanel.Dock="Right" Width="1"
+                Background="{DynamicResource SystemControlForegroundBaseMediumLowBrush}" />
+
+        <Border Margin="12"
+                BorderBrush="{DynamicResource SystemControlForegroundBaseMediumLowBrush}"
+                BorderThickness="1" CornerRadius="6" ClipToBounds="True">
+            <Panel>
+                <CarouselPage Name="DemoCarousel"
+                              SelectionChanged="OnSelectionChanged">
+                    <ContentPage Header="Welcome">
+                        <StackPanel Margin="24" Spacing="12"
+                                    HorizontalAlignment="Center" VerticalAlignment="Center">
+                            <TextBlock Text="Welcome" FontSize="28" FontWeight="Bold"
+                                       HorizontalAlignment="Center" />
+                            <TextBlock Text="Swipe left or use the buttons to navigate."
+                                       TextWrapping="Wrap" Opacity="0.7" TextAlignment="Center" MaxWidth="280" />
+                        </StackPanel>
+                    </ContentPage>
+                    <ContentPage Header="Explore">
+                        <StackPanel Margin="24" Spacing="12"
+                                    HorizontalAlignment="Center" VerticalAlignment="Center">
+                            <TextBlock Text="Explore" FontSize="28" FontWeight="Bold"
+                                       HorizontalAlignment="Center" />
+                            <TextBlock Text="CarouselPage supports scroll-based and transition-based navigation modes."
+                                       TextWrapping="Wrap" Opacity="0.7" TextAlignment="Center" MaxWidth="280" />
+                        </StackPanel>
+                    </ContentPage>
+                    <ContentPage Header="Get Started">
+                        <StackPanel Margin="24" Spacing="12"
+                                    HorizontalAlignment="Center" VerticalAlignment="Center">
+                            <TextBlock Text="Get Started" FontSize="28" FontWeight="Bold"
+                                       HorizontalAlignment="Center" />
+                            <TextBlock Text="Use SelectedIndex to jump to any page, or assign a PageTransition for animated switching."
+                                       TextWrapping="Wrap" Opacity="0.7" TextAlignment="Center" MaxWidth="280" />
+                        </StackPanel>
+                    </ContentPage>
+                </CarouselPage>
+                <PipsPager HorizontalAlignment="Center"
+                           VerticalAlignment="Bottom" Margin="0,0,0,20"
+                           NumberOfPages="3"
+                           SelectedPageIndex="{Binding #DemoCarousel.SelectedIndex}" />
+            </Panel>
+        </Border>
+
+
+    </DockPanel>
+</UserControl>

demo/Semi.Avalonia.Demo/Pages/CarouselPageDemo.axaml.cs

@@ -0,0 +1,34 @@
+using System.Collections;
+using Avalonia.Controls;
+using Avalonia.Interactivity;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class CarouselPageDemo : UserControl
+{
+    public CarouselPageDemo()
+    {
+        InitializeComponent();
+    }
+
+    private void OnPrevious(object? sender, RoutedEventArgs e)
+    {
+        if (DemoCarousel.SelectedIndex > 0)
+            DemoCarousel.SelectedIndex--;
+    }
+
+    private void OnNext(object? sender, RoutedEventArgs e)
+    {
+        var pageCount = (DemoCarousel.Pages as IList)?.Count ?? 0;
+        if (DemoCarousel.SelectedIndex < pageCount - 1)
+            DemoCarousel.SelectedIndex++;
+    }
+
+    private void OnSelectionChanged(object? sender, PageSelectionChangedEventArgs e)
+    {
+        if (StatusText == null)
+            return;
+        var pageCount = (DemoCarousel.Pages as IList)?.Count ?? 0;
+        StatusText.Text = $"Page {DemoCarousel.SelectedIndex + 1} of {pageCount}";
+    }
+}

demo/Semi.Avalonia.Demo/Pages/CommandBarDemo.axaml

@@ -0,0 +1,94 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.CommandBarDemo"
+    xmlns="https://github.com/avaloniaui"
+    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:collections="clr-namespace:Avalonia.Collections;assembly=Avalonia.Base"
+    d:DesignHeight="600"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <UserControl.Resources>
+        <collections:AvaloniaList x:TypeArguments="CommandBarDefaultLabelPosition" x:Key="LabelPositionList">
+            <CommandBarDefaultLabelPosition>Bottom</CommandBarDefaultLabelPosition>
+            <CommandBarDefaultLabelPosition>Collapsed</CommandBarDefaultLabelPosition>
+            <CommandBarDefaultLabelPosition>Right</CommandBarDefaultLabelPosition>
+        </collections:AvaloniaList>
+        <collections:AvaloniaList x:TypeArguments="CommandBarOverflowButtonVisibility" x:Key="VisibilityList">
+            <CommandBarOverflowButtonVisibility>Auto</CommandBarOverflowButtonVisibility>
+            <CommandBarOverflowButtonVisibility>Collapsed</CommandBarOverflowButtonVisibility>
+            <CommandBarOverflowButtonVisibility>Visible</CommandBarOverflowButtonVisibility>
+        </collections:AvaloniaList>
+    </UserControl.Resources>
+    <ScrollViewer>
+        <StackPanel Spacing="16">
+            <GroupBox>
+                <GroupBox.Header>
+                    <Grid ColumnDefinitions="Auto,*" RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto">
+
+                        <TextBlock Grid.Row="0" Grid.Column="0" Text="DefaultLabelPosition" VerticalAlignment="Center" />
+                        <ComboBox Grid.Row="0" Grid.Column="1"
+                                  Name="lc"
+                                  ItemsSource="{DynamicResource LabelPositionList}"
+                                  SelectedValue="{x:Static CommandBarDefaultLabelPosition.Bottom}" />
+
+                        <TextBlock Grid.Row="1" Grid.Column="0" Text="OverflowButtonVisibility" VerticalAlignment="Center" />
+                        <ComboBox Grid.Row="1" Grid.Column="1"
+                                  Name="btvb"
+                                  ItemsSource="{DynamicResource VisibilityList}"
+                                  SelectedValue="{x:Static CommandBarOverflowButtonVisibility.Auto}" />
+
+                        <TextBlock Grid.Row="2" Grid.Column="0" Text="IsDynamicOverflowEnabled" VerticalAlignment="Center" />
+                        <ToggleSwitch Grid.Row="2" Grid.Column="1" Name="idfe" IsChecked="True" />
+
+                        <TextBlock Grid.Row="3" Grid.Column="0" Text="IsOpen" VerticalAlignment="Center" />
+                        <ToggleSwitch Grid.Row="3" Grid.Column="1" Name="isop" />
+
+                        <TextBlock Grid.Row="4" Grid.Column="0" Text="IsSticky" VerticalAlignment="Center" />
+                        <ToggleSwitch Grid.Row="4" Grid.Column="1" Name="isst" />
+
+                        <TextBlock Grid.Row="5" Grid.Column="0" Text="Width" VerticalAlignment="Center" />
+                        <Slider Grid.Row="5" Grid.Column="1" Name="ws" HorizontalAlignment="Left" Width="500" Minimum="0" Maximum="1000" Value="200" />
+                    </Grid>
+                </GroupBox.Header>
+                <CommandBar
+                    DefaultLabelPosition="{Binding #lc.SelectedValue}"
+                    OverflowButtonVisibility="{Binding #btvb.SelectedValue}"
+                    IsDynamicOverflowEnabled="{Binding #idfe.IsChecked}"
+                    IsOpen="{Binding #isop.IsChecked}"
+                    IsSticky="{Binding #isst.IsChecked}"
+                    Width="{Binding #ws.Value}">
+                    <AppBarButton Label="New" Icon="{DynamicResource SemiIconPlus}" />
+                    <AppBarButton Label="Save" Icon="{DynamicResource SemiIconSave}" />
+                    <AppBarSeparator />
+                    <AppBarToggleButton Label="Bold" Icon="{DynamicResource SemiIconBold}" />
+                    <AppBarToggleButton Label="Italic" Icon="{DynamicResource SemiIconItalic}" />
+                    <AppBarToggleButton IsChecked="True" IsEnabled="False" Label="Underline" Icon="{DynamicResource SemiIconUnderline}" />
+                    <AppBarSeparator />
+                    <AppBarButton Label="Share" Icon="{DynamicResource SemiIconShare}" />
+                    <AppBarButton Label="Export" Icon="{DynamicResource SemiIconExport}" />
+                    <AppBarButton Label="Print" Icon="{DynamicResource SemiIconPrint}" />
+                    <AppBarSeparator />
+                    <AppBarButton Label="Delete" Icon="{DynamicResource SemiIconDelete}" />
+                </CommandBar>
+            </GroupBox>
+
+            <!--  With secondary commands (overflow)  -->
+            <GroupBox>
+                <GroupBox.Header>
+                    <TextBlock Text="CommandBar — With Secondary Commands (overflow)" />
+                </GroupBox.Header>
+                <CommandBar>
+                    <AppBarButton Label="New" Icon="{DynamicResource SemiIconPlus}" />
+                    <AppBarButton Label="Save" Icon="{DynamicResource SemiIconSave}" />
+                    <AppBarButton Label="Share" Icon="{DynamicResource SemiIconShare}" />
+                    <CommandBar.SecondaryCommands>
+                        <AppBarButton Label="Export" Icon="{DynamicResource SemiIconExport}" />
+                        <AppBarButton Label="Delete" Icon="{DynamicResource SemiIconDelete}" />
+                    </CommandBar.SecondaryCommands>
+                </CommandBar>
+            </GroupBox>
+
+        </StackPanel>
+    </ScrollViewer>
+</UserControl>

demo/Semi.Avalonia.Demo/Pages/CommandBarDemo.axaml.cs

@@ -0,0 +1,11 @@
+using Avalonia.Controls;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class CommandBarDemo : UserControl
+{
+    public CommandBarDemo()
+    {
+        InitializeComponent();
+    }
+}

demo/Semi.Avalonia.Demo/Pages/ContentPageDemo.axaml

@@ -0,0 +1,54 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.ContentPageDemo"
+    xmlns="https://github.com/avaloniaui"
+    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"
+    d:DesignHeight="600"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <DockPanel>
+        <ScrollViewer DockPanel.Dock="Right" Width="260">
+            <StackPanel Margin="12" Spacing="8">
+                <TextBlock Text="Configuration" FontWeight="SemiBold" FontSize="16"
+                           Foreground="{DynamicResource SemiColorText0}" />
+                <TextBlock Text="ContentPage is the fundamental page type. It hosts a single piece of content and integrates with NavigationPage, TabbedPage, and CarouselPage. The Header property sets the navigation bar title."
+                           FontSize="12" Opacity="0.7" TextWrapping="Wrap" />
+
+                <Separator />
+
+                <TextBlock Text="Navigation" FontWeight="SemiBold" />
+                <Button Content="Push Page" HorizontalAlignment="Stretch" Click="OnPush" />
+                <Button Content="Pop Page" HorizontalAlignment="Stretch" Click="OnPop" />
+                <Button Content="Pop to Root" HorizontalAlignment="Stretch" Click="OnPopToRoot" />
+
+                <Separator />
+
+                <TextBlock Text="Key Properties" FontWeight="SemiBold" />
+                <TextBlock Text="• Header: nav bar title (string or Control)" FontSize="12" Opacity="0.8" TextWrapping="Wrap" />
+                <TextBlock Text="• Content: any Avalonia control" FontSize="12" Opacity="0.8" TextWrapping="Wrap" />
+                <TextBlock Text="• Background: page background brush" FontSize="12" Opacity="0.8" TextWrapping="Wrap" />
+                <TextBlock Text="• HorizontalContentAlignment" FontSize="12" Opacity="0.8" />
+                <TextBlock Text="• VerticalContentAlignment" FontSize="12" Opacity="0.8" />
+                <TextBlock Text="• AutomaticallyApplySafeAreaPadding" FontSize="12" Opacity="0.8" />
+
+                <Separator />
+
+                <TextBlock Name="StatusText"
+                           Text="Depth: 1 | Current: Root Page"
+                           FontSize="11"
+                           Opacity="0.7" />
+            </StackPanel>
+        </ScrollViewer>
+
+        <Border DockPanel.Dock="Right" Width="1" Background="{DynamicResource SemiColorBackground0}" />
+
+        <Border Margin="12"
+                BorderBrush="{DynamicResource SemiColorBorder}"
+                BorderThickness="1"
+                CornerRadius="6"
+                ClipToBounds="True">
+            <NavigationPage Name="DemoNav" />
+        </Border>
+    </DockPanel>
+</UserControl>

demo/Semi.Avalonia.Demo/Pages/ContentPageDemo.axaml.cs

@@ -0,0 +1,93 @@
+using Avalonia.Controls;
+using Avalonia.Interactivity;
+using Avalonia.Media;
+using Avalonia.Layout;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class ContentPageDemo : UserControl
+{
+    private static readonly Color[] PageColors =
+    [
+        Color.FromRgb(0xE3, 0xF2, 0xFD), // blue
+        Color.FromRgb(0xF3, 0xE5, 0xF5), // purple
+        Color.FromRgb(0xE8, 0xF5, 0xE9), // green
+        Color.FromRgb(0xFF, 0xF8, 0xE1), // amber
+        Color.FromRgb(0xFB, 0xE9, 0xE7), // deep orange
+    ];
+
+    private int _pageCount;
+
+    public ContentPageDemo()
+    {
+        InitializeComponent();
+        Loaded += OnLoaded;
+    }
+
+    private async void OnLoaded(object? sender, RoutedEventArgs e)
+    {
+        await DemoNav.PushAsync(MakePage("Root Page", "ContentPage inside a NavigationPage.\nUse the options to navigate."));
+        UpdateStatus();
+    }
+
+    private async void OnPush(object? sender, RoutedEventArgs e)
+    {
+        _pageCount++;
+        await DemoNav.PushAsync(MakePage($"Page {_pageCount}", $"ContentPage #{_pageCount}.\nNavigate back using the back button."));
+        UpdateStatus();
+    }
+
+    private async void OnPop(object? sender, RoutedEventArgs e)
+    {
+        await DemoNav.PopAsync();
+        UpdateStatus();
+    }
+
+    private async void OnPopToRoot(object? sender, RoutedEventArgs e)
+    {
+        await DemoNav.PopToRootAsync();
+        _pageCount = 0;
+        UpdateStatus();
+    }
+
+    private void UpdateStatus()
+    {
+        StatusText.Text = $"Depth: {DemoNav.StackDepth} | Current: {DemoNav.CurrentPage?.Header}";
+    }
+
+    private ContentPage MakePage(string header, string body) =>
+        new ContentPage
+        {
+            Header = header,
+            Background = new SolidColorBrush(PageColors[_pageCount % PageColors.Length]),
+            Content = new StackPanel
+            {
+                HorizontalAlignment = HorizontalAlignment.Center,
+                VerticalAlignment = VerticalAlignment.Center,
+                Spacing = 10,
+                Children =
+                {
+                    new TextBlock
+                    {
+                        Text = header,
+                        FontSize = 20,
+                        FontWeight = FontWeight.SemiBold,
+                        HorizontalAlignment = HorizontalAlignment.Center,
+                        Foreground = Brushes.Black,
+                    },
+                    new TextBlock
+                    {
+                        Text = body,
+                        FontSize = 13,
+                        Opacity = 0.7,
+                        TextWrapping = TextWrapping.Wrap,
+                        TextAlignment = TextAlignment.Center,
+                        MaxWidth = 260,
+                        Foreground = Brushes.Black,
+                    }
+                }
+            },
+            HorizontalContentAlignment = HorizontalAlignment.Stretch,
+            VerticalContentAlignment = VerticalAlignment.Stretch
+        };
+}

demo/Semi.Avalonia.Demo/Pages/DataGridDemo.axaml

@@ -0,0 +1,179 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.DataGridDemo"
+    xmlns="https://github.com/avaloniaui"
+    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:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels;assembly=Semi.Avalonia.Demo"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    x:DataType="vm:DataGridDemoViewModel"
+    mc:Ignorable="d">
+    <TabControl>
+        <TabItem Header="DataGrid">
+            <Grid RowDefinitions="Auto, *">
+                <StackPanel Grid.Row="0" Orientation="Horizontal">
+                    <ToggleSwitch Content="Enable" Name="enable" IsChecked="True" />
+                    <ToggleSwitch Content="Inset Content" Name="inset" />
+                    <ToggleSwitch Content="ScrollBar Auto Hide" Name="autohide" />
+                </StackPanel>
+                <DataGrid Grid.Row="1"
+                          Margin="8"
+                          CanUserReorderColumns="True"
+                          CanUserResizeColumns="True"
+                          CanUserSortColumns="True"
+                          HeadersVisibility="All"
+                          IsReadOnly="True"
+                          Classes.InsetContent="{Binding #inset.IsChecked}"
+                          ScrollViewer.AllowAutoHide="{Binding #autohide.IsChecked}"
+                          IsEnabled="{Binding #enable.IsChecked}"
+                          ItemsSource="{Binding GridData1}">
+                    <DataGrid.Columns>
+                        <DataGridTextColumn
+                            Width="6*"
+                            x:DataType="vm:Song"
+                            Binding="{Binding Title}"
+                            Header="Title" />
+                        <DataGridTextColumn
+                            Width="6*"
+                            x:DataType="vm:Song"
+                            Binding="{Binding Artist}"
+                            Header="Artist" />
+                        <DataGridTextColumn
+                            Width="6*"
+                            x:DataType="vm:Song"
+                            Binding="{Binding Album}"
+                            Header="Album" />
+                        <DataGridTemplateColumn Header="Duration" SortMemberPath="Duration">
+                            <DataGridTemplateColumn.CellTemplate>
+                                <DataTemplate>
+                                    <TextBlock
+                                        Margin="8,0,0,0"
+                                        VerticalAlignment="Center"
+                                        Text="{Binding Duration}" />
+                                </DataTemplate>
+                            </DataGridTemplateColumn.CellTemplate>
+                        </DataGridTemplateColumn>
+                    </DataGrid.Columns>
+
+                </DataGrid>
+
+            </Grid>
+        </TabItem>
+        <TabItem Header="Grouping">
+            <DataGrid
+                Margin="8"
+                CanUserReorderColumns="True"
+                CanUserResizeColumns="True"
+                CanUserSortColumns="True"
+                HeadersVisibility="All"
+                IsReadOnly="True"
+                ItemsSource="{Binding GridData2}">
+                <DataGrid.Columns>
+                    <DataGridTextColumn
+                        Width="6*"
+                        x:DataType="vm:Song"
+                        Binding="{Binding Title}"
+                        Header="Title" />
+                    <DataGridTextColumn
+                        Width="6*"
+                        x:DataType="vm:Song"
+                        Binding="{Binding Artist}"
+                        Header="Artist" />
+                    <DataGridTextColumn
+                        Width="6*"
+                        x:DataType="vm:Song"
+                        Binding="{Binding Album}"
+                        Header="Album" />
+                    <DataGridTemplateColumn
+                        x:DataType="vm:Song"
+                        Header="Duration"
+                        SortMemberPath="Duration">
+                        <DataGridTemplateColumn.CellTemplate>
+                            <DataTemplate x:DataType="vm:Song">
+                                <TextBlock
+                                    Margin="8,0,0,0"
+                                    VerticalAlignment="Center"
+                                    Text="{Binding Duration}" />
+                            </DataTemplate>
+                        </DataGridTemplateColumn.CellTemplate>
+                    </DataGridTemplateColumn>
+                </DataGrid.Columns>
+            </DataGrid>
+        </TabItem>
+        <TabItem Name="EditableTab" Header="Editable">
+            <Grid Margin="8" RowDefinitions="Auto,*,Auto">
+                <StackPanel
+                    Grid.Row="0"
+                    Orientation="Horizontal"
+                    Spacing="4">
+                    <TextBlock VerticalAlignment="Center" Text="FontSize:" />
+                    <Slider
+                        Name="FontSizeSlider"
+                        Width="100"
+                        VerticalAlignment="Center"
+                        Maximum="30"
+                        Minimum="5"
+                        Value="14" />
+                    <CheckBox
+                        Name="IsThreeStateCheckBox"
+                        Content="IsThreeState"
+                        IsChecked="False" />
+                </StackPanel>
+                <DataGrid
+                    Grid.Row="1"
+                    Margin="8"
+                    ItemsSource="{Binding GridData3}">
+                    <DataGrid.Columns>
+                        <DataGridCheckBoxColumn
+                            Width="2*"
+                            Binding="{Binding IsSelected}"
+                            Header="Select"
+                            IsThreeState="{Binding #IsThreeStateCheckBox.IsChecked, Mode=OneWay}" />
+                        <DataGridTextColumn
+                            Width="6*"
+                            x:DataType="vm:SongViewModel"
+                            Binding="{Binding Title}"
+                            FontSize="{Binding #FontSizeSlider.Value, Mode=OneWay}"
+                            Header="Title" />
+                        <DataGridTextColumn
+                            Width="6*"
+                            x:DataType="vm:SongViewModel"
+                            Binding="{Binding Artist}"
+                            Header="Artist" />
+                        <DataGridTextColumn
+                            Width="6*"
+                            x:DataType="vm:SongViewModel"
+                            Binding="{Binding Album}"
+                            Header="Album" />
+                        <DataGridTemplateColumn Width="2*" Header="Comments">
+                            <DataGridTemplateColumn.CellTemplate>
+                                <DataTemplate>
+                                    <TextBlock
+                                        HorizontalAlignment="Center"
+                                        VerticalAlignment="Center"
+                                        Text="{Binding CountOfComment}" />
+                                </DataTemplate>
+                            </DataGridTemplateColumn.CellTemplate>
+                            <DataGridTemplateColumn.CellEditingTemplate>
+                                <DataTemplate>
+                                    <NumericUpDown
+                                        HorizontalAlignment="Stretch"
+                                        FormatString="N0"
+                                        Minimum="0"
+                                        Value="{Binding CountOfComment}" />
+                                </DataTemplate>
+                            </DataGridTemplateColumn.CellEditingTemplate>
+                        </DataGridTemplateColumn>
+                    </DataGrid.Columns>
+                </DataGrid>
+                <Button
+                    Grid.Row="2"
+                    Margin="12,0,12,12"
+                    HorizontalAlignment="Right"
+                    Command="{Binding AddCommand}"
+                    Content="Add" />
+            </Grid>
+        </TabItem>
+    </TabControl>
+</UserControl>

demo/Semi.Avalonia.Demo/Pages/DataGridDemo.axaml.cs

@@ -0,0 +1,15 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+using Semi.Avalonia.Demo.ViewModels;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class DataGridDemo : UserControl
+{
+    public DataGridDemo()
+    {
+        InitializeComponent();
+        DataContext = new DataGridDemoViewModel();
+    }
+}

demo/Semi.Avalonia.Demo/Pages/DrawerPageDemo.axaml

@@ -0,0 +1,72 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.DrawerPageDemo"
+    xmlns="https://github.com/avaloniaui"
+    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"
+    d:DesignHeight="700"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <DockPanel>
+        <ScrollViewer DockPanel.Dock="Right" Width="260">
+            <StackPanel Margin="12" Spacing="8">
+                <TextBlock Text="Configuration" FontWeight="SemiBold" FontSize="16"
+                           Foreground="{DynamicResource SemiColorText0}" />
+
+                <Button Content="Toggle Drawer"
+                        HorizontalAlignment="Stretch"
+                        Click="OnToggleDrawer" />
+
+                <Separator />
+
+                <CheckBox Name="GestureCheck"
+                          Content="Gesture Enabled"
+                          IsChecked="True"
+                          IsCheckedChanged="OnGestureChanged" />
+
+                <Separator />
+
+                <TextBlock Text="Status" FontWeight="SemiBold" FontSize="14" />
+                <TextBlock Name="StatusText"
+                           Text="Drawer: Closed"
+                           Opacity="0.7"
+                           TextWrapping="Wrap" />
+            </StackPanel>
+        </ScrollViewer>
+
+        <Border DockPanel.Dock="Right" Width="1" Background="{DynamicResource SemiColorBackground0}" />
+
+        <Border Margin="12"
+                BorderBrush="{DynamicResource SemiColorBorder}"
+                BorderThickness="1"
+                CornerRadius="6"
+                ClipToBounds="True">
+            <DrawerPage Name="DemoDrawer"
+                        Header="First Look"
+                        DrawerLength="250">
+                <DrawerPage.DrawerHeader>
+                    <Border Padding="16" Background="{DynamicResource SemiColorPrimary}">
+                        <TextBlock Text="Menu" FontSize="18" FontWeight="SemiBold" Foreground="{DynamicResource SemiColorText0}" />
+                    </Border>
+                </DrawerPage.DrawerHeader>
+                <DrawerPage.Drawer>
+                    <ListBox Name="DrawerMenu" SelectionChanged="OnMenuSelectionChanged">
+                        <ListBoxItem Content="Home" />
+                        <ListBoxItem Content="Settings" />
+                        <ListBoxItem Content="Profile" />
+                        <ListBoxItem Content="About" />
+                    </ListBox>
+                </DrawerPage.Drawer>
+                <DrawerPage.Content>
+                    <ContentPage Header="Home">
+                        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Spacing="8">
+                            <TextBlock Text="Home Page" FontSize="20" FontWeight="SemiBold" HorizontalAlignment="Center" />
+                            <TextBlock Text="Swipe from the left edge or use the hamburger button to open the drawer."
+                                       FontSize="13" Opacity="0.7" TextWrapping="Wrap" TextAlignment="Center" MaxWidth="300" />
+                        </StackPanel>
+                    </ContentPage>
+                </DrawerPage.Content>
+            </DrawerPage>
+        </Border>
+    </DockPanel>
+</UserControl>

demo/Semi.Avalonia.Demo/Pages/DrawerPageDemo.axaml.cs

@@ -0,0 +1,68 @@
+using System;
+using Avalonia.Controls;
+using Avalonia.Interactivity;
+using Avalonia.Layout;
+using Avalonia.Media;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class DrawerPageDemo : UserControl
+{
+    public DrawerPageDemo()
+    {
+        InitializeComponent();
+    }
+
+    protected override void OnLoaded(RoutedEventArgs e)
+    {
+        base.OnLoaded(e);
+        DemoDrawer.Opened += OnDrawerStatusChanged;
+        DemoDrawer.Closed += OnDrawerStatusChanged;
+    }
+
+    protected override void OnUnloaded(RoutedEventArgs e)
+    {
+        base.OnUnloaded(e);
+        DemoDrawer.Opened -= OnDrawerStatusChanged;
+        DemoDrawer.Closed -= OnDrawerStatusChanged;
+    }
+
+    private void OnDrawerStatusChanged(object? sender, EventArgs e) => UpdateStatus();
+
+    private void OnToggleDrawer(object? sender, RoutedEventArgs e)
+    {
+        DemoDrawer.IsOpen = !DemoDrawer.IsOpen;
+    }
+
+    private void OnGestureChanged(object? sender, RoutedEventArgs e)
+    {
+        DemoDrawer.IsGestureEnabled = GestureCheck.IsChecked == true;
+    }
+
+    private void OnMenuSelectionChanged(object? sender, SelectionChangedEventArgs e)
+    {
+        if (DrawerMenu.SelectedItem is ListBoxItem item)
+        {
+            DemoDrawer.Content = new ContentPage
+            {
+                Header = item.Content?.ToString(),
+                Content = new TextBlock
+                {
+                    Text = $"{item.Content} page content",
+                    FontSize = 16,
+                    HorizontalAlignment = HorizontalAlignment.Center,
+                    VerticalAlignment = VerticalAlignment.Center,
+                    Foreground = Brushes.Black,
+                },
+                HorizontalContentAlignment = HorizontalAlignment.Stretch,
+                VerticalContentAlignment = VerticalAlignment.Stretch
+            };
+            DemoDrawer.IsOpen = false;
+        }
+    }
+
+    private void UpdateStatus()
+    {
+        StatusText.Text = $"Drawer: {(DemoDrawer.IsOpen ? "Open" : "Closed")}";
+    }
+}

demo/Semi.Avalonia.Demo/Pages/HighContrastDemo.axaml

@@ -0,0 +1,327 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             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:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
+             xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
+             xmlns:cvt="clr-namespace:Semi.Avalonia.Demo.Converters"
+             xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
+             mc:Ignorable="d" d:DesignWidth="1000" d:DesignHeight="1450"
+             x:DataType="vm:HighContrastDemoViewModel"
+             x:Class="Semi.Avalonia.Demo.Pages.HighContrastDemo">
+    <Design.DataContext>
+        <vm:HighContrastDemoViewModel />
+    </Design.DataContext>
+    <SplitView
+        Name="splitView"
+        CompactPaneLength="50"
+        DisplayMode="CompactInline"
+        IsPaneOpen="{Binding #toggle.IsChecked, Mode=TwoWay}"
+        OpenPaneLength="300"
+        PanePlacement="Right">
+        <SplitView.Pane>
+            <StackPanel>
+                <ToggleSwitch
+                    Name="toggle"
+                    HorizontalAlignment="Right"
+                    IsChecked="True"
+                    Theme="{DynamicResource IconBorderlessToggleSwitch}"
+                    Content="{StaticResource SemiIconSidebar}" />
+                <Border IsVisible="{Binding #splitView.IsPaneOpen}" Theme="{DynamicResource CardBorder}">
+                    <Panel>
+                        <TextBlock
+                            IsVisible="{Binding SelectedColorResource, Converter={x:Static ObjectConverters.IsNull}}"
+                            Text="Click on Color to Check Details"
+                            TextWrapping="Wrap" />
+                        <controls:ColorDetailControl
+                            Background="{Binding SelectedColorResource.Brush}"
+                            IsVisible="{Binding SelectedColorResource, Converter={x:Static ObjectConverters.IsNotNull}}"
+                            ResourceKey="{Binding SelectedColorResource.ResourceKey}"
+                            ResourceName="{Binding SelectedColorResource.ResourceKey}" />
+                    </Panel>
+                </Border>
+            </StackPanel>
+        </SplitView.Pane>
+        <SplitView.Content>
+            <ScrollViewer>
+                <StackPanel Spacing="10">
+                    <TextBlock Text="Theme Preview" FontWeight="SemiBold" />
+                    <ListBox
+                        Theme="{StaticResource PureCardRadioGroupListBox}"
+                        ItemsSource="{Binding ThemeVariants}"
+                        SelectedItem="{Binding SelectedThemeVariant}">
+                        <ListBox.ItemsPanel>
+                            <ItemsPanelTemplate>
+                                <WrapPanel Orientation="Horizontal" />
+                            </ItemsPanelTemplate>
+                        </ListBox.ItemsPanel>
+                        <ListBox.ItemTemplate>
+                            <DataTemplate>
+                                <StackPanel HorizontalAlignment="Left" Spacing="5" MinWidth="200">
+                                    <ThemeVariantScope RequestedThemeVariant="{Binding}">
+                                        <Border
+                                            Padding="5 25 5 5"
+                                            HorizontalAlignment="Left"
+                                            Background="{DynamicResource WindowColor}"
+                                            BorderBrush="{DynamicResource WindowTextColor}"
+                                            BorderThickness="1"
+                                            CornerRadius="3">
+                                            <StackPanel Spacing="10">
+                                                <StackPanel Orientation="Horizontal" Spacing="50">
+                                                    <StackPanel Spacing="5">
+                                                        <TextBlock
+                                                            FontSize="50"
+                                                            Text="Aa" />
+                                                        <StackPanel Orientation="Horizontal" Spacing="3">
+                                                            <StackPanel.Styles>
+                                                                <Style Selector="Border">
+                                                                    <Setter Property="BorderThickness" Value="1" />
+                                                                    <Setter Property="BorderBrush" Value="{DynamicResource WindowTextColor}" />
+                                                                    <Setter Property="CornerRadius" Value="5" />
+                                                                    <Setter Property="Width" Value="10" />
+                                                                    <Setter Property="Height" Value="{Binding $self.Width}" />
+                                                                </Style>
+                                                            </StackPanel.Styles>
+                                                            <Border Background="{DynamicResource WindowColor}" />
+                                                            <Border Background="{DynamicResource HotlightColor}" />
+                                                            <Border Background="{DynamicResource GrayTextColor}" />
+                                                            <Border Background="{DynamicResource HighlightTextColor}" />
+                                                            <Border Background="{DynamicResource HighlightColor}" />
+                                                        </StackPanel>
+                                                    </StackPanel>
+                                                    <Border
+                                                        BorderThickness="1"
+                                                        BorderBrush="{DynamicResource WindowTextColor}"
+                                                        CornerRadius="3"
+                                                        Padding="8">
+                                                        <Panel>
+                                                            <StackPanel Spacing="5">
+                                                                <Border
+                                                                    Width="50"
+                                                                    Height="1"
+                                                                    Background="{DynamicResource WindowTextColor}" />
+                                                                <Border
+                                                                    Height="1"
+                                                                    Background="{DynamicResource WindowTextColor}" />
+                                                                <Border
+                                                                    Height="1"
+                                                                    Background="{DynamicResource WindowTextColor}" />
+                                                            </StackPanel>
+                                                            <StackPanel
+                                                                HorizontalAlignment="Right"
+                                                                VerticalAlignment="Bottom"
+                                                                Orientation="Horizontal"
+                                                                Spacing="2">
+                                                                <Border
+                                                                    Width="20"
+                                                                    Height="5"
+                                                                    Background="{DynamicResource HighlightColor}"
+                                                                    CornerRadius="1" />
+                                                                <Border
+                                                                    Width="20"
+                                                                    Height="5"
+                                                                    BorderThickness="1"
+                                                                    BorderBrush="{DynamicResource ButtonTextColor}"
+                                                                    CornerRadius="1" />
+                                                            </StackPanel>
+                                                        </Panel>
+                                                    </Border>
+                                                </StackPanel>
+                                                <Border
+                                                    Height="1"
+                                                    Background="{DynamicResource WindowTextColor}" />
+                                            </StackPanel>
+                                        </Border>
+                                    </ThemeVariantScope>
+                                    <TextBlock Text="{Binding}" FontWeight="SemiBold" />
+                                </StackPanel>
+                            </DataTemplate>
+                        </ListBox.ItemTemplate>
+                    </ListBox>
+
+                    <ThemeVariantScope
+                        MinWidth="400"
+                        RequestedThemeVariant="{Binding SelectedThemeVariant}">
+                        <Border Padding="10" Background="{DynamicResource WindowColor}">
+                            <StackPanel Spacing="16">
+                                <StackPanel.Styles>
+                                    <Style Selector="TextBlock">
+                                        <Setter Property="HorizontalAlignment" Value="Left" />
+                                        <Setter Property="VerticalAlignment" Value="Center" />
+                                        <Setter Property="FontWeight" Value="SemiBold" />
+                                    </Style>
+                                    <Style Selector="controls|ColorItemControl.ColorBlock">
+                                        <Setter Property="Width" Value="44" />
+                                        <Setter Property="Height" Value="{Binding $self.Width}" />
+                                        <Setter Property="HorizontalAlignment" Value="Right" />
+                                        <Setter Property="BorderThickness" Value="1" />
+                                        <Setter Property="BorderBrush" Value="{DynamicResource WindowTextColor}" />
+                                        <Setter Property="CornerRadius" Value="3" />
+                                    </Style>
+                                </StackPanel.Styles>
+                                <Panel>
+                                    <TextBlock
+                                        Foreground="{DynamicResource WindowTextColor}"
+                                        Text="Background" />
+                                    <controls:ColorItemControl
+                                        Classes="ColorBlock"
+                                        DataContext="{Binding ColorResources[0]}"
+                                        Background="{DynamicResource  WindowColor}" />
+                                </Panel>
+                                <Panel>
+                                    <TextBlock
+                                        Foreground="{DynamicResource WindowTextColor}"
+                                        Text="Text" />
+                                    <controls:ColorItemControl
+                                        Classes="ColorBlock"
+                                        DataContext="{Binding ColorResources[1]}"
+                                        Background="{DynamicResource  WindowTextColor}" />
+                                </Panel>
+                                <Panel>
+                                    <TextBlock
+                                        Foreground="{DynamicResource HotlightColor}"
+                                        TextDecorations="Underline"
+                                        Text="Hyperlink" />
+                                    <controls:ColorItemControl
+                                        Classes="ColorBlock"
+                                        DataContext="{Binding ColorResources[2]}"
+                                        Background="{DynamicResource  HotlightColor}" />
+                                </Panel>
+                                <Panel>
+                                    <TextBlock
+                                        Foreground="{DynamicResource GrayTextColor}"
+                                        Text="Inactive Text" />
+                                    <controls:ColorItemControl
+                                        Classes="ColorBlock"
+                                        DataContext="{Binding ColorResources[3]}"
+                                        Background="{DynamicResource  GrayTextColor}" />
+                                </Panel>
+                                <Panel>
+                                    <TextBlock
+                                        Foreground="{DynamicResource HighlightTextColor}"
+                                        Background="{DynamicResource HighlightColor}"
+                                        Text="Selected text" />
+                                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Spacing="4">
+                                        <controls:ColorItemControl
+                                            Classes="ColorBlock"
+                                            DataContext="{Binding ColorResources[4]}"
+                                            Background="{DynamicResource  HighlightTextColor}" />
+                                        <controls:ColorItemControl
+                                            Classes="ColorBlock"
+                                            DataContext="{Binding ColorResources[5]}"
+                                            Background="{DynamicResource  HighlightColor}" />
+                                    </StackPanel>
+                                </Panel>
+                                <Panel>
+                                    <Border
+                                        HorizontalAlignment="Left"
+                                        VerticalAlignment="Center"
+                                        BorderBrush="{DynamicResource ButtonTextColor}"
+                                        Background="{DynamicResource ButtonFaceColor}"
+                                        BorderThickness="2"
+                                        CornerRadius="3">
+                                        <TextBlock
+                                            Foreground="{DynamicResource ButtonTextColor}"
+                                            Padding="16 6"
+                                            Text="Button text" />
+                                    </Border>
+                                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Spacing="4">
+                                        <controls:ColorItemControl
+                                            Classes="ColorBlock"
+                                            DataContext="{Binding ColorResources[6]}"
+                                            Background="{DynamicResource  ButtonTextColor}" />
+                                        <controls:ColorItemControl
+                                            Classes="ColorBlock"
+                                            DataContext="{Binding ColorResources[7]}"
+                                            Background="{DynamicResource  ButtonFaceColor}" />
+                                    </StackPanel>
+                                </Panel>
+                            </StackPanel>
+                        </Border>
+                    </ThemeVariantScope>
+
+                    <DataGrid
+                        HorizontalAlignment="Left"
+                        CanUserSortColumns="False"
+                        AutoGenerateColumns="False"
+                        ItemsSource="{Binding ColorResources}"
+                        GridLinesVisibility="All"
+                        BorderBrush="{DynamicResource SemiColorBorder}"
+                        BorderThickness="1"
+                        Padding="5">
+                        <DataGrid.Columns>
+                            <DataGridTemplateColumn Header="Color">
+                                <DataGridTemplateColumn.CellTemplate>
+                                    <DataTemplate>
+                                        <controls:ColorItemControl
+                                            Width="40"
+                                            Height="20"
+                                            CornerRadius="3"
+                                            Background="{Binding Brush}" />
+                                    </DataTemplate>
+                                </DataGridTemplateColumn.CellTemplate>
+                            </DataGridTemplateColumn>
+
+                            <DataGridTemplateColumn Header="ResourceKey">
+                                <DataGridTemplateColumn.CellTemplate>
+                                    <DataTemplate>
+                                        <SelectableTextBlock
+                                            Margin="12 0"
+                                            VerticalAlignment="Center"
+                                            Text="{Binding ResourceKey}" />
+                                    </DataTemplate>
+                                </DataGridTemplateColumn.CellTemplate>
+                            </DataGridTemplateColumn>
+
+                            <DataGridTemplateColumn Header="Hex">
+                                <DataGridTemplateColumn.CellTemplate>
+                                    <DataTemplate>
+                                        <SelectableTextBlock
+                                            Margin="12 0"
+                                            VerticalAlignment="Center"
+                                            Text="{Binding Brush,
+                                                Converter={x:Static cvt:ColorConverter.ToHex},ConverterParameter={x:False}}" />
+                                    </DataTemplate>
+                                </DataGridTemplateColumn.CellTemplate>
+                            </DataGridTemplateColumn>
+
+                            <DataGridTemplateColumn Header="Description">
+                                <DataGridTemplateColumn.CellTemplate>
+                                    <DataTemplate>
+                                        <SelectableTextBlock
+                                            Margin="12 0"
+                                            VerticalAlignment="Center"
+                                            Text="{Binding Description}" />
+                                    </DataTemplate>
+                                </DataGridTemplateColumn.CellTemplate>
+                            </DataGridTemplateColumn>
+
+                            <DataGridTemplateColumn Header="Pair With">
+                                <DataGridTemplateColumn.CellTemplate>
+                                    <DataTemplate>
+                                        <SelectableTextBlock
+                                            Margin="12 0"
+                                            VerticalAlignment="Center"
+                                            Text="{Binding PairWith}" />
+                                    </DataTemplate>
+                                </DataGridTemplateColumn.CellTemplate>
+                            </DataGridTemplateColumn>
+
+                            <DataGridTemplateColumn Width="100" Header="CopyText">
+                                <DataGridTemplateColumn.CellTemplate>
+                                    <DataTemplate DataType="vm:ColorResource">
+                                        <Button
+                                            Command="{Binding $parent[pages:HighContrastDemo].Copy}"
+                                            CommandParameter="{Binding CopyText}"
+                                            Theme="{DynamicResource  IconBorderlessButton}"
+                                            Content="{StaticResource SemiIconCopy}" />
+                                    </DataTemplate>
+                                </DataGridTemplateColumn.CellTemplate>
+                            </DataGridTemplateColumn>
+                        </DataGrid.Columns>
+                    </DataGrid>
+                </StackPanel>
+            </ScrollViewer>
+        </SplitView.Content>
+    </SplitView>
+</UserControl>

demo/Semi.Avalonia.Demo/Pages/HighContrastDemo.axaml.cs

@@ -0,0 +1,25 @@
+using System.Threading.Tasks;
+using Avalonia.Controls;
+using Avalonia.Input.Platform;
+using Semi.Avalonia.Demo.ViewModels;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class HighContrastDemo : UserControl
+{
+    public HighContrastDemo()
+    {
+        InitializeComponent();
+        this.DataContext = new HighContrastDemoViewModel();
+    }
+
+    public async Task Copy(object? o)
+    {
+        if (o is null) return;
+        var toplevel = TopLevel.GetTopLevel(this);
+        if (toplevel?.Clipboard is { } c)
+        {
+            await c.SetTextAsync(o.ToString());
+        }
+    }
+}

demo/Semi.Avalonia.Demo/Pages/IconDemo.axaml

@@ -16,7 +16,7 @@
             Margin="8"
             Classes="ClearButton"
             Text="{Binding SearchText}"
-            Watermark="Input Icon Name" />
+            PlaceholderText="Input Icon Name" />
 
         <TabControl
             Grid.Row="1"

demo/Semi.Avalonia.Demo/Pages/NavigationDemoHelper.cs

@@ -0,0 +1,66 @@
+using Avalonia.Controls;
+using Avalonia.Layout;
+using Avalonia.Media;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+/// <summary>
+/// Shared helpers for ControlCatalog demo pages.
+/// </summary>
+internal static class NavigationDemoHelper
+{
+    /// <summary>
+    /// Pastel background brushes cycled by page index.
+    /// </summary>
+    internal static readonly IBrush[] PageBrushes =
+    [
+        new SolidColorBrush(Color.Parse("#BBDEFB")),
+        new SolidColorBrush(Color.Parse("#C8E6C9")),
+        new SolidColorBrush(Color.Parse("#FFE0B2")),
+        new SolidColorBrush(Color.Parse("#E1BEE7")),
+        new SolidColorBrush(Color.Parse("#FFCDD2")),
+        new SolidColorBrush(Color.Parse("#B2EBF2"))
+    ];
+
+    internal static IBrush GetPageBrush(int index) =>
+        PageBrushes[(index % PageBrushes.Length + PageBrushes.Length) % PageBrushes.Length];
+
+    /// <summary>
+    /// Creates a simple demo ContentPage with a centered title and subtitle.
+    /// </summary>
+    internal static ContentPage MakePage(string header, string body, int colorIndex) =>
+        new()
+        {
+            Header = header,
+            Background = GetPageBrush(colorIndex),
+            Content = new StackPanel
+            {
+                HorizontalAlignment = HorizontalAlignment.Center,
+                VerticalAlignment = VerticalAlignment.Center,
+                Spacing = 8,
+                Children =
+                {
+                    new TextBlock
+                    {
+                        Text = header,
+                        FontSize = 20,
+                        FontWeight = FontWeight.SemiBold,
+                        HorizontalAlignment = HorizontalAlignment.Center,
+                        Foreground = Brushes.Black,
+                    },
+                    new TextBlock
+                    {
+                        Text = body,
+                        FontSize = 13,
+                        Opacity = 0.7,
+                        TextWrapping = TextWrapping.Wrap,
+                        TextAlignment = TextAlignment.Center,
+                        MaxWidth = 260,
+                        Foreground = Brushes.Black,
+                    }
+                }
+            },
+            HorizontalContentAlignment = HorizontalAlignment.Stretch,
+            VerticalContentAlignment = VerticalAlignment.Stretch
+        };
+}

demo/Semi.Avalonia.Demo/Pages/NavigationPageDemo.axaml

@@ -0,0 +1,65 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.NavigationPageDemo"
+    xmlns="https://github.com/avaloniaui"
+    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"
+    d:DesignHeight="700"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <ScrollViewer>
+        <DockPanel>
+            <ScrollViewer DockPanel.Dock="Right" Width="260">
+                <StackPanel Margin="12" Spacing="8">
+                    <TextBlock Text="Configuration" FontWeight="SemiBold" FontSize="16" />
+                    <TextBlock Text="Navigation" FontWeight="SemiBold" FontSize="13" />
+
+                    <Button Content="Push Page"
+                            HorizontalAlignment="Stretch"
+                            Click="OnPush" />
+                    <Button Content="Pop"
+                            HorizontalAlignment="Stretch"
+                            Click="OnPop" />
+                    <Button Content="Pop to Root"
+                            HorizontalAlignment="Stretch"
+                            Click="OnPopToRoot" />
+
+                    <Separator />
+
+                    <TextBlock Text="Options" FontWeight="SemiBold" FontSize="14" />
+
+                    <CheckBox Name="HasNavBarCheck"
+                              Content="Has Navigation Bar"
+                              IsChecked="True"
+                              IsCheckedChanged="OnHasNavBarChanged" />
+                    <CheckBox Name="HasBackButtonCheck"
+                              Content="Has Back Button"
+                              IsChecked="True" 
+                              IsCheckedChanged="OnHasBackButonChanged" />
+
+                    <Separator />
+
+                    <TextBlock Text="Status" FontWeight="SemiBold" FontSize="14" />
+                    <TextBlock Name="StatusText"
+                               Text="Depth: 1"
+                               Opacity="0.7"
+                               TextWrapping="Wrap" />
+                    <TextBlock Name="HeaderText"
+                               Text="Current: Home"
+                               Opacity="0.7"
+                               TextWrapping="Wrap" />
+                </StackPanel>
+            </ScrollViewer>
+
+            <Border DockPanel.Dock="Right" Width="1" Background="{DynamicResource SemiColorBackground0}" />
+
+            <Border Margin="12"
+                    BorderBrush="{DynamicResource SemiColorBorder}"
+                    BorderThickness="1"
+                    CornerRadius="6"
+                    ClipToBounds="True">
+                <NavigationPage Name="DemoNav" />
+            </Border>
+        </DockPanel>
+    </ScrollViewer>
+</UserControl>

demo/Semi.Avalonia.Demo/Pages/NavigationPageDemo.axaml.cs

@@ -0,0 +1,66 @@
+using Avalonia.Controls;
+using Avalonia.Interactivity;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class NavigationPageDemo : UserControl
+{
+    private int _pageCount;
+
+    public NavigationPageDemo()
+    {
+        InitializeComponent();
+        Loaded += OnLoaded;
+    }
+
+    private async void OnLoaded(object? sender, RoutedEventArgs e)
+    {
+        await DemoNav.PushAsync(NavigationDemoHelper.MakePage("Home", "Welcome!\nUse the buttons to push and pop pages.", 0), null);
+        UpdateStatus();
+    }
+
+    private async void OnPush(object? sender, RoutedEventArgs e)
+    {
+        _pageCount++;
+        var page = NavigationDemoHelper.MakePage($"Page {_pageCount}", $"This is page {_pageCount}.", _pageCount);
+        NavigationPage.SetHasNavigationBar(page, HasNavBarCheck.IsChecked == true);
+        NavigationPage.SetHasBackButton(page, HasBackButtonCheck.IsChecked == true);
+        await DemoNav.PushAsync(page);
+        UpdateStatus();
+    }
+
+    private async void OnPop(object? sender, RoutedEventArgs e)
+    {
+        await DemoNav.PopAsync();
+        UpdateStatus();
+    }
+
+    private async void OnPopToRoot(object? sender, RoutedEventArgs e)
+    {
+        await DemoNav.PopToRootAsync();
+        _pageCount = 0;
+        UpdateStatus();
+    }
+
+    private void OnHasNavBarChanged(object? sender, RoutedEventArgs e)
+    {
+        if (DemoNav == null)
+            return;
+        if (DemoNav.CurrentPage != null)
+            NavigationPage.SetHasNavigationBar(DemoNav.CurrentPage, HasNavBarCheck.IsChecked == true);
+    }
+
+    private void OnHasBackButonChanged(object? sender, RoutedEventArgs e)
+    {
+        if (DemoNav == null)
+            return;
+        if (DemoNav.CurrentPage != null)
+            NavigationPage.SetHasBackButton(DemoNav.CurrentPage, HasBackButtonCheck.IsChecked == true);
+    }
+
+    private void UpdateStatus()
+    {
+        StatusText.Text = $"Depth: {DemoNav.StackDepth}";
+        HeaderText.Text = $"Current: {DemoNav.CurrentPage?.Header ?? "(none)"}";
+    }
+}

demo/Semi.Avalonia.Demo/Pages/NumericUpDownDemo.axaml

@@ -51,6 +51,11 @@
             <NumericUpDown Width="100" IsEnabled="False" />
             <NumericUpDown Width="100" ButtonSpinnerLocation="Left" />
         </StackPanel>
+        
+        <StackPanel>
+            <TextBlock Text="Split" />
+            <NumericUpDown Classes="Split" Width="300" />
+        </StackPanel>
 
     </StackPanel>
 </UserControl>

demo/Semi.Avalonia.Demo/Pages/PipsPagerDemo.axaml

@@ -0,0 +1,99 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.PipsPagerDemo"
+    xmlns="https://github.com/avaloniaui"
+    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"
+    d:DesignHeight="600"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <ScrollViewer>
+        <StackPanel HorizontalAlignment="Left" Spacing="16" Margin="0,0,0,20">
+
+            <!-- Horizontal PipsPager -->
+            <TextBlock Classes="H6" Text="Horizontal" />
+            <PipsPager
+                NumberOfPages="8"
+                Orientation="Horizontal" />
+
+            <!-- Vertical PipsPager -->
+            <TextBlock Classes="H6" Text="Vertical" />
+            <PipsPager
+                NumberOfPages="8"
+                Orientation="Vertical" />
+
+            <!-- Linked with Carousel -->
+            <TextBlock Classes="H6" Text="Linked with Carousel" />
+            <Panel>
+                <Carousel
+                    Name="DemoCarousel"
+                    Height="160">
+                    <Border Background="#EAF5FF">
+                        <TextBlock
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Center"
+                            Foreground="#1C1F23"
+                            Text="Page 1" />
+                    </Border>
+                    <Border Background="#F9F9F9">
+                        <TextBlock
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Center"
+                            Foreground="#1C1F23"
+                            Text="Page 2" />
+                    </Border>
+                    <Border Background="#FFF8EA">
+                        <TextBlock
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Center"
+                            Foreground="#1C1F23"
+                            Text="Page 3" />
+                    </Border>
+                    <Border Background="#FEF2ED">
+                        <TextBlock
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Center"
+                            Foreground="#1C1F23"
+                            Text="Page 4" />
+                    </Border>
+                    <Border Background="#F0F5FF">
+                        <TextBlock
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Center"
+                            Foreground="#1C1F23"
+                            Text="Page 5" />
+                    </Border>
+                </Carousel>
+                <ThemeVariantScope RequestedThemeVariant="Light">
+                    <PipsPager
+                        Name="LinkedPager"
+                        NumberOfPages="5"
+                        Orientation="Horizontal"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Bottom"
+                        Margin="0,0,0,8"
+                        SelectedPageIndex="{Binding #DemoCarousel.SelectedIndex}" />
+                </ThemeVariantScope>
+            </Panel>
+
+            <!-- Various page counts -->
+            <TextBlock Classes="H6" Text="Various Page Counts" />
+            <StackPanel Spacing="12">
+                <StackPanel Orientation="Horizontal" Spacing="8">
+                    <TextBlock VerticalAlignment="Center" Width="80" Text="3 pages" />
+                    <PipsPager NumberOfPages="3" Orientation="Horizontal" />
+                </StackPanel>
+                <StackPanel Orientation="Horizontal" Spacing="8">
+                    <TextBlock VerticalAlignment="Center" Width="80" Text="5 pages" />
+                    <PipsPager NumberOfPages="5" Orientation="Horizontal" />
+                </StackPanel>
+                <StackPanel Orientation="Horizontal" Spacing="8">
+                    <TextBlock VerticalAlignment="Center" Width="80" Text="10 pages" />
+                    <PipsPager NumberOfPages="10" Orientation="Horizontal" />
+                </StackPanel>
+            </StackPanel>
+
+        </StackPanel>
+    </ScrollViewer>
+</UserControl>
+

demo/Semi.Avalonia.Demo/Pages/PipsPagerDemo.axaml.cs

@@ -0,0 +1,12 @@
+using Avalonia.Controls;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class PipsPagerDemo : UserControl
+{
+    public PipsPagerDemo()
+    {
+        InitializeComponent();
+    }
+}
+

demo/Semi.Avalonia.Demo/Pages/SliderDemo.axaml

@@ -22,6 +22,15 @@
             TickFrequency="10"
             TickPlacement="Outside"
             Value="0" />
+        <Slider
+            Value="0"
+            Minimum="0"
+            Maximum="100"
+            TickPlacement="BottomRight"
+            IsSnapToTickEnabled="True"
+            IsDirectionReversed="True"
+            Ticks="0,20,25,40,75,100"
+            Width="300" />
         <Slider
             Width="300"
             Classes="ToolTip"

demo/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml

@@ -34,14 +34,10 @@
                         </StackPanel>
                         <Border MinHeight="150" Theme="{StaticResource CardBorder}">
                             <TabControl Classes.ReverseSeparator="{Binding #reverse.IsChecked}" TabStripPlacement="{Binding #place.SelectedValue}">
-                                <TabItem Content="Hello 1" Header="Tab 1" />
-                                <TabItem Content="Hello 2" Header="Tab 2" />
-                                <TabItem Content="Hello 3" Header="Tab 3" />
-                                <TabItem Content="中文内容" Header="中文中文" />
-                                <TabItem
-                                    Content="Hello 4"
-                                    Header="Tab 4"
-                                    IsEnabled="False" />
+                                <TabItem Content="Hello 1" Header="文档" Icon="{StaticResource SemiIconFile}" />
+                                <TabItem Content="Hello 2" Header="快速起步" Icon="{StaticResource SemiIconGlobe}" />
+                                <TabItem Content="Hello 4" Header="无效" Icon="{StaticResource SemiIconClear}" IsEnabled="False" />
+                                <TabItem Content="Hello 3" Header="帮助" Icon="{StaticResource SemiIconHelpCircle}" />
                             </TabControl>
                         </Border>
                         <Border Height="300" Theme="{StaticResource CardBorder}">
@@ -57,14 +53,10 @@
                     <StackPanel>
                         <Border MinHeight="150" Theme="{StaticResource CardBorder}">
                             <TabControl TabStripPlacement="{Binding #place.SelectedValue}" Theme="{StaticResource LineTabControl}">
-                                <TabItem Content="Hello 1" Header="Tab 1" />
-                                <TabItem Content="Hello 2" Header="Tab 2" />
-                                <TabItem Content="Hello 3" Header="Tab 3" />
-                                <TabItem Content="中文内容" Header="中文中文" />
-                                <TabItem
-                                    Content="Hello 4"
-                                    Header="Tab 4"
-                                    IsEnabled="False" />
+                                <TabItem Content="Hello 1" Header="文档" Icon="{StaticResource SemiIconFile}" />
+                                <TabItem Content="Hello 2" Header="快速起步" Icon="{StaticResource SemiIconGlobe}" />
+                                <TabItem Content="Hello 4" Header="无效" Icon="{StaticResource SemiIconClear}" IsEnabled="False" />
+                                <TabItem Content="Hello 3" Header="帮助" Icon="{StaticResource SemiIconHelpCircle}" />
                             </TabControl>
                         </Border>
                         <Border Height="300" Theme="{StaticResource CardBorder}">
@@ -82,14 +74,10 @@
                             Background="Transparent"
                             Theme="{StaticResource CardBorder}">
                             <TabControl TabStripPlacement="{Binding #place.SelectedValue}" Theme="{StaticResource CardTabControl}">
-                                <TabItem Content="Hello 1" Header="Tab 1" />
-                                <TabItem Content="Hello 2" Header="Tab 2" />
-                                <TabItem Content="Hello 3" Header="Tab 3" />
-                                <TabItem Content="中文内容" Header="中文中文" />
-                                <TabItem
-                                    Content="Hello 4"
-                                    Header="Tab 4"
-                                    IsEnabled="False" />
+                                <TabItem Content="Hello 1" Header="文档" Icon="{StaticResource SemiIconFile}" />
+                                <TabItem Content="Hello 2" Header="快速起步" Icon="{StaticResource SemiIconGlobe}" />
+                                <TabItem Content="Hello 4" Header="无效" Icon="{StaticResource SemiIconClear}" IsEnabled="False" />
+                                <TabItem Content="Hello 3" Header="帮助" Icon="{StaticResource SemiIconHelpCircle}" />
                             </TabControl>
                         </Border>
                         <Border
@@ -107,14 +95,10 @@
                     <StackPanel>
                         <Border MinHeight="150" Theme="{StaticResource CardBorder}">
                             <TabControl TabStripPlacement="{Binding #place.SelectedValue}" Theme="{StaticResource ButtonTabControl}">
-                                <TabItem Content="Hello 1" Header="Tab 1" />
-                                <TabItem Content="Hello 2" Header="Tab 2" />
-                                <TabItem Content="Hello 3" Header="Tab 3" />
-                                <TabItem Content="中文内容" Header="中文中文" />
-                                <TabItem
-                                    Content="Hello 4"
-                                    Header="Tab 4"
-                                    IsEnabled="False" />
+                                <TabItem Content="Hello 1" Header="文档" Icon="{StaticResource SemiIconFile}" />
+                                <TabItem Content="Hello 2" Header="快速起步" Icon="{StaticResource SemiIconGlobe}" />
+                                <TabItem Content="Hello 4" Header="无效" Icon="{StaticResource SemiIconClear}" IsEnabled="False" />
+                                <TabItem Content="Hello 3" Header="帮助" Icon="{StaticResource SemiIconHelpCircle}" />
                             </TabControl>
                         </Border>
                         <Border Height="300" Theme="{StaticResource CardBorder}">

demo/Semi.Avalonia.Demo/Pages/TabbedPageDemo.axaml

@@ -0,0 +1,80 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.TabbedPageDemo"
+    xmlns="https://github.com/avaloniaui"
+    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"
+    d:DesignHeight="600"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <DockPanel>
+        <ScrollViewer DockPanel.Dock="Right" Width="260">
+            <StackPanel Margin="12" Spacing="8">
+                <TextBlock Text="Configuration" FontWeight="SemiBold" FontSize="16"
+                           Foreground="{DynamicResource SemiColorText0}" />
+
+                <TextBlock Text="Tab Management" FontWeight="SemiBold" FontSize="13" />
+                <StackPanel Spacing="6">
+                    <Button Content="Add Tab" Click="OnAddTab" HorizontalAlignment="Stretch" />
+                    <Button Content="Remove Latest Tab" Click="OnRemoveTab" HorizontalAlignment="Stretch" />
+                </StackPanel>
+
+                <Separator />
+
+                <TextBlock Text="Tab Placement" FontWeight="SemiBold" FontSize="13" />
+                <ComboBox Name="PlacementCombo" SelectedIndex="0"
+                          SelectionChanged="OnPlacementChanged" HorizontalAlignment="Stretch">
+                    <ComboBoxItem Content="Top" />
+                    <ComboBoxItem Content="Bottom" />
+                    <ComboBoxItem Content="Left" />
+                    <ComboBoxItem Content="Right" />
+                </ComboBox>
+
+                <Separator />
+
+                <TextBlock Text="Status" FontWeight="SemiBold" FontSize="14" />
+                <TextBlock Name="StatusText"
+                           Text="3 tabs | Selected: Home (0)"
+                           Opacity="0.7"
+                           TextWrapping="Wrap" />
+            </StackPanel>
+        </ScrollViewer>
+
+        <Border DockPanel.Dock="Right" Width="1" Background="{DynamicResource SemiColorBackground0}" />
+
+        <Border Margin="12"
+                BorderBrush="{DynamicResource SemiColorBorder}"
+                BorderThickness="1"
+                CornerRadius="6"
+                ClipToBounds="True">
+            <TabbedPage Name="DemoTabs"
+                        TabPlacement="Top"
+                        SelectionChanged="OnSelectionChanged">
+                <ContentPage Header="Home">
+                    <StackPanel Margin="16" Spacing="8">
+                        <TextBlock Text="Home Tab" FontSize="24" FontWeight="Bold" />
+                        <TextBlock Text="Welcome to the Home tab. This is a TabbedPage sample."
+                                   TextWrapping="Wrap" />
+                        <TextBlock Text="Use the panel on the right to add or remove tabs dynamically."
+                                   TextWrapping="Wrap" Opacity="0.7" />
+                    </StackPanel>
+                </ContentPage>
+                <ContentPage Header="Search">
+                    <StackPanel Margin="16" Spacing="8">
+                        <TextBlock Text="Search Tab" FontSize="24" FontWeight="Bold" />
+                        <TextBox PlaceholderText="Type to search..." />
+                        <TextBlock Text="Search results will appear here." Opacity="0.7" />
+                    </StackPanel>
+                </ContentPage>
+                <ContentPage Header="Settings">
+                    <StackPanel Margin="16" Spacing="8">
+                        <TextBlock Text="Settings Tab" FontSize="24" FontWeight="Bold" />
+                        <CheckBox Content="Enable notifications" />
+                        <CheckBox Content="Dark mode" />
+                        <CheckBox Content="Auto-save" IsChecked="True" />
+                    </StackPanel>
+                </ContentPage>
+            </TabbedPage>
+        </Border>
+    </DockPanel>
+</UserControl>

demo/Semi.Avalonia.Demo/Pages/TabbedPageDemo.axaml.cs

@@ -0,0 +1,84 @@
+using System.Collections;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Interactivity;
+using Avalonia.Media;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class TabbedPageDemo : UserControl
+{
+    private int _tabCounter = 3;
+
+    public TabbedPageDemo()
+    {
+        InitializeComponent();
+    }
+
+    private void OnAddTab(object? sender, RoutedEventArgs e)
+    {
+        var idx = ++_tabCounter;
+        var page = new ContentPage
+        {
+            Header = $"Tab {idx}",
+            Content = new StackPanel
+            {
+                Margin = new Thickness(16),
+                Spacing = 8,
+                Children =
+                {
+                    new TextBlock
+                    {
+                        Text = $"Tab {idx}",
+                        FontSize = 24,
+                        FontWeight = FontWeight.Bold,
+                    },
+                    new TextBlock
+                    {
+                        Text = $"This tab was added dynamically (tab #{idx}).",
+                        Opacity = 0.7,
+                        TextWrapping = TextWrapping.Wrap,
+                    }
+                }
+            }
+        };
+
+        ((IList)DemoTabs.Pages!).Add(page);
+        UpdateStatus();
+    }
+
+    private void OnRemoveTab(object? sender, RoutedEventArgs e)
+    {
+        var pages = (IList)DemoTabs.Pages!;
+        if (pages.Count > 1)
+        {
+            pages.RemoveAt(pages.Count - 1);
+            UpdateStatus();
+        }
+    }
+
+    private void OnPlacementChanged(object? sender, SelectionChangedEventArgs e)
+    {
+        if (DemoTabs == null) return;
+        DemoTabs.TabPlacement = PlacementCombo.SelectedIndex switch
+        {
+            1 => TabPlacement.Bottom,
+            2 => TabPlacement.Left,
+            3 => TabPlacement.Right,
+            _ => TabPlacement.Top
+        };
+    }
+
+    private void OnSelectionChanged(object? sender, PageSelectionChangedEventArgs e)
+    {
+        UpdateStatus();
+    }
+
+    private void UpdateStatus()
+    {
+        if (StatusText == null) return;
+        var pages = (IList)DemoTabs.Pages!;
+        var pageName = (DemoTabs.SelectedPage as ContentPage)?.Header?.ToString() ?? "—";
+        StatusText.Text = $"{pages.Count} tab{(pages.Count != 1 ? "s" : "")} | Selected: {pageName} ({DemoTabs.SelectedIndex})";
+    }
+}

demo/Semi.Avalonia.Demo/Pages/VariablesDemo.axaml

@@ -0,0 +1,103 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             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:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
+             xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="Semi.Avalonia.Demo.Pages.VariablesDemo"
+             x:DataType="vm:VariablesDemoViewModel">
+    <Design.DataContext>
+        <vm:VariablesDemoViewModel />
+    </Design.DataContext>
+    <Grid RowDefinitions="Auto, *">
+        <TextBox
+            Grid.Row="0"
+            Width="600"
+            Margin="8"
+            Classes="ClearButton"
+            Text="{Binding SearchText}"
+            PlaceholderText="Input Variable Category/ResourceKey/Type/Value/Description" />
+
+        <DataGrid
+            Grid.Row="1"
+            Margin="8"
+            CanUserReorderColumns="True"
+            CanUserResizeColumns="True"
+            CanUserSortColumns="True"
+            HeadersVisibility="All"
+            IsReadOnly="True"
+            ItemsSource="{Binding GridData}">
+            <DataGrid.Columns>
+                <DataGridTemplateColumn
+                    Width="300"
+                    x:DataType="vm:VariableItem"
+                    Header="ResourceKey">
+                    <DataGridTemplateColumn.CellTemplate>
+                        <DataTemplate DataType="vm:VariableItem">
+                            <SelectableTextBlock
+                                Margin="12,0"
+                                VerticalAlignment="Center"
+                                Text="{Binding ResourceKey}" />
+                        </DataTemplate>
+                    </DataGridTemplateColumn.CellTemplate>
+                </DataGridTemplateColumn>
+                <DataGridTemplateColumn
+                    Width="200"
+                    x:DataType="vm:VariableItem"
+                    Header="Type">
+                    <DataGridTemplateColumn.CellTemplate>
+                        <DataTemplate DataType="vm:VariableItem">
+                            <SelectableTextBlock
+                                Margin="12,0"
+                                VerticalAlignment="Center"
+                                Text="{Binding Type.Name}" />
+                        </DataTemplate>
+                    </DataGridTemplateColumn.CellTemplate>
+                </DataGridTemplateColumn>
+                <DataGridTemplateColumn
+                    Width="200"
+                    x:DataType="vm:VariableItem"
+                    Header="Value">
+                    <DataGridTemplateColumn.CellTemplate>
+                        <DataTemplate DataType="vm:VariableItem">
+                            <SelectableTextBlock
+                                Margin="12,0"
+                                VerticalAlignment="Center"
+                                Text="{Binding Value}"
+                                TextWrapping="Wrap" />
+                        </DataTemplate>
+                    </DataGridTemplateColumn.CellTemplate>
+                </DataGridTemplateColumn>
+                <DataGridTemplateColumn
+                    Width="*"
+                    x:DataType="vm:VariableItem"
+                    Header="Description">
+                    <DataGridTemplateColumn.CellTemplate>
+                        <DataTemplate DataType="vm:VariableItem">
+                            <SelectableTextBlock
+                                Margin="12,0"
+                                VerticalAlignment="Center"
+                                Text="{Binding Description}"
+                                TextWrapping="Wrap" />
+                        </DataTemplate>
+                    </DataGridTemplateColumn.CellTemplate>
+                </DataGridTemplateColumn>
+                <DataGridTemplateColumn
+                    Width="100"
+                    x:DataType="vm:VariableItem"
+                    Header="CopyText">
+                    <DataGridTemplateColumn.CellTemplate>
+                        <DataTemplate DataType="vm:VariableItem">
+                            <Button
+                                Command="{Binding $parent[pages:VariablesDemo].Copy}"
+                                CommandParameter="{Binding CopyText}"
+                                Theme="{DynamicResource  IconBorderlessButton}"
+                                Content="{StaticResource SemiIconCopy}" />
+                        </DataTemplate>
+                    </DataGridTemplateColumn.CellTemplate>
+                </DataGridTemplateColumn>
+            </DataGrid.Columns>
+        </DataGrid>
+    </Grid>
+</UserControl>

demo/Semi.Avalonia.Demo/Pages/VariablesDemo.axaml.cs

@@ -0,0 +1,25 @@
+using System.Threading.Tasks;
+using Avalonia.Controls;
+using Avalonia.Input.Platform;
+using Semi.Avalonia.Demo.ViewModels;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class VariablesDemo : UserControl
+{
+    public VariablesDemo()
+    {
+        InitializeComponent();
+        this.DataContext = new VariablesDemoViewModel();
+    }
+
+    public async Task Copy(object? o)
+    {
+        if (o is null) return;
+        var toplevel = TopLevel.GetTopLevel(this);
+        if (toplevel?.Clipboard is { } c)
+        {
+            await c.SetTextAsync(o.ToString());
+        }
+    }
+}

demo/Semi.Avalonia.Demo/Pages/WindowCustomizationsPage.axaml

@@ -0,0 +1,32 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             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"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="Semi.Avalonia.Demo.Pages.WindowCustomizationsPage"
+             x:CompileBindings="True">
+
+    <StackPanel
+        Spacing="10"
+        IsEnabled="{OnFormFactor False, Desktop=True}">
+        <TextBlock Classes="H2" Text="Desktop properties" />
+
+        <CheckBox Content="Extend Client Area to Decorations"
+                  IsChecked="{Binding $parent[Window].ExtendClientAreaToDecorationsHint}" />
+
+        <Slider IsEnabled="{Binding $parent[Window].ExtendClientAreaToDecorationsHint}"
+                HorizontalAlignment="Left"
+                Width="201" Minimum="-1" Maximum="200"
+                Value="{Binding $parent[Window].ExtendClientAreaTitleBarHeightHint}" />
+
+        <CheckBox Content="Can Resize"
+                  IsChecked="{Binding $parent[Window].CanResize}" />
+
+        <CheckBox Content="Can Minimize"
+                  IsChecked="{Binding $parent[Window].CanMinimize}" />
+
+        <CheckBox Content="Can Maximize"
+                  IsChecked="{Binding $parent[Window].CanMaximize}"
+                  IsEnabled="{Binding $parent[Window].CanResize}" />
+    </StackPanel>
+</UserControl>

demo/Semi.Avalonia.Demo/Pages/WindowCustomizationsPage.axaml.cs

@@ -0,0 +1,12 @@
+using Avalonia.Controls;
+
+namespace Semi.Avalonia.Demo.Pages
+{
+    public partial class WindowCustomizationsPage : UserControl
+    {
+        public WindowCustomizationsPage()
+        {
+            InitializeComponent();
+        }
+    }
+}

demo/Semi.Avalonia.Demo/Semi.Avalonia.Demo.csproj

@@ -13,23 +13,19 @@
     <ItemGroup>
         <PackageReference Include="Avalonia"/>
         <PackageReference Include="Avalonia.Controls.ColorPicker"/>
-<!--        <PackageReference Include="Avalonia.Controls.DataGrid"/>-->
-        <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
-<!--        <PackageReference Include="Avalonia.Diagnostics">-->
-<!--            <IncludeAssets Condition="'$(Configuration)' != 'Debug'">None</IncludeAssets>-->
-<!--            <PrivateAssets Condition="'$(Configuration)' != 'Debug'">All</PrivateAssets>-->
-<!--        </PackageReference>-->
+        <PackageReference Include="Avalonia.Controls.DataGrid"/>
+        <!--Condition below is needed to remove AvaloniaUI.DiagnosticsSupport package from build output in Release configuration.-->
+        <PackageReference Include="AvaloniaUI.DiagnosticsSupport">
+            <IncludeAssets Condition="'$(Configuration)' != 'Debug'">None</IncludeAssets>
+            <PrivateAssets Condition="'$(Configuration)' != 'Debug'">All</PrivateAssets>
+        </PackageReference>
         <PackageReference Include="CommunityToolkit.Mvvm"/>
     </ItemGroup>
 
     <ItemGroup>
         <ProjectReference Include="..\..\src\Semi.Avalonia\Semi.Avalonia.csproj"/>
         <ProjectReference Include="..\..\src\Semi.Avalonia.ColorPicker\Semi.Avalonia.ColorPicker.csproj"/>
-<!--        <ProjectReference Include="..\..\src\Semi.Avalonia.DataGrid\Semi.Avalonia.DataGrid.csproj"/>-->
+        <ProjectReference Include="..\..\src\Semi.Avalonia.DataGrid\Semi.Avalonia.DataGrid.csproj"/>
 <!--        <ProjectReference Include="..\..\src\Semi.Avalonia.TreeDataGrid\Semi.Avalonia.TreeDataGrid.csproj"/>-->
     </ItemGroup>
-
-    <ItemGroup>
-      <AvaloniaXaml Remove="Pages\VariablesDemo.axaml" />
-    </ItemGroup>
 </Project>

demo/Semi.Avalonia.Demo/Themes/FunctionalColorGroupControl.axaml

@@ -0,0 +1,152 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
+    xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels"
+    xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
+    x:DataType="viewModels:FunctionalColorGroupViewModel">
+    <ControlTheme x:Key="{x:Type controls:FunctionalColorGroupControl}" TargetType="controls:FunctionalColorGroupControl">
+        <Setter Property="Template">
+            <ControlTemplate TargetType="controls:FunctionalColorGroupControl">
+                <Grid RowDefinitions="Auto, *">
+                    <SelectableTextBlock
+                        Grid.Row="0"
+                        Margin="0,16,0,0"
+                        Classes="H3"
+                        Text="{TemplateBinding Title}"
+                        Theme="{DynamicResource TitleSelectableTextBlock}" />
+                    <TabControl Grid.Row="1">
+                        <TabItem Header="Light">
+                            <DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding LightColors}">
+                                <DataGrid.Columns>
+                                    <DataGridTemplateColumn Width="70" Header="Color">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <controls:ColorItemControl
+                                                    Width="40"
+                                                    Height="20"
+                                                    Background="{Binding Brush}"
+                                                    CornerRadius="3" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTemplateColumn Width="300" Header="ResourceKey">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding ResourceKey}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTemplateColumn Width="100" Header="Hex">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding Hex}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTemplateColumn Width="80" Header="Opacity">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding Brush.Opacity}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTextColumn
+                                        Width="*"
+                                        x:DataType="viewModels:ColorItemViewModel"
+                                        Binding="{Binding ColorDisplayName}"
+                                        CanUserSort="False"
+                                        Header="Description" />
+                                    <DataGridTemplateColumn Width="100" Header="CopyText">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <Button
+                                                    Command="{Binding $parent[pages:PaletteDemo].Copy}"
+                                                    CommandParameter="{Binding CopyText}"
+                                                    Theme="{DynamicResource  IconBorderlessButton}"
+                                                    Content="{StaticResource SemiIconCopy}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                </DataGrid.Columns>
+                            </DataGrid>
+                        </TabItem>
+                        <TabItem Header="Dark">
+                            <DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding DarkColors}">
+                                <DataGrid.Columns>
+                                    <DataGridTemplateColumn Width="70" Header="Color">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <controls:ColorItemControl
+                                                    Width="40"
+                                                    Height="20"
+                                                    Background="{Binding Brush}"
+                                                    CornerRadius="3" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTemplateColumn Width="300" Header="ResourceKey">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding ResourceKey}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTemplateColumn Width="100" Header="Hex">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding Hex}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTemplateColumn Width="80" Header="Opacity">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding Brush.Opacity}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTextColumn
+                                        Width="*"
+                                        x:DataType="viewModels:ColorItemViewModel"
+                                        Binding="{Binding ColorDisplayName}"
+                                        CanUserSort="False"
+                                        Header="Description" />
+                                    <DataGridTemplateColumn Width="100" Header="CopyText">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
+                                                <Button
+                                                    Command="{Binding $parent[pages:PaletteDemo].Copy}"
+                                                    CommandParameter="{Binding CopyText}"
+                                                    Theme="{DynamicResource  IconBorderlessButton}"
+                                                    Content="{StaticResource SemiIconCopy}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                </DataGrid.Columns>
+                            </DataGrid>
+                        </TabItem>
+                    </TabControl>
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

demo/Semi.Avalonia.Demo/Themes/ShadowGroupControl.axaml

@@ -0,0 +1,110 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
+    xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels"
+    xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
+    x:DataType="viewModels:ShadowGroupViewModel">
+    <ControlTheme x:Key="{x:Type controls:ShadowGroupControl}" TargetType="controls:ShadowGroupControl">
+        <Setter Property="Template">
+            <ControlTemplate TargetType="controls:ShadowGroupControl">
+                <Grid RowDefinitions="Auto, *">
+                    <SelectableTextBlock
+                        Grid.Row="0"
+                        Margin="0,16,0,0"
+                        Classes="H3"
+                        Text="{TemplateBinding Title}"
+                        Theme="{DynamicResource TitleSelectableTextBlock}" />
+                    <TabControl Grid.Row="1">
+                        <TabItem Header="Light">
+                            <DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding LightShadows}">
+                                <DataGrid.Columns>
+                                    <DataGridTemplateColumn Width="300" Header="ResourceKey">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding ResourceKey}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTemplateColumn Width="300" Header="BoxShadows">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding BoxShadowValue}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTextColumn
+                                        Width="*"
+                                        x:DataType="viewModels:ShadowItemViewModel"
+                                        Binding="{Binding ShadowDisplayName}"
+                                        CanUserSort="False"
+                                        Header="Description" />
+                                    <DataGridTemplateColumn Width="100" Header="CopyText">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
+                                                <Button
+                                                    Command="{Binding $parent[pages:PaletteDemo].Copy}"
+                                                    CommandParameter="{Binding CopyText}"
+                                                    Theme="{DynamicResource  IconBorderlessButton}"
+                                                    Content="{StaticResource SemiIconCopy}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                </DataGrid.Columns>
+                            </DataGrid>
+                        </TabItem>
+                        <TabItem Header="Dark">
+                            <DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding DarkShadows}">
+                                <DataGrid.Columns>
+                                    <DataGridTemplateColumn Width="300" Header="ResourceKey">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding ResourceKey}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTemplateColumn Width="300" Header="BoxShadows">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding BoxShadowValue}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTextColumn
+                                        Width="*"
+                                        x:DataType="viewModels:ShadowItemViewModel"
+                                        Binding="{Binding ShadowDisplayName}"
+                                        CanUserSort="False"
+                                        Header="Description" />
+                                    <DataGridTemplateColumn Width="100" Header="CopyText">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
+                                                <Button
+                                                    Command="{Binding $parent[pages:PaletteDemo].Copy}"
+                                                    CommandParameter="{Binding CopyText}"
+                                                    Theme="{DynamicResource  IconBorderlessButton}"
+                                                    Content="{StaticResource SemiIconCopy}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                </DataGrid.Columns>
+                            </DataGrid>
+                        </TabItem>
+                    </TabControl>
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

demo/Semi.Avalonia.Demo/Themes/_index.axaml

@@ -2,6 +2,8 @@
     <ResourceDictionary.MergedDictionaries>
         <ResourceInclude Source="ColorDetailControl.axaml" />
         <ResourceInclude Source="ColorItemControl.axaml" />
+        <ResourceInclude Source="FunctionalColorGroupControl.axaml" />
+        <ResourceInclude Source="ShadowGroupControl.axaml" />
         <ResourceInclude Source="ToggleSwitch.axaml" />
     </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>

demo/Semi.Avalonia.Demo/ViewModels/DataGridDemoViewModel.cs

@@ -0,0 +1,154 @@
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Linq;
+using Avalonia.Collections;
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
+
+namespace Semi.Avalonia.Demo.ViewModels;
+
+public class DataGridDemoViewModel : ObservableObject
+{
+    public ObservableCollection<Song> GridData1 { get; set; }
+
+    public DataGridCollectionView GridData2 { get; set; }
+
+    public ObservableCollection<SongViewModel> GridData3 { get; set; }
+
+    public RelayCommand AddCommand { get; set; }
+
+    public DataGridDemoViewModel()
+    {
+        GridData1 = new ObservableCollection<Song>(Song.Songs);
+        GridData2 = new DataGridCollectionView(Song.Songs);
+        GridData2.GroupDescriptions.Add(new DataGridPathGroupDescription("Album"));
+        GridData3 = new ObservableCollection<SongViewModel>(Song.Songs.Take(10).Select(a => new SongViewModel()
+        {
+            Title = a.Title,
+            Artist = a.Artist,
+            Album = a.Album,
+            CountOfComment = a.CountOfComment,
+            IsSelected = false
+        }));
+        AddCommand = new RelayCommand(Add);
+    }
+
+    private void Add()
+    {
+        GridData3.Add(new SongViewModel());
+    }
+}
+
+public class Song
+{
+    public string? Title { get; set; }
+    public string? Artist { get; set; }
+    public TimeSpan? Duration { get; set; }
+    public string? Album { get; set; }
+    public int CountOfComment { get; set; }
+    public string Url { get; set; }
+
+    public Song(string title, string artist, int m, int s, string album, int countOfComment, int netEaseId)
+    {
+        Title = title;
+        Artist = artist;
+        Duration = new TimeSpan(0, m, s);
+        Album = album;
+        CountOfComment = countOfComment;
+        Url = $"https://music.163.com/song?id={netEaseId}";
+    }
+
+    public static List<string> Albums =>
+    [
+        "A.S.I.A",
+        "饕餮人间",
+        "七步咙咚呛",
+        "大惊小怪",
+        "The ONE",
+        "以梦为马 (壮志骄阳版)",
+        "emo了",
+        "一眼万年",
+        "冲刺吧",
+        "爱的赏味期限",
+        "COSMIC ANTHEM / 手紙",
+        "世界晚安",
+        "明年也要好好长大",
+        "320万年前",
+        "W.O.R.L.D."
+    ];
+
+    public static List<Song> Songs =>
+    [
+        new("好肚有肚(feat.李玲玉)", "熊猫堂ProducePandas", 2, 50, "A.S.I.A", 730, 1487039339),
+        new("荒诞秀", "熊猫堂ProducePandas", 3, 15, "A.S.I.A", 639, 1487037601),
+        new("长大", "熊猫堂ProducePandas", 4, 6, "A.S.I.A", 1114, 1487037690),
+        new("招财猫(feat.纪粹希(G-Tracy))", "熊猫堂ProducePandas", 3, 37, "A.S.I.A", 361, 1487039632),
+        new("千转", "熊猫堂ProducePandas", 4, 0, "A.S.I.A", 1115, 1477312398),
+        new("辣辣辣", "熊猫堂ProducePandas", 3, 24, "A.S.I.A", 1873, 1465043716),
+        new("碎碎念", "熊猫堂ProducePandas", 3, 25, "A.S.I.A", 676, 1474142064),
+        new("盘他", "熊猫堂ProducePandas", 2, 16, "A.S.I.A", 365, 1481652786),
+        new("Na Na Na", "熊猫堂ProducePandas", 3, 26, "A.S.I.A", 312, 1469022662),
+        new("Indigo", "熊猫堂ProducePandas", 3, 15, "A.S.I.A", 137, 1487039517),
+        new("饕餮人间", "熊猫堂ProducePandas", 3, 20, "饕餮人间", 1295, 1499584605),
+        new("七步咙咚呛", "熊猫堂ProducePandas", 3, 10, "七步咙咚呛", 175, 1809095152),
+        new("大惊小怪", "熊猫堂ProducePandas", 3, 32, "大惊小怪", 10420, 1847477425),
+        new("工具人", "熊猫堂ProducePandas", 2, 46, "大惊小怪", 1135, 1847476499),
+        new("以梦为马", "熊猫堂ProducePandas", 4, 19, "大惊小怪", 18361, 1836034373),
+        new("以梦为马(Piano Version)", "熊猫堂ProducePandas", 3, 4, "大惊小怪", 570, 1847477423),
+        new("The ONE", "熊猫堂ProducePandas", 2, 58, "The ONE", 1508, 1864329424),
+        new("The ONE(日文版)", "熊猫堂ProducePandas", 2, 57, "The ONE", 385, 1864329429),
+        new("以梦为马 (壮志骄阳版)", "熊猫堂ProducePandas", 4, 19, "以梦为马 (壮志骄阳版)", 161, 1865138896),
+        new("New Horse", "熊猫堂ProducePandas", 2, 30, "emo了", 643, 1887021307),
+        new("不例外", "熊猫堂ProducePandas", 3, 31, "emo了", 1818, 1887022665),
+        new("满意", "熊猫堂ProducePandas", 4, 32, "emo了", 1081, 1882433472),
+        new("就算与全世界为敌也要跟你在一起", "熊猫堂ProducePandas", 3, 32, "emo了", 2119, 1881759960),
+        new("The ONE", "熊猫堂ProducePandas", 2, 58, "emo了", 67, 1887022648),
+        new("口香糖", "熊猫堂ProducePandas", 3, 10, "emo了", 2181, 1885502254),
+        new("Suuuuuuper Mario", "熊猫堂ProducePandas", 3, 32, "emo了", 1010, 1887021318),
+        new("饕餮人间", "熊猫堂ProducePandas", 3, 22, "emo了", 109, 1887021320),
+        new("以梦为马 (壮志骄阳版)", "熊猫堂ProducePandas", 4, 21, "emo了", 34, 1887022666),
+        new("The ONE(日文版)", "熊猫堂ProducePandas", 2, 57, "emo了", 27, 1887022646),
+        new("满意(DJheap九天版)", "熊猫堂ProducePandas", 4, 31, "emo了", 31, 1901605941),
+        new("一眼万年", "熊猫堂ProducePandas", 3, 54, "一眼万年", 20, 1922599361),
+        new("冲刺", "熊猫堂ProducePandas", 3, 49, "冲刺吧", 1006, 1932878194),
+        new("滴答滴", "熊猫堂ProducePandas", 2, 30, "爱的赏味期限", 86, 1957515790),
+        new("热带季风", "熊猫堂ProducePandas", 2, 45, "爱的赏味期限", 212, 1957514964),
+        new("渣", "熊猫堂ProducePandas", 3, 28, "爱的赏味期限", 22, 1957514965),
+        new("独特", "熊猫堂ProducePandas", 3, 33, "爱的赏味期限", 62, 1957514966),
+        new("雨后", "熊猫堂ProducePandas", 4, 15, "爱的赏味期限", 23, 1957514967),
+        new("然后然后", "熊猫堂ProducePandas", 3, 50, "爱的赏味期限", 108, 1957514968),
+        new("丢", "熊猫堂ProducePandas", 3, 26, "爱的赏味期限", 30, 1957515792),
+        new("热带疾风(FACEVOID桃心连哥 Remix)", "熊猫堂ProducePandas", 3, 23, "爱的赏味期限", 55, 1957515793),
+        new("COSMIC ANTHEM -Japanese Ver.-", "熊猫堂ProducePandas", 3, 11, "COSMIC ANTHEM / 手紙", 0, 1977171493),
+        new("手紙 (「長大-You Raise Me Up-」-Japanese Ver.-)", "熊猫堂ProducePandas", 4, 11, "COSMIC ANTHEM / 手紙", 0,
+            1977171494),
+        new("COSMIC ANTHEM -Chinese Ver.-", "熊猫堂ProducePandas", 3, 31, "COSMIC ANTHEM / 手紙", 0, 1977172202),
+        new("世界晚安", "熊猫堂ProducePandas", 2, 59, "世界晚安", 652, 1985063377),
+        new("世界晚安(泰文版)", "熊猫堂ProducePandas", 2, 59, "世界晚安", 134, 1987842504),
+        new("世界晚安(钢琴版)", "熊猫堂ProducePandas", 3, 2, "世界晚安", 76, 1990475933),
+        new("世界晚安(泰文钢琴版)", "熊猫堂ProducePandas", 3, 2, "世界晚安", 29, 1990475934),
+        new("世界晚安(DJ沈念版)", "熊猫堂ProducePandas", 3, 9, "世界晚安", 34, 2014263184),
+        new("世界晚安(钢琴配乐)", "熊猫堂ProducePandas", 2, 59, "世界晚安", 11, 2014263185),
+        new("明年也要好好长大", "熊猫堂ProducePandas", 3, 12, "明年也要好好长大", 0, 2010515162),
+        new("320万年前（DJ沈念版）", "熊猫堂ProducePandas", 3, 21, "320万年前", 8, 2055888636),
+        new("320万年前", "熊猫堂ProducePandas", 3, 7, "W.O.R.L.D.", 329, 2049770469),
+        new("隐德来希", "熊猫堂ProducePandas", 3, 3, "W.O.R.L.D.", 594, 2061317924),
+        new("孔明", "熊猫堂ProducePandas", 3, 59, "W.O.R.L.D.", 91, 2063175274),
+        new("锦鲤卟噜噜", "熊猫堂ProducePandas", 3, 5, "W.O.R.L.D.", 67, 2059208262),
+        new("指鹿为马", "熊猫堂ProducePandas", 3, 12, "W.O.R.L.D.", 74, 2063175272),
+        new("热带季风Remix", "熊猫堂ProducePandas", 3, 22, "W.O.R.L.D.", 23, 2063173319),
+        new("加州梦境", "熊猫堂ProducePandas", 2, 56, "W.O.R.L.D.", 1662, 2063173324),
+        new("渐近自由", "熊猫堂ProducePandas", 4, 19, "W.O.R.L.D.", 124, 2063173321),
+        new("世界所有的烂漫", "熊猫堂ProducePandas", 3, 30, "W.O.R.L.D.", 335, 2053388775)
+    ];
+}
+
+public partial class SongViewModel : ObservableObject
+{
+    [ObservableProperty] private string? _title;
+    [ObservableProperty] private string? _artist;
+    [ObservableProperty] private string? _album;
+    [ObservableProperty] private int _countOfComment;
+    [ObservableProperty] private bool? _isSelected;
+}

demo/Semi.Avalonia.Demo/ViewModels/VariablesDemoViewModel.cs

@@ -0,0 +1,151 @@
+using System;
+using System.Collections.Generic;
+using System.Globalization;
+using Avalonia;
+using Avalonia.Collections;
+using Avalonia.Controls;
+using Avalonia.Media;
+using CommunityToolkit.Mvvm.ComponentModel;
+using Semi.Avalonia.Tokens;
+
+namespace Semi.Avalonia.Demo.ViewModels;
+
+public partial class VariablesDemoViewModel : ObservableObject
+{
+    public DataGridCollectionView GridData { get; set; }
+    [ObservableProperty] private string _searchText = string.Empty;
+
+    public VariablesDemoViewModel()
+    {
+        IResourceDictionary dictionary = new Variables();
+        foreach (var token in Tokens)
+        {
+            if (token.ResourceKey is not null && dictionary.TryGetValue(token.ResourceKey, out var value))
+            {
+                token.Type = value?.GetType();
+                token.Value = GetValueString(value);
+            }
+        }
+
+        GridData = new DataGridCollectionView(Tokens);
+        GridData.GroupDescriptions.Add(new DataGridPathGroupDescription(nameof(VariableItem.Category)));
+    }
+
+    private static string? GetValueString(object? value)
+    {
+        if (value is null) return string.Empty;
+
+        return value switch
+        {
+            double d => d.ToString(CultureInfo.InvariantCulture),
+            CornerRadius c => c.IsUniform ? $"{c.TopLeft}" : c.ToString(),
+            Thickness t => t.IsUniform ? $"{t.Left}" : t.ToString(),
+            FontWeight fontWeight => Convert.ToInt32(fontWeight).ToString(),
+            FontFamily fontFamily => fontFamily.FamilyNames.ToString(),
+            _ => value.ToString()
+        };
+    }
+
+    partial void OnSearchTextChanged(string value)
+    {
+        if (string.IsNullOrWhiteSpace(value))
+        {
+            GridData.Filter = _ => true;
+            GridData.Refresh();
+            return;
+        }
+
+        var search = value.Trim();
+        GridData.Filter = item =>
+        {
+            if (item is not VariableItem variableItem) return false;
+            return (variableItem.Category?.Contains(search, StringComparison.InvariantCultureIgnoreCase) ?? false) ||
+                   (variableItem.ResourceKey?.Contains(search, StringComparison.InvariantCultureIgnoreCase) ?? false) ||
+                   (variableItem.Value?.Contains(search, StringComparison.InvariantCultureIgnoreCase) ?? false) ||
+                   (variableItem.Type?.Name.Contains(search, StringComparison.InvariantCultureIgnoreCase) ?? false) ||
+                   (variableItem.Description?.Contains(search, StringComparison.InvariantCultureIgnoreCase) ?? false);
+        };
+        GridData.Refresh();
+    }
+
+    private static List<VariableItem> Tokens { get; set; } =
+    [
+        new("Height", "SemiHeightControlSmall"),
+        new("Height", "SemiHeightControlDefault"),
+        new("Height", "SemiHeightControlLarge"),
+        new("Icon Size", "SemiWidthIconExtraSmall"),
+        new("Icon Size", "SemiWidthIconSmall"),
+        new("Icon Size", "SemiWidthIconMedium"),
+        new("Icon Size", "SemiWidthIconLarge"),
+        new("Icon Size", "SemiWidthIconExtraLarge"),
+        new("Border CornerRadius Spacing", "SemiBorderRadiusSpacingExtraSmall"),
+        new("Border CornerRadius Spacing", "SemiBorderRadiusSpacingSmall"),
+        new("Border CornerRadius Spacing", "SemiBorderRadiusSpacingMedium"),
+        new("Border CornerRadius Spacing", "SemiBorderRadiusSpacingLarge"),
+        new("Border CornerRadius Spacing", "SemiBorderRadiusSpacingFull"),
+        new("Border CornerRadius", "SemiBorderRadiusExtraSmall"),
+        new("Border CornerRadius", "SemiBorderRadiusSmall"),
+        new("Border CornerRadius", "SemiBorderRadiusMedium"),
+        new("Border CornerRadius", "SemiBorderRadiusLarge"),
+        new("Border CornerRadius", "SemiBorderRadiusFull"),
+        new("Border Spacing", "SemiBorderSpacing"),
+        new("Border Spacing", "SemiBorderSpacingControl"),
+        new("Border Spacing", "SemiBorderSpacingControlFocus"),
+        new("Border Thickness", "SemiBorderThickness"),
+        new("Border Thickness", "SemiBorderThicknessControl"),
+        new("Border Thickness", "SemiBorderThicknessControlFocus"),
+        new("Spacing", "SemiSpacingNone"),
+        new("Spacing", "SemiSpacingSuperTight"),
+        new("Spacing", "SemiSpacingExtraTight"),
+        new("Spacing", "SemiSpacingTight"),
+        new("Spacing", "SemiSpacingBaseTight"),
+        new("Spacing", "SemiSpacingBase"),
+        new("Spacing", "SemiSpacingBaseLoose"),
+        new("Spacing", "SemiSpacingLoose"),
+        new("Spacing", "SemiSpacingExtraLoose"),
+        new("Spacing", "SemiSpacingSuperLoose"),
+        new("Thickness", "SemiThicknessNone"),
+        new("Thickness", "SemiThicknessSuperTight"),
+        new("Thickness", "SemiThicknessExtraTight"),
+        new("Thickness", "SemiThicknessTight"),
+        new("Thickness", "SemiThicknessBaseTight"),
+        new("Thickness", "SemiThicknessBase"),
+        new("Thickness", "SemiThicknessBaseLoose"),
+        new("Thickness", "SemiThicknessLoose"),
+        new("Thickness", "SemiThicknessExtraLoose"),
+        new("Thickness", "SemiThicknessSuperLoose"),
+        new("FontSize", "SemiFontSizeSmall"),
+        new("FontSize", "SemiFontSizeRegular"),
+        new("FontSize", "SemiFontSizeHeader6"),
+        new("FontSize", "SemiFontSizeHeader5"),
+        new("FontSize", "SemiFontSizeHeader4"),
+        new("FontSize", "SemiFontSizeHeader3"),
+        new("FontSize", "SemiFontSizeHeader2"),
+        new("FontSize", "SemiFontSizeHeader1"),
+        new("FontWeight", "SemiFontWeightLight"),
+        new("FontWeight", "SemiFontWeightRegular"),
+        new("FontWeight", "SemiFontWeightBold"),
+        new("FontFamily", "SemiFontFamilyRegular"),
+    ];
+}
+
+public class VariableItem()
+{
+    public string? Category { get; set; }
+    public string? ResourceKey { get; set; }
+    public Type? Type { get; set; }
+    public string? Value { get; set; }
+    public string? Description { get; set; }
+
+    public VariableItem(string category, string resourceKey, string description = "") : this()
+    {
+        Category = category;
+        ResourceKey = resourceKey;
+        Description = description;
+    }
+
+    public string CopyText =>
+        $"""
+         <StaticResource x:Key="" ResourceKey="{ResourceKey}" />
+         """;
+}

demo/Semi.Avalonia.Demo/Views/MainView.axaml

@@ -16,9 +16,9 @@
             <Setter Property="Template">
                 <ControlTemplate TargetType="TabItem">
                     <TextBlock
-                        FontWeight="Bold"
-                        FontSize="12"
                         Margin="4"
+                        FontSize="12"
+                        FontWeight="Bold"
                         Text="{TemplateBinding Header}" />
                 </ControlTemplate>
             </Setter>
@@ -37,48 +37,44 @@
                 <StackPanel Orientation="Horizontal" Spacing="8">
                     <ToggleSwitch
                         Name="ExpandButton"
-                        Theme="{DynamicResource IconBorderlessToggleSwitch}"
-                        Content="{StaticResource SemiIconSidebar}" />
+                        Content="{StaticResource SemiIconSidebar}"
+                        Theme="{DynamicResource IconBorderlessToggleSwitch}" />
                     <SelectableTextBlock
                         VerticalAlignment="Center"
                         Classes="H6"
                         Text="Semi Avalonia"
                         Theme="{DynamicResource TitleSelectableTextBlock}" />
-                    <SelectableTextBlock
-                        VerticalAlignment="Center"
-                        Text="/" />
+                    <SelectableTextBlock VerticalAlignment="Center" Text="/" />
                     <SelectableTextBlock
                         VerticalAlignment="Center"
                         Classes="Secondary"
                         Text="{ReflectionBinding #tab.SelectedItem.Header}" />
                 </StackPanel>
-                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
+                <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
                     <Button
-                        Theme="{DynamicResource IconBorderlessButton}"
                         Command="{Binding OpenUrlCommand}"
                         CommandParameter="{Binding DocumentationUrl}"
-                        Content="{StaticResource SemiIconGlobe}" />
+                        Content="{StaticResource SemiIconGlobe}"
+                        Theme="{DynamicResource IconBorderlessButton}" />
 
                     <Button
-                        Theme="{DynamicResource IconBorderlessButton}"
                         Command="{Binding OpenUrlCommand}"
                         CommandParameter="{Binding RepoUrl}"
-                        Content="{StaticResource SemiIconGithubLogo}" />
+                        Content="{StaticResource SemiIconGithubLogo}"
+                        Theme="{DynamicResource IconBorderlessButton}" />
 
                     <ToggleSwitch
-                        Theme="{DynamicResource IconBorderlessToggleSwitch}"
                         Command="{Binding ToggleThemeCommand}"
+                        OffContent="{StaticResource SemiIconSun}"
                         OnContent="{StaticResource SemiIconMoon}"
-                        OffContent="{StaticResource SemiIconSun}" />
+                        Theme="{DynamicResource IconBorderlessToggleSwitch}" />
 
-                    <Button
-                        Theme="{DynamicResource IconBorderlessButton}"
-                        Content="{StaticResource SemiIconMenu}">
+                    <Button Content="{StaticResource SemiIconMenu}" Theme="{DynamicResource IconBorderlessButton}">
                         <Button.Flyout>
-                            <MenuFlyout Placement="Bottom" ItemsSource="{Binding MenuItems}" />
+                            <MenuFlyout ItemsSource="{Binding MenuItems}" Placement="Bottom" />
                         </Button.Flyout>
                         <Button.Styles>
-                            <Style Selector="MenuItem" x:DataType="views:MenuItemViewModel">
+                            <Style x:DataType="views:MenuItemViewModel" Selector="MenuItem">
                                 <Setter Property="Header" Value="{Binding Header}" />
                                 <Setter Property="ItemsSource" Value="{Binding Items}" />
                                 <Setter Property="Command" Value="{Binding Command}" />
@@ -94,8 +90,8 @@
             Grid.Row="1"
             Margin="8"
             Padding="20,0,0,0"
-            TabStripPlacement="Left"
             Classes.Dismiss="{Binding #ExpandButton.IsChecked}"
+            TabStripPlacement="Left"
             Theme="{DynamicResource ScrollLineTabControl}">
             <TabControl.Styles>
                 <Style Selector=".Dismiss /template/ ScrollViewer#PART_ScrollViewer">
@@ -113,36 +109,30 @@
             <TabItem Header="About Us">
                 <pages:AboutUs />
             </TabItem>
-            <TabItem
-                Theme="{DynamicResource CategoryTabItem}"
-                Header="Resource Browser" />
-            <!-- <TabItem Header="Palette"> -->
-            <!--     <pages:PaletteDemo /> -->
-            <!-- </TabItem> -->
-            <!-- <TabItem Header="HighContrastTheme"> -->
-            <!--     <pages:HighContrastDemo /> -->
-            <!-- </TabItem> -->
-            <!-- <TabItem Header="Variables"> -->
-            <!--     <pages:VariablesDemo /> -->
-            <!-- </TabItem> -->
+            <TabItem Header="Resource Browser" Theme="{DynamicResource CategoryTabItem}" />
+            <TabItem Header="Palette">
+                <pages:PaletteDemo />
+            </TabItem>
+            <TabItem Header="HighContrastTheme">
+                <pages:HighContrastDemo />
+            </TabItem>
+            <TabItem Header="Variables">
+                <pages:VariablesDemo />
+            </TabItem>
             <TabItem Header="Icon">
                 <pages:IconDemo />
             </TabItem>
-            <TabItem
-                Theme="{DynamicResource CategoryTabItem}"
-                Header="Separate Pack" />
+            <TabItem Header="Separate Pack" Theme="{DynamicResource CategoryTabItem}" />
             <TabItem Header="ColorPicker">
                 <pages:ColorPickerDemo />
             </TabItem>
-            <!-- <TabItem Header="DataGrid"> -->
-            <!--     <pages:DataGridDemo /> -->
-            <!-- </TabItem> -->
+            <TabItem Header="DataGrid">
+                <pages:DataGridDemo />
+            </TabItem>
             <!-- <TabItem Header="TreeDataGrid"> -->
             <!--     <pages:TreeDataGridDemo /> -->
             <!-- </TabItem> -->
-            <TabItem
-                Theme="{DynamicResource CategoryTabItem}"
-                Header="Basic" />
+            <TabItem Header="Basic" Theme="{DynamicResource CategoryTabItem}" />
             <TabItem Header="TextBlock">
                 <pages:TextBlockDemo />
             </TabItem>
@@ -155,9 +145,7 @@
             <TabItem Header="PathIcon">
                 <pages:PathIconDemo />
             </TabItem>
-            <TabItem
-                Theme="{DynamicResource CategoryTabItem}"
-                Header="Button" />
+            <TabItem Header="Button" Theme="{DynamicResource CategoryTabItem}" />
             <TabItem Header="Button">
                 <pages:ButtonDemo />
             </TabItem>
@@ -173,9 +161,7 @@
             <TabItem Header="ToggleSwitch">
                 <pages:ToggleSwitchDemo />
             </TabItem>
-            <TabItem
-                Theme="{DynamicResource CategoryTabItem}"
-                Header="Input" />
+            <TabItem Header="Input" Theme="{DynamicResource CategoryTabItem}" />
             <TabItem Header="TextBox">
                 <pages:TextBoxDemo />
             </TabItem>
@@ -197,9 +183,7 @@
             <TabItem Header="ManagedFileChooser">
                 <pages:ManagedFileChooserDemo />
             </TabItem>
-            <TabItem
-                Theme="{DynamicResource CategoryTabItem}"
-                Header="Date/Time" />
+            <TabItem Header="Date/Time" Theme="{DynamicResource CategoryTabItem}" />
             <TabItem Header="Calendar">
                 <pages:CalendarDemo />
             </TabItem>
@@ -212,9 +196,22 @@
             <TabItem Header="TimePicker">
                 <pages:TimePickerDemo />
             </TabItem>
-            <TabItem
-                Theme="{DynamicResource CategoryTabItem}"
-                Header="Navigation" />
+            <TabItem Header="Navigation" Theme="{DynamicResource CategoryTabItem}" />
+            <TabItem Header="ContentPage">
+                <pages:ContentPageDemo />
+            </TabItem>
+            <TabItem Header="CarouselPage">
+                <pages:CarouselPageDemo />
+            </TabItem>
+            <TabItem Header="DrawerPage">
+                <pages:DrawerPageDemo />
+            </TabItem>
+            <TabItem Header="NavigationPage">
+                <pages:NavigationPageDemo />
+            </TabItem>
+            <TabItem Header="TabbedPage">
+                <pages:TabbedPageDemo />
+            </TabItem>
             <TabItem Header="TabControl">
                 <pages:TabControlDemo />
             </TabItem>
@@ -224,12 +221,13 @@
             <TabItem Header="TreeView">
                 <pages:TreeViewDemo />
             </TabItem>
-            <TabItem
-                Theme="{DynamicResource CategoryTabItem}"
-                Header="Show" />
+            <TabItem Header="Show" Theme="{DynamicResource CategoryTabItem}" />
             <TabItem Header="Carousel">
                 <pages:CarouselDemo />
             </TabItem>
+            <TabItem Header="PipsPager">
+                <pages:PipsPagerDemo />
+            </TabItem>
             <TabItem Header="Expander">
                 <pages:ExpanderDemo />
             </TabItem>
@@ -251,9 +249,7 @@
             <TabItem Header="ToolTip">
                 <pages:ToolTipDemo />
             </TabItem>
-            <TabItem
-                Theme="{DynamicResource CategoryTabItem}"
-                Header="Feedback" />
+            <TabItem Header="Feedback" Theme="{DynamicResource CategoryTabItem}" />
             <TabItem Header="DataValidationErrors">
                 <pages:DataValidationErrorsDemo />
             </TabItem>
@@ -266,9 +262,10 @@
             <TabItem Header="RefreshContainer">
                 <pages:RefreshContainerDemo />
             </TabItem>
-            <TabItem
-                Theme="{DynamicResource CategoryTabItem}"
-                Header="Other" />
+            <TabItem Header="Other" Theme="{DynamicResource CategoryTabItem}" />
+            <TabItem Header="CommandBar">
+                <pages:CommandBarDemo />
+            </TabItem>
             <TabItem Header="GridSplitter">
                 <pages:GridSplitterDemo />
             </TabItem>
@@ -281,6 +278,9 @@
             <TabItem Header="ThemeVariantScope">
                 <pages:ThemeVariantDemo />
             </TabItem>
+            <TabItem Header="WindowCustomizationsPage">
+                <pages:WindowCustomizationsPage />
+            </TabItem>
         </TabControl>
     </Grid>
 </UserControl>

demo/Semi.Avalonia.Demo/Views/MainWindow.axaml

@@ -5,10 +5,11 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:views="clr-namespace:Semi.Avalonia.Demo.Views"
-    Title="Semi.Avalonia.Demo"
+    Title="Semi Avalonia Demo"
     d:DesignHeight="450"
     d:DesignWidth="800"
+    ExtendClientAreaToDecorationsHint="True"
     Icon="/Assets/irihi.ico"
     mc:Ignorable="d">
-    <views:MainView />
+    <views:MainView Margin="{Binding $parent[Window].WindowDecorationMargin}" />
 </Window>

demo/Semi.Avalonia.Demo/Views/MainWindow.axaml.cs

@@ -1,11 +1,38 @@
 using Avalonia.Controls;
+using Avalonia.Input;
 
 namespace Semi.Avalonia.Demo.Views;
 
 public partial class MainWindow : Window
 {
+    private WindowState _stateBeforeFullScreen = WindowState.Normal;
+
     public MainWindow()
     {
         InitializeComponent();
+        KeyDown += FullScreenKeyDown;
+    }
+
+    private void FullScreenKeyDown(object? sender, KeyEventArgs e)
+    {
+        if (e.Key == Key.F11)
+        {
+            
+            ToggleFullScreen();
+            e.Handled = true;
+        }
+    }
+
+    private void ToggleFullScreen()
+    {
+        if (WindowState is not WindowState.FullScreen)
+        {
+            _stateBeforeFullScreen = WindowState;
+            WindowState = WindowState.FullScreen;
+        }
+        else
+        {
+            WindowState = _stateBeforeFullScreen;
+        }
     }
 }

src/Directory.Packages.props

@@ -1,14 +1,14 @@
 <Project>
     <PropertyGroup>
         <ManagePackageVersionsCentrally>true</ManagePackageVersionsCentrally>
-        <AvaloniaVersion>12.0.999-cibuild0061987-alpha</AvaloniaVersion>
-        <DataGridVersion>11.3.7</DataGridVersion>
+        <AvaloniaVersion>12.0.0-rc1</AvaloniaVersion>
+        <DataGridVersion>12.0.0-rc1</DataGridVersion>
     </PropertyGroup>
     <ItemGroup>
         <PackageVersion Include="Avalonia" Version="$(AvaloniaVersion)"/>
         <PackageVersion Include="Avalonia.Controls.ColorPicker" Version="$(AvaloniaVersion)"/>
         <PackageVersion Include="Avalonia.Controls.DataGrid" Version="$(DataGridVersion)"/>
         <PackageVersion Include="Avalonia.Controls.TreeDataGrid" Version="11.1.1"/>
-        <PackageVersion Include="Irihi.Avalonia.Shared" Version="0.4.0-nightly-20260206184422"/>
+        <PackageVersion Include="Irihi.Avalonia.Shared" Version="0.4.0-rc1"/>
     </ItemGroup>
 </Project>

src/Semi.Avalonia.ColorPicker/ColorPickerSemiTheme.axaml

@@ -6,6 +6,7 @@
         <ResourceDictionary>
             <ResourceDictionary.ThemeDictionaries>
                 <ResourceInclude x:Key="Default" Source="Light.axaml" />
+                <ResourceInclude x:Key="Light" Source="Light.axaml" />
                 <ResourceInclude x:Key="Dark" Source="Dark.axaml" />
             </ResourceDictionary.ThemeDictionaries>
             <ResourceDictionary.MergedDictionaries>

src/Semi.Avalonia.ColorPicker/Semi.Avalonia.ColorPicker.csproj

@@ -1,15 +1,15 @@
 <Project Sdk="Microsoft.NET.Sdk">
 
     <PropertyGroup>
-        <TargetFramework>net8.0</TargetFramework>
-        <Version>11.3.7.2</Version>
-        <PackageReleaseNotes>Update to Semi.Avalonia.ColorPicker 11.3.7.2</PackageReleaseNotes>
+        <TargetFrameworks>net8.0;net10.0</TargetFrameworks>
+        <Version>12.0.0-rc1</Version>
+        <PackageReleaseNotes>Update to Semi.Avalonia.ColorPicker 12.0.0-rc1</PackageReleaseNotes>
         <Title>Semi.Avalonia.ColorPicker</Title>
     </PropertyGroup>
 
     <ItemGroup>
-        <PackageReference Include="Irihi.Avalonia.Shared" />
         <PackageReference Include="Avalonia.Controls.ColorPicker"/>
+        <PackageReference Include="Irihi.Avalonia.Shared"/>
         <None Include="README.md" Pack="true" PackagePath="\"/>
     </ItemGroup>
 

src/Semi.Avalonia.ColorPicker/SemiColorDarkPalette.cs

@@ -1,6 +1,7 @@
 using Avalonia.Controls;
 using Avalonia.Media;
 using Avalonia.Utilities;
+using Irihi.Avalonia.Shared.Helpers;
 
 namespace Semi.Avalonia.ColorPicker;
 
@@ -220,8 +221,8 @@ public class SemiColorDarkPalette: IColorPalette
     public Color GetColor(int colorIndex, int shadeIndex)
     {
         return Colors[
-            MathUtilities.Clamp(colorIndex, 0, ColorCount - 1),
-            MathUtilities.Clamp(shadeIndex, 0, ShadeCount - 1)
+            MathHelpers.SafeClamp(colorIndex, 0, ColorCount - 1),
+            MathHelpers.SafeClamp(shadeIndex, 0, ShadeCount - 1)
         ];
     }
 

src/Semi.Avalonia.ColorPicker/SemiColorLightPalette.cs

@@ -1,6 +1,7 @@
 using Avalonia.Controls;
 using Avalonia.Media;
 using Avalonia.Utilities;
+using Irihi.Avalonia.Shared.Helpers;
 
 namespace Semi.Avalonia.ColorPicker;
 
@@ -220,8 +221,8 @@ public class SemiColorLightPalette: IColorPalette
     public Color GetColor(int colorIndex, int shadeIndex)
     {
         return Colors[
-            MathUtilities.Clamp(colorIndex, 0, ColorCount - 1),
-            MathUtilities.Clamp(shadeIndex, 0, ShadeCount - 1)
+            MathHelpers.SafeClamp(colorIndex, 0, ColorCount - 1),
+            MathHelpers.SafeClamp(shadeIndex, 0, ShadeCount - 1)
         ];
     }
 

src/Semi.Avalonia.DataGrid/DataGridSemiTheme.axaml

@@ -6,6 +6,7 @@
         <ResourceDictionary>
             <ResourceDictionary.ThemeDictionaries>
                 <ResourceInclude x:Key="Default" Source="Light.axaml" />
+                <ResourceInclude x:Key="Light" Source="Light.axaml" />
                 <ResourceInclude x:Key="Dark" Source="Dark.axaml" />
             </ResourceDictionary.ThemeDictionaries>
             <ResourceDictionary.MergedDictionaries>

src/Semi.Avalonia.DataGrid/Semi.Avalonia.DataGrid.csproj

@@ -1,9 +1,9 @@
 <Project Sdk="Microsoft.NET.Sdk">
 
     <PropertyGroup>
-        <TargetFrameworks>netstandard2.0;net6.0;net8.0</TargetFrameworks>
-        <Version>11.3.7.2</Version>
-        <PackageReleaseNotes>Update to Semi.Avalonia.DataGrid 11.3.7.2</PackageReleaseNotes>
+        <TargetFrameworks>net8.0;net10.0</TargetFrameworks>
+        <Version>12.0.0-rc1</Version>
+        <PackageReleaseNotes>Update to Semi.Avalonia.DataGrid 12.0.0-rc1</PackageReleaseNotes>
         <Title>Semi.Avalonia.DataGrid</Title>
     </PropertyGroup>
 

src/Semi.Avalonia/Controls/AutoCompleteBox.axaml

@@ -1,6 +1,7 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:iri="https://irihi.tech/shared">
     <Design.PreviewWith>
         <StackPanel Margin="20" Spacing="20">
             <TextBox Text="Hello" />
@@ -20,6 +21,7 @@
                             Name="PART_TextBox"
                             VerticalAlignment="Stretch"
                             MinHeight="{TemplateBinding MinHeight}"
+                            ClearSelectionOnLostFocus="{TemplateBinding ClearSelectionOnLostFocus}"
                             DataValidationErrors.Errors="{TemplateBinding (DataValidationErrors.Errors)}"
                             Theme="{DynamicResource NonErrorTextBox}"
                             InnerLeftContent="{TemplateBinding InnerLeftContent}"
@@ -56,45 +58,13 @@
         </Setter>
 
         <Style Selector="^.Bordered">
-            <Setter Property="Template">
-                <ControlTemplate TargetType="AutoCompleteBox">
-                    <Panel>
-                        <TextBox
-                            Name="PART_TextBox"
-                            VerticalAlignment="Stretch"
-                            MinHeight="0"
-                            Classes="Bordered"
-                            DataValidationErrors.Errors="{TemplateBinding (DataValidationErrors.Errors)}"
-                            PlaceholderForeground="{TemplateBinding PlaceholderForeground}"
-                            PlaceholderText="{TemplateBinding PlaceholderText}" />
-                        <Popup
-                            Name="PART_Popup"
-                            MaxHeight="{TemplateBinding MaxDropDownHeight}"
-                            InheritsTransform="True"
-                            IsLightDismissEnabled="True"
-                            PlacementTarget="{TemplateBinding}">
-                            <Border
-                                MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
-                                Margin="{DynamicResource AutoCompleteBoxPopupMargin}"
-                                Padding="{DynamicResource AutoCompleteBoxPopupPadding}"
-                                HorizontalAlignment="Stretch"
-                                Background="{DynamicResource AutoCompleteBoxPopupBackground}"
-                                BorderBrush="{DynamicResource AutoCompleteBoxPopupBorderBrush}"
-                                BorderThickness="{DynamicResource AutoCompleteBoxPopupBorderThickness}"
-                                BoxShadow="{DynamicResource AutoCompleteBoxPopupBoxShadow}"
-                                CornerRadius="{DynamicResource AutoCompleteBoxPopupCornerRadius}">
-                                <ListBox
-                                    Name="PART_SelectingItemsControl"
-                                    Foreground="{TemplateBinding Foreground}"
-                                    ItemTemplate="{TemplateBinding ItemTemplate}"
-                                    ScrollViewer.HorizontalScrollBarVisibility="Auto"
-                                    ScrollViewer.VerticalScrollBarVisibility="Auto" 
-                                    ScrollViewer.IsScrollChainingEnabled="False" />
-                            </Border>
-                        </Popup>
-                    </Panel>
-                </ControlTemplate>
-            </Setter>
+            <Style Selector="^ /template/ TextBox#PART_TextBox">
+                <Setter Property="MinHeight" Value="0" />
+                <Setter Property="iri:ClassHelper.Classes" Value="Bordered" />
+            </Style>
+            <Style Selector="^ /template/ ListBox#PART_SelectingItemsControl">
+                <Setter Property="ScrollViewer.IsScrollChainingEnabled" Value="False" />
+            </Style>
         </Style>
         <Style Selector="^.Large">
             <Setter Property="MinHeight" Value="{DynamicResource AutoCompleteBoxLargeHeight}" />

src/Semi.Avalonia/Controls/ButtonSpinner.axaml

@@ -20,6 +20,7 @@
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     Content="{TemplateBinding Content}"
+                    CornerRadius="{TemplateBinding CornerRadius}"
                     ContentTemplate="{TemplateBinding ContentTemplate}" />
             </ControlTemplate>
         </Setter>
@@ -92,7 +93,7 @@
                 </Grid>
             </ControlTemplate>
         </Setter>
-        <Style Selector="^[ButtonSpinnerLocation=Left] /template/ Border#ButtonGroup">
+        <Style Selector="^:left /template/ Border#ButtonGroup">
             <Setter Property="Grid.Column" Value="0" />
             <Setter Property="Margin" Value="0 0 4 0" />
         </Style>
@@ -100,4 +101,70 @@
             <Setter Property="BorderBrush" Value="{DynamicResource ButtonSpinnerRepeatButtonPointeroverBorderBrush}" />
         </Style>
     </ControlTheme>
+
+    <ControlTheme x:Key="SplitButtonSpinner" TargetType="ButtonSpinner">
+        <Setter Property="BorderBrush" Value="{DynamicResource ButtonSpinnerRepeatButtonBorderBrush}" />
+        <Setter Property="BorderThickness" Value="0" />
+        <Setter Property="MinWidth" Value="200" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="ButtonSpinner">
+                <Grid ColumnDefinitions="Auto, *, Auto">
+                    <RepeatButton
+                        Name="PART_DecreaseButton"
+                        Grid.Column="0"
+                        VerticalAlignment="Stretch"
+                        Padding="{DynamicResource SplitButtonSpinnerButtonPadding}"
+                        BorderBrush="{DynamicResource ButtonSpinnerRepeatButtonBorderBrush}"
+                        BorderThickness="{DynamicResource ButtonSpinnerButtonGroupBorderThickness}"
+                        CornerRadius="{DynamicResource SplitButtonSpinnerLeftButtonCornerRadius}"
+                        IsVisible="{TemplateBinding ShowButtonSpinner}"
+                        Theme="{StaticResource ButtonSpinnerRepeatButton}">
+                        <PathIcon
+                            Theme="{DynamicResource InnerPathIcon}"
+                            Classes="Small"
+                            Data="{DynamicResource SplitButtonSpinnerDecreaseButtonGlyph}"
+                            Foreground="{DynamicResource ButtonSpinnerRepeatButtonForeground}" />
+                    </RepeatButton>
+                    <Border
+                        Grid.Column="1"
+                        Margin="2 0"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}">
+                        <ContentPresenter
+                            Name="PART_ContentPresenter"
+                            Padding="{TemplateBinding Padding}"
+                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                            Content="{TemplateBinding Content}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}" />
+                    </Border>
+                    <RepeatButton
+                        Name="PART_IncreaseButton"
+                        Grid.Column="2"
+                        VerticalAlignment="Stretch"
+                        Padding="{DynamicResource SplitButtonSpinnerButtonPadding}"
+                        BorderBrush="{DynamicResource ButtonSpinnerRepeatButtonBorderBrush}"
+                        BorderThickness="{DynamicResource ButtonSpinnerButtonGroupBorderThickness}"
+                        CornerRadius="{DynamicResource SplitButtonSpinnerRightButtonCornerRadius}"
+                        IsVisible="{TemplateBinding ShowButtonSpinner}"
+                        Theme="{StaticResource ButtonSpinnerRepeatButton}">
+                        <PathIcon
+                            Theme="{DynamicResource InnerPathIcon}"
+                            Classes="Small"
+                            Data="{DynamicResource SplitButtonSpinnerIncreaseButtonGlyph}"
+                            Foreground="{DynamicResource ButtonSpinnerRepeatButtonForeground}" />
+                    </RepeatButton>
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^:left /template/ RepeatButton#PART_DecreaseButton">
+            <Setter Property="Grid.Column" Value="2" />
+            <Setter Property="CornerRadius" Value="{DynamicResource SplitButtonSpinnerRightButtonCornerRadius}" />
+        </Style>
+        <Style Selector="^:left /template/ RepeatButton#PART_IncreaseButton">
+            <Setter Property="Grid.Column" Value="0" />
+            <Setter Property="CornerRadius" Value="{DynamicResource SplitButtonSpinnerLeftButtonCornerRadius}" />
+        </Style>
+    </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/CaptionButtons.axaml

@@ -1,100 +0,0 @@
-<ResourceDictionary
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <Design.PreviewWith>
-        <CaptionButtons />
-    </Design.PreviewWith>
-
-    <ControlTheme x:Key="CaptionButton" TargetType="Button">
-        <Setter Property="Foreground" Value="{DynamicResource CaptionButtonForeground}" />
-        <Setter Property="Background" Value="Transparent" />
-        <Setter Property="CornerRadius" Value="{StaticResource CaptionButtonCornerRadius}" />
-        <Setter Property="Padding" Value="{StaticResource CaptionButtonPadding}" />
-        <Setter Property="Width" Value="{StaticResource CaptionButtonWidth}" />
-        <Setter Property="Height" Value="{StaticResource CaptionButtonHeight}" />
-        <Setter Property="Cursor" Value="Hand" />
-        <Setter Property="VerticalAlignment" Value="Stretch" />
-        <Setter Property="Template">
-            <ControlTemplate TargetType="Button">
-                <ContentPresenter
-                    Name="PART_ContentPresenter"
-                    Padding="{TemplateBinding Padding}"
-                    Foreground="{TemplateBinding Foreground}"
-                    Background="{TemplateBinding Background}"
-                    BorderBrush="{TemplateBinding BorderBrush}"
-                    BorderThickness="{TemplateBinding BorderThickness}"
-                    Content="{TemplateBinding Content}"
-                    ContentTemplate="{TemplateBinding ContentTemplate}"
-                    CornerRadius="{TemplateBinding CornerRadius}" />
-            </ControlTemplate>
-        </Setter>
-
-        <Style Selector="^:pointerover">
-            <Setter Property="Background" Value="{DynamicResource CaptionButtonPointeroverBackground}" />
-        </Style>
-
-        <Style Selector="^:pressed">
-            <Setter Property="Background" Value="{DynamicResource CaptionButtonPressedBackground}" />
-        </Style>
-    </ControlTheme>
-
-    <ControlTheme x:Key="{x:Type CaptionButtons}" TargetType="CaptionButtons">
-        <Setter Property="Foreground" Value="{DynamicResource CaptionButtonForeground}" />
-        <Setter Property="Template">
-            <ControlTemplate TargetType="CaptionButtons">
-                <StackPanel Orientation="Horizontal">
-                    <Button Name="PART_FullScreenButton" Theme="{StaticResource CaptionButton}">
-                        <PathIcon
-                            Name="PART_FullScreenButtonIcon"
-                            Theme="{StaticResource InnerPathIcon}"
-                            Data="{StaticResource WindowExpandGlyph}"
-                            Foreground="{Binding $parent[Button].Foreground}" />
-                    </Button>
-                    <Button Name="PART_MinimizeButton" Theme="{StaticResource CaptionButton}">
-                        <PathIcon
-                            Name="PART_MinimizeButtonIcon"
-                            Theme="{StaticResource InnerPathIcon}"
-                            Data="{StaticResource WindowMinimizeGlyph}"
-                            Foreground="{Binding $parent[Button].Foreground}" />
-                    </Button>
-                    <Button Name="PART_RestoreButton" Theme="{StaticResource CaptionButton}">
-                        <PathIcon
-                            Name="PART_RestoreButtonIcon"
-                            Theme="{StaticResource InnerPathIcon}"
-                            Data="{StaticResource WindowMaximizeGlyph}"
-                            Foreground="{Binding $parent[Button].Foreground}" />
-                    </Button>
-                    <Button Name="PART_CloseButton" Theme="{StaticResource CaptionButton}">
-                        <PathIcon
-                            Name="PART_CloseButtonIcon"
-                            Theme="{StaticResource InnerPathIcon}"
-                            Data="{StaticResource WindowCloseIconGlyph}"
-                            Foreground="{Binding $parent[Button].Foreground}" />
-                    </Button>
-                </StackPanel>
-            </ControlTemplate>
-        </Setter>
-
-        <Style Selector="^ /template/ Button#PART_CloseButton:pointerover">
-            <Setter Property="Foreground" Value="{DynamicResource CaptionButtonCloseForeground}" />
-            <Setter Property="Background" Value="{DynamicResource CaptionButtonClosePointeroverBackground}" />
-        </Style>
-        <Style Selector="^ /template/ Button#PART_CloseButton:pressed">
-            <Setter Property="Foreground" Value="{DynamicResource CaptionButtonCloseForeground}" />
-            <Setter Property="Background" Value="{DynamicResource CaptionButtonClosePressedBackground}" />
-        </Style>
-
-        <Style Selector="^:maximized /template/ PathIcon#PART_RestoreButtonIcon">
-            <Setter Property="Data" Value="{StaticResource WindowRestoreGlyph}" />
-        </Style>
-        <Style Selector="^:fullscreen /template/ PathIcon#PART_FullScreenButtonIcon">
-            <Setter Property="Data" Value="{StaticResource WindowCollapseGlyph}" />
-        </Style>
-        <Style Selector="^:fullscreen /template/ Button#PART_RestoreButton">
-            <Setter Property="IsVisible" Value="False" />
-        </Style>
-        <Style Selector="^:fullscreen /template/ Button#PART_MinimizeButton">
-            <Setter Property="IsVisible" Value="False" />
-        </Style>
-    </ControlTheme>
-</ResourceDictionary>

src/Semi.Avalonia/Controls/Carousel.axaml

@@ -156,7 +156,7 @@
                     Theme="{DynamicResource InnerPathIcon}"
                     Width="{TemplateBinding Width}"
                     Height="{TemplateBinding Height}"
-                    Data="{DynamicResource CarouselButtonGlyph}"
+                    Data="{TemplateBinding Content}"
                     Foreground="{TemplateBinding Foreground}" />
             </ControlTemplate>
         </Setter>
@@ -213,6 +213,7 @@
                         Theme="{DynamicResource CarouselButton}"
                         Margin="{DynamicResource CarouselButtonMargin}"
                         Foreground="{DynamicResource CarouselButtonForeground}"
+                        Content="{StaticResource SemiIconChevronLeft}"
                         IsVisible="{TemplateBinding ItemCount, Converter={x:Static semi:ItemConverter.ItemVisibleConverter}}"
                         Command="{Binding $parent[Carousel].Previous}" />
                     <Button
@@ -222,9 +223,9 @@
                         Theme="{DynamicResource CarouselButton}"
                         Margin="{DynamicResource CarouselButtonMargin}"
                         Foreground="{DynamicResource CarouselButtonForeground}"
+                        Content="{StaticResource SemiIconChevronRight}"
                         IsVisible="{TemplateBinding ItemCount, Converter={x:Static semi:ItemConverter.ItemVisibleConverter}}"
-                        Command="{Binding $parent[Carousel].Next}"
-                        RenderTransform="rotate(180deg)" />
+                        Command="{Binding $parent[Carousel].Next}" />
                 </Grid>
             </ControlTemplate>
         </Setter>

src/Semi.Avalonia/Controls/CarouselPage.axaml

@@ -0,0 +1,19 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <ControlTheme x:Key="{x:Type CarouselPage}" TargetType="CarouselPage">
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Carousel
+                    Name="PART_Carousel"
+                    Background="{TemplateBinding Background}"
+                    ItemTemplate="{TemplateBinding PageTemplate}"
+                    PageTransition="{TemplateBinding PageTransition}"
+                    ItemsPanel="{TemplateBinding ItemsPanel}"
+                    HorizontalAlignment="Stretch"
+                    VerticalAlignment="Stretch" />
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/CommandBar.axaml

@@ -0,0 +1,369 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:collections="clr-namespace:Avalonia.Collections;assembly=Avalonia.Base">
+
+    <Design.PreviewWith>
+        <GroupBox Height="500">
+            <GroupBox.Header>
+                <StackPanel>
+                    <ComboBox
+                        Name="lc"
+                        ItemsSource="{DynamicResource LabelPositionList}"
+                        SelectedValue="{x:Static CommandBarDefaultLabelPosition.Bottom}">
+                        <ComboBox.Resources>
+                            <collections:AvaloniaList x:TypeArguments="CommandBarDefaultLabelPosition" x:Key="LabelPositionList">
+                                <CommandBarDefaultLabelPosition>Bottom</CommandBarDefaultLabelPosition>
+                                <CommandBarDefaultLabelPosition>Collapsed</CommandBarDefaultLabelPosition>
+                                <CommandBarDefaultLabelPosition>Right</CommandBarDefaultLabelPosition>
+                            </collections:AvaloniaList>
+                        </ComboBox.Resources>
+                    </ComboBox>
+                    <ToggleSwitch Name="idfe" IsChecked="True" />
+                    <Slider Name="ws" Width="500" Minimum="0" Maximum="500" Value="200" />
+                </StackPanel>
+            </GroupBox.Header>
+            <StackPanel Orientation="Horizontal" VerticalAlignment="Top">
+                <CommandBar
+                    DefaultLabelPosition="{Binding #lc.SelectedValue}"
+                    IsDynamicOverflowEnabled="{Binding #idfe.IsChecked}"
+                    Width="{Binding #ws.Value}">
+                    <AppBarButton Label="New" Icon="{DynamicResource SemiIconPlus}" />
+                    <AppBarButton Label="Save" Icon="{DynamicResource SemiIconSave}" />
+                    <AppBarSeparator />
+                    <AppBarToggleButton Label="Bold" Icon="{DynamicResource SemiIconBold}" />
+                    <AppBarToggleButton Label="Italic" Icon="{DynamicResource SemiIconItalic}" />
+                    <AppBarToggleButton IsEnabled="False" IsChecked="True" Label="Underline" Icon="{DynamicResource SemiIconUnderline}" />
+                    <AppBarSeparator />
+                    <AppBarButton Label="Share" Icon="{DynamicResource SemiIconShare}" />
+                    <AppBarButton Label="Export" Icon="{DynamicResource SemiIconExport}" />
+                    <AppBarButton Label="Print" Icon="{DynamicResource SemiIconPrint}" />
+                    <AppBarSeparator />
+                    <AppBarButton Label="Delete" Icon="{DynamicResource SemiIconDelete}" />
+                </CommandBar>
+            </StackPanel>
+        </GroupBox>
+    </Design.PreviewWith>
+
+    <ControlTheme x:Key="AppBarButtonBaseTheme" TargetType="Button">
+        <Setter Property="Template">
+            <ControlTemplate TargetType="Button">
+                <Border
+                    Name="PART_Border"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    Padding="{TemplateBinding Padding}">
+                    <StackPanel
+                        Name="PART_LayoutRoot"
+                        Spacing="{DynamicResource AppBarButtonPanelSpacing}"
+                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
+                        <ContentPresenter
+                            Name="PART_IconPresenter"
+                            Foreground="{TemplateBinding Foreground}">
+                            <ContentPresenter.DataTemplates>
+                                <DataTemplate DataType="Geometry">
+                                    <PathIcon
+                                        Theme="{DynamicResource InnerPathIcon}"
+                                        Data="{Binding}" />
+                                </DataTemplate>
+                            </ContentPresenter.DataTemplates>
+                        </ContentPresenter>
+                        <TextBlock
+                            Name="PART_Label"
+                            Foreground="{TemplateBinding Foreground}"
+                            FontSize="{DynamicResource AppBarButtonLabelFontSize}"
+                            TextTrimming="CharacterEllipsis" />
+                    </StackPanel>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+
+        <Setter Property="Background" Value="{DynamicResource AppBarButtonBackground}" />
+        <Setter Property="Foreground" Value="{DynamicResource AppBarButtonForeground}" />
+        <Setter Property="BorderBrush" Value="Transparent" />
+        <Setter Property="BorderThickness" Value="0" />
+        <Setter Property="Padding" Value="{DynamicResource AppBarButtonPadding}" />
+        <Setter Property="Width" Value="{DynamicResource AppBarButtonWidth}" />
+        <Setter Property="MinHeight" Value="{DynamicResource AppBarButtonMinHeight}" />
+
+        <Setter Property="CornerRadius" Value="{DynamicResource AppBarButtonCornerRadius}" />
+        <Setter Property="HorizontalContentAlignment" Value="Center" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="Cursor" Value="Hand" />
+
+        <Style Selector="^:pointerover /template/ Border#PART_Border">
+            <Setter Property="Background" Value="{DynamicResource AppBarButtonPointeroverBackground}" />
+        </Style>
+
+        <Style Selector="^:pressed /template/ Border#PART_Border">
+            <Setter Property="Background" Value="{DynamicResource AppBarButtonPressedBackground}" />
+        </Style>
+
+        <Style Selector="^:disabled">
+            <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource AppBarButtonDisabledForeground}" />
+            </Style>
+            <Style Selector="^ /template/ TextBlock#PART_Label">
+                <Setter Property="Foreground" Value="{DynamicResource AppBarButtonDisabledForeground}" />
+            </Style>
+        </Style>
+    </ControlTheme>
+
+    <!--  AppBarButton  -->
+    <ControlTheme
+        x:Key="{x:Type AppBarButton}"
+        BasedOn="{StaticResource AppBarButtonBaseTheme}"
+        TargetType="AppBarButton">
+
+        <Style Selector="^ /template/ TextBlock#PART_Label">
+            <Setter Property="Text" Value="{TemplateBinding Label}" />
+        </Style>
+        <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
+            <Setter Property="Content" Value="{TemplateBinding Icon}" />
+        </Style>
+
+        <!--  IsCompact: hide label, use compact width  -->
+        <Style Selector="^[IsCompact=True]">
+            <Setter Property="Width" Value="{DynamicResource AppBarButtonCompactWidth}" />
+            <Style Selector="^ /template/ TextBlock#PART_Label">
+                <Setter Property="IsVisible" Value="False" />
+            </Style>
+        </Style>
+
+        <!--  LabelPosition=Collapsed: hide label, use compact width  -->
+        <Style Selector="^[LabelPosition=Collapsed]">
+            <Setter Property="Width" Value="{DynamicResource AppBarButtonCompactWidth}" />
+            <Style Selector="^ /template/ TextBlock#PART_Label">
+                <Setter Property="IsVisible" Value="False" />
+            </Style>
+        </Style>
+
+        <!--  LabelPosition=Right: horizontal layout, auto-width  -->
+        <Style Selector="^[LabelPosition=Right]">
+            <Setter Property="Width" Value="{x:Static x:Double.NaN}" />
+            <Setter Property="MinWidth" Value="{DynamicResource AppBarButtonCompactWidth}" />
+            <Style Selector="^ /template/ StackPanel#PART_LayoutRoot">
+                <Setter Property="Orientation" Value="Horizontal" />
+            </Style>
+            <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
+                <Setter Property="VerticalAlignment" Value="Center" />
+            </Style>
+            <Style Selector="^ /template/ TextBlock#PART_Label">
+                <Setter Property="VerticalAlignment" Value="Center" />
+            </Style>
+        </Style>
+
+        <!--  IsInOverflow: full-width horizontal layout for use inside overflow popup  -->
+        <Style Selector="^[IsInOverflow=True]">
+            <Setter Property="HorizontalContentAlignment" Value="Left" />
+            <Setter Property="Width" Value="{x:Static x:Double.NaN}" />
+            <Setter Property="MinHeight" Value="{DynamicResource AppBarButtonOverflowMinHeight}" />
+            <Setter Property="Padding" Value="{DynamicResource AppBarButtonOverflowPadding}" />
+            <Style Selector="^ /template/ StackPanel#PART_LayoutRoot">
+                <Setter Property="Orientation" Value="Horizontal" />
+            </Style>
+            <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
+                <Setter Property="VerticalAlignment" Value="Center" />
+            </Style>
+            <Style Selector="^ /template/ TextBlock#PART_Label">
+                <Setter Property="VerticalAlignment" Value="Center" />
+            </Style>
+        </Style>
+    </ControlTheme>
+
+    <!--  AppBarToggleButton  -->
+    <ControlTheme
+        x:Key="{x:Type AppBarToggleButton}"
+        BasedOn="{StaticResource AppBarButtonBaseTheme}"
+        TargetType="AppBarToggleButton">
+
+        <Style Selector="^ /template/ TextBlock#PART_Label">
+            <Setter Property="Text" Value="{TemplateBinding Label}" />
+        </Style>
+        <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
+            <Setter Property="Content" Value="{TemplateBinding Icon}" />
+        </Style>
+
+        <Style Selector="^:checked">
+            <Style Selector="^ /template/ Border#PART_Border">
+                <Setter Property="Background" Value="{DynamicResource AppBarToggleButtonCheckedBackground}" />
+            </Style>
+            <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource AppBarToggleButtonCheckedForeground}" />
+            </Style>
+            <Style Selector="^:pointerover /template/ Border#PART_Border">
+                <Setter Property="Background" Value="{DynamicResource AppBarToggleButtonCheckedPointeroverBackground}" />
+            </Style>
+            <Style Selector="^:pressed /template/ Border#PART_Border">
+                <Setter Property="Background" Value="{DynamicResource AppBarToggleButtonCheckedPressedBackground}" />
+            </Style>
+            <Style Selector="^:disabled /template/ ContentPresenter#PART_IconPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource AppBarToggleButtonCheckedDisabledForeground}" />
+            </Style>
+        </Style>
+
+        <!--  IsCompact: hide label, use compact width  -->
+        <Style Selector="^[IsCompact=True]">
+            <Setter Property="Width" Value="{DynamicResource AppBarButtonCompactWidth}" />
+            <Style Selector="^ /template/ TextBlock#PART_Label">
+                <Setter Property="IsVisible" Value="False" />
+            </Style>
+        </Style>
+
+        <!--  LabelPosition=Collapsed: hide label, use compact width  -->
+        <Style Selector="^[LabelPosition=Collapsed]">
+            <Setter Property="Width" Value="{DynamicResource AppBarButtonCompactWidth}" />
+            <Style Selector="^ /template/ TextBlock#PART_Label">
+                <Setter Property="IsVisible" Value="False" />
+            </Style>
+        </Style>
+
+        <!--  LabelPosition=Right: horizontal layout, auto-width  -->
+        <Style Selector="^[LabelPosition=Right]">
+            <Setter Property="Width" Value="{x:Static x:Double.NaN}" />
+            <Setter Property="MinWidth" Value="{DynamicResource AppBarButtonCompactWidth}" />
+            <Style Selector="^ /template/ StackPanel#PART_LayoutRoot">
+                <Setter Property="Orientation" Value="Horizontal" />
+            </Style>
+            <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
+                <Setter Property="VerticalAlignment" Value="Center" />
+            </Style>
+            <Style Selector="^ /template/ TextBlock#PART_Label">
+                <Setter Property="VerticalAlignment" Value="Center" />
+            </Style>
+        </Style>
+
+        <!--  IsInOverflow: full-width horizontal layout for use inside overflow popup  -->
+        <Style Selector="^[IsInOverflow=True]">
+            <Setter Property="HorizontalContentAlignment" Value="Left" />
+            <Setter Property="Width" Value="{x:Static x:Double.NaN}" />
+            <Setter Property="MinHeight" Value="{DynamicResource AppBarButtonOverflowMinHeight}" />
+            <Setter Property="Padding" Value="{DynamicResource AppBarButtonOverflowPadding}" />
+            <Style Selector="^ /template/ StackPanel#PART_LayoutRoot">
+                <Setter Property="Orientation" Value="Horizontal" />
+            </Style>
+            <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
+                <Setter Property="VerticalAlignment" Value="Center" />
+            </Style>
+            <Style Selector="^ /template/ TextBlock#PART_Label">
+                <Setter Property="VerticalAlignment" Value="Center" />
+            </Style>
+        </Style>
+    </ControlTheme>
+
+    <!--  AppBarSeparator  -->
+    <ControlTheme x:Key="{x:Type AppBarSeparator}" TargetType="AppBarSeparator">
+        <Setter Property="Background" Value="{DynamicResource AppBarSeparatorBackground}" />
+        <Setter Property="Width" Value="{DynamicResource AppBarSeparatorWidth}" />
+        <Setter Property="MinHeight" Value="{DynamicResource AppBarSeparatorMinHeight}" />
+        <Setter Property="Margin" Value="{DynamicResource AppBarSeparatorMargin}" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="AppBarSeparator">
+                <Border
+                    Background="{TemplateBinding Background}"
+                    Width="{TemplateBinding Width}"
+                    MinHeight="{TemplateBinding MinHeight}" />
+            </ControlTemplate>
+        </Setter>
+
+        <!--  IsInOverflow: horizontal line separator  -->
+        <Style Selector="^[IsInOverflow=True]">
+            <Setter Property="HorizontalAlignment" Value="Stretch" />
+            <Setter Property="Width" Value="{x:Static x:Double.NaN}" />
+            <Setter Property="Height" Value="{DynamicResource AppBarSeparatorOverflowHeight}" />
+            <Setter Property="MinHeight" Value="0" />
+            <Setter Property="Margin" Value="{DynamicResource AppBarSeparatorOverflowMargin}" />
+        </Style>
+    </ControlTheme>
+
+    <!--  CommandBar  -->
+    <ControlTheme x:Key="{x:Type CommandBar}" TargetType="CommandBar">
+        <Setter Property="Background" Value="{DynamicResource CommandBarBackground}" />
+        <Setter Property="Foreground" Value="{DynamicResource CommandBarForeground}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource CommandBarBorderBrush}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource CommandBarBorderThickness}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource CommandBarCornerRadius}" />
+        <Setter Property="MinHeight" Value="{DynamicResource CommandBarMinHeight}" />
+        <Setter Property="Padding" Value="{DynamicResource CommandBarPadding}" />
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="CommandBar">
+                <Border
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    MinHeight="{TemplateBinding MinHeight}"
+                    Padding="{TemplateBinding Padding}">
+                    <Panel>
+                        <DockPanel>
+                            <!--  Overflow button (docked right)  -->
+                            <AppBarButton
+                                Name="PART_OverflowButton"
+                                DockPanel.Dock="Right"
+                                Icon="{DynamicResource CommandBarOverflowButtonGlyph}"
+                                IsCompact="True"
+                                IsVisible="{TemplateBinding IsOverflowButtonVisible}" />
+
+                            <!--  Custom content (docked left)  -->
+                            <ContentPresenter
+                                Name="PART_ContentPresenter"
+                                DockPanel.Dock="Left"
+                                Content="{TemplateBinding Content}"
+                                VerticalAlignment="Center" />
+
+                            <!--  Primary commands (fills remaining space, right-aligned)  -->
+                            <ItemsControl
+                                Name="PART_PrimaryCommands"
+                                ItemsSource="{Binding VisiblePrimaryCommands, RelativeSource={RelativeSource TemplatedParent}}"
+                                HorizontalAlignment="Right"
+                                VerticalAlignment="Stretch"
+                                ClipToBounds="True">
+                                <ItemsControl.ItemsPanel>
+                                    <ItemsPanelTemplate>
+                                        <StackPanel Orientation="Horizontal" Spacing="2" />
+                                    </ItemsPanelTemplate>
+                                </ItemsControl.ItemsPanel>
+                            </ItemsControl>
+                        </DockPanel>
+
+                        <!--  Overflow popup  -->
+                        <Popup
+                            Name="PART_OverflowPopup"
+                            IsOpen="{TemplateBinding IsOpen, Mode=TwoWay}"
+                            PlacementTarget="{Binding #PART_OverflowButton}"
+                            Placement="Bottom"
+                            IsLightDismissEnabled="True"
+                            WindowManagerAddShadowHint="False">
+                            <Border
+                                MinHeight="{DynamicResource CommandBarOverflowMinHeight}"
+                                MaxWidth="{DynamicResource CommandBarOverflowMaxWidth}"
+                                MaxHeight="{DynamicResource CommandBarOverflowMaxHeight}"
+                                Margin="{DynamicResource CommandBarOverflowMargin}"
+                                Padding="{DynamicResource CommandBarOverflowPadding}"
+                                Background="{DynamicResource CommandBarOverflowBackground}"
+                                BorderBrush="{DynamicResource CommandBarOverflowBorderBrush}"
+                                BorderThickness="{DynamicResource CommandBarBorderThickness}"
+                                BoxShadow="{DynamicResource CommandBarOverflowBoxShadow}"
+                                CornerRadius="{DynamicResource CommandBarOverflowCornerRadius}">
+
+                                <ItemsControl
+                                    ItemsSource="{Binding OverflowItems, RelativeSource={RelativeSource TemplatedParent}}">
+                                    <ItemsControl.ItemsPanel>
+                                        <ItemsPanelTemplate>
+                                            <StackPanel />
+                                        </ItemsPanelTemplate>
+                                    </ItemsControl.ItemsPanel>
+                                </ItemsControl>
+                            </Border>
+                        </Popup>
+                    </Panel>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+
+</ResourceDictionary>

src/Semi.Avalonia/Controls/ContentPage.axaml

@@ -0,0 +1,43 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Design.PreviewWith>
+        <ContentPage
+            Width="400"
+            Height="300"
+            Background="White">
+            <TextBlock
+                HorizontalAlignment="Center"
+                VerticalAlignment="Center"
+                Text="ContentPage" />
+        </ContentPage>
+    </Design.PreviewWith>
+
+    <ControlTheme x:Key="{x:Type ContentPage}" TargetType="ContentPage">
+        <Setter Property="Background" Value="{DynamicResource ContentPageBackground}" />
+        <Setter Property="Foreground" Value="{DynamicResource ContentPageForeground}" />
+        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+        <Setter Property="VerticalContentAlignment" Value="Stretch" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="ContentPage">
+                <Grid RowDefinitions="Auto,*,Auto" Background="{TemplateBinding Background}">
+                    <ContentPresenter
+                        Name="PART_TopCommandBar"
+                        Grid.Row="0"
+                        Content="{TemplateBinding TopCommandBar}" />
+                    <ContentPresenter
+                        Name="PART_ContentPresenter"
+                        Grid.Row="1"
+                        Content="{TemplateBinding Content}"
+                        ContentTemplate="{TemplateBinding ContentTemplate}"
+                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
+                    <ContentPresenter
+                        Name="PART_BottomCommandBar"
+                        Grid.Row="2"
+                        Content="{TemplateBinding BottomCommandBar}" />
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/DatePicker.axaml

@@ -2,9 +2,10 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <Design.PreviewWith>
-        <Border Padding="20">
+        <StackPanel Margin="20">
             <DatePickerPresenter />
-        </Border>
+            <DatePicker Width="500" />
+        </StackPanel>
     </Design.PreviewWith>
     <ControlTheme x:Key="{x:Type DatePickerPresenter}" TargetType="DatePickerPresenter">
         <Setter Property="Width" Value="296" />
@@ -141,6 +142,7 @@
         <Setter Property="HorizontalAlignment" Value="Left" />
         <Setter Property="VerticalAlignment" Value="Center" />
         <Setter Property="MinHeight" Value="{DynamicResource DateTimePickerButtonDefaultHeight}" />
+        <Setter Property="MinWidth" Value="296" />
         <Setter Property="Template">
             <ControlTemplate TargetType="DatePicker">
                 <DataValidationErrors>
@@ -152,8 +154,8 @@
                             Name="PART_FlyoutButton"
                             Grid.Column="0"
                             Grid.ColumnSpan="2"
-                            Width="298"
-                            MinWidth="298"
+                            MinWidth="{TemplateBinding MinWidth}"
+                            MaxWidth="{TemplateBinding MaxWidth}"
                             MinHeight="{TemplateBinding MinHeight}"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
@@ -259,7 +261,7 @@
             <Setter Property="Foreground" Value="{DynamicResource DateTimePickerButtonDisabledIconForeground}" />
         </Style>
 
-        <!--  Changes foreground for watermark text when SelectedDate is null  -->
+        <!--  Changes foreground for placeholder text when SelectedDate is null  -->
         <Style Selector="^:hasnodate /template/ Button#PART_FlyoutButton TextBlock">
             <Setter Property="Foreground" Value="{DynamicResource DateTimePickerEmptyForeground}" />
         </Style>

src/Semi.Avalonia/Controls/DrawerPage.axaml

@@ -0,0 +1,147 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Design.PreviewWith>
+        <DrawerPage Width="400" Height="300" />
+    </Design.PreviewWith>
+
+    <ControlTheme x:Key="{x:Type DrawerPage}" TargetType="DrawerPage">
+        <Setter Property="Background" Value="{DynamicResource DrawerPageBackground}" />
+        <Setter Property="Foreground" Value="{DynamicResource DrawerPageForeground}" />
+        <Setter Property="DrawerBackground" Value="{DynamicResource DrawerPageDrawerBackground}" />
+        <Setter Property="DrawerLength" Value="{DynamicResource DrawerPageDrawerLength}" />
+        <Setter Property="CompactDrawerLength" Value="{DynamicResource DrawerPageCompactDrawerLength}" />
+        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+        <Setter Property="VerticalContentAlignment" Value="Stretch" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="DrawerPage">
+                <Grid RowDefinitions="Auto,*" Background="{TemplateBinding Background}">
+
+                    <!--  Top bar with pane toggle button  -->
+                    <Border
+                        Name="PART_TopBar"
+                        Grid.Row="0"
+                        MinHeight="{DynamicResource DrawerPageTopBarMinHeight}"
+                        Padding="{DynamicResource DrawerPageTopBarPadding}"
+                        Background="{DynamicResource DrawerPageTopBarBackground}"
+                        BorderBrush="{DynamicResource DrawerPageTopBarBorderBrush}"
+                        BorderThickness="{DynamicResource DrawerPageTopBarBorderThickness}">
+                        <Grid ColumnDefinitions="Auto,Auto,*">
+                            <!--  Pane toggle button (hamburger)  -->
+                            <ToggleButton
+                                Name="PART_PaneButton"
+                                Grid.Column="0"
+                                Width="{DynamicResource DrawerPagePaneButtonSize}"
+                                Height="{DynamicResource DrawerPagePaneButtonSize}"
+                                Margin="{DynamicResource DrawerPagePaneButtonMargin}"
+                                VerticalAlignment="Center"
+                                Background="{DynamicResource DrawerPagePaneButtonBackground}"
+                                Foreground="{DynamicResource DrawerPagePaneButtonForeground}"
+                                IsChecked="{TemplateBinding IsOpen, Mode=TwoWay}">
+                                <PathIcon
+                                    Width="16"
+                                    Height="16"
+                                    Data="{DynamicResource DrawerPageMenuGlyph}"
+                                    Foreground="{DynamicResource DrawerPagePaneButtonForeground}" />
+                            </ToggleButton>
+
+                            <!--  Drawer icon (shown in top bar)  -->
+                            <ContentPresenter
+                                Name="PART_PaneIconPresenter"
+                                Grid.Column="1"
+                                VerticalAlignment="Center"
+                                Content="{TemplateBinding DrawerIcon}"
+                                ContentTemplate="{TemplateBinding DrawerIconTemplate}" />
+                        </Grid>
+                    </Border>
+
+                    <!--  Main area: SplitView + Backdrop  -->
+                    <Panel Grid.Row="1">
+                        <SplitView
+                            Name="PART_SplitView"
+                            CompactPaneLength="{TemplateBinding CompactDrawerLength}"
+                            DisplayMode="{TemplateBinding DisplayMode}"
+                            IsPaneOpen="{TemplateBinding IsOpen, Mode=TwoWay}"
+                            OpenPaneLength="{TemplateBinding DrawerLength}"
+                            PaneBackground="{TemplateBinding DrawerBackground}">
+                            <SplitView.Pane>
+                                <DockPanel>
+                                    <!--  Drawer header  -->
+                                    <ContentPresenter
+                                        Name="PART_DrawerHeader"
+                                        DockPanel.Dock="Top"
+                                        Background="{TemplateBinding DrawerHeaderBackground}"
+                                        Content="{TemplateBinding DrawerHeader}" />
+
+                                    <!--  Drawer footer  -->
+                                    <ContentPresenter
+                                        Name="PART_DrawerFooter"
+                                        DockPanel.Dock="Bottom"
+                                        Background="{TemplateBinding DrawerFooterBackground}"
+                                        Content="{TemplateBinding DrawerFooter}" />
+
+                                    <!--  Compact pane icon (compact mode)  -->
+                                    <ContentPresenter
+                                        Name="PART_CompactPaneIconPresenter"
+                                        DockPanel.Dock="Top"
+                                        IsVisible="False"
+                                        Content="{TemplateBinding DrawerIcon}"
+                                        ContentTemplate="{TemplateBinding DrawerIconTemplate}" />
+
+                                    <!--  Bottom pane icon  -->
+                                    <ContentPresenter
+                                        Name="PART_BottomPaneIconPresenter"
+                                        DockPanel.Dock="Bottom"
+                                        IsVisible="False" 
+                                        Content="{TemplateBinding DrawerIcon}"
+                                        ContentTemplate="{TemplateBinding DrawerIconTemplate}" />
+
+                                    <!--  Drawer main content  -->
+                                    <ContentPresenter
+                                        Name="PART_DrawerPresenter"
+                                        Content="{TemplateBinding Drawer}"
+                                        ContentTemplate="{TemplateBinding DrawerTemplate}" />
+                                </DockPanel>
+                            </SplitView.Pane>
+
+                            <!--  Main page content  -->
+                            <ContentPresenter
+                                Name="PART_ContentPresenter"
+                                Content="{TemplateBinding Content}"
+                                ContentTemplate="{TemplateBinding ContentTemplate}"
+                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
+                        </SplitView>
+
+                        <!--  Backdrop overlay (shown in overlay/flyout modes)  -->
+                        <Border
+                            Name="PART_Backdrop"
+                            Background="{TemplateBinding BackdropBrush}"
+                            IsHitTestVisible="False"
+                            IsVisible="False" />
+
+                        <!--  Compact pane toggle  -->
+                        <ToggleButton
+                            Name="PART_CompactPaneToggle"
+                            IsVisible="False" />
+                    </Panel>
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+
+        <!--  Pseudo-class: right-side drawer  -->
+        <Style Selector="^:placement-right /template/ SplitView#PART_SplitView">
+            <Setter Property="PanePlacement" Value="Right" />
+        </Style>
+
+        <!--  Pseudo-class: top drawer  -->
+        <Style Selector="^:placement-top /template/ SplitView#PART_SplitView">
+            <Setter Property="PanePlacement" Value="Top" />
+        </Style>
+
+        <!--  Pseudo-class: bottom drawer  -->
+        <Style Selector="^:placement-bottom /template/ SplitView#PART_SplitView">
+            <Setter Property="PanePlacement" Value="Bottom" />
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/EmbeddableControlRoot.axaml

@@ -10,7 +10,7 @@
                 <Panel>
                     <Border Name="PART_TransparencyFallback" IsHitTestVisible="False" />
                     <Border Background="{TemplateBinding Background}">
-                        <VisualLayerManager>
+                        <VisualLayerManager Name="PART_VisualLayerManager">
                             <ContentPresenter
                                 Name="PART_ContentPresenter"
                                 Margin="{TemplateBinding Padding}"

src/Semi.Avalonia/Controls/NavigationPage.axaml

@@ -0,0 +1,94 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Design.PreviewWith>
+        <NavigationPage Width="400" Height="300" />
+    </Design.PreviewWith>
+
+    <ControlTheme x:Key="{x:Type NavigationPage}" TargetType="NavigationPage">
+        <Setter Property="Background" Value="{DynamicResource NavigationPageBackground}" />
+        <Setter Property="Foreground" Value="{DynamicResource NavigationPageForeground}" />
+        <Setter Property="BarHeight" Value="{DynamicResource NavigationPageBarMinHeight}" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="NavigationPage">
+                <Grid RowDefinitions="Auto,*,Auto" Background="{TemplateBinding Background}">
+                    <!--  Top command bar  -->
+                    <ContentPresenter
+                        Name="PART_TopCommandBar"
+                        Grid.Row="0" />
+
+                    <!--  Content host (pages + navigation bar)  -->
+                    <Panel Name="PART_ContentHost" Grid.Row="1">
+                        <!--  Previous page (back animation target)  -->
+                        <ContentPresenter Name="PART_PageBackPresenter" />
+
+                        <!--  Current page  -->
+                        <ContentPresenter Name="PART_PagePresenter" />
+
+                        <!--  Modal back page  -->
+                        <ContentPresenter Name="PART_ModalBackPresenter" />
+
+                        <!--  Modal page  -->
+                        <ContentPresenter Name="PART_ModalPresenter" />
+
+                        <!--  Navigation bar (overlaid on content by default)  -->
+                        <Border
+                            Name="PART_NavigationBar"
+                            MinHeight="{TemplateBinding BarHeight}"
+                            Padding="{DynamicResource NavigationPageBarPadding}"
+                            VerticalAlignment="Top"
+                            Background="{DynamicResource NavigationPageBarBackground}"
+                            BorderBrush="{DynamicResource NavigationPageBarBorderBrush}"
+                            BorderThickness="{DynamicResource NavigationPageBarBorderThickness}">
+                            <Grid ColumnDefinitions="Auto,*,Auto">
+                                <Button
+                                    Name="PART_BackButton"
+                                    Grid.Column="0"
+                                    MinHeight="{DynamicResource NavigationPageBarMinHeight}"
+                                    MinWidth="{DynamicResource NavigationPageBarMinHeight}"
+                                    Padding="8"
+                                    VerticalAlignment="Center"
+                                    IsVisible="{TemplateBinding IsBackButtonEffectivelyVisible}"
+                                    Background="{DynamicResource NavigationPageBackButtonBackground}"
+                                    Theme="{StaticResource BorderlessButton}">
+                                    <Panel Background="Transparent">
+                                        <PathIcon
+                                            Theme="{StaticResource InnerPathIcon}"
+                                            Classes="Large"
+                                            Data="{DynamicResource NavigationPageBackButtonGlyph}"
+                                            Foreground="{DynamicResource NavigationPageBackButtonForeground}"
+                                            IsVisible="{Binding CurrentPage?.(NavigationPage.BackButtonContent), RelativeSource={RelativeSource TemplatedParent}, Converter={x:Static ObjectConverters.IsNull}, FallbackValue=False}" />
+                                        <ContentPresenter
+                                            Content="{Binding CurrentPage?.(NavigationPage.BackButtonContent), RelativeSource={RelativeSource TemplatedParent}, FallbackValue={x:Null}}"
+                                            IsVisible="{Binding CurrentPage?.(NavigationPage.BackButtonContent), RelativeSource={RelativeSource TemplatedParent}, Converter={x:Static ObjectConverters.IsNotNull}, FallbackValue=False}"
+                                            VerticalAlignment="Center"
+                                            HorizontalAlignment="Center" />
+                                    </Panel>
+                                </Button>
+                                <ContentPresenter
+                                    Grid.Column="1"
+                                    HorizontalAlignment="Center"
+                                    VerticalAlignment="Center" />
+                            </Grid>
+                        </Border>
+                    </Panel>
+
+                    <!--  Bottom command bar  -->
+                    <ContentPresenter
+                        Name="PART_BottomCommandBar"
+                        Grid.Row="2" />
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+
+        <!--  Navigation bar is inset (content flows under the bar)  -->
+        <Style Selector="^:nav-bar-inset /template/ Border#PART_NavigationBar">
+            <Setter Property="BorderThickness" Value="0" />
+        </Style>
+
+        <!--  Compact navigation bar  -->
+        <Style Selector="^:nav-bar-compact /template/ Border#PART_NavigationBar">
+            <Setter Property="MinHeight" Value="0" />
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/NumericUpDown.axaml

@@ -52,6 +52,15 @@
         <Style Selector="^.Small">
             <Setter Property="MinHeight" Value="{DynamicResource NumericUpDownSmallHeight}" />
         </Style>
+        
+        <Style Selector="^.Split">
+            <Style Selector="^ /template/ ButtonSpinner#PART_Spinner">
+                <Setter Property="Theme" Value="{DynamicResource SplitButtonSpinner}" />
+            </Style>
+            <Style Selector="^ /template/ TextBox#PART_TextBox">
+                <Setter Property="CornerRadius" Value="0" />
+            </Style>
+        </Style>
 
         <Style Selector="^:error">
             <Style Selector="^ /template/ TextBox#PART_TextBox">

src/Semi.Avalonia/Controls/PipsPager.axaml

@@ -0,0 +1,130 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    
+    <Design.PreviewWith>
+        <StackPanel Margin="20" >
+            <PipsPager NumberOfPages="10" />
+        </StackPanel>
+    </Design.PreviewWith>
+    
+    <ControlTheme x:Key="PipsPagerButton" TargetType="Button">
+        <Setter Property="Width" Value="24" />
+        <Setter Property="Height" Value="24" />
+        <Setter Property="Foreground" Value="{DynamicResource PipsPagerButtonForeground}" />
+        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="Button">
+                <PathIcon
+                    Theme="{DynamicResource InnerPathIcon}"
+                    Width="{TemplateBinding Width}"
+                    Height="{TemplateBinding Height}"
+                    Data="{TemplateBinding Content}"
+                    Foreground="{TemplateBinding Foreground}" />
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^:pointerover /template/ PathIcon">
+            <Setter Property="Foreground" Value="{DynamicResource PipsPagerButtonPointeroverForeground}" />
+        </Style>
+    </ControlTheme>
+    
+    <ControlTheme x:Key="PipsPagerIndicatorDotListBoxItem" TargetType="ListBoxItem">
+        <Setter Property="Foreground" Value="{DynamicResource PipsPagerIndicatorForeground}" />
+        <Setter Property="Margin" Value="4" />
+        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="ListBoxItem">
+                <Ellipse
+                    Name="Container"
+                    Width="{DynamicResource CarouselIndicatorDotWidth}"
+                    Height="{DynamicResource CarouselIndicatorDotHeight}"
+                    Fill="{TemplateBinding Foreground}" />
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^:pointerover">
+            <Setter Property="Foreground" Value="{DynamicResource PipsPagerIndicatorPointeroverForeground}" />
+        </Style>
+        <Style Selector="^:pressed">
+            <Setter Property="Foreground" Value="{DynamicResource PipsPagerIndicatorPressedForeground}" />
+        </Style>
+        <Style Selector="^:selected">
+            <Setter Property="Foreground" Value="{DynamicResource PipsPagerIndicatorSelectedForeground}" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type PipsPager}" TargetType="PipsPager">
+        <Setter Property="IsTabStop" Value="False" />
+        <Setter Property="PreviousButtonStyle" Value="{StaticResource PipsPagerButton}" />
+        <Setter Property="NextButtonStyle" Value="{StaticResource PipsPagerButton}" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <StackPanel
+                    Name="PART_RootPanel"
+                    Orientation="{TemplateBinding Orientation}"
+                    Background="{TemplateBinding Background}"
+                    ClipToBounds="False">
+                    <Button
+                        Name="PART_PreviousButton"
+                        Theme="{TemplateBinding PreviousButtonStyle}"
+                        IsVisible="{TemplateBinding IsPreviousButtonVisible}"
+                        Foreground="{DynamicResource PipsPagerButtonForeground}"
+                        Content="{StaticResource SemiIconSmallTriangleLeft}" />
+
+                    <ListBox
+                        Name="PART_PipsPagerList"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center"
+                        ScrollViewer.HorizontalScrollBarVisibility="Hidden"
+                        ScrollViewer.VerticalScrollBarVisibility="Hidden"
+                        ItemsSource="{Binding TemplateSettings.Pips, RelativeSource={RelativeSource TemplatedParent}}"
+                        SelectedIndex="{TemplateBinding SelectedPageIndex, Mode=TwoWay}"
+                        AutoScrollToSelectedItem="False"
+                        ItemContainerTheme="{StaticResource PipsPagerIndicatorDotListBoxItem}">
+                        <ListBox.ItemsPanel>
+                            <ItemsPanelTemplate>
+                                <StackPanel Orientation="{Binding $parent[PipsPager].Orientation}" />
+                            </ItemsPanelTemplate>
+                        </ListBox.ItemsPanel>
+                    </ListBox>
+
+                    <Button
+                        Name="PART_NextButton"
+                        Theme="{TemplateBinding NextButtonStyle}"
+                        Foreground="{DynamicResource PipsPagerButtonForeground}"
+                        Content="{StaticResource SemiIconSmallTriangleRight}"
+                        IsVisible="{TemplateBinding IsNextButtonVisible}" />
+                </StackPanel>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^:horizontal /template/ StackPanel#PART_RootPanel">
+            <Setter Property="Orientation" Value="Horizontal" />
+        </Style>
+
+        <Style Selector="^:vertical">
+
+            <Style Selector="^ /template/ StackPanel#PART_RootPanel">
+                <Setter Property="Orientation" Value="Vertical" />
+                <Setter Property="HorizontalAlignment" Value="Center" />
+            </Style>
+
+            <Style Selector="^ /template/ Button#PART_PreviousButton">
+                <Setter Property="Content" Value="{DynamicResource SemiIconSmallTriangleTop}" />
+            </Style>
+            <Style Selector="^ /template/ Button#PART_NextButton">
+                <Setter Property="Content" Value="{DynamicResource SemiIconSmallTriangleDown}" />
+            </Style>
+        </Style>
+
+        <Style Selector="^:first-page /template/ Button#PART_PreviousButton">
+            <Setter Property="Opacity" Value="0" />
+            <Setter Property="IsHitTestVisible" Value="False" />
+        </Style>
+
+        <Style Selector="^:last-page /template/ Button#PART_NextButton">
+            <Setter Property="Opacity" Value="0" />
+            <Setter Property="IsHitTestVisible" Value="False" />
+        </Style>
+    </ControlTheme>
+
+</ResourceDictionary>

src/Semi.Avalonia/Controls/Popup.axaml

@@ -13,7 +13,7 @@
                 <LayoutTransformControl LayoutTransform="{TemplateBinding Transform}">
                     <Panel>
                         <Border Name="PART_TransparencyFallback" IsHitTestVisible="False" />
-                        <VisualLayerManager IsPopup="True">
+                        <VisualLayerManager Name="PART_VisualLayerManager">
                             <LayoutTransformControl Name="PART_LayoutTransform">
                                 <ContentPresenter
                                     Name="PART_ContentPresenter"
@@ -37,7 +37,7 @@
         <Setter Property="Template">
             <ControlTemplate>
                 <LayoutTransformControl LayoutTransform="{TemplateBinding Transform}">
-                    <VisualLayerManager IsPopup="True">
+                    <VisualLayerManager Name="PART_VisualLayerManager">
                         <LayoutTransformControl Name="PART_LayoutTransform">
                             <ContentPresenter
                                 Name="PART_ContentPresenter"

src/Semi.Avalonia/Controls/ScrollViewer.axaml

@@ -53,6 +53,7 @@
                                 MinWidth="{StaticResource ScrollBarThickness}"
                                 VerticalAlignment="Center"
                                 Focusable="False"
+                                AutomationProperties.Name="Column left"
                                 Theme="{StaticResource ScrollBarRepeatButton}">
                                 <PathIcon
                                     Theme="{StaticResource InnerPathIcon}"
@@ -75,6 +76,7 @@
                                         VerticalAlignment="Stretch"
                                         CornerRadius="0"
                                         Focusable="False"
+                                        AutomationProperties.Name="Page left"
                                         Theme="{StaticResource ScrollBarRepeatButton}" />
                                 </Track.DecreaseButton>
                                 <Track.IncreaseButton>
@@ -85,9 +87,10 @@
                                         VerticalAlignment="Stretch"
                                         CornerRadius="0"
                                         Focusable="False"
+                                        AutomationProperties.Name="Page right"
                                         Theme="{StaticResource ScrollBarRepeatButton}" />
                                 </Track.IncreaseButton>
-                                <Thumb Name="thumb" />
+                                <Thumb Name="thumb" AutomationProperties.Name="Position" />
                             </Track>
                             <RepeatButton
                                 Name="PART_LineDownButton"
@@ -96,6 +99,7 @@
                                 VerticalAlignment="Center"
                                 VerticalContentAlignment="Center"
                                 Focusable="False"
+                                AutomationProperties.Name="Column right"
                                 Theme="{DynamicResource ScrollBarRepeatButton}">
                                 <PathIcon
                                     Theme="{DynamicResource InnerPathIcon}"
@@ -123,6 +127,7 @@
                                 HorizontalContentAlignment="Center"
                                 VerticalContentAlignment="Center"
                                 Focusable="False"
+                                AutomationProperties.Name="Line up"
                                 Theme="{StaticResource ScrollBarRepeatButton}">
                                 <PathIcon
                                     Theme="{StaticResource InnerPathIcon}"
@@ -146,6 +151,7 @@
                                         VerticalAlignment="Stretch"
                                         CornerRadius="0"
                                         Focusable="False"
+                                        AutomationProperties.Name="Page up"
                                         Theme="{StaticResource ScrollBarRepeatButton}" />
                                 </Track.DecreaseButton>
                                 <Track.IncreaseButton>
@@ -156,9 +162,10 @@
                                         VerticalAlignment="Stretch"
                                         CornerRadius="0"
                                         Focusable="False"
+                                        AutomationProperties.Name="Page down"
                                         Theme="{StaticResource ScrollBarRepeatButton}" />
                                 </Track.IncreaseButton>
-                                <Thumb Name="thumb" />
+                                <Thumb Name="thumb" AutomationProperties.Name="Position" />
                             </Track>
                             <RepeatButton
                                 Name="PART_LineDownButton"
@@ -167,6 +174,7 @@
                                 HorizontalContentAlignment="Center"
                                 VerticalContentAlignment="Center"
                                 Focusable="False"
+                                AutomationProperties.Name="Line down"
                                 Theme="{StaticResource ScrollBarRepeatButton}">
                                 <PathIcon
                                     Theme="{StaticResource InnerPathIcon}"

src/Semi.Avalonia/Controls/SelectableTextBlock.axaml

@@ -2,7 +2,10 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
-    <MenuFlyout x:Key="SelectableTextBlockContextFlyout" Placement="Bottom">
+    <MenuFlyout
+        x:Key="SelectableTextBlockContextFlyout"
+        ShowMode="{OnFormFactor Desktop=Standard, Mobile=Transient}"
+        Placement="Bottom">
         <MenuItem
             Command="{Binding $parent[SelectableTextBlock].Copy}"
             Header="{DynamicResource STRING_MENU_COPY}"

src/Semi.Avalonia/Controls/Slider.axaml

@@ -92,11 +92,12 @@
                                 VerticalAlignment="Bottom"
                                 Fill="{DynamicResource SliderTickForeground}"
                                 IsVisible="False"
-                                Maximum="{TemplateBinding Slider.Maximum}"
-                                Minimum="{TemplateBinding Slider.Minimum}"
-                                Orientation="{TemplateBinding Slider.Orientation}"
+                                Maximum="{TemplateBinding Maximum}"
+                                Minimum="{TemplateBinding Minimum}"
+                                Orientation="{TemplateBinding Orientation}"
                                 Placement="Top"
-                                TickFrequency="{TemplateBinding Slider.TickFrequency}"
+                                IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
+                                TickFrequency="{TemplateBinding TickFrequency}"
                                 Ticks="{TemplateBinding Ticks}" />
                             <TickBar
                                 Name="BottomTickBar"
@@ -106,11 +107,12 @@
                                 VerticalAlignment="Top"
                                 Fill="{DynamicResource SliderTickForeground}"
                                 IsVisible="False"
-                                Maximum="{TemplateBinding Slider.Maximum}"
-                                Minimum="{TemplateBinding Slider.Minimum}"
-                                Orientation="{TemplateBinding Slider.Orientation}"
+                                Maximum="{TemplateBinding Maximum}"
+                                Minimum="{TemplateBinding Minimum}"
+                                Orientation="{TemplateBinding Orientation}"
                                 Placement="Bottom"
-                                TickFrequency="{TemplateBinding Slider.TickFrequency}"
+                                IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
+                                TickFrequency="{TemplateBinding TickFrequency}"
                                 Ticks="{TemplateBinding Ticks}" />
                             <Track
                                 Name="PART_Track"
@@ -169,11 +171,12 @@
                                 HorizontalAlignment="Right"
                                 Fill="{DynamicResource SliderTickForeground}"
                                 IsVisible="False"
-                                Maximum="{TemplateBinding Slider.Maximum}"
-                                Minimum="{TemplateBinding Slider.Minimum}"
-                                Orientation="{TemplateBinding Slider.Orientation}"
+                                Maximum="{TemplateBinding Maximum}"
+                                Minimum="{TemplateBinding Minimum}"
+                                Orientation="{TemplateBinding Orientation}"
                                 Placement="Left"
-                                TickFrequency="{TemplateBinding Slider.TickFrequency}"
+                                IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
+                                TickFrequency="{TemplateBinding TickFrequency}"
                                 Ticks="{TemplateBinding Ticks}" />
                             <TickBar
                                 Name="RightTickBar"
@@ -183,11 +186,12 @@
                                 HorizontalAlignment="Left"
                                 Fill="{DynamicResource SliderTickForeground}"
                                 IsVisible="False"
-                                Maximum="{TemplateBinding Slider.Maximum}"
-                                Minimum="{TemplateBinding Slider.Minimum}"
-                                Orientation="{TemplateBinding Slider.Orientation}"
+                                Maximum="{TemplateBinding Maximum}"
+                                Minimum="{TemplateBinding Minimum}"
+                                Orientation="{TemplateBinding Orientation}"
                                 Placement="Right"
-                                TickFrequency="{TemplateBinding Slider.TickFrequency}"
+                                IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
+                                TickFrequency="{TemplateBinding TickFrequency}"
                                 Ticks="{TemplateBinding Ticks}" />
                             <Track
                                 Name="PART_Track"

src/Semi.Avalonia/Controls/SplitView.axaml

@@ -52,7 +52,7 @@
             <Style Selector="^:overlay">
                 <Style Selector="^ /template/ Panel#PART_PaneRoot">
                     <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
-                    <Setter Property="Grid.ColumnSpan" Value="1" />
+                    <Setter Property="Grid.ColumnSpan" Value="2" />
                     <Setter Property="Grid.Column" Value="0" />
                 </Style>
                 <Style Selector="^ /template/ Panel#ContentRoot">
@@ -75,8 +75,7 @@
 
             <Style Selector="^:compactoverlay">
                 <Style Selector="^ /template/ Panel#PART_PaneRoot">
-                    <!--  ColumnSpan should be 2  -->
-                    <Setter Property="Grid.ColumnSpan" Value="1" />
+                    <Setter Property="Grid.ColumnSpan" Value="2" />
                     <Setter Property="Grid.Column" Value="0" />
                     <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
                 </Style>

src/Semi.Avalonia/Controls/TabControl.axaml

@@ -36,13 +36,19 @@
                                 ItemsPanel="{TemplateBinding ItemsPanel}" />
                             <Border Name="PART_BorderSeparator" />
                         </Panel>
-                        <ContentPresenter
-                            Name="PART_SelectedContentHost"
-                            Margin="{TemplateBinding Padding}"
-                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                            Content="{TemplateBinding SelectedContent}"
-                            ContentTemplate="{TemplateBinding SelectedContentTemplate}" />
+                        <Panel ClipToBounds="True">
+                            <ContentPresenter
+                                Name="PART_SelectedContentHost2"
+                                Margin="{TemplateBinding Padding}"
+                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                IsVisible="False" />
+                            <ContentPresenter
+                                Name="PART_SelectedContentHost"
+                                Margin="{TemplateBinding Padding}"
+                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
+                        </Panel>
                     </DockPanel>
                 </Border>
             </ControlTemplate>
@@ -149,13 +155,19 @@
                                 Name="PART_ItemsPresenter"
                                 ItemsPanel="{TemplateBinding ItemsPanel}" />
                         </Panel>
-                        <ContentPresenter
-                            Name="PART_SelectedContentHost"
-                            Margin="{TemplateBinding Padding}"
-                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                            Content="{TemplateBinding SelectedContent}"
-                            ContentTemplate="{TemplateBinding SelectedContentTemplate}" />
+                        <Panel ClipToBounds="True">
+                            <ContentPresenter
+                                Name="PART_SelectedContentHost2"
+                                Margin="{TemplateBinding Padding}"
+                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                IsVisible="False" />
+                            <ContentPresenter
+                                Name="PART_SelectedContentHost"
+                                Margin="{TemplateBinding Padding}"
+                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
+                        </Panel>
                     </DockPanel>
                 </Border>
             </ControlTemplate>
@@ -200,13 +212,19 @@
                             </ScrollViewer>
                             <Border Name="PART_BorderSeparator" />
                         </Panel>
-                        <ContentPresenter
-                            Name="PART_SelectedContentHost"
-                            Margin="{TemplateBinding Padding}"
-                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                            Content="{TemplateBinding SelectedContent}"
-                            ContentTemplate="{TemplateBinding SelectedContentTemplate}" />
+                        <Panel ClipToBounds="True">
+                            <ContentPresenter
+                                Name="PART_SelectedContentHost2"
+                                Margin="{TemplateBinding Padding}"
+                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                IsVisible="False" />
+                            <ContentPresenter
+                                Name="PART_SelectedContentHost"
+                                Margin="{TemplateBinding Padding}"
+                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
+                        </Panel>
                     </DockPanel>
                 </Border>
             </ControlTemplate>
@@ -335,13 +353,19 @@
                                     ItemsPanel="{TemplateBinding ItemsPanel}" />
                             </ScrollViewer>
                         </Panel>
-                        <ContentPresenter
-                            Name="PART_SelectedContentHost"
-                            Margin="{TemplateBinding Padding}"
-                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                            Content="{TemplateBinding SelectedContent}"
-                            ContentTemplate="{TemplateBinding SelectedContentTemplate}" />
+                        <Panel ClipToBounds="True">
+                            <ContentPresenter
+                                Name="PART_SelectedContentHost2"
+                                Margin="{TemplateBinding Padding}"
+                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                IsVisible="False" />
+                            <ContentPresenter
+                                Name="PART_SelectedContentHost"
+                                Margin="{TemplateBinding Padding}"
+                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
+                        </Panel>
                     </DockPanel>
                 </Border>
             </ControlTemplate>

src/Semi.Avalonia/Controls/TabItem.axaml

@@ -6,16 +6,12 @@
             Width="400"
             Height="400"
             Margin="20">
+            <TabItem Theme="{DynamicResource CardTabItem}" Header="文档" Icon="{StaticResource SemiIconFile}" />
             <TabControl TabStripPlacement="Top" Theme="{DynamicResource LineTabControl}">
-                <TabItem Header="文档">
-                    <TextBlock Text="Content1" />
-                </TabItem>
-                <TabItem Header="快速起步">
-                    <TextBlock Text="Content2" />
-                </TabItem>
-                <TabItem Header="帮助" IsSelected="True">
-                    <TextBlock Text="Content3" />
-                </TabItem>
+                <TabItem Content="Hello 1" Header="文档" Icon="{StaticResource SemiIconFile}" />
+                <TabItem Content="Hello 2" Header="快速起步" Icon="{StaticResource SemiIconGlobe}" />
+                <TabItem Content="Hello 4" Header="无效" Icon="{StaticResource SemiIconClear}" IsEnabled="False" />
+                <TabItem Content="Hello 3" Header="帮助" Icon="{StaticResource SemiIconHelpCircle}" />
             </TabControl>
         </StackPanel>
     </Design.PreviewWith>
@@ -25,20 +21,39 @@
         <Setter Property="Background" Value="{DynamicResource TabItemLinePipeBackground}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="TabItem">
-                <ContentPresenter
-                    Name="PART_HeaderPresenter"
+                <Border
+                    Name="PART_RootBorder"
                     Padding="{TemplateBinding Padding}"
-                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
-                    Content="{TemplateBinding Header}"
-                    ContentTemplate="{TemplateBinding HeaderTemplate}"
-                    CornerRadius="{TemplateBinding CornerRadius}"
-                    FontFamily="{TemplateBinding FontFamily}"
-                    FontWeight="{TemplateBinding FontWeight}"
-                    Foreground="{TemplateBinding Foreground}" />
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <DockPanel HorizontalSpacing="{DynamicResource TabItemIconHeaderSpacing}">
+                        <ContentPresenter
+                            Name="PART_IconPresenter"
+                            DockPanel.Dock="Left"
+                            Content="{TemplateBinding Icon}"
+                            ContentTemplate="{TemplateBinding IconTemplate}"
+                            IsVisible="{Binding $self.Content, Converter={x:Static ObjectConverters.IsNotNull}}">
+                            <ContentPresenter.DataTemplates>
+                                <DataTemplate DataType="Geometry">
+                                    <PathIcon
+                                        Theme="{StaticResource InnerPathIcon}"
+                                        Data="{Binding}" />
+                                </DataTemplate>
+                            </ContentPresenter.DataTemplates>
+                        </ContentPresenter>
+                        <ContentPresenter
+                            Name="PART_HeaderPresenter"
+                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                            Content="{TemplateBinding Header}"
+                            ContentTemplate="{TemplateBinding HeaderTemplate}"
+                            FontFamily="{TemplateBinding FontFamily}"
+                            FontWeight="{TemplateBinding FontWeight}"
+                            Foreground="{TemplateBinding Foreground}" />
+                    </DockPanel>
+                </Border>
             </ControlTemplate>
         </Setter>
 
@@ -46,17 +61,31 @@
             <Setter Property="RecognizesAccessKey" Value="True" />
         </Style>
 
-        <Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter">
-            <Setter Property="FontWeight" Value="{DynamicResource TabItemSelectedFontWeight}" />
-            <Setter Property="Foreground" Value="{DynamicResource TabItemLineHeaderSelectedForeground}" />
+        <Style Selector="^:selected">
+            <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
+                <Setter Property="FontWeight" Value="{DynamicResource TabItemSelectedFontWeight}" />
+                <Setter Property="Foreground" Value="{DynamicResource TabItemLineHeaderSelectedForeground}" />
+            </Style>
+            <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource TabItemIconSelectedForeground}" />
+            </Style>
         </Style>
 
         <Style Selector="^:not(:selected)">
             <Setter Property="Cursor" Value="Hand" />
-            <Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource TabItemLineHeaderPointeroverForeground}" />
+            <Style Selector="^:pointerover">
+                <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter,^ /template/ ContentPresenter#PART_IconPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource TabItemLineHeaderPointeroverForeground}" />
+                </Style>
             </Style>
         </Style>
+
+        <Style Selector="^:disabled">
+            <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter,^ /template/ ContentPresenter#PART_IconPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource TabItemHeaderDisabledForeground}" />
+            </Style>
+        </Style>
+
     </ControlTheme>
 
     <ControlTheme
@@ -65,15 +94,15 @@
         TargetType="TabItem">
         <Setter Property="Padding" Value="8 4" />
 
-        <Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter">
+        <Style Selector="^:selected /template/ Border#PART_RootBorder">
             <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipeSelectedBackground}" />
         </Style>
 
         <Style Selector="^:not(:selected)">
-            <Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter">
+            <Style Selector="^:pointerover /template/ Border#PART_RootBorder">
                 <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipePointeroverBorderBrush}" />
             </Style>
-            <Style Selector="^:pressed /template/ ContentPresenter#PART_HeaderPresenter">
+            <Style Selector="^:pressed /template/ Border#PART_RootBorder">
                 <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipePressedBorderBrush}" />
             </Style>
         </Style>
@@ -98,27 +127,27 @@
         x:Key="LineTabItem"
         BasedOn="{StaticResource BaseTabItem}"
         TargetType="TabItem">
-        <Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter">
+        <Style Selector="^:selected /template/ Border#PART_RootBorder">
             <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipeSelectedBackground}" />
         </Style>
         <Style Selector="^[TabStripPlacement=Left], ^[TabStripPlacement=Right]">
-            <Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter">
+            <Style Selector="^:selected /template/ Border#PART_RootBorder">
                 <Setter Property="Background" Value="{DynamicResource TabItemLineHeaderSelectedBackground}" />
             </Style>
         </Style>
 
         <Style Selector="^:not(:selected)">
-            <Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter">
+            <Style Selector="^:pointerover /template/ Border#PART_RootBorder">
                 <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipePointeroverBorderBrush}" />
             </Style>
-            <Style Selector="^:pressed /template/ ContentPresenter#PART_HeaderPresenter">
+            <Style Selector="^:pressed /template/ Border#PART_RootBorder">
                 <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipePressedBorderBrush}" />
             </Style>
             <Style Selector="^[TabStripPlacement=Left], ^[TabStripPlacement=Right]">
-                <Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter">
+                <Style Selector="^:pointerover /template/ Border#PART_RootBorder">
                     <Setter Property="Background" Value="{DynamicResource TabItemLineHeaderPointeroverBackground}" />
                 </Style>
-                <Style Selector="^:pressed /template/ ContentPresenter#PART_HeaderPresenter">
+                <Style Selector="^:pressed /template/ Border#PART_RootBorder">
                     <Setter Property="Background" Value="{DynamicResource TabItemLineHeaderPressedBackground}" />
                 </Style>
             </Style>
@@ -150,15 +179,15 @@
         TargetType="TabItem">
         <Setter Property="BorderBrush" Value="{DynamicResource TabControlSeparatorBorderBrush}" />
 
-        <Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter">
+        <Style Selector="^:selected /template/ Border#PART_RootBorder">
             <Setter Property="Background" Value="{DynamicResource TabItemCardHeaderSelectedBackground}" />
         </Style>
 
         <Style Selector="^:not(:selected)">
-            <Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter">
+            <Style Selector="^:pointerover /template/ Border#PART_RootBorder">
                 <Setter Property="Background" Value="{DynamicResource TabItemCardHeaderPointeroverBackground}" />
             </Style>
-            <Style Selector="^:pressed /template/ ContentPresenter#PART_HeaderPresenter">
+            <Style Selector="^:pressed /template/ Border#PART_RootBorder">
                 <Setter Property="Background" Value="{DynamicResource TabItemCardHeaderPressedBackground}" />
             </Style>
         </Style>
@@ -207,16 +236,20 @@
         TargetType="TabItem">
         <Setter Property="CornerRadius" Value="{DynamicResource SemiBorderRadiusSmall}" />
 
-        <Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter">
-            <Setter Property="Foreground" Value="{DynamicResource TabItemButtonHeaderSelectedForeground}" />
-            <Setter Property="Background" Value="{DynamicResource TabItemButtonHeaderSelectedBackground}" />
+        <Style Selector="^:selected">
+            <Style Selector="^ /template/ Border#PART_RootBorder">
+                <Setter Property="Background" Value="{DynamicResource TabItemButtonHeaderSelectedBackground}" />
+            </Style>
+            <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource TabItemButtonHeaderSelectedForeground}" />
+            </Style>
         </Style>
 
         <Style Selector="^:not(:selected)">
-            <Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter">
+            <Style Selector="^:pointerover /template/ Border#PART_RootBorder">
                 <Setter Property="Background" Value="{DynamicResource TabItemButtonHeaderPointeroverBackground}" />
             </Style>
-            <Style Selector="^:pressed /template/ ContentPresenter#PART_HeaderPresenter">
+            <Style Selector="^:pressed /template/ Border#PART_RootBorder">
                 <Setter Property="Background" Value="{DynamicResource TabItemButtonHeaderPressedBackground}" />
             </Style>
         </Style>

src/Semi.Avalonia/Controls/TabbedPage.axaml

@@ -0,0 +1,41 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Design.PreviewWith>
+        <TabbedPage Width="400" Height="300" />
+    </Design.PreviewWith>
+
+    <ControlTheme x:Key="{x:Type TabbedPage}" TargetType="TabbedPage">
+        <Setter Property="Template">
+            <ControlTemplate TargetType="TabbedPage">
+                <TabControl
+                    Name="PART_TabControl"
+                    Background="{TemplateBinding Background}"
+                    Theme="{StaticResource LineTabControl}"
+                    ItemsSource="{TemplateBinding Pages}" />
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+    <ControlTheme x:Key="CardTabbedPage" TargetType="TabbedPage">
+        <Setter Property="Template">
+            <ControlTemplate TargetType="TabbedPage">
+                <TabControl
+                    Name="PART_TabControl"
+                    Background="{TemplateBinding Background}"
+                    Theme="{StaticResource CardTabControl}"
+                    ItemsSource="{TemplateBinding Pages}" />
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+    <ControlTheme x:Key="ButtonTabbedPage" TargetType="TabbedPage">
+        <Setter Property="Template">
+            <ControlTemplate TargetType="TabbedPage">
+                <TabControl
+                    Name="PART_TabControl"
+                    Background="{TemplateBinding Background}"
+                    Theme="{StaticResource ButtonTabControl}"
+                    ItemsSource="{TemplateBinding Pages}" />
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/TextBox.axaml

@@ -1,7 +1,10 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <MenuFlyout x:Key="DefaultTextBoxContextFlyout" Placement="Bottom">
+    <MenuFlyout
+        x:Key="DefaultTextBoxContextFlyout"
+        ShowMode="{OnFormFactor Desktop=Standard, Mobile=Transient}"
+        Placement="Bottom">
         <MenuItem
             Command="{Binding $parent[TextBox].Cut}"
             Header="{DynamicResource STRING_MENU_CUT}"
@@ -64,7 +67,7 @@
                                 VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
                                 <Panel>
                                     <TextBlock
-                                        Name="PART_Watermark"
+                                        Name="PART_Placeholder"
                                         HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                         VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                         Foreground="{TemplateBinding PlaceholderForeground}"
@@ -298,7 +301,7 @@
                                 VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
                                 <Panel>
                                     <TextBlock
-                                        Name="PART_Watermark"
+                                        Name="PART_Placeholder"
                                         HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                         VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                         Opacity="0.5"
@@ -520,7 +523,7 @@
                             VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
                             <Panel>
                                 <TextBlock
-                                    Name="PART_Watermark"
+                                    Name="PART_Placeholder"
                                     HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                     VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                     Opacity="0.5"

src/Semi.Avalonia/Controls/TimePicker.axaml

@@ -2,9 +2,10 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <Design.PreviewWith>
-        <Border Padding="20">
+        <StackPanel Margin="20">
             <TimePickerPresenter />
-        </Border>
+            <TimePicker UseSeconds="True" Width="500" />
+        </StackPanel>
     </Design.PreviewWith>
     <ControlTheme x:Key="{x:Type TimePickerPresenter}" TargetType="TimePickerPresenter">
         <Setter Property="Width" Value="242" />
@@ -163,6 +164,7 @@
         <Setter Property="HorizontalAlignment" Value="Left" />
         <Setter Property="VerticalAlignment" Value="Center" />
         <Setter Property="MinHeight" Value="{DynamicResource DateTimePickerButtonDefaultHeight}" />
+        <Setter Property="MinWidth" Value="242" />
         <Setter Property="Template">
             <ControlTemplate>
                 <DataValidationErrors>
@@ -174,8 +176,8 @@
                             Name="PART_FlyoutButton"
                             Grid.Column="0"
                             Grid.ColumnSpan="2"
-                            Width="242"
-                            MinWidth="242"
+                            MinWidth="{TemplateBinding MinWidth}"
+                            MaxWidth="{TemplateBinding MaxWidth}"
                             MinHeight="{TemplateBinding MinHeight}"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"

src/Semi.Avalonia/Controls/TitleBar.axaml

@@ -1,51 +0,0 @@
-<ResourceDictionary
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <ControlTheme x:Key="{x:Type TitleBar}" TargetType="TitleBar">
-        <Setter Property="VerticalAlignment" Value="Top" />
-        <Setter Property="HorizontalAlignment" Value="Stretch" />
-        <Setter Property="Background" Value="Transparent" />
-        <Setter Property="Template">
-            <ControlTemplate>
-                <Panel HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="Stretch">
-                    <Panel
-                        Name="PART_MouseTracker"
-                        Height="1"
-                        VerticalAlignment="Top" />
-                    <Panel Name="PART_Container">
-                        <Border
-                            Name="PART_Background"
-                            Background="{TemplateBinding Background}"
-                            IsHitTestVisible="False" />
-                        <CaptionButtons
-                            Name="PART_CaptionButtons"
-                            HorizontalAlignment="Right"
-                            VerticalAlignment="Top"
-                            Foreground="{TemplateBinding Foreground}" />
-                    </Panel>
-                </Panel>
-            </ControlTemplate>
-        </Setter>
-
-        <Style Selector="^:fullscreen /template/ Border#PART_Background">
-            <Setter Property="IsHitTestVisible" Value="True" />
-        </Style>
-
-        <Style Selector="^:fullscreen /template/ Panel#PART_MouseTracker">
-            <Setter Property="Background" Value="Transparent" />
-        </Style>
-
-        <Style Selector="^:fullscreen /template/ Panel#PART_Container">
-            <Setter Property="RenderTransform" Value="translateY(-50px)" />
-            <Setter Property="Transitions">
-                <Transitions>
-                    <TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.1" />
-                </Transitions>
-            </Setter>
-        </Style>
-
-        <Style Selector="^:fullscreen:pointerover /template/ Panel#PART_Container">
-            <Setter Property="RenderTransform" Value="none" />
-        </Style>
-    </ControlTheme>
-</ResourceDictionary>

src/Semi.Avalonia/Controls/Window.axaml

@@ -14,10 +14,7 @@
                     <Border Name="PART_TransparencyFallback" IsHitTestVisible="False" />
                     <Border Background="{TemplateBinding Background}" IsHitTestVisible="False" />
                     <Panel Margin="{TemplateBinding WindowDecorationMargin}" Background="Transparent" />
-                    <VisualLayerManager>
-                        <VisualLayerManager.ChromeOverlayLayer>
-                            <TitleBar />
-                        </VisualLayerManager.ChromeOverlayLayer>
+                    <VisualLayerManager Name="PART_VisualLayerManager">
                         <ContentPresenter
                             Name="PART_ContentPresenter"
                             Margin="{TemplateBinding Padding}"

src/Semi.Avalonia/Controls/WindowDrawnDecorations.axaml

@@ -0,0 +1,203 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+
+    <ControlTheme x:Key="CaptionButton" TargetType="Button">
+        <Setter Property="Foreground" Value="{DynamicResource CaptionButtonForeground}" />
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="CornerRadius" Value="{StaticResource CaptionButtonCornerRadius}" />
+        <Setter Property="Padding" Value="{StaticResource CaptionButtonPadding}" />
+        <Setter Property="Width" Value="{StaticResource CaptionButtonWidth}" />
+        <Setter Property="Height" Value="{StaticResource CaptionButtonHeight}" />
+        <Setter Property="WindowDecorationProperties.ElementRole" Value="DecorationsElement" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="Button">
+                <ContentPresenter
+                    Name="PART_ContentPresenter"
+                    Padding="{TemplateBinding Padding}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    Content="{TemplateBinding Content}"
+                    ContentTemplate="{TemplateBinding ContentTemplate}"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    Foreground="{TemplateBinding Foreground}">
+                    <ContentPresenter.DataTemplates>
+                        <DataTemplate DataType="Geometry">
+                            <PathIcon
+                                Theme="{StaticResource InnerPathIcon}"
+                                Data="{Binding}" />
+                        </DataTemplate>
+                    </ContentPresenter.DataTemplates>
+                </ContentPresenter>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^:pointerover">
+            <Setter Property="Background" Value="{DynamicResource CaptionButtonPointeroverBackground}" />
+        </Style>
+
+        <Style Selector="^:pressed">
+            <Setter Property="Background" Value="{DynamicResource CaptionButtonPressedBackground}" />
+        </Style>
+
+        <Style Selector="^:disabled">
+            <Setter Property="Foreground" Value="{DynamicResource CaptionButtonDisabledForeground}" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type WindowDrawnDecorations}" TargetType="WindowDrawnDecorations">
+        <Setter Property="DefaultTitleBarHeight" Value="32" />
+        <Setter Property="DefaultFrameThickness" Value="1" />
+        <Setter Property="DefaultShadowThickness" Value="8" />
+        <Setter Property="Template">
+            <WindowDrawnDecorationsTemplate>
+                <WindowDrawnDecorationsContent>
+                    <WindowDrawnDecorationsContent.Underlay>
+                        <!--  Full-size: covers shadow area + frame + behind client area  -->
+                        <Panel Name="PART_UnderlayWrapper">
+                            <Border
+                                Name="PART_WindowBorder"
+                                Background="{DynamicResource WindowBackground}"
+                                BorderBrush="{DynamicResource WindowBorderBrush}"
+                                BorderThickness="{TemplateBinding FrameThickness}"
+                                IsHitTestVisible="False" />
+                            <!-- Titlebar: background, title text, and drag area live in underlay -->
+                            <Panel Name="PART_TitleBar"
+                                   VerticalAlignment="Top"
+                                   Height="{TemplateBinding TitleBarHeight}"
+                                   Background="{DynamicResource TitleBarBackground}"
+                                   IsVisible="{TemplateBinding HasTitleBar}"
+                                   WindowDecorationProperties.ElementRole="TitleBar" />
+                        </Panel>
+                    </WindowDrawnDecorationsContent.Underlay>
+
+                    <WindowDrawnDecorationsContent.Overlay>
+                        <!--  Positioned over the titlebar area  -->
+                        <Panel Name="PART_OverlayWrapper">
+                            <!--  Title text lives in overlay so it renders above client content  -->
+                            <Panel
+                                Name="PART_TitleTextPanel"
+                                Height="{TemplateBinding TitleBarHeight}"
+                                VerticalAlignment="Top"
+                                IsHitTestVisible="False"
+                                IsVisible="{TemplateBinding HasTitleBar}">
+                                <TextBlock
+                                    Margin="12,0,0,0"
+                                    VerticalAlignment="Center"
+                                    Text="{TemplateBinding Title}" />
+                            </Panel>
+                            <StackPanel
+                                Name="PART_OverlayPanel"
+                                Height="{TemplateBinding TitleBarHeight}"
+                                HorizontalAlignment="Right"
+                                VerticalAlignment="Top"
+                                IsVisible="{TemplateBinding HasTitleBar}"
+                                Orientation="Horizontal">
+                                <Button
+                                    Name="PART_FullScreenButton"
+                                    Theme="{StaticResource CaptionButton}"
+                                    Content="{StaticResource WindowExpandGlyph}"
+                                    WindowDecorationProperties.ElementRole="FullScreenButton" />
+                                <Button
+                                    Name="PART_MinimizeButton"
+                                    Theme="{StaticResource CaptionButton}"
+                                    Content="{StaticResource WindowMinimizeGlyph}"
+                                    WindowDecorationProperties.ElementRole="MinimizeButton" />
+                                <Button
+                                    Name="PART_MaximizeButton"
+                                    Theme="{StaticResource CaptionButton}"
+                                    Content="{StaticResource WindowMaximizeGlyph}"
+                                    WindowDecorationProperties.ElementRole="MaximizeButton" />
+                                <Button
+                                    Name="PART_CloseButton"
+                                    Theme="{StaticResource CaptionButton}"
+                                    Content="{StaticResource WindowCloseIconGlyph}"
+                                    WindowDecorationProperties.ElementRole="CloseButton" />
+                            </StackPanel>
+                        </Panel>
+                    </WindowDrawnDecorationsContent.Overlay>
+
+                    <WindowDrawnDecorationsContent.FullscreenPopover>
+                        <!--  Shown on hover at top edge in fullscreen  -->
+                        <DockPanel
+                            Height="{TemplateBinding DefaultTitleBarHeight}"
+                            Background="{DynamicResource TitleBarBackground}"
+                            VerticalAlignment="Top"
+                            WindowDecorationProperties.ElementRole="TitleBar">
+                            <StackPanel DockPanel.Dock="Right" Orientation="Horizontal">
+                                <Button
+                                    Name="PART_PopoverFullScreenButton"
+                                    Theme="{StaticResource CaptionButton}"
+                                    Content="{StaticResource WindowCollapseGlyph}"
+                                    WindowDecorationProperties.ElementRole="FullScreenButton" />
+                                <Button
+                                    Name="PART_PopoverCloseButton"
+                                    Theme="{StaticResource CaptionButton}"
+                                    Content="{StaticResource WindowCloseIconGlyph}"
+                                    WindowDecorationProperties.ElementRole="CloseButton" />
+                            </StackPanel>
+                            <TextBlock
+                                Margin="12,0,0,0"
+                                VerticalAlignment="Center"
+                                Text="{TemplateBinding Title}" />
+                        </DockPanel>
+                    </WindowDrawnDecorationsContent.FullscreenPopover>
+                </WindowDrawnDecorationsContent>
+            </WindowDrawnDecorationsTemplate>
+        </Setter>
+
+        <Style Selector="^ /template/ Button#PART_CloseButton,^ /template/ Button#PART_PopoverCloseButton">
+            <Style Selector="^:pointerover">
+                <Setter Property="Foreground" Value="{DynamicResource CaptionButtonCloseForeground}" />
+                <Setter Property="Background" Value="{DynamicResource CaptionButtonClosePointeroverBackground}" />
+            </Style>
+            <Style Selector="^:pressed">
+                <Setter Property="Foreground" Value="{DynamicResource CaptionButtonCloseForeground}" />
+                <Setter Property="Background" Value="{DynamicResource CaptionButtonClosePressedBackground}" />
+            </Style>
+        </Style>
+
+        <!--  Shadow: inset border and add drop shadow  -->
+        <Style Selector="^:has-shadow">
+            <Style Selector="^ /template/ Panel#PART_UnderlayWrapper">
+                <Setter Property="Margin" Value="{TemplateBinding ShadowThickness}" />
+            </Style>
+            <Style Selector="^ /template/ Border#PART_WindowBorder">
+                <Setter Property="BoxShadow" Value="{DynamicResource WindowBorderShadow}" />
+            </Style>
+            <Style Selector="^ /template/ Panel#PART_OverlayWrapper">
+                <Setter Property="Margin" Value="{TemplateBinding ShadowThickness}" />
+            </Style>
+        </Style>
+
+        <!-- Maximized: restore button path changes -->
+        <Style Selector="^:maximized /template/ Button#PART_MaximizeButton">
+            <Setter Property="Content" Value="{StaticResource WindowRestoreGlyph}" />
+        </Style>
+
+        <!--  Border: inset titlebar and buttons inside frame  -->
+        <Style Selector="^:has-border">
+            <Style Selector="^ /template/ Panel#PART_TitleTextPanel">
+                <Setter Property="Margin" Value="1,1,1,0" />
+            </Style>
+            <Style Selector="^ /template/ Panel#PART_TitleBar">
+                <Setter Property="Margin" Value="1,1,1,0" />
+            </Style>
+            <Style Selector="^ /template/ StackPanel#PART_OverlayPanel">
+                <Setter Property="Margin" Value="0,1,1,0" />
+            </Style>
+        </Style>
+
+        <!--  Fullscreen: hide overlay and titlebar (popover takes over)  -->
+        <Style Selector="^:fullscreen">
+            <Style Selector="^ /template/ Panel#PART_TitleTextPanel">
+                <Setter Property="IsVisible" Value="False" />
+            </Style>
+            <Style Selector="^ /template/ StackPanel#PART_OverlayPanel">
+                <Setter Property="IsVisible" Value="False" />
+            </Style>
+            <Style Selector="^ /template/ Panel#PART_TitleBar">
+                <Setter Property="IsVisible" Value="False" />
+            </Style>
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/_index.axaml

@@ -6,18 +6,21 @@
         <ResourceInclude Source="AutoCompleteBox.axaml" />
         <ResourceInclude Source="Border.axaml" />
         <ResourceInclude Source="Button.axaml" />
+        <ResourceInclude Source="ContentPage.axaml" />
         <ResourceInclude Source="ButtonSpinner.axaml" />
         <ResourceInclude Source="Calendar.axaml" />
         <ResourceInclude Source="CalendarDatePicker.axaml" />
-        <ResourceInclude Source="CaptionButtons.axaml" />
         <ResourceInclude Source="Carousel.axaml" />
+        <ResourceInclude Source="CarouselPage.axaml" />
         <ResourceInclude Source="CheckBox.axaml" />
         <ResourceInclude Source="ComboBox.axaml" />
+        <ResourceInclude Source="CommandBar.axaml" />
         <ResourceInclude Source="ContextMenu.axaml" />
         <ResourceInclude Source="DataValidationErrors.axaml" />
         <ResourceInclude Source="DatePicker.axaml" />
         <ResourceInclude Source="DateTimePickerShared.axaml" />
         <ResourceInclude Source="DropDownButton.axaml" />
+        <ResourceInclude Source="DrawerPage.axaml" />
         <ResourceInclude Source="EmbeddableControlRoot.axaml" />
         <ResourceInclude Source="Expander.axaml" />
         <ResourceInclude Source="FlyoutPresenter.axaml" />
@@ -33,7 +36,9 @@
         <ResourceInclude Source="MenuFlyoutPresenter.axaml" />
         <ResourceInclude Source="NotificationCard.axaml" />
         <ResourceInclude Source="NumericUpDown.axaml" />
+        <ResourceInclude Source="NavigationPage.axaml" />
         <ResourceInclude Source="PathIcon.axaml" />
+        <ResourceInclude Source="PipsPager.axaml" />
         <ResourceInclude Source="Popup.axaml" />
         <ResourceInclude Source="ProgressBar.axaml" />
         <ResourceInclude Source="RadioButton.axaml" />
@@ -47,17 +52,18 @@
         <ResourceInclude Source="TabControl.axaml" />
         <ResourceInclude Source="TabItem.axaml" />
         <ResourceInclude Source="TabStrip.axaml" />
+        <ResourceInclude Source="TabbedPage.axaml" />
         <ResourceInclude Source="TextBlock.axaml" />
         <ResourceInclude Source="TextBox.axaml" />
         <ResourceInclude Source="ThemeVariantScope.axaml" />
         <ResourceInclude Source="TimePicker.axaml" />
-        <ResourceInclude Source="TitleBar.axaml" />
         <ResourceInclude Source="ToggleButton.axaml" />
         <ResourceInclude Source="ToggleSwitch.axaml" />
         <ResourceInclude Source="Tooltip.axaml" />
         <ResourceInclude Source="TransitioningContentControl.axaml" />
         <ResourceInclude Source="TreeView.axaml" />
         <ResourceInclude Source="Window.axaml" />
+        <ResourceInclude Source="WindowDrawnDecorations.axaml" />
         <ResourceInclude Source="WindowNotificationManager.axaml" />
     </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>

src/Semi.Avalonia/Icons/FillIcons.axaml

@@ -113,6 +113,9 @@
     <StreamGeometry x:Key="SemiIconBolt">
         M3.6 14.2 15.1.65c.3-.4.95-.15.9.35l-2 8h6a.5.5 0 0 1 .4.8L8.9 23.35c-.3.4-.95.15-.9-.35l2-8H4a.5.5 0 0 1-.4-.8Z
     </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconBook">
+        M19 1a2 2 0 0 1 2 2v19a1 1 0 0 1-1 1H6a3 3 0 0 1-3-3V5a4 4 0 0 1 4-4h12ZM6 19a1 1 0 0 0 0 2h13v-2H6Z
+    </StreamGeometry>
     <StreamGeometry x:Key="SemiIconBookmark">
         M4 21.59V3c0-1.1.9-2 2-2h12a2 2 0 0 1 2 2v18.59a1 1 0 0 1-1.7.7L12 16l-6.3 6.3a1 1 0 0 1-1.7-.71Z
     </StreamGeometry>
@@ -203,6 +206,9 @@
     <StreamGeometry x:Key="SemiIconCode">
         M14.49 4.19a1.5 1.5 0 0 0-2.98-.38l-2 16a1.5 1.5 0 1 0 2.98.38l2-16ZM8.06 5.94a1.5 1.5 0 0 1 0 2.12L4.12 12l3.94 3.94a1.5 1.5 0 1 1-2.12 2.12l-5-5a1.5 1.5 0 0 1 0-2.12l5-5a1.5 1.5 0 0 1 2.12 0Zm7.88 0a1.5 1.5 0 0 1 2.12 0l5 5a1.5 1.5 0 0 1 0 2.12l-5 5a1.5 1.5 0 0 1-2.12-2.12L19.88 12l-3.94-3.94a1.5 1.5 0 0 1 0-2.12Z
     </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconCoinMoney">
+        M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm3.2 6.3a1 1 0 0 0-1.4 0L12 9.08l-1.8-1.8a1 1 0 1 0-1.4 1.42L10.08 10H9a1 1 0 1 0 0 2h2v1H9a1 1 0 1 0 0 2h2v1a1 1 0 0 0 2 0v-1h2a1 1 0 0 0 0-2h-2v-1h2a1 1 0 0 0 0-2h-1.09l1.3-1.3a1 1 0 0 0 0-1.4Z
+    </StreamGeometry>
     <StreamGeometry x:Key="SemiIconColorPalette">
         M2 4c0-1.1.9-2 2-2h5a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4Zm6 13.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm11.59-8.91L16.4 5.4a2 2 0 0 0-2.82 0L13 6v12l6.59-6.59a2 2 0 0 0 0-2.82ZM22 16a2 2 0 0 0-2-2l-8 8h8a2 2 0 0 0 2-2v-4Z
     </StreamGeometry>
@@ -283,6 +289,9 @@
         M4.38 4.4c.51-.53 1.34-.53 1.84 0l6.4 6.64c.5.53.5 1.39 0 1.92l-6.4 6.64c-.5.53-1.33.53-1.84 0a1.4 1.4 0 0 1 0-1.91L9.86 12 4.38 6.31a1.4 1.4 0 0 1 0-1.91Z
         M11.38 4.4c.51-.53 1.33-.53 1.84 0l6.4 6.64c.5.53.5 1.39 0 1.92l-6.4 6.64c-.5.53-1.33.53-1.84 0a1.4 1.4 0 0 1 0-1.91L16.86 12l-5.48-5.69a1.4 1.4 0 0 1 0-1.91Z
     </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconDownCircle">
+        M1 12a11 11 0 1 1 22 0 11 11 0 0 1-22 0Zm6.3-2.1a1 1 0 0 0 0 1.42l3.88 3.89a1 1 0 0 0 1.42 0l3.89-3.9a1 1 0 0 0-1.42-1.4l-3.18 3.18L8.7 9.9a1 1 0 0 0-1.42 0Z
+    </StreamGeometry>
     <StreamGeometry x:Key="SemiIconDownload">
         M17.84 8.06A6.5 6.5 0 1 0 5.18 11 4.5 4.5 0 0 0 5.5 20H17a6 6 0 0 0 .84-11.94Zm-6.16 9.67a.5.5 0 0 0 .64 0l5.15-4.29a.25.25 0 0 0-.16-.44H14V9.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5V13H6.7c-.24 0-.35.3-.17.44l5.15 4.3Z
     </StreamGeometry>
@@ -293,6 +302,11 @@
         M14.5 4.5l 5 5 2.09-2.09a2 2 0 0 0 0-2.82L19.4 2.4a2 2 0 0 0-2.82 0L14.5 4.5Z
         M2.25 21.13l 1.68-5.88a1 1 0 0 1 .25-.43L13 6l5 5-8.82 8.82a1 1 0 0 1-.43.25l-5.88 1.68a.5.5 0 0 1-.62-.62Z
     </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconEdit2">
+        m16.43 4.1 3.54 3.54 1.48-1.48c.55-.55.55-1.45 0-2L19.9 2.62a1.42 1.42 0 0 0-2 0L16.43 4.1Z
+        m-8.76 11.88 1.19-4.17a.7.7 0 0 1.18-.3l6.24-6.25 3.54 3.54-6.24 6.24a.7.7 0 0 1-.3.18l-4.17 1.2a.35.35 0 0 1-.44-.44Z
+        M7.97 9.78c-.28.29-.5.63-.64 1l-.05.17-1.19 4.17A2.35 2.35 0 0 0 9 18.02l4.17-1.18c.44-.13.84-.37 1.17-.7l4.8-4.8a.5.5 0 0 1 .86.36V21a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h9.54a.5.5 0 0 1 .36.85L7.97 9.78Z
+    </StreamGeometry>
     <StreamGeometry x:Key="SemiIconEmoji">
         M12 23a11 11 0 1 1 0-22 11 11 0 0 1 0 22Zm-6.93-9a7 7 0 0 0 13.86 0H5.07ZM8 11a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm8 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z
     </StreamGeometry>
@@ -498,7 +512,7 @@
         M12.03 19.57c-.19-.6-1.08-3.15-1.42-3.47-.32-.3-.71-.25-1.1-.2a8.7 8.7 0 0 1-.5.07c-.48.06-.9.12-1.52.17-.58.04-1.11.03-1.63-.1a52.44 52.44 0 0 0 3.26 5.12c.44.62 1.25.84 1.95.56.85-.34 1.3-1.04.96-2.15Z
     </StreamGeometry>
     <StreamGeometry x:Key="SemiIconHourglass">
-        M6 23h12c1.1 0 2.14-.9 2-2-.44-3.5-2.14-5.06-3.38-6.28-.9-.87-1.62-1.58-1.62-2.72 0-1.14.72-1.85 1.62-2.72C17.86 8.06 19.56 6.5 20 3c.14-1.1-.9-2-2-2H6c-1.1 0-2.17.9-2 2 .47 2.92 2.07 4.55 3.27 5.88C8.22 9.94 9 10.81 9 12c0 1.14-.72 1.85-1.62 2.72C6.14 15.94 4.44 17.5 4 21c-.14 1.1.9 2 2 2Zm9-16c0 .82-.74 1.49-1.5 2.17A4.93 4.93 0 0 0 12 11a4.93 4.93 0 0 0-1.5-1.83C9.74 8.49 9 7.82 9 7h6ZM7 20c0-1.51 1.02-2.14 2.16-2.83 1.11-.68 2.34-1.44 2.84-3.17.5 1.73 1.73 2.49 2.84 3.17 1.14.7 2.16 1.32 2.16 2.83H7Z
+        M20 1a1 1 0 1 1 0 2h-1v5a1 1 0 0 1-.3.7L15.42 12l3.3 3.3a1 1 0 0 1 .29.7v5h1a1 1 0 1 1 0 2H4a1 1 0 1 1 0-2h1v-5a1 1 0 0 1 .3-.7L8.58 12l-3.3-3.3A1 1 0 0 1 5 8V3H4a1 1 0 0 1 0-2h16ZM9 18a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2H9Zm1-12a1 1 0 0 0 0 2h4a1 1 0 1 0 0-2h-4Z
     </StreamGeometry>
     <StreamGeometry x:Key="SemiIconIdCard">
         M4 4a3 3 0 0 0-3 3v11a3 3 0 0 0 3 3h16a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H4Zm5.8 8.17c-.47 1.18-1.33 1.97-2.3 1.97-.97 0-1.83-.79-2.3-1.97-.3-.12-.58-.47-.7-.94-.17-.6-.14-1.14.31-1.31C4.86 7.82 5.71 7 7.5 7s2.64.81 2.69 2.92c.45.17.48.7.32 1.31-.13.47-.41.82-.7.94Zm2.03 3.86c.42.42 0 .97-.61.97H3.78c-.6 0-1.03-.55-.61-.97.81-.84 2.45-1.41 4.33-1.41s3.52.57 4.33 1.4ZM14 10a1 1 0 0 1 1-1h5a1 1 0 1 1 0 2h-5a1 1 0 0 1-1-1Zm1 3a1 1 0 1 0 0 2h3a1 1 0 1 0 0-2h-3Z
@@ -549,6 +563,9 @@
     <StreamGeometry x:Key="SemiIconLayers">
         m21.21 15.05.26.14c.51.28.68.9.38 1.39-.1.15-.23.27-.38.36l-8.92 4.92c-.34.19-.76.19-1.1 0l-8.92-4.92a.98.98 0 0 1-.38-1.39c.1-.15.23-.27.38-.36l.26-.14 8.66 4.78c.32.17.72.18 1.05.02l.05-.02 8.66-4.78Zm0-4.07.26.14c.51.29.68.91.38 1.4-.1.14-.23.27-.38.36l-8.92 4.92c-.34.18-.76.18-1.1 0l-8.92-4.92a.98.98 0 0 1-.38-1.4c.1-.14.23-.27.38-.36l.26-.14 8.66 4.78c.32.18.72.19 1.05.03l.05-.03 8.66-4.78Zm-8.66-8.84 8.92 4.92c.51.28.68.9.38 1.39-.1.15-.23.27-.38.36l-8.92 4.92c-.34.19-.76.19-1.1 0L2.53 8.81a.98.98 0 0 1-.38-1.39c.1-.15.23-.27.38-.36l8.92-4.92c.34-.19.76-.19 1.1 0Z
     </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconLeftCircle">
+        M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm2.1 6.3a1 1 0 0 0-1.42 0L8.8 11.17a1 1 0 0 0 0 1.42l3.9 3.89a1 1 0 0 0 1.4-1.42l-3.18-3.18L14.1 8.7a1 1 0 0 0 0-1.42Z
+    </StreamGeometry>
     <StreamGeometry x:Key="SemiIconLikeHeart">
         M12 6c-1.5-3.88-6.25-3.94-8.6-1.6C.87 6.94 1 10.5 3.5 14c2.02 2.83 6.33 6.31 7.9 7.54.36.28.84.28 1.2 0 1.57-1.23 5.88-4.71 7.9-7.54 2.5-3.5 2.63-7.06.1-9.6C18.25 2.06 14.5 2.12 12 6Z
     </StreamGeometry>
@@ -616,9 +633,9 @@
         M8.5 2c.83 0 1.5.67 1.5 1.5v3A3.5 3.5 0 0 1 6.5 10h-3a1.5 1.5 0 1 1 0-3h3a.5.5 0 0 0 .5-.5v-3C7 2.67 7.67 2 8.5 2ZM16 2c.83 0 1.5.67 1.5 1.5v3c0 .28.22.5.5.5h3a1.5 1.5 0 0 1 0 3h-3a3.5 3.5 0 0 1-3.5-3.5v-3c0-.83.67-1.5 1.5-1.5ZM2 15.5c0-.83.67-1.5 1.5-1.5h3a3.5 3.5 0 0 1 3.5 3.5v3a1.5 1.5 0 0 1-3 0v-3a.5.5 0 0 0-.5-.5h-3A1.5 1.5 0 0 1 2 15.5Zm12 2a3.5 3.5 0 0 1 3.5-3.5h3a1.5 1.5 0 0 1 0 3h-3a.5.5 0 0 0-.5.5v3a1.5 1.5 0 0 1-3 0v-3Z
     </StreamGeometry>
     <StreamGeometry x:Key="SemiIconMiniPlayer">
-        M7.52 7.19c.39-.39 1.02-.39 1.41 0l2.95 2.95V9.31c0-.55.45-1 1-1 .56 0 1 .45 1 1v3.24c0 .55-.44 1-1 1H9.64c-.55 0-1-.45-1-1 0-.55.45-1 1-1h.83L7.52 8.6c-.39-.39-.39-1.02 0-1.41Z
-        M5.5 22H9.75c.83 0 1.5-.67 1.5-1.5S10.58 19 9.75 19H5.5c-.28 0-.5-.22-.5-.5v-3-10c0-.28.22-.5.5-.5h10 3c.28 0 .5.22.5.5V9.75c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V5.5C22 3.57 20.43 2 18.5 2h-3-10C3.57 2 2 3.57 2 5.5v10 3C2 20.43 3.57 22 5.5 22Z
-        m10 0h5c.83 0 1.5-.67 1.5-1.5v-5c0-.83-.67-1.5-1.5-1.5h-5c-.83 0-1.5.67-1.5 1.5v5c0 .83.67 1.5 1.5 1.5Z
+        M15.5 22a1.5 1.5 0 0 1-1.5-1.5v-5c0-.83.67-1.5 1.5-1.5h5c.83 0 1.5.67 1.5 1.5v5c0 .83-.67 1.5-1.5 1.5h-5Z
+        M5.5 22A3.5 3.5 0 0 1 2 18.5v-13A3.5 3.5 0 0 1 5.5 2h13A3.5 3.5 0 0 1 22 5.5v4.25a1.5 1.5 0 0 1-3 0V5.5a.5.5 0 0 0-.5-.5h-13a.5.5 0 0 0-.5.5v13c0 .28.22.5.5.5h4.25a1.5 1.5 0 0 1 0 3H5.5Z
+        M7.52 7.19a1 1 0 0 0 0 1.41l2.95 2.95h-.83a1 1 0 1 0 0 2h3.24a1 1 0 0 0 1-1V9.31a1 1 0 1 0-2 0v.83L8.93 7.19a1 1 0 0 0-1.41 0Z
     </StreamGeometry>
     <StreamGeometry x:Key="SemiIconMinus">
         M2 12c0-.83.67-1.5 1.5-1.5h17a1.5 1.5 0 0 1 0 3h-17A1.5 1.5 0 0 1 2 12Z
@@ -640,6 +657,9 @@
     <StreamGeometry x:Key="SemiIconMute">
         M12 3a1 1 0 0 0-1.62-.78L4.65 7H2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2.65l5.73 4.78A1 1 0 0 0 12 21V3Zm2.06 4.94a1.5 1.5 0 0 1 2.12 0L18 9.76l1.82-1.82a1.5 1.5 0 1 1 2.12 2.12l-1.82 1.82 1.94 1.94a1.5 1.5 0 0 1-2.12 2.12L18 14l-1.94 1.94a1.5 1.5 0 0 1-2.12-2.12l1.94-1.94-1.82-1.82a1.5 1.5 0 0 1 0-2.12Z
     </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconNoteMoney">
+        M21 3a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h18Zm-5.8 4.3a1 1 0 0 0-1.4 0L12 9.08l-1.8-1.8a1 1 0 1 0-1.4 1.42L10.08 10H9a1 1 0 1 0 0 2h2v1H9a1 1 0 1 0 0 2h2v1a1 1 0 0 0 2 0v-1h2a1 1 0 0 0 0-2h-2v-1h2a1 1 0 0 0 0-2h-1.09l1.3-1.3a1 1 0 0 0 0-1.4Z
+    </StreamGeometry>
     <StreamGeometry x:Key="SemiIconOption">
         M3.5 3.5a1.5 1.5 0 1 0 0 3h3.63l7.57 13.24c.26.47.76.76 1.3.76h4.5a1.5 1.5 0 0 0 0-3h-3.63L9.3 4.26A1.5 1.5 0 0 0 8 3.5H3.5Zm11 0a1.5 1.5 0 0 0 0 3h6a1.5 1.5 0 0 0 0-3h-6Z
     </StreamGeometry>
@@ -683,6 +703,9 @@
     <StreamGeometry x:Key="SemiIconPriceTag">
         M21 2h-7.59a1 1 0 0 0-.7.3L1.4 13.58a2 2 0 0 0 0 2.82L7.6 22.6a2 2 0 0 0 2.82 0l11.3-11.3a1 1 0 0 0 .29-.7V3a1 1 0 0 0-1-1Zm-5.5 9a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z
     </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconPrize">
+        M4 1a1 1 0 0 0-1 1v5a1 1 0 0 0 .4.8L7 10.5v.6a7 7 0 1 0 10 0v-.6l3.6-2.7A1 1 0 0 0 21 7V2a1 1 0 0 0-1-1H4Zm3 15a4.99 4.99 0 0 1 8.33-3.73A4.99 4.99 0 0 1 12 21a5 5 0 0 1-5-5Zm2-6.33a6.97 6.97 0 0 1 6 0V3H9v6.67ZM15 16a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z
+    </StreamGeometry>
     <StreamGeometry x:Key="SemiIconPrint">
         M7 2a2 2 0 0 0-2 2v3a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4a2 2 0 0 0-2-2H7Z
         M2 12a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3v5a2 2 0 0 1-2 2h-2v2a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2v-2H4a2 2 0 0 1-2-2v-5Zm16 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM8 15h8v6H8v-6Z
@@ -705,6 +728,9 @@
     <StreamGeometry x:Key="SemiIconQuote">
         M9.93 4.93c.25.8-.2 1.63-.99 1.88a7.02 7.02 0 0 0-4.08 3.32A5.02 5.02 0 0 1 11 15a5 5 0 0 1-10 0v-1.5a10 10 0 0 1 7.06-9.56c.8-.24 1.63.2 1.87 1Zm12 0c.25.8-.2 1.63-.99 1.88a7.02 7.02 0 0 0-4.08 3.32A5.02 5.02 0 0 1 23 15a5 5 0 0 1-10 0v-1.5a10 10 0 0 1 7.06-9.56c.8-.24 1.63.2 1.87 1Z
     </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconRealSize">
+        M21 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V6c0-1.1.9-2 2-2h18ZM6 8a1 1 0 0 0 0 2h1v5a1 1 0 0 0 2 0V9a1 1 0 0 0-1-1H6Zm10 0a1 1 0 1 0 0 2h1v5a1 1 0 0 0 2 0V9a1 1 0 0 0-1-1h-2Zm-3.5 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm0-4a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z
+    </StreamGeometry>
     <StreamGeometry x:Key="SemiIconRedo">
         M14.44 2.44a1.5 1.5 0 0 0 0 2.12L16.88 7H9.25C5.16 7 2 10.58 2 14.5S5.16 22 9.25 22h3.25a1.5 1.5 0 0 0 0-3H9.25C6.98 19 5 16.93 5 14.5S6.98 10 9.25 10h7.63l-2.44 2.44a1.5 1.5 0 0 0 2.12 2.12l5-5a1.5 1.5 0 0 0 0-2.12l-5-5a1.5 1.5 0 0 0-2.12 0Z
     </StreamGeometry>
@@ -760,6 +786,9 @@
     <StreamGeometry x:Key="SemiIconSetting">
         M8 5.07c-.8.47-1.8.46-2.6 0l-.24-.15a1.4 1.4 0 0 0-1.82.29c-.64.82-1.16 1.73-1.55 2.7a1.4 1.4 0 0 0 .66 1.71l.24.14a2.57 2.57 0 0 1 0 4.48l-.24.14a1.4 1.4 0 0 0-.66 1.72 11.1 11.1 0 0 0 1.55 2.69 1.4 1.4 0 0 0 1.82.3l.25-.15a2.57 2.57 0 0 1 3.88 2.24v.28c-.01.7.46 1.33 1.16 1.43a11 11 0 0 0 3.1 0 1.4 1.4 0 0 0 1.17-1.43v-.28a2.57 2.57 0 0 1 3.87-2.24l.25.14c.6.36 1.38.26 1.82-.29.64-.82 1.16-1.73 1.55-2.7a1.4 1.4 0 0 0-.66-1.71l-.24-.14a2.57 2.57 0 0 1 0-4.48l.24-.14a1.4 1.4 0 0 0 .66-1.72 11.08 11.08 0 0 0-1.55-2.69 1.4 1.4 0 0 0-1.82-.3l-.25.15a2.57 2.57 0 0 1-3.88-2.24v-.28c.01-.7-.46-1.33-1.16-1.43a10.99 10.99 0 0 0-3.1 0c-.7.1-1.17.72-1.17 1.43v.28C9.3 3.75 8.8 4.61 8 5.07Zm6 10.4a4 4 0 1 0-4-6.93 4 4 0 0 0 4 6.92Z
     </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconShare">
+        M17.5 2A3.5 3.5 0 1 1 15 7.95l-5.13 3.11a3.5 3.5 0 0 1 .03 1.78l5.22 3.1A3.49 3.49 0 0 1 21 18.5a3.5 3.5 0 1 1-6.9-.85l-5.22-3.08A3.49 3.49 0 0 1 3 12a3.5 3.5 0 0 1 5.8-2.63l5.27-3.19A3.5 3.5 0 0 1 17.5 2Z
+    </StreamGeometry>
     <StreamGeometry x:Key="SemiIconShield">
         m2.68 3.8 8.75-2.63a2 2 0 0 1 1.14 0l8.74 2.62c.41.13.7.5.7.93.03 2.63-.03 11.72-2.01 14.28-1.98 2.55-6.38 3.66-7.65 3.93-.23.05-.47.05-.7 0C10.4 22.65 6.12 21.55 4 19 1.87 16.44 1.92 7.32 1.98 4.7c0-.42.3-.78.7-.9ZM12 4v16s3.97-.73 5.6-2.9c1.61-2.2 1.39-11.2 1.39-11.2L12 4H12Z
     </StreamGeometry>
@@ -835,6 +864,9 @@
     <StreamGeometry x:Key="SemiIconTerminal">
         M2 5a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V5Zm10 11a1 1 0 0 1 1-1h5a1 1 0 1 1 0 2h-5a1 1 0 0 1-1-1ZM7.7 6.3a1 1 0 0 0-1.4 1.4l3.36 3.37-3.44 4.3a1 1 0 0 0 1.56 1.25l4-5a1 1 0 0 0-.07-1.33l-4-4Z
     </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconTestScore">
+        M19 1a2 2 0 0 1 2 2v18a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3c0-1.1.9-2 2-2h14ZM7 17.5a1 1 0 1 0 0 2h10a1 1 0 1 0 0-2H7Zm0-4a1 1 0 1 0 0 2h10a1 1 0 1 0 0-2H7ZM9.25 5a.75.75 0 0 0-.67.42l-2.5 5a.75.75 0 0 0 1.34.67l.42-.84h2.82l.42.84a.75.75 0 0 0 1.34-.68l-2.5-5A.75.75 0 0 0 9.25 5Zm.66 3.75H8.6l.66-1.32.66 1.32Z
+    </StreamGeometry>
     <StreamGeometry x:Key="SemiIconText">
         M3 4.5C3 3.67 3.67 3 4.5 3h15c.83 0 1.5.67 1.5 1.5v3a1.5 1.5 0 0 1-3 0V6h-4.5v13h2a1.5 1.5 0 0 1 0 3h-7a1.5 1.5 0 0 1 0-3h2V6H6v1.5a1.5 1.5 0 1 1-3 0v-3Z
     </StreamGeometry>
@@ -847,6 +879,9 @@
     <StreamGeometry x:Key="SemiIconTickCircle">
         M12 23a11 11 0 1 0 0-22 11 11 0 0 0 0 22Zm5.88-13.18-6.2 7.6a1.5 1.5 0 0 1-2.37 0l-3.5-4a1.5 1.5 0 1 1 2.37-1.84l2.3 2.46L15.5 8a1.5 1.5 0 1 1 2.38 1.82Z
     </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconTicketCode">
+        M21 4a2 2 0 0 1 2 2v3.8a1 1 0 0 1-.71.96c-.74.22-1.1.76-1.1 1.24s.36 1.02 1.1 1.24a1 1 0 0 1 .71.96V18a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-3.8a1 1 0 0 1 .71-.96c.74-.22 1.1-.76 1.1-1.24 0-.47-.36-1.01-1.08-1.24A1 1 0 0 1 1 9.8V6c0-1.1.9-2 2-2h18ZM8 9a1 1 0 0 0-1 1v4a1 1 0 1 0 2 0v-4a1 1 0 0 0-1-1Zm4 0a1 1 0 0 0-1 1v4a1 1 0 1 0 2 0v-4a1 1 0 0 0-1-1Zm4 0a1 1 0 0 0-1 1v4a1 1 0 1 0 2 0v-4a1 1 0 0 0-1-1Z
+    </StreamGeometry>
     <StreamGeometry x:Key="SemiIconTiktokLogo">
         M16.07 1h-3.8V16.13A3.17 3.17 0 1 1 10.14 13v-3.9a6.98 6.98 0 1 0 5.94 6.91V8.47a9.05 9.05 0 0 0 5.3 1.7V6.37a5.3 5.3 0 0 1-5.3-5.31V1Z
     </StreamGeometry>
@@ -914,6 +949,9 @@
     <StreamGeometry x:Key="SemiIconUserGroup">
         M15.95 3.09s-.55-.84-1.11-.84c-.5 0-.98.04-1.84.84-1.11 1.02-1.5 2.41-1.5 4.73 0 1.53.3 3.18 1.67 3.9l.38.14c.78 1.64 2.03 2.7 3.42 2.7 1.53 0 2.9-1.3 3.64-3.24l.06-.03c.63.15 1.51.2 2.12.2.27.01.4-.31.24-.51a6.4 6.4 0 0 1-.96-1.5c-.05-.13-.11-.52-.2-1.05-.2-1.38-.57-3.72-1.37-4.93-.72-1.08-3-1.5-3.83-1.25-.61.19-.72.84-.72.84ZM2.21 4.42c.21-.47.8-.57 1.23-.29L4 4.5 4.01 3c0-.2.13-.4.32-.45a6.2 6.2 0 0 1 1.78-.23c2.95 0 4.36 1.4 4.43 5 .75.3.8 1.22.53 2.26-.21.8-.67 1.4-1.16 1.6-.78 2.03-2.2 3.38-3.8 3.38-1.6 0-3.02-1.35-3.8-3.38-.48-.2-.95-.8-1.16-1.6-.27-1.04-.22-1.97.53-2.25.03-1.21.2-2.17.53-2.91ZM8 22c.55 0 1-.45 1.03-1 .1-1.3.45-2.15 1.27-3 .5-.53.43-1.4-.26-1.61A8.47 8.47 0 0 0 7.5 16c-3.06 0-5.69 1.6-6.87 3.89C.1 20.94 2.03 22 3.22 22H8Zm13.8 0c1.18 0 2.12-1.05 1.61-2.1A7.06 7.06 0 0 0 17 16a7.06 7.06 0 0 0-6.41 3.9c-.51 1.05.43 2.1 1.61 2.1h9.6Z
     </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconUserList">
+        M11.35 15c.54 0 1.08.04 1.6.13.23.03.4.24.4.48v5.89a.5.5 0 0 1-.5.5H2.49a.48.48 0 0 1-.46-.64A10 10 0 0 1 11.35 15Zm4.5 5c.27 0 .5.22.5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1c0-.28.22-.5.5-.5h1Zm5.65 0c.28 0 .5.22.5.5v1a.5.5 0 0 1-.5.5h-3.65a.5.5 0 0 1-.5-.5v-1c0-.28.22-.5.5-.5h3.65Zm-5.65-3c.27 0 .5.22.5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1c0-.28.22-.5.5-.5h1Zm5.65 0c.28 0 .5.22.5.5v1a.5.5 0 0 1-.5.5h-3.65a.5.5 0 0 1-.5-.5v-1c0-.28.22-.5.5-.5h3.65ZM12.35 2c3.3 0 6 2.7 6 6s-2.7 6-6 6-6-2.7-6-6 2.7-6 6-6Z
+    </StreamGeometry>
     <StreamGeometry x:Key="SemiIconUserSetting">
         M16.86 14.85c-.36.21-.81.21-1.17 0l-.11-.07a.64.64 0 0 0-.83.13 5 5 0 0 0-.7 1.23c-.13.3.01.62.3.78l.1.06a1.17 1.17 0 0 1 0 2.04l-.1.06a.64.64 0 0 0-.3.79 5.06 5.06 0 0 0 .7 1.22c.2.25.55.3.83.13l.1-.06a1.17 1.17 0 0 1 1.77 1.01v.13c0 .32.21.6.53.65a5 5 0 0 0 1.4 0 .63.63 0 0 0 .54-.65v-.13a1.17 1.17 0 0 1 1.76-1.01l.11.06c.28.16.63.12.83-.13a5 5 0 0 0 .7-1.23.64.64 0 0 0-.3-.78l-.1-.06a1.17 1.17 0 0 1 0-2.04l.1-.06a.64.64 0 0 0 .3-.78 5.04 5.04 0 0 0-.7-1.23.63.63 0 0 0-.83-.13l-.11.07a1.17 1.17 0 0 1-1.76-1.02v-.13c0-.32-.21-.6-.53-.65a5 5 0 0 0-1.41 0 .64.64 0 0 0-.53.65v.13c0 .42-.22.81-.59 1.02Zm2.73 4.73a1.82 1.82 0 1 0-1.82-3.15 1.82 1.82 0 0 0 1.82 3.15Z
         M12.35 15.98 12 16c-1.98 0-3.74-1.66-4.71-4.14-.6-.25-1.18-1-1.44-1.97-.34-1.27-.28-2.4.65-2.76C6.6 2.71 8.34 1 12 1s5.4 1.71 5.5 6.13c.92.36 1 1.49.65 2.76-.26.97-.83 1.72-1.44 1.97l-.12.3a6.01 6.01 0 0 0-4.24 3.82ZM12.08 17H12c-3.85 0-7.2 1.2-8.87 2.95-.85.9.03 2.05 1.27 2.05h9.13a5.98 5.98 0 0 1-1.45-5Z

src/Semi.Avalonia/Icons/StrokedIcons.axaml

@@ -2,6 +2,12 @@
     <StreamGeometry x:Key="SemiIconAbsoluteStroked">
         M13.62 5.04a1 1 0 1 0 1.42-1.42L12.7 1.3a1 1 0 0 0-1.42 0L8.96 3.62a1 1 0 0 0 1.42 1.42L11 4.4V11H4.41l.63-.62a1 1 0 1 0-1.42-1.42L1.3 11.3a1 1 0 0 0 0 1.42l2.33 2.33a1 1 0 0 0 1.42-1.42L4.4 13H11v6.59l-.62-.63a1 1 0 0 0-1.42 1.42l2.33 2.33a1 1 0 0 0 1.42 0l2.33-2.33a1 1 0 0 0-1.42-1.42l-.62.63V13h6.59l-.63.62a1 1 0 0 0 1.42 1.42l2.33-2.33a1 1 0 0 0 0-1.42l-2.33-2.33a1 1 0 1 0-1.42 1.42l.63.62H13V4.41l.62.63Z
     </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconAlarmStroked">
+        M12 7.64c.5 0 .9.4.9.9v5.08l3.98 3.97a.9.9 0 1 1-1.29 1.29l-4.18-4.18-.03-.04a.9.9 0 0 1-.29-.66V8.55c0-.5.4-.91.91-.91Z
+        M12 4a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Z
+        M3.54 1.41a2 2 0 1 1 2.82 2.83L4.24 6.36a2 2 0 1 1-2.83-2.82L3.54 1.4Z
+        M20.46 1.41a2 2 0 1 0-2.82 2.83l2.12 2.12a2 2 0 1 0 2.83-2.82L20.46 1.4Z
+    </StreamGeometry>
     <StreamGeometry x:Key="SemiIconAlignHCenterStroked">
         M11 3a1 1 0 1 1 2 0v2h7a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-7v2h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4v2a1 1 0 1 1-2 0v-2H7a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h4v-2H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h7V3Zm1 14h4v-2H8v2h4Zm7-8H5V7h14v2Z
     </StreamGeometry>
@@ -59,18 +65,39 @@
     <StreamGeometry x:Key="SemiIconBriefStroked">
         M5 1a2 2 0 0 0-2 2v18c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2V8.41A2 2 0 0 0 20.41 7L15 1.59A2 2 0 0 0 13.59 1H5Zm8 2H5v18h14V9h-5a1 1 0 0 1-1-1V3Zm4.59 4L15 4.41V7h2.59Zm-6.09 5a.5.5 0 0 0-.5.5v1c0 .28.22.5.5.5h5a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-5Zm-4.5.5c0-.28.22-.5.5-.5h1c.28 0 .5.22.5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm4.5 3.5a.5.5 0 0 0-.5.5v1c0 .28.22.5.5.5h5a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-5Zm-4.5.5c0-.28.22-.5.5-.5h1c.28 0 .5.22.5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Z
     </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconBriefcaseStroked">
+        M15 1a2 2 0 0 1 2 2v3h4a2 2 0 0 1 2 2v12a2 2 0 0 1-1.8 1.99L21 22H3l-.2-.01A2 2 0 0 1 1 20V8c0-1.1.9-2 2-2h4V3c0-1.1.9-2 2-2h6ZM3 20h18v-7h-6v2a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-2H3v7Zm0-9h18V8H3v3Zm6.5-8a.5.5 0 0 0-.5.5V6h6V3.5a.5.5 0 0 0-.5-.5h-5Z
+    </StreamGeometry>
     <StreamGeometry x:Key="SemiIconButtonStroked">
         M2 6a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h20a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H2Zm1 10V8h18v8H3Zm4-5a1 1 0 1 0 0 2h10a1 1 0 1 0 0-2H7Z
     </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconCalendarClockStroked">
+        M20 2a2 2 0 0 1 2 2v8.53a6 6 0 0 0-2-1.19V8a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h7.8c.47.8 1.11 1.49 1.88 2H4a2 2 0 0 1-2-2V4c0-1.1.9-2 2-2h16ZM4.5 4a.5.5 0 0 0 0 1h15a.5.5 0 0 0 0-1h-15Z
+        M8 15a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h1Z
+        M12.34 15a5.99 5.99 0 0 0-.25 3h-.59a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h.84Z
+        M8 10a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h1Z
+        M12.5 10a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h1Z
+        M17.5 10a1 1 0 0 1 1 1v.02a6.08 6.08 0 0 0-3 .52V11a1 1 0 0 1 1-1h1Z
+        M18 12a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm0 .27c.41 0 .75.34.75.75v1.25l1.3 1.3a.75.75 0 1 1-1.06 1.06l-1.5-1.5a.75.75 0 0 1-.1-.12.75.75 0 0 1-.14-.44v-1.55c0-.41.34-.75.75-.75Z
+    </StreamGeometry>
     <StreamGeometry x:Key="SemiIconCalendarStroked">
         M9.65 2.11a1.11 1.11 0 1 0-2.22 0v.87H3.1A2.1 2.1 0 0 0 1 5.08V20.9c0 1.16.94 2.1 2.1 2.1h17.8a2.1 2.1 0 0 0 2.1-2.1V5.08a2.1 2.1 0 0 0-2.1-2.1h-4.33V2.1a1.11 1.11 0 1 0-2.22 0v.87h-4.7V2.1Zm6.92 18.67h4.2v-3.71h-4.2v3.7Zm0-5.94h4.2v-3.7h-4.2v3.7Zm-2.22-3.7v3.7h-4.7v-3.7h4.7Zm1.11-2.23h5.32v-3.7h-4.2v.86a1.11 1.11 0 1 1-2.23 0V5.2h-4.7v.87a1.11 1.11 0 0 1-2.22 0V5.2h-4.2v3.71h12.23Zm-1.11 8.16v3.7h-4.7v-3.7h4.7Zm-6.92 3.7v-3.7h-4.2v3.7h4.2Zm0-5.93v-3.7h-4.2v3.7h4.2Z
     </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconCameraStroked">
+        M12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z
+        M14.76 2a2 2 0 0 1 1.8 1.1L17.5 5H20a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V8a3 3 0 0 1 3-3h2.5l.95-1.9A2 2 0 0 1 9.24 2h5.52ZM8.3 5.9A2 2 0 0 1 6.5 7H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1h-2.5a2 2 0 0 1-1.79-1.1L14.76 4H9.24l-.95 1.9Z
+    </StreamGeometry>
     <StreamGeometry x:Key="SemiIconCandlestickChartStroked">
         M5 2a1 1 0 0 1 1 1v6h1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H6v2a1 1 0 1 1-2 0v-2H3a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1h1V3a1 1 0 0 1 1-1Zm0 15h1v-6H4v6h1Zm11-9a1 1 0 0 1 1-1h1V3a1 1 0 1 1 2 0v4h1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-1v4a1 1 0 1 1-2 0v-4h-1a1 1 0 0 1-1-1V8Zm4 7h-2V9h2v6ZM10 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h1v6a1 1 0 1 0 2 0v-6h1a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-1V3a1 1 0 1 0-2 0v2h-1Zm2 8h-1V7h2v6h-1Z
     </StreamGeometry>
     <StreamGeometry x:Key="SemiIconCarouselStroked">
         M1 6h2v12H1v2h3a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H1v2Zm6-1a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V5Zm2 1v12h6V6H9Zm10-1a1 1 0 0 1 1-1h3v2h-2v12h2v2h-3a1 1 0 0 1-1-1V5Z
     </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconCartStroked">
+        M9.65 18a2 2 0 1 1 0 4 2 2 0 0 1 0-4Z
+        M18.65 18a2 2 0 1 1 0 4 2 2 0 0 1 0-4Z
+        M5.5 2c.68 0 1.27.46 1.44 1.11l.03.13.14.79h14.71a1 1 0 0 1 .98 1.21l-1.56 7a1 1 0 0 1-.8.77l-.17.02H8.67L9.02 15h11.14a1 1 0 0 1 0 2H8.6a1.5 1.5 0 0 1-1.48-1.24L5.28 5.2l-.01-.07L5.07 4h-2.9a1 1 0 0 1 0-2H5.5ZM7.8 8.07l.52 2.96h11.14l1.1-5H7.46l.36 2.04Z
+    </StreamGeometry>
     <StreamGeometry x:Key="SemiIconCenterLeftStroked">
         M4 3a1 1 0 1 0-2 0v18a1 1 0 1 0 2 0V3Zm7 3a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H11Zm1 10V8h8v8h-8Z
     </StreamGeometry>
@@ -100,6 +127,9 @@
     <StreamGeometry x:Key="SemiIconChevronRightStroked">
         M7.9 20.17a1.25 1.25 0 0 1-.07-1.77l5.71-6.15-5.7-6.15a1.25 1.25 0 0 1 1.83-1.7l6.5 7c.44.48.44 1.22 0 1.7l-6.5 7c-.47.5-1.26.54-1.77.07Z
     </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconClockStroked">
+        M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm0 2a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm0 2a1 1 0 0 1 1 1v5.59l4.36 4.36a1 1 0 0 1-1.41 1.41l-4.6-4.6-.02-.02A1 1 0 0 1 11 12V6a1 1 0 0 1 1-1Z
+    </StreamGeometry>
     <StreamGeometry x:Key="SemiIconCloudStroked">
         M20 11.3V11c0-3.9-3.1-7-7-7-2.8 0-5.2 1.7-6.3 4-3.2.2-5.7 2.8-5.7 6 0 3.3 2.7 6 6 6h11.5a4.48 4.48 0 0 0 1.5-8.7ZM18.5 18H7a4.01 4.01 0 0 1-.9-7.9c.3-.1.6-.1.9-.1.31 0 .56 0 .84.1.13.04.28-.04.31-.17.13-.59.39-1.1.65-1.63C9.7 6.9 11.2 6 13 6a4.95 4.95 0 0 1 4.69 6.74.2.2 0 0 0 .19.26h.62c.4 0 .8.1 1.1.3a2.48 2.48 0 0 1-1.1 4.7Z
     </StreamGeometry>
@@ -131,12 +161,19 @@
     <StreamGeometry x:Key="SemiIconCornerRadiusStroked">
         M12 4h9a1 1 0 1 0 0-2h-9A10 10 0 0 0 2 12v9a1 1 0 1 0 2 0v-9a8 8 0 0 1 8-8Z
     </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconCreditCardStroked">
+        M20 3a3 3 0 0 1 3 3v11a3 3 0 0 1-2.85 3H3.85A3 3 0 0 1 1 17.15V6a3 3 0 0 1 3-3h16ZM3 17a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-7H3v7ZM4 5a1 1 0 0 0-1 1v2h18V6a1 1 0 0 0-1-1H4Z
+        M5 14a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-1Z
+    </StreamGeometry>
     <StreamGeometry x:Key="SemiIconCrossCircleStroked">
         M23 12a11 11 0 1 1-22 0 11 11 0 0 1 22 0Zm-11 9a9 9 0 1 0 0-18 9 9 0 0 0 0 18ZM8.11 8.11a1 1 0 0 1 1.42 0L12 10.6l2.47-2.48a1 1 0 1 1 1.42 1.42L13.4 12l2.48 2.47a1 1 0 0 1-1.42 1.42L12 13.4 9.53 15.9a1 1 0 0 1-1.42-1.42L10.6 12 8.1 9.53a1 1 0 0 1 0-1.42Z
     </StreamGeometry>
     <StreamGeometry x:Key="SemiIconCrossStroked">
         M3.62 19.12a1.25 1.25 0 0 0 1.76 1.76l7.12-7.11 7.12 7.11a1.25 1.25 0 0 0 1.76-1.76L14.27 12l7.11-7.12a1.25 1.25 0 0 0-1.76-1.76l-7.12 7.11-7.12-7.11a1.25 1.25 0 1 0-1.76 1.76L10.73 12l-7.11 7.12Z
     </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconCrownStroked">
+        M11.09 2a1 1 0 0 1 1.82 0l2.44 5.36a3 3 0 0 0 4.54 1.16l.14-.12 1.85-1.59c.61-.52 1.53.08 1.29.85L19.44 20.6a2 2 0 0 1-1.75 1.4H6.31a2 2 0 0 1-1.75-1.4L.83 7.66c-.24-.77.68-1.37 1.29-.85l1.85 1.6a3 3 0 0 0 4.6-.88l.08-.17L11.1 2Zm-.62 6.2a5 5 0 0 1-6.7 2.44L6.47 20h11.06l2.7-9.36a5 5 0 0 1-6.7-2.45L12 4.83 10.47 8.2Z
+    </StreamGeometry>
     <StreamGeometry x:Key="SemiIconCustomerSupportStroked">
         M7 8a5 5 0 0 1 10 0v8a5 5 0 0 1-2.17 4.12.5.5 0 0 0-.33-.12h-4a.5.5 0 0 0-.5.5v2c0 .28.22.5.5.5h4a.5.5 0 0 0 .5-.5v-.17A7 7 0 0 0 18.93 17H21a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-2V8A7 7 0 1 0 5 8v1H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1V8Zm-3 7v-4h1v4H4Zm15-4v4h1v-4h-1Z
     </StreamGeometry>
@@ -161,21 +198,42 @@
     <StreamGeometry x:Key="SemiIconExternalOpenStroked">
         M21 2a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0V5.41l-9.3 9.3a1 1 0 0 1-1.4-1.42L18.58 4H15a1 1 0 1 1 0-2h6ZM2 5a1 1 0 0 1 1-1h8a1 1 0 1 1 0 2H4v14h14v-7a1 1 0 1 1 2 0v8a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5Z
     </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconEyeClosedStroked">
+        M2.7 5.04c.54-.15 1.09.16 1.3.67.53 1.36 1.42 2.8 2.6 3.98a7.6 7.6 0 0 0 5.58 2.35 8.73 8.73 0 0 0 8.29-6.25c.17-.53.7-.87 1.23-.75.54.12.89.65.73 1.18a11.31 11.31 0 0 1-3.18 5.08l2.66 3.53a1 1 0 0 1-1.6 1.2l-2.66-3.53c-.77.46-1.6.83-2.5 1.09l1.49 4.09a1 1 0 1 1-1.88.68l-1.6-4.38a12.03 12.03 0 0 1-1.97.03l-1.58 4.35a1 1 0 1 1-1.88-.68l1.48-4.08a9.64 9.64 0 0 1-2.39-1.17l-2.71 3.6a1 1 0 0 1-1.6-1.2l2.76-3.66-.06-.06a13.75 13.75 0 0 1-3.15-4.85.94.94 0 0 1 .65-1.22Z
+    </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconEyeClosedSolidStroked">
+        M20.1 2.3a1 1 0 0 1 1.4 1.4L3.13 22.1a1 1 0 1 1-1.41-1.42l3.36-3.37C2.52 15.51 1 13.04 1 11.6c0-2.5 4.5-8 11-8 2.03 0 3.87.54 5.44 1.35l2.65-2.65ZM12 5.58c-2.67 0-4.97 1.13-6.62 2.57a9.39 9.39 0 0 0-1.86 2.15A3.1 3.1 0 0 0 3 11.6c0 .1.08.54.52 1.27.4.67 1.03 1.44 1.86 2.16.34.3.72.59 1.13.86l2.13-2.13a4 4 0 0 1 5.53-5.53l1.77-1.78A9.64 9.64 0 0 0 12 5.59Zm0 4a2 2 0 0 0-1.88 2.68l2.56-2.57A2 2 0 0 0 12 9.6Z
+        M20.27 6.95C22 8.57 23 10.4 23 11.59c0 2.5-4.5 8-11 8-1.34 0-2.6-.24-3.74-.63l1.61-1.62c.68.16 1.39.25 2.13.25 2.67 0 4.97-1.14 6.62-2.57a9.39 9.39 0 0 0 1.86-2.16c.44-.73.52-1.17.52-1.27 0-.1-.08-.55-.52-1.28a9.2 9.2 0 0 0-1.63-1.95l1.42-1.41Z
+        m-3.98 4.23.02.36a4 4 0 0 1-4.36 3.98l4.34-4.34Z
+    </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconEyeOpenedStroked">
+        M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8Zm0 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z
+        M12 4c6.5 0 11 5.5 11 8s-4.5 8-11 8-11-5.5-11-8 4.5-8 11-8Zm0 2C9.33 6 7.03 7.13 5.38 8.57a9.39 9.39 0 0 0-1.86 2.16A3.1 3.1 0 0 0 3 12c0 .1.08.55.52 1.27.4.68 1.03 1.44 1.86 2.16A10.14 10.14 0 0 0 12 18c2.67 0 4.97-1.13 6.62-2.57a9.39 9.39 0 0 0 1.86-2.16A3.1 3.1 0 0 0 21 12c0-.1-.08-.55-.52-1.27a9.39 9.39 0 0 0-1.86-2.16A10.14 10.14 0 0 0 12 6Z
+    </StreamGeometry>
     <StreamGeometry x:Key="SemiIconFillStroked">
         M7.42 2.17a1 1 0 0 1 1.41 0l9.43 9.44a1 1 0 0 1 0 1.41l-.02.02-6.7 6.7a2.5 2.5 0 0 1-3.53 0l-5.66-5.66a2.5 2.5 0 0 1 0-3.53l6.01-6.01-.94-.95a1 1 0 0 1 0-1.42Zm2.36 3.78 6.36 6.36-2.18 2.19H5.6l-1.83-1.83a.5.5 0 0 1 0-.71l6-6.01ZM21 19c0 1.1-.67 2-1.5 2s-1.5-.9-1.5-2c0-1.08.66-2.49 1.1-3.31a.44.44 0 0 1 .8 0c.44.82 1.1 2.23 1.1 3.31Z
     </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconFilterStroked">
+        M12.57 12.06 19.77 4H4.25l7.25 8.06v6.39l1.07.7v-7.09Zm2 8.94-.01.13a1 1 0 0 1-1.32.81l-.12-.05-3.07-2A1 1 0 0 1 9.5 19v-6.17L1.24 3.65A1 1 0 0 1 2 2h20a1 1 0 0 1 .76 1.65l-8.2 9.18V21Z
+    </StreamGeometry>
     <StreamGeometry x:Key="SemiIconFingerLeftStroked">
         M6.7 3.7a1 1 0 0 0-1.4-1.4l-3 3a1 1 0 0 0 0 1.4l3 3a1 1 0 0 0 1.4-1.4L5.42 7h3.44v5.65c-.23-.26-.54-.5-.96-.61a2.98 2.98 0 0 0-1.54-.1c-.55.15-.93.5-1.14.96-.19.4-.22.84-.2 1.19 0 .36.05.73.1 1.07.15.93.64 2.85 4 6.52a1 1 0 0 0 .73.32h11a1 1 0 0 0 1-1v-7.47c0-.96-.33-1.7-.83-2.21a2.8 2.8 0 0 0-1.49-.8l-5.67-.87V7H21a1 1 0 1 0 0-2h-7.2a2.5 2.5 0 0 0-4.9 0H5.4l1.3-1.3Zm4.14 1.8a.5.5 0 1 1 1 0v5c0 .5.37.92.86 1 4 .6 6.14.93 6.47 1 .1 0 .26.07.4.22.12.12.27.35.27.81V20H10.3c-2.9-3.23-3.13-4.72-3.2-5.16A6.17 6.17 0 0 1 7 13.9c.08 0 .19.03.34.07l.07.1c.09.15.16.33.26.6l.05.14c.12.3.29.74.58 1.1.35.43.86.74 1.54.74v-.04c.34-.06.7-.25.82-.38.05-.08.11-.22.13-.27a.96.96 0 0 0 .05-.24 1.13 1.13 0 0 0 0-.1 12.2 12.2 0 0 0 0-.6v-9.5Zm-3.51 8.45Z
     </StreamGeometry>
     <StreamGeometry x:Key="SemiIconFixedStroked">
         M4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0Zm8-10c-2.4 0-4.6.85-6.33 2.26L4.31 2.89a1 1 0 0 0-1.42 1.42l1.37 1.36a9.96 9.96 0 0 0 0 12.66l-1.37 1.36a1 1 0 1 0 1.42 1.42l1.36-1.37a9.96 9.96 0 0 0 12.66 0l1.36 1.37a1 1 0 0 0 1.42-1.42l-1.37-1.36a9.96 9.96 0 0 0 0-12.66l1.37-1.36a1 1 0 0 0-1.42-1.42l-1.36 1.37A9.96 9.96 0 0 0 12 2Zm-2 10a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm2-4a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z
     </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconFlagStroked">
+        M8 1c2.5 0 3.19.3 4.15.68L13 2c1.5.5 3 1 5 1 .89 0 1.78-.2 2.5-.42.7-.22 1.5.3 1.5 1.04v10.76c0 .38-.21.73-.56.87l-.3.12c-.78.28-1.96.63-3.14.63-2 0-3.5-.5-5-1-.31-.1-.58-.2-.84-.3-.98-.39-1.79-.7-4.16-.7-1.27 0-3.27.3-4 .5V21a1 1 0 0 1-.84.99h-.04a1 1 0 0 1-.24 0h-.04A1 1 0 0 1 2 21V3.58c0-.36.2-.69.51-.85C3.57 2.18 6.08 1 8 1Zm0 2c-.61 0-1.46.2-2.38.54-.6.22-1.17.47-1.62.68v8.37l.46-.13C5.36 12.21 6.54 12 8 12c1.27 0 2.2.08 3 .24.8.17 1.39.4 1.88.59l.75.27c1.5.5 2.73.9 4.37.9.68 0 1.4-.17 2-.36V4.78c-.61.13-1.3.22-2 .22-2.36 0-4.13-.6-5.63-1.1l-.95-.35c-.5-.2-.76-.3-1.17-.39a8.82 8.82 0 0 0-1.46-.15L8 3Z
+    </StreamGeometry>
     <StreamGeometry x:Key="SemiIconFlowChartStroked">
         M7.5 3a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v4.5a1 1 0 0 1-1 1H13V11h4.5a1 1 0 0 1 1 1v3.5H21a1 1 0 0 1 1 1V21a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1v-4.5a1 1 0 0 1 1-1h2.5V13h-9v2.5H10a1 1 0 0 1 1 1V21a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-4.5a1 1 0 0 1 1-1h2.5V12a1 1 0 0 1 1-1H11V8.5H8.5a1 1 0 0 1-1-1V3Zm-1 14.5H4V20h5v-2.5H6.5Zm11 0H15V20h5v-2.5h-2.5ZM9.5 4v2.5h5V4h-5Z
     </StreamGeometry>
     <StreamGeometry x:Key="SemiIconFolderStroked">
         M4 4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-8.59L10 4.59A2 2 0 0 0 8.59 4H4Zm0 2h4.59l1 1-1 1H4V6Zm0 4v8h16V8h-8.59L10 9.41a2 2 0 0 1-1.41.59H4Z
     </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconFolderOpenStroked">
+        M6.9 2a3 3 0 0 1 1.66.5l2 1.33a1 1 0 0 0 .55.17h5.75a3 3 0 0 1 3 3v.83h.74a2 2 0 0 1 1.94 2.6l-3.16 9.98a2 2 0 0 1-1.91 1.4H2a1 1 0 0 1-1-1V5a3 3 0 0 1 3-3h2.9ZM13 9.92h-.82l-3.52.05-1.45.02-1.07 2.95-2.47 6.86h13.8l3.16-9.98-7.62.1ZM4 4a1 1 0 0 0-1 1v10.76l1.26-3.5 1.06-2.95A2 2 0 0 1 7.18 8l4.98-.06 5.7-.07V7a1 1 0 0 0-1-1H11.1a3 3 0 0 1-1.67-.5l-2-1.33A1 1 0 0 0 6.9 4H4Z
+    </StreamGeometry>
     <StreamGeometry x:Key="SemiIconFollowStroked">
         M6 8c0 3.3 2.7 6 6 6s6-2.7 6-6-2.7-6-6-6-6 2.7-6 6Zm2 0c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4-4-1.8-4-4ZM2.12 20.56C2.35 20.05 4.65 15 12 15c0 0 1 0 1 1s-1 1-1 1c-6.2 0-8 4.2-8 4.4-.2.5-.8.7-1.3.5-.6-.2-.8-.8-.6-1.3l.02-.04ZM17 15a1 1 0 1 1 2 0v2h2a1 1 0 1 1 0 2h-2v2a1 1 0 1 1-2 0v-2h-2a1 1 0 1 1 0-2h2v-2Z
     </StreamGeometry>
@@ -188,6 +246,12 @@
     <StreamGeometry x:Key="SemiIconGiftStroked">
         M8 3a3 3 0 0 0-2.83 4H3a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h1v8a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-8h1a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1h-2.17A3 3 0 0 0 16 3h-2c-.77 0-1.47.29-2 .76A2.99 2.99 0 0 0 10 3H8Zm5 6h7v2h-7V9Zm-2 0H4v2h7V9Zm0 4H6v7h5v-7Zm2 7h5v-7h-5v7ZM11 6v1H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1Zm6 0a1 1 0 0 1-1 1h-3V6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1Z
     </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconGlobeStroked">
+        M12.05 1a11.1 11.1 0 0 1 3.65.64A11 11 0 0 1 12.05 23h-.08a11.09 11.09 0 0 1-2.46-.29A11 11 0 0 1 12 1h.05Zm-.02 2A9.04 9.04 0 0 0 3 12h5.33a4.84 4.84 0 0 1 4.85 4.82v.08a.8.8 0 0 1-.8.73H9.69c-.52.07-.93.63-.93 1.68 0 .8.67 1.27 1.27 1.47.2.05.4.09.62.12l1.39.1a9 9 0 0 0 8.84-7.54c-.76.5-1.65.79-2.6.79a5.1 5.1 0 0 1-4.67-3.38H9.79c-.62 0-1.14-.5-1.03-1.11.58-3.17 2.72-4.5 5.39-4.46h.01c.17-.24.35-.47.54-.68l.2-.2c.28-.28.27-.74-.02-.95-.9-.3-1.86-.47-2.85-.47Zm-8.8 11a9 9 0 0 0 3.53 5.31c0-.8.16-1.66.64-2.37a2.86 2.86 0 0 1 2.39-1.32h1.12A2.85 2.85 0 0 0 8.33 14h-5.1Zm13.8-9.46c-.11.48-.35.93-.73 1.3a3.5 3.5 0 0 0-.47.57l-.6.92-1.1-.03c-1.01-.02-1.74.23-2.24.6a2.7 2.7 0 0 0-.77.97h3.85l.5 1.27c.53 1.34 1.66 2.11 2.8 2.11.57 0 1.11-.18 1.58-.51 0 0 .6-.39 1.05-1.07a9 9 0 0 0-3.87-6.13Z
+    </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconGlobeStrokeStroked">
+        M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22ZM9.5 17c.54 2.41 1.46 4 2.5 4s1.96-1.59 2.5-4h-5Zm-4.98 0a9.03 9.03 0 0 0 3.98 3.3c-.2-.42-.37-.86-.52-1.3-.2-.61-.38-1.28-.52-2H4.52Zm12.02 0c-.14.72-.32 1.39-.52 2-.15.44-.32.88-.53 1.3a9.03 9.03 0 0 0 4-3.3h-2.95Zm.39-7a28.65 28.65 0 0 1-.09 5h3.65a8.98 8.98 0 0 0 .28-5h-3.84Zm-7.85 0a26.56 26.56 0 0 0 .1 5h5.65a25.75 25.75 0 0 0 .1-5H9.07Zm-5.85 0a9.02 9.02 0 0 0 .28 5h3.65a27.95 27.95 0 0 1-.09-5H3.23Zm12.26-6.3c.2.42.38.86.53 1.3.3.89.53 1.9.7 3h3.34a9.03 9.03 0 0 0-4.57-4.3ZM12 3c-1.18 0-2.2 2.04-2.69 5h5.38c-.5-2.96-1.51-5-2.69-5Zm-3.5.7A9.03 9.03 0 0 0 3.94 8h3.35c.16-1.1.4-2.11.7-3 .14-.44.31-.88.51-1.3Z
+    </StreamGeometry>
     <StreamGeometry x:Key="SemiIconGridStroked">
         M3 2a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3Zm1 7V4h5v5H4Zm-1 4a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1v-7a1 1 0 0 0-1-1H3Zm1 7v-5h5v5H4Zm9-17a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1V3Zm2 1v5h5V4h-5Zm-1 9a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1v-7a1 1 0 0 0-1-1h-7Zm1 7v-5h5v5h-5Z
     </StreamGeometry>
@@ -202,9 +266,16 @@
     <StreamGeometry x:Key="SemiIconHomeStroked">
         M11.39 2.21a1 1 0 0 1 1.22 0l9 7A1 1 0 0 1 22 10v11a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-7h-4v7a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V10c0-.3.14-.6.39-.79l9-7ZM4 10.5V20h4v-7a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v7h4v-9.51l-8-6.22-8 6.22Z
     </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconHornStroked">
+        M16.42 1.37c.45-.05.82.64.82.64.01.03 1 1.52 1.56 6.94.56 5.43.05 7.1.04 7.12 0 0-.2.76-.65.81l-.15.01c-.62.04-1-.17-1.6-.67l-.28-.25a8.89 8.89 0 0 0-6.84-2c-.46.03-.91.09-1.37.14l-.68.09a2.93 2.93 0 0 1-2.97-1.64l-.16.03c-1 .11-1.92-.56-2.13-1.52l-.03-.2A1.95 1.95 0 0 1 3.86 8.7c.25-1.1 1.14-2 2.3-2.22l.23-.04.68-.08.68-.09.69-.06a8.76 8.76 0 0 0 5.93-3.19l.3-.37c.64-.82 1.16-1.22 1.75-1.28Zm-.46 2.86a10.75 10.75 0 0 1-7.3 3.96h-.05l-1.3.15-.7.09c-.4.04-.8.71-.8.71s-.36.8-.3 1.33.6 1.22.6 1.22.54.57.93.52l.66-.08c.44-.06.94-.12 1.46-.16a10.95 10.95 0 0 1 7.89 2.15c.03-1 0-2.59-.24-4.96-.25-2.44-.58-4-.85-4.93Zm4.65 1.73a2.93 2.93 0 0 1 .63 5.5l-.09.04c-.46.14-.9-.24-.95-.74 0-.02-.04-1-.16-1.96-.12-.97-.29-1.92-.29-1.92.01-.02.34-1.03.86-.92Z
+        m-11.16 9.75.06.02.03.05.16.32a34.43 34.43 0 0 1 1.04 2.79c.14.42.09.66.02.8-.07.15-.23.3-.53.42l-.08.03a.9.9 0 0 1-.94-.26l-.05-.07a58.16 58.16 0 0 1-2.52-3.81l.34-.02c.64-.05 1.09-.1 1.57-.17l.44-.06h.05c.21-.04.32-.05.4-.04Z
+    </StreamGeometry>
     <StreamGeometry x:Key="SemiIconHourglassStroked">
         M4 1a1 1 0 0 0 0 2h1v5c0 .27.1.52.3.7L8.58 12l-3.3 3.3A1 1 0 0 0 5 16v5H4a1 1 0 1 0 0 2h16a1 1 0 1 0 0-2h-1v-5a1 1 0 0 0-.3-.7L15.42 12l3.3-3.3A1 1 0 0 0 19 8V3h1a1 1 0 1 0 0-2H4Zm9.3 10.3L17 7.58V3H7v4.59l3.7 3.7a1 1 0 0 1 0 1.42L7 16.4V21h10v-4.59l-3.7-3.7a1 1 0 0 1 0-1.42ZM9 7a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2h-4a1 1 0 0 1-1-1Zm0 11a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2H9Z
     </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconIdCardStroked">
+        M20 3a3 3 0 0 1 3 3v11a3 3 0 0 1-2.85 3H3.85A3 3 0 0 1 1 17.15V6a3 3 0 0 1 3-3h16ZM4 5a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H4Zm4 8.86c1.67 0 3.13.51 3.85 1.26.37.39 0 .88-.55.88H4.7c-.54 0-.92-.5-.55-.88.72-.75 2.18-1.26 3.85-1.26Zm9-.86a1 1 0 1 1 0 2h-3a1 1 0 1 1 0-2h3ZM8 7c1.6 0 2.35.73 2.39 2.63.4.15.43.64.28 1.18-.11.42-.36.74-.62.84-.42 1.07-1.19 1.78-2.05 1.78-.86 0-1.63-.71-2.05-1.78-.26-.1-.51-.42-.62-.84-.15-.54-.12-1.03.28-1.18C5.65 7.73 6.41 7 8 7Zm11 2a1 1 0 1 1 0 2h-5a1 1 0 1 1 0-2h5Z
+    </StreamGeometry>
     <StreamGeometry x:Key="SemiIconImageStroked">
         M2 4c0-1.1.9-2 2-2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4Zm18 0H4v16h16V4ZM9 8a1 1 0 1 0 0 2 1 1 0 0 0 0-2ZM6 9a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm11.7 1.8a1 1 0 0 0-1.4 0l-3.87 3.86-1.8-1.44a1 1 0 0 0-1.34.07l-3.5 3.5a1 1 0 1 0 1.42 1.42l2.86-2.87 1.8 1.44a1 1 0 0 0 1.34-.07L17 12.9l.8.8a1 1 0 0 0 1.4-1.42l-1.5-1.5Z
     </StreamGeometry>
@@ -254,6 +325,15 @@
     <StreamGeometry x:Key="SemiIconMarginStroked">
         M4 2a2 2 0 0 0-2 2v16c0 1.1.9 2 2 2h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H4Zm9 2h7v7h-2a1 1 0 1 0 0 2h2v7h-7v-2a1 1 0 1 0-2 0v2H4v-7h2a1 1 0 1 0 0-2H4V4h7v2a1 1 0 1 0 2 0V4ZM9 8a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1H9Zm1 6v-4h4v4h-4Z
     </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconMicrophoneStroked">
+        M16 21a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2h8Zm3-10.5a1 1 0 0 1 1 1 8 8 1 1 1-16 0 1 1 0 1 1 2 0 6 6 0 0 0 12 0 1 1 0 0 1 1-1ZM12 1a4.5 4.5 0 0 1 4.5 4.5v6a4.5 4.5 1 1 1-9 0v-6A4.5 4.5 0 0 1 12 1Zm0 2a2.5 2.5 0 0 0-2.5 2.5v6a2.5 2.5 0 0 0 5 0v-6A2.5 2.5 0 0 0 12 3Z
+    </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconMicrophoneOffStroked">
+        M16 21a1 1 0 0 1 0 2H8a1 1 0 1 1 0-2h8Z
+        M12 1a4.5 4.5 0 0 1 4.5 4.3l3.6-3.6a1 1 0 0 1 1.4 1.42L3.13 21.51a1 1 0 1 1-1.41-1.42l3.85-3.85A7.96 7.96 0 0 1 4 11.5a1 1 0 1 1 2 0c0 1.22.37 2.36 1 3.3l1.08-1.09a4.47 4.47 0 0 1-.57-1.98l-.01-.23v-6A4.5 4.5 0 0 1 12 1Zm0 2a2.5 2.5 0 0 0-2.5 2.5v6c0 .24.03.48.1.7l4.9-4.9V5.5A2.5 2.5 0 0 0 12 3Z
+        M19 10.5a1 1 0 0 1 1 1 8 8 0 0 1-11.87 7L9.62 17A6 6 0 0 0 18 11.5a1 1 0 0 1 1-1Z
+        M16.5 11.5v.23a4.5 4.5 0 0 1-5.7 4.1l1.94-1.94a2.5 2.5 0 0 0 1.65-1.65l2.11-2.11v1.37Z
+    </StreamGeometry>
     <StreamGeometry x:Key="SemiIconMinusCircleStroked">
         M12 23a11 11 0 1 0 0-22 11 11 0 0 0 0 22Zm9-11a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM8 11a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2H8Z
     </StreamGeometry>
@@ -269,6 +349,9 @@
     <StreamGeometry x:Key="SemiIconMonitorStroked">
         M1 5c0-1.1.9-2 2-2h18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-8v2h3a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2h3v-2H3a2 2 0 0 1-2-2V5Zm20 10H3V5h18v10Z
     </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconMoonStroked">
+        M8.27 8.36c0-2.04.84-3.9 2.19-5.23a9 9 0 1 0 10.4 10.41 7.36 7.36 0 0 1-12.6-5.18Zm2 0a5.36 5.36 0 0 0 9.86 2.93l.08-.11c.4-.51 1.02-.67 1.52-.6.55.08 1.27.52 1.27 1.42A11 11 0 1 1 12 1c.9 0 1.34.72 1.42 1.27.08.53-.1 1.2-.7 1.6a5.36 5.36 0 0 0-2.45 4.5Z
+    </StreamGeometry>
     <StreamGeometry x:Key="SemiIconMoreStroked">
         M7.5 12a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z
         M15 12a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z
@@ -277,6 +360,9 @@
     <StreamGeometry x:Key="SemiIconMusicNoteStroked">
         M11.3 2.29a1 1 0 0 1 .95-.26l6.42 1.5c.45.1.77.51.77.98v4.05a1 1 0 0 1-1.23.97L13 8.3v10.18A3.52 3.52 0 0 1 9.48 22H7.52A3.52 3.52 0 0 1 4 18.48v-.46a3.52 3.52 0 0 1 3.52-3.52H11V3a1 1 0 0 1 .3-.71ZM13 6.24l4.44 1.06v-2L13 4.26v1.98ZM7.52 16.5H11v1.98c0 .84-.68 1.52-1.52 1.52H7.52C6.68 20 6 19.32 6 18.48v-.46c0-.84.68-1.52 1.52-1.52Z
     </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconMuteStroked">
+        M10.38 2.22A1 1 0 0 1 12 3v18a1 1 0 0 1-1.63.78L4.66 17H2a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h2.65l5.72-4.78ZM5.92 8.54A2 2 0 0 1 4.65 9H3v6h1.65a2 2 0 0 1 1.28.46l4.07 3.4V5.14l-4.07 3.4Zm14.14-.83a1 1 0 0 1 1.42 1.41L19 11.6l2.48 2.47a1 1 0 1 1-1.42 1.42L17.6 13l-2.48 2.48a1 1 0 0 1-1.41-1.42l2.47-2.47-2.47-2.48a1 1 0 0 1 1.41-1.41l2.48 2.47 2.47-2.47Z
+    </StreamGeometry>
     <StreamGeometry x:Key="SemiIconNineGridStroked">
         M5 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2ZM2 5a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm3 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm-3-1a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm2 7a1 1 0 1 0 2 0 1 1 0 0 0-2 0Zm1-3a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm7-10a1 1 0 1 1 0-2 1 1 0 0 1 0 2ZM9 5a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm2 7a1 1 0 1 0 2 0 1 1 0 0 0-2 0Zm1-3a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm0 11a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm-3-1a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm7-14a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm2 7a1 1 0 1 0 2 0 1 1 0 0 0-2 0Zm1-3a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm0 11a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm-3-1a3 3 0 1 1 6 0 3 3 0 0 1-6 0Z
     </StreamGeometry>
@@ -286,6 +372,12 @@
     <StreamGeometry x:Key="SemiIconOrderedListStroked">
         M5 4.5V9h.5c.28 0 .5.22.5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1c0-.28.22-.5.5-.5H3V5h-.5a.5.5 0 0 1-.5-.5v-1c0-.28.22-.5.5-.5h2c.28 0 .5.22.5.5v1Zm3 0c0-.28.22-.5.5-.5h12c.28 0 .5.22.5.5v1a.5.5 0 0 1-.5.5h-12a.5.5 0 0 1-.5-.5v-1Zm0 10c0-.28.22-.5.5-.5h12c.28 0 .5.22.5.5v1a.5.5 0 0 1-.5.5h-12a.5.5 0 0 1-.5-.5v-1ZM8.5 8a.5.5 0 0 0-.5.5v1c0 .28.22.5.5.5h7a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-7ZM8 18.5c0-.28.22-.5.5-.5h7c.28 0 .5.22.5.5v1a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-1Zm-6-5c0-.28.22-.5.5-.5h3c.28 0 .5.22.5.5v4a.5.5 0 0 1-.5.5H4v1h1.5c.28 0 .5.22.5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-4c0-.28.22-.5.5-.5H4v-1H2.5a.5.5 0 0 1-.5-.5v-1Z
     </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconPaperclipStroked">
+        M2.66 15.62a6.48 6.48 0 0 0 1.93 4.85 6.48 6.48 0 0 0 4.85 1.93 6.03 6.03 0 0 0 3.99-1.58l3.71-3.7c.7-.72 1.37-1.38 1.86-1.87l.58-.58.16-.15.04-.05h.01v-.01a1 1 0 1 0-1.41-1.41h-.01l-.05.05-.16.16-.58.58-1.85 1.86-3.71 3.7A4.48 4.48 0 0 1 6 19.06a4.48 4.48 0 0 1-1.35-3.37c.04-1.16.5-2.14 1-2.64l8.83-8.83a2.7 2.7 0 0 1 1.5-.6 2.9 2.9 0 0 1 2.39.95 2.9 2.9 0 0 1 .95 2.38 2.7 2.7 0 0 1-.6 1.5l-7.07 7.08c-.15.15-.52.34-1 .37-.44.03-.84-.09-1.12-.37-.28-.28-.4-.68-.37-1.13.03-.47.22-.84.37-1l2.92-2.9 1.66-1.67.53-.53.14-.14.04-.04.01-.01a1 1 0 1 0-1.41-1.42l-5.3 5.3c-.56.56-.9 1.43-.96 2.28-.06.88.18 1.9.96 2.67.78.79 1.8 1.02 2.67.96.85-.06 1.72-.4 2.28-.96l7.07-7.07a4.64 4.64 0 0 0 1.17-2.74 4.9 4.9 0 0 0-1.53-3.97 4.9 4.9 0 0 0-3.98-1.53c-1.18.1-2.2.64-2.73 1.17l-8.84 8.84a6.03 6.03 0 0 0-1.58 3.99Z
+    </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconPhoneStroked">
+        M5.9 1.59a2.11 2.11 0 0 1 2.89.77l2.78 4.81c.58 1.01.23 2.3-.77 2.89l-1.55.89h-.01v.01a36.9 36.9 0 0 0 3.92 3.82h.01l.01-.01 1.08-1.87a2.11 2.11 0 0 1 2.88-.77l4.81 2.78c1.01.58 1.36 1.87.77 2.88l-2.22 3.85a2.11 2.11 0 0 1-2.21 1.02h-.03l-.02-.01a23.67 23.67 0 0 1-11.26-6.3 23.68 23.68 0 0 1-5.8-9.43V6.9a4.8 4.8 0 0 1-.15-.73 2.8 2.8 0 0 1 0-.88l.01-.05A2.1 2.1 0 0 1 2.06 3.8L5.9 1.59Zm1 1.73L3.07 5.54a.11.11 0 0 0-.06.08v.1L3 5.9c.02.16.05.31.08.4a21.68 21.68 0 0 0 5.3 8.63 21.67 21.67 0 0 0 10.27 5.76c.05 0 .09-.01.11-.05l2.22-3.85a.11.11 0 0 0-.04-.15l-4.81-2.78a.11.11 0 0 0-.15.04l-1.08 1.87a2 2 0 0 1-3.03.55 38.68 38.68 0 0 1-4.14-4.03 2 2 0 0 1 .51-3.08l1.55-.89c.05-.03.07-.1.04-.15L7.06 3.36a.11.11 0 0 0-.15-.04Z
+    </StreamGeometry>
     <StreamGeometry x:Key="SemiIconPieChart2Stroked">
         M11 3.05a9 9 0 1 0 6.62 15.98l-6.47-6.47a.5.5 0 0 1-.15-.35V3.05Zm2 0V11h7.95A9 9 0 0 0 13 3.05ZM14.41 13l4.62 4.62A8.96 8.96 0 0 0 20.95 13H14.4ZM1 12a11 11 0 1 1 22 0 11 11 0 0 1-22 0Z
     </StreamGeometry>
@@ -326,9 +418,15 @@
         M19 4a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6c0-1.1.9-2 2-2h14Zm0 5V6H5v3h14Z
         M19 13a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-3c0-1.1.9-2 2-2h14Zm0 5v-3H5v3h14Z
     </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconSafeStroked">
+        M11.44 1.08c.37-.1.77-.1 1.15 0l8.7 2.64c.42.12.7.5.7.93.03 2.65-.03 11.8-2 14.36-1.97 2.57-6.36 3.68-7.63 3.95a1.6 1.6 0 0 1-.7 0c-1.24-.28-5.5-1.39-7.62-3.95C1.9 16.44 1.96 7.27 2.02 4.64c.01-.43.3-.8.7-.92l8.72-2.64ZM4.01 5.42c-.02 1.47 0 3.88.19 6.26.12 1.42.3 2.79.56 3.92.28 1.2.6 1.87.82 2.14A9.01 9.01 0 0 0 8.96 20c1.27.54 2.47.85 3.06.99.6-.14 1.83-.45 3.12-.99a8.15 8.15 0 0 0 3.26-2.2c.22-.28.52-.97.79-2.18.25-1.14.44-2.51.56-3.94.21-2.38.25-4.78.25-6.26L12 3l-8 2.42Zm11.02 2.7a1.38 1.38 0 0 1 2.05-.1c.52.53.55 1.36.06 1.92l-5.42 6.25a1 1 0 0 1-1.45.05l-3.24-3.26a1.43 1.43 0 0 1 0-2.02 1.4 1.4 0 0 1 2 0l1.99 2.02 4.01-4.86Z
+    </StreamGeometry>
     <StreamGeometry x:Key="SemiIconSaveStroked">
         M2 4c0-1.1.9-2 2-2h10.96a2 2 0 0 1 1.41.59l5.04 5.04a2 2 0 0 1 .59 1.4V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4Zm9 0H8v3h3V4ZM6 4v4a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1V4h1.96L20 9.04V20h-2v-5a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v5H4V4h2Zm10 12v4H8v-4h8Z
     </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconScissorsStroked">
+        M20 18.5a1.5 1.5 0 1 0-2.84.67l.03.05.01.03a1.5 1.5 0 0 0 2.8-.75Zm-16 0a1.5 1.5 0 1 0 3 0 1.5 1.5 0 0 0-3 0Zm18 0a3.5 3.5 0 0 1-6.61 1.6l-1-1.79-2.36-4.08-2.41 4.18-1.04 1.75a3.5 3.5 0 1 1-.19-3.63l2.48-4.3L5.88 3.6a1 1 0 0 1 1.73-1l4.42 7.64 4.35-7.54a1 1 0 0 1 1.74 1l-4.94 8.54 2.46 4.25A3.5 3.5 0 0 1 22 18.5Z
+    </StreamGeometry>
     <StreamGeometry x:Key="SemiIconSearchStroked">
         M16 10a6 6 0 1 1-12 0 6 6 0 0 1 12 0Zm-1.1 6.32a8 8 0 1 1 1.41-1.41l5.4 5.38a1 1 0 0 1-1.42 1.42l-5.38-5.39Z
     </StreamGeometry>
@@ -353,6 +451,10 @@
     <StreamGeometry x:Key="SemiIconShareStroked">
         M14 5.5a3.5 3.5 0 1 1 1 2.45l-5.13 3.11a3.5 3.5 0 0 1 .03 1.79l5.22 3.08A3.49 3.49 0 0 1 21 18.5a3.5 3.5 0 1 1-6.9-.85l-5.22-3.08A3.49 3.49 0 0 1 3 12a3.5 3.5 0 0 1 5.8-2.63l5.27-3.19A3.51 3.51 0 0 1 14 5.5ZM17.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm-11 6.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm9.5 8a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z
     </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconShoppingBagStroked">
+        M18 5a1 1 0 0 1 1 1A7 7 0 1 1 5 6a1 1 0 0 1 2 0 5 5 0 0 0 10 0 1 1 0 0 1 1-1Z
+        M19 2a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3H4.85A3 3 0 0 1 2 19V5a3 3 0 0 1 3-3h14ZM5 4a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H5Z
+    </StreamGeometry>
     <StreamGeometry x:Key="SemiIconShrinkScreenStroked">
         M3.7 2.3a1 1 0 0 0-1.4 1.4l5.79 5.8H4.5a1 1 0 0 0 0 2h6a1 1 0 0 0 1-1v-6a1 1 0 1 0-2 0v3.59l-5.8-5.8Zm8.88 10.82a1 1 0 0 0-.08.38v6a1 1 0 1 0 2 0v-3.59l5.8 5.8a1 1 0 0 0 1.4-1.42l-5.79-5.79h3.59a1 1 0 1 0 0-2h-6a1 1 0 0 0-.7.29l-.01.01a1 1 0 0 0-.21.32Z
     </StreamGeometry>
@@ -381,6 +483,9 @@
     <StreamGeometry x:Key="SemiIconStoryStroked">
         M20.36 12a8.36 8.36 0 1 1-16.72 0 8.36 8.36 0 0 1 16.72 0ZM23 12a11 11 0 1 1-22 0 11 11 0 0 1 22 0Zm-5.45-2.15A1.32 1.32 0 1 0 15.7 8l-5.67 5.66-2.37-2.36a1.32 1.32 0 0 0-1.86 1.86l3.3 3.3a1.32 1.32 0 0 0 1.86 0l6.6-6.6Z
     </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconSunStroked">
+        M12 20c.83 0 1.5.67 1.5 1.5v1a1.5 1.5 0 0 1-3 0v-1c0-.83.67-1.5 1.5-1.5Zm-7.78-2.34a1.5 1.5 0 1 1 2.12 2.12l-.7.7a1.5 1.5 0 0 1-2.13-2.12l.71-.7Zm13.44 0a1.5 1.5 0 0 1 2.12 0l.7.7a1.5 1.5 0 0 1-2.12 2.13l-.7-.71a1.5 1.5 0 0 1 0-2.12ZM12 5a7 7 0 1 1 0 14 7 7 0 0 1 0-14Zm0 2a5 5 0 1 0 0 10 5 5 0 0 0 0-10Zm-9.5 3.5a1.5 1.5 0 0 1 0 3h-1a1.5 1.5 0 0 1 0-3h1Zm20 0a1.5 1.5 0 0 1 0 3h-1a1.5 1.5 0 0 1 0-3h1ZM3.51 3.51a1.5 1.5 0 0 1 2.13 0l.7.71a1.5 1.5 0 1 1-2.12 2.12l-.7-.7a1.5 1.5 0 0 1 0-2.13Zm14.85 0a1.5 1.5 0 0 1 2.13 2.13l-.71.7a1.5 1.5 0 1 1-2.12-2.12l.7-.7ZM12 0c.83 0 1.5.67 1.5 1.5v1a1.5 1.5 0 0 1-3 0v-1c0-.83.67-1.5 1.5-1.5Z
+    </StreamGeometry>
     <StreamGeometry x:Key="SemiIconTabArrowStroked">
         M2 5c0-1.1.9-2 2-2h11a1 1 0 1 1 0 2H4v14h16v-8a1 1 0 1 1 2 0v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5Z
         M18.3 8.7a1 1 0 0 1 0-1.4L19.58 6l-1.3-1.3a1 1 0 0 1 1.42-1.4l2 2a1 1 0 0 1 0 1.4l-2 2a1 1 0 0 1-1.42 0Z
@@ -435,6 +540,11 @@
     <StreamGeometry x:Key="SemiIconUnlockStroked">
         M12 3a3 3 0 0 0-3 3v2h9a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V10c0-1.1.9-2 2-2h1V6a5 5 0 0 1 10 0h-2a3 3 0 0 0-3-3ZM6 20h12V10H6v10Zm8-5a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z
     </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconUserCardVideoStroked">
+        M8 11H5V8h3v3Z
+        M14 4a2 2 0 0 1 2 2v12a2 2 0 0 1-1.8 1.99L14 20H3l-.2-.01A2 2 0 0 1 1 18V6c0-1.1.9-2 2-2h11ZM3 18h11V6H3v12Z
+        M21.55 6.72a1 1 0 0 1 1.45.9v8.76a1 1 0 0 1-1.45.9l-4-2a1 1 0 0 1-.55-.9V9.62a1 1 0 0 1 .55-.9l4-2ZM19 10.24v3.52l2 1V9.24l-2 1Z
+    </StreamGeometry>
     <StreamGeometry x:Key="SemiIconUserCircleStroked">
         M23.03 12.03a11 11 0 1 1-22 0 11 11 0 0 1 22 0Zm-4.3 6.01A9 9 0 1 0 5.3 18a7.02 7.02 0 0 1 3.57-4.25A4.49 4.49 0 0 1 12 6a4.5 4.5 0 0 1 3.13 7.74 7.02 7.02 0 0 1 3.6 4.3Zm-1.75 1.5a5 5 0 0 0-9.96-.03 8.96 8.96 0 0 0 9.96.04ZM12 13a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z
     </StreamGeometry>
@@ -464,6 +574,17 @@
     <StreamGeometry x:Key="SemiIconVideoUrlStroked">
         M4 2a2 2 0 0 0-2 2v16c0 1.1.9 2 2 2h4a1 1 0 1 0 0-2H4V4h16v10a1 1 0 1 0 2 0V4a2 2 0 0 0-2-2H4Zm5.5 5.13A1 1 0 0 0 8 8v8a1 1 0 0 0 1.5.87l7-4a1 1 0 0 0 0-1.74l-7-4ZM13.98 12 10 14.28V9.72L13.98 12ZM11 17h1v4h1v-4h1v4.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5V17Zm9 0h-1v4.5c0 .28.22.5.5.5H22v-1h-2v-4Zm-4.5 0a.5.5 0 0 0-.5.5V22h1v-2h.17l.83 2h1l-.77-2h.27a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5h-2Zm1.5 1h-1v1h1v-1Z
     </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconVolume1Stroked">
+        M10.38 2.22A1 1 0 0 1 12 3v18a1 1 0 0 1-1.63.78L4.66 17H2a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h2.65l5.72-4.78ZM5.92 8.54A2 2 0 0 1 4.65 9H3v6h1.65a2 2 0 0 1 1.28.46l4.07 3.4V5.14l-4.07 3.4Z
+        M14.17 8.45a1 1 0 0 1 1.38-.28l.12.08.23.19A4.84 4.84 0 0 1 17.5 12a4.7 4.7 0 0 1-1.83 3.75l-.11.08a1 1 0 0 1-1.12-1.66l.13-.1c.1-.1.24-.23.38-.42.28-.37.55-.92.55-1.65a2.7 2.7 0 0 0-1.06-2.17 1 1 0 0 1-.27-1.38Z
+    </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconVolume2Stroked">
+        M10.38 2.22A1 1 0 0 1 12 3v18a1 1 0 0 1-1.63.78L4.66 17H2a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h2.65l5.72-4.78ZM5.92 8.54A2 2 0 0 1 4.65 9H3v6h1.65a2 2 0 0 1 1.28.46l4.07 3.4V5.14l-4.07 3.4Z
+        M20 12c0-2.03-.86-3.56-1.76-4.6a8.55 8.55 0 0 0-1.74-1.54 1 1 0 1 1 1-1.72l.07.04a5.55 5.55 0 0 1 .67.47c.42.32.97.8 1.52 1.45A8.98 8.98 0 0 1 22 12a8.98 8.98 0 0 1-2.24 5.9 10.56 10.56 0 0 1-2.19 1.92l-.06.04a1 1 0 0 1-1.01-1.72l.12-.08.4-.29c.32-.26.77-.65 1.22-1.17A6.98 6.98 0 0 0 20 12Zm-5.56 2.17.13-.1c.1-.1.24-.23.38-.42.28-.37.55-.92.55-1.65a2.7 2.7 0 0 0-1.06-2.17 1 1 0 0 1 1.11-1.66l.12.08.23.19A4.84 4.84 0 0 1 17.5 12a4.7 4.7 0 0 1-1.83 3.75l-.11.08a1 1 0 0 1-1.12-1.66Z
+    </StreamGeometry>
+    <StreamGeometry x:Key="SemiIconVolumeSilentStroked">
+        M10.38 2.22A1 1 0 0 1 12 3v18a1 1 0 0 1-1.63.78L4.66 17H2a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h2.65l5.72-4.78ZM5.92 8.54A2 2 0 0 1 4.65 9H3v6h1.65a2 2 0 0 1 1.28.46l4.07 3.4V5.14l-4.07 3.4Z
+    </StreamGeometry>
     <StreamGeometry x:Key="SemiIconVoteStroked">
         M5 4.5C5 3.67 5.67 3 6.5 3h11c.83 0 1.5.67 1.5 1.5v11c0 .83-.67 1.5-1.5 1.5h-11A1.5 1.5 0 0 1 5 15.5v-11ZM7 5v10h10V5H7ZM5 19.5c0-.28.22-.5.5-.5h13c.28 0 .5.22.5.5v1a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-1ZM2 14a1 1 0 0 0-1 1v5.5c0 .28.22.5.5.5h1a.5.5 0 0 0 .5-.5V16h.5a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5H2Zm19 2h-.5a.5.5 0 0 1-.5-.5v-1c0-.28.22-.5.5-.5H22a1 1 0 0 1 1 1v5.5a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5V16Zm-5.3-7.3a1 1 0 0 0-1.4-1.4L11 10.58l-1.3-1.3a1 1 0 0 0-1.4 1.42l2 2a1 1 0 0 0 1.4 0l4-4Z
     </StreamGeometry>
@@ -474,6 +595,9 @@
         M14 3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0V4h-5a1 1 0 0 1-1-1Zm-4 18a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-6a1 1 0 1 1 2 0v5h5a1 1 0 0 1 1 1ZM2 9a1 1 0 0 0 2 0V4h5a1 1 0 1 0 0-2H3a1 1 0 0 0-1 1v6Zm19 5a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-6a1 1 0 1 1 0-2h5v-5a1 1 0 0 1 1-1ZM8.5 7.5a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1v-7a1 1 0 0 0-1-1h-7Zm1 7v-5h5v5h-5Z
     </StreamGeometry>
 
+    <StreamGeometry x:Key="SemiIconWrenchStroked">
+        M13.92 8.46a5.46 5.46 0 0 0-6.61-5.34l2.13 2.13c.75.76.75 1.97 0 2.72L7.97 9.44c-.75.75-1.96.75-2.72 0L3.12 7.3a5.48 5.48 0 0 0 5.34 6.61c.7 0 1.36-.13 1.97-.37l.61-.23 7.43 7.43c.33.33.87.33 1.2 0l1.08-1.08a.85.85 0 0 0 0-1.2l-7.43-7.43.23-.6c.24-.62.37-1.28.37-1.98Zm2 0c0 .72-.1 1.4-.29 2.06l6.54 6.54a2.85 2.85 0 0 1 0 4.03l-1.09 1.08a2.85 2.85 0 0 1-4.02 0l-6.54-6.54a7.46 7.46 0 0 1-8.99-9.94l.09-.18c.48-.86 1.62-.91 2.25-.28l2.74 2.74L7.97 6.6 5.23 3.87c-.67-.67-.57-1.93.46-2.34l.33-.12a7.45 7.45 0 0 1 9.9 7.05Z
+    </StreamGeometry>
     <StreamGeometry x:Key="SemiIconConfigStroked">
         M16.95 4.24c0-.63.5-1.13 1.13-1.13h3.31a1.13 1.13 0 0 1 0 2.25h-3.31c-.62 0-1.13-.5-1.13-1.12Z
         M13.66.9c.62 0 1.12.5 1.12 1.13v4.42a1.13 1.13 0 0 1-2.25 0V2.03c0-.63.5-1.13 1.13-1.13Z

src/Semi.Avalonia/Index.axaml

@@ -4,17 +4,18 @@
     <Styles.Resources>
         <ResourceDictionary>
             <ResourceDictionary.ThemeDictionaries>
-                <ResourceInclude x:Key="Default" Source="/Schemes/LightScheme.axaml" />
-                <ResourceInclude x:Key="Dark" Source="/Schemes/DarkScheme.axaml" />
-                <ResourceInclude x:Key="{x:Static semi:SemiTheme.Aquatic}" Source="/Schemes/AquaticScheme.axaml" />
-                <ResourceInclude x:Key="{x:Static semi:SemiTheme.Desert}" Source="/Schemes/DesertScheme.axaml" />
-                <ResourceInclude x:Key="{x:Static semi:SemiTheme.Dusk}" Source="/Schemes/DuskScheme.axaml" />
-                <ResourceInclude x:Key="{x:Static semi:SemiTheme.NightSky}" Source="/Schemes/NightSkyScheme.axaml" />
+                <ResourceInclude x:Key="Default" Source="/Themes/Light/_index.axaml" />
+                <ResourceInclude x:Key="Light" Source="/Themes/Light/_index.axaml" />
+                <ResourceInclude x:Key="Dark" Source="/Themes/Dark/_index.axaml" />
+                <ResourceInclude x:Key="{x:Static semi:SemiTheme.Aquatic}" Source="/Themes/HighContrast/_index.axaml" />
+                <ResourceInclude x:Key="{x:Static semi:SemiTheme.Desert}" Source="/Themes/HighContrast/_index.axaml" />
+                <ResourceInclude x:Key="{x:Static semi:SemiTheme.Dusk}" Source="/Themes/HighContrast/_index.axaml" />
+                <ResourceInclude x:Key="{x:Static semi:SemiTheme.NightSky}" Source="/Themes/HighContrast/_index.axaml" />
             </ResourceDictionary.ThemeDictionaries>
             <ResourceDictionary.MergedDictionaries>
                 <ResourceInclude Source="/Controls/_index.axaml" />
                 <ResourceInclude Source="/Themes/Shared/_index.axaml" />
-                <ResourceInclude Source="/Tokens/Variables.axaml" />
+                <ResourceInclude Source="/Tokens/_index.axaml" />
                 <ResourceInclude Source="/Locale/zh-cn.axaml" />
                 <semi:Icons />
             </ResourceDictionary.MergedDictionaries>

src/Semi.Avalonia/Properties/AssemblyInfo.cs

@@ -2,4 +2,6 @@
 
 [assembly: XmlnsPrefix("https://irihi.tech/semi", "semi")]
 [assembly: XmlnsDefinition("https://irihi.tech/semi", "Semi.Avalonia")]
-[assembly: XmlnsDefinition("https://irihi.tech/semi", "Semi.Avalonia.Converters")]
+[assembly: XmlnsDefinition("https://irihi.tech/semi", "Semi.Avalonia.Converters")]
+[assembly: XmlnsDefinition("https://irihi.tech/semi", "Semi.Avalonia.Tokens")]
+[assembly: XmlnsDefinition("https://irihi.tech/semi", "Semi.Avalonia.Tokens.Palette")]

src/Semi.Avalonia/Schemes/AquaticScheme.axaml

@@ -1,6 +0,0 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <ResourceDictionary.MergedDictionaries>
-        <ResourceInclude Source="/Tokens/HighContrast/Aquatic.axaml" />
-        <ResourceInclude Source="/Themes/HighContrast/_index.axaml" />
-    </ResourceDictionary.MergedDictionaries>
-</ResourceDictionary>

src/Semi.Avalonia/Schemes/DarkScheme.axaml

@@ -1,6 +0,0 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <ResourceDictionary.MergedDictionaries>
-        <ResourceInclude Source="/Tokens/Palette/Dark.axaml" />
-        <ResourceInclude Source="/Themes/Dark/_index.axaml" />
-    </ResourceDictionary.MergedDictionaries>
-</ResourceDictionary>

src/Semi.Avalonia/Schemes/DesertScheme.axaml

@@ -1,6 +0,0 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <ResourceDictionary.MergedDictionaries>
-        <ResourceInclude Source="/Tokens/HighContrast/Desert.axaml" />
-        <ResourceInclude Source="/Themes/HighContrast/_index.axaml" />
-    </ResourceDictionary.MergedDictionaries>
-</ResourceDictionary>

src/Semi.Avalonia/Schemes/DuskScheme.axaml

@@ -1,6 +0,0 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <ResourceDictionary.MergedDictionaries>
-        <ResourceInclude Source="/Tokens/HighContrast/Dusk.axaml" />
-        <ResourceInclude Source="/Themes/HighContrast/_index.axaml" />
-    </ResourceDictionary.MergedDictionaries>
-</ResourceDictionary>

src/Semi.Avalonia/Schemes/LightScheme.axaml

@@ -1,6 +0,0 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <ResourceDictionary.MergedDictionaries>
-        <ResourceInclude Source="/Tokens/Palette/Light.axaml" />
-        <ResourceInclude Source="/Themes/Light/_index.axaml" />
-    </ResourceDictionary.MergedDictionaries>
-</ResourceDictionary>

src/Semi.Avalonia/Schemes/NightSkyScheme.axaml

@@ -1,6 +0,0 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <ResourceDictionary.MergedDictionaries>
-        <ResourceInclude Source="/Tokens/HighContrast/NightSky.axaml" />
-        <ResourceInclude Source="/Themes/HighContrast/_index.axaml" />
-    </ResourceDictionary.MergedDictionaries>
-</ResourceDictionary>

src/Semi.Avalonia/Semi.Avalonia.csproj

@@ -1,9 +1,9 @@
 <Project Sdk="Microsoft.NET.Sdk">
 
     <PropertyGroup>
-        <TargetFramework>net8.0</TargetFramework>
-        <Version>11.3.7.2</Version>
-        <PackageReleaseNotes>Update to Semi.Avalonia 11.3.7.2</PackageReleaseNotes>
+        <TargetFrameworks>net8.0;net10.0</TargetFrameworks>
+        <Version>12.0.0-rc1</Version>
+        <PackageReleaseNotes>Update to Semi.Avalonia 12.0.0-rc1</PackageReleaseNotes>
         <Title>Semi.Avalonia</Title>
     </PropertyGroup>
 

src/Semi.Avalonia/SemiTheme.axaml

@@ -5,19 +5,20 @@
     <Styles.Resources>
         <ResourceDictionary>
             <ResourceDictionary.ThemeDictionaries>
-                <ResourceInclude x:Key="Default" Source="/Schemes/LightScheme.axaml" />
-                <ResourceInclude x:Key="Dark" Source="/Schemes/DarkScheme.axaml" />
-                <ResourceInclude x:Key="{x:Static semi:SemiTheme.Aquatic}" Source="/Schemes/AquaticScheme.axaml" />
-                <ResourceInclude x:Key="{x:Static semi:SemiTheme.Desert}" Source="/Schemes/DesertScheme.axaml" />
-                <ResourceInclude x:Key="{x:Static semi:SemiTheme.Dusk}" Source="/Schemes/DuskScheme.axaml" />
-                <ResourceInclude x:Key="{x:Static semi:SemiTheme.NightSky}" Source="/Schemes/NightSkyScheme.axaml" />
+                <ResourceInclude x:Key="Default" Source="/Themes/Light/_index.axaml" />
+                <ResourceInclude x:Key="Light" Source="/Themes/Light/_index.axaml" />
+                <ResourceInclude x:Key="Dark" Source="/Themes/Dark/_index.axaml" />
+                <ResourceInclude x:Key="{x:Static semi:SemiTheme.Aquatic}" Source="/Themes/HighContrast/_index.axaml" />
+                <ResourceInclude x:Key="{x:Static semi:SemiTheme.Desert}" Source="/Themes/HighContrast/_index.axaml" />
+                <ResourceInclude x:Key="{x:Static semi:SemiTheme.Dusk}" Source="/Themes/HighContrast/_index.axaml" />
+                <ResourceInclude x:Key="{x:Static semi:SemiTheme.NightSky}" Source="/Themes/HighContrast/_index.axaml" />
             </ResourceDictionary.ThemeDictionaries>
             <ResourceDictionary.MergedDictionaries>
                 <ResourceInclude Source="/Controls/_index.axaml" />
                 <ResourceInclude Source="/Themes/Shared/_index.axaml" />
-                <ResourceInclude Source="/Tokens/Variables.axaml" />
+                <ResourceInclude Source="/Tokens/_index.axaml" />
                 <ResourceInclude Source="/Locale/zh-cn.axaml" />
-                <ResourceInclude Source="/Icons/_index.axaml" />
+                <semi:Icons />
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </Styles.Resources>

src/Semi.Avalonia/SemiTheme.axaml.cs

@@ -3,6 +3,7 @@ using System.Globalization;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Styling;
+using Irihi.Avalonia.Shared.Helpers;
 using Semi.Avalonia.Locale;
 
 namespace Semi.Avalonia;
@@ -36,43 +37,27 @@ public class SemiTheme : Styles
 
     private static readonly ResourceDictionary DefaultResource = new zh_cn();
 
-    private CultureInfo? _locale;
-
     public CultureInfo? Locale
     {
-        get => _locale;
+        get;
         set
         {
             try
             {
                 if (TryGetLocaleResource(value, out var resource) && resource is not null)
                 {
-                    _locale = value;
-                    if (Resources is ResourceDictionary rd)
-                    {
-                        rd.SetItems(resource);
-                    }
-                    else
-                    {
-                        foreach (var kv in resource) Resources[kv.Key] = kv.Value;
-                    }
+                    field = value;
+                    Resources.BulkSetResources(resource);
                 }
                 else
                 {
-                    _locale = new CultureInfo("zh-CN");
-                    if (Resources is ResourceDictionary rd)
-                    {
-                        rd.SetItems(DefaultResource);
-                    }
-                    else
-                    {
-                        foreach (var kv in DefaultResource) Resources[kv.Key] = kv.Value;
-                    }
+                    field = new CultureInfo("zh-CN");
+                    Resources.BulkSetResources(DefaultResource);
                 }
             }
             catch
             {
-                _locale = CultureInfo.InvariantCulture;
+                field = CultureInfo.InvariantCulture;
             }
         }
     }
@@ -105,28 +90,13 @@ public class SemiTheme : Styles
     {
         if (culture is null) return;
         if (!LocaleToResource.TryGetValue(culture, out var resources)) return;
-
-        if (application.Resources is ResourceDictionary rd)
-        {
-            rd.SetItems(resources);
-        }
-        else
-        {
-            foreach (var kv in resources) application.Resources[kv.Key] = kv.Value;
-        }
+        application.Resources.BulkSetResources(resources);
     }
 
     public static void OverrideLocaleResources(StyledElement element, CultureInfo? culture)
     {
         if (culture is null) return;
         if (!LocaleToResource.TryGetValue(culture, out var resources)) return;
-        if (element.Resources is ResourceDictionary rd)
-        {
-            rd.SetItems(resources);
-        }
-        else
-        {
-            foreach (var kv in resources) element.Resources[kv.Key] = kv.Value;
-        }
+        element.Resources.BulkSetResources(resources);
     }
 }

src/Semi.Avalonia/Themes/Dark/CommandBar.axaml

@@ -0,0 +1,24 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  AppBarButton / AppBarToggleButton  -->
+    <SolidColorBrush x:Key="AppBarButtonBackground" Color="Transparent" />
+    <StaticResource x:Key="AppBarButtonForeground" ResourceKey="SemiColorText0" />
+    <StaticResource x:Key="AppBarButtonPointeroverBackground" ResourceKey="SemiColorFill0" />
+    <StaticResource x:Key="AppBarButtonPressedBackground" ResourceKey="SemiColorFill1" />
+    <StaticResource x:Key="AppBarButtonDisabledForeground" ResourceKey="SemiColorDisabledText" />
+    <!--  AppBarToggleButton checked state  -->
+    <StaticResource x:Key="AppBarToggleButtonCheckedForeground" ResourceKey="SemiColorPrimary" />
+    <StaticResource x:Key="AppBarToggleButtonCheckedBackground" ResourceKey="SemiColorPrimaryLight" />
+    <StaticResource x:Key="AppBarToggleButtonCheckedPointeroverBackground" ResourceKey="SemiColorPrimaryLightPointerover" />
+    <StaticResource x:Key="AppBarToggleButtonCheckedPressedBackground" ResourceKey="SemiColorPrimaryLightActive" />
+    <StaticResource x:Key="AppBarToggleButtonCheckedDisabledForeground" ResourceKey="SemiColorPrimaryDisabled" />
+    <!--  AppBarSeparator  -->
+    <StaticResource x:Key="AppBarSeparatorBackground" ResourceKey="SemiColorBorder" />
+    <!--  CommandBar  -->
+    <StaticResource x:Key="CommandBarBackground" ResourceKey="SemiColorBackground1" />
+    <StaticResource x:Key="CommandBarForeground" ResourceKey="SemiColorText0" />
+    <StaticResource x:Key="CommandBarBorderBrush" ResourceKey="SemiColorBorder" />
+    <!--  CommandBar overflow popup  -->
+    <StaticResource x:Key="CommandBarOverflowBackground" ResourceKey="SemiColorBackground3" />
+    <StaticResource x:Key="CommandBarOverflowBorderBrush" ResourceKey="SemiColorBorder" />
+    <StaticResource x:Key="CommandBarOverflowBoxShadow" ResourceKey="SemiShadowElevated" />
+</ResourceDictionary>

src/Semi.Avalonia/Themes/Dark/ContentPage.axaml

@@ -0,0 +1,5 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  ContentPage  -->
+    <StaticResource x:Key="ContentPageBackground" ResourceKey="SemiColorBackground0" />
+    <StaticResource x:Key="ContentPageForeground" ResourceKey="SemiColorText0" />
+</ResourceDictionary>

src/Semi.Avalonia/Themes/Dark/DrawerPage.axaml

@@ -0,0 +1,13 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  DrawerPage background  -->
+    <StaticResource x:Key="DrawerPageBackground" ResourceKey="SemiColorBackground0" />
+    <StaticResource x:Key="DrawerPageForeground" ResourceKey="SemiColorText0" />
+    <!--  Top bar  -->
+    <StaticResource x:Key="DrawerPageTopBarBackground" ResourceKey="SemiColorBackground1" />
+    <StaticResource x:Key="DrawerPageTopBarBorderBrush" ResourceKey="SemiColorBorder" />
+    <!--  Drawer pane  -->
+    <StaticResource x:Key="DrawerPageDrawerBackground" ResourceKey="SemiColorNavBackground" />
+    <!--  Pane button  -->
+    <SolidColorBrush x:Key="DrawerPagePaneButtonBackground" Color="Transparent" />
+    <StaticResource x:Key="DrawerPagePaneButtonForeground" ResourceKey="SemiColorText0" />
+</ResourceDictionary>