ionic-team
diff --git a/‎.gitignore
Lines changed: 1 addition & 0 deletions b/‎.gitignore
Lines changed: 1 addition & 0 deletions
diff --git a/‎.prettierignore
Lines changed: 1 addition & 0 deletions b/‎.prettierignore
Lines changed: 1 addition & 0 deletions
diff --git a/‎CONTRIBUTING.md
Lines changed: 1 addition & 1 deletion b/‎CONTRIBUTING.md
Lines changed: 1 addition & 1 deletion
diff --git a/‎_templates/playground/new/angular.md.ejs.t
Lines changed: 0 additions & 7 deletions b/‎_templates/playground/new/angular.md.ejs.t
Lines changed: 0 additions & 7 deletions
diff --git a/‎_templates/playground/new/angular_example_component_html.md.ejs.t
Lines changed: 6 additions & 0 deletions b/‎_templates/playground/new/angular_example_component_html.md.ejs.t
Lines changed: 6 additions & 0 deletions
diff --git a/‎_templates/playground/new/angular_example_component_ts.md.ejs.t
Lines changed: 5 additions & 6 deletions b/‎_templates/playground/new/angular_example_component_ts.md.ejs.t
Lines changed: 5 additions & 6 deletions
diff --git a/‎_templates/playground/new/index.js
Lines changed: 0 additions & 5 deletions b/‎_templates/playground/new/index.js
Lines changed: 0 additions & 5 deletions
diff --git a/‎_templates/playground/new/index.md.ejs.t
Lines changed: 3 additions & 14 deletions b/‎_templates/playground/new/index.md.ejs.t
Lines changed: 3 additions & 14 deletions
diff --git a/‎_templates/playground/new/react.md.ejs.t
Lines changed: 3 additions & 2 deletions b/‎_templates/playground/new/react.md.ejs.t
Lines changed: 3 additions & 2 deletions
diff --git a/‎docs/angular/build-options.md
Lines changed: 2 additions & 22 deletions b/‎docs/angular/build-options.md
Lines changed: 2 additions & 22 deletions
diff --git a/‎docs/angular/navigation.md
Lines changed: 4 additions & 0 deletions b/‎docs/angular/navigation.md
Lines changed: 4 additions & 0 deletions
diff --git a/‎docs/angular/slides.md
Lines changed: 1 addition & 1 deletion b/‎docs/angular/slides.md
Lines changed: 1 addition & 1 deletion
diff --git a/‎docs/angular/your-first-app/8-distribute.md
Lines changed: 2 additions & 2 deletions b/‎docs/angular/your-first-app/8-distribute.md
Lines changed: 2 additions & 2 deletions
diff --git a/‎docs/api/accordion.md
Lines changed: 10 additions & 10 deletions b/‎docs/api/accordion.md
Lines changed: 10 additions & 10 deletions
diff --git a/‎docs/api/app.md
Lines changed: 8 additions & 2 deletions b/‎docs/api/app.md
Lines changed: 8 additions & 2 deletions
diff --git a/‎docs/api/checkbox.md
Lines changed: 11 additions & 1 deletion b/‎docs/api/checkbox.md
Lines changed: 11 additions & 1 deletion
diff --git a/‎docs/api/datetime.md
Lines changed: 19 additions & 19 deletions b/‎docs/api/datetime.md
Lines changed: 19 additions & 19 deletions
diff --git a/‎docs/api/infinite-scroll.md
Lines changed: 3 additions & 1 deletion b/‎docs/api/infinite-scroll.md
Lines changed: 3 additions & 1 deletion
diff --git a/‎docs/api/input-password-toggle.md
Lines changed: 1 addition & 1 deletion b/‎docs/api/input-password-toggle.md
Lines changed: 1 addition & 1 deletion
@@ -4,6 +4,7 @@
 # Production
 /build
 /www
+/i18n
 
 # Generated files
 .docusaurus
 
@@ -7,6 +7,7 @@ docs/api
 docs/native
 versioned_docs/version-v*/native
 docs/cli/commands
+docs/reference/glossary.md
 
 static/code/stackblitz
 
 
@@ -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.
@@ -0,0 +1,6 @@
+---
+to: "<%= `static/usage/v${version}/${name}/${path}/angular/example_component_html.md` %>"
+---
+```html
+<<%= component %>></<%= component %>>
+```
@@ -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 {}
 ```
@@ -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-', '');
 
@@ -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"
 />
@@ -11,9 +11,10 @@ import './main.css';<% } %>
 
 function Example() {
   return (
-    <<%= pascalComponent %>></<%= pascalComponent %>>
+    <>
+      <<%= pascalComponent %>></<%= pascalComponent %>>
+    </>
   );
 }
 export default Example;
 ```
-
 
@@ -47,11 +47,6 @@ import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular/standalo
 
 import { routes } from './app/app.routes';
 import { AppComponent } from './app/app.component';
