Updating prod with changes from staging

docs/angular/src/content/en/components/accordion.mdx

@@ -134,7 +134,7 @@ As demonstrated above, the <ApiLink type="Accordion" member="singleBranchExpand"
 
 Angular Accordion supports animations for both expanding and collapsing actions of the panels. Animation behavior can be customized. Normally, animations can be set for each expansion panel individually. However, it could also be applied to all panels at once on <ApiLink type="Accordion" /> level. This gives users the ability to disable animations for all sections at once via the animations property of the <ApiLink type="Accordion" />.
 
-With regards to animation, you have two options. First, you could set the `animationSettings` property on the accordion component:
+With regards to animation, you have two options. First, you could set the <ApiLink type="Accordion" member="animationSettings" label="animationSettings" /> property on the accordion component:
 
 ```typescript
 import { useAnimation, slideInLeft, slideOutRight } from '@angular/animations';
@@ -173,7 +173,7 @@ The following snippet demonstrates passing the animation settings to the compone
 ```
 
 <DocsAside type="info">
-If you would like to turn off the animation for the <ApiLink type="Accordion" /> the `animationSettings` could be set to `null`.
+If you would like to turn off the animation for the <ApiLink type="Accordion" /> the <ApiLink type="Accordion" member="animationSettings" label="animationSettings" /> could be set to `null`.
 </DocsAside>
 
 Alternatively, you have the ability to set every single <ApiLink type="ExpansionPanel" label="expansion panel" />`s <ApiLink type="ExpansionPanel" member="animationSettings" label="animationSettings" /> input.

docs/angular/src/content/en/components/avatar.mdx

@@ -78,7 +78,7 @@ The Ignite UI for Angular Avatar component comes in three shapes (square, rounde
 
 ### Avatar Shape
 
-We can change the avatar shape through the `shape` attribute setting its value to `square`, `rounded` or `circle`. By default, the shape of the avatar is `square`.
+We can change the avatar shape through the <ApiLink type="Avatar" member="shape" label="shape" /> attribute setting its value to `square`, `rounded` or `circle`. By default, the shape of the avatar is `square`.
 
 ```html
 <igx-avatar shape="circle"></igx-avatar>
