translation(jp): 20240418 update. support Ionic v8!!

.github/CODEOWNERS

@@ -12,5 +12,3 @@
 # This should make it easy to add new rules without breaking existing ones.
 
 * @ionic-team/framework
-
-/_templates/ @mapsandapps

_templates/README.md

@@ -26,7 +26,7 @@ Once you've generated your playground, you need to add it to the main markdown f
 ```
 ## Feature
 
-import Feature from '@site/static/usage/v7/button/feature/index.md';
+import Feature from '@site/static/usage/v8/button/feature/index.md';
 
 <Feature />
 ```

_templates/playground/new/demo.html.ejs.t

@@ -8,8 +8,8 @@ to: "<%= `static/usage/v${version}/${name}/${path}/demo.html` %>"
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title><%= h.changeCase.titleCase(name) %></title>
-    <link rel="stylesheet" href="<%= directoryChanges %>../../../common.css" />
-    <script src="<%= directoryChanges %>../../../common.js"></script>
+    <link rel="stylesheet" href="<%= directoryChanges %>../../common.css" />
+    <script src="<%= directoryChanges %>../../common.js"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@<%= version %>/dist/ionic/ionic.esm.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@<%= version %>/css/ionic.bundle.css" /><% if (css){ %>
 

_templates/playground/new/index.js

