IgniteUI · Zneeky · May 12, 2026 · May 20, 2026
diff --git a/docs/angular/src/content/en/components/avatar.mdx b/docs/angular/src/content/en/components/avatar.mdx
@@ -108,7 +108,7 @@ igx-avatar {
 
 ```
 
-<DocsAside type="caution" title="Warning">
+<DocsAside type="warning">
 The `roundShape` property of the `igx-avatar` component have been deprecated. The `shape` attribute should be used instead.
 </DocsAside>
 

diff --git a/docs/angular/src/content/en/components/date-picker.mdx b/docs/angular/src/content/en/components/date-picker.mdx
@@ -337,7 +337,7 @@ The last step is to pass the custom Date Picker theme:
 }
 ```
 
-<DocsAside type="caution" title="Warning">
+<DocsAside type="warning">
 If the component is using an [`Emulated`](/themes/sass/component-themes#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`
 </DocsAside>
 

diff --git a/docs/angular/src/content/en/components/date-range-picker.mdx b/docs/angular/src/content/en/components/date-range-picker.mdx
@@ -612,7 +612,7 @@ The last step is to pass the custom themes:
 }
 ```
 
-<DocsAside type="caution" title="Warning">
+<DocsAside type="warning">
 If the component is using an [`Emulated`](/themes/sass/component-themes#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`
 </DocsAside>
 

diff --git a/docs/angular/src/content/en/components/grid/grid.mdx b/docs/angular/src/content/en/components/grid/grid.mdx
@@ -416,7 +416,7 @@ const POJO = [{
 
 ```
 
-<DocsAside type="caution" title="Warning">
+<DocsAside type="warning">
 **The key values must not contain arrays**.
 If you use <ApiLink type="Grid" member="autoGenerate" /> columns **the data keys must be identical.**
 </DocsAside>
@@ -584,7 +584,7 @@ the default functionality that you would expect from the grid.
 That is all sorting and filtering operations work out of the box without any additional
 configuration. Same goes for grouping and editing operations with or without transactions as well as the ability to template the cells of the bound column.
 
-<DocsAside type="caution" title="Warning">
+<DocsAside type="warning">
 The grids **do not** support this kind of binding for `primary key`, `foreign key` and `child key` properties where applicable.
 </DocsAside>
 

diff --git a/docs/angular/src/content/en/components/interactivity/accessibility-compliance.mdx b/docs/angular/src/content/en/components/interactivity/accessibility-compliance.mdx
@@ -85,7 +85,7 @@ The matrix below provides a high-level outline of the accessibility support prov
 |<span class="redCheck" />|The control/component is not entirely accessible unless you perform some sort of action.||
 |'white space'|this particular rule does not apply to the control||
 
-<DocsAside type="caution" title="Warning">
+<DocsAside type="warning">
 The table above is relevant only to the **Default theme** of Ignite UI for Angular theming library. The checklist compliance might be different when it comes to custom themes, typography and any visual changes related to animations and colors.
 </DocsAside>
 
@@ -168,7 +168,7 @@ The table above is relevant only to the **Default theme** of Ignite UI for Angul
 |<span class="redCheck" />|The control/component is not entirely accessible unless you perform some sort of action.||
 |'white space'|this particular rule does not apply to the control||
 
-<DocsAside type="caution" title="Warning">
+<DocsAside type="warning">
 The table above is relevant only to the **Default theme** of Ignite UI for Angular theming library. The checklist compliance might be different when it comes to custom themes, typography and any visual changes related to animations and colors.
 </DocsAside>
 

diff --git a/docs/angular/src/content/en/components/ripple.mdx b/docs/angular/src/content/en/components/ripple.mdx
@@ -72,7 +72,7 @@ export class HomeComponent {}
 
 Now that you have the Ignite UI for Angular Ripple module or directive imported, you can start using the `igxRipple` directive.
 
-<DocsAside type="caution" title="Warning">
+<DocsAside type="warning">
 The <ApiLink type="RippleDirective" suffix={false} label="igxRipple" /> uses the Web Animation API and runs natively on [browsers that support it.](http://caniuse.com/#feat=web-animation)
 The `web-animations.min.js` polyfill is [available](https://github.com/web-animations/web-animations-js)
 for other browsers.

diff --git a/docs/angular/src/content/en/components/slider/slider.mdx b/docs/angular/src/content/en/components/slider/slider.mdx
@@ -33,7 +33,7 @@ For a complete introduction to the Ignite UI for Angular, read the [_getting sta
 
 The next step is to import the `IgxSliderModule` in your **app.module.ts** file.
 
-<DocsAside type="caution" title="Warning">
+<DocsAside type="warning">
 **This component can utilize the [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) **optionally**. It can be imported in the root module of the application in order for touch interactions to work as expected.**.
 </DocsAside>
 

diff --git a/docs/angular/src/content/en/components/style-guide.mdx b/docs/angular/src/content/en/components/style-guide.mdx
@@ -161,7 +161,7 @@ Structured statements like for `x =1 to 10` loop <a href="#"><code>structures</c
 
 ## Alerts
 >
-<DocsAside type="caution" title="Warning">
+<DocsAside type="warning">
 This is some Note Text  
 that spreads across two lines
 </DocsAside>

diff --git a/docs/angular/src/content/en/components/themes/index.mdx b/docs/angular/src/content/en/components/themes/index.mdx
@@ -82,7 +82,7 @@ Let's break down the names of these color variables. The `ig` prefix is there as
 
 Changing these variants, you can completely overhaul the entire palette.
 
-<DocsAside type="caution" title="Warning">
+<DocsAside type="warning">
 Some components do not use colors from the palettes. In those instances, you will have to target the component CSS variables directly to modify their colors.
 To find out which palette colors are used by what component, take a look at the [Components Documentation]({environment:sassApiUrl}/themes).
 </DocsAside>

diff --git a/docs/angular/src/content/en/components/themes/misc/angular-material-theming.mdx b/docs/angular/src/content/en/components/themes/misc/angular-material-theming.mdx
@@ -261,7 +261,7 @@ For the Angular Material components, we also need to include their `core` mixin
 }
 ```
 
-<DocsAside type="caution" title="Warning">
+<DocsAside type="warning">
 Be sure to place the above code inside the `::ng-deep` selector to `penetrate` the [`Emulated`](../sass/component-themes/#view-encapsulation) ViewEncapsulation.
 </DocsAside>
 

diff --git a/docs/angular/src/content/en/components/themes/misc/bootstrap-theming.mdx b/docs/angular/src/content/en/components/themes/misc/bootstrap-theming.mdx
@@ -311,7 +311,7 @@ Lastly, we need to import the Bootstrap library - _always import it at the end!_
 
 Once we are done with modifying the `$theme-colors` map, the bootstrap components will already use the colors from the igx `$light-bootstrap-palette` for the light mode, and `$custom-dark-palette` for the dark one.
 
-<DocsAside type="caution" title="Warning">
+<DocsAside type="warning">
 Be sure to place the above code inside the `::ng-deep` selector to `penetrate` the [`Emulated`](/themes/sass/component-themes#view-encapsulation) ViewEncapsulation.
 </DocsAside>
 

diff --git a/docs/angular/src/content/en/components/themes/palettes.mdx b/docs/angular/src/content/en/components/themes/palettes.mdx
@@ -151,7 +151,7 @@ igx-avatar {
 
 ## Dark vs. Light
 
-<DocsAside type="caution" title="Warning">
+<DocsAside type="warning">
 The colors that have the biggest impact on foreground and background colors are `gray` and `surface`. These two colors will be displayed against one another in most cases. For that reason the `surface` color should always contrast the `gray`.
 </DocsAside>
 

diff --git a/docs/angular/src/content/en/components/themes/sass/palettes.mdx b/docs/angular/src/content/en/components/themes/sass/palettes.mdx
@@ -30,7 +30,7 @@ $melon-palette: palette(
 );
 ```
 
-<DocsAside type="caution" title="Warning">
+<DocsAside type="warning">
 The value you pass to `$primary`, `$secondary` and `surface` or any other color **must be of type color**. You cannot pass CSS variables as arguments as those can't be resolved at Sass build-time.
 </DocsAside>
 
@@ -148,7 +148,7 @@ $handmade-palette: (
 
 ```
 
-<DocsAside type="caution" title="Warning">
+<DocsAside type="warning">
 It's important to set the map keys as strings, explicitly between quotation marks - `'primary'`, `'secondary'`, `'gray'`, etc. The same applies for all color variants - `500`, `500-contrast`, etc.
 </DocsAside>
 

diff --git a/docs/angular/src/content/en/components/themes/sass/typography.mdx b/docs/angular/src/content/en/components/themes/sass/typography.mdx
@@ -168,7 +168,7 @@ $my-type-scale: extend(
 @include typography($type-scale: $my-type-scale);
 ```
 
-<DocsAside type="caution" title="Warning">
+<DocsAside type="warning">
 The above code will modify the `h6` scale category globally, which will affect the look and feel of all components that use the `h6` scale. This is done for consistency so that all `h6` elements look the same across your app. We understand that you may want to apply the modification for `h6` to specific components only, like the `igx-card` component in our case. This is why every component has its own typography mixin, which accepts a category configuration.
 </DocsAside>
 

diff --git a/docs/angular/src/content/en/components/tile-manager.mdx b/docs/angular/src/content/en/components/tile-manager.mdx
@@ -20,7 +20,7 @@ The following Ignite UI for Angular Tile Manager Example shows the component in
 <Sample src="/layouts/tile-manager-sample" height={752} alt="Angular Tile Manager Example" />
 <hr/>
 
-<DocsAside type="caution" title="Warning">
+<DocsAside type="warning">
 Due to the iframe permissions policy, the fullscreen button in this example will only work when the example is opened in standalone mode by clicking the 'Expand to fullscreen' button in the top-right corner.
 </DocsAside>
 

diff --git a/docs/angular/src/content/en/components/time-picker.mdx b/docs/angular/src/content/en/components/time-picker.mdx
@@ -440,7 +440,7 @@ In order to learn more about the various options for providing themes to element
 }
 ```
 
-<DocsAside type="caution" title="Warning">
+<DocsAside type="warning">
 If the component is using an [`Emulated`](/themes/sass/component-themes#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`
 </DocsAside>
 

diff --git a/docs/angular/src/content/jp/components/avatar.mdx b/docs/angular/src/content/jp/components/avatar.mdx
@@ -109,7 +109,7 @@ igx-avatar {
 
 ```
 
-<DocsAside type="caution" title="警告">
+<DocsAside type="warning" title="警告">
 `igx-avatar` コンポーネントの `roundShape` プロパティは廃止されました。代わりに `shape` 属性を使用する必要があります。
 </DocsAside>
 

diff --git a/docs/angular/src/content/jp/components/date-picker.mdx b/docs/angular/src/content/jp/components/date-picker.mdx
@@ -339,7 +339,7 @@ $custom-datepicker-theme: calendar-theme(
 }
 ```
 
-<DocsAside type="caution" title="警告">
+<DocsAside type="warning" title="警告">
 コンポーネントが [`Emulated`](themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化を解除する必要があります。
 </DocsAside>
 

diff --git a/docs/angular/src/content/jp/components/date-range-picker.mdx b/docs/angular/src/content/jp/components/date-range-picker.mdx
@@ -533,7 +533,7 @@ $custom-calendar-theme: calendar-theme(
 }
 ```
 
-<DocsAside type="caution" title="警告">
+<DocsAside type="warning" title="警告">
 コンポーネントが [`Emulated`](themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化を解除する必要があります。
 </DocsAside>
 

diff --git a/docs/angular/src/content/jp/components/grid/grid.mdx b/docs/angular/src/content/jp/components/grid/grid.mdx
@@ -416,7 +416,7 @@ const POJO = [{
 
 ```
 
-<DocsAside type="caution" title="警告">
+<DocsAside type="warning" title="警告">
 **キー値に配列を含まないでください。**
 </DocsAside>
 
@@ -581,7 +581,7 @@ interface AminoAcid {
 詳しくは、以下のサンプルを参照してください。このバインディングのタイプは、グリッドに期待されるすべてのデフォルト機能をサポートします。
 つまり、追加の構成を行わなくても、すべてのソートおよびフィルタリング操作がそのまま使用できます。トランザクションの有無に関係なく、グループ化と編集の操作、およびバインドされた列のセルをテンプレート化する機能についても同様です。
 
-<DocsAside type="caution" title="警告">
+<DocsAside type="warning" title="警告">
 グリッドは、`primary key`、`foreign key` および `child key` プロパティのこの種のバインディングを**サポートしていません**。
 </DocsAside>
 

diff --git a/docs/angular/src/content/jp/components/interactivity/accessibility-compliance.mdx b/docs/angular/src/content/jp/components/interactivity/accessibility-compliance.mdx
@@ -86,7 +86,7 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'
 |<span class="redCheck" />|コントロール/コンポーネント: 一部の種類のアクションを実行しない限り、完全にはユーザー補助に対応しません。||
 |'空白'|この特定の規則はコントロールに適用されません。||
 
-<DocsAside type="caution" title="警告">
+<DocsAside type="warning" title="警告">
 上記のテーブルは、Ignite UI for Angular テーマ ライブラリのデフォルト テーマにのみ関連しています。カスタム テーマ、タイポグラフィ、およびアニメーションと色に関連する視覚的な変更に関しては、チェックリストへの準拠が異なる場合があります。
 </DocsAside>
 
@@ -169,7 +169,7 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'
 |<span class="redCheck" />|コントロール/コンポーネント: 一部の種類のアクションを実行しない限り、完全にはユーザー補助に対応しません。||
 |'空白'|この特定の規則はコントロールに適用されません。||
 
-<DocsAside type="caution" title="警告">
+<DocsAside type="warning" title="警告">
 上記のテーブルは、Ignite UI for Angular テーマ ライブラリのデフォルト テーマにのみ関連しています。カスタム テーマ、タイポグラフィ、およびアニメーションと色に関連する視覚的な変更に関しては、チェックリストへの準拠が異なる場合があります。
 </DocsAside>
 

diff --git a/docs/angular/src/content/jp/components/ripple.mdx b/docs/angular/src/content/jp/components/ripple.mdx
@@ -73,7 +73,7 @@ export class HomeComponent {}
 
 Ignite UI for Angular Ripple モジュールまたはディレクティブをインポートしたので、`igxRipple` ディレクティブの使用を開始できます。
 
-<DocsAside type="caution" title="警告">
+<DocsAside type="warning" title="警告">
 <ApiLink type="RippleDirective" suffix={false} label="igxRipple" /> は Web Animation API を使用し、[サポートされるブラウザー](http://caniuse.com/#feat=web-animation)でネイティブに実行します。
 その他のブラウザーでは `web-animations.min.js` [ポリフィル](https://github.com/web-animations/web-animations-js)を使用します。
 </DocsAside>

diff --git a/docs/angular/src/content/jp/components/slider/slider.mdx b/docs/angular/src/content/jp/components/slider/slider.mdx
@@ -34,7 +34,7 @@ Ignite UI for Angular については、「[はじめに](../general/getting-sta
 
 次に、**app.module.ts** ファイルに `IgxSliderModule` をインポートします。
 
-<DocsAside type="caution" title="警告">
+<DocsAside type="warning" title="警告">
 このコンポーネントは、**オプションで** [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) を利用できます。タッチ操作が正しく動作するために、アプリケーションのルート モジュールにインポートできます。
 </DocsAside>
 

diff --git a/docs/angular/src/content/jp/components/themes/index.mdx b/docs/angular/src/content/jp/components/themes/index.mdx
@@ -83,7 +83,7 @@ Sass が適切でない場合は、[カスタム CSS プロパティ](https://de
 
 これらのバリエーションを変更すると、パレット全体を完全に見直すことができます。
 
-<DocsAside type="caution" title="警告">
+<DocsAside type="warning" title="警告">
 一部のコンポーネントは、パレットのカラーを使用しません。そのような場合、カラーを変更するには、コンポーネントの CSS 変数を直接ターゲットにする必要があります。
 どのパレットのカラーがどのコンポーネントで使用されているかを確認するには、コンポーネントの[ドキュメント]({environment:sassApiUrl}/themes)を参照してください。
 </DocsAside>

diff --git a/docs/angular/src/content/jp/components/themes/misc/angular-material-theming.mdx b/docs/angular/src/content/jp/components/themes/misc/angular-material-theming.mdx
@@ -262,7 +262,7 @@ Angular Material コンポーネントの場合、前述のカスタム マテ
 }
 ```
 
-<DocsAside type="caution" title="警告">
+<DocsAside type="warning" title="警告">
 [`Emulated`](../sass/component-themes.md#表示のカプセル化) ViewEncapsulation を`解除する`ために、上記のコードを `::ng-deep` セレクター内に配置してください。
 </DocsAside>
 

diff --git a/docs/angular/src/content/jp/components/themes/misc/bootstrap-theming.mdx b/docs/angular/src/content/jp/components/themes/misc/bootstrap-theming.mdx
@@ -312,7 +312,7 @@ Ignite UI for Angular のすべてのコンポーネントは渡されたパレ
 
 `$theme-colors` マップの変更終了後、bootstrap コンポーネントはすでに igx `$light-bootstrap-palette` のカラーを light モードに使用し、`$custom-dark-palette` を dark モードに使用します。
 
-<DocsAside type="caution" title="警告">
+<DocsAside type="warning" title="警告">
 [`Emulated`](../sass/component-themes.md#表示のカプセル化) ViewEncapsulation を`解除する`ために、上記のコードを `::ng-deep` セレクター内に配置してください。
 </DocsAside>
 

diff --git a/docs/angular/src/content/jp/components/themes/palettes.mdx b/docs/angular/src/content/jp/components/themes/palettes.mdx
@@ -152,7 +152,7 @@ igx-avatar {
 
 ## 明暗 (Dark/Light)
 
-<DocsAside type="caution" title="警告">
+<DocsAside type="warning" title="警告">
 前景色と背景色に最も大きな影響を与える色は、`gray` と `surface` です。ほとんどの場合、これら 2 つの色は互いに対比して表示されます。そのため、`surface` の色は常に `gray` と対照的である必要があります。
 </DocsAside>
 

diff --git a/docs/angular/src/content/jp/components/themes/sass/palettes.mdx b/docs/angular/src/content/jp/components/themes/sass/palettes.mdx
@@ -31,7 +31,7 @@ $melon-palette: palette(
 );
 ```
 
-<DocsAside type="caution" title="警告">
+<DocsAside type="warning" title="警告">
 `$primary`、`$secondary`、`surface`、またはその他のカラーに渡す値は、**color タイプである必要があります**。CSS 変数は Sass ビルド時に解決できないため、引数として渡すことはできません。
 </DocsAside>
 
@@ -149,7 +149,7 @@ $handmade-palette: (
 
 ```
 
-<DocsAside type="caution" title="警告">
+<DocsAside type="warning" title="警告">
 マップ キーを文字列として明示的に引用符で囲んで設定することが重要です (例: `'primary'`、`'secondary'`、`'gray'`)。同じことがすべてのカラー バリエーションにも当てはまります (例: `500`、`500-contrast`)。
 </DocsAside>
 

diff --git a/docs/angular/src/content/jp/components/themes/sass/typography.mdx b/docs/angular/src/content/jp/components/themes/sass/typography.mdx
@@ -169,7 +169,7 @@ $my-type-scale: extend(
 @include typography($type-scale: $my-type-scale);
 ```
 
-<DocsAside type="caution" title="警告">
+<DocsAside type="warning" title="警告">
 上記コードは `h6` スケール カテゴリをグローバルに変更するため、`h6` を使用するすべてのコンポーネントのルックアンドフィールに影響します。すべての `h6` 要素の外観が同じになるため、アプリ全体が統一した外観になります。`h6` の変更を特定のコンポーネント (`igx-card` コンポーネントなど) にのみ適用する場合があります。すべてのコンポーネントにタイポグラフィ ミックスインがあり、カテゴリ構成を受け入れます。
 </DocsAside>
 

diff --git a/docs/angular/src/content/jp/components/tile-manager.mdx b/docs/angular/src/content/jp/components/tile-manager.mdx
@@ -22,7 +22,7 @@ Tile Manager コンポーネントを使用すると、コンテンツを個々
 <Sample src="/layouts/tile-manager-sample" height={752} alt="Angular Tile Manager の例" />
 <hr/>
 
-<DocsAside type="caution" title="警告">
+<DocsAside type="warning" title="警告">
 iframe の権限ポリシーにより、この例のフルスクリーン ボタンは、右上隅の Expand to fullscreen (フルスクリーンに展開) ボタンをクリックしてスタンドアロン モードで例を開いた場合にのみ機能します。
 </DocsAside>
 

diff --git a/docs/angular/src/content/jp/components/time-picker.mdx b/docs/angular/src/content/jp/components/time-picker.mdx
@@ -435,7 +435,7 @@ Time Picker の項目がコンポーネントのホスト**内**に適切にレ
 }
 ```
 
-<DocsAside type="caution" title="警告">
+<DocsAside type="warning" title="警告">
 コンポーネントが [`Emulated`](themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化を解除する必要があります。
 </DocsAside>
 

diff --git a/docs/xplat/src/content/en/components/inputs/checkbox.mdx b/docs/xplat/src/content/en/components/inputs/checkbox.mdx
@@ -123,7 +123,7 @@ The simplest way to start using the <ApiLink type="Checkbox" /> is as follows:
 </PlatformBlock>
 
 
-<DocsAside type="caution" title="Warning">
+<DocsAside type="warning">
 The <ApiLink type="Checkbox" /> component doesn't work with the standard `<form>` element. Use `Form` instead.
 </DocsAside>
 

diff --git a/docs/xplat/src/content/en/components/inputs/combo/overview.mdx b/docs/xplat/src/content/en/components/inputs/combo/overview.mdx
@@ -97,7 +97,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 </PlatformBlock>
 
 
-<DocsAside type="caution" title="Warning">
+<DocsAside type="warning">
 The `Combo` component doesn't work with the standard `<form>` element. Use `Form` instead.
 </DocsAside>
 

diff --git a/docs/xplat/src/content/en/components/inputs/radio.mdx b/docs/xplat/src/content/en/components/inputs/radio.mdx
@@ -140,7 +140,7 @@ The simplest way to start using the <ApiLink type="Radio" /> is as follows:
 </PlatformBlock>
 
 
-<DocsAside type="caution" title="Warning">
+<DocsAside type="warning">
 The <ApiLink type="Radio" /> component doesn't work with the standard `<form>` element. Use `Form` instead.
 </DocsAside>
 

diff --git a/docs/xplat/src/content/en/components/inputs/switch.mdx b/docs/xplat/src/content/en/components/inputs/switch.mdx
@@ -122,7 +122,7 @@ The simplest way to start using the `Switch` is as follows:
 
 </PlatformBlock>
 
-<DocsAside type="caution" title="Warning">
+<DocsAside type="warning">
 The `Switch` component doesn't work with the standard `<form>` element. Use `Form` instead.
 </DocsAside>