+## Additional Documentation
-With the new project created, the extension will provide access to all of the common tasks in your `package.json`.
+Full documentation of the WebNative extension can be found at [webnative.dev](https://webnative.dev/introduction/getting-started/) covering topics like:
-## Adding Capacitor
-
-You can also add [Capacitor](https://capacitorjs.com/) to your application by choosing "Integrate Capacitor".
-
-
-
-With Capacitor integrated, you can now run your app on web, Android, and iOS with the "Run On Web", "Run On Android", and "Run On iOS" options.
-
-## Doing More
-
-There is so much the Ionic VS Code extension can help with, including migrations, debugging, monorepo support, and more. For the full list of all of the extension's capabilities, checkout the [extension overview on the VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=ionic.ionic).
+- Building, debugging and running your Ionic Framework application.
+- Bundle analysis, dependency upgrades.
+- Migration from Cordova.
+- Changing native settings.
+- Splash Screens & Icons.
+- Developing without a Mac using the WebNative app.
diff --git a/docs/theming/high-contrast-mode.md b/docs/theming/high-contrast-mode.md
index 9896eac1180..148f7c72157 100644
--- a/docs/theming/high-contrast-mode.md
+++ b/docs/theming/high-contrast-mode.md
@@ -120,7 +120,7 @@ This approach activates the high contrast palette when the [CSS media query for
The following example uses the system settings to decide when to show high contrast mode.
:::info
-Not sure how to change the system settings? Here's how to enable high contrast mode on [Windows 11](hhttps://support.microsoft.com/en-us/windows/turn-high-contrast-mode-on-or-off-in-windows-909e9d89-a0f9-a3a9-b993-7a6dcee85025) and on [macOS](https://support.apple.com/guide/mac-help/change-display-settings-for-accessibility-unac089/mac).
+Not sure how to change the system settings? Here's how to enable high contrast mode on [Windows 11](https://support.microsoft.com/en-us/windows/turn-high-contrast-mode-on-or-off-in-windows-909e9d89-a0f9-a3a9-b993-7a6dcee85025) and on [macOS](https://support.apple.com/guide/mac-help/change-display-settings-for-accessibility-unac089/mac).
:::
import SystemHighContrastMode from '@site/static/usage/v8/theming/system-high-contrast-mode/index.md';
@@ -178,7 +178,7 @@ This approach activates the high contrast palette when the `.ion-palette-high-co
The following example combines site settings, system settings, and the toggle to decide when to show high contrast mode. The site's palette takes precedence over system settings. If your system settings differ from the site's palette when the demo loads, it will use the site's palette.
:::info
-Not sure how to change the system settings? Here's how to enable high contrast mode on [Windows 11](hhttps://support.microsoft.com/en-us/windows/turn-high-contrast-mode-on-or-off-in-windows-909e9d89-a0f9-a3a9-b993-7a6dcee85025) and on [macOS](https://support.apple.com/guide/mac-help/change-display-settings-for-accessibility-unac089/mac).
+Not sure how to change the system settings? Here's how to enable high contrast mode on [Windows 11](https://support.microsoft.com/en-us/windows/turn-high-contrast-mode-on-or-off-in-windows-909e9d89-a0f9-a3a9-b993-7a6dcee85025) and on [macOS](https://support.apple.com/guide/mac-help/change-display-settings-for-accessibility-unac089/mac).
:::
import ClassHighContrastMode from '@site/static/usage/v8/theming/class-high-contrast-mode/index.md';
diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/README.md b/i18n/ja/docusaurus-plugin-content-docs/current/README.md
new file mode 100644
index 00000000000..12005305278
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/current/README.md
@@ -0,0 +1,17 @@
+# Docs folder
+
+The `/docs` folder houses all markdown files. The page structure loosely maps to the routing on the site since paths can be changed in the frontmatter.
+
+## Versioning
+
+This folder can also contain components, assets, and whatever else is meant to be versioned when the docusaurus versioning script is run. For example, if there is a page component that is only relevant to the `layout` section in the current version of Ionic, it could be added to a `_components/` folder in `docs/layout/`. When the versioning script is run, the component will be copied to `versioned_docs/version-{X}/layout/_components/` and there will now be a separate component in `docs/layout/_components/` that can be deleted or updated to the latest version. The same concept applies to images and other files.
+
+If components are meant to be shared across versions, they can be put in `src/components/`. If images and other served files are meant to be shared across versions they can be put in `static/`.
+
+## Auto Generated Files
+
+All markdown files in these directories are generated from [scripts](/scripts):
+
+- `docs/api/`
+- `docs/cli/commands/`
+- `docs/native/`
diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/angular/build-options.md b/i18n/ja/docusaurus-plugin-content-docs/current/angular/build-options.md
new file mode 100644
index 00000000000..630864d1621
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/current/angular/build-options.md
@@ -0,0 +1,700 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# Build Options
+
+Developers have two options for using Ionic components: Standalone or Modules. This guide covers both options as well as the benefits and downsides of each approach.
+
+While the Standalone approach is newer and makes use of more modern Angular APIs, the Modules approach will continue to be supported in Ionic. Most of the Angular examples on this documentation website use the Modules approach.
+
+## Standalone
+
+:::info
+Ionic UI components as Angular standalone components is supported starting in Ionic v7.5.
+:::
+
+### Overview
+
+Developers can use Ionic components as standalone components to take advantage of treeshaking and newer Angular features. This option involves importing specific Ionic components in the Angular components you want to use them in. Developers can use Ionic standalone components even if their Angular application is NgModule-based.
+
+See the [Standalone Migration Guide](#migrating-from-modules-to-standalone) for instructions on how to update your Ionic app to make use of Ionic standalone components.
+
+**Benefits**
+
+1. Enables treeshaking so the final build output only includes the code necessary to run your app which reduces overall build size.
+2. Avoids the use of NgModules to streamline the development experience and make your code easier to understand.
+3. Allows developers to also use newer Angular features such as [ESBuild](https://angular.io/guide/esbuild).
+
+**Drawbacks**
+
+1. Ionic components need to be imported into every Angular component they are used in which can be time consuming to set up.
+
+### Usage with Standalone-based Applications
+
+:::warning
+All Ionic imports should be imported from the `@ionic/angular/standalone` submodule. This includes imports such as components, directives, providers, and types. Importing from `@ionic/angular` may pull in lazy loaded Ionic code which can interfere with treeshaking.
+:::
+
+**Bootstrapping and Configuration**
+
+Ionic Angular needs to be configured when the Angular application calls `bootstrapApplication` using the `provideIonicAngular` function. Developers can pass any [IonicConfig](../developing/config#ionicconfig) values as an object in this function. Note that `provideIonicAngular` needs to be called even if no custom config is passed.
+
+```typescript title="main.ts"
+import { enableProdMode, importProvidersFrom } from '@angular/core';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { RouteReuseStrategy, provideRouter } from '@angular/router';
+import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular/standalone';
+
+import { routes } from './app/app.routes';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, {
+ providers: [
+ { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
+ provideIonicAngular({ mode: 'ios' }),
+ provideRouter(routes),
+ ],
+});
+```
+
+**Components**
+
+In the example below, we are importing `IonContent` and `IonButton` from `@ionic/angular/standalone` and passing them to `imports` for use in the component template. We would get a compiler error if these components were not imported and provided to the `imports` array.
+
+```typescript title="home.page.ts"
+import { Component } from '@angular/core';
+import { IonButton, IonContent } from '@ionic/angular/standalone';
+
+@Component({
+ selector: 'app-home',
+ templateUrl: 'home.page.html',
+ styleUrls: ['home.page.scss'],
+ standalone: true,
+ imports: [IonButton, IonContent],
+})
+export class HomePage {
+ constructor() {}
+}
+```
+
+**Icons**
+
+The icon SVG data needs to be defined in the Angular component so it can be loaded correctly. Developers can use the `addIcons` function from `ionicons` to map the SVG data to a string name. Developers can then reference the icon by its string name using the `name` property on `IonIcon`.
+
+We recommend calling `addIcons` in the Angular component `constructor` so the data is only added if the Angular component is being used.
+
+For developers using Ionicons 7.2 or newer, passing only the SVG data will cause the string name to be automatically generated.
+
+```typescript title="home.page.ts"
+import { Component } from '@angular/core';
+import { IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { logoIonic } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-home',
+ templateUrl: 'home.page.html',
+ styleUrls: ['home.page.scss'],
+ standalone: true,
+ imports: [IonIcon],
+})
+export class HomePage {
+ constructor() {
+ /**
+ * On Ionicons 7.2+ this icon
+ * gets mapped to a "logo-ionic" key.
+ * Alternatively, developers can do:
+ * addIcons({ 'logo-ionic': logoIonic });
+ */
+ addIcons({ logoIonic });
+ }
+}
+```
+
+Icons can also be registered in entry points such as `app.component.ts` to avoid the need to call `addIcons` multiple times. Developers should be aware that the initial application chunk may increase because the registered icons will need to be loaded at application start. However, if your application uses a small number of icons the impact of this may be minimal.
+
+```typescript title="app.component.ts"
+import { Component } from '@angular/core';
+import { addIcons } from 'ionicons';
+import { logoIonic } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-root',
+ templateUrl: 'app.component.html',
+ styleUrls: ['app.component.scss'],
+ standalone: true,
+})
+export class AppComponent {
+ constructor() {
+ /**
+ * Any icons you want to use in your application
+ * can be registered in app.component.ts and then
+ * referenced by name anywhere in your application.
+ */
+ addIcons({ logoIonic });
+ }
+}
+```
+
+Icons registered in an application entry point can then be referenced by name anywhere in the application.
+
+```html title="home.page.html"
+
+})
| })
|
diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/angular/overview.md b/i18n/ja/docusaurus-plugin-content-docs/current/angular/overview.md
new file mode 100644
index 00000000000..5d29843b7e6
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/current/angular/overview.md
@@ -0,0 +1,46 @@
+---
+title: Ionic Angular の概要
+sidebar_label: 概要
+---
+
+
+ In a box with a value: clears that value.
With values in boxes to the right: shifts them all one position to the left. In RTL mode, with values in boxes to the left: shifts them all one position to the right. | +| Ctrl + V
Cmd + V | Pastes content starting from the first box, regardless of which box is currently focused. All existing values are cleared before pasting. For example, if you have "1234" in all boxes and paste "56", the result will be "56" in the first two boxes with the remaining boxes empty. If the pasted content is longer than the available boxes, the extra characters are ignored. | + +## Properties +
})
}
+/>
+
+下の例では、ビジュアルをサポートする2つのリストを作成しています。最初のリストはアイコンを使い、2番目のリストはアバターを使います。ビジュアルは装飾的なものなので、すべて `aria-hidden="true"` を指定しています。さらに、これらは `start` スロットで一貫して表示されます。
+
+import SupportingVisuals from '@site/static/usage/v8/item/content-types/supporting-visuals/index.md';
+
+})
}
+ doNotImage={})
}
+/>
+
+下の例では、さまざまなタイプのテキストでリストを作成しています。"First Name"と "Last Name "のラベルは、テキスト入力に何を入力すべきかを示しています。
+
+トグルの "Allow Notifications"ラベルの下には、ユーザーが通知を無効にできることを示すテキストが追加されています。このテキストは短いので、アイテムの内側に配置されています。
+
+そのリストの下には、 [Note](./note) の下に長いテキストを含むtextareaを含む別のリストがあります。textareaは、長いテキストが他のフィールドではなく、textareaに関連付けられていることを明らかにするために、それ自身のリストに配置されました。
+
+import Text from '@site/static/usage/v8/item/content-types/text/index.md';
+
+})
}
+/>
+
+})
}
+/>
+
+以下の例では、異なる種類のメタデータを持つ2つのリストを作成している。最初のリストは[Note](./note)を使って、それぞれのToDoリストにいくつのタスクがあるかを表示している。
+
+つ目のリストは、iOSのメールアプリを真似て受信トレイを表示しています。このリストでは、"開始"スロットに "未読メッセージ"インジケータ、"終了"スロットにタイムスタンプとカスタム詳細アイコンを含むカスタムメタデータを使用しています。"未読メッセージ"インジケータは、未読メッセージにユーザーの注意を引くために青くハイライトされ、タイムスタンプはより控えめです。
+
+import Metadata from '@site/static/usage/v8/item/content-types/metadata/index.md';
+
+})
}
+ doNotImage={})
}
+/>
+
+下の例では、連絡先のリストを作成しています。各項目は、その項目の完全な連絡先ページに移動するためのスタブボタンです。各項目には、ユーザーが項目をスワイプすることで表示できる追加アクションがあります。
+
+import Actions from '@site/static/usage/v8/item/content-types/actions/index.md';
+
+})
}
+ doNotImage={})
}
+/>
+
+})
}
+ doNotImage={})
}
+/>
+
+})
}
+ doNotImage={})
}
+/>
+
+以下の例では、ToDoタスクのリストを作成しています。それぞれの項目にはチェックボックスと入力があります。チェックボックスはユーザーがタスクを完了としてマークできるようにし、入力はユーザーがタスクの名前を変更できるようにします。
+
+import Controls from '@site/static/usage/v8/item/content-types/controls/index.md';
+
+