ionic-team
diff --git a/‎.github/workflows/deploy.yml
Lines changed: 1 addition & 1 deletion b/‎.github/workflows/deploy.yml
Lines changed: 1 addition & 1 deletion
diff --git a/‎docs/angular/build-options.md
Lines changed: 49 additions & 0 deletions b/‎docs/angular/build-options.md
Lines changed: 49 additions & 0 deletions
diff --git a/‎docs/angular/your-first-app.md
Lines changed: 7 additions & 1 deletion b/‎docs/angular/your-first-app.md
Lines changed: 7 additions & 1 deletion
diff --git a/‎docs/api.md
Lines changed: 3 additions & 3 deletions b/‎docs/api.md
Lines changed: 3 additions & 3 deletions
diff --git a/‎docs/api/input.md
Lines changed: 18 additions & 2 deletions b/‎docs/api/input.md
Lines changed: 18 additions & 2 deletions
diff --git a/‎docs/api/item.md
Lines changed: 1 addition & 1 deletion b/‎docs/api/item.md
Lines changed: 1 addition & 1 deletion
diff --git a/‎docs/api/radio.md
Lines changed: 8 additions & 0 deletions b/‎docs/api/radio.md
Lines changed: 8 additions & 0 deletions
diff --git a/‎docs/api/refresher.md
Lines changed: 22 additions & 0 deletions b/‎docs/api/refresher.md
Lines changed: 22 additions & 0 deletions
diff --git a/‎docs/api/select.md
Lines changed: 15 additions & 1 deletion b/‎docs/api/select.md
Lines changed: 15 additions & 1 deletion
diff --git a/‎docs/api/textarea.md
Lines changed: 16 additions & 0 deletions b/‎docs/api/textarea.md
Lines changed: 16 additions & 0 deletions
@@ -11,7 +11,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 20.x
           cache: 'npm'
           cache-dependency-path: package-lock.json
 
 
@@ -1,3 +1,6 @@
+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.
@@ -175,6 +178,29 @@ export class HomePage {}
 <ion-button routerLink="/foo" routerDirection="root">Go to Foo Page</ion-button>
 ```
 
+**Testing**
+
+Ionic Angular's standalone components use ES Modules. As a result, developers using Jest should ensure that ES Modules are transpiled to a format that Jest can use. Developers using Jest should add the following to their Jest config:
+
+<Tabs groupId="package-manager" defaultValue="npm" values={[{ value: 'npm', label: 'npm' }, { value: 'pnpm', label: 'pnpm' }]}>
+<TabItem value="npm">
+
+```json
+
+"transformIgnorePatterns": ["<rootDir>/node_modules/(?!(@ionic/angular|@ionic/core|ionicons|@stencil/core|@angular/*)/)"]
+```
+
+</TabItem>
+<TabItem value="pnpm">
+
+```json
+
+"transformIgnorePatterns": ["<rootDir>/node_modules/.pnpm/(?!(@ionic/angular|@ionic/core|ionicons|@stencil/core|@angular/*)@)"]
+```
+
+</TabItem>
+</Tabs>
+
 ### Usage with NgModule-based Applications
 
 :::warning
@@ -315,6 +341,29 @@ export class HomePageModule {}
 <ion-button routerLink="/foo" routerDirection="root">Go to Foo Page</ion-button>
 ```
 
+**Testing**
+
+Ionic Angular's standalone components use ES Modules. As a result, developers using Jest should ensure that ES Modules are transpiled to a format that Jest can use. Developers using Jest should add the following to their Jest config:
+
+<Tabs groupId="package-manager" defaultValue="npm" values={[{ value: 'npm', label: 'npm' }, { value: 'pnpm', label: 'pnpm' }]}>
+<TabItem value="npm">
+
+```json
+
+"transformIgnorePatterns": ["<rootDir>/node_modules/(?!(@ionic/angular|@ionic/core|ionicons|@stencil/core|@angular/*)/)"]
+```
+
+</TabItem>
+<TabItem value="pnpm">
+
+```json
+
+"transformIgnorePatterns": ["<rootDir>/node_modules/.pnpm/(?!(@ionic/angular|@ionic/core|ionicons|@stencil/core|@angular/*)@)"]
+```
+
+</TabItem>
+</Tabs>
+
 ## Modules
 
 ### Overview
 
@@ -21,7 +21,7 @@ Here’s the finished app running on all 3 platforms:
   src="https://www.youtube.com/embed/0ASQ13Y1Rk4"
   frameBorder="0"
   allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-  allowfullscreen
+  allowFullScreen
 ></iframe>
 
 :::note
