diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 1d2850f..a08652b 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -66,3 +66,22 @@ jobs:
- name: Build MAUI Demo (Windows)
run: dotnet build examples/MAUI.Demo/MAUI.Demo.csproj --configuration Release --framework net10.0-windows10.0.19041.0
+
+ # Avalonia is the cross-desktop target, so its demo builds on all three desktop OSes
+ build-avalonia:
+ strategy:
+ fail-fast: false
+ matrix:
+ os: [ubuntu-latest, windows-latest, macos-latest]
+ runs-on: ${{ matrix.os }}
+
+ steps:
+ - uses: actions/checkout@v4
+
+ - name: Setup .NET
+ uses: actions/setup-dotnet@v4
+ with:
+ dotnet-version: 10.0.x
+
+ - name: Build Avalonia Demo
+ run: dotnet build examples/Avalonia.Demo/AvaloniaDemo.csproj --configuration Release
diff --git a/ShellUI.Native.slnx b/ShellUI.Native.slnx
index 0ecb332..d125114 100644
--- a/ShellUI.Native.slnx
+++ b/ShellUI.Native.slnx
@@ -6,6 +6,7 @@
+
VariantProperty =
- AvaloniaProperty.Register(nameof(Variant), ButtonVariant.Default);
+ public static readonly StyledProperty TextProperty =
+ AvaloniaProperty.Register(nameof(Text));
- public ButtonVariant Variant
- {
- get => GetValue(VariantProperty);
- set => SetValue(VariantProperty, value);
- }
+ private readonly TextBlock _label = new() { FontSize = 12 };
- static Button()
+ public Badge()
{
- VariantProperty.Changed.AddClassHandler((button, _) => button.UpdateVisualState());
+ this.Token(BackgroundProperty, ShellToken.Primary);
+ Child = _label.Token(TextBlock.ForegroundProperty, ShellToken.PrimaryForeground);
}
}
```
-Not implemented yet — this illustrates the target shape once Template System v2 lands and
-`ShellUI.Native.Avalonia` is scaffolded.
+Components are developed in `examples/Avalonia.Demo/Components/UI/` and copied into the
+templates' `[NativePlatform.Avalonia]` entries by `scripts/sync-templates.py`. A component gets
+an Avalonia entry only after its MAUI one exists, and only if every dependency has one too
+(checked by `TemplateContentTests`).
## Versioning Strategy
diff --git a/docs/COMPONENTS.md b/docs/COMPONENTS.md
index 47a380f..909c74e 100644
--- a/docs/COMPONENTS.md
+++ b/docs/COMPONENTS.md
@@ -65,6 +65,29 @@ your background so the splash-to-app transition doesn't flash the template's pur
---
+## Avalonia (in progress)
+
+Ported so far: `shell`, `icon`, `theme-toggle` and P0 (`button`, `input`, `label`, `checkbox`,
+`switch`, `card` and its parts, `separator`, `badge`, `progress`, `alert`). Not yet published to
+NuGet. In an Avalonia project, `shellui-native list` shows only these.
+
+Setup after `shellui-native init`: call `Components.UI.ShellTheme.EnsureInitialized();` in
+`App.Initialize` after `AvaloniaXamlLoader.Load(this);`, and add
+`xmlns:ui="using:YourApp.Components.UI"` to your XAML. Switch theme with
+`ShellTheme.SetTheme(ThemeVariant.Dark)` or `ShellTheme.ToggleTheme()`.
+
+Same names, properties and variants as MAUI, except:
+
+| | MAUI | Avalonia |
+|---|---|---|
+| Icon | `
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/Avalonia.Demo/App.axaml.cs b/examples/Avalonia.Demo/App.axaml.cs
new file mode 100644
index 0000000..0076319
--- /dev/null
+++ b/examples/Avalonia.Demo/App.axaml.cs
@@ -0,0 +1,26 @@
+using Avalonia;
+using Avalonia.Controls.ApplicationLifetimes;
+using Avalonia.Markup.Xaml;
+using AvaloniaDemo.Components.UI;
+
+namespace AvaloniaDemo;
+
+public partial class App : Application
+{
+ public override void Initialize()
+ {
+ AvaloniaXamlLoader.Load(this);
+ // Publish the ShellUI theme tokens before the first window resolves {DynamicResource ShellUI*}.
+ ShellTheme.EnsureInitialized();
+ }
+
+ public override void OnFrameworkInitializationCompleted()
+ {
+ if (ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop)
+ {
+ desktop.MainWindow = new MainWindow();
+ }
+
+ base.OnFrameworkInitializationCompleted();
+ }
+}
\ No newline at end of file
diff --git a/examples/Avalonia.Demo/AvaloniaDemo.csproj b/examples/Avalonia.Demo/AvaloniaDemo.csproj
new file mode 100644
index 0000000..fa533e9
--- /dev/null
+++ b/examples/Avalonia.Demo/AvaloniaDemo.csproj
@@ -0,0 +1,21 @@
+
+
+ WinExe
+ net10.0
+ enable
+
+ disable
+ app.manifest
+
+
+
+
+ None
+ All
+
+
+
diff --git a/examples/Avalonia.Demo/Components/UI/Alert.cs b/examples/Avalonia.Demo/Components/UI/Alert.cs
new file mode 100644
index 0000000..bbf878d
--- /dev/null
+++ b/examples/Avalonia.Demo/Components/UI/Alert.cs
@@ -0,0 +1,98 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Layout;
+using Avalonia.Media;
+
+namespace AvaloniaDemo.Components.UI;
+
+// Callout with icon, title and message — rounded-lg border p-4, icon + text tinted per variant.
+public class Alert : Border
+{
+ public static readonly StyledProperty TitleProperty =
+ AvaloniaProperty.Register(nameof(Title));
+
+ public static readonly StyledProperty MessageProperty =
+ AvaloniaProperty.Register(nameof(Message));
+
+ public static readonly StyledProperty VariantProperty =
+ AvaloniaProperty.Register(nameof(Variant));
+
+ private readonly Icon _icon;
+ private readonly TextBlock _titleLabel;
+ private readonly TextBlock _messageLabel;
+
+ static Alert()
+ {
+ TitleProperty.Changed.AddClassHandler((a, _) => a.UpdateVisualState());
+ MessageProperty.Changed.AddClassHandler((a, _) => a.UpdateVisualState());
+ VariantProperty.Changed.AddClassHandler((a, _) => a.UpdateVisualState());
+ }
+
+ public string? Title
+ {
+ get => GetValue(TitleProperty);
+ set => SetValue(TitleProperty, value);
+ }
+
+ public string? Message
+ {
+ get => GetValue(MessageProperty);
+ set => SetValue(MessageProperty, value);
+ }
+
+ public AlertVariant Variant
+ {
+ get => GetValue(VariantProperty);
+ set => SetValue(VariantProperty, value);
+ }
+
+ public Alert()
+ {
+ _icon = new Icon { Size = 16, VerticalAlignment = VerticalAlignment.Top, Margin = new Thickness(0, 2, 0, 0) };
+ _titleLabel = new TextBlock { FontSize = 14, FontWeight = FontWeight.SemiBold, TextWrapping = TextWrapping.Wrap };
+ _messageLabel = new TextBlock { FontSize = 14, TextWrapping = TextWrapping.Wrap };
+
+ var text = new StackPanel { Spacing = 4, Children = { _titleLabel, _messageLabel } };
+ Grid.SetColumn(text, 1);
+ Child = new Grid { ColumnDefinitions = new ColumnDefinitions("Auto,*"), ColumnSpacing = 12, Children = { _icon, text } };
+ Padding = new Thickness(16, 12);
+ BorderThickness = new Thickness(1);
+ CornerRadius = new CornerRadius(ShellTheme.RadiusLg);
+ this.Token(BackgroundProperty, ShellToken.Card);
+ UpdateVisualState();
+ }
+
+ private void UpdateVisualState()
+ {
+ var (icon, accent) = Variant switch
+ {
+ AlertVariant.Destructive => (IconName.CircleAlert, ShellToken.Destructive),
+ AlertVariant.Success => (IconName.CircleCheck, ShellToken.Success),
+ AlertVariant.Warning => (IconName.TriangleAlert, ShellToken.Warning),
+ AlertVariant.Info => (IconName.Info, ShellToken.Info),
+ _ => (IconName.Info, ShellToken.Foreground)
+ };
+
+ _icon.Kind = icon;
+ _icon.Token = accent;
+ _titleLabel.Text = Title ?? string.Empty;
+ _titleLabel.IsVisible = !string.IsNullOrEmpty(Title);
+ _messageLabel.Text = Message ?? string.Empty;
+ _messageLabel.IsVisible = !string.IsNullOrEmpty(Message);
+
+ // Tinted variants color the title; the message stays readable in the muted foreground.
+ _titleLabel.Token(TextBlock.ForegroundProperty, accent);
+ _messageLabel.Token(TextBlock.ForegroundProperty,
+ Variant == AlertVariant.Default ? ShellToken.MutedForeground : ShellToken.Foreground);
+ this.Token(BorderBrushProperty, Variant == AlertVariant.Default ? ShellToken.Border : accent);
+ }
+}
+
+public enum AlertVariant
+{
+ Default,
+ Destructive,
+ Success,
+ Warning,
+ Info
+}
diff --git a/examples/Avalonia.Demo/Components/UI/Badge.cs b/examples/Avalonia.Demo/Components/UI/Badge.cs
new file mode 100644
index 0000000..86064c1
--- /dev/null
+++ b/examples/Avalonia.Demo/Components/UI/Badge.cs
@@ -0,0 +1,82 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Layout;
+using Avalonia.Media;
+
+namespace AvaloniaDemo.Components.UI;
+
+// Status pill — rounded-full border px-2.5 py-0.5 text-xs font-semibold.
+public class Badge : Border
+{
+ public static readonly StyledProperty TextProperty =
+ AvaloniaProperty.Register(nameof(Text));
+
+ public static readonly StyledProperty VariantProperty =
+ AvaloniaProperty.Register(nameof(Variant));
+
+ private readonly TextBlock _label;
+
+ static Badge()
+ {
+ TextProperty.Changed.AddClassHandler((b, e) => b._label.Text = (string?)e.NewValue ?? string.Empty);
+ VariantProperty.Changed.AddClassHandler((b, _) => b.UpdateVisualState());
+ }
+
+ public string? Text
+ {
+ get => GetValue(TextProperty);
+ set => SetValue(TextProperty, value);
+ }
+
+ public BadgeVariant Variant
+ {
+ get => GetValue(VariantProperty);
+ set => SetValue(VariantProperty, value);
+ }
+
+ public Badge()
+ {
+ _label = new TextBlock
+ {
+ FontSize = 12,
+ FontWeight = FontWeight.SemiBold,
+ VerticalAlignment = VerticalAlignment.Center,
+ TextAlignment = TextAlignment.Center
+ };
+
+ Child = _label;
+ Padding = new Thickness(10, 2);
+ BorderThickness = new Thickness(1);
+ CornerRadius = new CornerRadius(999);
+ HorizontalAlignment = HorizontalAlignment.Left;
+ VerticalAlignment = VerticalAlignment.Center;
+ UpdateVisualState();
+ }
+
+ private void UpdateVisualState()
+ {
+ // (background, foreground, border); null background = transparent.
+ var (bg, fg, border) = Variant switch
+ {
+ BadgeVariant.Secondary => ((ShellToken?)ShellToken.Secondary, ShellToken.SecondaryForeground, ShellToken.Secondary),
+ BadgeVariant.Destructive => (ShellToken.Destructive, ShellToken.DestructiveForeground, ShellToken.Destructive),
+ BadgeVariant.Outline => (null, ShellToken.Foreground, ShellToken.Border),
+ BadgeVariant.Success => (ShellToken.Success, ShellToken.SuccessForeground, ShellToken.Success),
+ BadgeVariant.Warning => (ShellToken.Warning, ShellToken.WarningForeground, ShellToken.Warning),
+ BadgeVariant.Info => (ShellToken.Info, ShellToken.InfoForeground, ShellToken.Info),
+ _ => (ShellToken.Primary, ShellToken.PrimaryForeground, ShellToken.Primary)
+ };
+
+ if (bg.HasValue)
+ this.Token(BackgroundProperty, bg.Value);
+ else
+ {
+ this.ClearToken(BackgroundProperty);
+ Background = Brushes.Transparent;
+ }
+ this.Token(BorderBrushProperty, border);
+ _label.Token(TextBlock.ForegroundProperty, fg);
+ }
+}
+
+public enum BadgeVariant { Default, Secondary, Destructive, Outline, Success, Warning, Info }
diff --git a/examples/Avalonia.Demo/Components/UI/Button.cs b/examples/Avalonia.Demo/Components/UI/Button.cs
new file mode 100644
index 0000000..f2c21ca
--- /dev/null
+++ b/examples/Avalonia.Demo/Components/UI/Button.cs
@@ -0,0 +1,248 @@
+using System;
+using Avalonia;
+using Avalonia.Animation;
+using Avalonia.Animation.Easings;
+using Avalonia.Controls;
+using Avalonia.Input;
+using Avalonia.Layout;
+using Avalonia.Media;
+using Avalonia.Media.Transformation;
+using Avalonia.Threading;
+using AvaloniaDemo.Components.UI.Variants;
+
+namespace AvaloniaDemo.Components.UI;
+
+// Button with ShellUI variants, sizes, optional icon and loading state.
+// Sizes to its content like an inline-flex button; set HorizontalAlignment="Stretch" for a block button.
+// Usage: VariantProperty =
+ AvaloniaProperty.Register(nameof(Variant));
+
+ public static readonly StyledProperty SizeProperty =
+ AvaloniaProperty.Register(nameof(Size));
+
+ public static readonly StyledProperty IsLoadingProperty =
+ AvaloniaProperty.Register(nameof(IsLoading));
+
+ public static readonly StyledProperty TextProperty =
+ AvaloniaProperty.Register(nameof(Text));
+
+ public static readonly StyledProperty IconProperty =
+ AvaloniaProperty.Register(nameof(Icon));
+
+ public static readonly StyledProperty IconPositionProperty =
+ AvaloniaProperty.Register(nameof(IconPosition));
+
+ private readonly StackPanel _row;
+ private readonly Icon _spinner;
+ private readonly RotateTransform _spin = new();
+ private readonly Icon _icon;
+ private readonly TextBlock _label;
+ private ButtonStyle _style = new();
+ private DispatcherTimer? _spinning;
+ private bool _hovered;
+ private bool _pressed;
+
+ static Button()
+ {
+ VariantProperty.Changed.AddClassHandler((b, _) => b.UpdateVisualState());
+ SizeProperty.Changed.AddClassHandler((b, _) => b.UpdateVisualState());
+ IsLoadingProperty.Changed.AddClassHandler((b, _) => b.UpdateVisualState());
+ TextProperty.Changed.AddClassHandler((b, _) => b.UpdateVisualState());
+ IconProperty.Changed.AddClassHandler((b, _) => b.UpdateVisualState());
+ IconPositionProperty.Changed.AddClassHandler((b, _) => b.UpdateVisualState());
+ IsEnabledProperty.Changed.AddClassHandler((b, _) => b.Opacity = b.IsEnabled ? 1.0 : 0.5);
+ }
+
+ public ButtonVariant Variant
+ {
+ get => GetValue(VariantProperty);
+ set => SetValue(VariantProperty, value);
+ }
+
+ public ButtonSize Size
+ {
+ get => GetValue(SizeProperty);
+ set => SetValue(SizeProperty, value);
+ }
+
+ public bool IsLoading
+ {
+ get => GetValue(IsLoadingProperty);
+ set => SetValue(IsLoadingProperty, value);
+ }
+
+ public string? Text
+ {
+ get => GetValue(TextProperty);
+ set => SetValue(TextProperty, value);
+ }
+
+ public IconName Icon
+ {
+ get => GetValue(IconProperty);
+ set => SetValue(IconProperty, value);
+ }
+
+ public IconPosition IconPosition
+ {
+ get => GetValue(IconPositionProperty);
+ set => SetValue(IconPositionProperty, value);
+ }
+
+ public event EventHandler? Clicked;
+
+ public Button()
+ {
+ _spinner = new Icon { Kind = IconName.LoaderCircle, IsVisible = false, RenderTransform = _spin };
+ _icon = new Icon { IsVisible = false };
+ _label = new TextBlock { VerticalAlignment = VerticalAlignment.Center, FontWeight = FontWeight.Medium };
+ _row = new StackPanel
+ {
+ Orientation = Orientation.Horizontal,
+ Spacing = 8,
+ HorizontalAlignment = HorizontalAlignment.Center,
+ VerticalAlignment = VerticalAlignment.Center
+ };
+
+ Child = _row;
+ HorizontalAlignment = HorizontalAlignment.Left;
+ VerticalAlignment = VerticalAlignment.Center;
+ Cursor = new Cursor(StandardCursorType.Hand);
+ RenderTransform = TransformOperations.Parse("scale(1)");
+ Transitions = new Transitions
+ {
+ new TransformOperationsTransition { Property = RenderTransformProperty, Duration = TimeSpan.FromMilliseconds(90), Easing = new CubicEaseOut() }
+ };
+ ShellFocus.Ring(this, this);
+ UpdateVisualState();
+ }
+
+ private bool CanClick => IsEffectivelyEnabled && !IsLoading;
+
+ // Clicks in code, as a pointer click or Enter/Space would.
+ public void Press()
+ {
+ if (CanClick) Clicked?.Invoke(this, EventArgs.Empty);
+ }
+
+ protected override void OnPointerEntered(PointerEventArgs e)
+ {
+ base.OnPointerEntered(e);
+ _hovered = true;
+ ApplyHover();
+ }
+
+ protected override void OnPointerExited(PointerEventArgs e)
+ {
+ base.OnPointerExited(e);
+ _hovered = false;
+ ApplyHover();
+ }
+
+ protected override void OnPointerPressed(PointerPressedEventArgs e)
+ {
+ base.OnPointerPressed(e);
+ if (!CanClick || !e.GetCurrentPoint(this).Properties.IsLeftButtonPressed) return;
+ _pressed = true;
+ RenderTransform = TransformOperations.Parse("scale(0.97)");
+ e.Handled = true;
+ }
+
+ protected override void OnPointerReleased(PointerReleasedEventArgs e)
+ {
+ base.OnPointerReleased(e);
+ if (!_pressed) return;
+ _pressed = false;
+ RenderTransform = TransformOperations.Parse("scale(1)");
+ // Releasing outside the button cancels the click, as with native buttons.
+ if (new Rect(Bounds.Size).Contains(e.GetPosition(this))) Press();
+ e.Handled = true;
+ }
+
+ protected override void OnPointerCaptureLost(PointerCaptureLostEventArgs e)
+ {
+ base.OnPointerCaptureLost(e);
+ _pressed = false;
+ RenderTransform = TransformOperations.Parse("scale(1)");
+ }
+
+ protected override void OnKeyDown(KeyEventArgs e)
+ {
+ base.OnKeyDown(e);
+ if (e.Key is not (Key.Enter or Key.Space)) return;
+ Press();
+ e.Handled = true;
+ }
+
+ private void UpdateVisualState()
+ {
+ _style = ButtonVariants.GetStyle(Variant, Size);
+
+ Height = _style.Height;
+ Width = _style.Width;
+ Padding = _style.Padding;
+ CornerRadius = new CornerRadius(_style.CornerRadius);
+ BorderThickness = new Thickness(_style.Border.HasValue ? 1 : 0);
+ if (_style.Border.HasValue)
+ this.Token(BorderBrushProperty, _style.Border.Value);
+
+ _label.Text = Text ?? string.Empty;
+ _label.IsVisible = !string.IsNullOrEmpty(Text);
+ _label.FontSize = _style.FontSize;
+ _label.Token(TextBlock.ForegroundProperty, _style.Foreground);
+
+ _icon.Kind = Icon;
+ _icon.Size = _style.IconSize;
+ _icon.Token = _style.Foreground;
+ _icon.IsVisible = Icon != IconName.None && !IsLoading;
+
+ _spinner.Size = _style.IconSize;
+ _spinner.Token = _style.Foreground;
+ _spinner.IsVisible = IsLoading;
+ if (IsLoading) StartSpinner(); else StopSpinner();
+
+ _row.Children.Clear();
+ _row.Children.Add(_spinner);
+ if (IconPosition == IconPosition.Left) { _row.Children.Add(_icon); _row.Children.Add(_label); }
+ else { _row.Children.Add(_label); _row.Children.Add(_icon); }
+
+ ApplyHover();
+ }
+
+ private void ApplyHover()
+ {
+ var hover = _hovered && CanClick;
+ var background = hover && _style.HoverBackground.HasValue ? _style.HoverBackground : _style.Background;
+ if (background.HasValue)
+ this.Token(BackgroundProperty, background.Value);
+ else
+ {
+ // Transparent, not null, so the whole button stays hit-testable.
+ this.ClearToken(BackgroundProperty);
+ Background = Brushes.Transparent;
+ }
+ Opacity = !IsEnabled ? 0.5 : hover ? _style.HoverOpacity : 1.0;
+ _label.TextDecorations = hover && _style.UnderlineOnHover ? TextDecorations.Underline : null;
+ }
+
+ // One turn per 800 ms, advanced once per frame.
+ private void StartSpinner()
+ {
+ if (_spinning != null) return;
+ _spinning = new DispatcherTimer(TimeSpan.FromMilliseconds(16), DispatcherPriority.Render,
+ (_, _) => _spin.Angle = (_spin.Angle + 360 * 16 / 800.0) % 360);
+ _spinning.Start();
+ }
+
+ private void StopSpinner()
+ {
+ _spinning?.Stop();
+ _spinning = null;
+ _spin.Angle = 0;
+ }
+}
+
+public enum IconPosition { Left, Right }
diff --git a/examples/Avalonia.Demo/Components/UI/Card.cs b/examples/Avalonia.Demo/Components/UI/Card.cs
new file mode 100644
index 0000000..8b1c03b
--- /dev/null
+++ b/examples/Avalonia.Demo/Components/UI/Card.cs
@@ -0,0 +1,71 @@
+using System;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Input;
+using Avalonia.Media;
+using Avalonia.Metadata;
+
+namespace AvaloniaDemo.Components.UI;
+
+// Card container — rounded-lg border bg-card shadow-sm.
+// The parts stack inside; XAML children go to Items.
+// Usage: ... ... VariantProperty =
+ AvaloniaProperty.Register(nameof(Variant));
+
+ public static readonly StyledProperty IsPressableProperty =
+ AvaloniaProperty.Register(nameof(IsPressable));
+
+ private const double Radius = ShellTheme.RadiusLg + 4;
+
+ private readonly StackPanel _items = new();
+
+ static Card()
+ {
+ VariantProperty.Changed.AddClassHandler((c, _) => c.UpdateShadow());
+ IsPressableProperty.Changed.AddClassHandler((c, _) =>
+ c.Cursor = c.IsPressable ? new Cursor(StandardCursorType.Hand) : null);
+ }
+
+ public CardVariant Variant
+ {
+ get => GetValue(VariantProperty);
+ set => SetValue(VariantProperty, value);
+ }
+
+ public bool IsPressable
+ {
+ get => GetValue(IsPressableProperty);
+ set => SetValue(IsPressableProperty, value);
+ }
+
+ public event EventHandler? Clicked;
+
+ [Content]
+ public Controls Items => _items.Children;
+
+ public Card()
+ {
+ Child = _items;
+ BorderThickness = new Thickness(1);
+ CornerRadius = new CornerRadius(Radius);
+ this.Token(BackgroundProperty, ShellToken.Card).Token(BorderBrushProperty, ShellToken.Border);
+ UpdateShadow();
+ }
+
+ private void UpdateShadow() => BoxShadow = new BoxShadows(Variant == CardVariant.Elevated
+ ? new BoxShadow { OffsetY = 4, Blur = 12, Color = ShellTheme.Shadow(0.10) }
+ : new BoxShadow { OffsetY = 1, Blur = 2, Color = ShellTheme.Shadow(0.05) });
+
+ protected override void OnPointerReleased(PointerReleasedEventArgs e)
+ {
+ base.OnPointerReleased(e);
+ if (!IsPressable || e.InitialPressMouseButton != MouseButton.Left) return;
+ Clicked?.Invoke(this, EventArgs.Empty);
+ e.Handled = true;
+ }
+}
+
+public enum CardVariant { Default, Elevated }
diff --git a/examples/Avalonia.Demo/Components/UI/CardContent.cs b/examples/Avalonia.Demo/Components/UI/CardContent.cs
new file mode 100644
index 0000000..bf05ddd
--- /dev/null
+++ b/examples/Avalonia.Demo/Components/UI/CardContent.cs
@@ -0,0 +1,10 @@
+using Avalonia;
+using Avalonia.Controls;
+
+namespace AvaloniaDemo.Components.UI;
+
+// Card body — p-6 pt-0.
+public class CardContent : Border
+{
+ public CardContent() => Padding = new Thickness(24, 0, 24, 24);
+}
diff --git a/examples/Avalonia.Demo/Components/UI/CardFooter.cs b/examples/Avalonia.Demo/Components/UI/CardFooter.cs
new file mode 100644
index 0000000..e2a088e
--- /dev/null
+++ b/examples/Avalonia.Demo/Components/UI/CardFooter.cs
@@ -0,0 +1,17 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Layout;
+
+namespace AvaloniaDemo.Components.UI;
+
+// Card footer — flex items-center p-6 pt-0; actions right-aligned.
+public class CardFooter : StackPanel
+{
+ public CardFooter()
+ {
+ Orientation = Orientation.Horizontal;
+ Spacing = 8;
+ HorizontalAlignment = HorizontalAlignment.Right;
+ Margin = new Thickness(24, 0, 24, 24);
+ }
+}
diff --git a/examples/Avalonia.Demo/Components/UI/CardHeader.cs b/examples/Avalonia.Demo/Components/UI/CardHeader.cs
new file mode 100644
index 0000000..c606952
--- /dev/null
+++ b/examples/Avalonia.Demo/Components/UI/CardHeader.cs
@@ -0,0 +1,54 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Media;
+
+namespace AvaloniaDemo.Components.UI;
+
+// Card header — p-6 space-y-1.5; title font-semibold, description text-sm text-muted-foreground.
+public class CardHeader : Border
+{
+ public static readonly StyledProperty TitleProperty =
+ AvaloniaProperty.Register(nameof(Title));
+
+ public static readonly StyledProperty DescriptionProperty =
+ AvaloniaProperty.Register(nameof(Description));
+
+ private readonly TextBlock _title;
+ private readonly TextBlock _description;
+
+ static CardHeader()
+ {
+ TitleProperty.Changed.AddClassHandler((h, _) => h.UpdateText());
+ DescriptionProperty.Changed.AddClassHandler((h, _) => h.UpdateText());
+ }
+
+ public string? Title
+ {
+ get => GetValue(TitleProperty);
+ set => SetValue(TitleProperty, value);
+ }
+
+ public string? Description
+ {
+ get => GetValue(DescriptionProperty);
+ set => SetValue(DescriptionProperty, value);
+ }
+
+ public CardHeader()
+ {
+ _title = new TextBlock { FontSize = 18, FontWeight = FontWeight.SemiBold, TextWrapping = TextWrapping.Wrap };
+ _title.Token(TextBlock.ForegroundProperty, ShellToken.CardForeground);
+ _description = new TextBlock { FontSize = 14, TextWrapping = TextWrapping.Wrap, IsVisible = false };
+ _description.Token(TextBlock.ForegroundProperty, ShellToken.MutedForeground);
+
+ Child = new StackPanel { Spacing = 6, Children = { _title, _description } };
+ Padding = new Thickness(24, 24, 24, 16);
+ }
+
+ private void UpdateText()
+ {
+ _title.Text = Title ?? string.Empty;
+ _description.Text = Description ?? string.Empty;
+ _description.IsVisible = !string.IsNullOrEmpty(Description);
+ }
+}
diff --git a/examples/Avalonia.Demo/Components/UI/Checkbox.cs b/examples/Avalonia.Demo/Components/UI/Checkbox.cs
new file mode 100644
index 0000000..a4a9ee5
--- /dev/null
+++ b/examples/Avalonia.Demo/Components/UI/Checkbox.cs
@@ -0,0 +1,117 @@
+using System;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Data;
+using Avalonia.Input;
+using Avalonia.Layout;
+using Avalonia.Media;
+
+namespace AvaloniaDemo.Components.UI;
+
+// Checkbox — h-4 w-4 rounded-sm border border-primary; checked: bg-primary + check icon.
+// The whole row (box + label) is the hit target.
+public class Checkbox : Border
+{
+ public static readonly StyledProperty IsCheckedProperty =
+ AvaloniaProperty.Register(nameof(IsChecked), defaultBindingMode: BindingMode.TwoWay);
+
+ public static readonly StyledProperty LabelProperty =
+ AvaloniaProperty.Register(nameof(Label));
+
+ public static readonly StyledProperty HasErrorProperty =
+ AvaloniaProperty.Register(nameof(HasError));
+
+ private readonly Border _box;
+ private readonly Icon _check;
+ private readonly TextBlock _label;
+
+ static Checkbox()
+ {
+ IsCheckedProperty.Changed.AddClassHandler((c, e) =>
+ {
+ c.UpdateVisualState();
+ c.CheckedChanged?.Invoke(c, (bool)e.NewValue!);
+ });
+ LabelProperty.Changed.AddClassHandler((c, _) => c.UpdateLabel());
+ HasErrorProperty.Changed.AddClassHandler((c, _) => c.UpdateVisualState());
+ IsEnabledProperty.Changed.AddClassHandler((c, _) => c.Opacity = c.IsEnabled ? 1.0 : 0.5);
+ }
+
+ public bool IsChecked
+ {
+ get => GetValue(IsCheckedProperty);
+ set => SetValue(IsCheckedProperty, value);
+ }
+
+ public string? Label
+ {
+ get => GetValue(LabelProperty);
+ set => SetValue(LabelProperty, value);
+ }
+
+ public bool HasError
+ {
+ get => GetValue(HasErrorProperty);
+ set => SetValue(HasErrorProperty, value);
+ }
+
+ public event EventHandler? CheckedChanged;
+
+ public Checkbox()
+ {
+ _check = new Icon { Kind = IconName.Check, Size = 12, StrokeWidth = 3, Token = ShellToken.PrimaryForeground };
+ _box = new Border
+ {
+ Child = _check,
+ Width = 16,
+ Height = 16,
+ BorderThickness = new Thickness(1),
+ CornerRadius = new CornerRadius(ShellTheme.RadiusSm),
+ VerticalAlignment = VerticalAlignment.Center
+ };
+ _label = new TextBlock { FontSize = 14, VerticalAlignment = VerticalAlignment.Center, IsVisible = false };
+ _label.Token(TextBlock.ForegroundProperty, ShellToken.Foreground);
+
+ Child = new StackPanel { Orientation = Orientation.Horizontal, Spacing = 8, MinHeight = 24, Children = { _box, _label } };
+ Background = Brushes.Transparent;
+ HorizontalAlignment = HorizontalAlignment.Left;
+ Cursor = new Cursor(StandardCursorType.Hand);
+ ShellFocus.Ring(this, _box);
+ UpdateVisualState();
+ }
+
+ protected override void OnPointerReleased(PointerReleasedEventArgs e)
+ {
+ base.OnPointerReleased(e);
+ if (e.InitialPressMouseButton != MouseButton.Left || !IsEffectivelyEnabled) return;
+ IsChecked = !IsChecked;
+ e.Handled = true;
+ }
+
+ protected override void OnKeyDown(KeyEventArgs e)
+ {
+ base.OnKeyDown(e);
+ if (e.Key != Key.Space) return;
+ IsChecked = !IsChecked;
+ e.Handled = true;
+ }
+
+ private void UpdateLabel()
+ {
+ _label.Text = Label ?? string.Empty;
+ _label.IsVisible = !string.IsNullOrEmpty(Label);
+ }
+
+ private void UpdateVisualState()
+ {
+ _box.Token(BorderBrushProperty, HasError ? ShellToken.Destructive : ShellToken.Primary);
+ if (IsChecked)
+ _box.Token(BackgroundProperty, ShellToken.Primary);
+ else
+ {
+ _box.ClearToken(BackgroundProperty);
+ _box.Background = Brushes.Transparent;
+ }
+ _check.IsVisible = IsChecked;
+ }
+}
diff --git a/examples/Avalonia.Demo/Components/UI/Icon.cs b/examples/Avalonia.Demo/Components/UI/Icon.cs
new file mode 100644
index 0000000..ece85cc
--- /dev/null
+++ b/examples/Avalonia.Demo/Components/UI/Icon.cs
@@ -0,0 +1,337 @@
+using System.Collections.Generic;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Layout;
+using Avalonia.Media;
+
+namespace AvaloniaDemo.Components.UI;
+
+// Stroke icons from ShellIcons (https://github.com/shellui-dev/shell-icons), derived from
+// Lucide 0.475.0 (ISC license) — the icon set ShellUI uses. Drawn as Avalonia geometry: no font or
+// package, crisp at any size, theme-aware. Generated by scripts/generate-icons.py; a curated set
+// of 110 icons — add names there and re-run to include more.
+// Usage: KindProperty =
+ AvaloniaProperty.Register(nameof(Kind));
+
+ public static readonly StyledProperty SizeProperty =
+ AvaloniaProperty.Register(nameof(Size), 16.0);
+
+ public static readonly StyledProperty StrokeWidthProperty =
+ AvaloniaProperty.Register(nameof(StrokeWidth), 2.0);
+
+ public static readonly StyledProperty TokenProperty =
+ AvaloniaProperty.Register(nameof(Token), ShellToken.Foreground);
+
+ // Explicit color; overrides Token when set.
+ public static readonly StyledProperty ColorProperty =
+ AvaloniaProperty.Register(nameof(Color));
+
+ // The token's brush, kept in sync with the theme by a resource binding.
+ private static readonly StyledProperty TintProperty =
+ AvaloniaProperty.Register("Tint");
+
+ private static readonly Dictionary Geometries = new();
+
+ static Icon()
+ {
+ AffectsMeasure(SizeProperty);
+ AffectsRender(KindProperty, SizeProperty, StrokeWidthProperty, ColorProperty, TintProperty);
+ TokenProperty.Changed.AddClassHandler((icon, _) => icon.Token(TintProperty, icon.Token));
+ IsHitTestVisibleProperty.OverrideDefaultValue(false);
+ HorizontalAlignmentProperty.OverrideDefaultValue(HorizontalAlignment.Center);
+ VerticalAlignmentProperty.OverrideDefaultValue(VerticalAlignment.Center);
+ }
+
+ public Icon() => this.Token(TintProperty, Token);
+
+ public IconName Kind
+ {
+ get => GetValue(KindProperty);
+ set => SetValue(KindProperty, value);
+ }
+
+ public double Size
+ {
+ get => GetValue(SizeProperty);
+ set => SetValue(SizeProperty, value);
+ }
+
+ public double StrokeWidth
+ {
+ get => GetValue(StrokeWidthProperty);
+ set => SetValue(StrokeWidthProperty, value);
+ }
+
+ public ShellToken Token
+ {
+ get => GetValue(TokenProperty);
+ set => SetValue(TokenProperty, value);
+ }
+
+ public Color? Color
+ {
+ get => GetValue(ColorProperty);
+ set => SetValue(ColorProperty, value);
+ }
+
+ protected override Size MeasureOverride(Size availableSize) => new(Size, Size);
+
+ public override void Render(DrawingContext context)
+ {
+ var brush = Color is { } color ? new SolidColorBrush(color) : GetValue(TintProperty);
+ if (GetGeometry(Kind) is not { } geometry || brush is null) return;
+ // Scale the 24x24 grid to Size; the stroke scales with it so icons keep Lucide's weight.
+ var scale = Size / 24.0;
+ using (context.PushTransform(Matrix.CreateScale(scale, scale)))
+ context.DrawGeometry(null, new Pen(brush, StrokeWidth, lineCap: PenLineCap.Round, lineJoin: PenLineJoin.Round), geometry);
+ }
+
+ private static Geometry? GetGeometry(IconName kind)
+ {
+ if (!Geometries.TryGetValue(kind, out var geometry))
+ {
+ var data = IconPaths.Get(kind);
+ geometry = string.IsNullOrEmpty(data) ? null : Geometry.Parse(data);
+ Geometries[kind] = geometry;
+ }
+ return geometry;
+ }
+}
diff --git a/examples/Avalonia.Demo/Components/UI/Input.cs b/examples/Avalonia.Demo/Components/UI/Input.cs
new file mode 100644
index 0000000..38fa8e0
--- /dev/null
+++ b/examples/Avalonia.Demo/Components/UI/Input.cs
@@ -0,0 +1,176 @@
+using System;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Data;
+using Avalonia.Input;
+using Avalonia.Layout;
+using Avalonia.Media;
+
+namespace AvaloniaDemo.Components.UI;
+
+// Text input — h-10 rounded-md border border-input px-3 text-sm.
+// Focus: border-ring + soft ring glow. Error: border-destructive.
+// The inner TextBox's Fluent chrome is cleared so this Border is the only frame.
+public class Input : Border
+{
+ public static readonly StyledProperty TextProperty =
+ AvaloniaProperty.Register(nameof(Text), defaultBindingMode: BindingMode.TwoWay);
+
+ public static readonly StyledProperty PlaceholderProperty =
+ AvaloniaProperty.Register(nameof(Placeholder));
+
+ public static readonly StyledProperty IsPasswordProperty =
+ AvaloniaProperty.Register(nameof(IsPassword));
+
+ public static readonly StyledProperty HasErrorProperty =
+ AvaloniaProperty.Register(nameof(HasError));
+
+ public static readonly StyledProperty IsReadOnlyProperty =
+ AvaloniaProperty.Register(nameof(IsReadOnly));
+
+ public static readonly StyledProperty MaxLengthProperty =
+ AvaloniaProperty.Register(nameof(MaxLength));
+
+ // Fluent's TextBox template takes its background and border brushes from these resources in
+ // every state (hover, focus, disabled); overriding them on the TextBox clears that chrome.
+ private static readonly string[] ClearedBrushes =
+ {
+ "TextControlBackground", "TextControlBackgroundPointerOver", "TextControlBackgroundFocused", "TextControlBackgroundDisabled",
+ "TextControlBorderBrush", "TextControlBorderBrushPointerOver", "TextControlBorderBrushFocused", "TextControlBorderBrushDisabled",
+ };
+
+ private readonly TextBox _textBox;
+ private bool _isFocused;
+
+ static Input()
+ {
+ TextProperty.Changed.AddClassHandler? TextChanged;
+
+ // Raised on Enter.
+ public event EventHandler? Completed;
+
+ public Input()
+ {
+ _textBox = new TextBox
+ {
+ FontSize = 14,
+ BorderThickness = new Thickness(0),
+ Padding = new Thickness(0),
+ MinHeight = 0,
+ VerticalAlignment = VerticalAlignment.Center,
+ VerticalContentAlignment = VerticalAlignment.Center
+ };
+ foreach (var key in ClearedBrushes)
+ _textBox.Resources[key] = Brushes.Transparent;
+ _textBox.Resources["TextControlBorderThemeThickness"] = new Thickness(0);
+ _textBox.Resources["TextControlBorderThemeThicknessFocused"] = new Thickness(0);
+ _textBox.Resources["TextControlThemePadding"] = new Thickness(0);
+ _textBox.Token(TextBox.ForegroundProperty, ShellToken.Foreground)
+ .Token(TextBox.CaretBrushProperty, ShellToken.Foreground)
+ .Token(TextBox.PlaceholderForegroundProperty, ShellToken.MutedForeground);
+
+ _textBox.TextChanged += (_, e) =>
+ {
+ Text = _textBox.Text;
+ TextChanged?.Invoke(this, e);
+ };
+ _textBox.KeyDown += (_, e) =>
+ {
+ if (e.Key == Key.Enter) Completed?.Invoke(this, EventArgs.Empty);
+ };
+ _textBox.GotFocus += (_, _) => { _isFocused = true; UpdateVisualState(); };
+ _textBox.LostFocus += (_, _) => { _isFocused = false; UpdateVisualState(); };
+
+ Child = _textBox;
+ Height = 40;
+ Padding = new Thickness(12, 0);
+ BorderThickness = new Thickness(1);
+ CornerRadius = new CornerRadius(ShellTheme.RadiusMd);
+ Background = Brushes.Transparent;
+ Cursor = new Cursor(StandardCursorType.Ibeam);
+ UpdateVisualState();
+ }
+
+ // The glow color is a snapshot of a token, so it is repainted on theme changes.
+ protected override void OnAttachedToVisualTree(VisualTreeAttachmentEventArgs e)
+ {
+ base.OnAttachedToVisualTree(e);
+ ShellTheme.ThemeChanged += OnThemeChanged;
+ }
+
+ protected override void OnDetachedFromVisualTree(VisualTreeAttachmentEventArgs e)
+ {
+ base.OnDetachedFromVisualTree(e);
+ ShellTheme.ThemeChanged -= OnThemeChanged;
+ }
+
+ private void OnThemeChanged(object? sender, EventArgs e) => UpdateVisualState();
+
+ // Clicking the padding focuses the text box too.
+ protected override void OnPointerPressed(PointerPressedEventArgs e)
+ {
+ base.OnPointerPressed(e);
+ if (!_textBox.IsFocused) _textBox.Focus();
+ }
+
+ public new bool Focus(NavigationMethod method = NavigationMethod.Unspecified, KeyModifiers keyModifiers = KeyModifiers.None)
+ => _textBox.Focus(method, keyModifiers);
+
+ private void UpdateVisualState()
+ {
+ var stroke = HasError ? ShellToken.Destructive : _isFocused ? ShellToken.Ring : ShellToken.Input;
+ this.Token(BorderBrushProperty, stroke);
+ BoxShadow = _isFocused || HasError
+ ? new BoxShadows(new BoxShadow { Blur = 6, Color = ShellTheme.Get(HasError ? ShellToken.Destructive : ShellToken.Ring, 0.35) })
+ : default;
+ }
+}
diff --git a/examples/Avalonia.Demo/Components/UI/Label.cs b/examples/Avalonia.Demo/Components/UI/Label.cs
new file mode 100644
index 0000000..4726ebe
--- /dev/null
+++ b/examples/Avalonia.Demo/Components/UI/Label.cs
@@ -0,0 +1,82 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Media;
+
+namespace AvaloniaDemo.Components.UI;
+
+// Typography label with size / weight / variant — theme-aware.
+// Named ShellLabel because Avalonia already has a Label control.
+public class ShellLabel : TextBlock
+{
+ public static readonly StyledProperty SizeProperty =
+ AvaloniaProperty.Register(nameof(Size), LabelSize.Default);
+
+ public static readonly StyledProperty WeightProperty =
+ AvaloniaProperty.Register(nameof(Weight), LabelWeight.Normal);
+
+ public static readonly StyledProperty VariantProperty =
+ AvaloniaProperty.Register(nameof(Variant));
+
+ static ShellLabel()
+ {
+ SizeProperty.Changed.AddClassHandler((l, _) => l.UpdateVisualState());
+ WeightProperty.Changed.AddClassHandler((l, _) => l.UpdateVisualState());
+ VariantProperty.Changed.AddClassHandler((l, _) => l.UpdateVisualState());
+ }
+
+ public LabelSize Size
+ {
+ get => GetValue(SizeProperty);
+ set => SetValue(SizeProperty, value);
+ }
+
+ public LabelWeight Weight
+ {
+ get => GetValue(WeightProperty);
+ set => SetValue(WeightProperty, value);
+ }
+
+ public LabelVariant Variant
+ {
+ get => GetValue(VariantProperty);
+ set => SetValue(VariantProperty, value);
+ }
+
+ public ShellLabel() => UpdateVisualState();
+
+ private void UpdateVisualState()
+ {
+ FontSize = Size switch
+ {
+ LabelSize.Xs => 12,
+ LabelSize.Sm => 14,
+ LabelSize.Lg => 18,
+ LabelSize.Xl => 20,
+ LabelSize.Xxl => 24,
+ LabelSize.Xxxl => 30,
+ _ => 16
+ };
+
+ FontWeight = Weight switch
+ {
+ LabelWeight.Light => FontWeight.Light,
+ LabelWeight.Medium => FontWeight.Medium,
+ LabelWeight.Semibold => FontWeight.SemiBold,
+ LabelWeight.Bold => FontWeight.Bold,
+ _ => FontWeight.Normal
+ };
+
+ this.Token(ForegroundProperty, Variant switch
+ {
+ LabelVariant.Muted => ShellToken.MutedForeground,
+ LabelVariant.Destructive => ShellToken.Destructive,
+ LabelVariant.Success => ShellToken.Success,
+ LabelVariant.Warning => ShellToken.Warning,
+ _ => ShellToken.Foreground
+ });
+ }
+}
+
+public enum LabelSize { Xs, Sm, Default, Lg, Xl, Xxl, Xxxl }
+public enum LabelWeight { Light, Normal, Medium, Semibold, Bold }
+public enum LabelVariant { Default, Muted, Destructive, Success, Warning }
diff --git a/examples/Avalonia.Demo/Components/UI/Progress.cs b/examples/Avalonia.Demo/Components/UI/Progress.cs
new file mode 100644
index 0000000..4929188
--- /dev/null
+++ b/examples/Avalonia.Demo/Components/UI/Progress.cs
@@ -0,0 +1,119 @@
+using System;
+using Avalonia;
+using Avalonia.Animation;
+using Avalonia.Animation.Easings;
+using Avalonia.Controls;
+using Avalonia.Layout;
+
+namespace AvaloniaDemo.Components.UI;
+
+// Progress bar — h-2 rounded-full track, fill animates to the new value.
+public class Progress : Grid
+{
+ public static readonly StyledProperty ValueProperty =
+ AvaloniaProperty.Register(nameof(Value));
+
+ public static readonly StyledProperty MaximumProperty =
+ AvaloniaProperty.Register(nameof(Maximum), 100.0);
+
+ public static readonly StyledProperty VariantProperty =
+ AvaloniaProperty.Register(nameof(Variant));
+
+ public static readonly StyledProperty ShowLabelProperty =
+ AvaloniaProperty.Register(nameof(ShowLabel));
+
+ private const double TrackHeight = 8;
+
+ private readonly Panel _track;
+ private readonly Border _trackFill;
+ private readonly Border _fill;
+ private readonly TextBlock _label;
+ private readonly Transitions _fillTransitions = new()
+ {
+ new DoubleTransition { Property = WidthProperty, Duration = TimeSpan.FromMilliseconds(300), Easing = new CubicEaseOut() }
+ };
+
+ static Progress()
+ {
+ ValueProperty.Changed.AddClassHandler((p, _) => p.UpdateFill(animate: true));
+ MaximumProperty.Changed.AddClassHandler((p, _) => p.UpdateFill(animate: true));
+ VariantProperty.Changed.AddClassHandler((p, _) => p.UpdateVisualState());
+ ShowLabelProperty.Changed.AddClassHandler((p, _) => p.UpdateVisualState());
+ }
+
+ public double Value
+ {
+ get => GetValue(ValueProperty);
+ set => SetValue(ValueProperty, value);
+ }
+
+ public double Maximum
+ {
+ get => GetValue(MaximumProperty);
+ set => SetValue(MaximumProperty, value);
+ }
+
+ public ProgressVariant Variant
+ {
+ get => GetValue(VariantProperty);
+ set => SetValue(VariantProperty, value);
+ }
+
+ public bool ShowLabel
+ {
+ get => GetValue(ShowLabelProperty);
+ set => SetValue(ShowLabelProperty, value);
+ }
+
+ public double Percentage => Maximum > 0 ? Math.Clamp(Value / Maximum, 0, 1) * 100 : 0;
+
+ public Progress()
+ {
+ // Track tint is the fill color at 20% (bg-primary/20), so it follows the variant.
+ _trackFill = new Border { Opacity = 0.2, CornerRadius = new CornerRadius(TrackHeight / 2) };
+ _fill = new Border { CornerRadius = new CornerRadius(TrackHeight / 2), HorizontalAlignment = HorizontalAlignment.Left, Width = 0 };
+ _track = new Panel { Height = TrackHeight, VerticalAlignment = VerticalAlignment.Center, Children = { _trackFill, _fill } };
+ _track.SizeChanged += (_, _) => UpdateFill(animate: false);
+
+ _label = new TextBlock { FontSize = 12, VerticalAlignment = VerticalAlignment.Center, Margin = new Thickness(12, 0, 0, 0), IsVisible = false };
+ _label.Token(TextBlock.ForegroundProperty, ShellToken.MutedForeground);
+
+ ColumnDefinitions = new ColumnDefinitions("*,Auto");
+ SetColumn(_label, 1);
+ Children.Add(_track);
+ Children.Add(_label);
+ UpdateVisualState();
+ }
+
+ private void UpdateVisualState()
+ {
+ var token = Variant switch
+ {
+ ProgressVariant.Success => ShellToken.Success,
+ ProgressVariant.Warning => ShellToken.Warning,
+ ProgressVariant.Destructive => ShellToken.Destructive,
+ _ => ShellToken.Primary
+ };
+ _fill.Token(Border.BackgroundProperty, token);
+ _trackFill.Token(Border.BackgroundProperty, token);
+ _label.IsVisible = ShowLabel;
+ UpdateFill(animate: false);
+ }
+
+ private void UpdateFill(bool animate)
+ {
+ _label.Text = $"{Percentage:F0}%";
+ if (_track.Bounds.Width <= 0) return;
+ // Resizes jump to the new width; only value changes animate.
+ _fill.Transitions = animate ? _fillTransitions : null;
+ _fill.Width = _track.Bounds.Width * Percentage / 100;
+ }
+}
+
+public enum ProgressVariant
+{
+ Default,
+ Success,
+ Warning,
+ Destructive
+}
diff --git a/examples/Avalonia.Demo/Components/UI/Separator.cs b/examples/Avalonia.Demo/Components/UI/Separator.cs
new file mode 100644
index 0000000..b230da4
--- /dev/null
+++ b/examples/Avalonia.Demo/Components/UI/Separator.cs
@@ -0,0 +1,44 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Layout;
+
+namespace AvaloniaDemo.Components.UI;
+
+// 1px divider in the Border token.
+public class Separator : Border
+{
+ public static readonly StyledProperty OrientationProperty =
+ AvaloniaProperty.Register(nameof(Orientation));
+
+ static Separator()
+ {
+ OrientationProperty.Changed.AddClassHandler((s, _) => s.UpdateVisualState());
+ }
+
+ public SeparatorOrientation Orientation
+ {
+ get => GetValue(OrientationProperty);
+ set => SetValue(OrientationProperty, value);
+ }
+
+ public Separator()
+ {
+ this.Token(BackgroundProperty, ShellToken.Border);
+ UpdateVisualState();
+ }
+
+ private void UpdateVisualState()
+ {
+ var horizontal = Orientation == SeparatorOrientation.Horizontal;
+ Height = horizontal ? 1 : double.NaN;
+ Width = horizontal ? double.NaN : 1;
+ HorizontalAlignment = horizontal ? HorizontalAlignment.Stretch : HorizontalAlignment.Center;
+ VerticalAlignment = horizontal ? VerticalAlignment.Center : VerticalAlignment.Stretch;
+ }
+}
+
+public enum SeparatorOrientation
+{
+ Horizontal,
+ Vertical
+}
diff --git a/examples/Avalonia.Demo/Components/UI/Shell.cs b/examples/Avalonia.Demo/Components/UI/Shell.cs
new file mode 100644
index 0000000..a1294aa
--- /dev/null
+++ b/examples/Avalonia.Demo/Components/UI/Shell.cs
@@ -0,0 +1,239 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Runtime.CompilerServices;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Input;
+using Avalonia.Media;
+using Avalonia.Styling;
+
+namespace AvaloniaDemo.Components.UI;
+
+// ShellUI Native core utilities. Installed by `shellui-native init`; every component depends on it.
+public static class Shell
+{
+ // Joins class names, skipping null or empty ones.
+ public static string Cn(params string?[] classes)
+ => string.Join(" ", classes.Where(c => !string.IsNullOrWhiteSpace(c)));
+}
+
+// Design tokens mirroring ShellUI's CSS variables (--background, --primary, ...).
+public enum ShellToken
+{
+ Background, Foreground,
+ Card, CardForeground,
+ Popover, PopoverForeground,
+ Primary, PrimaryForeground,
+ Secondary, SecondaryForeground,
+ Muted, MutedForeground,
+ Accent, AccentForeground,
+ Destructive, DestructiveForeground,
+ Success, SuccessForeground,
+ Warning, WarningForeground,
+ Info, InfoForeground,
+ Border, Input, Ring,
+ Overlay
+}
+
+/* Publishes both palettes as theme dictionaries of the application resources ("ShellUIPrimary" is
+ the Color, "ShellUIPrimaryBrush" the Brush). Avalonia resolves the active variant's palette, so a
+ theme switch repaints without re-publishing. Your own XAML can use them too:
+ Foreground="{DynamicResource ShellUIMutedForegroundBrush}".
+ Customize before the first window opens:
+ ShellTheme.Light[ShellToken.Primary] = Color.Parse("#2563EB");
+ ShellTheme.Apply(); */
+public static class ShellTheme
+{
+ // Based on ShellUI's default neutral theme, softened from pure black/white for native text
+ // rendering. Success/Warning/Info extend it (ShellUI has no semantic status colors).
+ public static Dictionary Light { get; } = new()
+ {
+ [ShellToken.Background] = Color.Parse("#FCFCFC"),
+ [ShellToken.Foreground] = Color.Parse("#0A0A0A"),
+ [ShellToken.Card] = Color.Parse("#FFFFFF"),
+ [ShellToken.CardForeground] = Color.Parse("#0A0A0A"),
+ [ShellToken.Popover] = Color.Parse("#FFFFFF"),
+ [ShellToken.PopoverForeground] = Color.Parse("#0A0A0A"),
+ [ShellToken.Primary] = Color.Parse("#171717"),
+ [ShellToken.PrimaryForeground] = Color.Parse("#FAFAFA"),
+ [ShellToken.Secondary] = Color.Parse("#F0F0F0"),
+ [ShellToken.SecondaryForeground] = Color.Parse("#171717"),
+ [ShellToken.Muted] = Color.Parse("#F5F5F5"),
+ [ShellToken.MutedForeground] = Color.Parse("#737373"),
+ [ShellToken.Accent] = Color.Parse("#F0F0F0"),
+ [ShellToken.AccentForeground] = Color.Parse("#171717"),
+ [ShellToken.Destructive] = Color.Parse("#E54B4F"),
+ [ShellToken.DestructiveForeground] = Color.Parse("#FFFFFF"),
+ [ShellToken.Success] = Color.Parse("#16A34A"),
+ [ShellToken.SuccessForeground] = Color.Parse("#FFFFFF"),
+ [ShellToken.Warning] = Color.Parse("#D97706"),
+ [ShellToken.WarningForeground] = Color.Parse("#FFFFFF"),
+ [ShellToken.Info] = Color.Parse("#2563EB"),
+ [ShellToken.InfoForeground] = Color.Parse("#FFFFFF"),
+ [ShellToken.Border] = Color.Parse("#E4E4E4"),
+ [ShellToken.Input] = Color.Parse("#E4E4E4"),
+ [ShellToken.Ring] = Color.Parse("#A3A3A3"),
+ [ShellToken.Overlay] = Color.Parse("#80000000"),
+ };
+
+ public static Dictionary Dark { get; } = new()
+ {
+ [ShellToken.Background] = Color.Parse("#0A0A0A"),
+ [ShellToken.Foreground] = Color.Parse("#FAFAFA"),
+ [ShellToken.Card] = Color.Parse("#141414"),
+ [ShellToken.CardForeground] = Color.Parse("#FAFAFA"),
+ [ShellToken.Popover] = Color.Parse("#171717"),
+ [ShellToken.PopoverForeground] = Color.Parse("#FAFAFA"),
+ [ShellToken.Primary] = Color.Parse("#FAFAFA"),
+ [ShellToken.PrimaryForeground] = Color.Parse("#171717"),
+ [ShellToken.Secondary] = Color.Parse("#262626"),
+ [ShellToken.SecondaryForeground] = Color.Parse("#FAFAFA"),
+ [ShellToken.Muted] = Color.Parse("#262626"),
+ [ShellToken.MutedForeground] = Color.Parse("#A3A3A3"),
+ [ShellToken.Accent] = Color.Parse("#262626"),
+ [ShellToken.AccentForeground] = Color.Parse("#FAFAFA"),
+ [ShellToken.Destructive] = Color.Parse("#FF5B5B"),
+ [ShellToken.DestructiveForeground] = Color.Parse("#0A0A0A"),
+ [ShellToken.Success] = Color.Parse("#22C55E"),
+ [ShellToken.SuccessForeground] = Color.Parse("#0A0A0A"),
+ [ShellToken.Warning] = Color.Parse("#F59E0B"),
+ [ShellToken.WarningForeground] = Color.Parse("#0A0A0A"),
+ [ShellToken.Info] = Color.Parse("#3B82F6"),
+ [ShellToken.InfoForeground] = Color.Parse("#FFFFFF"),
+ [ShellToken.Border] = Color.Parse("#2A2A2A"),
+ [ShellToken.Input] = Color.Parse("#333333"),
+ [ShellToken.Ring] = Color.Parse("#737373"),
+ [ShellToken.Overlay] = Color.Parse("#B3000000"),
+ };
+
+ // --radius: 0.5rem. Tailwind's rounded-sm / rounded-md / rounded-lg derive from it.
+ public const double RadiusSm = 4;
+ public const double RadiusMd = 6;
+ public const double RadiusLg = 8;
+
+ private static bool _initialized;
+
+ // Raised when a palette is published or the theme variant changes, for anything resources
+ // can't reach (e.g. a BoxShadow).
+ public static event EventHandler? ThemeChanged;
+
+ public static bool IsDarkMode => Application.Current?.ActualThemeVariant == ThemeVariant.Dark;
+
+ public static string ColorKey(ShellToken token) => $"ShellUI{token}";
+ public static string BrushKey(ShellToken token) => $"ShellUI{token}Brush";
+
+ // Current value of a token, for code that can't bind.
+ public static Color Get(ShellToken token) => (IsDarkMode ? Dark : Light)[token];
+
+ // A token at an opacity, for glows and focus rings (Tailwind's ring/35).
+ public static Color Get(ShellToken token, double opacity)
+ {
+ var color = Get(token);
+ return new Color((byte)Math.Round(color.A * opacity), color.R, color.G, color.B);
+ }
+
+ // Black at an opacity, for drop shadows (shadow-sm is black at 5%).
+ public static Color Shadow(double opacity) => new((byte)Math.Round(255 * opacity), 0, 0, 0);
+
+ public static void EnsureInitialized()
+ {
+ if (_initialized) return;
+ var app = Application.Current;
+ if (app is null) return;
+ _initialized = true;
+ app.ActualThemeVariantChanged += (_, _) => ThemeChanged?.Invoke(null, EventArgs.Empty);
+ Apply();
+ }
+
+ // Re-publishes both palettes. Call after editing Light/Dark at runtime.
+ public static void Apply()
+ {
+ var app = Application.Current;
+ if (app is null) return;
+ app.Resources.ThemeDictionaries[ThemeVariant.Light] = Build(Light);
+ app.Resources.ThemeDictionaries[ThemeVariant.Dark] = Build(Dark);
+ ThemeChanged?.Invoke(null, EventArgs.Empty);
+ }
+
+ private static ResourceDictionary Build(Dictionary palette)
+ {
+ var dictionary = new ResourceDictionary();
+ foreach (var (token, color) in palette)
+ {
+ dictionary[ColorKey(token)] = color;
+ dictionary[BrushKey(token)] = new SolidColorBrush(color);
+ }
+ return dictionary;
+ }
+
+ // ThemeVariant.Default follows the OS setting.
+ public static void SetTheme(ThemeVariant theme)
+ {
+ if (Application.Current is not { } app) return;
+ EnsureInitialized();
+ app.RequestedThemeVariant = theme;
+ }
+
+ public static void ToggleTheme() => SetTheme(IsDarkMode ? ThemeVariant.Light : ThemeVariant.Dark);
+}
+
+public static class ShellThemeExtensions
+{
+ // One binding per control and property. A resource binding outlives ClearValue and a later
+ // SetValue, and would repaint the property on the next theme change, so it is disposed instead.
+ private static readonly ConditionalWeakTable> Bindings = new();
+
+ // Binds a Color or Brush property to a theme token, replacing any earlier token binding.
+ // Returns the control for chaining.
+ public static T Token(this T control, AvaloniaProperty property, ShellToken token) where T : StyledElement
+ {
+ ShellTheme.EnsureInitialized();
+ control.ClearToken(property);
+ var key = typeof(IBrush).IsAssignableFrom(property.PropertyType) ? ShellTheme.BrushKey(token) : ShellTheme.ColorKey(token);
+ Bindings.GetOrCreateValue(control)[property] = control.Bind(property, control.GetResourceObservable(key));
+ return control;
+ }
+
+ // Removes the token binding, so a plain value (e.g. Brushes.Transparent) can be set.
+ public static T ClearToken(this T control, AvaloniaProperty property) where T : StyledElement
+ {
+ if (Bindings.TryGetValue(control, out var bindings) && bindings.Remove(property, out var binding))
+ binding.Dispose();
+ return control;
+ }
+}
+
+/* shadcn's focus-visible ring (ring-2 ring-ring ring-offset-2): a 2px Background gap, then a 2px
+ Ring band. Shown for keyboard focus only, so a click doesn't leave a ring behind. Replaces
+ Fluent's focus adorner. */
+public static class ShellFocus
+{
+ private static readonly HashSet Shown = new();
+
+ static ShellFocus() => ShellTheme.ThemeChanged += (_, _) =>
+ {
+ foreach (var border in Shown) Paint(border);
+ };
+
+ public static void Ring(Control control, Border target)
+ {
+ control.Focusable = true;
+ control.FocusAdorner = null;
+ control.GotFocus += (_, e) =>
+ {
+ if (e.NavigationMethod is not (NavigationMethod.Tab or NavigationMethod.Directional)) return;
+ Shown.Add(target);
+ Paint(target);
+ };
+ control.LostFocus += (_, _) =>
+ {
+ Shown.Remove(target);
+ target.BoxShadow = default;
+ };
+ }
+
+ private static void Paint(Border border) => border.BoxShadow = new BoxShadows(
+ new BoxShadow { Spread = 2, Color = ShellTheme.Get(ShellToken.Background) },
+ new[] { new BoxShadow { Spread = 4, Color = ShellTheme.Get(ShellToken.Ring) } });
+}
diff --git a/examples/Avalonia.Demo/Components/UI/Switch.cs b/examples/Avalonia.Demo/Components/UI/Switch.cs
new file mode 100644
index 0000000..5562b96
--- /dev/null
+++ b/examples/Avalonia.Demo/Components/UI/Switch.cs
@@ -0,0 +1,125 @@
+using System;
+using Avalonia;
+using Avalonia.Animation;
+using Avalonia.Animation.Easings;
+using Avalonia.Controls;
+using Avalonia.Data;
+using Avalonia.Input;
+using Avalonia.Layout;
+using Avalonia.Media;
+using Avalonia.Media.Transformation;
+
+namespace AvaloniaDemo.Components.UI;
+
+// Switch — h-6 w-11 rounded-full track (primary when on, input when off),
+// h-5 w-5 thumb in bg-background that slides translate-x-5.
+public class Switch : Border
+{
+ public static readonly StyledProperty IsToggledProperty =
+ AvaloniaProperty.Register(nameof(IsToggled), defaultBindingMode: BindingMode.TwoWay);
+
+ public static readonly StyledProperty LabelProperty =
+ AvaloniaProperty.Register(nameof(Label));
+
+ private const double TrackWidth = 44;
+ private const double TrackHeight = 24;
+ private const double Inset = 2;
+ private const double ThumbSize = TrackHeight - Inset * 2; // 20
+ private const double Travel = TrackWidth - Inset * 2 - ThumbSize; // 20
+
+ private readonly Border _track;
+ private readonly Border _thumb;
+ private readonly TextBlock _label;
+
+ static Switch()
+ {
+ IsToggledProperty.Changed.AddClassHandler((s, e) =>
+ {
+ s.UpdateVisualState();
+ s.Toggled?.Invoke(s, (bool)e.NewValue!);
+ });
+ LabelProperty.Changed.AddClassHandler((s, _) => s.UpdateLabel());
+ IsEnabledProperty.Changed.AddClassHandler((s, _) => s.Opacity = s.IsEnabled ? 1.0 : 0.5);
+ }
+
+ public bool IsToggled
+ {
+ get => GetValue(IsToggledProperty);
+ set => SetValue(IsToggledProperty, value);
+ }
+
+ public string? Label
+ {
+ get => GetValue(LabelProperty);
+ set => SetValue(LabelProperty, value);
+ }
+
+ public event EventHandler? Toggled;
+
+ public Switch()
+ {
+ _thumb = new Border
+ {
+ Width = ThumbSize,
+ Height = ThumbSize,
+ CornerRadius = new CornerRadius(ThumbSize / 2),
+ HorizontalAlignment = HorizontalAlignment.Left,
+ VerticalAlignment = VerticalAlignment.Center,
+ BoxShadow = new BoxShadows(new BoxShadow { OffsetY = 1, Blur = 3, Color = ShellTheme.Shadow(0.2) })
+ };
+ _thumb.Token(BackgroundProperty, ShellToken.Background);
+
+ _track = new Border
+ {
+ Child = _thumb,
+ Width = TrackWidth,
+ Height = TrackHeight,
+ Padding = new Thickness(Inset),
+ CornerRadius = new CornerRadius(TrackHeight / 2),
+ VerticalAlignment = VerticalAlignment.Center
+ };
+
+ _label = new TextBlock { FontSize = 14, VerticalAlignment = VerticalAlignment.Center, IsVisible = false };
+ _label.Token(TextBlock.ForegroundProperty, ShellToken.Foreground);
+
+ Child = new StackPanel { Orientation = Orientation.Horizontal, Spacing = 8, Children = { _track, _label } };
+ Background = Brushes.Transparent;
+ HorizontalAlignment = HorizontalAlignment.Left;
+ Cursor = new Cursor(StandardCursorType.Hand);
+ ShellFocus.Ring(this, _track);
+ UpdateVisualState();
+ // Added after the first state, so the thumb doesn't slide into place on load.
+ _thumb.Transitions = new Transitions
+ {
+ new TransformOperationsTransition { Property = RenderTransformProperty, Duration = TimeSpan.FromMilliseconds(150), Easing = new CubicEaseOut() }
+ };
+ }
+
+ protected override void OnPointerReleased(PointerReleasedEventArgs e)
+ {
+ base.OnPointerReleased(e);
+ if (e.InitialPressMouseButton != MouseButton.Left || !IsEffectivelyEnabled) return;
+ IsToggled = !IsToggled;
+ e.Handled = true;
+ }
+
+ protected override void OnKeyDown(KeyEventArgs e)
+ {
+ base.OnKeyDown(e);
+ if (e.Key is not (Key.Space or Key.Enter)) return;
+ IsToggled = !IsToggled;
+ e.Handled = true;
+ }
+
+ private void UpdateLabel()
+ {
+ _label.Text = Label ?? string.Empty;
+ _label.IsVisible = !string.IsNullOrEmpty(Label);
+ }
+
+ private void UpdateVisualState()
+ {
+ _track.Token(BackgroundProperty, IsToggled ? ShellToken.Primary : ShellToken.Input);
+ _thumb.RenderTransform = TransformOperations.Parse($"translateX({(IsToggled ? Travel : 0)}px)");
+ }
+}
diff --git a/examples/Avalonia.Demo/Components/UI/ThemeToggle.cs b/examples/Avalonia.Demo/Components/UI/ThemeToggle.cs
new file mode 100644
index 0000000..c87816e
--- /dev/null
+++ b/examples/Avalonia.Demo/Components/UI/ThemeToggle.cs
@@ -0,0 +1,119 @@
+using System;
+using Avalonia;
+using Avalonia.Animation;
+using Avalonia.Animation.Easings;
+using Avalonia.Automation;
+using Avalonia.Controls;
+using Avalonia.Input;
+using Avalonia.Layout;
+using Avalonia.Media;
+using Avalonia.Media.Transformation;
+
+namespace AvaloniaDemo.Components.UI;
+
+// Light/dark mode toggle — a 36x36 outline icon button (shadcn's ModeToggle). The sun and
+// moon cross-fade with a quarter turn. Usage: ? ThemeChanged;
+
+ public bool IsDarkMode => ShellTheme.IsDarkMode;
+
+ public ThemeToggle()
+ {
+ ShellTheme.EnsureInitialized();
+
+ _sun = new Icon { Kind = IconName.Sun, Size = 16 };
+ _moon = new Icon { Kind = IconName.Moon, Size = 16 };
+
+ Width = Box;
+ Height = Box;
+ BorderThickness = new Thickness(1);
+ CornerRadius = new CornerRadius(ShellTheme.RadiusMd);
+ HorizontalAlignment = HorizontalAlignment.Left;
+ VerticalAlignment = VerticalAlignment.Center;
+ Cursor = new Cursor(StandardCursorType.Hand);
+ Focusable = true;
+ Child = new Panel { Children = { _sun, _moon } };
+ this.Token(BorderBrushProperty, ShellToken.Input);
+ this.Token(BackgroundProperty, ShellToken.Background);
+ AutomationProperties.SetName(this, "Toggle theme");
+
+ ShowIcons(ShellTheme.IsDarkMode);
+ foreach (var icon in new[] { _sun, _moon })
+ {
+ icon.Transitions = new Transitions
+ {
+ new DoubleTransition { Property = OpacityProperty, Duration = TimeSpan.FromMilliseconds(200), Easing = new CubicEaseOut() },
+ new TransformOperationsTransition { Property = RenderTransformProperty, Duration = TimeSpan.FromMilliseconds(200), Easing = new CubicEaseOut() },
+ };
+ }
+ }
+
+ public void Toggle()
+ {
+ ShellTheme.ToggleTheme();
+ ThemeChanged?.Invoke(this, ShellTheme.IsDarkMode);
+ }
+
+ protected override void OnAttachedToVisualTree(VisualTreeAttachmentEventArgs e)
+ {
+ base.OnAttachedToVisualTree(e);
+ ShellTheme.ThemeChanged += OnThemeChanged;
+ ShowIcons(ShellTheme.IsDarkMode);
+ }
+
+ protected override void OnDetachedFromVisualTree(VisualTreeAttachmentEventArgs e)
+ {
+ base.OnDetachedFromVisualTree(e);
+ ShellTheme.ThemeChanged -= OnThemeChanged;
+ }
+
+ protected override void OnPointerEntered(PointerEventArgs e)
+ {
+ base.OnPointerEntered(e);
+ this.Token(BackgroundProperty, ShellToken.Accent);
+ }
+
+ protected override void OnPointerExited(PointerEventArgs e)
+ {
+ base.OnPointerExited(e);
+ this.Token(BackgroundProperty, ShellToken.Background);
+ }
+
+ protected override void OnPointerReleased(PointerReleasedEventArgs e)
+ {
+ base.OnPointerReleased(e);
+ if (e.InitialPressMouseButton == MouseButton.Left)
+ {
+ Toggle();
+ e.Handled = true;
+ }
+ }
+
+ protected override void OnKeyDown(KeyEventArgs e)
+ {
+ base.OnKeyDown(e);
+ if (e.Key is Key.Enter or Key.Space)
+ {
+ Toggle();
+ e.Handled = true;
+ }
+ }
+
+ private void OnThemeChanged(object? sender, EventArgs e) => ShowIcons(ShellTheme.IsDarkMode);
+
+ private void ShowIcons(bool dark)
+ {
+ var (show, hide) = dark ? (_moon, _sun) : (_sun, _moon);
+ show.Opacity = 1;
+ show.RenderTransform = TransformOperations.Parse("rotate(0deg) scale(1)");
+ hide.Opacity = 0;
+ hide.RenderTransform = TransformOperations.Parse("rotate(-90deg) scale(0.5)");
+ }
+}
diff --git a/examples/Avalonia.Demo/Components/UI/Variants/ButtonVariants.cs b/examples/Avalonia.Demo/Components/UI/Variants/ButtonVariants.cs
new file mode 100644
index 0000000..4f48e7c
--- /dev/null
+++ b/examples/Avalonia.Demo/Components/UI/Variants/ButtonVariants.cs
@@ -0,0 +1,101 @@
+using Avalonia;
+
+namespace AvaloniaDemo.Components.UI.Variants;
+
+public enum ButtonVariant
+{
+ Default,
+ Destructive,
+ Outline,
+ Secondary,
+ Ghost,
+ Link
+}
+
+public enum ButtonSize
+{
+ Default,
+ Sm,
+ Lg,
+ Icon
+}
+
+// Token-based style for one variant + size. Null background/border = transparent.
+public class ButtonStyle
+{
+ public ShellToken? Background { get; set; }
+ public ShellToken? HoverBackground { get; set; }
+ public ShellToken Foreground { get; set; } = ShellToken.Foreground;
+ public ShellToken? Border { get; set; }
+ public double HoverOpacity { get; set; } = 1.0;
+ public bool UnderlineOnHover { get; set; }
+ public double CornerRadius { get; set; } = ShellTheme.RadiusMd;
+ public Thickness Padding { get; set; } = new(16, 0);
+ public double Height { get; set; } = 40;
+ public double Width { get; set; } = double.NaN;
+ public double FontSize { get; set; } = 14;
+ public double IconSize { get; set; } = 16;
+}
+
+// Mirrors ShellUI's buttonVariants (cva): variant → colors, size → box.
+public static class ButtonVariants
+{
+ public static ButtonStyle GetStyle(ButtonVariant variant = ButtonVariant.Default, ButtonSize size = ButtonSize.Default)
+ {
+ var style = new ButtonStyle();
+
+ switch (variant)
+ {
+ case ButtonVariant.Default: // bg-primary text-primary-foreground hover:bg-primary/90
+ style.Background = ShellToken.Primary;
+ style.Foreground = ShellToken.PrimaryForeground;
+ style.HoverOpacity = 0.9;
+ break;
+ case ButtonVariant.Destructive: // bg-destructive text-destructive-foreground hover:bg-destructive/90
+ style.Background = ShellToken.Destructive;
+ style.Foreground = ShellToken.DestructiveForeground;
+ style.HoverOpacity = 0.9;
+ break;
+ case ButtonVariant.Outline: // border border-input bg-background hover:bg-accent
+ style.Background = ShellToken.Background;
+ style.HoverBackground = ShellToken.Accent;
+ style.Border = ShellToken.Input;
+ style.Foreground = ShellToken.Foreground;
+ break;
+ case ButtonVariant.Secondary: // bg-secondary text-secondary-foreground hover:bg-secondary/80
+ style.Background = ShellToken.Secondary;
+ style.Foreground = ShellToken.SecondaryForeground;
+ style.HoverOpacity = 0.8;
+ break;
+ case ButtonVariant.Ghost: // hover:bg-accent hover:text-accent-foreground
+ style.HoverBackground = ShellToken.Accent;
+ style.Foreground = ShellToken.Foreground;
+ break;
+ case ButtonVariant.Link: // text-primary underline-offset-4 hover:underline
+ style.Foreground = ShellToken.Primary;
+ style.UnderlineOnHover = true;
+ break;
+ }
+
+ switch (size)
+ {
+ case ButtonSize.Sm: // h-9 px-3
+ style.Height = 36;
+ style.Padding = new Thickness(12, 0);
+ style.FontSize = 13;
+ break;
+ case ButtonSize.Lg: // h-11 px-8
+ style.Height = 44;
+ style.Padding = new Thickness(32, 0);
+ style.FontSize = 15;
+ break;
+ case ButtonSize.Icon: // h-10 w-10
+ style.Height = 40;
+ style.Width = 40;
+ style.Padding = new Thickness(0);
+ break;
+ }
+
+ return style;
+ }
+}
diff --git a/examples/Avalonia.Demo/MainWindow.axaml b/examples/Avalonia.Demo/MainWindow.axaml
new file mode 100644
index 0000000..f26baba
--- /dev/null
+++ b/examples/Avalonia.Demo/MainWindow.axaml
@@ -0,0 +1,131 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/Avalonia.Demo/MainWindow.axaml.cs b/examples/Avalonia.Demo/MainWindow.axaml.cs
new file mode 100644
index 0000000..1949666
--- /dev/null
+++ b/examples/Avalonia.Demo/MainWindow.axaml.cs
@@ -0,0 +1,42 @@
+using System;
+using System.Linq;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Layout;
+using AvaloniaDemo.Components.UI;
+
+namespace AvaloniaDemo;
+
+public partial class MainWindow : Window
+{
+ public MainWindow()
+ {
+ InitializeComponent();
+
+ var clicks = 0;
+ LoadingButton.Clicked += async (_, _) =>
+ {
+ LoadingButton.IsLoading = true;
+ Progress.Value = (Progress.Value + 20) % 120;
+ await System.Threading.Tasks.Task.Delay(1500);
+ LoadingButton.IsLoading = false;
+ ClickCount.Text = $"Saved {++clicks} time(s).";
+ };
+
+ foreach (var token in Enum.GetValues())
+ {
+ var chip = new Border { Width = 40, Height = 40, CornerRadius = new CornerRadius(ShellTheme.RadiusMd), BorderThickness = new Thickness(1) };
+ chip.Token(Border.BackgroundProperty, token).Token(Border.BorderBrushProperty, ShellToken.Border);
+ var label = new TextBlock { Text = token.ToString(), FontSize = 12, HorizontalAlignment = HorizontalAlignment.Center };
+ label.Token(TextBlock.ForegroundProperty, ShellToken.MutedForeground);
+ Swatches.Children.Add(new StackPanel { Width = 120, Margin = new Thickness(0, 0, 8, 12), Spacing = 4, Children = { chip, label } });
+ }
+
+ foreach (var name in Enum.GetValues().Where(n => n != IconName.None))
+ {
+ var label = new TextBlock { Text = name.ToString(), FontSize = 11, HorizontalAlignment = HorizontalAlignment.Center, TextTrimming = Avalonia.Media.TextTrimming.CharacterEllipsis };
+ label.Token(TextBlock.ForegroundProperty, ShellToken.MutedForeground);
+ Icons.Children.Add(new StackPanel { Width = 96, Margin = new Thickness(0, 0, 4, 12), Spacing = 6, Children = { new Icon { Kind = name, Size = 20 }, label } });
+ }
+ }
+}
diff --git a/examples/Avalonia.Demo/Program.cs b/examples/Avalonia.Demo/Program.cs
new file mode 100644
index 0000000..ea52363
--- /dev/null
+++ b/examples/Avalonia.Demo/Program.cs
@@ -0,0 +1,24 @@
+using Avalonia;
+using System;
+
+namespace AvaloniaDemo;
+
+class Program
+{
+ // Initialization code. Don't use any Avalonia, third-party APIs or any
+ // SynchronizationContext-reliant code before AppMain is called: things aren't initialized
+ // yet and stuff might break.
+ [STAThread]
+ public static void Main(string[] args) => BuildAvaloniaApp()
+ .StartWithClassicDesktopLifetime(args);
+
+ // Avalonia configuration, don't remove; also used by visual designer.
+ public static AppBuilder BuildAvaloniaApp()
+ => AppBuilder.Configure()
+ .UsePlatformDetect()
+#if DEBUG
+ .WithDeveloperTools()
+#endif
+ .WithInterFont()
+ .LogToTrace();
+}
diff --git a/examples/Avalonia.Demo/app.manifest b/examples/Avalonia.Demo/app.manifest
new file mode 100644
index 0000000..8c77f6b
--- /dev/null
+++ b/examples/Avalonia.Demo/app.manifest
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/README.md b/examples/README.md
index ca6f06c..96e680e 100644
--- a/examples/README.md
+++ b/examples/README.md
@@ -7,6 +7,7 @@ This folder contains example projects demonstrating ShellUI Native components.
| Project | Platform | Description |
|---------|----------|-------------|
| [MAUI.Demo](./MAUI.Demo/) | .NET MAUI | Complete MAUI app showcasing all components |
+| [Avalonia.Demo](./Avalonia.Demo/) | Avalonia 12 | Avalonia components as they are ported (Phase 2) |
| WinUI.Demo | WinUI 3 | *(Coming Soon)* |
| WPF.Demo | WPF | *(Coming Soon)* |
@@ -20,15 +21,23 @@ dotnet restore
dotnet build
# Run on Windows
-dotnet run -f net8.0-windows10.0.19041.0
+dotnet run -f net10.0-windows10.0.19041.0
# Run on Android
-dotnet run -f net8.0-android
+dotnet run -f net10.0-android
# Run on iOS (macOS only)
-dotnet run -f net8.0-ios
+dotnet run -f net10.0-ios
```
+### Avalonia Demo
+
+```bash
+dotnet run --project examples/Avalonia.Demo/AvaloniaDemo.csproj
+```
+
+Runs on Windows, macOS and Linux.
+
## Purpose
These examples serve as:
diff --git a/scripts/generate-icons.py b/scripts/generate-icons.py
index 0719f0e..23534a1 100644
--- a/scripts/generate-icons.py
+++ b/scripts/generate-icons.py
@@ -1,5 +1,6 @@
-"""Generate the MAUI `icon` component (examples/MAUI.Demo/Components/UI/Icon.cs) from the
-ShellIcons catalog (Lucide-derived SVGs).
+"""Generate the `icon` component for MAUI and Avalonia (Components/UI/Icon.cs in each demo) from
+the ShellIcons catalog (Lucide-derived SVGs). The icon list and path data are shared; each file
+keeps its own control class.
python scripts/generate-icons.py [path-to-shell-icons]
@@ -18,7 +19,21 @@
REPO = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
DEFAULT_CATALOG = os.path.normpath(os.path.join(REPO, "..", "..", "icons", "shell-icons"))
-OUTPUT = os.path.join(REPO, "examples", "MAUI.Demo", "Components", "UI", "Icon.cs")
+# (file, usings and namespace, how it draws, usage comment, first line of the control class to keep)
+OUTPUTS = [
+ (os.path.join(REPO, "examples", "MAUI.Demo", "Components", "UI", "Icon.cs"),
+ ["using Microsoft.Maui.Controls.Shapes;", "", "namespace MAUI.Demo.Components.UI;"],
+ "Drawn with MAUI shapes",
+ ['// Usage: (?:\s*\{([^}]*)\})?(?:\(\))?,\s*$', re.M)
-def to_template_content(source: str) -> str:
+def to_template_content(source: str, demo_namespace: str = "MAUI.Demo") -> str:
source = source.replace("\r\n", "\n")
- source = source.replace("MAUI.Demo.Components.UI", "YourProjectNamespace.Components.UI")
- if "MAUI.Demo" in source:
+ source = source.replace(f"{demo_namespace}.Components.UI", "YourProjectNamespace.Components.UI")
+ if demo_namespace in source:
raise SystemExit("demo-specific namespace left in source")
# The closing quote sits on its own line after the block, so drop the trailing newline.
return source.rstrip("\n").replace('"', '""')
@@ -200,9 +203,50 @@ def main() -> None:
open(tpl_path, "w", encoding="utf-8", newline="").write(text)
changed.append(f"UPD {name} deps={deps}")
+ changed += sync_avalonia()
print("\n".join(changed))
print(f"{len(changed)} templates written")
+def sync_avalonia() -> list[str]:
+ changed = []
+ # Walks subfolders too (Variants/ButtonVariants.cs), like the MAUI pass.
+ files = sorted((d, f) for d, _, fs in os.walk(AVALONIA_DEMO) for f in fs if f.endswith(".cs"))
+ for dirpath, file in files:
+ name = file[:-3]
+ source = open(os.path.join(dirpath, file), encoding="utf-8-sig").read()
+ content = to_template_content(source, "AvaloniaDemo")
+ tpl_path = os.path.join(TPL, f"{name}Template.cs")
+ if not os.path.exists(tpl_path):
+ print(f"SKIP (Avalonia, no MAUI template yet): {name}")
+ continue
+
+ raw = open(tpl_path, encoding="utf-8-sig", newline="").read()
+ crlf = "\r\n" in raw
+ text = raw.replace("\r\n", "\n")
+
+ deps_match = DEPS_LINE.search(text)
+ declared = re.findall(r'"([^"]+)"', deps_match.group(2) or "") if deps_match else []
+ missing = [d for d in compute_deps(name, source, []) if d not in declared]
+ if missing:
+ raise SystemExit(f"Avalonia {name} uses {missing}, which the template doesn't declare")
+
+ match = AVALONIA_BLOCK.search(text)
+ if match:
+ text = text[:match.start(2)] + content + text[match.end(2):]
+ else:
+ maui = MAUI_BLOCK.search(text)
+ if not maui:
+ raise SystemExit(f"no MAUI block in {tpl_path}")
+ text = text[:maui.end()] + f',\n [NativePlatform.Avalonia] = @"{content}\n"' + text[maui.end():]
+
+ if crlf:
+ text = text.replace("\n", "\r\n")
+ if text != raw:
+ open(tpl_path, "w", encoding="utf-8", newline="").write(text)
+ changed.append(f"AVA {name}")
+ return changed
+
+
if __name__ == "__main__":
main()
diff --git a/src/ShellUI.Native.CLI/Services/ComponentManager.cs b/src/ShellUI.Native.CLI/Services/ComponentManager.cs
index 4b74496..b72deb2 100644
--- a/src/ShellUI.Native.CLI/Services/ComponentManager.cs
+++ b/src/ShellUI.Native.CLI/Services/ComponentManager.cs
@@ -22,8 +22,10 @@ public static void ListComponents(bool installedOnly, bool availableOnly)
var installedNames = config?.InstalledComponents.Select(c => c.Name).ToHashSet() ?? new HashSet();
// Get available components (excluding non-available utility components)
+ // In an initialized project, list only components with a template for its platform
var components = ComponentRegistry.Components.Values
.Where(c => c.IsAvailable)
+ .Where(c => config == null || ComponentRegistry.SupportsPlatform(c.Name, config.TargetPlatform))
.OrderBy(c => c.Category)
.ThenBy(c => c.Name);
diff --git a/src/ShellUI.Native.CLI/Services/InitService.cs b/src/ShellUI.Native.CLI/Services/InitService.cs
index 08e766d..e978ddc 100644
--- a/src/ShellUI.Native.CLI/Services/InitService.cs
+++ b/src/ShellUI.Native.CLI/Services/InitService.cs
@@ -101,8 +101,17 @@ await LogoLoader.RunAsync("Setting up ShellUI Native...", async status =>
AnsiConsole.MarkupLine("\n[green]✓ ShellUI Native initialized successfully![/]");
AnsiConsole.MarkupLine("\n[blue]Next steps:[/]");
- AnsiConsole.MarkupLine(" [dim]1. Add components:[/] shellui-native add button");
- AnsiConsole.MarkupLine(" [dim]2. Browse all:[/] shellui-native list");
+ if (projectInfo.Platform == NativePlatform.Avalonia)
+ {
+ AnsiConsole.MarkupLine(" [dim]1. Load the theme in App.Initialize, after AvaloniaXamlLoader.Load(this):[/] Components.UI.ShellTheme.EnsureInitialized();");
+ AnsiConsole.MarkupLine($" [dim]2. Use the components in XAML:[/] xmlns:ui=\"using:{Markup.Escape(projectInfo.RootNamespace)}.Components.UI\"");
+ AnsiConsole.MarkupLine(" [dim]3. Add components:[/] shellui-native add theme-toggle");
+ }
+ else
+ {
+ AnsiConsole.MarkupLine(" [dim]1. Add components:[/] shellui-native add button");
+ AnsiConsole.MarkupLine(" [dim]2. Browse all:[/] shellui-native list");
+ }
}
private static async Task InstallShellUtilityAsync(ProjectInfo projectInfo, string componentsPath)
diff --git a/src/ShellUI.Native.CLI/Services/ProjectDetector.cs b/src/ShellUI.Native.CLI/Services/ProjectDetector.cs
index 38339df..b30e9b0 100644
--- a/src/ShellUI.Native.CLI/Services/ProjectDetector.cs
+++ b/src/ShellUI.Native.CLI/Services/ProjectDetector.cs
@@ -78,9 +78,20 @@ internal static NativePlatform DetectPlatform(XDocument doc, string csprojPath)
return NativePlatform.Unknown;
}
- private static string DetectRootNamespace(XDocument doc, string projectName)
+ internal static string DetectRootNamespace(XDocument doc, string projectName)
{
var rootNamespace = doc.Descendants("RootNamespace").FirstOrDefault()?.Value;
- return rootNamespace ?? projectName;
+ return string.IsNullOrWhiteSpace(rootNamespace) ? SafeNamespace(projectName) : rootNamespace.Trim();
+ }
+
+ // What `dotnet new` does with a project name: "my-app" → "my_app", "2fa.app" → "_2fa.app".
+ internal static string SafeNamespace(string name)
+ {
+ var parts = name.Split('.').Select(part =>
+ {
+ var safe = new string(part.Select(c => char.IsLetterOrDigit(c) || c == '_' ? c : '_').ToArray());
+ return safe.Length == 0 || char.IsDigit(safe[0]) ? "_" + safe : safe;
+ });
+ return string.Join('.', parts);
}
}
diff --git a/src/ShellUI.Native.Templates/Templates/AlertTemplate.cs b/src/ShellUI.Native.Templates/Templates/AlertTemplate.cs
index 9e08f3b..64d4bfb 100644
--- a/src/ShellUI.Native.Templates/Templates/AlertTemplate.cs
+++ b/src/ShellUI.Native.Templates/Templates/AlertTemplate.cs
@@ -118,6 +118,105 @@ private void UpdateVisualState()
}
}
+public enum AlertVariant
+{
+ Default,
+ Destructive,
+ Success,
+ Warning,
+ Info
+}
+",
+ [NativePlatform.Avalonia] = @"using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Layout;
+using Avalonia.Media;
+
+namespace YourProjectNamespace.Components.UI;
+
+// Callout with icon, title and message — rounded-lg border p-4, icon + text tinted per variant.
+public class Alert : Border
+{
+ public static readonly StyledProperty TitleProperty =
+ AvaloniaProperty.Register(nameof(Title));
+
+ public static readonly StyledProperty MessageProperty =
+ AvaloniaProperty.Register(nameof(Message));
+
+ public static readonly StyledProperty VariantProperty =
+ AvaloniaProperty.Register(nameof(Variant));
+
+ private readonly Icon _icon;
+ private readonly TextBlock _titleLabel;
+ private readonly TextBlock _messageLabel;
+
+ static Alert()
+ {
+ TitleProperty.Changed.AddClassHandler((a, _) => a.UpdateVisualState());
+ MessageProperty.Changed.AddClassHandler((a, _) => a.UpdateVisualState());
+ VariantProperty.Changed.AddClassHandler((a, _) => a.UpdateVisualState());
+ }
+
+ public string? Title
+ {
+ get => GetValue(TitleProperty);
+ set => SetValue(TitleProperty, value);
+ }
+
+ public string? Message
+ {
+ get => GetValue(MessageProperty);
+ set => SetValue(MessageProperty, value);
+ }
+
+ public AlertVariant Variant
+ {
+ get => GetValue(VariantProperty);
+ set => SetValue(VariantProperty, value);
+ }
+
+ public Alert()
+ {
+ _icon = new Icon { Size = 16, VerticalAlignment = VerticalAlignment.Top, Margin = new Thickness(0, 2, 0, 0) };
+ _titleLabel = new TextBlock { FontSize = 14, FontWeight = FontWeight.SemiBold, TextWrapping = TextWrapping.Wrap };
+ _messageLabel = new TextBlock { FontSize = 14, TextWrapping = TextWrapping.Wrap };
+
+ var text = new StackPanel { Spacing = 4, Children = { _titleLabel, _messageLabel } };
+ Grid.SetColumn(text, 1);
+ Child = new Grid { ColumnDefinitions = new ColumnDefinitions(""Auto,*""), ColumnSpacing = 12, Children = { _icon, text } };
+ Padding = new Thickness(16, 12);
+ BorderThickness = new Thickness(1);
+ CornerRadius = new CornerRadius(ShellTheme.RadiusLg);
+ this.Token(BackgroundProperty, ShellToken.Card);
+ UpdateVisualState();
+ }
+
+ private void UpdateVisualState()
+ {
+ var (icon, accent) = Variant switch
+ {
+ AlertVariant.Destructive => (IconName.CircleAlert, ShellToken.Destructive),
+ AlertVariant.Success => (IconName.CircleCheck, ShellToken.Success),
+ AlertVariant.Warning => (IconName.TriangleAlert, ShellToken.Warning),
+ AlertVariant.Info => (IconName.Info, ShellToken.Info),
+ _ => (IconName.Info, ShellToken.Foreground)
+ };
+
+ _icon.Kind = icon;
+ _icon.Token = accent;
+ _titleLabel.Text = Title ?? string.Empty;
+ _titleLabel.IsVisible = !string.IsNullOrEmpty(Title);
+ _messageLabel.Text = Message ?? string.Empty;
+ _messageLabel.IsVisible = !string.IsNullOrEmpty(Message);
+
+ // Tinted variants color the title; the message stays readable in the muted foreground.
+ _titleLabel.Token(TextBlock.ForegroundProperty, accent);
+ _messageLabel.Token(TextBlock.ForegroundProperty,
+ Variant == AlertVariant.Default ? ShellToken.MutedForeground : ShellToken.Foreground);
+ this.Token(BorderBrushProperty, Variant == AlertVariant.Default ? ShellToken.Border : accent);
+ }
+}
+
public enum AlertVariant
{
Default,
diff --git a/src/ShellUI.Native.Templates/Templates/BadgeTemplate.cs b/src/ShellUI.Native.Templates/Templates/BadgeTemplate.cs
index 60a5e87..ff5c788 100644
--- a/src/ShellUI.Native.Templates/Templates/BadgeTemplate.cs
+++ b/src/ShellUI.Native.Templates/Templates/BadgeTemplate.cs
@@ -108,6 +108,89 @@ private void UpdateVisualState()
}
}
+public enum BadgeVariant { Default, Secondary, Destructive, Outline, Success, Warning, Info }
+",
+ [NativePlatform.Avalonia] = @"using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Layout;
+using Avalonia.Media;
+
+namespace YourProjectNamespace.Components.UI;
+
+// Status pill — rounded-full border px-2.5 py-0.5 text-xs font-semibold.
+public class Badge : Border
+{
+ public static readonly StyledProperty TextProperty =
+ AvaloniaProperty.Register(nameof(Text));
+
+ public static readonly StyledProperty VariantProperty =
+ AvaloniaProperty.Register(nameof(Variant));
+
+ private readonly TextBlock _label;
+
+ static Badge()
+ {
+ TextProperty.Changed.AddClassHandler((b, e) => b._label.Text = (string?)e.NewValue ?? string.Empty);
+ VariantProperty.Changed.AddClassHandler((b, _) => b.UpdateVisualState());
+ }
+
+ public string? Text
+ {
+ get => GetValue(TextProperty);
+ set => SetValue(TextProperty, value);
+ }
+
+ public BadgeVariant Variant
+ {
+ get => GetValue(VariantProperty);
+ set => SetValue(VariantProperty, value);
+ }
+
+ public Badge()
+ {
+ _label = new TextBlock
+ {
+ FontSize = 12,
+ FontWeight = FontWeight.SemiBold,
+ VerticalAlignment = VerticalAlignment.Center,
+ TextAlignment = TextAlignment.Center
+ };
+
+ Child = _label;
+ Padding = new Thickness(10, 2);
+ BorderThickness = new Thickness(1);
+ CornerRadius = new CornerRadius(999);
+ HorizontalAlignment = HorizontalAlignment.Left;
+ VerticalAlignment = VerticalAlignment.Center;
+ UpdateVisualState();
+ }
+
+ private void UpdateVisualState()
+ {
+ // (background, foreground, border); null background = transparent.
+ var (bg, fg, border) = Variant switch
+ {
+ BadgeVariant.Secondary => ((ShellToken?)ShellToken.Secondary, ShellToken.SecondaryForeground, ShellToken.Secondary),
+ BadgeVariant.Destructive => (ShellToken.Destructive, ShellToken.DestructiveForeground, ShellToken.Destructive),
+ BadgeVariant.Outline => (null, ShellToken.Foreground, ShellToken.Border),
+ BadgeVariant.Success => (ShellToken.Success, ShellToken.SuccessForeground, ShellToken.Success),
+ BadgeVariant.Warning => (ShellToken.Warning, ShellToken.WarningForeground, ShellToken.Warning),
+ BadgeVariant.Info => (ShellToken.Info, ShellToken.InfoForeground, ShellToken.Info),
+ _ => (ShellToken.Primary, ShellToken.PrimaryForeground, ShellToken.Primary)
+ };
+
+ if (bg.HasValue)
+ this.Token(BackgroundProperty, bg.Value);
+ else
+ {
+ this.ClearToken(BackgroundProperty);
+ Background = Brushes.Transparent;
+ }
+ this.Token(BorderBrushProperty, border);
+ _label.Token(TextBlock.ForegroundProperty, fg);
+ }
+}
+
public enum BadgeVariant { Default, Secondary, Destructive, Outline, Success, Warning, Info }
"
};
diff --git a/src/ShellUI.Native.Templates/Templates/ButtonTemplate.cs b/src/ShellUI.Native.Templates/Templates/ButtonTemplate.cs
index cf41cc2..fba83e4 100644
--- a/src/ShellUI.Native.Templates/Templates/ButtonTemplate.cs
+++ b/src/ShellUI.Native.Templates/Templates/ButtonTemplate.cs
@@ -224,6 +224,255 @@ private void StopSpinner()
}
}
+public enum IconPosition { Left, Right }
+",
+ [NativePlatform.Avalonia] = @"using System;
+using Avalonia;
+using Avalonia.Animation;
+using Avalonia.Animation.Easings;
+using Avalonia.Controls;
+using Avalonia.Input;
+using Avalonia.Layout;
+using Avalonia.Media;
+using Avalonia.Media.Transformation;
+using Avalonia.Threading;
+using YourProjectNamespace.Components.UI.Variants;
+
+namespace YourProjectNamespace.Components.UI;
+
+// Button with ShellUI variants, sizes, optional icon and loading state.
+// Sizes to its content like an inline-flex button; set HorizontalAlignment=""Stretch"" for a block button.
+// Usage: VariantProperty =
+ AvaloniaProperty.Register(nameof(Variant));
+
+ public static readonly StyledProperty SizeProperty =
+ AvaloniaProperty.Register(nameof(Size));
+
+ public static readonly StyledProperty IsLoadingProperty =
+ AvaloniaProperty.Register(nameof(IsLoading));
+
+ public static readonly StyledProperty TextProperty =
+ AvaloniaProperty.Register(nameof(Text));
+
+ public static readonly StyledProperty IconProperty =
+ AvaloniaProperty.Register(nameof(Icon));
+
+ public static readonly StyledProperty IconPositionProperty =
+ AvaloniaProperty.Register(nameof(IconPosition));
+
+ private readonly StackPanel _row;
+ private readonly Icon _spinner;
+ private readonly RotateTransform _spin = new();
+ private readonly Icon _icon;
+ private readonly TextBlock _label;
+ private ButtonStyle _style = new();
+ private DispatcherTimer? _spinning;
+ private bool _hovered;
+ private bool _pressed;
+
+ static Button()
+ {
+ VariantProperty.Changed.AddClassHandler((b, _) => b.UpdateVisualState());
+ SizeProperty.Changed.AddClassHandler((b, _) => b.UpdateVisualState());
+ IsLoadingProperty.Changed.AddClassHandler((b, _) => b.UpdateVisualState());
+ TextProperty.Changed.AddClassHandler((b, _) => b.UpdateVisualState());
+ IconProperty.Changed.AddClassHandler((b, _) => b.UpdateVisualState());
+ IconPositionProperty.Changed.AddClassHandler((b, _) => b.UpdateVisualState());
+ IsEnabledProperty.Changed.AddClassHandler((b, _) => b.Opacity = b.IsEnabled ? 1.0 : 0.5);
+ }
+
+ public ButtonVariant Variant
+ {
+ get => GetValue(VariantProperty);
+ set => SetValue(VariantProperty, value);
+ }
+
+ public ButtonSize Size
+ {
+ get => GetValue(SizeProperty);
+ set => SetValue(SizeProperty, value);
+ }
+
+ public bool IsLoading
+ {
+ get => GetValue(IsLoadingProperty);
+ set => SetValue(IsLoadingProperty, value);
+ }
+
+ public string? Text
+ {
+ get => GetValue(TextProperty);
+ set => SetValue(TextProperty, value);
+ }
+
+ public IconName Icon
+ {
+ get => GetValue(IconProperty);
+ set => SetValue(IconProperty, value);
+ }
+
+ public IconPosition IconPosition
+ {
+ get => GetValue(IconPositionProperty);
+ set => SetValue(IconPositionProperty, value);
+ }
+
+ public event EventHandler? Clicked;
+
+ public Button()
+ {
+ _spinner = new Icon { Kind = IconName.LoaderCircle, IsVisible = false, RenderTransform = _spin };
+ _icon = new Icon { IsVisible = false };
+ _label = new TextBlock { VerticalAlignment = VerticalAlignment.Center, FontWeight = FontWeight.Medium };
+ _row = new StackPanel
+ {
+ Orientation = Orientation.Horizontal,
+ Spacing = 8,
+ HorizontalAlignment = HorizontalAlignment.Center,
+ VerticalAlignment = VerticalAlignment.Center
+ };
+
+ Child = _row;
+ HorizontalAlignment = HorizontalAlignment.Left;
+ VerticalAlignment = VerticalAlignment.Center;
+ Cursor = new Cursor(StandardCursorType.Hand);
+ RenderTransform = TransformOperations.Parse(""scale(1)"");
+ Transitions = new Transitions
+ {
+ new TransformOperationsTransition { Property = RenderTransformProperty, Duration = TimeSpan.FromMilliseconds(90), Easing = new CubicEaseOut() }
+ };
+ ShellFocus.Ring(this, this);
+ UpdateVisualState();
+ }
+
+ private bool CanClick => IsEffectivelyEnabled && !IsLoading;
+
+ // Clicks in code, as a pointer click or Enter/Space would.
+ public void Press()
+ {
+ if (CanClick) Clicked?.Invoke(this, EventArgs.Empty);
+ }
+
+ protected override void OnPointerEntered(PointerEventArgs e)
+ {
+ base.OnPointerEntered(e);
+ _hovered = true;
+ ApplyHover();
+ }
+
+ protected override void OnPointerExited(PointerEventArgs e)
+ {
+ base.OnPointerExited(e);
+ _hovered = false;
+ ApplyHover();
+ }
+
+ protected override void OnPointerPressed(PointerPressedEventArgs e)
+ {
+ base.OnPointerPressed(e);
+ if (!CanClick || !e.GetCurrentPoint(this).Properties.IsLeftButtonPressed) return;
+ _pressed = true;
+ RenderTransform = TransformOperations.Parse(""scale(0.97)"");
+ e.Handled = true;
+ }
+
+ protected override void OnPointerReleased(PointerReleasedEventArgs e)
+ {
+ base.OnPointerReleased(e);
+ if (!_pressed) return;
+ _pressed = false;
+ RenderTransform = TransformOperations.Parse(""scale(1)"");
+ // Releasing outside the button cancels the click, as with native buttons.
+ if (new Rect(Bounds.Size).Contains(e.GetPosition(this))) Press();
+ e.Handled = true;
+ }
+
+ protected override void OnPointerCaptureLost(PointerCaptureLostEventArgs e)
+ {
+ base.OnPointerCaptureLost(e);
+ _pressed = false;
+ RenderTransform = TransformOperations.Parse(""scale(1)"");
+ }
+
+ protected override void OnKeyDown(KeyEventArgs e)
+ {
+ base.OnKeyDown(e);
+ if (e.Key is not (Key.Enter or Key.Space)) return;
+ Press();
+ e.Handled = true;
+ }
+
+ private void UpdateVisualState()
+ {
+ _style = ButtonVariants.GetStyle(Variant, Size);
+
+ Height = _style.Height;
+ Width = _style.Width;
+ Padding = _style.Padding;
+ CornerRadius = new CornerRadius(_style.CornerRadius);
+ BorderThickness = new Thickness(_style.Border.HasValue ? 1 : 0);
+ if (_style.Border.HasValue)
+ this.Token(BorderBrushProperty, _style.Border.Value);
+
+ _label.Text = Text ?? string.Empty;
+ _label.IsVisible = !string.IsNullOrEmpty(Text);
+ _label.FontSize = _style.FontSize;
+ _label.Token(TextBlock.ForegroundProperty, _style.Foreground);
+
+ _icon.Kind = Icon;
+ _icon.Size = _style.IconSize;
+ _icon.Token = _style.Foreground;
+ _icon.IsVisible = Icon != IconName.None && !IsLoading;
+
+ _spinner.Size = _style.IconSize;
+ _spinner.Token = _style.Foreground;
+ _spinner.IsVisible = IsLoading;
+ if (IsLoading) StartSpinner(); else StopSpinner();
+
+ _row.Children.Clear();
+ _row.Children.Add(_spinner);
+ if (IconPosition == IconPosition.Left) { _row.Children.Add(_icon); _row.Children.Add(_label); }
+ else { _row.Children.Add(_label); _row.Children.Add(_icon); }
+
+ ApplyHover();
+ }
+
+ private void ApplyHover()
+ {
+ var hover = _hovered && CanClick;
+ var background = hover && _style.HoverBackground.HasValue ? _style.HoverBackground : _style.Background;
+ if (background.HasValue)
+ this.Token(BackgroundProperty, background.Value);
+ else
+ {
+ // Transparent, not null, so the whole button stays hit-testable.
+ this.ClearToken(BackgroundProperty);
+ Background = Brushes.Transparent;
+ }
+ Opacity = !IsEnabled ? 0.5 : hover ? _style.HoverOpacity : 1.0;
+ _label.TextDecorations = hover && _style.UnderlineOnHover ? TextDecorations.Underline : null;
+ }
+
+ // One turn per 800 ms, advanced once per frame.
+ private void StartSpinner()
+ {
+ if (_spinning != null) return;
+ _spinning = new DispatcherTimer(TimeSpan.FromMilliseconds(16), DispatcherPriority.Render,
+ (_, _) => _spin.Angle = (_spin.Angle + 360 * 16 / 800.0) % 360);
+ _spinning.Start();
+ }
+
+ private void StopSpinner()
+ {
+ _spinning?.Stop();
+ _spinning = null;
+ _spin.Angle = 0;
+ }
+}
+
public enum IconPosition { Left, Right }
"
};
diff --git a/src/ShellUI.Native.Templates/Templates/ButtonVariantsTemplate.cs b/src/ShellUI.Native.Templates/Templates/ButtonVariantsTemplate.cs
index 0b3b0ec..586d95a 100644
--- a/src/ShellUI.Native.Templates/Templates/ButtonVariantsTemplate.cs
+++ b/src/ShellUI.Native.Templates/Templates/ButtonVariantsTemplate.cs
@@ -55,6 +55,108 @@ public class ButtonStyle
public double IconSize { get; set; } = 16;
}
+// Mirrors ShellUI's buttonVariants (cva): variant → colors, size → box.
+public static class ButtonVariants
+{
+ public static ButtonStyle GetStyle(ButtonVariant variant = ButtonVariant.Default, ButtonSize size = ButtonSize.Default)
+ {
+ var style = new ButtonStyle();
+
+ switch (variant)
+ {
+ case ButtonVariant.Default: // bg-primary text-primary-foreground hover:bg-primary/90
+ style.Background = ShellToken.Primary;
+ style.Foreground = ShellToken.PrimaryForeground;
+ style.HoverOpacity = 0.9;
+ break;
+ case ButtonVariant.Destructive: // bg-destructive text-destructive-foreground hover:bg-destructive/90
+ style.Background = ShellToken.Destructive;
+ style.Foreground = ShellToken.DestructiveForeground;
+ style.HoverOpacity = 0.9;
+ break;
+ case ButtonVariant.Outline: // border border-input bg-background hover:bg-accent
+ style.Background = ShellToken.Background;
+ style.HoverBackground = ShellToken.Accent;
+ style.Border = ShellToken.Input;
+ style.Foreground = ShellToken.Foreground;
+ break;
+ case ButtonVariant.Secondary: // bg-secondary text-secondary-foreground hover:bg-secondary/80
+ style.Background = ShellToken.Secondary;
+ style.Foreground = ShellToken.SecondaryForeground;
+ style.HoverOpacity = 0.8;
+ break;
+ case ButtonVariant.Ghost: // hover:bg-accent hover:text-accent-foreground
+ style.HoverBackground = ShellToken.Accent;
+ style.Foreground = ShellToken.Foreground;
+ break;
+ case ButtonVariant.Link: // text-primary underline-offset-4 hover:underline
+ style.Foreground = ShellToken.Primary;
+ style.UnderlineOnHover = true;
+ break;
+ }
+
+ switch (size)
+ {
+ case ButtonSize.Sm: // h-9 px-3
+ style.Height = 36;
+ style.Padding = new Thickness(12, 0);
+ style.FontSize = 13;
+ break;
+ case ButtonSize.Lg: // h-11 px-8
+ style.Height = 44;
+ style.Padding = new Thickness(32, 0);
+ style.FontSize = 15;
+ break;
+ case ButtonSize.Icon: // h-10 w-10
+ style.Height = 40;
+ style.Width = 40;
+ style.Padding = new Thickness(0);
+ break;
+ }
+
+ return style;
+ }
+}
+",
+ [NativePlatform.Avalonia] = @"using Avalonia;
+
+namespace YourProjectNamespace.Components.UI.Variants;
+
+public enum ButtonVariant
+{
+ Default,
+ Destructive,
+ Outline,
+ Secondary,
+ Ghost,
+ Link
+}
+
+public enum ButtonSize
+{
+ Default,
+ Sm,
+ Lg,
+ Icon
+}
+
+// Token-based style for one variant + size. Null background/border = transparent.
+public class ButtonStyle
+{
+ public ShellToken? Background { get; set; }
+ public ShellToken? HoverBackground { get; set; }
+ public ShellToken Foreground { get; set; } = ShellToken.Foreground;
+ public ShellToken? Border { get; set; }
+ public double HoverOpacity { get; set; } = 1.0;
+ public bool UnderlineOnHover { get; set; }
+ public double CornerRadius { get; set; } = ShellTheme.RadiusMd;
+ public Thickness Padding { get; set; } = new(16, 0);
+ public double Height { get; set; } = 40;
+ public double Width { get; set; } = double.NaN;
+ public double FontSize { get; set; } = 14;
+ public double IconSize { get; set; } = 16;
+}
+
// Mirrors ShellUI's buttonVariants (cva): variant → colors, size → box.
public static class ButtonVariants
{
diff --git a/src/ShellUI.Native.Templates/Templates/CardContentTemplate.cs b/src/ShellUI.Native.Templates/Templates/CardContentTemplate.cs
index 9cc933e..f0f44ca 100644
--- a/src/ShellUI.Native.Templates/Templates/CardContentTemplate.cs
+++ b/src/ShellUI.Native.Templates/Templates/CardContentTemplate.cs
@@ -29,6 +29,17 @@ public CardContent()
Padding = new Thickness(24, 0, 24, 24);
}
}
+",
+ [NativePlatform.Avalonia] = @"using Avalonia;
+using Avalonia.Controls;
+
+namespace YourProjectNamespace.Components.UI;
+
+// Card body — p-6 pt-0.
+public class CardContent : Border
+{
+ public CardContent() => Padding = new Thickness(24, 0, 24, 24);
+}
"
};
}
diff --git a/src/ShellUI.Native.Templates/Templates/CardFooterTemplate.cs b/src/ShellUI.Native.Templates/Templates/CardFooterTemplate.cs
index f329deb..d0c75f1 100644
--- a/src/ShellUI.Native.Templates/Templates/CardFooterTemplate.cs
+++ b/src/ShellUI.Native.Templates/Templates/CardFooterTemplate.cs
@@ -40,6 +40,24 @@ public CardFooter()
Content = _content;
}
}
+",
+ [NativePlatform.Avalonia] = @"using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Layout;
+
+namespace YourProjectNamespace.Components.UI;
+
+// Card footer — flex items-center p-6 pt-0; actions right-aligned.
+public class CardFooter : StackPanel
+{
+ public CardFooter()
+ {
+ Orientation = Orientation.Horizontal;
+ Spacing = 8;
+ HorizontalAlignment = HorizontalAlignment.Right;
+ Margin = new Thickness(24, 0, 24, 24);
+ }
+}
"
};
}
diff --git a/src/ShellUI.Native.Templates/Templates/CardHeaderTemplate.cs b/src/ShellUI.Native.Templates/Templates/CardHeaderTemplate.cs
index 0239118..ef38752 100644
--- a/src/ShellUI.Native.Templates/Templates/CardHeaderTemplate.cs
+++ b/src/ShellUI.Native.Templates/Templates/CardHeaderTemplate.cs
@@ -69,6 +69,61 @@ private void UpdateText()
_description.IsVisible = !string.IsNullOrEmpty(Description);
}
}
+",
+ [NativePlatform.Avalonia] = @"using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Media;
+
+namespace YourProjectNamespace.Components.UI;
+
+// Card header — p-6 space-y-1.5; title font-semibold, description text-sm text-muted-foreground.
+public class CardHeader : Border
+{
+ public static readonly StyledProperty TitleProperty =
+ AvaloniaProperty.Register(nameof(Title));
+
+ public static readonly StyledProperty DescriptionProperty =
+ AvaloniaProperty.Register(nameof(Description));
+
+ private readonly TextBlock _title;
+ private readonly TextBlock _description;
+
+ static CardHeader()
+ {
+ TitleProperty.Changed.AddClassHandler((h, _) => h.UpdateText());
+ DescriptionProperty.Changed.AddClassHandler((h, _) => h.UpdateText());
+ }
+
+ public string? Title
+ {
+ get => GetValue(TitleProperty);
+ set => SetValue(TitleProperty, value);
+ }
+
+ public string? Description
+ {
+ get => GetValue(DescriptionProperty);
+ set => SetValue(DescriptionProperty, value);
+ }
+
+ public CardHeader()
+ {
+ _title = new TextBlock { FontSize = 18, FontWeight = FontWeight.SemiBold, TextWrapping = TextWrapping.Wrap };
+ _title.Token(TextBlock.ForegroundProperty, ShellToken.CardForeground);
+ _description = new TextBlock { FontSize = 14, TextWrapping = TextWrapping.Wrap, IsVisible = false };
+ _description.Token(TextBlock.ForegroundProperty, ShellToken.MutedForeground);
+
+ Child = new StackPanel { Spacing = 6, Children = { _title, _description } };
+ Padding = new Thickness(24, 24, 24, 16);
+ }
+
+ private void UpdateText()
+ {
+ _title.Text = Title ?? string.Empty;
+ _description.Text = Description ?? string.Empty;
+ _description.IsVisible = !string.IsNullOrEmpty(Description);
+ }
+}
"
};
}
diff --git a/src/ShellUI.Native.Templates/Templates/CardTemplate.cs b/src/ShellUI.Native.Templates/Templates/CardTemplate.cs
index 2b266ab..b7448c2 100644
--- a/src/ShellUI.Native.Templates/Templates/CardTemplate.cs
+++ b/src/ShellUI.Native.Templates/Templates/CardTemplate.cs
@@ -90,6 +90,78 @@ private void UpdateVisuals()
}
}
+public enum CardVariant { Default, Elevated }
+",
+ [NativePlatform.Avalonia] = @"using System;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Input;
+using Avalonia.Media;
+using Avalonia.Metadata;
+
+namespace YourProjectNamespace.Components.UI;
+
+// Card container — rounded-lg border bg-card shadow-sm.
+// The parts stack inside; XAML children go to Items.
+// Usage: ... ... VariantProperty =
+ AvaloniaProperty.Register(nameof(Variant));
+
+ public static readonly StyledProperty IsPressableProperty =
+ AvaloniaProperty.Register(nameof(IsPressable));
+
+ private const double Radius = ShellTheme.RadiusLg + 4;
+
+ private readonly StackPanel _items = new();
+
+ static Card()
+ {
+ VariantProperty.Changed.AddClassHandler((c, _) => c.UpdateShadow());
+ IsPressableProperty.Changed.AddClassHandler((c, _) =>
+ c.Cursor = c.IsPressable ? new Cursor(StandardCursorType.Hand) : null);
+ }
+
+ public CardVariant Variant
+ {
+ get => GetValue(VariantProperty);
+ set => SetValue(VariantProperty, value);
+ }
+
+ public bool IsPressable
+ {
+ get => GetValue(IsPressableProperty);
+ set => SetValue(IsPressableProperty, value);
+ }
+
+ public event EventHandler? Clicked;
+
+ [Content]
+ public Controls Items => _items.Children;
+
+ public Card()
+ {
+ Child = _items;
+ BorderThickness = new Thickness(1);
+ CornerRadius = new CornerRadius(Radius);
+ this.Token(BackgroundProperty, ShellToken.Card).Token(BorderBrushProperty, ShellToken.Border);
+ UpdateShadow();
+ }
+
+ private void UpdateShadow() => BoxShadow = new BoxShadows(Variant == CardVariant.Elevated
+ ? new BoxShadow { OffsetY = 4, Blur = 12, Color = ShellTheme.Shadow(0.10) }
+ : new BoxShadow { OffsetY = 1, Blur = 2, Color = ShellTheme.Shadow(0.05) });
+
+ protected override void OnPointerReleased(PointerReleasedEventArgs e)
+ {
+ base.OnPointerReleased(e);
+ if (!IsPressable || e.InitialPressMouseButton != MouseButton.Left) return;
+ Clicked?.Invoke(this, EventArgs.Empty);
+ e.Handled = true;
+ }
+}
+
public enum CardVariant { Default, Elevated }
"
};
diff --git a/src/ShellUI.Native.Templates/Templates/CheckboxTemplate.cs b/src/ShellUI.Native.Templates/Templates/CheckboxTemplate.cs
index 10083be..c5531a4 100644
--- a/src/ShellUI.Native.Templates/Templates/CheckboxTemplate.cs
+++ b/src/ShellUI.Native.Templates/Templates/CheckboxTemplate.cs
@@ -130,6 +130,124 @@ private void UpdateVisualState()
_check.IsVisible = IsChecked;
}
}
+",
+ [NativePlatform.Avalonia] = @"using System;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Data;
+using Avalonia.Input;
+using Avalonia.Layout;
+using Avalonia.Media;
+
+namespace YourProjectNamespace.Components.UI;
+
+// Checkbox — h-4 w-4 rounded-sm border border-primary; checked: bg-primary + check icon.
+// The whole row (box + label) is the hit target.
+public class Checkbox : Border
+{
+ public static readonly StyledProperty IsCheckedProperty =
+ AvaloniaProperty.Register(nameof(IsChecked), defaultBindingMode: BindingMode.TwoWay);
+
+ public static readonly StyledProperty LabelProperty =
+ AvaloniaProperty.Register(nameof(Label));
+
+ public static readonly StyledProperty HasErrorProperty =
+ AvaloniaProperty.Register(nameof(HasError));
+
+ private readonly Border _box;
+ private readonly Icon _check;
+ private readonly TextBlock _label;
+
+ static Checkbox()
+ {
+ IsCheckedProperty.Changed.AddClassHandler((c, e) =>
+ {
+ c.UpdateVisualState();
+ c.CheckedChanged?.Invoke(c, (bool)e.NewValue!);
+ });
+ LabelProperty.Changed.AddClassHandler((c, _) => c.UpdateLabel());
+ HasErrorProperty.Changed.AddClassHandler((c, _) => c.UpdateVisualState());
+ IsEnabledProperty.Changed.AddClassHandler((c, _) => c.Opacity = c.IsEnabled ? 1.0 : 0.5);
+ }
+
+ public bool IsChecked
+ {
+ get => GetValue(IsCheckedProperty);
+ set => SetValue(IsCheckedProperty, value);
+ }
+
+ public string? Label
+ {
+ get => GetValue(LabelProperty);
+ set => SetValue(LabelProperty, value);
+ }
+
+ public bool HasError
+ {
+ get => GetValue(HasErrorProperty);
+ set => SetValue(HasErrorProperty, value);
+ }
+
+ public event EventHandler? CheckedChanged;
+
+ public Checkbox()
+ {
+ _check = new Icon { Kind = IconName.Check, Size = 12, StrokeWidth = 3, Token = ShellToken.PrimaryForeground };
+ _box = new Border
+ {
+ Child = _check,
+ Width = 16,
+ Height = 16,
+ BorderThickness = new Thickness(1),
+ CornerRadius = new CornerRadius(ShellTheme.RadiusSm),
+ VerticalAlignment = VerticalAlignment.Center
+ };
+ _label = new TextBlock { FontSize = 14, VerticalAlignment = VerticalAlignment.Center, IsVisible = false };
+ _label.Token(TextBlock.ForegroundProperty, ShellToken.Foreground);
+
+ Child = new StackPanel { Orientation = Orientation.Horizontal, Spacing = 8, MinHeight = 24, Children = { _box, _label } };
+ Background = Brushes.Transparent;
+ HorizontalAlignment = HorizontalAlignment.Left;
+ Cursor = new Cursor(StandardCursorType.Hand);
+ ShellFocus.Ring(this, _box);
+ UpdateVisualState();
+ }
+
+ protected override void OnPointerReleased(PointerReleasedEventArgs e)
+ {
+ base.OnPointerReleased(e);
+ if (e.InitialPressMouseButton != MouseButton.Left || !IsEffectivelyEnabled) return;
+ IsChecked = !IsChecked;
+ e.Handled = true;
+ }
+
+ protected override void OnKeyDown(KeyEventArgs e)
+ {
+ base.OnKeyDown(e);
+ if (e.Key != Key.Space) return;
+ IsChecked = !IsChecked;
+ e.Handled = true;
+ }
+
+ private void UpdateLabel()
+ {
+ _label.Text = Label ?? string.Empty;
+ _label.IsVisible = !string.IsNullOrEmpty(Label);
+ }
+
+ private void UpdateVisualState()
+ {
+ _box.Token(BorderBrushProperty, HasError ? ShellToken.Destructive : ShellToken.Primary);
+ if (IsChecked)
+ _box.Token(BackgroundProperty, ShellToken.Primary);
+ else
+ {
+ _box.ClearToken(BackgroundProperty);
+ _box.Background = Brushes.Transparent;
+ }
+ _check.IsVisible = IsChecked;
+ }
+}
"
};
diff --git a/src/ShellUI.Native.Templates/Templates/IconTemplate.cs b/src/ShellUI.Native.Templates/Templates/IconTemplate.cs
index 02cc764..a7d2c93 100644
--- a/src/ShellUI.Native.Templates/Templates/IconTemplate.cs
+++ b/src/ShellUI.Native.Templates/Templates/IconTemplate.cs
@@ -8,7 +8,7 @@ public static class IconTemplate
{
Name = "icon",
DisplayName = "Icon",
- Description = "Lucide stroke icons drawn with MAUI shapes (no font or package)",
+ Description = "Lucide stroke icons drawn as native shapes (no font or package)",
Category = ComponentCategory.Utility,
FilePath = "Icon.cs",
Dependencies = new List { "shell" },
@@ -362,6 +362,344 @@ private void UpdateColor()
}
}
}
+",
+ [NativePlatform.Avalonia] = @"using System.Collections.Generic;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Layout;
+using Avalonia.Media;
+
+namespace YourProjectNamespace.Components.UI;
+
+// Stroke icons from ShellIcons (https://github.com/shellui-dev/shell-icons), derived from
+// Lucide 0.475.0 (ISC license) — the icon set ShellUI uses. Drawn as Avalonia geometry: no font or
+// package, crisp at any size, theme-aware. Generated by scripts/generate-icons.py; a curated set
+// of 110 icons — add names there and re-run to include more.
+// Usage: KindProperty =
+ AvaloniaProperty.Register(nameof(Kind));
+
+ public static readonly StyledProperty SizeProperty =
+ AvaloniaProperty.Register(nameof(Size), 16.0);
+
+ public static readonly StyledProperty StrokeWidthProperty =
+ AvaloniaProperty.Register(nameof(StrokeWidth), 2.0);
+
+ public static readonly StyledProperty TokenProperty =
+ AvaloniaProperty.Register(nameof(Token), ShellToken.Foreground);
+
+ // Explicit color; overrides Token when set.
+ public static readonly StyledProperty ColorProperty =
+ AvaloniaProperty.Register(nameof(Color));
+
+ // The token's brush, kept in sync with the theme by a resource binding.
+ private static readonly StyledProperty TintProperty =
+ AvaloniaProperty.Register(""Tint"");
+
+ private static readonly Dictionary Geometries = new();
+
+ static Icon()
+ {
+ AffectsMeasure(SizeProperty);
+ AffectsRender(KindProperty, SizeProperty, StrokeWidthProperty, ColorProperty, TintProperty);
+ TokenProperty.Changed.AddClassHandler((icon, _) => icon.Token(TintProperty, icon.Token));
+ IsHitTestVisibleProperty.OverrideDefaultValue(false);
+ HorizontalAlignmentProperty.OverrideDefaultValue(HorizontalAlignment.Center);
+ VerticalAlignmentProperty.OverrideDefaultValue(VerticalAlignment.Center);
+ }
+
+ public Icon() => this.Token(TintProperty, Token);
+
+ public IconName Kind
+ {
+ get => GetValue(KindProperty);
+ set => SetValue(KindProperty, value);
+ }
+
+ public double Size
+ {
+ get => GetValue(SizeProperty);
+ set => SetValue(SizeProperty, value);
+ }
+
+ public double StrokeWidth
+ {
+ get => GetValue(StrokeWidthProperty);
+ set => SetValue(StrokeWidthProperty, value);
+ }
+
+ public ShellToken Token
+ {
+ get => GetValue(TokenProperty);
+ set => SetValue(TokenProperty, value);
+ }
+
+ public Color? Color
+ {
+ get => GetValue(ColorProperty);
+ set => SetValue(ColorProperty, value);
+ }
+
+ protected override Size MeasureOverride(Size availableSize) => new(Size, Size);
+
+ public override void Render(DrawingContext context)
+ {
+ var brush = Color is { } color ? new SolidColorBrush(color) : GetValue(TintProperty);
+ if (GetGeometry(Kind) is not { } geometry || brush is null) return;
+ // Scale the 24x24 grid to Size; the stroke scales with it so icons keep Lucide's weight.
+ var scale = Size / 24.0;
+ using (context.PushTransform(Matrix.CreateScale(scale, scale)))
+ context.DrawGeometry(null, new Pen(brush, StrokeWidth, lineCap: PenLineCap.Round, lineJoin: PenLineJoin.Round), geometry);
+ }
+
+ private static Geometry? GetGeometry(IconName kind)
+ {
+ if (!Geometries.TryGetValue(kind, out var geometry))
+ {
+ var data = IconPaths.Get(kind);
+ geometry = string.IsNullOrEmpty(data) ? null : Geometry.Parse(data);
+ Geometries[kind] = geometry;
+ }
+ return geometry;
+ }
+}
"
};
}
diff --git a/src/ShellUI.Native.Templates/Templates/InputTemplate.cs b/src/ShellUI.Native.Templates/Templates/InputTemplate.cs
index 7c321fb..dfaeef6 100644
--- a/src/ShellUI.Native.Templates/Templates/InputTemplate.cs
+++ b/src/ShellUI.Native.Templates/Templates/InputTemplate.cs
@@ -184,6 +184,183 @@ private void UpdateVisualState()
public new void Focus() => _entry.Focus();
public new void Unfocus() => _entry.Unfocus();
}
+",
+ [NativePlatform.Avalonia] = @"using System;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Data;
+using Avalonia.Input;
+using Avalonia.Layout;
+using Avalonia.Media;
+
+namespace YourProjectNamespace.Components.UI;
+
+// Text input — h-10 rounded-md border border-input px-3 text-sm.
+// Focus: border-ring + soft ring glow. Error: border-destructive.
+// The inner TextBox's Fluent chrome is cleared so this Border is the only frame.
+public class Input : Border
+{
+ public static readonly StyledProperty TextProperty =
+ AvaloniaProperty.Register(nameof(Text), defaultBindingMode: BindingMode.TwoWay);
+
+ public static readonly StyledProperty PlaceholderProperty =
+ AvaloniaProperty.Register(nameof(Placeholder));
+
+ public static readonly StyledProperty IsPasswordProperty =
+ AvaloniaProperty.Register(nameof(IsPassword));
+
+ public static readonly StyledProperty HasErrorProperty =
+ AvaloniaProperty.Register(nameof(HasError));
+
+ public static readonly StyledProperty IsReadOnlyProperty =
+ AvaloniaProperty.Register(nameof(IsReadOnly));
+
+ public static readonly StyledProperty MaxLengthProperty =
+ AvaloniaProperty.Register(nameof(MaxLength));
+
+ // Fluent's TextBox template takes its background and border brushes from these resources in
+ // every state (hover, focus, disabled); overriding them on the TextBox clears that chrome.
+ private static readonly string[] ClearedBrushes =
+ {
+ ""TextControlBackground"", ""TextControlBackgroundPointerOver"", ""TextControlBackgroundFocused"", ""TextControlBackgroundDisabled"",
+ ""TextControlBorderBrush"", ""TextControlBorderBrushPointerOver"", ""TextControlBorderBrushFocused"", ""TextControlBorderBrushDisabled"",
+ };
+
+ private readonly TextBox _textBox;
+ private bool _isFocused;
+
+ static Input()
+ {
+ TextProperty.Changed.AddClassHandler? TextChanged;
+
+ // Raised on Enter.
+ public event EventHandler? Completed;
+
+ public Input()
+ {
+ _textBox = new TextBox
+ {
+ FontSize = 14,
+ BorderThickness = new Thickness(0),
+ Padding = new Thickness(0),
+ MinHeight = 0,
+ VerticalAlignment = VerticalAlignment.Center,
+ VerticalContentAlignment = VerticalAlignment.Center
+ };
+ foreach (var key in ClearedBrushes)
+ _textBox.Resources[key] = Brushes.Transparent;
+ _textBox.Resources[""TextControlBorderThemeThickness""] = new Thickness(0);
+ _textBox.Resources[""TextControlBorderThemeThicknessFocused""] = new Thickness(0);
+ _textBox.Resources[""TextControlThemePadding""] = new Thickness(0);
+ _textBox.Token(TextBox.ForegroundProperty, ShellToken.Foreground)
+ .Token(TextBox.CaretBrushProperty, ShellToken.Foreground)
+ .Token(TextBox.PlaceholderForegroundProperty, ShellToken.MutedForeground);
+
+ _textBox.TextChanged += (_, e) =>
+ {
+ Text = _textBox.Text;
+ TextChanged?.Invoke(this, e);
+ };
+ _textBox.KeyDown += (_, e) =>
+ {
+ if (e.Key == Key.Enter) Completed?.Invoke(this, EventArgs.Empty);
+ };
+ _textBox.GotFocus += (_, _) => { _isFocused = true; UpdateVisualState(); };
+ _textBox.LostFocus += (_, _) => { _isFocused = false; UpdateVisualState(); };
+
+ Child = _textBox;
+ Height = 40;
+ Padding = new Thickness(12, 0);
+ BorderThickness = new Thickness(1);
+ CornerRadius = new CornerRadius(ShellTheme.RadiusMd);
+ Background = Brushes.Transparent;
+ Cursor = new Cursor(StandardCursorType.Ibeam);
+ UpdateVisualState();
+ }
+
+ // The glow color is a snapshot of a token, so it is repainted on theme changes.
+ protected override void OnAttachedToVisualTree(VisualTreeAttachmentEventArgs e)
+ {
+ base.OnAttachedToVisualTree(e);
+ ShellTheme.ThemeChanged += OnThemeChanged;
+ }
+
+ protected override void OnDetachedFromVisualTree(VisualTreeAttachmentEventArgs e)
+ {
+ base.OnDetachedFromVisualTree(e);
+ ShellTheme.ThemeChanged -= OnThemeChanged;
+ }
+
+ private void OnThemeChanged(object? sender, EventArgs e) => UpdateVisualState();
+
+ // Clicking the padding focuses the text box too.
+ protected override void OnPointerPressed(PointerPressedEventArgs e)
+ {
+ base.OnPointerPressed(e);
+ if (!_textBox.IsFocused) _textBox.Focus();
+ }
+
+ public new bool Focus(NavigationMethod method = NavigationMethod.Unspecified, KeyModifiers keyModifiers = KeyModifiers.None)
+ => _textBox.Focus(method, keyModifiers);
+
+ private void UpdateVisualState()
+ {
+ var stroke = HasError ? ShellToken.Destructive : _isFocused ? ShellToken.Ring : ShellToken.Input;
+ this.Token(BorderBrushProperty, stroke);
+ BoxShadow = _isFocused || HasError
+ ? new BoxShadows(new BoxShadow { Blur = 6, Color = ShellTheme.Get(HasError ? ShellToken.Destructive : ShellToken.Ring, 0.35) })
+ : default;
+ }
+}
"
};
}
diff --git a/src/ShellUI.Native.Templates/Templates/LabelTemplate.cs b/src/ShellUI.Native.Templates/Templates/LabelTemplate.cs
index a23dbe4..7addbe6 100644
--- a/src/ShellUI.Native.Templates/Templates/LabelTemplate.cs
+++ b/src/ShellUI.Native.Templates/Templates/LabelTemplate.cs
@@ -111,6 +111,89 @@ private void UpdateVisualState()
}
}
+public enum LabelSize { Xs, Sm, Default, Lg, Xl, Xxl, Xxxl }
+public enum LabelWeight { Light, Normal, Medium, Semibold, Bold }
+public enum LabelVariant { Default, Muted, Destructive, Success, Warning }
+",
+ [NativePlatform.Avalonia] = @"using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Media;
+
+namespace YourProjectNamespace.Components.UI;
+
+// Typography label with size / weight / variant — theme-aware.
+// Named ShellLabel because Avalonia already has a Label control.
+public class ShellLabel : TextBlock
+{
+ public static readonly StyledProperty SizeProperty =
+ AvaloniaProperty.Register(nameof(Size), LabelSize.Default);
+
+ public static readonly StyledProperty WeightProperty =
+ AvaloniaProperty.Register(nameof(Weight), LabelWeight.Normal);
+
+ public static readonly StyledProperty VariantProperty =
+ AvaloniaProperty.Register(nameof(Variant));
+
+ static ShellLabel()
+ {
+ SizeProperty.Changed.AddClassHandler((l, _) => l.UpdateVisualState());
+ WeightProperty.Changed.AddClassHandler((l, _) => l.UpdateVisualState());
+ VariantProperty.Changed.AddClassHandler((l, _) => l.UpdateVisualState());
+ }
+
+ public LabelSize Size
+ {
+ get => GetValue(SizeProperty);
+ set => SetValue(SizeProperty, value);
+ }
+
+ public LabelWeight Weight
+ {
+ get => GetValue(WeightProperty);
+ set => SetValue(WeightProperty, value);
+ }
+
+ public LabelVariant Variant
+ {
+ get => GetValue(VariantProperty);
+ set => SetValue(VariantProperty, value);
+ }
+
+ public ShellLabel() => UpdateVisualState();
+
+ private void UpdateVisualState()
+ {
+ FontSize = Size switch
+ {
+ LabelSize.Xs => 12,
+ LabelSize.Sm => 14,
+ LabelSize.Lg => 18,
+ LabelSize.Xl => 20,
+ LabelSize.Xxl => 24,
+ LabelSize.Xxxl => 30,
+ _ => 16
+ };
+
+ FontWeight = Weight switch
+ {
+ LabelWeight.Light => FontWeight.Light,
+ LabelWeight.Medium => FontWeight.Medium,
+ LabelWeight.Semibold => FontWeight.SemiBold,
+ LabelWeight.Bold => FontWeight.Bold,
+ _ => FontWeight.Normal
+ };
+
+ this.Token(ForegroundProperty, Variant switch
+ {
+ LabelVariant.Muted => ShellToken.MutedForeground,
+ LabelVariant.Destructive => ShellToken.Destructive,
+ LabelVariant.Success => ShellToken.Success,
+ LabelVariant.Warning => ShellToken.Warning,
+ _ => ShellToken.Foreground
+ });
+ }
+}
+
public enum LabelSize { Xs, Sm, Default, Lg, Xl, Xxl, Xxxl }
public enum LabelWeight { Light, Normal, Medium, Semibold, Bold }
public enum LabelVariant { Default, Muted, Destructive, Success, Warning }
diff --git a/src/ShellUI.Native.Templates/Templates/ProgressTemplate.cs b/src/ShellUI.Native.Templates/Templates/ProgressTemplate.cs
index e05a9a9..a74801b 100644
--- a/src/ShellUI.Native.Templates/Templates/ProgressTemplate.cs
+++ b/src/ShellUI.Native.Templates/Templates/ProgressTemplate.cs
@@ -146,6 +146,126 @@ private void UpdateFill(bool animate)
}
}
+public enum ProgressVariant
+{
+ Default,
+ Success,
+ Warning,
+ Destructive
+}
+",
+ [NativePlatform.Avalonia] = @"using System;
+using Avalonia;
+using Avalonia.Animation;
+using Avalonia.Animation.Easings;
+using Avalonia.Controls;
+using Avalonia.Layout;
+
+namespace YourProjectNamespace.Components.UI;
+
+// Progress bar — h-2 rounded-full track, fill animates to the new value.
+public class Progress : Grid
+{
+ public static readonly StyledProperty ValueProperty =
+ AvaloniaProperty.Register(nameof(Value));
+
+ public static readonly StyledProperty MaximumProperty =
+ AvaloniaProperty.Register(nameof(Maximum), 100.0);
+
+ public static readonly StyledProperty VariantProperty =
+ AvaloniaProperty.Register(nameof(Variant));
+
+ public static readonly StyledProperty ShowLabelProperty =
+ AvaloniaProperty.Register(nameof(ShowLabel));
+
+ private const double TrackHeight = 8;
+
+ private readonly Panel _track;
+ private readonly Border _trackFill;
+ private readonly Border _fill;
+ private readonly TextBlock _label;
+ private readonly Transitions _fillTransitions = new()
+ {
+ new DoubleTransition { Property = WidthProperty, Duration = TimeSpan.FromMilliseconds(300), Easing = new CubicEaseOut() }
+ };
+
+ static Progress()
+ {
+ ValueProperty.Changed.AddClassHandler((p, _) => p.UpdateFill(animate: true));
+ MaximumProperty.Changed.AddClassHandler((p, _) => p.UpdateFill(animate: true));
+ VariantProperty.Changed.AddClassHandler((p, _) => p.UpdateVisualState());
+ ShowLabelProperty.Changed.AddClassHandler((p, _) => p.UpdateVisualState());
+ }
+
+ public double Value
+ {
+ get => GetValue(ValueProperty);
+ set => SetValue(ValueProperty, value);
+ }
+
+ public double Maximum
+ {
+ get => GetValue(MaximumProperty);
+ set => SetValue(MaximumProperty, value);
+ }
+
+ public ProgressVariant Variant
+ {
+ get => GetValue(VariantProperty);
+ set => SetValue(VariantProperty, value);
+ }
+
+ public bool ShowLabel
+ {
+ get => GetValue(ShowLabelProperty);
+ set => SetValue(ShowLabelProperty, value);
+ }
+
+ public double Percentage => Maximum > 0 ? Math.Clamp(Value / Maximum, 0, 1) * 100 : 0;
+
+ public Progress()
+ {
+ // Track tint is the fill color at 20% (bg-primary/20), so it follows the variant.
+ _trackFill = new Border { Opacity = 0.2, CornerRadius = new CornerRadius(TrackHeight / 2) };
+ _fill = new Border { CornerRadius = new CornerRadius(TrackHeight / 2), HorizontalAlignment = HorizontalAlignment.Left, Width = 0 };
+ _track = new Panel { Height = TrackHeight, VerticalAlignment = VerticalAlignment.Center, Children = { _trackFill, _fill } };
+ _track.SizeChanged += (_, _) => UpdateFill(animate: false);
+
+ _label = new TextBlock { FontSize = 12, VerticalAlignment = VerticalAlignment.Center, Margin = new Thickness(12, 0, 0, 0), IsVisible = false };
+ _label.Token(TextBlock.ForegroundProperty, ShellToken.MutedForeground);
+
+ ColumnDefinitions = new ColumnDefinitions(""*,Auto"");
+ SetColumn(_label, 1);
+ Children.Add(_track);
+ Children.Add(_label);
+ UpdateVisualState();
+ }
+
+ private void UpdateVisualState()
+ {
+ var token = Variant switch
+ {
+ ProgressVariant.Success => ShellToken.Success,
+ ProgressVariant.Warning => ShellToken.Warning,
+ ProgressVariant.Destructive => ShellToken.Destructive,
+ _ => ShellToken.Primary
+ };
+ _fill.Token(Border.BackgroundProperty, token);
+ _trackFill.Token(Border.BackgroundProperty, token);
+ _label.IsVisible = ShowLabel;
+ UpdateFill(animate: false);
+ }
+
+ private void UpdateFill(bool animate)
+ {
+ _label.Text = $""{Percentage:F0}%"";
+ if (_track.Bounds.Width <= 0) return;
+ // Resizes jump to the new width; only value changes animate.
+ _fill.Transitions = animate ? _fillTransitions : null;
+ _fill.Width = _track.Bounds.Width * Percentage / 100;
+ }
+}
+
public enum ProgressVariant
{
Default,
diff --git a/src/ShellUI.Native.Templates/Templates/SeparatorTemplate.cs b/src/ShellUI.Native.Templates/Templates/SeparatorTemplate.cs
index 1f7cc08..fb5b550 100644
--- a/src/ShellUI.Native.Templates/Templates/SeparatorTemplate.cs
+++ b/src/ShellUI.Native.Templates/Templates/SeparatorTemplate.cs
@@ -66,6 +66,51 @@ private void UpdateVisualState()
}
}
+public enum SeparatorOrientation
+{
+ Horizontal,
+ Vertical
+}
+",
+ [NativePlatform.Avalonia] = @"using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Layout;
+
+namespace YourProjectNamespace.Components.UI;
+
+// 1px divider in the Border token.
+public class Separator : Border
+{
+ public static readonly StyledProperty OrientationProperty =
+ AvaloniaProperty.Register