translation(jp): 20241125 update

.gitignore

@@ -4,6 +4,7 @@
 # Production
 /build
 /www
+/i18n
 
 # Generated files
 .docusaurus

.prettierignore

@@ -7,6 +7,7 @@ docs/api
 docs/native
 versioned_docs/version-v*/native
 docs/cli/commands
+docs/reference/glossary.md
 
 static/code/stackblitz
 

CONTRIBUTING.md

@@ -178,4 +178,4 @@ The Ionic documentation's `main` branch is deployed automatically and separately
 
 This repo is licensed and managed separately from Ionic itself.
 
-By contributing to this repo, you agree to have your contributions licensed under the Apache 2.0 license. See [LICENSE](../LICENSE) for the full license text.
+By contributing to this repo, you agree to have your contributions licensed under the Apache 2.0 license. See [LICENSE](LICENSE) for the full license text.

_templates/playground/new/angular_example_component_html.md.ejs.t

@@ -0,0 +1,6 @@
+---
+to: "<%= `static/usage/v${version}/${name}/${path}/angular/example_component_html.md` %>"
+---
+```html
+<<%= component %>></<%= component %>>
+```

_templates/playground/new/angular_example_component_ts.md.ejs.t

@@ -1,17 +1,16 @@
 ---
-# this file only gets generated if `angular_ts` (from the command line prompt) is true
-to: "<%= angular_ts ? `static/usage/v${version}/${name}/${path}/angular/example_component_ts.md` : null %>"
+arbitrary: <% pascalComponent = h.changeCase.pascal(component) %>
+to: "<%= `static/usage/v${version}/${name}/${path}/angular/example_component_ts.md` %>"
 ---
 ```ts
 import { Component } from '@angular/core';
+import { <%= pascalComponent %> } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
-<% if (css){ -%>
   styleUrls: ['./example.component.css'],
-<% } -%>
+  imports: [<%= pascalComponent %>],
 })
-export class ExampleComponent {
-}
+export class ExampleComponent {}
 ```

_templates/playground/new/index.js

@@ -62,11 +62,6 @@ module.exports = {
               name: 'css',
               message: 'Generate custom CSS files?',
             },
-            {
-              type: 'toggle',
-              name: 'angular_ts',
-              message: 'Generate an Angular TypeScript file?',
-            },
           ])
           .then((answers) => {
             answers.name = answers.name || answers.component.replace('ion-', '');

_templates/playground/new/index.md.ejs.t

@@ -12,17 +12,12 @@ import react_main_css from './react/main_css.md';
 import react from './react.md';
 <% } -%>
 import vue from './vue.md';
-<% if (css || angular_ts){ %>
+
 import angular_example_component_html from './angular/example_component_html.md';
-<% } else { -%>
-import angular from './angular.md';
-<% } -%>
-<% if (angular_ts){ -%>
-import angular_example_component_ts from './angular/example_component_ts.md';
-<% } -%>
 <% if (css){ -%>
 import angular_example_component_css from './angular/example_component_css.md';
 <% } -%>
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="<%= version %>"
@@ -39,21 +34,15 @@ import angular_example_component_css from './angular/example_component_css.md';
     react,
 <% } -%>
     vue,
-<% if (angular_ts || css){ -%>
     angular: {
       files: {
         'src/app/example.component.html': angular_example_component_html,
-<% if (angular_ts){ -%>
-        'src/app/example.component.ts': angular_example_component_ts,
-<% } -%>
 <% if (css){ -%>
         'src/app/example.component.css': angular_example_component_css,
 <% } -%>
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
-<% } else { -%>
-    angular,
-<% } -%>
   }}
   src="usage/v<%= version %>/<%= name %>/<%= path %>/demo.html"
 />

_templates/playground/new/react.md.ejs.t

@@ -11,9 +11,10 @@ import './main.css';<% } %>
 
 function Example() {
   return (
-    <<%= pascalComponent %>></<%= pascalComponent %>>
+    <>
+      <<%= pascalComponent %>></<%= pascalComponent %>>
+    </>
   );
 }
 export default Example;
 ```
-

docs/angular/navigation.md

@@ -193,6 +193,10 @@ Developers can use the existing syntax for standalone component routing from Ang
 export class AppRoutingModule {}
 ```
 