@@ -77,6 +77,12 @@ Consider setting up npm to operate globally without elevated permissions. See [R
 ionic start photo-gallery tabs --type=angular --capacitor
 ```
 
+:::note
+
+`NgModules` と `Standalone` のどちらかを選択するプロンプトが表示されたら、このチュートリアルは `NgModules` のアプローチに従っているので、`NgModules` を選択する。
+
+:::
+
 このスタータープロジェクトには、Ionic 開発のために事前に構成された 3 つのページとベストプラクティスが用意されています。共通の構成要素がすでに配置されているため、機能を簡単に追加できます！
 
 次に、アプリのフォルダに移動します:
 
@@ -5,13 +5,13 @@ title: APIインデックス
 import APIList from '@components/page/api/APIList';
 
 <head>
-  <title>API Index | Ionic Docs API Index for all API Custom Elements</title>
+  <title>API Index | API カスタム要素の Ionic Docs API Index</title>
   <meta
     name="description"
-    content="Each component in the Ionic Docs API Index consists of one or more custom elements—which each, in turn, may expose methods, events, and CSS custom properties."
+    content="Ionic Docs API Indexの各コンポーネントは、1つまたは複数のカスタム要素で構成され、それぞれがメソッド、イベント、CSSカスタムプロパティを公開します。"
   />
 </head>
 
-Each Ionic [component](/docs/components) consists of one or more [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements). Each custom element, in turn, may expose properties, methods, events, and CSS custom properties.
+各 Ionic の [コンポーネント](/docs/components) は、1 つ以上の [カスタム要素](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) から構成されます。各カスタム要素は順番に、プロパティ、メソッド、イベント、および CSS カスタムプロパティを公開できます。
 
 <APIList sidebar={require('@site/sidebars.js').default} />
@@ -18,7 +18,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 <EncapsulationPill type="scoped" />
 
 
-inputコンポーネントは、カスタム・スタイル設定と追加機能を持つHTMLのInput要素のラッパーです。HTML Inputとほとんど同じプロパティーを受け入れますが、デスクトップ・デバイスでは優れた動作をし、モバイル・デバイスではキーボードと統合されます。
+input コンポーネントは、HTML input 要素のラッパーで、カスタムスタイルと追加機能を備えています。HTML入力と同じプロパティのほとんどを受け入れ、モバイルデバイスのキーボードと統合します。
 
 
 ## 基本的な使い方
@@ -148,9 +148,25 @@ Please submit bug reports with Maskito to the [Maskito Github repository](https:
 
 :::
 
+## Start and End Slots (experimental)
+
+`start`スロットと `end`スロットはInputの両側にアイコン、ボタン、接頭辞/接尾辞テキストを配置するために使用することができます。
+
+この機能は [Web Component slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots) のシミュレート版に依存しているため、実験的なものであることに注意してください。そのため、シミュレートされた動作はネイティブのスロットの動作と完全に一致するとは限りません。
+
+:::note
+In most cases, [Icon](./icon.md) components placed in these slots should have `aria-hidden="true"`. See the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information.
+
+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';
+
+<StartEndSlots />
+
 ## テーマ
 
-### Colors
+### 配色
 
 `color`プロパティを設定すると、各Inputのカラーパレットが変更されます。 `ios`モードでは、このプロパティはキャレットカラーを変更します。 `md`モードでは、このプロパティはキャレットカラーとハイライト/アンダーラインカラーを変更します。
 
 
@@ -25,7 +25,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 ## 基本的な使い方
 
-アイテムはテキストを左寄せにし、テキストがアイテムより幅が広い場合は省略記号を追加しています。この動作は、Ionic Framework が提供する CSS Utilities を使って変更することができます。例えば、以下の例では `.ion-text-wrap` を使っています。テキストを変換するためにアイテムに追加できる他のクラスについては、[CSS Utilities Documentation](/docs/layout/css-utilities) を参照してください。
+アイテムはテキストを左寄せにし、テキストがアイテムより幅が広い場合は省略記号を追加しています。この動作は、Ionic Framework が提供する CSS Utilities を使って変更することができます。例えば、以下の例では `.ion-text-nowrap` を使っています。テキストを変換するためにアイテムに追加できる他のクラスについては、[CSS Utilities Documentation](/docs/layout/css-utilities) を参照してください。
 
 import Basic from '@site/static/usage/v7/item/basic/index.md';
 
 
@@ -36,6 +36,14 @@ import LabelPlacement from '@site/static/usage/v7/radio/label-placement/index.md
 
 <LabelPlacement />
 
+## Object Value References
+
+By default, the radio group uses strict equality (`===`) to determine if an option is selected. This can be overridden by providing a property name or a function to the `compareWith` property.
+
+import UsingComparewith from '@site/static/usage/v7/radio/using-comparewith/index.md';
+
+<UsingComparewith />
+
 ## Alignment
 
 Developers can use the `alignment` property to control how the label and control are aligned on the cross axis. This property mirrors the flexbox `align-items` property.
 
@@ -67,6 +67,28 @@ iOSとMaterial Designのネイティブリフレッシュ機能は、Ionicのデ
 
 Refresher が機能するためには、スクロールコンテナが必要です。仮想スクロールを使用する場合は、`ion-content` のスクロールを無効にし、`.ion-content-scroll-host` クラスターゲットで、どの要素コンテナがスクロールコンテナを担当するかを指定する必要があります。
 
+Developers should apply the following CSS to the scrollable container. This CSS adds a "rubber band" scrolling effect on iOS which allows the native iOS refresher to work properly:
+
+```css
+.ion-content-scroll-host::before,
+.ion-content-scroll-host::after {
+  position: absolute;
+  
+  width: 1px;
+  height: 1px;
+  
+  content: "";
+}
+
+.ion-content-scroll-host::before {
+  bottom: -1px;
+}
+
+.ion-content-scroll-host::after {
+  top: -1px;
+}
+```
+
 import CustomScrollTarget from '@site/static/usage/v7/refresher/custom-scroll-target/index.md';
 
 <CustomScrollTarget />
 
@@ -119,7 +119,7 @@ import RespondingToInteractionExample from '@site/static/usage/v7/select/basic/r
 
 Selectの値にオブジェクトを使用する場合、Selectの値のidentityはそのままで、サーバやデータベースから取得したオブジェクトのidentityが変わってしまうことがあります。例えば、希望するオブジェクト値を持つ既存のレコードがSelectに読み込まれたが、新しく取得されたselectオプションのIDが異なる場合、このようなことが起こりえます。その結果、Selectは、元のSelectがそのまま残っているにもかかわらず、全く値がないように見えることになります。
 
-デフォルトでは、Selectはオブジェクトの等質性(`===`)を使用してオプションが選択されているかどうかを判断します。これは `compareWith` プロパティにプロパティ名または関数を指定することでオーバーライドすることができます。
+デフォルトでは、Select はオプションが選択されているかどうかを決定するために厳密な等式 (`===`) を使用します。これは、プロパティ名または関数を `compareWith` プロパティに指定することでオーバーライドできます。
 
 ### Using compareWith
 
@@ -173,6 +173,20 @@ import InterfaceOptionsExample from '@site/static/usage/v7/select/customization/
 
 <InterfaceOptionsExample />
 
+## Start and End Slots
+
+The `start` and `end` slots can be used to place icons, buttons, or prefix/suffix text on either side of the select. If the slot content is clicked, the select will not open.
+
+:::note
+In most cases, [Icon](./icon.md) components placed in these slots should have `aria-hidden="true"`. See the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information.
+
+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/select/start-end-slots/index.md';
+
+<StartEndSlots />
+
 ## カスタマイズ
 
 Selectコンポーネントには2つのユニットがあり、それぞれ別々にスタイルを設定する必要があります。 `ion-select`要素は、ビュー上で選択された値、ない場合はプレースホルダ、ドロップダウンのアイコンによって表現されます。インターフェイスは上記の[インターフェイス](#interfaces)セクションで定義されており、`ion-select`をクリックしたときに開くダイアログです。インターフェイスには `ion-select-option` 要素を追加することで定義されるすべてのオプションが含まれています。以下のセクションでは、これらのスタイリングの違いについて説明します。
 
@@ -109,6 +109,22 @@ import ClearOnEditPlayground from '@site/static/usage/v7/textarea/clear-on-edit/
 
 <ClearOnEditPlayground />
 
+## Start and End Slots (experimental)
+
+The `start` and `end` slots can be used to place icons, buttons, or prefix/suffix text on either side of the textarea.
+
+Note that this feature is considered experimental because it relies on a simulated version of [Web Component slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots). As a result, the simulated behavior may not exactly match the native slot behavior.
+
+:::note
+In most cases, [Icon](./icon.md) components placed in these slots should have `aria-hidden="true"`. See the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information.
+
+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/textarea/start-end-slots/index.md';
+
+<StartEndSlots />
+
 ## レガシーtextarea構文からの移行
 
 Ionic 7.0では、よりシンプルなtextareaの構文が導入されました。この新しい構文は、textareaを設定するために必要な定型文を減らし、アクセシビリティの問題を解決し、開発者の体験を向上させます。