@@ -111,7 +111,7 @@ igx-avatar {
 ```
 
 <DocsAside type="warning">
-The `roundShape` property of the `igx-avatar` component have been deprecated. The `shape` attribute should be used instead.
+The `roundShape` property of the `igx-avatar` component have been deprecated. The <ApiLink type="Avatar" member="shape" label="shape" /> attribute should be used instead.
 </DocsAside>
 
 If all went well, you should see something like the following in the browser:
@@ -120,7 +120,7 @@ If all went well, you should see something like the following in the browser:
 
 ### Avatar displaying image
 
-To get an avatar that displays an image, all you have to do is set the image source via the `src` property.
+To get an avatar that displays an image, all you have to do is set the image source via the <ApiLink type="Avatar" member="src" label="src" /> property.
 
 ```html
 <igx-avatar src="https://randomuser.me/api/portraits/men/1.jpg"
@@ -173,7 +173,7 @@ To get started with styling the avatar, we need to import the `index` file, wher
 // @import '~igniteui-angular/lib/core/styles/themes/index';
 ```
 
-Following the simplest approach, we create a new theme that extends the <ApiLink kind="sass" module="themes" type="function-avatar-theme" label="avatar-theme" code={true} /> providing values for the `$background` and `$border-radius` parameters. The `$color` (or `$icon-color`) is automatically set to either black or white, depending on which offers better contrast with the specified background. Note that the `$border-radius` property only takes effect when the avatar's `shape` is set to `rounded`.
+Following the simplest approach, we create a new theme that extends the <ApiLink kind="sass" module="themes" type="function-avatar-theme" label="avatar-theme" code={true} /> providing values for the `$background` and `$border-radius` parameters. The `$color` (or `$icon-color`) is automatically set to either black or white, depending on which offers better contrast with the specified background. Note that the `$border-radius` property only takes effect when the avatar's <ApiLink type="Avatar" member="shape" label="shape" /> is set to `rounded`.
 
 Given the following markup:
 

docs/angular/src/content/en/components/badge.mdx

@@ -43,14 +43,14 @@ import { IgxBadgeModule } from 'igniteui-angular/badge';
 // import { IgxBadgeModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
-    ...
-    imports: [..., IgxBadgeModule],
-    ...
+  ...
+  imports: [..., IgxBadgeModule],
+  ...
 })
 export class AppModule {}
 ```
 
-Alternatively, as of `16.0.0` you can import the `IgxBadgeComponent` as a standalone dependency.
+Alternatively, as of `16.0.0` you can import the <ApiLink type="Badge" label="IgxBadgeComponent" /> as a standalone dependency.
 
 ```typescript
 // home.component.ts
@@ -60,11 +60,11 @@ import { IgxBadgeComponent } from 'igniteui-angular/badge';
 // import { IgxBadgeComponent } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
-    selector: 'app-home',
-    template: '<igx-badge icon="check" type="success" shape="square"></igx-badge>',
-    styleUrls: ['home.component.scss'],
-    standalone: true,
-    imports: [IgxBadgeComponent]
+  selector: 'app-home',
+  template: '<igx-badge icon="check" type="success" shape="square"></igx-badge>',
+  styleUrls: ['home.component.scss'],
+  standalone: true,
+  imports: [IgxBadgeComponent]
 })
 export class HomeComponent {}
 ```
@@ -95,15 +95,14 @@ import { IgxAvatarModule } from 'igniteui-angular/avatar';
 export class AppModule {}
 ```
 
-_Alternatively, as of `16.0.0` you can import the `IgxBadgeComponent` and `IgxAvatarComponent` as standalone dependencies._
+_Alternatively, as of `16.0.0` you can import the <ApiLink type="Badge" label="IgxBadgeComponent" /> and <ApiLink type="Avatar" label="IgxAvatarComponent" /> as standalone dependencies._
 
 Next, we will add those components to our template:
 
 ```html
 <div class="wrapper">
-
-    <igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
-    <igx-badge icon="check" type="success"></igx-badge>
+  <igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
+  <igx-badge icon="check" type="success"></igx-badge>
 </div>
 ```
 
@@ -124,7 +123,7 @@ igx-badge {
 
 ### Badge Shape
 
-We can change the badge shape through the `shape` attribute setting its value to `square`. By default, the shape of the badge is `rounded`.
+We can change the badge shape through the <ApiLink type="Badge" member="shape" label="shape" /> attribute setting its value to `square`. By default, the shape of the badge is `rounded`.
 
 ```html
 <igx-badge icon="check" type="success" shape="square"></igx-badge>
@@ -186,11 +185,11 @@ In addition to material icons, the `igx-badge` component also supports usage of
 
 ```ts
 export class BadgeIconComponent implements OnInit { 
-    constructor (protected _iconService: IgxIconService) {}
+  constructor (protected _iconService: IgxIconService) {}
 
-    public ngOnInit() {
-        this._iconService.addSvgIconFromText(heartMonitor.name, heartMonitor.value, 'imx-icons');
-    }
+  public ngOnInit() {
+    this._iconService.addSvgIconFromText(heartMonitor.name, heartMonitor.value, 'imx-icons');
+  }
 }
 ```
 
@@ -202,9 +201,25 @@ Then, just specify the icon name and family as follows:
 
 <Sample src="/data-display/badge-icon" height={100} alt="" />
 
+### Outlined Badge
+
+The `igx-badge` component can also have a subtle border around it when its <ApiLink type="Badge" member="outlined" label="outlined" /> attribute is set.
+
+```html
+<igx-badge outlined></igx-badge>
+```
+
+<Sample src="/data-display/badge-outlined-sample" height={100} alt="" />
+
+The color of the border can also be customized with the `$border-color` property from the <ApiLink kind="sass" module="themes" type="function-badge-theme" label="badge-theme" code={true} />.
+
 ### Dot Badge
 
-The `igx-badge` component can also render as a minimal dot indicator for notifications by enabling its `dot` property. Dot badges do not support content, but they can be outlined and can use any of the available dot types (e.g., primary, success, info, etc.).
+The `igx-badge` component can also render as a minimal dot indicator for notifications by enabling its <ApiLink type="Badge" member="dot" label="dot" /> property. Dot badges do not support content, but they can be outlined and can use any of the available dot types (e.g., primary, success, info, etc.).
+
+```html
+<igx-badge dot></igx-badge>
+```
 
 <Sample src="/data-display/badge-dot-sample" height={100} alt="" />
 
@@ -224,14 +239,14 @@ import { IgxBadgeModule } from 'igniteui-angular/badge';
 // import { IgxListModule, IgxAvatarModule, IgxBadgeModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
-    ...
-    imports: [..., IgxListModule, IgxAvatarModule, IgxBadgeModule],
+  ...
+  imports: [..., IgxListModule, IgxAvatarModule, IgxBadgeModule],
 })
 export class AppModule {}
 ```
 
 <DocsAside type="info">
-The <ApiLink type="Badge" label="igx-badge" /> has <ApiLink type="Badge" member="icon" label="icon" /> and <ApiLink type="Badge" member="type" label="type" /> inputs to configure the badge look. You can set the icon by providing its name from the official [material icons set](https://material.io/icons/). The badge type can be set to either `Default`, `Info`, `Success`, `Warning`, or `Error`. Depending on the type, a specific background color is applied.
+The <ApiLink type="Badge" label="igx-badge" /> has <ApiLink type="Badge" member="icon" label="icon" /> and <ApiLink type="Badge" member="type" label="type" /> inputs to configure the badge look. You can set the icon by providing its name from the official [material icons set](https://material.io/icons/). The badge type can be set to either `Default`, `Info`, `Success`, `Warning`, or `Error`. Each type applies a specific background color, which takes precedence over any custom background color.
 </DocsAside>
 
 In our sample, <ApiLink type="Badge" member="icon" label="icon" /> and <ApiLink type="Badge" member="type" label="type" /> are bound to model properties named _icon_ and _type_.
@@ -247,18 +262,13 @@ Next, we're adding the contacts in our template:
   </igx-list-item>
   <igx-list-item *ngFor="let member of members">
     <div class="wrapper">
-
       <div>
         <igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
-        <igx-badge [icon]="member.icon" [type]="member.type" class="badge-style"></igx-badge>
-
-</div>
+        <igx-badge [icon]="member.icon" [type]="member.type" class="badge-style"></igx-badge>   
+      </div>
       <div class="contact-container">
-
         <span class="contact-name">{{ member.name }}</span>
-
-</div>
-
+      </div>  
 </div>
   </igx-list-item>
 </igx-list>
@@ -270,42 +280,41 @@ We're going to create our members in the typescript file like this:
 // contacts.component.ts
 
 ...
- public members: Member[] = [
-    new Member('Terrance Orta', 'online'),
-    new Member('Donna Price', 'online'),
-    new Member('Lisa Landers', 'away'),
-    new Member('Dorothy H. Spencer', 'offline'),
-  ];
+public members: Member[] = [
+  new Member('Terrance Orta', 'online'),
+  new Member('Donna Price', 'online'),
+  new Member('Lisa Landers', 'away'),
+  new Member('Dorothy H. Spencer', 'offline'),
+];
 
 ```
 
 ```typescript
-
 ...
 class Member {
-    public name: string;
-    public status: string;
-    public type: string;
-    public icon: string;
-
-    constructor(name: string, status: string) {
-        this.name = name;
-        this.status = status;
-        switch (status) {
-            case 'online':
-                this.type = 'success';
-                this.icon = 'check';
-                break;
-            case 'away':
-                this.type = 'warning';
-                this.icon = 'schedule';
-                break;
-            case 'offline':
-                this.type = 'error';
-                this.icon = 'remove';
-                break;
-        }
+  public name: string;
+  public status: string;
+  public type: string;
+  public icon: string;
+
+  constructor(name: string, status: string) {
+    this.name = name;
+    this.status = status;
+    switch (status) {
+      case 'online':
+        this.type = 'success';
+        this.icon = 'check';
+        break;
+      case 'away':
+        this.type = 'warning';
+        this.icon = 'schedule';
+        break;
+      case 'offline':
+        this.type = 'error';
+        this.icon = 'remove';
+        break;
     }
+  }
 }
 ```
 
