IgniteUI · azure-pipelines · Apr 3, 2024 · Aug 22, 2024 · Aug 22, 2024 · Sep 11, 2024
diff --git a/en/components/badge.md b/en/components/badge.md
@@ -118,6 +118,20 @@ We can change the badge shape through the `shape` attribute setting its value to
 
 If everything's done right, you should see the demo sample shown above in your browser.
 
+### Badge Size
+
+The size of the badge can be controlled using the `--size` variable. It will make sure that the badge sizes proportionally in both directions. Keep in mind, however, that badges containing text values use the `caption` typography style for its font-size and line-height. For that reason, when setting the `--size` of a badge containing text to values below 16px, you will also need to modify its typography.
+
+Example:
+```scss
+igx-badge {
+  --size: 12px;
+
+  font-size: calc(var(--size) / 2);
+  line-height: normal;
+}
+```
+
 ### Badge Icon
 
 In addition to material icons, the `igx-badge` component also supports usage of [Material Icons Extended](../components/material-icons-extended.md) and any other custom icon set. To add an icon from the material icons extended set inside your badge component, first you have to register it: 

diff --git a/en/components/carousel.md b/en/components/carousel.md
@@ -121,19 +121,7 @@ export class HomeComponent {
 
 By default, the Carousel in Angular has its **[`loop`]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#loop)** input property set to `true` ( *looping occurs when the first slide comes after the last by navigating using the Next action, or when the last slide comes after the first by using the Previous action* ). The looping behavior can be disabled by setting the value of the `loop` input to `false`.
 
-To keep track of each slide index, the carousel has indicators that are positioned at the `bottom` of the carousel by default. In order to change this behavior, we have to use the [indicatorsOrientation]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#indicatorsOrientation) property and assign it to `top`. Indicators can be disabled by adding an empty template.
-
-The carousel template may look like this:
-
-```html
-<div class="carousel-container">
-    <igx-carousel #carousel [loop]="false">
-      ...
-        <!-- Adding an empty template to disable carousel's indicators -->
-        <ng-template igxCarouselIndicator></ng-template>
-    </igx-carousel>
-</div>
-```
+To keep track of each slide index, the carousel has indicators that are positioned at the `bottom` of the carousel by default. In order to change this behavior, we have to use the [indicatorsOrientation]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#indicatorsOrientation) property and assign it to `top`. Indicators can be disabled by setting the `indicators` input property to `false`.
 
 ### Custom indicators
 <div class="divider--half"></div>
@@ -279,12 +267,13 @@ The carousel [animations](carousel.md#angular-carousel-animations) are fully sup
 ### Keyboard navigation
 <div class="divider--half"></div>
 
-* To navigate to the **next**/**previous** slide, you have to use, respectfully:
-    * `Arrow Right` key for the next slide
-    * `Arrow Left` key for the previous slide
-*  To navigate to the **end**/**start** slide you have to use, respectfully:
-    * `End` key for the end slide
-    * `Home` key for the start slide
+* Navigation buttons
+    * `Space`/`Enter` key - navigates to the next/previous slide.
+* Indicators
+    * `Arrow Left` key - navigates to the previous (next in Right-to-Left mode) slide.
+    * `Arrow Right` key - navigates to the next (previous in Right-to-Left mode) slide.
+    * `Home` key - navigates to the first (last in Right-to-Left mode) slide.
+    * `End` key - navigates to the last (first in Right-to-Left mode) slide.
 
 ### Automatic transitioning
 <div class="divider--half"></div>
@@ -312,14 +301,10 @@ Our carousel will look like this in the template:
 ```html
 ...
 <div class="carousel-wrapper">
-    <igx-carousel [navigation]="false" [pause]="false" animationType="fade" [interval]="2000" [gesturesSupport]="false">
-        <div class="slides-wrapper">
-            <igx-slide *ngFor="let item of slides">
-                  <!-- Slides content goes here -->
-             </igx-slide>
-        </div>
-        <!-- Adding an empty template to disable carousel's indicators -->
-        <ng-template igxCarouselIndicator></ng-template>
+    <igx-carousel [navigation]="false" [indicators]="false" [pause]="false" animationType="fade" [interval]="2000" [gesturesSupport]="false">
+        <igx-slide *ngFor="let item of slides">
+            <!-- Slides content goes here -->
+        </igx-slide>
     </igx-carousel>
 </div>
 ...

diff --git a/en/components/combo.md b/en/components/combo.md
@@ -231,7 +231,7 @@ By default, the combo control provides multiple selection. The snippet below dem
 ```typescript
 public singleSelection(event: IComboSelectionChangeEventArgs) {
     if (event.added.length) {
-        event.newSelection = event.added;
+        event.newValue = event.added;
     }
 }
 ```

diff --git a/en/components/snackbar.md b/en/components/snackbar.md
@@ -254,29 +254,28 @@ public restore() {
            iframe-src="{environment:demosBaseUrl}/notifications/snackbar-sample-4" >
 </code-view>
 
-### Overlay Settings
-The [`IgxSnackbarComponent`]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html) uses [Overlay Settings]({environment:angularApiUrl}/interfaces/overlaysettings.html) to control the position of its container. The default settings can be changed by defining Custom OverlaySettings and passing them to the snackbar `open()` method:
+### Positioning
+Use [`positionSettings`]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html#positionSettings) property to configure where the snackbar appears. By default, it is displayed at the bottom of the page. In the sample below, we set notification to appear at the top position.
 
-```typescript
-public customSettings: OverlaySettings = {
-    positionStrategy: new GlobalPositionStrategy(
-        { 
-            horizontalDirection: HorizontalAlignment.Left,
-            verticalDirection: VerticalAlignment.Top
-        }),
-    modal: true,
-    closeOnOutsideClick: true,
-};
-
-snackbar.open(customSettings);
+```html
+<!--sample.component.html-->
+<button igxButton="contained" (click)="open(snackbar)">Show notification on top</button>
+<igx-snackbar #snackbar>Notification displayed</igx-snackbar>
 ```
 
-Users can also provide a specific outlet where the snackbar will be placed in the DOM when it is visible:
-
-```html
-<igx-snackbar [outlet]="igxBodyOverlayOutlet"></igx-snackbar>
-<div #igxBodyOverlayOutlet igxOverlayOutlet></div>
+```typescript
+// sample.component.ts
+import { VerticalAlignment, HorizontalAlignment } from 'igniteui-angular';
+// import { VerticalAlignment, HorizontalAlignment } from '@infragistics/igniteui-angular'; for licensed package
+...
+public open(snackbar) {
+    snackbar.positionSettings.verticalDirection = VerticalAlignment.Top;
+    snackbar.positionSettings.horizontalDirection = HorizontalAlignment.Right;
+    snackbar.open();
+}
+...
 ```
+
 ## Styling
 To get started with styling the snackbar, we need to import the index file, where all the theme functions and component mixins live:
 

diff --git a/en/components/toast.md b/en/components/toast.md
@@ -110,9 +110,6 @@ public showMessage() {
 }
 ```
 
-> [!WARNING]
-> The igx-toast component `show` and `hide` methods have been deprecated. `open` and `close` should be used instead.
-
 ## Examples
 
 ### Hide/Auto Hide
@@ -178,30 +175,6 @@ public open(toast) {
            iframe-src="{environment:demosBaseUrl}/notifications/toast-sample-5" >
 </code-view>
 
-### Overlay Settings
-The [`IgxToastComponent`]({environment:angularApiUrl}/classes/igxtoastcomponent.html) uses [Overlay Settings]({environment:angularApiUrl}/interfaces/overlaysettings.html) to control the position of its container. The default settings can be changed by defining Custom OverlaySettings and passing them to the toast `open()` method:
-
-```typescript
-public customSettings: OverlaySettings = {
-    positionStrategy: new GlobalPositionStrategy(
-        { 
-            horizontalDirection: HorizontalAlignment.Left,
-            verticalDirection: VerticalAlignment.Top
-        }),
-    modal: true,
-    closeOnOutsideClick: true,
-};
-
-toast.open(customSettings);
-```
-
-Users can also provide a specific outlet where the toast will be placed in the DOM when it is visible:
-
-```html
-<igx-toast [outlet]="igxBodyOverlayOutlet"></igx-toast>
-<div #igxBodyOverlayOutlet igxOverlayOutlet></div>
-```
-
 <div class="divider--half"></div>
 
 ## Styling
@@ -215,7 +188,7 @@ To get started with styling the toast, we need to import the index file, where a
 // @import '~igniteui-angular/lib/core/styles/themes/index';
 ``` 
 
-Following the simplest approach, we create a new theme that extends the [`toast-theme`]({environment:sassApiUrl}/index.html#function-toast-theme) and accepts the `$shadow`, `$background`, `$text-color` and the `$border-radius` parameters.
+Following the simplest approach, we create a new theme that extends the [`toast-theme`]({environment:sassApiUrl}/index.html#function-toast-theme) and accepts the `$background`, `$text-color` and `$border-radius` parameters.
 
 ```scss
 $custom-toast-theme: toast-theme(

diff --git a/jp/components/carousel.md b/jp/components/carousel.md
@@ -122,19 +122,7 @@ export class HomeComponent {
 
 デフォルトでは、Angular のカルーセルの **[`loop`]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#loop)** 入力プロパティは `true` に設定されています (ループは、Next 動作でナビゲートするときに最初のスライドが最後のスライドの後に来るか、Previous 動作を使用して最後のスライドが最初のスライドの後に来るときに起こります)。ループ動作を無効にするには、`loop` 入力の値を `false` に設定します。
 
-各スライド インデックスを追跡するために、カルーセルには、デフォルトでカルーセルの `bottom` に配置されるインジケーターがあります。この動作を変更するには、[indicatorsOrientation]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#indicatorsOrientation) プロパティを使用して、`top` に割り当てる必要があります。空のテンプレートを追加すると、インジケーターを無効にできます。
-
-カルーセル テンプレートは以下のようになります。
-
-```html
-<div class="carousel-container">
-    <igx-carousel #carousel [loop]="false">
-      ...
-        <!-- Adding an empty template to disable carousel's indicators -->
-        <ng-template igxCarouselIndicator></ng-template>
-    </igx-carousel>
-</div>
-```
+各スライド インデックスを追跡するために、カルーセルには、デフォルトでカルーセルの `bottom` に配置されるインジケーターがあります。この動作を変更するには、[indicatorsOrientation]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#indicatorsOrientation) プロパティを使用して、`top` に割り当てる必要があります。インジケーターは、`indicators` 入力プロパティを `false` に設定することで無効にできます。
 
 ### カスタム インジケーター
 <div class="divider--half"></div>
@@ -280,12 +268,13 @@ Carousel [アニメーション](carousel.md#angular-carousel-のアニメーシ
 ### キーボード ナビゲーション
 <div class="divider--half"></div>
 
-* **次へ**/**前へ**のスライドに移動するには、それぞれ以下を使用する必要があります。
-    * `右矢印` キー - 次のスライド
-    * `左矢印` キー - 前のスライド
-* **最後**/**最初**のスライドに移動するには、それぞれ以下を使用する必要があります。
-    * `End` キー - 最後のスライド
-    * `Home` キー - 最初のスライド
+* ナビゲーション ボタン
+    * `Space`/`Enter` キー - 次のスライド/前のスライドに移動します。
+* インジケーター
+    * `左矢印` キー - 前のスライド (右から左モードでは次) に移動します。
+    * `右矢印` キー - 次のスライド  (右から左モードでは前へ) に移動します。
+    * `Home` キー - 最初のスライド (右から左モードでは最後) に移動します。
+    * `End` キー - 最後のスライド (右から左モードでは最初) に移動します。
 
 ### 自動的なトランジション
 <div class="divider--half"></div>
@@ -313,14 +302,10 @@ Carousel [アニメーション](carousel.md#angular-carousel-のアニメーシ
 ```html
 ...
 <div class="carousel-wrapper">
-    <igx-carousel [navigation]="false" [pause]="false" animationType="fade" [interval]="2000" [gesturesSupport]="false">
-        <div class="slides-wrapper">
-            <igx-slide *ngFor="let item of slides">
-                  <!-- Slides content goes here -->
-             </igx-slide>
-        </div>
-        <!-- Adding an empty template to disable carousel's indicators -->
-        <ng-template igxCarouselIndicator></ng-template>
+    <igx-carousel [navigation]="false" [indicators]="false" [pause]="false" animationType="fade" [interval]="2000" [gesturesSupport]="false">
+        <igx-slide *ngFor="let item of slides">
+            <!-- Slides content goes here -->
+        </igx-slide>
     </igx-carousel>
 </div>
 ...

diff --git a/jp/components/combo.md b/jp/components/combo.md
@@ -232,7 +232,7 @@ export class MyExampleCombo {
 ```typescript
 public singleSelection(event: IComboSelectionChangeEventArgs) {
     if (event.added.length) {
-        event.newSelection = event.added;
+        event.newValue = event.added;
     }
 }
 ```

diff --git a/jp/components/snackbar.md b/jp/components/snackbar.md
@@ -5,7 +5,7 @@ _keywords: Angular Snackbar コンポーネント, Angular Snackbar コントロ
 _language: ja
 ---
 # Angular Snackbar (スナックバー) コンポーネントの概要
-<p class="highlight">Ignite UI for Angular Snackbar コンポーネントは、アクションを含むことができる単一行のメッセージで操作のフィードバックを提供します。SnackBar メッセージがその他の画面要素の上に表示され、画面の中央下に配置されます。</p>
+<p class="highlight">Ignite UI for Angular Snackbar コンポーネントは、アクションを含むことができる単一行のメッセージで操作のフィードバックを提供します。Snackbar メッセージがその他の画面要素の上に表示され、画面の中央下に配置されます。</p>
 <div class="divider"></div>
 
 ## Angular Snackbar の例
@@ -255,31 +255,29 @@ public restore() {
            iframe-src="{environment:demosBaseUrl}/notifications/snackbar-sample-4" >
 </code-view>
 
-### オーバーレイ設定
-[`IgxSnackbarComponent`]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html) は、[オーバーレイ設定]({environment:angularApiUrl}/interfaces/overlaysettings.html)を使用してコンテナーの位置を制御します。デフォルト設定は、カスタム オーバーレイ設定を定義し、それらをスナックバーの `open()` メソッドに渡すことで変更できます。
+### 配置
+[`positionSettings`]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html#positionSettings) プロパティを使用すると、Snackbar の表示位置を構成します。デフォルトで、ページの下に表示されます。以下のサンプルで、通知が上位置に表示されます。
 
-```typescript
-public customSettings: OverlaySettings = {
-    positionStrategy: new GlobalPositionStrategy(
-        { 
-            horizontalDirection: HorizontalAlignment.Left,
-            verticalDirection: VerticalAlignment.Top
-        }),
-    modal: true,
-    closeOnOutsideClick: true,
-};
-
-snackbar.open(customSettings);
+```html
+<!--sample.component.html-->
+<button igxButton="contained" (click)="open(snackbar)">Show notification on top</button>
+<igx-snackbar #snackbar>Notification displayed</igx-snackbar>
 ```
 
-ユーザーは、スナックバーが表示されたときに DOM に配置される特定のアウトレットを提供することもできます。
-
-```html
-<igx-snackbar [outlet]="igxBodyOverlayOutlet"></igx-snackbar>
-<div #igxBodyOverlayOutlet igxOverlayOutlet></div>
+```typescript
+// sample.component.ts
+import { VerticalAlignment, HorizontalAlignment } from 'igniteui-angular';
+// import { VerticalAlignment, HorizontalAlignment } from '@infragistics/igniteui-angular'; for licensed package
+...
+public open(snackbar) {
+    snackbar.positionSettings.verticalDirection = VerticalAlignment.Top;
+    snackbar.positionSettings.horizontalDirection = HorizontalAlignment.Right;
+    snackbar.open();
+}
+...
 ```
-## スタイル設定
 
+## スタイル設定
 スナックバーのスタイル設定を始めるには、すべてのテーマ関数とコンポーネント ミックスインが存在する index ファイルをインポートする必要があります。
 
 ```scss

diff --git a/jp/components/toast.md b/jp/components/toast.md
@@ -111,9 +111,6 @@ public showMessage() {
 }
 ```
 
-> [!WARNING]
-> igx-toast コンポーネントの `show` メソッドと `hide` メソッドは非推奨になりました。代わりに `open` と `close` を使用する必要があります。
-
 ## 例
 
 ### 非表示/自動的に隠す
@@ -179,30 +176,6 @@ public open(toast) {
            iframe-src="{environment:demosBaseUrl}/notifications/toast-sample-5" >
 </code-view>
 
-### オーバーレイ設定
-[`IgxToastComponent`]({environment:angularApiUrl}/classes/igxtoastcomponent.html) は、[オーバーレイ設定]({environment:angularApiUrl}/interfaces/overlaysettings.html)を使用してコンテナーの位置を制御します。デフォルト設定は、カスタム オーバーレイ設定を定義し、それらをトーストの `open()` メソッドに渡すことで変更できます。
-
-```typescript
-public customSettings: OverlaySettings = {
-    positionStrategy: new GlobalPositionStrategy(
-        { 
-            horizontalDirection: HorizontalAlignment.Left,
-            verticalDirection: VerticalAlignment.Top
-        }),
-    modal: true,
-    closeOnOutsideClick: true,
-};
-
-toast.open(customSettings);
-```
-
-ユーザーは、トーストが表示されたときに DOM に配置される特定のアウトレットを提供することもできます。
-
-```html
-<igx-toast [outlet]="igxBodyOverlayOutlet"></igx-toast>
-<div #igxBodyOverlayOutlet igxOverlayOutlet></div>
-```
-
 <div class="divider--half"></div>
 
 ## スタイル設定
@@ -216,7 +189,7 @@ Toast のスタイル設定を始めるには、すべてのテーマ関数と
 // @import '~igniteui-angular/lib/core/styles/themes/index';
 ```
 
-最も簡単な方法は、[`toast-theme`]({environment:sassApiUrl}/index.html#function-toast-theme) を拡張する新しいテーマを作成し、`$shadow`、`$background`、`$text-color` と `$border-radius` パラメーターを受け取る方法です。 
+最も簡単な方法は、[`toast-theme`]({environment:sassApiUrl}/index.html#function-toast-theme) を拡張する新しいテーマを作成し、`$background`、`$text-color` と `$border-radius` パラメーターを受け取る方法です。 
 
 ```scss
 $custom-toast-theme: toast-theme(