+:::tip
+If you are using `routerLink`, `routerDirection`, or `routerAction` be sure to also import the `IonRouterLink` directive for Ionic components or the `IonRouterLinkWithHref` directive for `<a>` elements. An example of this is available in the [Ionic Angular Build Options docs](./build-options.md#migrating-from-modules-to-standalone).
+:::
+
 To get started with standalone components [visit Angular's official docs](https://angular.io/guide/standalone-components).
 
 ## Live Example

docs/angular/slides.md

@@ -101,7 +101,7 @@ The `ion-slides` component had additional styling that helped create a native lo
 
 ```css
 swiper-container {
-  --swiper-pagination-bullet-inactive-color: var(--ion-color-step-200, #cccccc);
+  --swiper-pagination-bullet-inactive-color: var(--ion-text-color-step-800, #cccccc);
   --swiper-pagination-color: var(--ion-color-primary, #0054e9);
   --swiper-pagination-progressbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.25);
   --swiper-scrollbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);

docs/api/accordion.md

@@ -170,19 +170,19 @@ import AccessibilityAnimations from '@site/static/usage/v8/accordion/accessibili
 
 <AccessibilityAnimations />
 
-### キーボードナビゲーション
+### キーボードインタラクション
 
 `ion-accordion-group` の中で使用する場合、`ion-accordion` はキーボードによる操作を完全にサポートしています。次の表は、それぞれのキーが何をするのかの詳細です。
 
-| Key                | Function                                                     |
-| ------------------ | ------------------------------------------------------------ |
-| `Space` or `Enter` | When focus is on the accordion header, the accordion will collapse or expand depending on the state of the component. |
-| `Tab`              | Moves focus to the next focusable element.                   |
-| `Shift` + `Tab`    | Moves focus to the previous focusable element.               |
-| `Down Arrow`       | - When focus is on an accordion header, moves focus to the next accordion header.  <br />- When focus is on the last accordion header, moves focus to the first accordion header. |
-| `Up Arrow`         | - When focus is on an accordion header, moves focus to the previous accordion header.  <br />- When focus is on the first accordion header, moves focus to the last accordion header. |
-| `Home`             | When focus is on an accordion header, moves focus to the first accordion header. |
-| `End`              | When focus is on an accordion header, moves focus to the last accordion header. |
+| Key                                  | Description                                                  |
+| ------------------------------------ | ------------------------------------------------------------ |
+| <kbd>Space</kbd> or <kbd>Enter</kbd> | When focus is on the accordion header, the accordion will collapse or expand depending on the state of the component. |
+| <kbd>Tab</kbd>                       | Moves focus to the next focusable element.                   |
+| <kbd>Shift</kbd> + <kbd>Tab</kbd>    | Moves focus to the previous focusable element.               |
+| <kbd>Down Arrow</kbd>                | - When focus is on an accordion header, moves focus to the next accordion header.  <br />- When focus is on the last accordion header, moves focus to the first accordion header. |
+| <kbd>Up Arrow</kbd>                  | - When focus is on an accordion header, moves focus to the previous accordion header.  <br />- When focus is on the first accordion header, moves focus to the last accordion header. |
+| <kbd>Home</kbd>                      | When focus is on an accordion header, moves focus to the first accordion header. |
+| <kbd>End</kbd>                       | When focus is on an accordion header, moves focus to the last accordion header. |
 
 ## パフォーマンス
 

docs/api/app.md

@@ -15,8 +15,7 @@ import Slots from '@ionic-internal/component-api/v8/app/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
-
-AppはIonicアプリケーションのコンテナ要素です。プロジェクトごとに `<ion-app>` 要素は1つだけにしてください。アプリケーションには、menus, headers, content, footersなど、多くのIonicコンポーネントを含めることができます。オーバーレイコンポーネントは、表示されるときに `<ion-app>` に追加されます。
+AppはIonicアプリケーションのコンテナ要素です。1つのプロジェクトにつき`<ion-app>`要素は1つだけです。アプリはメニュー、ヘッダー、コンテンツ、フッターなど多くのIonicコンポーネントを持つことができます。オーバーレイコンポーネントは表示時に `<ion-app>` に追加されます。
 
 `ion-app`を使用すると、以下の動作が可能になります。
 
@@ -27,6 +26,13 @@ AppはIonicアプリケーションのコンテナ要素です。プロジェク
 * Material Design モードでのボタン操作時の[Ripple effect](./リップルエフェクト) が使えます。
 * Ionicアプリの使用感をよりネイティブなものにする、その他のタップやフォーカスのユーティリティが使えます。
 
+## Programmatic Focus
+
+Ionic offers focus utilities for components with the `ion-focusable` class. These utilities automatically manage focus for components when certain keyboard keys, like <kbd>Tab</kbd>, are pressed. Components can also be programmatically focused in response to user actions using the `setFocus` method from `ion-app`.
+
+import SetFocus from '@site/static/usage/v8/app/set-focus/index.md';
+
+<SetFocus />
 
 ## プロパティ
 <Props />

docs/api/datetime.md

@@ -204,7 +204,7 @@ Ionic Frameworkでは、[Intl.DatetimeFormat](https://developer.mozilla.org/en-U
 
 ### 月と年の選択
 
-月と年の選択は、  `presentation` プロパティに `month-year` , `year-month` , `month` , または `year` を渡すことで行うことができます。
+月と年の選択は、  `presentation` プロパティに `month-year` , `month` , または `year` を渡すことで行うことができます。
 
 この例では、 `month-year` を設定した datetime を示しています。
 
@@ -416,30 +416,30 @@ JavaScriptで日付を扱うために [date-fns](https://date-fns.org) を使う
 
 ## アクセシビリティ
 
-### キーボードナビゲーション
+### キーボードインタラクション
 
 `ion-datetime` は、コンポーネント内のフォーカス可能な要素間を移動するためのフルキーボードサポートを備えています。次の表は、それぞれのキーが何をするのかの詳細です。
 
-| Key                | Function                                                     |
-| ------------------ | ------------------------------------------------------------ |
-| `Tab`              | Moves focus to the next focusable element.                   |
-| `Shift` + `Tab`    | Moves focus to the previous focusable element.               |
-| `Space` or `Enter` | Clicks the focusable element.                                |
+| Key                                  | Description                                    |
+| ------------------------------------ | ---------------------------------------------- |
+| <kbd>Tab</kbd>                       | Moves focus to the next focusable element.     |
+| <kbd>Shift</kbd> + <kbd>Tab</kbd>    | Moves focus to the previous focusable element. |
+| <kbd>Space</kbd> or <kbd>Enter</kbd> | Clicks the focusable element.                  |
 
 #### 日付の表示
 
-| Key                | Function                                                     |
-| ------------------ | ------------------------------------------------------------ |
-| `ArrowUp` | Moves focus to the same day of the previous week. |
-| `ArrowDown` | Moves focus to the same day of the next week. |
-| `ArrowRight` | Moves focus to the next day. |
-| `ArrowLeft` | Moves focus to the previous day. |
-| `Home` | Moves focus to the first day of the current week. |
-| `End` | Moves focus to the last day of the current week. |
-| `PageUp` | Changes the grid of dates to the previous month. |
-| `PageDown` | Changes the grid of dates to the next month. |
-| `Shift` + `PageUp` | Changes the grid of dates to the previous year. |
-| `Shift` + `PageDown` | Changes the grid of dates to the next year. |
+| Key                                    | Description                                       |
+| -------------------------------------- | ------------------------------------------------- |
+| <kbd>ArrowUp</kbd>                     | Moves focus to the same day of the previous week. |
+| <kbd>ArrowDown</kbd>                   | Moves focus to the same day of the next week.     |
+| <kbd>ArrowRight</kbd>                  | Moves focus to the next day.                      |
+| <kbd>ArrowLeft</kbd>                   | Moves focus to the previous day.                  |
+| <kbd>Home</kbd>                        | Moves focus to the first day of the current week. |
+| <kbd>End</kbd>                         | Moves focus to the last day of the current week.  |
+| <kbd>PageUp</kbd>                      | Changes the grid of dates to the previous month.  |
+| <kbd>PageDown</kbd>                    | Changes the grid of dates to the next month.      |
+| <kbd>Shift</kbd> + <kbd>PageUp</kbd>   | Changes the grid of dates to the previous year.   |
+| <kbd>Shift</kbd> + <kbd>PageDown</kbd> | Changes the grid of dates to the next year.       |
 
 #### 時刻、月、年のホイール
 

docs/api/infinite-scroll.md

@@ -21,6 +21,8 @@ Infinite Scrollコンポーネントは、ユーザーがページの下部ま
 
 ユーザが定義された距離に達したときに、`ionInfinite` イベントに割り当てられた関数が呼び出されます。この関数がすべてのタスクを完了したら、無限スクロールインスタンスに対して `complete()` メソッドを呼び出す必要があります。
 
+## Basic Usage
+
 import Basic from '@site/static/usage/v8/infinite-scroll/basic/index.md';
 
 <Basic />
@@ -118,4 +120,4 @@ interface InfiniteScrollCustomEvent extends CustomEvent {
 <CustomProps />
 
 ## Slots
-<Slots />
+<Slots />

docs/api/input-password-toggle.md

@@ -1,5 +1,5 @@
 ---
-title: "ion-password-toggle"
+title: "ion-input-password-toggle"
 ---
 import Props from '@ionic-internal/component-api/v8/input-password-toggle/props.md';
 import Events from '@ionic-internal/component-api/v8/input-password-toggle/events.md';

docs/api/input.md

@@ -83,9 +83,11 @@ import Clear from '@site/static/usage/v8/input/clear/index.md';
 
 Material Design では、Inputに塗りつぶしのスタイルが用意されています。Inputの `fill` プロパティは `"solid"` または `"outline"` のいずれかに設定することができます。
 
-`fill` スタイルはInputコンテナを視覚的に定義するため、`fill` を使用するInputは `ion-item` で使用すべきではありません。
+Filled inputs をiOSで使うためには、inputの `mode` を `md` に設定する必要があります。
 
-Filled inputs can be used on iOS by setting Input's `mode` to `md`.
+:::warning
+Inputs that use `fill` should not be used in an `ion-item` due to styling conflicts between the components.
+:::
 
 import Fill from '@site/static/usage/v8/input/fill/index.md';
 
@@ -160,7 +162,7 @@ In most cases, [Icon](./icon.md) components placed in these slots should have `a
 If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.md). This ensures that the content can be tabbed to.
 :::
 
-import StartEndSlots from '@site/static/usage/v7/input/start-end-slots/index.md';
+import StartEndSlots from '@site/static/usage/v8/input/start-end-slots/index.md';
 
 <StartEndSlots />