Change Name Roundness to Smoothness and add Logos

Directory.Build.props

@@ -4,12 +4,14 @@
         <Nullable>enable</Nullable>
         <ImplicitUsings>enable</ImplicitUsings>
 
+        <PackageIcon>icon.png</PackageIcon>
         <PackageReadmeFile>README.md</PackageReadmeFile>
     </PropertyGroup>
 
     <ItemGroup>
         <PackageReference Include="Microsoft.SourceLink.GitHub" Version="*" PrivateAssets="All" />
         <None Include="../../README.md" Pack="true" PackagePath="\"/>
+        <None Include="../../logo.png" Pack="true" PackagePath="\"/>
     </ItemGroup>
 
     <!-- package info -->

README.md

@@ -43,7 +43,7 @@ dotnet add package Squircle.Blazor
 
 ```html
 
-<SquircleElement Radius="50" Roundness="0.2f" Style="width:200px;height:200px;background:red;">
+<SquircleElement Radius="50" Smoothness="0.2f" Style="width:200px;height:200px;background:red;">
     <div> Content </div>
 </SquircleElement>
 
@@ -71,12 +71,12 @@ public string? Style { get; set; }
 public float? Radius { get; set; }
 
 /// <summary>
-/// Gets or sets the roundness of the SquircleElement.
+/// Gets or sets the smoothness of the SquircleElement.
 /// Recommended to set range 0 - 0.4.
 /// The default value is the ratio of iOS default.
 /// </summary>
 [Parameter]
-public float? Roundness { get; set; } = _defaultRoundness;
+public float? Smoothness { get; set; }
 
 /// <summary>
 /// Gets or sets the child content of the SquircleElement.
@@ -91,7 +91,7 @@ Please consider using filter drop-shadow.
 ```html
 
 <div style="filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.3));">
-    <SquircleElement Radius="50" Roundness="0.2f" Style="width:200px;height:200px;background:red;">
+    <SquircleElement Radius="50" Smoothness="0.2f" Style="width:200px;height:200px;background:red;">
         <div> Content </div>
     </SquircleElement>
 </div>

demo/Squircle.Blazor.Demo/Pages/Home.razor

@@ -1,6 +1,6 @@
 @page "/"
 
-<PageTitle> Home</PageTitle>
+<PageTitle> Blazor Squircle DEMO </PageTitle>
 
 <div style="display:flex; gap: 20px;flex-direction:column;padding: 32px;">
     <div style="display:flex; gap: 20px;flex-direction:column;">
@@ -14,11 +14,11 @@
 
         <div style="display:flex;gap: 12px;align-items:end;">
             <div style="display:flex;flex-direction:column;">
-                <label for="roundness">Roundness</label>
-                <input type="range" id="roundness" @bind="_roundness" @bind:event="oninput" min="0" max="0.4" step="0.01" />
+                <label for="smoothness">Smoothness</label>
+                <input type="range" id="smoothness" @bind="_smoothness" @bind:event="oninput" min="0" max="0.4" step="0.01" />
             </div>
-            <button @onclick=@(_ => _roundness = null) disabled="@(_roundness is null)">Default</button>
-            <p style="margin: 0;">@(_roundness?.ToString() ?? "Default")</p>
+            <button @onclick=@(_ => _smoothness = null) disabled="@(_smoothness is null)">Default</button>
+            <p style="margin: 0;">@(_smoothness?.ToString() ?? "Default")</p>
         </div>
 
         <div style="display:flex;gap: 12px;align-items:end;">
@@ -33,8 +33,8 @@
 
     <div style="display:flex;border-spacing:20px;gap: 20px;margin-top:48px;">
         <div style="display:flex; gap: 20px;flex-direction:column;">
-            <SquircleElement Style="@HalfStyle" Radius="_radius" Roundness="_roundness">Squircle</SquircleElement>
-            <SquircleElement Style="@Style" Radius="_radius" Roundness="_roundness">Squircle</SquircleElement>
+            <SquircleElement Style="@HalfStyle" Radius="_radius" Smoothness="_smoothness">Squircle</SquircleElement>
+            <SquircleElement Style="@Style" Radius="_radius" Smoothness="_smoothness">Squircle</SquircleElement>
         </div>
 
         <div style="display:flex; gap: 20px;flex-direction:column;">
@@ -46,9 +46,9 @@
 
 @code {
     float _size = 100;
-    float? _roundness = null;
+    float? _smoothness = null;
     float? _radius = null;
 
-    string HalfStyle => $"background:#5750ff;width: {_size}px;height:{_size / 2}px;display:flex;align-items: center;justify-content: center;";
-    string Style => $"background:#15cbc6;width: {_size}px;height:{_size}px;display:flex;align-items: center;justify-content: center;";
+    string HalfStyle => $"background:linear-gradient(0deg, #d02948, #19c5e0);width: {_size}px;height:{_size / 2}px;display:flex;align-items: center;justify-content: center;";
+    string Style => $"background:linear-gradient(0deg, #d02948, #19c5e0);width: {_size}px;height:{_size}px;display:flex;align-items: center;justify-content: center;";
 }

demo/Squircle.Blazor.Demo/wwwroot/index.html

