Updating prod with localization changes

en/components/ai/skills.md

@@ -112,8 +112,6 @@ Alternatively, one can use a general Agent Skills config so your Agent can easil
 
 3. The Agent will now discover these skills and load the relevant one automatically based on the context of your request.
 
-> **Tip for VS Code:** VS Code searches for skills in `.github/skills/`, `.claude/skills/`, and `.agents/skills/` by default. You can configure additional locations using the `chat.agentSkillsLocations` setting.
-
 > **Tip:** VS Code searches for skills in `.github/skills/`, `.claude/skills/`, and `.agents/skills/` by default. You can configure additional locations using the `chat.agentSkillsLocations` setting.
 
 ---
@@ -183,7 +181,7 @@ cp -r node_modules/igniteui-angular/skills/. .agents/skills/
 
 ```powershell
 # Windows (PowerShell)
-Copy-Item -Recurse node_modules\igniteui-angular\skills\* .agents\skills\
+Copy-Item -Recurse node_modules\igniteui-angular\skills .agents\skills
 ```
 
 Or copy individual skill directories as needed:
@@ -199,9 +197,9 @@ cp -r node_modules/igniteui-angular/skills/igniteui-angular-theming .agents/skil
 **Windows (PowerShell)**
 
 ```powershell
-Copy-Item -Recurse node_modules\igniteui-angular\skills\igniteui-angular-components .agents\skills\
-Copy-Item -Recurse node_modules\igniteui-angular\skills\igniteui-angular-grids .agents\skills\
-Copy-Item -Recurse node_modules\igniteui-angular\skills\igniteui-angular-theming .agents\skills\
+Copy-Item -Recurse node_modules\igniteui-angular\skills\igniteui-angular-components .agents\skills\igniteui-angular-components
+Copy-Item -Recurse node_modules\igniteui-angular\skills\igniteui-angular-grids .agents\skills\igniteui-angular-grids
+Copy-Item -Recurse node_modules\igniteui-angular\skills\igniteui-angular-theming .agents\skills\igniteui-angular-theming
 ```
 
 **Windows (Command Prompt)**

jp/components/accordion.md

