Add rounded variation

src/components.d.ts

@@ -44,7 +44,7 @@ export namespace Components {
         /**
           * Initials to use as a fallback when no image is available (1-2 characters max recommended).
          */
-        "shape": 'circle' | 'square';
+        "shape": 'circle' | 'square' | 'rounded';
     }
     interface SlBadge {
         /**
@@ -1086,7 +1086,7 @@ declare namespace LocalJSX {
         /**
           * Initials to use as a fallback when no image is available (1-2 characters max recommended).
          */
-        "shape"?: 'circle' | 'square';
+        "shape"?: 'circle' | 'square' | 'rounded';
     }
     interface SlBadge {
         /**

src/components/avatar/avatar.scss

@@ -31,10 +31,14 @@
   border-radius: var(--sl-border-radius-circle);
 }
 
-.avatar--square {
+.avatar--rounded {
   border-radius: var(--sl-border-radius-medium);
 }
 
+.avatar--square {
+  border-radius: 0;
+}
+
 .avatar__icon {
   display: flex;
   align-items: center;

src/components/avatar/avatar.tsx

@@ -29,7 +29,7 @@ export class Avatar {
   @Prop() initials = '';
 
   /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
-  @Prop() shape: 'circle' | 'square' = 'circle';
+  @Prop() shape: 'circle' | 'square' | 'rounded' = 'circle';
 
   handleImageError() {
     this.hasError = true;
@@ -43,6 +43,7 @@ export class Avatar {
         class={{
           avatar: true,
           'avatar--circle': this.shape === 'circle',
+          'avatar--rounded': this.shape === 'rounded',
           'avatar--square': this.shape === 'square'
         }}
       >