Merge branch 'main' of github.com:ionic-team/ionic-docs

# Conflicts:
#	docs/api/accordion.md
#	docs/api/datetime-button.md
#	docs/api/datetime.md
#	docs/api/infinite-scroll.md
#	docs/api/modal.md
#	docs/api/picker.md
#	docs/api/title.md
#	docs/layout/css-utilities.md
#	docs/layout/global-stylesheets.md
#	docs/layout/structure.md
#	docs/theming/advanced.md
#	docs/theming/colors.md
#	docs/theming/css-variables.md
#	docs/theming/dark-mode.md
#	docs/theming/themes.md
#	docs/updating/6-0.md

.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,36 @@ 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 />
 
 ## アコーディオンの状態変化を監視
 
+:::caution
+[Input](./input) や [Textarea](./textarea) などの他のコンポーネントが発する `ionChange` イベントのほとんどはバブルします。その結果、アコーディオンの中で関連コンポーネントが使用されている場合、これらのイベントはバブルアップし、アコーディオングループの `ionChange` リスナーを発火させます。
+アコーディオンの内部で `ionChange` を発する他のコンポーネントを使用する場合は、アコーディオングループの `ionChange` コールバックに、コールバックに渡されたイベントの `target` キーをチェックさせ、`ionChange` がアコーディオングループからのものであり、子孫からのものでないことを確認することをお勧めします。
+:::
+
 開発者は `ionChange` イベントを監視することで、アコーディオンが展開または折りたたまれたときに通知されるようにすることができます。
 
-import ListenChanges from '@site/static/usage/v7/accordion/listen-changes/index.md';
+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 +61,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 +79,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 +111,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 +135,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 +147,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 +165,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 />
 

docs/api/action-sheet.md

@@ -4,12 +4,12 @@ title: "ion-action-sheet"
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v7/action-sheet/props.md';
-import Events from '@ionic-internal/component-api/v7/action-sheet/events.md';
-import Methods from '@ionic-internal/component-api/v7/action-sheet/methods.md';
-import Parts from '@ionic-internal/component-api/v7/action-sheet/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/action-sheet/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/action-sheet/slots.md';
+import Props from '@ionic-internal/component-api/v8/action-sheet/props.md';
+import Events from '@ionic-internal/component-api/v8/action-sheet/events.md';
+import Methods from '@ionic-internal/component-api/v8/action-sheet/methods.md';
+import Parts from '@ionic-internal/component-api/v8/action-sheet/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/action-sheet/custom-props.md';
+import Slots from '@ionic-internal/component-api/v8/action-sheet/slots.md';
 
 <head>
   <title>ion-action-sheet: Action Sheet Dialog for iOS and Android</title>
@@ -27,7 +27,7 @@ Action Sheetは複数の選択肢を表示するダイアログです。アプ
 
 `ion-action-sheet` は、テンプレートに直接コンポーネントを記述することで使用することができます。これにより、アクションシートを表示するために配線する必要があるハンドラの数を減らすことができます。
 
-import Trigger from '@site/static/usage/v7/action-sheet/inline/trigger/index.md';
+import Trigger from '@site/static/usage/v8/action-sheet/inline/trigger/index.md';
 
 <Trigger />
 
@@ -37,15 +37,15 @@ import Trigger from '@site/static/usage/v7/action-sheet/inline/trigger/index.md'
 
 `isOpen` は一方通行のデータバインディングを使用しているため、アクションシートが終了したときに自動的に `false` に設定されることはありません。開発者は `ionActionSheetDidDismiss` または `didDismiss` イベントをリッスンして `isOpen` を `false` に設定する必要があります。この理由は、`ion-action-sheet` の内部がアプリケーションの状態と密接に結合するのを防ぐためです。一方通行のデータバインディングでは、アクションシートはリアクティブ変数が提供するブーリアン値だけを気にすればよい。一方通行のデータバインディングでは、アクションシートは、ブーリアン値とリアクティブ変数の存在の両方に関心を持つ必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にします。
 
-import IsOpen from '@site/static/usage/v7/action-sheet/inline/isOpen/index.md';
+import IsOpen from '@site/static/usage/v8/action-sheet/inline/isOpen/index.md';
 
 <IsOpen />
 
 ## Controller アクションシート
 
 アクションシートの表示・非表示をより細かく制御したい場合は、`actionSheetController`を使用することができます。
 
-import Controller from '@site/static/usage/v7/action-sheet/controller/index.md';
+import Controller from '@site/static/usage/v8/action-sheet/controller/index.md';
 
 <Controller />
 
@@ -59,7 +59,7 @@ Buttonは `ActionSheetButton` の `data` プロパティを介してデータを
 
 `didDismiss` イベントが発生すると、イベント詳細の `data` と `role` フィールドを使用して、アクションシートがどのように却下されたかについての情報を収集することができます。
 
-import RoleInfo from '@site/static/usage/v7/action-sheet/role-info-on-dismiss/index.md';
+import RoleInfo from '@site/static/usage/v8/action-sheet/role-info-on-dismiss/index.md';
 
 <RoleInfo />
 
@@ -83,15 +83,15 @@ import RoleInfo from '@site/static/usage/v7/action-sheet/role-info-on-dismiss/in
 }
 ```
 
-import Styling from '@site/static/usage/v7/action-sheet/theming/styling/index.md';
+import Styling from '@site/static/usage/v8/action-sheet/theming/styling/index.md';
 
 <Styling />
 
 ## CSSカスタムプロパティ
 
 [CSSカスタムプロパティ](#css-custom-properties-1) は、個々の要素を対象とすることなく、アクションシートのスタイルに使用することができます。
 
-import CssCustomProperties from '@site/static/usage/v7/action-sheet/theming/css-properties/index.md';
+import CssCustomProperties from '@site/static/usage/v8/action-sheet/theming/css-properties/index.md';
 
 <CssCustomProperties />