@@ -7,7 +7,7 @@
     <title>Squircle.Blazor.Demo</title>
     <base href="/" />
     <link rel="stylesheet" href="css/app.css" />
-    <link rel="icon" type="image/png" href="favicon.png" />
+    <link rel="icon" type="image/png" href="favicon.ico" />
     <link href="Squircle.Blazor.Demo.styles.css" rel="stylesheet" />
 </head>
 

src/Squircle.Blazor/PathGenerator.cs

@@ -5,7 +5,7 @@ namespace Squircle.Blazor;
 
 public static class SquirclePathGenerator {
     [MethodImpl(MethodImplOptions.AggressiveInlining)]
-    public static string GetSquirclePath(double w, double h, double r1, double r2) {
+    public static string GenerateSquirclePath(double w, double h, double r1, double r2) {
         r1 = Math.Min(r1, r2);
         var path = $"""
          M 0,{r2}
@@ -25,7 +25,7 @@ public static string GetSquirclePath(double w, double h, double r1, double r2) {
     [MethodImpl(MethodImplOptions.AggressiveInlining)]
     public static string GetSquirclePathAsDataUri(double w, double h, double r1, double r2) {
         var id = $"squircle-{w}-{h}-{r1}-{r2}";
-        var path = GetSquirclePath(w, h, r1, r2);
+        var path = GenerateSquirclePath(w, h, r1, r2);
         var svg = $"""
             <svg xmlns="http://www.w3.org/2000/svg" width="{w}" height="{h}" viewBox="0 0 {w} {h}">
                 <defs>

src/Squircle.Blazor/Squircle.Blazor.csproj

@@ -4,7 +4,7 @@
         <TargetFramework>net8.0</TargetFramework>
     </PropertyGroup>
 
-     <ItemGroup>
-        <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.3" />
-    </ItemGroup>
+    <ItemGroup>
+        <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.*"  />
+   </ItemGroup>
 </Project>

src/Squircle.Blazor/SquircleElement.razor.cs

@@ -8,7 +8,7 @@ namespace Squircle.Blazor;
 /// Squircle shape component like iOS corner radius.
 /// </summary>
 public partial class SquircleElement : ComponentBase, IAsyncDisposable {
-    private const float _defaultRoundness = 0.0586f / 0.332f;
+    private const float _defaultSmoothness = 0.0586f / 0.332f;
     private ElementReference _divRef;
     private float _width = default;
     private float _height = default;
@@ -35,12 +35,12 @@ public partial class SquircleElement : ComponentBase, IAsyncDisposable {
     public float? Radius { get; set; }
 
     /// <summary>
-    /// Gets or sets the roundness of the SquircleElement.
+    /// Gets or sets the smoothness of the SquircleElement.
     /// Recommended to set range 0 - 0.4.
     /// The default value is the ratio of iOS default.
     /// </summary>
     [Parameter]
-    public float? Roundness { get; set; } = _defaultRoundness;
+    public float? Smoothness { get; set; } = _defaultSmoothness;
 
     /// <summary>
     /// Gets or sets the child content of the SquircleElement.
@@ -105,36 +105,36 @@ async void OnResized(float width, float height) {
     }
 
     /// <summary>
-    /// Gets the style string for the SquircleElement based on the current dimensions, radius, and roundness.
+    /// Gets the style string for the SquircleElement based on the current dimensions, radius, and smoothness.
     /// Caches the generated style to improve performance.
     /// </summary>
     string GetStyle() {
         var width = _width;
         var height = _height;
         var radius = Radius;
-        var roundness = Roundness ?? _defaultRoundness;
-        var key = $"{width}-{height}-{radius}-{roundness}";
+        var smoothness = Smoothness ?? _defaultSmoothness;
+        var key = $"{width}-{height}-{radius}-{smoothness}";
 
         if (_cache.ContainsKey(key)) {
             return Style + _cache[key];
         }
         else {
-            var mask = GetMaskStyle(width, height, radius, roundness);
+            var mask = GetMaskStyle(width, height, radius, smoothness);
             _cache[key] = mask;
             return Style + mask;
         }
     }
 
     /// <summary>
-    /// Generates the mask style string for the SquircleElement based on the provided dimensions, radius, and roundness.
+    /// Generates the mask style string for the SquircleElement based on the provided dimensions, radius, and smoothness.
     /// </summary>
-    static string GetMaskStyle(float width, float height, float? radius, float roundness) {
+    static string GetMaskStyle(float width, float height, float? radius, float smoothness) {
         var maxBorderRadius = Math.Min(width, height) / 2;
         var finalBorderRadius = Math.Min(radius ?? maxBorderRadius, maxBorderRadius);
         var dataUri = SquirclePathGenerator.GetSquirclePathAsDataUri(
             width,
             height,
-            finalBorderRadius * roundness,
+            finalBorderRadius * smoothness,
             finalBorderRadius
         );
 

test/Squircle.Test/SquircleElementTest.cs

@@ -17,7 +17,7 @@ public void Test1() {
         Assert.Equal(1, component.Instance.CacheCount);
 
         component.SetParametersAndRender(c => {
-            c.Add(p => p.Roundness, 0.2f);
+            c.Add(p => p.Smoothness, 0.2f);
         });
 
         // Check if cache is increased