-import { environment } from './environments/environment';
-
-if (environment.production) {
-  enableProdMode();
-}
 
 bootstrapApplication(AppComponent, {
   providers: [
@@ -144,7 +139,7 @@ export class AppComponent {
 Icons registered in an application entry point can then be referenced by name anywhere in the application.
 
 ```html title="home.page.html"
-<!-- 
+<!--
   logoIonic was registered in app.component.ts instead of home.page.ts,
   but it can still be used in home.page.html.
 -->
@@ -306,7 +301,7 @@ export class AppComponent {
 Icons registered in an application entry point can then be referenced by name anywhere in the application.
 
 ```html title="home.page.html"
-<!-- 
+<!--
   logoIonic was registered in app.component.ts instead of home.page.ts,
   but it can still be used in home.page.html.
 -->
@@ -432,11 +427,6 @@ import { RouteReuseStrategy, provideRouter } from '@angular/router';
 
 import { routes } from './app/app.routes';
 import { AppComponent } from './app/app.component';
-import { environment } from './environments/environment';
-
-if (environment.production) {
-  enableProdMode();
-}
 
 bootstrapApplication(AppComponent, {
   providers: [
@@ -560,11 +550,6 @@ import { RouteReuseStrategy, provideRouter } from '@angular/router';
 
 import { routes } from './app/app.routes';
 import { AppComponent } from './app/app.component';
-import { environment } from './environments/environment';
-
-if (environment.production) {
-  enableProdMode();
-}
 
 @NgModule({
   declarations: [AppComponent],
@@ -605,11 +590,6 @@ import { RouteReuseStrategy, provideRouter } from '@angular/router';
 
 import { routes } from './app/app.routes';
 import { AppComponent } from './app/app.component';
-import { environment } from './environments/environment';
-
-if (environment.production) {
-  enableProdMode();
-}
 
 @NgModule({
   declarations: [AppComponent],
 
@@ -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
 
@@ -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);
 
@@ -55,7 +55,7 @@ To receive this live update, you will need to run the app on a device or an emul
 ionic [cordova | cap] run [ios | android] [options]
 ```
 
-Assuming the app is configured correctly to listen to the channel you deployed too, the app should immediately update on startup if you have chosen the auto update method during setup. If the background update method was chosen, be sure to stay in the app for about 30 seconds to ensure the update was downloaded. Then, close the application, reopen it, and you will see the updates applied!
+Assuming the app is configured correctly to listen to the channel you deployed to, the app should immediately update on startup if you have chosen the auto update method during setup. If the background update method was chosen, be sure to stay in the app for about 30 seconds to ensure the update was downloaded. Then, close the application, reopen it, and you will see the updates applied!
 
 To dive into more details on the steps to deploy a live update, as well as additional information such as disabling deploy for development, check out the [Deploy a Live Update](https://ionic.io/docs/appflow/quickstart/deploy) section inside the Appflow docs.
 
@@ -95,6 +95,6 @@ For access to the ability to create a Native Configuration, you will need to be
 
 Congratulations! You developed a complete cross-platform Photo Gallery app that runs on the web, iOS, and Android. Not only that, you have also then built the app and deployed it to your users devices!
 
-There are many paths to follow from here. Try adding another [Ionic UI component](https://ionicframework.com/docs/components) to the app, or more [native functionality](https://capacitorjs.com/docs/apis). The sky’s the limit. Once you have added another feature, run the the build and deploy process again through Appflow to get it out to your users.
+There are many paths to follow from here. Try adding another [Ionic UI component](https://ionicframework.com/docs/components) to the app, or more [native functionality](https://capacitorjs.com/docs/apis). The sky’s the limit. Once you have added another feature, run the build and deploy process again through Appflow to get it out to your users.
 
 Happy app building! 💙
@@ -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. |
 
 ## パフォーマンス
 
 
@@ -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 />
 
@@ -74,7 +74,17 @@ import LabelLink from '@site/static/usage/v8/checkbox/label-link/index.md';
 
 <LabelLink />
 
-## テーマ
+## Helper & Error Text
+
+Helper and error text can be used inside of a checkbox with the `helperText` and `errorText` property. The error text will not be displayed unless the `ion-invalid` and `ion-touched` classes are added to the `ion-checkbox`. This ensures errors are not shown before the user has a chance to enter data.
+
+In Angular, this is done automatically through form validation. In JavaScript, React and Vue, the class needs to be manually added based on your own validation.
+
+import HelperError from '@site/static/usage/v8/checkbox/helper-error/index.md';
+
+<HelperError />
+
+## Theming
 
 ## CSSカスタムプロパティ
 
 
@@ -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.       |
 
 #### 時刻、月、年のホイール
 
 
@@ -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 />
@@ -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';
Original file line number	Diff line number	Diff line change
@@ -178,4 +178,4 @@ The Ionic documentation's `main` branch is deployed automatically and separately
`178`	`178`
`179`	`179`	`This repo is licensed and managed separately from Ionic itself.`
`180`	`180`
`181`		`-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.`
	`181`	`+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.`
-Original file line number
+Diff line change
@@ @@ -0,0 +1,6 @@ @@
 +---
 +to: "<%= `static/usage/v${version}/${name}/${path}/angular/example_component_html.md` %>"
 +---
 +```html
 +<<%= component %>></<%= component %>>
 +```