@@ -315,16 +324,16 @@ Position the badge in its parent container:
 /* contacts.component.css */
 
 .wrapper {
-    display: flex;
-    flex-direction: row;
+  display: flex;
+  flex-direction: row;
 }
 
 .contact-name {
-    font-weight: 600;
+  font-weight: 600;
 }
 
 .contact-container {
-    margin-left: 20px;
+  margin-left: 20px;
 }
 
 .badge-style {
@@ -359,7 +368,7 @@ To get started with styling the badges, we need to import the `index` file, wher
 // @import '~igniteui-angular/lib/core/styles/themes/index';
 ```
 
-Following the simplest approach, we create a new theme that extends the <ApiLink kind="sass" module="themes" type="function-badge-theme" label="badge-theme" code={true} /> and accepts some parameters that style the badge's items. When you set the `$background-color`, the `$icon-color` and `$text-color` are automatically assigned based on which offers better contrast—black or white. Note that the `$border-radius` property only takes effect when the badge's `shape` is set to `square`.
+Following the simplest approach, we create a new theme that extends the <ApiLink kind="sass" module="themes" type="function-badge-theme" label="badge-theme" code={true} /> and accepts some parameters that style the badge's items. When you set the `$background-color`, the `$icon-color` and `$text-color` are automatically assigned based on which offers better contrast—black or white. Note that the `$border-radius` property only takes effect when the badge's <ApiLink type="Badge" member="shape" label="shape" /> is set to `square`.
 
 ```scss
 $custom-badge-theme: badge-theme(
@@ -416,8 +425,10 @@ At the end your badges should look like this:
 
 <Sample src="/data-display/badge-tailwind-styling-sample" height={340} iframeOnly />
 
-## API References
 <hr/>
+
+## API References
+
 - <ApiLink type="Avatar" />
 - <ApiLink type="Badge" />
 - <ApiLink kind="sass" module="themes" type="function-badge-theme" label="IgxBadgeComponent Styles" />

docs/angular/src/content/en/components/banner.mdx

@@ -197,7 +197,7 @@ export class MyBannerComponent {
 
 ### Binding to events
 
-The banner component emits events when changing its state - <ApiLink type="Banner" member="opening" label="opening" /> and <ApiLink type="Banner" member="opened" label="opened" /> are called when the banner is shown (before and after, resp.), while <ApiLink type="Banner" member="closing" label="closing" /> and <ApiLink type="Banner" member="closed" label="closed" /> are emitted when the banner is closed. The _ing_ events (`opening`, `closing`) are cancelable - they use the `ICancelEventArgs` interface and the emitted object has a `cancel` property. If the `cancel` property is set to true, the corresponding end action and event will not be triggered - e.g. if we cancel `opening`, the banner's `open` method will not finish and the banner will not be shown.
+The banner component emits events when changing its state - <ApiLink type="Banner" member="opening" label="opening" /> and <ApiLink type="Banner" member="opened" label="opened" /> are called when the banner is shown (before and after, resp.), while <ApiLink type="Banner" member="closing" label="closing" /> and <ApiLink type="Banner" member="closed" label="closed" /> are emitted when the banner is closed. The _ing_ events (<ApiLink type="Banner" member="opening" label="opening" />, <ApiLink type="Banner" member="closing" label="closing" />) are cancelable - they use the `ICancelEventArgs` interface and the emitted object has a `cancel` property. If the `cancel` property is set to true, the corresponding end action and event will not be triggered - e.g. if we cancel <ApiLink type="Banner" member="opening" label="opening" />, the banner's <ApiLink type="Banner" member="open" label="open()" /> method will not finish and the banner will not be shown.
 
 To cancel an event, bind it to the emitted object and set its `cancel` property to `true`.
 
@@ -256,7 +256,7 @@ The banner will also have a WiFi icon in the navbar. As the subscription fires o
 </igx-navbar>
 ```
 
-Finally, we will add a `toast`, displaying a message about the WiFi state. The results of the templated banner can be seen in the demo below:
+Finally, we will add a <ApiLink type="Toast" />, displaying a message about the WiFi state. The results of the templated banner can be seen in the demo below:
 
 <Sample src="/notifications/banner-advanced-sample" height={530} alt="" />