@@ -54,8 +54,8 @@ module.exports = {
               type: 'select',
               name: 'version',
               message: 'Select the Ionic Framework version for the playground',
-              initial: '7',
-              choices: ['6', '7'],
+              initial: '8',
+              choices: ['6', '7', '8'],
             },
             {
               type: 'toggle',
@@ -77,7 +77,7 @@ module.exports = {
 
             const playgroundName = changeCase.pascal(answers.path.split('/').pop());
             console.log(
-              `\nTo use this playground in a docs markdown file, include\nthe following:\n\n## ${playgroundName}\n\nimport ${playgroundName} from '@site/static/usage/v7/${answers.name}/${answers.path}/index.md';\n\n<${playgroundName} />\n`
+              `\nTo use this playground in a docs markdown file, include\nthe following:\n\n## ${playgroundName}\n\nimport ${playgroundName} from '@site/static/usage/v${answers.version}/${answers.name}/${answers.path}/index.md';\n\n<${playgroundName} />\n`
             );
 
             return answers;

cspell-wordlist.txt

@@ -12,6 +12,7 @@ Swiper
 Udemy
 Vetur
 Wistia
+WCAG
 
 actionsheet
 fabs

docs/angular/slides.md

@@ -102,7 +102,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-color: var(--ion-color-primary, #3880ff);
+  --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);
   --swiper-scrollbar-drag-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.5);
@@ -244,10 +244,10 @@ Let's say in an app with `ion-slides` we used the `ionSlideDidChange` event:
 </ion-slides>
 ```
 
-To migrate, we would change the name of the event to `slidechange`:
+To migrate, we would change the name of the event to `swiperslidechange`:
 
 ```html
-<swiper-container (slidechange)="onSlideChange()">
+<swiper-container (swiperslidechange)="onSlideChange()">
   <swiper-slide>Slide 1</swiper-slide>
   <swiper-slide>Slide 2</swiper-slide>
   <swiper-slide>Slide 3</swiper-slide>
@@ -256,27 +256,27 @@ To migrate, we would change the name of the event to `slidechange`:
 
 Below is a full list of event name changes when going from `ion-slides` to Swiper Angular:
 
-| ion-slides Event          | Swiper Event                 |
-| ------------------------- | ---------------------------- |
-| `ionSlideWillChange`      | `slidechangetransitionstart` |
-| `ionSlideDidChange`       | `slidechangetransitionend`   |
-| `ionSlideDoubleTap`       | `doubletap`                  |
-| `ionSlideDrag`            | `slidermove`                 |
-| `ionSlideNextStart`       | `slidenexttransitionstart`   |
-| `ionSlideNextEnd`         | `slidenexttransitionend`     |
-| `ionSlidePrevStart`       | `slideprevtransitionstart`   |
-| `ionSlidePrevEnd`         | `slideprevtransitionend`     |
-| `ionSlideReachStart`      | `reachbeginning`             |
-| `ionSlideReachEnd`        | `reachend`                   |
-| `ionSlideTap`             | `tap`                        |
-| `ionSlideTouchStart`      | `touchstart`                 |
-| `ionSlideTouchEnd`        | `touchend`                   |
-| `ionSlideTransitionStart` | `transitionstart`            |
-| `ionSlideTransitionEnd`   | `transitionend`              |
-| `ionSlidesDidLoad`        | `init`                       |
+| ion-slides Event          | Swiper Event                       |
+| ------------------------- | ---------------------------------- |
+| `ionSlideWillChange`      | `swiperslidechangetransitionstart` |
+| `ionSlideDidChange`       | `swiperslidechange`                |
+| `ionSlideDoubleTap`       | `swiperdoubletap`                  |
+| `ionSlideDrag`            | `swiperslidermove`                 |
+| `ionSlideNextStart`       | `swiperslidenexttransitionstart`   |
+| `ionSlideNextEnd`         | `swiperslidenexttransitionend`     |
+| `ionSlidePrevStart`       | `swiperslideprevtransitionstart`   |
+| `ionSlidePrevEnd`         | `swiperslideprevtransitionend`     |
+| `ionSlideReachStart`      | `swiperreachbeginning`             |
+| `ionSlideReachEnd`        | `swiperreachend`                   |
+| `ionSlideTap`             | `swipertap`                        |
+| `ionSlideTouchStart`      | `swipertouchstart`                 |
+| `ionSlideTouchEnd`        | `swipertouchend`                   |
+| `ionSlideTransitionStart` | `swipertransitionstart`            |
+| `ionSlideTransitionEnd`   | `swipertransitionend`              |
+| `ionSlidesDidLoad`        | `swiperinit`                       |
 
 :::note
-All events available in Swiper Element can be found at <a href="https://swiperjs.com/swiper-api#events" target="_blank" rel="noopener noreferrer">https://swiperjs.com/swiper-api#events</a>.
+All events available in Swiper Element can be found at <a href="https://swiperjs.com/swiper-api#events" target="_blank" rel="noopener noreferrer">https://swiperjs.com/swiper-api#events</a> and should be lowercased and prefixed with the word `swiper`.
 :::
 
 ## Methods

docs/api/accordion-group.md

@@ -1,12 +1,12 @@
 ---
 title: "ion-accordion-group"
 ---
-import Props from '@ionic-internal/component-api/v7/accordion-group/props.md';
-import Events from '@ionic-internal/component-api/v7/accordion-group/events.md';
-import Methods from '@ionic-internal/component-api/v7/accordion-group/methods.md';
-import Parts from '@ionic-internal/component-api/v7/accordion-group/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/accordion-group/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/accordion-group/slots.md';
+import Props from '@ionic-internal/component-api/v8/accordion-group/props.md';
+import Events from '@ionic-internal/component-api/v8/accordion-group/events.md';
+import Methods from '@ionic-internal/component-api/v8/accordion-group/methods.md';
+import Parts from '@ionic-internal/component-api/v8/accordion-group/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/accordion-group/custom-props.md';
+import Slots from '@ionic-internal/component-api/v8/accordion-group/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 

docs/api/accordion.md

@@ -1,12 +1,12 @@
 ---
 title: "ion-accordion"
 ---
-import Props from '@ionic-internal/component-api/v7/accordion/props.md';
-import Events from '@ionic-internal/component-api/v7/accordion/events.md';
-import Methods from '@ionic-internal/component-api/v7/accordion/methods.md';
-import Parts from '@ionic-internal/component-api/v7/accordion/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/accordion/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/accordion/slots.md';
+import Props from '@ionic-internal/component-api/v8/accordion/props.md';
+import Events from '@ionic-internal/component-api/v8/accordion/events.md';
+import Methods from '@ionic-internal/component-api/v8/accordion/methods.md';
+import Parts from '@ionic-internal/component-api/v8/accordion/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/accordion/custom-props.md';
+import Slots from '@ionic-internal/component-api/v8/accordion/slots.md';
 
 <head>
   <title>ion-accordion: Accordion Components: How to Build & Examples</title>
@@ -22,31 +22,37 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 ## 基本的な使い方
 
-import Basic from '@site/static/usage/v7/accordion/basic/index.md';
+import Basic from '@site/static/usage/v8/accordion/basic/index.md';
 
 <Basic />
 
 ## アコーディオンをトグルする方法
 
 どのアコーディオンを開くかは、`ion-accordion-group` の `value` プロパティを設定することで制御できます。このプロパティを設定することで、開発者はプログラムによって特定のアコーディオンを展開したり折りたたんだりすることができます。
 
-import Toggle from '@site/static/usage/v7/accordion/toggle/index.md';
+import Toggle from '@site/static/usage/v8/accordion/toggle/index.md';
 
 <Toggle />
 
 ## アコーディオンの状態変化を監視
 
-開発者は `ionChange` イベントを監視することで、アコーディオンが展開または折りたたまれたときに通知されるようにすることができます。
+:::caution
+[Input](./input) や [Textarea](./textarea) などの他のコンポーネントが発する `ionChange` イベントのほとんどはバブル化されます。その結果、アコーディオンの中で関連コンポーネントが使用されている場合、これらのイベントはバブルアップし、アコーディオングループの `ionChange` リスナーを発火させます。
 
-import ListenChanges from '@site/static/usage/v7/accordion/listen-changes/index.md';
+アコーディオンの内部で `ionChange` を発する他のコンポーネントを使用する場合は、アコーディオングループの `ionChange` コールバックに、コールバックに渡されたイベントの `target` キーをチェックさせ、`ionChange` がアコーディオングループからのものであり、子孫からのものでないことを確認することをお勧めします。
+:::
+
+開発者は `ionChange` イベントをリッスンして、アコーディオンが展開または折りたたまれたときに通知を受けることができます。
+
+import ListenChanges from '@site/static/usage/v8/accordion/listen-changes/index.md';
 
 <ListenChanges />
 
 ## 複数のアコーディオン
 
 開発者は `multiple` プロパティを使用して、複数のアコーディオンを一度に開くことができるようにすることができます。
 
-import Multiple from '@site/static/usage/v7/accordion/multiple/index.md';
+import Multiple from '@site/static/usage/v8/accordion/multiple/index.md';
 
 <Multiple />
 
@@ -56,15 +62,15 @@ import Multiple from '@site/static/usage/v7/accordion/multiple/index.md';
 
 個々のアコーディオンは、`ion-accordion` の `disabled` プロパティで無効にできます。
 
-import DisableIndividual from '@site/static/usage/v7/accordion/disable/individual/index.md';
+import DisableIndividual from '@site/static/usage/v8/accordion/disable/individual/index.md';
 
 <DisableIndividual />
 
 ### アコーディオングループ
 
 アコーディオングループは、`ion-accordion-group` の `disabled` プロパティで無効にすることができます。
 
-import DisableGroup from '@site/static/usage/v7/accordion/disable/group/index.md';
+import DisableGroup from '@site/static/usage/v8/accordion/disable/group/index.md';
 
 <DisableGroup />
 
@@ -74,15 +80,15 @@ import DisableGroup from '@site/static/usage/v7/accordion/disable/group/index.md
 
 個々のアコーディオンは、`ion-accordion` の `readonly` プロパティで無効にできます。
 
-import ReadonlyIndividual from '@site/static/usage/v7/accordion/readonly/individual/index.md';
+import ReadonlyIndividual from '@site/static/usage/v8/accordion/readonly/individual/index.md';
 
 <ReadonlyIndividual />
 
 ### アコーディオングループ
 
 アコーディオングループは、`ion-accordion-group` の `readonly` プロパティで無効にできます。
 
-import ReadonlyGroup from '@site/static/usage/v7/accordion/readonly/group/index.md';
+import ReadonlyGroup from '@site/static/usage/v8/accordion/readonly/group/index.md';
 
 <ReadonlyGroup />
 
@@ -106,7 +112,7 @@ import ReadonlyGroup from '@site/static/usage/v7/accordion/readonly/group/index.
 
 `expand="inset"` の場合、アコーディオングループにはborder radiusが与えられます。 `md` モードでは、アコーディオン全体を開くと下に移動します。
 
-import ExpansionStyles from '@site/static/usage/v7/accordion/customization/expansion-styles/index.md';
+import ExpansionStyles from '@site/static/usage/v8/accordion/customization/expansion-styles/index.md';
 
 <ExpansionStyles />
 
@@ -130,7 +136,7 @@ ion-accordion.accordion-expanded ion-item[slot="header"] {
 }
 ```
 
-import AdvancedExpansionStyles from '@site/static/usage/v7/accordion/customization/advanced-expansion-styles/index.md';
+import AdvancedExpansionStyles from '@site/static/usage/v8/accordion/customization/advanced-expansion-styles/index.md';
 
 <AdvancedExpansionStyles />
 
@@ -142,15 +148,15 @@ import AdvancedExpansionStyles from '@site/static/usage/v7/accordion/customizati
 
 どのオプションを選択しても、アコーディオンを展開または折りたたむと、アイコンは自動的に回転します。
 
-import Icons from '@site/static/usage/v7/accordion/customization/icons/index.md';
+import Icons from '@site/static/usage/v8/accordion/customization/icons/index.md';
 
 <Icons />
 
 ### テーマ
 
 `ion-accordion` はヘッダーとコンテンツ要素を囲むシェルとして機能するので、アコーディオンを簡単に好きなようにテーマ化することができます。ヘッダーのテーマは、スロットの `ion-item` をターゲットにすることで行うことができます。 `ion-item` を使用しているので、 [ion-item CSS Variables](./item#css-custom-properties) と  [ion-item Shadow Parts](./item#css-shadow-parts) にもすべてアクセスすることができます。コンテンツのテイムも、`content` slotにある要素をターゲットにすることで簡単に実現できます。
 
-import Theming from '@site/static/usage/v7/accordion/customization/theming/index.md';
+import Theming from '@site/static/usage/v8/accordion/customization/theming/index.md';
 
 <Theming />
 
@@ -160,7 +166,7 @@ import Theming from '@site/static/usage/v7/accordion/customization/theming/index
 
 デフォルトでは、アコーディオン・アイテムを展開したり折りたたんだりする際にアニメーションが有効になります。アニメーションは `prefers-reduced-motion` メディアクエリがサポートされ、`reduce` に設定されると自動的に無効化されます。対応していないブラウザでは、Ionic Frameworkアプリで `animated` を設定することで、アニメーションを無効にすることができます。
 
-import AccessibilityAnimations from '@site/static/usage/v7/accordion/accessibility/animations/index.md';
+import AccessibilityAnimations from '@site/static/usage/v8/accordion/accessibility/animations/index.md';
 
 <AccessibilityAnimations />