@@ -294,7 +294,9 @@ $custom-panel-theme: expansion-panel-theme(
 最後にコンポーネントのテーマを含めます。
 
 ```scss
-@include css-vars($custom-panel-theme);
+:host {
+    @include tokens($custom-panel-theme);
+}
 ```
 
 ### デモ

jp/components/action-strip.md

@@ -187,7 +187,9 @@ $custom-strip: action-strip-theme(
 最後に新しく作成されたコンポーネントのテーマをアプリケーションに含めます。
 
 ```scss
-@include css-vars($custom-strip);
+:host {
+  @include tokens($custom-strip);
+}
 ```
 
 <code-view style="height: 400px;"

jp/components/avatar.md

@@ -209,7 +209,7 @@ $custom-avatar-theme: avatar-theme(
 
 ```scss
 .initials {
-  @include css-vars($custom-avatar-theme);
+  @include tokens($custom-avatar-theme);
 }
 ```
 
@@ -271,7 +271,7 @@ igx-avatar {
 }
 ```
 
-または、ユニバーサル変数 `--igx-avatar-size` を使用して、すべてのインスタンスをターゲットにすることもできます。
+または、ユニバーサル変数 `--ig-avatar-size` を使用して、すべてのインスタンスをターゲットにすることもできます。
 
 ```html
 <div class="my-app">
@@ -281,7 +281,7 @@ igx-avatar {
 
 ```scss
 .my-app {
-  --igx-avatar-size: 200px;
+  --ig-avatar-size: 200px;
 }
 ```
 
@@ -314,5 +314,6 @@ igx-avatar {
 <div class="divider--half"></div>
 
 コミュニティに参加して新しいアイデアをご提案ください。
+
 - [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
 - [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)

jp/components/badge.md

@@ -347,10 +347,12 @@ $custom-badge-theme: badge-theme(
 );
 ```
 
-新しいテーマを含めるには、`css-vars` ミックスインを使用します。
+新しいテーマを含めるには、`tokens` ミックスインを使用します。
 
 ```scss
-@include css-vars($custom-badge-theme);
+:host {
+  @include tokens($custom-badge-theme);
+}
 ```
 
 ### デモ

jp/components/banner.md

@@ -286,7 +286,9 @@ $custom-banner-theme: banner-theme(
 最後にバナーのカスタム テーマを渡します。
 
 ```scss
-@include css-vars($custom-banner-theme);
+:host {
+    @include tokens($custom-banner-theme);
+}
 ```
 
 <code-view style="height: 530px"

jp/components/button-group.md

@@ -426,7 +426,9 @@ $custom-button-group: button-group-theme(
 最後にコンポーネントのテーマを含めます。
 
 ```scss
-@include css-vars($custom-button-group);
+:host {
+  @include tokens($custom-button-group);
+}
 ```
 
 ### デモ

jp/components/button.md

@@ -1453,7 +1453,7 @@ contained タイプのボタンのスタイル設定に使用できるパラメ
 
 ```scss
 .my-contained-btn {
-    @include css-vars($custom-contained-theme);
+  @include tokens($custom-contained-theme);
 }
 ```
 
@@ -1550,7 +1550,7 @@ button {
 }
 ```
 
-または、ユニバーサル変数 `--igx-button-size` を使用して、すべてのインスタンスをターゲットにすることもできます。
+または、ユニバーサル変数 `--ig-button-size` を使用して、すべてのインスタンスをターゲットにすることもできます。
 
 ```html
 <div class="my-app">
@@ -1560,7 +1560,7 @@ button {
 
 ```scss
 .my-app {
-  --igx-button-size: 50px;
+  --ig-button-size: 50px;
 }
 ```
 

jp/components/calendar.md

@@ -791,7 +791,9 @@ $custom-calendar-theme: calendar-theme(
 最後に calendar のカスタム テーマを設定します。
 
 ```scss
- @include css-vars($custom-calendar-theme);
+:host {
+    @include tokens($custom-calendar-theme);
+}
 ```
 
 以下のサンプルでは、カスタマイズした CSS 変数を使用したカレンダー コンポーネントが、[`SAP UI5`](https://ui5.sap.com/#/entity/sap.ui.unified.Calendar/sample/sap.ui.unified.sample.CalendarSingleDaySelection) デザイン システムのカレンダーに視覚的に似たデザインを実現している様子を確認できます。

jp/components/card.md

@@ -397,7 +397,9 @@ $colorful-card: card-theme(
 最後にコンポーネントのテーマをアプリケーションに**含めます**。
 
 ```scss
-@include css-vars($custom-card-theme);
+:host {
+    @include tokens($custom-card-theme);
+}
 ```
 
 以下のサンプルでは、カスタマイズした CSS 変数を使用したカード コンポーネントが、[`Ant`](https://ant.design/components/card?theme=light#card-demo-meta) デザイン システムのカードに視覚的に似たデザインを実現している様子を確認できます。

jp/components/carousel.md

@@ -698,7 +698,9 @@ $carousel-theme: carousel-theme(
 最後にコンポーネントのテーマを含めます。
 
 ```scss
-@include css-vars($carousel-theme);
+:host {
+  @include tokens($carousel-theme);
+}
 ```
 
 ### デモ

jp/components/checkbox.md

@@ -346,7 +346,9 @@ $custom-checkbox-theme: checkbox-theme(
 最後に、カスタム テーマをアプリケーションに**含めます**。
 
 ```scss
-@include css-vars($custom-checkbox-theme);
+:host {
+    @include tokens($custom-checkbox-theme);
+}
 ```
 
 以下のサンプルでは、カスタマイズした CSS 変数を使用したチェックボックス コンポーネントが、[`SAP UI5`](https://ui5.sap.com/#/entity/sap.m.CheckBox/sample/sap.m.sample.CheckBox) デザイン システムのチェックボックスに視覚的に似たデザインを実現している様子を確認できます。

jp/components/chip.md

@@ -626,7 +626,9 @@ $custom-chip-theme: chip-theme(
 最後に、カスタム テーマをアプリケーションに**含めます**。
 
 ```scss
-@include css-vars($custom-chip-theme);
+:host {
+  @include tokens($custom-chip-theme);
+}
 ```
 
 以下のサンプルでは、カスタマイズした CSS 変数を使用したチップ コンポーネントが、[`Ant`](https://ant.design/components/tag?theme=light#tag-demo-icon) デザイン システムのチップに視覚的に似たデザインを実現している様子を確認できます。
@@ -689,7 +691,7 @@ igx-chip {
 }
 ```
 
-または、ユニバーサル変数 `--igx-chip-size` を使用して、すべてのインスタンスをターゲットにすることもできます。
+または、ユニバーサル変数 `--ig-chip-size` を使用して、すべてのインスタンスをターゲットにすることもできます。
 
 ```html
 <div class="my-app">
@@ -699,7 +701,7 @@ igx-chip {
 
 ```scss
 .my-app {
-  --igx-chip-size: 50px;
+  --ig-chip-size: 50px;
 }
 ```
 

jp/components/circular-progress.md

@@ -252,7 +252,9 @@ $custom-theme: progress-circular-theme(
 最後にコンポーネントのテーマをアプリケーションに**含めます**。
 
 ```scss
-@include css-vars($custom-theme);
+:host {
+  @include tokens($custom-theme);
+}
 ```
 
 ### デモ

jp/components/combo.md

@@ -383,10 +383,10 @@ $custom-checkbox-theme: checkbox-theme(
 最後にコンポーネントのテーマを含めます。
 
 ```scss
-:host ::ng-deep {
-  @include css-vars($custom-combo-theme);
-  @include css-vars($custom-drop-down-theme);
-  @include css-vars($custom-checkbox-theme);
+:host {
+  @include tokens($custom-combo-theme);
+  @include tokens($custom-drop-down-theme);
+  @include tokens($custom-checkbox-theme);
 }
 ```
 

jp/components/date-picker.md

@@ -335,7 +335,9 @@ $custom-datepicker-theme: calendar-theme(
 最後に Angular Date Picker のカスタム テーマを設定します。
 
 ```scss
-@include css-vars($custom-datepicker-theme);
+:host {
+    @include tokens($custom-datepicker-theme);
+}
 ```
 
 >[!WARNING]
@@ -344,7 +346,7 @@ $custom-datepicker-theme: calendar-theme(
 ```scss
 :host {
   ::ng-deep {
-    @include css-vars($custom-datepicker-theme);
+    @include tokens($custom-datepicker-theme);
   }
 }
 ```

jp/components/date-range-picker.md

@@ -536,9 +536,11 @@ $custom-calendar-theme: calendar-theme(
 最後にカスタム テーマを渡します。
 
 ```scss
-@include css-vars($custom-date-range-theme);
-@include css-vars($custom-input-group-theme);
-@include css-vars($custom-calendar-theme);
+:host {
+  @include tokens($custom-date-range-theme);
+  @include tokens($custom-input-group-theme);
+  @include tokens($custom-calendar-theme);
+}
 ```
 
 >[!WARNING]

jp/components/dialog.md

@@ -338,7 +338,9 @@ $custom-button: contained-button-theme(
 最後にコンポーネントのテーマを**含めます**。
 
 ```scss
-@include css-vars($my-dialog-theme);
+:host {
+    @include tokens($my-dialog-theme);
+}
 ```
 
 >[!NOTE]
@@ -347,7 +349,7 @@ $custom-button: contained-button-theme(
 ```scss
 :host {
   ::ng-deep {
-    @include css-vars($my-dialog-theme);
+    @include tokens($my-dialog-theme);
   }
 }
 ```

jp/components/drop-down.md

@@ -636,11 +636,11 @@ $custom-drop-down-theme: drop-down-theme(
 );
 ```
 
-最後に、カスタム ドロップダウン テーマをクラスまたは要素セレクターに渡します。
+最後に、カスタム ドロップダウン テーマを渡します。
 
 ```scss
-.drop-down__scroll-container {
-  @include css-vars($custom-drop-down-theme);
+:host {
+  @include tokens($custom-drop-down-theme);
 }
 ```
 

jp/components/expansion-panel.md

@@ -269,7 +269,7 @@ Angular Expansion Panel は、パネルの縮小時に「更に表示」を描
         <tr class="primary">
             <td><strong>$body-background</strong></td>
             <td>$body-color</td>
-            <td>パネル本文テキストの色</td>
+            <td>パネル本体テキストの色</td>
         </tr>
     </tbody>
 </table>
@@ -336,11 +336,13 @@ $custom-panel-theme: expansion-panel-theme(
 
 ### コンポーネント テーマの適用
 
-コンポーネント テーマを適用するには、`css-vars` ミックスインをインクルードし、`$custom-panel-theme` マップを渡します。
+コンポーネント テーマを適用するには、`tokens` ミックスインをインクルードし、`$custom-panel-theme` マップを渡します。
 
 ```scss
 // In expansion-styling.component.scss
-@include css-vars($custom-panel-theme);
+:host {
+  @include tokens($custom-panel-theme);
+}
 ```
 
 Ignite UI テーマ エンジンの使用方法の詳細については、[`こちらをクリックしてください`](themes/sass/component-themes.md)。