merge release-5.9.4

5.9.4

.circleci/config.yml

@@ -1,565 +0,0 @@
-version: 2.1
-orbs:
-  cypress: cypress-io/cypress@1.27.0
-
-aliases:
-  - &restore-cache
-      keys:
-        - dependency-cache-{{ checksum "package.json" }}-7
-
-  - &save-cache
-      key: dependency-cache-{{ checksum "package.json" }}-7
-      paths:
-        - node_modules
-
-  - &restore-cache-core
-      keys:
-        - dependency-cache-{{ checksum "core/package.json" }}-7
-
-  - &save-cache-core
-      key: dependency-cache-{{ checksum "core/package.json" }}-7
-      paths:
-        - core/node_modules
-
-  - &restore-cache-core-stencil
-      keys:
-        - stencil-cache-6
-
-  - &save-cache-core-stencil
-      key: stencil-cache-6
-      paths:
-        - core/.stencil
-        - core/screenshot/images
-
-defaults: &defaults
-  docker:
-    - image: circleci/node:latest-browsers
-  working_directory: /tmp/workspace
-  environment:
-    NODE_ENV: development
-
-jobs:
-  puppeteer-dependencies:
-    <<: *defaults
-    steps:
-    - run:
-        name: Install headless Chrome dependencies
-        command: |
-          sudo apt-get install -yq \
-          gconf-service libasound2 libatk1.0-0 libatk-bridge2.0-0 libc6 libcairo2 libcups2 libdbus-1-3 \
-          libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 \
-          libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 \
-          libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates \
-          fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget
-    - run:
-        name: Install Puppeteer with Chromium
-        command: |
-          npm i puppeteer
-
-  build:
-    <<: *defaults
-    steps:
-      - checkout
-      - restore_cache: *restore-cache
-      - run: npm install --legacy-peer-deps
-      - save_cache: *save-cache
-      - persist_to_workspace:
-          root: /tmp/workspace
-          paths:
-            - node_modules
-
-  build-core:
-    <<: *defaults
-    steps:
-      - checkout
-      - attach_workspace:
-          at: /tmp/workspace
-      - restore_cache: *restore-cache-core
-      - restore_cache: *restore-cache-core-stencil
-      - run:
-          command: npm install --legacy-peer-deps
-          working_directory: /tmp/workspace/core
-      - save_cache: *save-cache-core
-      - run:
-          command: npm run build -- --ci
-          working_directory: /tmp/workspace/core
-      - save_cache: *save-cache-core-stencil
-      - persist_to_workspace:
-          root: /tmp/workspace
-          paths:
-            - core/node_modules
-            - core/dist
-            - core/components
-            - core/css
-            - core/hydrate
-            - core/loader
-
-  build-angular:
-    <<: *defaults
-    steps:
-      - checkout
-      - attach_workspace:
-          at: /tmp/workspace
-      - run:
-          command: npm install --legacy-peer-deps
-          working_directory: /tmp/workspace/angular
-      - run:
-          command: sudo npm link
-          working_directory: /tmp/workspace/core
-      - run:
-          command: sudo npm link @ionic/core
-          working_directory: /tmp/workspace/angular
-      - run:
-          command: npm run build
-          working_directory: /tmp/workspace/angular
-      - persist_to_workspace:
-          root: /tmp/workspace
-          paths:
-            - angular/node_modules
-            - angular/dist
-
-  build-angular-server:
-    <<: *defaults
-    steps:
-      - checkout
-      - attach_workspace:
-          at: /tmp/workspace
-      - run:
-          command: npm install --legacy-peer-deps
-          working_directory: /tmp/workspace/packages/angular-server
-      - run:
-          command: npm run build.prod
-          working_directory: /tmp/workspace/packages/angular-server
-      - persist_to_workspace:
-          root: /tmp/workspace
-          paths:
-            - packages/angular-server/dist
-
-  build-react:
-    <<: *defaults
-    steps:
-      - checkout
-      - attach_workspace:
-          at: /tmp/workspace
-      - run:
-          command: npm install --legacy-peer-deps
-          working_directory: /tmp/workspace/packages/react
-      - run:
-          command: sudo npm link
-          working_directory: /tmp/workspace/core
-      - run:
-          command: sudo npm link @ionic/core
-          working_directory: /tmp/workspace/packages/react
-      - run:
-          command: npm run build
-          working_directory: /tmp/workspace/packages/react
-      - persist_to_workspace:
-          root: /tmp/workspace
-          paths:
-            - packages/react/node_modules
-            - packages/react/dist
-            - packages/react/css
-
-  build-react-router:
-    <<: *defaults
-    steps:
-      - checkout
-      - attach_workspace:
-          at: /tmp/workspace
-      - run:
-          command: npm install --legacy-peer-deps
-          working_directory: /tmp/workspace/packages/react-router
-      - run:
-          command: sudo npm link
-          working_directory: /tmp/workspace/core
-      - run:
-          command: sudo npm link @ionic/core
-          working_directory: /tmp/workspace/packages/react-router
-      - run:
-          command: sudo npm link
-          working_directory: /tmp/workspace/packages/react
-      - run:
-          command: sudo npm link @ionic/react
-          working_directory: /tmp/workspace/packages/react-router
-      - run:
-          command: npm run build
-          working_directory: /tmp/workspace/packages/react-router
-      - persist_to_workspace:
-          root: /tmp/workspace
-          paths:
-            - packages/react-router/node_modules
-            - packages/react-router/dist
-
-  build-vue:
-    <<: *defaults
-    steps:
-      - checkout
-      - attach_workspace:
-          at: /tmp/workspace
-      - run:
-          command: npm install
-          working_directory: /tmp/workspace/packages/vue
-      - run:
-          command: sudo npm link
-          working_directory: /tmp/workspace/core
-      - run:
-          command: sudo npm link @ionic/core
-          working_directory: /tmp/workspace/packages/vue
-      - run:
-          command: npm run build
-          working_directory: /tmp/workspace/packages/vue
-      - persist_to_workspace:
-          root: /tmp/workspace
-          paths:
-            - packages/vue/node_modules
-            - packages/vue/dist
-            - packages/vue/css
-
-  build-vue-router:
-    <<: *defaults
-    steps:
-      - checkout
-      - attach_workspace:
-          at: /tmp/workspace
-      - run:
-          command: npm install
-          working_directory: /tmp/workspace/packages/vue-router
-      - run:
-          command: sudo npm link
-          working_directory: /tmp/workspace/packages/vue
-      - run:
-          command: sudo npm link @ionic/vue
-          working_directory: /tmp/workspace/packages/vue-router
-      - run:
-          command: npm run build
-          working_directory: /tmp/workspace/packages/vue-router
-      - persist_to_workspace:
-          root: /tmp/workspace
-          paths:
-            - packages/vue-router/dist
-
-  test-core-clean-build:
-    <<: *defaults
-    steps:
-      - checkout
-      - attach_workspace:
-          at: /tmp/workspace
-      - run:
-          name: Checking clean build
-          command: git diff --exit-code
-          working_directory: /tmp/workspace/core
-
-  test-core-lint:
-    <<: *defaults
-    steps:
-      - checkout
-      - attach_workspace:
-          at: /tmp/workspace
-      - run:
-          command: npm run lint
-          working_directory: /tmp/workspace/core
-
-  test-core-e2e:
-    <<: *defaults
-    steps:
-      - checkout
-      - attach_workspace:
-          at: /tmp/workspace
-      - run:
-          command: npm run test.e2e -- --ci --no-build
-          working_directory: /tmp/workspace/core
-
-  test-core-spec:
-    <<: *defaults
-    steps:
-      - checkout
-      - attach_workspace:
-          at: /tmp/workspace
-      - run:
-          command: npm run test.spec -- --ci
-          working_directory: /tmp/workspace/core
-
-  test-core-treeshake:
-    <<: *defaults
-    steps:
-      - checkout
-      - attach_workspace:
-          at: /tmp/workspace
-      - run:
-          command: npm run test.treeshake -- --ci
-          working_directory: /tmp/workspace/core
-
-  test-core-screenshot:
-    <<: *defaults
-    steps:
-      - checkout
-      - attach_workspace:
-          at: /tmp/workspace
-      - run:
-          name: Run Screenshot
-          command: npx stencil test --e2e --screenshot --screenshot-connector=scripts/screenshot/ci.js --ci --no-build || true
-          working_directory: /tmp/workspace/core
-
-  test-core-screenshot-master:
-    <<: *defaults
-    steps:
-      - checkout
-      - attach_workspace:
-          at: /tmp/workspace
-      - run:
-          name: Run Screenshot
-          command: npx stencil test --e2e --screenshot --screenshot-connector=scripts/screenshot/ci.js --ci --update-screenshot --no-build || true
-          working_directory: /tmp/workspace/core
-
-  test-angular-lint:
-    <<: *defaults
-    steps:
-      - checkout
-      - attach_workspace:
-          at: /tmp/workspace
-      - run:
-          command: npm run lint
-          working_directory: /tmp/workspace/angular
-
-  test-react-lint:
-    <<: *defaults
-    steps:
-      - checkout
-      - attach_workspace:
-          at: /tmp/workspace
-      - run:
-          command: npm run lint
-          working_directory: /tmp/workspace/packages/react
-
-  test-react-router-lint:
-    <<: *defaults
-    steps:
-      - checkout
-      - attach_workspace:
-          at: /tmp/workspace
-      - run:
-          command: npm run lint
-          working_directory: /tmp/workspace/packages/react-router
-
-  test-vue-lint:
-    <<: *defaults
-    steps:
-      - checkout
-      - attach_workspace:
-          at: /tmp/workspace
-      - run:
-          command: npm run lint
-          working_directory: /tmp/workspace/packages/vue
-
-  test-vue-router-lint:
-    <<: *defaults
-    steps:
-      - checkout
-      - attach_workspace:
-          at: /tmp/workspace
-      - run:
-          command: npm run lint
-          working_directory: /tmp/workspace/packages/vue-router
-
-  test-react-spec:
-    <<: *defaults
-    steps:
-      - checkout
-      - attach_workspace:
-          at: /tmp/workspace
-      - run:
-          command: sudo npm link
-          working_directory: /tmp/workspace/core
-      - run:
-          command: sudo npm link @ionic/core
-          working_directory: /tmp/workspace/packages/react
-      - run:
-          command: npm run test.spec
-          working_directory: /tmp/workspace/packages/react
-
-  test-react-router-spec:
-    <<: *defaults
-    steps:
-      - checkout
-      - attach_workspace:
-          at: /tmp/workspace
-      - run:
-          command: sudo npm link
-          working_directory: /tmp/workspace/core
-      - run:
-          command: sudo npm link @ionic/core
-          working_directory: /tmp/workspace/packages/react
-      - run:
-          command: sudo npm link
-          working_directory: /tmp/workspace/packages/react
-      - run:
-          command: sudo npm link @ionic/react
-          working_directory: /tmp/workspace/packages/react-router
-      - run:
-          command: npm run test.spec
-          working_directory: /tmp/workspace/packages/react-router
-
-  install-react-test-app:
-    <<: *defaults
-    steps:
-      - checkout
-      - attach_workspace:
-          at: /tmp/workspace
-      - run:
-          command: CYPRESS_CACHE_FOLDER=/tmp/workspace/packages/react-router/test-app npm install
-          working_directory: /tmp/workspace/packages/react-router/test-app
-      - persist_to_workspace:
-          root: /tmp/workspace
-          paths:
-            - packages/react-router/test-app
-
-  test-react-e2e:
-    <<: *defaults
-    steps:
-      - checkout
-      - attach_workspace:
-          at: /tmp/workspace
-      - run:
-          command: npm run sync
-          working_directory: /tmp/workspace/packages/react-router/test-app
-      - run:
-          command: CYPRESS_CACHE_FOLDER=/tmp/workspace/packages/react-router/test-app npm run e2e
-          working_directory: /tmp/workspace/packages/react-router/test-app
-
-  test-vue-router-spec:
-    <<: *defaults
-    steps:
-      - checkout
-      - attach_workspace:
-          at: /tmp/workspace
-      - run:
-          command: sudo npm link
-          working_directory: /tmp/workspace/core
-      - run:
-          command: sudo npm link @ionic/core
-          working_directory: /tmp/workspace/packages/vue
-      - run:
-          command: sudo npm link
-          working_directory: /tmp/workspace/packages/vue
-      - run:
-          command: sudo npm link @ionic/vue
-          working_directory: /tmp/workspace/packages/vue-router
-      - run:
-          command: npm run test.spec
-          working_directory: /tmp/workspace/packages/vue-router
-
-  test-angular-e2e:
-    <<: *defaults
-    steps:
-      - checkout
-      - attach_workspace:
-          at: /tmp/workspace
-      - run:
-          command: npm install --legacy-peer-deps
-          working_directory: /tmp/workspace/angular/test/test-app
-      - run:
-          command: npm run test
-          working_directory: /tmp/workspace/angular/test/test-app
-
-  install-vue-test-app:
-    <<: *defaults
-    steps:
-      - checkout
-      - attach_workspace:
-          at: /tmp/workspace
-      - run:
-          command: CYPRESS_CACHE_FOLDER=/tmp/workspace/packages/vue/test-app npm install
-          working_directory: /tmp/workspace/packages/vue/test-app
-      - persist_to_workspace:
-          root: /tmp/workspace
-          paths:
-            - packages/vue/test-app
-
-  test-vue-spec-and-e2e:
-    <<: *defaults
-    steps:
-      - checkout
-      - attach_workspace:
-          at: /tmp/workspace
-      - run:
-          command: npm run sync
-          working_directory: /tmp/workspace/packages/vue/test-app
-      - run:
-          command: npm run test:unit
-          working_directory: /tmp/workspace/packages/vue/test-app
-      - run:
-          command: CYPRESS_CACHE_FOLDER=/tmp/workspace/packages/vue/test-app npm run test:e2e
-          working_directory: /tmp/workspace/packages/vue/test-app
-
-workflows:
-  version: 2
-  build:
-    jobs:
-      - puppeteer-dependencies
-      - build
-      - build-core:
-          requires: [build]
-      - test-core-clean-build:
-          requires: [build-core]
-      - test-core-lint:
-          requires: [build-core]
-      - test-core-e2e:
-          requires: [puppeteer-dependencies, build-core]
-      - test-core-spec:
-          requires: [build-core]
-      # Adam requested we skip this test for now
-      # since it is failing on ES5 code which
-      # will be removed in Ionic Framework v6
-      #- test-core-treeshake:
-      #    requires: [build-core]
-      - test-core-screenshot:
-          requires: [build-core]
-          filters:
-            branches:
-              ignore: master
-      - test-core-screenshot-master:
-          requires: [build-core]
-          filters:
-            branches:
-              only: master
-
-      - build-angular:
-          requires: [build-core]
-      - build-angular-server:
-          requires: [build-angular]
-      - build-react:
-          requires: [build-core]
-      - build-react-router:
-          requires: [build-core, build-react]
-      - test-react-lint:
-          requires: [build-react]
-      - test-react-router-lint:
-          requires: [build-react-router]
-      - test-react-spec:
-          requires: [build-react]
-      - test-react-router-spec:
-          requires: [build-react-router]
-      - install-react-test-app:
-          requires: [build-core]
-      - test-react-e2e:
-          requires: [install-react-test-app, build-react, build-react-router]
-      - build-vue:
-          requires: [build-core]
-      - build-vue-router:
-          requires: [build-vue]
-      - test-vue-lint:
-          requires: [build-vue]
-      - test-vue-router-lint:
-          requires: [build-vue-router]
-      - test-vue-router-spec:
-          requires: [build-vue-router]
-      - install-vue-test-app:
-          requires: [build-core]
-      - test-vue-spec-and-e2e:
-          requires: [install-vue-test-app, build-vue, build-vue-router]
-      - test-angular-lint:
-          requires: [build-angular]
-      - test-angular-e2e:
-          requires:
-            - build-angular
-            - build-angular-server

.github/COMPONENT-GUIDE.md

@@ -356,9 +356,9 @@ ion-ripple-effect {
 
 ### Example Components
 
-- [ion-button](https://github.com/ionic-team/ionic/tree/master/core/src/components/button)
-- [ion-back-button](https://github.com/ionic-team/ionic/tree/master/core/src/components/back-button)
-- [ion-menu-button](https://github.com/ionic-team/ionic/tree/master/core/src/components/menu-button)
+- [ion-button](https://github.com/ionic-team/ionic/tree/main/core/src/components/button)
+- [ion-back-button](https://github.com/ionic-team/ionic/tree/main/core/src/components/back-button)
+- [ion-menu-button](https://github.com/ionic-team/ionic/tree/main/core/src/components/menu-button)
 
 ### References
 
@@ -372,7 +372,7 @@ ion-ripple-effect {
 
 #### Example Components
 
-- [ion-checkbox](https://github.com/ionic-team/ionic/tree/master/core/src/components/checkbox)
+- [ion-checkbox](https://github.com/ionic-team/ionic/tree/main/core/src/components/checkbox)
 
 #### VoiceOver
 
@@ -498,7 +498,7 @@ This is a compromise we have to make in order for it to work with the other scre
 
 #### Example Components
 
-- [ion-toggle](https://github.com/ionic-team/ionic/tree/master/core/src/components/toggle)
+- [ion-toggle](https://github.com/ionic-team/ionic/tree/main/core/src/components/toggle)
 
 #### Voiceover
 
@@ -631,11 +631,11 @@ Certain components can render an `<a>` or a `<button>` depending on the presence
 
 ### Example Components
 
-- [ion-button](https://github.com/ionic-team/ionic/tree/master/core/src/components/button)
-- [ion-card](https://github.com/ionic-team/ionic/tree/master/core/src/components/card)
-- [ion-fab-button](https://github.com/ionic-team/ionic/tree/master/core/src/components/fab-button)
-- [ion-item-option](https://github.com/ionic-team/ionic/tree/master/core/src/components/item-option)
-- [ion-item](https://github.com/ionic-team/ionic/tree/master/core/src/components/item)
+- [ion-button](https://github.com/ionic-team/ionic/tree/main/core/src/components/button)
+- [ion-card](https://github.com/ionic-team/ionic/tree/main/core/src/components/card)
+- [ion-fab-button](https://github.com/ionic-team/ionic/tree/main/core/src/components/fab-button)
+- [ion-item-option](https://github.com/ionic-team/ionic/tree/main/core/src/components/item-option)
+- [ion-item](https://github.com/ionic-team/ionic/tree/main/core/src/components/item)
 
 ### Component Structure
 

.github/CONTRIBUTING.md

@@ -15,6 +15,12 @@ Thanks for your interest in contributing to the Ionic Framework! :tada:
     + [Modifying Tests](#modifying-tests)
       - [Screenshot Tests](#screenshot-tests)
     + [Building Changes](#building-changes)
+  * [Angular, React, and Vue](#angular-react-and-vue)
+    + [Modifying Files](#modifying-files)
+    + [Preview Changes](#preview-changes-1)
+    + [Lint Changes](#lint-changes-1)
+    + [Modifying Tests](#modifying-tests-1)
+    + [Building Changes](#building-changes-1)
   * [Submit Pull Request](#submit-pull-request)
 - [Commit Message Guidelines](#commit-message-guidelines)
   * [Commit Message Format](#commit-message-format)
@@ -30,7 +36,7 @@ Thanks for your interest in contributing to the Ionic Framework! :tada:
 
 ## Contributing Etiquette
 
-Please see our [Contributor Code of Conduct](https://github.com/ionic-team/ionic/blob/master/CODE_OF_CONDUCT.md) for information on our rules of conduct.
+Please see our [Contributor Code of Conduct](https://github.com/ionic-team/ionic/blob/main/CODE_OF_CONDUCT.md) for information on our rules of conduct.
 
 
 ## Creating an Issue
@@ -87,7 +93,7 @@ Without a reliable code reproduction, it is unlikely we will be able to resolve
 1. [Download the installer](https://nodejs.org/) for the LTS version of Node.js. This is the best way to also [install npm](https://blog.npmjs.org/post/85484771375/how-to-install-npm#_=_).
 2. Fork this repository.
 3. Clone your fork.
-4. Create a new branch from master for your change.
+4. Create a new branch from main for your change.
 5. Navigate into the directory of the package you wish to modify (core, angular, etc.).
 6. Run `npm install` to install dependencies for this package.
 7. Follow the steps for the specific package below.
@@ -160,17 +166,67 @@ Without a reliable code reproduction, it is unlikely we will be able to resolve
 3. Make sure the build has finished before committing. If you made changes to the documentation, properties, methods, or anything else that requires an update to a generate file, this needs to be committed.
 4. After the changes have been pushed, publish the branch and [create a pull request](#creating-a-pull-request).
 
+### Angular, React, and Vue
+
+#### Modifying Files
+
+1. Locate the files inside the relevant root directory:
+  - Angular: `/angular/src`
+  - React: `/packages/react/src`
+  - Vue: `/packages/vue/src`
+2. Make your changes to the files. If the change is overly complex or out of the ordinary, add comments so we can understand the changes.
+3. Run lint on the directory and make sure there are no errors.
+4. Build the project.
+5. After the build is finished, commit the changes. Please follow the [commit message format](#commit-message-format) for every commit.
+6. [Submit a Pull Request](#submit-pull-request) of your changes.
+
+
+
+#### Preview Changes
+
+1. Run `npm run start` inside of the relevant test app directory. This will sync your previously built changes into a test Ionic app:
+  - Angular: `/angular/test-app`
+  - React: `/packages/react/test-app`
+  - Vue: `/packages/vue/test-app`
+2. In a browser, navigate to the page you wish to test.
+3. Alternatively, create a new page if you need to test something that is not already there.
+
+
+#### Lint Changes
+
+1. Run `npm run lint` to lint the TypeScript in the relevant directory:
+  - Angular: `/angular/src`
+  - React: `/packages/react/src`
+  - Vue: `/packages/vue/src`
+2. If there are lint errors, run `npm run lint.fix` to automatically fix any errors. Repeat step 1 to ensure the errors have been fixed, and manually fix them if not.
+
+#### Modifying Tests
+
+1. Locate the test to modify inside the relevant test app directory:
+  - Angular: `/angular/test-app/e2e/src`
+  - React: `/packages/react/test-app/cypress/integration`
+  - Vue: `/packages/vue/test-app/tests/e2e`
+2. If a test exists, modify the test by adding an example to reproduce the problem fixed or feature added.
+3. If a new test is needed, copy an existing test, rename it, and edit the content in the test file.
+4. Run `npm run test` to run your tests.
+
+#### Building Changes
+
+1. Once all changes have been made, run `npm run build` inside of the root directory. This will add your changes to any auto-generated files, if necessary.
+2. Review the changes and, if everything looks correct, [commit](#commit-message-format) the changes.
+3. Make sure the build has finished before committing. If you made changes to the documentation, properties, methods, or anything else that requires an update to a generate file, this needs to be committed.
+4. After the changes have been pushed, publish the branch and [create a pull request](#creating-a-pull-request).
 
 ### Submit Pull Request
 
-1. [Create a new pull request](https://github.com/ionic-team/ionic/compare) with the `master` branch as the `base`. You may need to click on `compare across forks` to find your changes.
+1. [Create a new pull request](https://github.com/ionic-team/ionic/compare) with the `main` branch as the `base`. You may need to click on `compare across forks` to find your changes.
 2. See the [Creating a pull request from a fork](https://help.github.com/articles/creating-a-pull-request-from-a-fork/) GitHub help article for more information.
 3. Please fill out the provided Pull Request template to the best of your ability and include any issues that are related.
 
 
 ## Commit Message Guidelines
 
-We have very precise rules over how our git commit messages should be formatted. This leads to readable messages that are easy to follow when looking through the project history. We also use the git commit messages to generate our [changelog](https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md). Our format closely resembles Angular's [commit message guidelines](https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit).
+We have very precise rules over how our git commit messages should be formatted. This leads to readable messages that are easy to follow when looking through the project history. We also use the git commit messages to generate our [changelog](https://github.com/ionic-team/ionic/blob/main/CHANGELOG.md). Our format closely resembles Angular's [commit message guidelines](https://github.com/angular/angular/blob/main/CONTRIBUTING.md#commit).
 
 ### Commit Message Format
 

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -4,7 +4,7 @@ title: 'bug: '
 body:
   - type: checkboxes
     attributes:
-      label: Prequisites
+      label: Prerequisites
       description: Please ensure you have completed all of the following.
       options:
         - label: I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -4,7 +4,7 @@ title: 'feat: '
 body:
   - type: checkboxes
     attributes:
-      label: Prequisites
+      label: Prerequisites
       description: Please ensure you have completed all of the following.
       options:
         - label: I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).

.github/PROCESS.md

@@ -60,7 +60,7 @@ If the issue is associated with Ionic Appflow the submitter should be told to us
 
 ### Support Questions
 
-If the issue is a support question, the submitter should be redirected to our [forum](https://forum.ionicframework.com) or [slack channel](https://ionicworldwide.herokuapp.com/). The issue should be closed and locked. Use the `ionitron: support` label to accomplish this.
+If the issue is a support question, the submitter should be redirected to our [forum](https://forum.ionicframework.com). The issue should be closed and locked. Use the `ionitron: support` label to accomplish this.
 
 ### Incomplete Template
 
@@ -95,81 +95,81 @@ Issues with this label are not automatically closed and locked, so we manually c
 
 We have two long-living branches:
 
-- `master`: completed features, bug fixes, refactors, chores
+- `main`: completed features, bug fixes, refactors, chores
 - `stable`: the latest release
 
 The overall flow:
 
-1. Feature, refactor, and bug fix branches are created from `master`
-1. When a feature, refactor, or fix is complete it is merged into `master`
-1. A release branch is created from `master`
-1. When the release branch is done it is merged into `master` and `stable`
+1. Feature, refactor, and bug fix branches are created from `main`
+1. When a feature, refactor, or fix is complete it is merged into `main`
+1. A release branch is created from `main`
+1. When the release branch is done it is merged into `main` and `stable`
 1. If an issue in `stable` is detected a hotfix branch is created from `stable`
-1. Once the hotfix is complete it is merged to both `master` and `stable`
-1. All branches should follow the syntax of `{type}-{details}` where `{type}` is the type of branch (`hotfix`, `release`, or one of the [commit types](https://github.com/ionic-team/ionic/blob/master/.github/CONTRIBUTING.md#commit-message-format)) and `{details}` is a few hyphen separated words explaining the branch
+1. Once the hotfix is complete it is merged to both `main` and `stable`
+1. All branches should follow the syntax of `{type}-{details}` where `{type}` is the type of branch (`hotfix`, `release`, or one of the [commit types](https://github.com/ionic-team/ionic/blob/main/.github/CONTRIBUTING.md#commit-message-format)) and `{details}` is a few hyphen separated words explaining the branch
 
-### Stable and Master Branches
+### Stable and Main Branches
 
 #### Stable Branch
 
 Branches created from `stable`:
 
-The following branch should be merged back to **both** `master` and `stable`:
+The following branch should be merged back to **both** `main` and `stable`:
 
 - A `hotfix` branch (e.g. `hotfix-missing-export`): a bug fix that is fixing a regression or issue with a published release
 
 A `hotfix` branch should be the **only** branch that is created from stable.
 
-#### Master Branch
+#### Main Branch
 
-Branches created from `master`:
+Branches created from `main`:
 
-The following branches should be merged back to `master` via a pull request:
+The following branches should be merged back to `main` via a pull request:
 
 1. A feature branch (e.g. `feat-desktop-support`): an addition to the API that is not a bug fix or regression fix
 1. A bug fix branch (e.g. `fix-tab-color`): a bug fix that is not fixing a regression or issue with a published release
-1. All other types listed in the [commit message types](https://github.com/ionic-team/ionic/blob/master/.github/CONTRIBUTING.md#commit-message-format): `docs`, `style`, `refactor`, `perf`, `test`, `chore`
+1. All other types listed in the [commit message types](https://github.com/ionic-team/ionic/blob/main/.github/CONTRIBUTING.md#commit-message-format): `docs`, `style`, `refactor`, `perf`, `test`, `chore`
 
-The following branch should be merged back to **both** `master` and `stable`:
+The following branch should be merged back to **both** `main` and `stable`:
 
 1. A `release` branch (e.g. `release-4.1.x`): contains all fixes and (optionally) features that are tested and should go into the release
 
 
 ### Feature Branches
 
-Each new feature should reside in its own branch, based on the `master` branch. When a feature is complete, it should go into a pull request that gets merged back into `master`. A pull request adding a feature should be approved by two team members. Features should never interact directly with `stable`.
+Each new feature should reside in its own branch, based on the `main` branch. When a feature is complete, it should go into a pull request that gets merged back into `main`. A pull request adding a feature should be approved by two team members. Features should never interact directly with `stable`.
 
 
 ### Release Branches
 
-Once `master` has acquired enough features for a release (or a predetermined release date is approaching), fork a release branch off of `master`. Creating this branch starts the next release cycle, so no new features can be added after this point - only bug fixes, documentation generation, and other release-oriented tasks should go in this branch.
+Once `main` has acquired enough features for a release (or a predetermined release date is approaching), fork a release branch off of `main`. Creating this branch starts the next release cycle, so no new features can be added after this point - only bug fixes, documentation generation, and other release-oriented tasks should go in this branch.
 
-Once the release is ready to ship, it will get merged into `stable` and `master`, then the release branch will be deleted. It’s important to merge back into `master` because critical updates may have been added to the release branch and they need to be accessible to new features. This should be done in a pull request after review.
+Once the release is ready to ship, it will get merged into `stable` and `main`, then the release branch will be deleted. It’s important to merge back into `main` because critical updates may have been added to the release branch and they need to be accessible to new features. This should be done in a pull request after review.
 
 See the [steps for releasing](#releasing) below for detailed information on how to publish a release.
 
 ### Version Branches
 
-Once a release has shipped and the release branch has been merged into `stable` and `master` it should also be merged into its corresponding version branch. These version branches allow us to ship updates for specific versions of the framework (i.e. Lets us ship a bug fix that only affects 4.2.x).
+Once a release has shipped and the release branch has been merged into `stable` and `main` it should also be merged into its corresponding version branch. These version branches allow us to ship updates for specific versions of the framework (i.e. Lets us ship a bug fix that only affects 4.2.x).
 
 Patch releases should be merged into their corresponding version branches. For example, a `release-4.1.1` branch should be merged into the `4.1.x` version branch and a `release-5.0.1` branch should be merged into the `5.0.x` version branch.
 
-When releasing a major version such as `5.0.0 ` or a minor version such as `4.1.0` , the version branch will not exist. The version branch should be created once the release branch has been merged into `stable` and `master`. For example, when releasing `4.1.0`, the `release-4.1.0` release branch should be merged into `stable` and `master` and then the `4.1.x` version branch should be created off the latest `stable`.
+When releasing a major version such as `5.0.0 ` or a minor version such as `4.1.0` , the version branch will not exist. The version branch should be created once the release branch has been merged into `stable` and `main`. For example, when releasing `4.1.0`, the `release-4.1.0` release branch should be merged into `stable` and `main` and then the `4.1.x` version branch should be created off the latest `stable`.
 
 
 ### Hotfix Branches
 
-Maintenance or “hotfix” branches are used to quickly patch production releases. This is the only branch that should fork directly off of `stable`. As soon as the fix is complete, it should be merged into both `stable` and `master` (or the current release branch).
+Maintenance or “hotfix” branches are used to quickly patch production releases. This is the only branch that should fork directly off of `stable`. As soon as the fix is complete, it should be merged into both `stable` and `main` (or the current release branch).
 
 
 ### Examples
 
 #### Making a Change
 
-1. Create a branch from `master`.
+1. Create a branch from `main`.
 1. Make changes. Limit your changes to a "unit of work", meaning don't include irrelevant changes that may confuse and delay the change.
 1. Push changes.
-1. Create a PR with the base of `master`.
+1. Create a PR with the base of `main`.
 1. Have someone approve your change (optional right now--at your discretion).
 
     <img width="236" alt="image" src="https://user-images.githubusercontent.com/236501/47031893-913e0480-d136-11e8-9d9a-4b6297a4d7ba.png">
@@ -182,13 +182,13 @@ Maintenance or “hotfix” branches are used to quickly patch production releas
 
     <img width="192" alt="Squash and merge button" src="https://user-images.githubusercontent.com/236501/47031620-da418900-d135-11e8-91ff-e84f2478b2b3.png">
 
-1. During confirmation, rewrite the commit message using our [Commit Message Format guidelines](https://github.com/ionic-team/ionic/blob/master/.github/CONTRIBUTING.md#commit-message-format). Keep the `(#1234)` at the end; it will create a link to the PR in the commit history and `CHANGELOG.md`. This is where commits on `master` become permanent.
+1. During confirmation, rewrite the commit message using our [Commit Message Format guidelines](https://github.com/ionic-team/ionic/blob/main/.github/CONTRIBUTING.md#commit-message-format). Keep the `(#1234)` at the end; it will create a link to the PR in the commit history and `CHANGELOG.md`. This is where commits on `main` become permanent.
 
     <img width="672" alt="Squash and merge confirmation" src="https://user-images.githubusercontent.com/236501/47031753-31dff480-d136-11e8-9116-03934961bdc2.png">
 
-1. Confirm squash and merge into `master`.
+1. Confirm squash and merge into `main`.
 
-#### Updating from `master`
+#### Updating from `main`
 
 1. Pull the latest changes locally.
 1. Merge the changes, fixing any conflicts.
@@ -204,7 +204,7 @@ OR
 
 #### Hotfixes
 
-Hotfixes bypass `master` and should only be used for urgent fixes that can't wait for the next release to be ready.
+Hotfixes bypass `main` and should only be used for urgent fixes that can't wait for the next release to be ready.
 
 1. Create a branch from `stable`.
 1. Make changes.
@@ -215,13 +215,13 @@ Hotfixes bypass `master` and should only be used for urgent fixes that can't wai
 
     <img width="192" alt="Squash and merge button" src="https://user-images.githubusercontent.com/236501/47031620-da418900-d135-11e8-91ff-e84f2478b2b3.png">
 
-1. During confirmation, rewrite the commit message using our [Commit Message Format guidelines](https://github.com/ionic-team/ionic/blob/master/.github/CONTRIBUTING.md#commit-message-format). Keep the `(#1234)` at the end; it will create a link to the PR in the commit history and `CHANGELOG.md`. This is where commits on `master` become permanent.
+1. During confirmation, rewrite the commit message using our [Commit Message Format guidelines](https://github.com/ionic-team/ionic/blob/main/.github/CONTRIBUTING.md#commit-message-format). Keep the `(#1234)` at the end; it will create a link to the PR in the commit history and `CHANGELOG.md`. This is where commits on `main` become permanent.
 
     <img width="672" alt="Squash and merge confirmation" src="https://user-images.githubusercontent.com/236501/47031753-31dff480-d136-11e8-9116-03934961bdc2.png">
 
 1. Confirm squash and merge into `stable`.
 1. CI builds `stable`, performing the release.
-1. Create a PR to merge `stable` into `master`.
+1. Create a PR to merge `stable` into `main`.
 1. Click **Merge pull request**. Use the dropdown to select this option if necessary.
 
     <img width="191" alt="Merge pull request button" src="https://user-images.githubusercontent.com/236501/47032669-8be1b980-d138-11e8-9a90-d1518c223184.png">
@@ -229,7 +229,7 @@ Hotfixes bypass `master` and should only be used for urgent fixes that can't wai
 
 ## Releasing
 
-1. Create the release branch from `master`, for example: `release-4.5.0`.
+1. Create the release branch from `main`, for example: `release-4.5.0`.
 
 1. For major or minor releases, create a version branch based off the latest version branch. For example, if releasing 4.5.0, create a branch called `4.5.x` based off `4.4.x`.
 
@@ -244,7 +244,7 @@ Hotfixes bypass `master` and should only be used for urgent fixes that can't wai
 1. Run `npm run release.prepare`
     - Select the version based on the type of commits and the [Ionic Versioning](https://ionicframework.com/docs/intro/versioning)
     - After the process completes, verify the version number in all packages (`core`, `docs`, `angular`)
-    - Verify the changelog commits are accurate and follow the [proper format]((https://github.com/ionic-team/ionic/blob/master/.github/CONTRIBUTING.md#commit-message-format))
+    - Verify the changelog commits are accurate and follow the [proper format]((https://github.com/ionic-team/ionic/blob/main/.github/CONTRIBUTING.md#commit-message-format))
     - For major or minor releases, ensure that the version number has an associated title (for example: `4.5.0 Boron`)
     - Commit these changes with the version number as the message, e.g. `git commit -m "4.5.0"`
 
@@ -258,4 +258,4 @@ Hotfixes bypass `master` and should only be used for urgent fixes that can't wai
 
 1. Rewrite the commit message to `merge release-[VERSION]` with the proper release branch. For example, if this release is for `4.5.0`, the message would be `merge release-4.5.0`.
 
-1. Submit a pull request from the release branch into `master`. Merge this pull request using the same commit format in the last step, to ensure any changes made on the release branch get added to future releases.
+1. Submit a pull request from the release branch into `main`. Merge this pull request using the same commit format in the last step, to ensure any changes made on the release branch get added to future releases.

.github/ionic-issue-bot.yml

@@ -41,8 +41,7 @@ closeAndLock:
     - label: "ionitron: support"
       message: >
         Thanks for the issue! This issue appears to be a support request. We use this issue tracker exclusively for
-        bug reports and feature requests. Please use our [forum](https://forum.ionicframework.com) or our
-        [slack channel](https://ionicworldwide.herokuapp.com/) for questions about the framework.
+        bug reports and feature requests. Please use our [forum](https://forum.ionicframework.com) for questions about the framework.
 
 
         Thank you for using Ionic!

.github/workflows/actions/build-angular-server/action.yml

@@ -0,0 +1,22 @@
+name: 'Build Ionic Angular Server'
+description: 'Build Ionic Angular Server'
+runs:
+  using: 'composite'
+  steps:
+    - uses: actions/setup-node@v1
+      with:
+        node-version: 15.x
+
+    - name: Install Angular Server Dependencies
+      run: npm install --legacy-peer-deps
+      shell: bash
+      working-directory: ./packages/angular-server
+    - name: Build
+      run: npm run build.prod
+      shell: bash
+      working-directory: ./packages/angular-server
+    - uses: ./.github/workflows/actions/upload-archive
+      with:
+        name: ionic-angular-server
+        output: packages/angular-server/AngularServerBuild.zip
+        paths: packages/angular-server/dist

.github/workflows/actions/build-angular/action.yml

@@ -0,0 +1,53 @@
+name: 'Build Ionic Angular'
+description: 'Build Ionic Angular'
+runs:
+  using: 'composite'
+  steps:
+    - uses: actions/setup-node@v1
+      with:
+        node-version: 15.x
+
+    - name: Cache Core Node Modules
+      uses: actions/cache@v2
+      env:
+        cache-name: core-node-modules
+      with:
+        path: ./core/node_modules
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json')}}-v1
+    - name: Cache Angular Node Modules
+      uses: actions/cache@v2
+      env:
+        cache-name: angular-node-modules
+      with:
+        path: ./angular/node_modules
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./angular/package-lock.json')}}-v1
+    - uses: ./.github/workflows/actions/download-archive
+      with:
+        name: ionic-core
+        path: ./core
+        filename: CoreBuild.zip
+    - name: Install Angular Dependencies
+      run: npm install
+      shell: bash
+      working-directory: ./angular
+    - name: Link @ionic/core
+      run: npm link
+      shell: bash
+      working-directory: ./core
+    - name: Link @ionic/core in @ionic/angular
+      run: npm link @ionic/core
+      shell: bash
+      working-directory: ./angular
+    - name: Lint
+      run: npm run lint
+      shell: bash
+      working-directory: ./angular
+    - name: Build
+      run: npm run build
+      shell: bash
+      working-directory: ./angular
+    - uses: ./.github/workflows/actions/upload-archive
+      with:
+        name: ionic-angular
+        output: ./angular/AngularBuild.zip
+        paths: ./angular/dist

.github/workflows/actions/build-core/action.yml

@@ -0,0 +1,30 @@
+name: 'Build Ionic Core'
+description: 'Build Ionic Core'
+runs:
+  using: 'composite'
+  steps:
+    - uses: actions/checkout@v2
+    - uses: actions/setup-node@v1
+      with:
+        node-version: 15.x
+
+    - name: Cache Node Modules
+      uses: actions/cache@v2
+      env:
+        cache-name: core-node-modules
+      with:
+        path: ./core/node_modules
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json') }}-v1
+    - name: Install Dependencies
+      run: npm install
+      working-directory: ./core
+      shell: bash
+    - name: Build Core
+      run: npm run build -- --ci
+      working-directory: ./core
+      shell: bash
+    - uses: ./.github/workflows/actions/upload-archive
+      with:
+        name: ionic-core
+        output: core/CoreBuild.zip
+        paths: core/dist core/components core/css core/hydrate core/loader

.github/workflows/actions/build-react-router/action.yml

@@ -0,0 +1,51 @@
+name: 'Build Ionic React Router'
+description: 'Build Ionic React Router'
+runs:
+  using: 'composite'
+  steps:
+    - uses: actions/setup-node@v1
+      with:
+        node-version: 15.x
+
+    - name: Cache Core Node Modules
+      uses: actions/cache@v2
+      env:
+        cache-name: core-node-modules
+      with:
+        path: ./core/node_modules
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json') }}-v1
+    - uses: ./.github/workflows/actions/download-archive
+      with:
+        name: ionic-core
+        path: ./core
+        filename: CoreBuild.zip
+    - uses: ./.github/workflows/actions/download-archive
+      with:
+        name: ionic-react
+        path: ./packages/react
+        filename: ReactBuild.zip
+    - name: Install Dependencies
+      run: npm install --legacy-peer-deps
+      shell: bash
+      working-directory: ./packages/react-router
+    - name: Sync
+      run: npm run sync
+      shell: bash
+      working-directory: ./packages/react-router
+    - name: Lint
+      run: npm run lint
+      shell: bash
+      working-directory: ./packages/react-router
+    - name: Build
+      run: npm run build
+      shell: bash
+      working-directory: ./packages/react-router
+    - name: Test Spec
+      run: npm run test.spec
+      shell: bash
+      working-directory: ./packages/react-router
+    - uses: ./.github/workflows/actions/upload-archive
+      with:
+        name: ionic-react-router
+        output: packages/react-router/ReactRouterBuild.zip
+        paths: packages/react-router/dist

.github/workflows/actions/build-react/action.yml

@@ -0,0 +1,46 @@
+name: 'Build Ionic React'
+description: 'Build Ionic React'
+runs:
+  using: 'composite'
+  steps:
+    - uses: actions/setup-node@v1
+      with:
+        node-version: 15.x
+
+    - name: Cache Core Node Modules
+      uses: actions/cache@v2
+      env:
+        cache-name: core-node-modules
+      with:
+        path: ./core/node_modules
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json') }}-v1
+    - uses: ./.github/workflows/actions/download-archive
+      with:
+        name: ionic-core
+        path: ./core
+        filename: CoreBuild.zip
+    - name: Install React Dependencies
+      run: npm install --legacy-peer-deps
+      shell: bash
+      working-directory: ./packages/react
+    - name: Sync
+      run: npm run sync
+      shell: bash
+      working-directory: ./packages/react
+    - name: Lint
+      run: npm run lint
+      shell: bash
+      working-directory: ./packages/react
+    - name: Build
+      run: npm run build
+      shell: bash
+      working-directory: ./packages/react
+    - name: Test Spec
+      run: npm run test.spec
+      shell: bash
+      working-directory: ./packages/react
+    - uses: ./.github/workflows/actions/upload-archive
+      with:
+        name: ionic-react
+        output: packages/react/ReactBuild.zip
+        paths: packages/react/dist packages/react/css

.github/workflows/actions/build-vue-router/action.yml

@@ -0,0 +1,51 @@
+name: 'Build Ionic Vue Router'
+description: 'Builds Ionic Vue Router'
+runs:
+  using: 'composite'
+  steps:
+    - uses: actions/setup-node@v1
+      with:
+        node-version: 15.x
+
+    - name: Cache Core Node Modules
+      uses: actions/cache@v2
+      env:
+        cache-name: core-node-modules
+      with:
+        path: ./core/node_modules
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json') }}-v1
+    - uses: ./.github/workflows/actions/download-archive
+      with:
+        name: ionic-core
+        path: ./core
+        filename: CoreBuild.zip
+    - uses: ./.github/workflows/actions/download-archive
+      with:
+        name: ionic-vue
+        path: ./packages/vue
+        filename: VueBuild.zip
+    - name: Install Vue Router Dependencies
+      run: npm install
+      shell: bash
+      working-directory: ./packages/vue-router
+    - name: Sync
+      run: npm run sync
+      shell: bash
+      working-directory: ./packages/vue-router
+    - name: Lint
+      run: npm run lint
+      shell: bash
+      working-directory: ./packages/vue-router
+    - name: Build
+      run: npm run build
+      shell: bash
+      working-directory: ./packages/vue-router
+    - name: Test Spec
+      run: npm run test.spec
+      shell: bash
+      working-directory: ./packages/vue-router
+    - uses: ./.github/workflows/actions/upload-archive
+      with:
+        name: ionic-vue-router
+        output: ./packages/vue-router/VueRouterBuild.zip
+        paths: packages/vue-router/dist

.github/workflows/actions/build-vue/action.yml

@@ -0,0 +1,42 @@
+name: 'Build Ionic Vue'
+description: 'Build Ionic Vue'
+runs:
+  using: 'composite'
+  steps:
+    - uses: actions/setup-node@v1
+      with:
+        node-version: 15.x
+
+    - name: Cache Core Node Modules
+      uses: actions/cache@v2
+      env:
+        cache-name: core-node-modules
+      with:
+        path: ./core/node_modules
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json') }}-v1
+    - uses: ./.github/workflows/actions/download-archive
+      with:
+        name: ionic-core
+        path: ./core
+        filename: CoreBuild.zip
+    - name: Install Vue Dependencies
+      run: npm install
+      shell: bash
+      working-directory: ./packages/vue
+    - name: Sync
+      run: npm run sync
+      shell: bash
+      working-directory: ./packages/vue
+    - name: Lint
+      run: npm run lint
+      shell: bash
+      working-directory: ./packages/vue
+    - name: Build
+      run: npm run build
+      shell: bash
+      working-directory: ./packages/vue
+    - uses: ./.github/workflows/actions/upload-archive
+      with:
+        name: ionic-vue
+        output: packages/vue/VueBuild.zip
+        paths: packages/vue/dist packages/vue/css

.github/workflows/actions/download-archive/action.yml

@@ -0,0 +1,19 @@
+name: 'Ionic Framework Archive Download'
+description: 'Downloads and decompresses an archive from a previous job'
+inputs:
+  path:
+    description: 'Input archive name'
+  filename:
+    description: 'Input file name'
+  name:
+    description: 'Archive name'
+runs:
+  using: 'composite'
+  steps:
+    - uses: actions/download-artifact@v2
+      with:
+        name: ${{ inputs.name }}
+        path: ${{ inputs.path }}
+    - name: Exract Archive
+      run: unzip -q -o ${{ inputs.path }}/${{ inputs.filename }}
+      shell: bash

.github/workflows/actions/test-angular-e2e/action.yml

@@ -0,0 +1,39 @@
+name: 'Test Angular E2E'
+description: 'Test Angular E2E'
+runs:
+  using: 'composite'
+  steps:
+    - uses: actions/setup-node@v1
+      with:
+        node-version: 15.x
+
+    - name: Cache Core Node Modules
+      uses: actions/cache@v2
+      env:
+        cache-name: core-node-modules
+      with:
+        path: ./core/node_modules
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json') }}-v1
+    - uses: ./.github/workflows/actions/download-archive
+      with:
+        name: ionic-core
+        path: ./core
+        filename: CoreBuild.zip
+    - uses: ./.github/workflows/actions/download-archive
+      with:
+        name: ionic-angular
+        path: ./angular
+        filename: AngularBuild.zip
+    - uses: ./.github/workflows/actions/download-archive
+      with:
+        name: ionic-angular-server
+        path: ./packages/angular-server
+        filename: AngularServerBuild.zip
+    - name: Install Dependencies
+      run: npm install --legacy-peer-deps
+      shell: bash
+      working-directory: ./angular/test/test-app
+    - name: Run Tests
+      run: npm run test
+      shell: bash
+      working-directory: ./angular/test/test-app

.github/workflows/actions/test-core-clean-build/action.yml

@@ -0,0 +1,18 @@
+name: 'Test Core Clean Build'
+description: 'Test Core Clean Build'
+runs:
+  using: 'composite'
+  steps:
+    - uses: actions/setup-node@v1
+      with:
+        node-version: 15.x
+
+    - uses: ./.github/workflows/actions/download-archive
+      with:
+        name: ionic-core
+        path: ./core
+        filename: CoreBuild.zip
+    - name: Check Diff
+      run: git diff --exit-code
+      shell: bash
+      working-directory: ./core

.github/workflows/actions/test-core-e2e/action.yml

@@ -0,0 +1,25 @@
+name: 'Test Core E2E'
+description: 'Test Core E2E'
+runs:
+  using: 'composite'
+  steps:
+    - uses: actions/setup-node@v1
+      with:
+        node-version: 15.x
+
+    - name: Cache Core Node Modules
+      uses: actions/cache@v2
+      env:
+        cache-name: core-node-modules
+      with:
+        path: ./core/node_modules
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json') }}-v1
+    - uses: ./.github/workflows/actions/download-archive
+      with:
+        name: ionic-core
+        path: ./core
+        filename: CoreBuild.zip
+    - name: Test
+      run: npm run test.e2e -- --ci --no-build
+      shell: bash
+      working-directory: ./core

.github/workflows/actions/test-core-lint/action.yml

@@ -0,0 +1,20 @@
+name: 'Test Core Lint'
+description: 'Test Core Lint'
+runs:
+  using: 'composite'
+  steps:
+    - uses: actions/setup-node@v1
+      with:
+        node-version: 15.x
+
+    - name: Cache Core Node Modules
+      uses: actions/cache@v2
+      env:
+        cache-name: core-node-modules
+      with:
+        path: ./core/node_modules
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json') }}-v1
+    - name: Lint
+      run: npm run lint
+      shell: bash
+      working-directory: ./core

.github/workflows/actions/test-core-screenshot-main/action.yml

@@ -0,0 +1,33 @@
+name: 'Test Core Screenshot Main'
+description: 'Test Core Screenshot Main'
+inputs:
+  access-key-id:
+    description: 'AWS_ACCESS_KEY_ID'
+  secret-access-key:
+    description: 'AWS_SECRET_ACCESS_KEY'
+runs:
+  using: 'composite'
+  steps:
+    - uses: actions/setup-node@v1
+      with:
+        node-version: 15.x
+
+    - name: Cache Core Node Modules
+      uses: actions/cache@v2
+      env:
+        cache-name: core-node-modules
+      with:
+        path: ./core/node_modules
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json') }}-v1
+    - uses: ./.github/workflows/actions/download-archive
+      with:
+        name: ionic-core
+        path: ./core
+        filename: CoreBuild.zip
+    - name: Test
+      run: npx stencil test --e2e --screenshot --screenshot-connector=scripts/screenshot/ci.js --ci --update-screenshot --no-build || true
+      shell: bash
+      env:
+        AWS_ACCESS_KEY_ID: ${{ inputs.access-key-id }}
+        AWS_SECRET_ACCESS_KEY: ${{ inputs.secret-access-key }}
+      working-directory: ./core

.github/workflows/actions/test-core-screenshot/action.yml

@@ -0,0 +1,33 @@
+name: 'Test Core Screenshot'
+description: 'Test Core Screenshot'
+inputs:
+  access-key-id:
+    description: 'AWS_ACCESS_KEY_ID'
+  secret-access-key:
+    description: 'AWS_SECRET_ACCESS_KEY'
+runs:
+  using: 'composite'
+  steps:
+    - uses: actions/setup-node@v1
+      with:
+        node-version: 15.x
+
+    - name: Cache Core Node Modules
+      uses: actions/cache@v2
+      env:
+        cache-name: core-node-modules
+      with:
+        path: ./core/node_modules
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json') }}-v1
+    - uses: ./.github/workflows/actions/download-archive
+      with:
+        name: ionic-core
+        path: ./core
+        filename: CoreBuild.zip
+    - name: Test
+      run: npx stencil test --e2e --screenshot --screenshot-connector=scripts/screenshot/ci.js --ci --no-build || true
+      shell: bash
+      env:
+        AWS_ACCESS_KEY_ID: ${{ inputs.access-key-id }}
+        AWS_SECRET_ACCESS_KEY: ${{ inputs.secret-access-key }}
+      working-directory: ./core

.github/workflows/actions/test-core-spec/action.yml

@@ -0,0 +1,25 @@
+name: 'Test Core Spec'
+description: 'Test Core Spec'
+runs:
+  using: 'composite'
+  steps:
+    - uses: actions/setup-node@v1
+      with:
+        node-version: 15.x
+
+    - name: Cache Core Node Modules
+      uses: actions/cache@v2
+      env:
+        cache-name: core-node-modules
+      with:
+        path: ./core/node_modules
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json') }}-v1
+    - uses: ./.github/workflows/actions/download-archive
+      with:
+        name: ionic-core
+        path: ./core
+        filename: CoreBuild.zip
+    - name: Test
+      run: npm run test.spec -- --ci
+      shell: bash
+      working-directory: ./core

.github/workflows/actions/test-react-e2e/action.yml

@@ -0,0 +1,37 @@
+name: 'Test React E2E'
+description: 'Test React E2E'
+runs:
+  using: 'composite'
+  steps:
+    - uses: actions/setup-node@v1
+      with:
+        node-version: 15.x
+
+    - name: Cache Core Node Modules
+      uses: actions/cache@v2
+      env:
+        cache-name: core-node-modules
+      with:
+        path: ./core/node_modules
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json') }}-v1
+    - uses: ./.github/workflows/actions/download-archive
+      with:
+        name: ionic-core
+        path: ./core
+        filename: CoreBuild.zip
+    - uses: ./.github/workflows/actions/download-archive
+      with:
+        name: ionic-react
+        path: ./packages/react
+        filename: ReactBuild.zip
+    - uses: ./.github/workflows/actions/download-archive
+      with:
+        name: ionic-react-router
+        path: ./packages/react-router
+        filename: ReactRouterBuild.zip
+    - uses: cypress-io/github-action@v2
+      with:
+        browser: chrome
+        headless: true
+        start: npm run start.ci
+        working-directory: ./packages/react/test-app

.github/workflows/actions/test-react-router-e2e/action.yml

@@ -0,0 +1,37 @@
+name: 'Test React Router E2E'
+description: 'Test React Router '
+runs:
+  using: 'composite'
+  steps:
+    - uses: actions/setup-node@v1
+      with:
+        node-version: 15.x
+
+    - name: Cache Core Node Modules
+      uses: actions/cache@v2
+      env:
+        cache-name: core-node-modules
+      with:
+        path: ./core/node_modules
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json') }}-v1
+    - uses: ./.github/workflows/actions/download-archive
+      with:
+        name: ionic-core
+        path: ./core
+        filename: CoreBuild.zip
+    - uses: ./.github/workflows/actions/download-archive
+      with:
+        name: ionic-react
+        path: ./packages/react
+        filename: ReactBuild.zip
+    - uses: ./.github/workflows/actions/download-archive
+      with:
+        name: ionic-react-router
+        path: ./packages/react-router
+        filename: ReactRouterBuild.zip
+    - uses: cypress-io/github-action@v2
+      with:
+        browser: chrome
+        headless: true
+        start: npm run start.ci
+        working-directory: ./packages/react-router/test-app

.github/workflows/actions/test-vue-e2e/action.yml

@@ -0,0 +1,47 @@
+name: 'Test Vue E2E'
+description: 'Test Vue E2E'
+runs:
+  using: 'composite'
+  steps:
+    - uses: actions/setup-node@v1
+      with:
+        node-version: 15.x
+
+    - name: Cache Core Node Modules
+      uses: actions/cache@v2
+      env:
+        cache-name: core-node-modules
+      with:
+        path: ./core/node_modules
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json') }}-v1
+    - uses: ./.github/workflows/actions/download-archive
+      with:
+        name: ionic-core
+        path: ./core
+        filename: CoreBuild.zip
+    - uses: ./.github/workflows/actions/download-archive
+      with:
+        name: ionic-vue
+        path: ./packages/vue
+        filename: VueBuild.zip
+    - uses: ./.github/workflows/actions/download-archive
+      with:
+        name: ionic-vue-router
+        path: ./packages/vue-router
+        filename: VueRouterBuild.zip
+    - name: Install Dependencies
+      run: npm install
+      shell: bash
+      working-directory: ./packages/vue/test-app
+    - name: Sync
+      run: npm run sync
+      shell: bash
+      working-directory: ./packages/vue/test-app
+    - name: Run Spec Tests
+      run: npm run test:unit
+      shell: bash
+      working-directory: ./packages/vue/test-app
+    - name: Run E2E Tests
+      run: npm run test:e2e
+      shell: bash
+      working-directory: ./packages/vue/test-app

.github/workflows/actions/upload-archive/action.yml

@@ -0,0 +1,19 @@
+name: 'Ionic Framework Archive Upload'
+description: 'Compresses and uploads an archive to be reused across jobs'
+inputs:
+  paths:
+    description: 'Paths to files or directories to archive'
+  output:
+    description: 'Output file name'
+  name:
+    description: 'Archive name'
+runs:
+  using: 'composite'
+  steps:
+    - name: Create Archive
+      run: zip -q -r ${{ inputs.output }} ${{ inputs.paths }}
+      shell: bash
+    - uses: actions/upload-artifact@v2
+      with:
+        name: ${{ inputs.name }}
+        path: ${{ inputs.output }}

.github/workflows/build.yml

@@ -0,0 +1,132 @@
+name: 'Ionic Framework Build'
+
+on:
+  pull_request:
+    branches: [ '**' ]
+
+jobs:
+  build-core:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: ./.github/workflows/actions/build-core
+
+  test-core-clean-build:
+    needs: [build-core]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: ./.github/workflows/actions/test-core-clean-build
+
+  test-core-lint:
+    needs: [build-core]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: ./.github/workflows/actions/test-core-lint
+
+  test-core-spec:
+    needs: [build-core]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: ./.github/workflows/actions/test-core-spec
+
+  test-core-e2e:
+    needs: [build-core]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: ./.github/workflows/actions/test-core-e2e
+
+  test-core-screenshot:
+    needs: [build-core]
+    runs-on: ubuntu-latest
+    if: github.ref != 'refs/heads/main' && !github.event.pull_request.head.repo.fork
+    steps:
+      - uses: actions/checkout@v2
+      - uses: ./.github/workflows/actions/test-core-screenshot
+        with:
+          access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+
+  test-core-screenshot-main:
+    needs: [build-core]
+    runs-on: ubuntu-latest
+    if: github.ref == 'refs/heads/main'
+    steps:
+      - uses: actions/checkout@v2
+      - uses: ./.github/workflows/actions/test-core-screenshot-main
+        with:
+          access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+
+  build-vue:
+    needs: [build-core]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - uses: ./.github/workflows/actions/build-vue
+
+  build-vue-router:
+    needs: [build-vue]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - uses: ./.github/workflows/actions/build-vue-router
+
+  test-vue-e2e:
+    needs: [build-vue, build-vue-router]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - uses: ./.github/workflows/actions/test-vue-e2e
+
+  build-angular:
+    needs: [build-core]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - uses: ./.github/workflows/actions/build-angular
+
+  build-angular-server:
+    needs: [build-angular]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - uses: ./.github/workflows/actions/build-angular-server
+
+  test-angular-e2e:
+    needs: [build-angular, build-angular-server]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - uses: ./.github/workflows/actions/test-angular-e2e
+
+  build-react:
+    needs: [build-core]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - uses: ./.github/workflows/actions/build-react
+
+  build-react-router:
+    needs: [build-react]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - uses: ./.github/workflows/actions/build-react-router
+
+  test-react-router-e2e:
+    needs: [build-react, build-react-router]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - uses: ./.github/workflows/actions/test-react-router-e2e
+
+  test-react-e2e:
+    needs: [build-react, build-react-router]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - uses: ./.github/workflows/actions/test-react-e2e

.github/workflows/dev-build.yml

@@ -0,0 +1,18 @@
+name: 'Ionic Dev Build'
+
+on:
+  workflow_dispatch:
+
+jobs:
+  dev-build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 15.x
+      - name: Create Dev Build
+        run: npm run release.dev -- --skip-prompt
+        shell: bash
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.scripts/common.js

@@ -44,7 +44,7 @@ async function askNpmTag(version) {
       type: 'list',
       name: 'npmTag',
       message: 'Select npm tag or specify a new tag',
-      choices: ['latest', 'next', 'v4-lts']
+      choices: ['latest', 'next', 'v4-lts', 'v5-lts']
         .concat([
           new inquirer.Separator(),
           {

.scripts/release.js

@@ -127,7 +127,7 @@ async function publishGithub(version, gitTag, changelog, npmTag) {
   let branch = await execa.stdout('git', ['symbolic-ref', '--short', 'HEAD']);
 
   if (!branch) {
-    branch = 'master';
+    branch = 'main';
   }
 
   await octokit.repos.createRelease({

CHANGELOG.md

@@ -1,3 +1,142 @@
+## [5.9.4](https://github.com/ionic-team/ionic/compare/v5.9.3...v5.9.4) (2022-04-27)
+
+
+### Bug Fixes
+
+* **core:** inherit aria attributes on host elements ([#25156](https://github.com/ionic-team/ionic/issues/25156)) ([#25169](https://github.com/ionic-team/ionic/issues/25169)) ([ffb056d](https://github.com/ionic-team/ionic/commit/ffb056d50e126a1b89f5133de1e7516d0c29a61a))
+
+
+
+## [5.9.3](https://github.com/ionic-team/ionic/compare/v5.9.2...v5.9.3) (2021-12-15)
+
+
+### Bug Fixes
+
+* **vue:** improve query params handling in tabs ([#24355](https://github.com/ionic-team/ionic/issues/24355)) ([1c28750](https://github.com/ionic-team/ionic/commit/1c2875044ad4d93fdca866017159a89f4dc8872d)), closes [#24353](https://github.com/ionic-team/ionic/issues/24353)
+* **vue:** tabs no longer get unmounted when navigating back to a tabs context ([#24337](https://github.com/ionic-team/ionic/issues/24337)) ([4aab72b](https://github.com/ionic-team/ionic/commit/4aab72b06159729d2dcd18b2ef0b76f693e5a74e)), closes [#24332](https://github.com/ionic-team/ionic/issues/24332)
+
+
+### Performance Improvements
+
+* **content:** remove global click listener to improve interaction performance ([#24360](https://github.com/ionic-team/ionic/issues/24360)) ([9c9e28c](https://github.com/ionic-team/ionic/commit/9c9e28ccc9f899c403c757d911ac02d9099415af)), closes [#24359](https://github.com/ionic-team/ionic/issues/24359)
+
+
+
+## [5.9.2](https://github.com/ionic-team/ionic/compare/v5.9.1...v5.9.2) (2021-12-07)
+
+
+### Bug Fixes
+
+* **angular:** improve typing when compiling with legacy View Engine ([#24221](https://github.com/ionic-team/ionic/issues/24221)) ([816096f](https://github.com/ionic-team/ionic/commit/816096f89747e943a4a273175d384189f25e4628))
+* **content:** ensure fixed slot renders on top of content in iOS ([#24300](https://github.com/ionic-team/ionic/issues/24300)) ([e41b0e0](https://github.com/ionic-team/ionic/commit/e41b0e0cf2a794972d7f4d8943a0bec3d1e08016)), closes [#24286](https://github.com/ionic-team/ionic-framework/issues/24286)
+* **popover:** improve scrolling in popover when using header and footer ([#24294](https://github.com/ionic-team/ionic/issues/24294)) ([f6a00ea](https://github.com/ionic-team/ionic/commit/f6a00ea9544aa70620b5f8f65a7702fa3bedd974))
+* **react:** present and dismiss hooks return promises ([#24299](https://github.com/ionic-team/ionic/issues/24299)) ([4b26fea](https://github.com/ionic-team/ionic/commit/4b26feaa47efed4806aba565a52554db232b99e2)), closes [#24293](https://github.com/ionic-team/ionic-framework/issues/24293)
+* **react:** properly check for custom elements to avoid errors in unit tests ([#24156](https://github.com/ionic-team/ionic/issues/24156)) ([8f188ea](https://github.com/ionic-team/ionic/commit/8f188eaae7422c9e81053868b9dd93b4ac738e98)), closes [#24149](https://github.com/ionic-team/ionic/issues/24149)
+* **router:** popping route now accounts for route params ([#24315](https://github.com/ionic-team/ionic/issues/24315)) ([5e5054d](https://github.com/ionic-team/ionic/commit/5e5054d369ad68c9ac43e12439d71fb42d6ca26b)), closes [#24223](https://github.com/ionic-team/ionic-framework/issues/24223)
+* **slides:** update swiper instance after initialization ([#24257](https://github.com/ionic-team/ionic/issues/24257)) ([89e4bc5](https://github.com/ionic-team/ionic/commit/89e4bc56a1c3cd4fb26fc5514f38c6a01f047297)), closes [#19638](https://github.com/ionic-team/ionic-framework/issues/19638)
+* **vue:** ionic lifecycle hooks now run when using vue 3.2 setup syntax ([#24253](https://github.com/ionic-team/ionic/issues/24253)) ([fb96ab5](https://github.com/ionic-team/ionic/commit/fb96ab5a26d87818a8b64ee82df0020355054183)), closes [#23824](https://github.com/ionic-team/ionic/issues/23824)
+* **vue:** switching between tabs preserves query string ([#24297](https://github.com/ionic-team/ionic/issues/24297)) ([047d3c7](https://github.com/ionic-team/ionic/commit/047d3c77729db08e4fd84f426f6c5c2af0eacc52)), closes [#23699](https://github.com/ionic-team/ionic/issues/23699)
+
+
+
+## [5.9.1](https://github.com/ionic-team/ionic/compare/v5.9.0...v5.9.1) (2021-11-17)
+
+
+### Bug Fixes
+
+* **angular:** build is now in correct directory ([#24236](https://github.com/ionic-team/ionic/issues/24236)) ([1d983fa](https://github.com/ionic-team/ionic/commit/1d983fa4b3ef0457dc192f376e380c77b611d058))
+
+
+
+# [5.9.0](https://github.com/ionic-team/ionic/compare/v5.8.5...v5.9.0) (2021-11-17)
+
+
+### Bug Fixes
+
+* **action-sheet:** safe area is now accounted for in MD mode ([#24176](https://github.com/ionic-team/ionic/issues/24176)) ([642255e](https://github.com/ionic-team/ionic/commit/642255e514fd67238d9bd8ea90781111687c6d03)), closes [#24175](https://github.com/ionic-team/ionic/issues/24175)
+* **input:** date type in ion-input now aligns correctly on iOS 15 ([#24217](https://github.com/ionic-team/ionic/issues/24217)) ([0566ec0](https://github.com/ionic-team/ionic/commit/0566ec0da3b8a66a1a1ebb1b235e7297ec483c79))
+* **vue:** canGoBack method now works correctly ([#24188](https://github.com/ionic-team/ionic/issues/24188)) ([7c43589](https://github.com/ionic-team/ionic/commit/7c43589b0a486f71ee2ae5a4cdcd73071fcd31b9)), closes [#24109](https://github.com/ionic-team/ionic/issues/24109)
+
+
+### Features
+
+* **slides:** add support for Swiper 7 ([#24190](https://github.com/ionic-team/ionic/issues/24190)) ([d0b6130](https://github.com/ionic-team/ionic/commit/d0b61307c6b7ff1589646c43f989260b59db1473))
+
+
+
+## [5.8.5](https://github.com/ionic-team/ionic/compare/v5.8.4...v5.8.5) (2021-10-27)
+
+
+### Bug Fixes
+
+* **menu:** added focus trapping, improved compatibility with screen readers ([#24076](https://github.com/ionic-team/ionic/issues/24076)) ([bdb268a](https://github.com/ionic-team/ionic/commit/bdb268aa12c5bf411c96529672486d35e018cefa))
+* **vue:** back button now selects correct route when navigating from view multiple times ([#24060](https://github.com/ionic-team/ionic/issues/24060)) ([a09d7d4](https://github.com/ionic-team/ionic/commit/a09d7d4ab6dd0d90204015eaaf232ed190753c56)), closes [#23987](https://github.com/ionic-team/ionic/issues/23987)
+* **vue:** mount correct views when navigating ([#24056](https://github.com/ionic-team/ionic/issues/24056)) ([24659a5](https://github.com/ionic-team/ionic/commit/24659a527abe0c70df7e8ae6da3dcb4017bf500c)), closes [#23914](https://github.com/ionic-team/ionic/issues/23914)
+
+
+
+## [5.8.4](https://github.com/ionic-team/ionic/compare/v5.8.3...v5.8.4) (2021-10-11)
+
+
+### Bug Fixes
+
+* **angular:** setup config properly ([#24054](https://github.com/ionic-team/ionic/issues/24054)) ([e001f24](https://github.com/ionic-team/ionic/commit/e001f24f2ca99abbc98b923dd1a132cc83b3b23f)), closes [#24051](https://github.com/ionic-team/ionic/issues/24051) [#24052](https://github.com/ionic-team/ionic/issues/24052)
+* **back-button:** pass aria-label to native element ([#24027](https://github.com/ionic-team/ionic/issues/24027)) ([68a7e43](https://github.com/ionic-team/ionic/commit/68a7e43345a0261fdeed6054198c5a22fbbcb584))
+
+
+
+## [5.8.3](https://github.com/ionic-team/ionic/compare/v5.8.2...v5.8.3) (2021-10-07)
+
+
+### Bug Fixes
+
+* **react:** overlay hooks dismiss method now works ([#24038](https://github.com/ionic-team/ionic/issues/24038)) ([655631d](https://github.com/ionic-team/ionic/commit/655631ddf059ce58066d5384d0ae186d7abc09a9)), closes [#24030](https://github.com/ionic-team/ionic/issues/24030)
+
+
+
+## [5.8.2](https://github.com/ionic-team/ionic/compare/v5.8.1...v5.8.2) (2021-10-06)
+
+
+### Bug Fixes
+
+* **alert:** made it easier to tell if alert is scrollable in MD mode ([#23976](https://github.com/ionic-team/ionic/issues/23976)) ([a262753](https://github.com/ionic-team/ionic/commit/a26275378f10835343ad8a6cdea50303e6c10a14))
+* **angular:** use initialize function when setting up ionic angular to avoid config errors ([#24004](https://github.com/ionic-team/ionic/issues/24004)) ([f112ad4](https://github.com/ionic-team/ionic/commit/f112ad4490dc4a179dc3feab495530e14e655e5a)), closes [#22853](https://github.com/ionic-team/ionic/issues/22853)
+* **item-sliding:** closing an item can no longer be interrupted ([#23973](https://github.com/ionic-team/ionic/issues/23973)) ([3ca0419](https://github.com/ionic-team/ionic/commit/3ca04197a4186c85d04cdf04fa9cb2689ca1bbfb)), closes [#23969](https://github.com/ionic-team/ionic/issues/23969)
+* **react:** overlay hooks memorised properly to prevent re-renders ([#24010](https://github.com/ionic-team/ionic/issues/24010)) ([2c97712](https://github.com/ionic-team/ionic/commit/2c977126012ae0231d4e4fa63cc76a528bde699b)), closes [#23741](https://github.com/ionic-team/ionic/issues/23741)
+* **select-popover:** non-scrollable popovers no longer have forced overscroll ([#23972](https://github.com/ionic-team/ionic/issues/23972)) ([aa4ba89](https://github.com/ionic-team/ionic/commit/aa4ba890e9c18e8a911c5188b3e2e85433658be9)), closes [#23971](https://github.com/ionic-team/ionic/issues/23971)
+* **status-bar:** tapping status bar correctly scrolls content to top ([#24001](https://github.com/ionic-team/ionic/issues/24001)) ([25eb8cd](https://github.com/ionic-team/ionic/commit/25eb8cdf98fe455433ca6185e89d9e1223a6d3ae)), closes [#20423](https://github.com/ionic-team/ionic/issues/20423)
+
+
+
+## [5.8.1](https://github.com/ionic-team/ionic/compare/v5.8.0...v5.8.1) (2021-09-22)
+
+
+### Bug Fixes
+
+* **angular:** select method now has correct types ([#23953](https://github.com/ionic-team/ionic/issues/23953)) ([3c1be89](https://github.com/ionic-team/ionic/commit/3c1be89112d464e77d65c875223138aaedf350cd)), closes [#23952](https://github.com/ionic-team/ionic/issues/23952)
+* **item-sliding:** item-sliding accounts for multiple ion-item elements ([#23943](https://github.com/ionic-team/ionic/issues/23943)) ([8108edd](https://github.com/ionic-team/ionic/commit/8108edd876b10834015016385dc3cd5b8f31fbfa)), closes [#19312](https://github.com/ionic-team/ionic/issues/19312)
+* **label:** only inherit color if color property is set on ion-item ([#23944](https://github.com/ionic-team/ionic/issues/23944)) ([ae1325c](https://github.com/ionic-team/ionic/commit/ae1325cee698066a71aae4e7deb953c4185c0926)), closes [#20125](https://github.com/ionic-team/ionic/issues/20125)
+
+
+
+# [5.8.0 Calcium](https://github.com/ionic-team/ionic/compare/v5.7.0...v5.8.0) (2021-09-15)
+
+
+### Bug Fixes
+
+* **angular:** nested tabs now go to correct page ([#23902](https://github.com/ionic-team/ionic/issues/23902)) ([1ed9f07](https://github.com/ionic-team/ionic/commit/1ed9f07060736d0c951910427fb12b250d7dd9af)), closes [#23897](https://github.com/ionic-team/ionic/issues/23897)
+* **header:** role attribute can now be customized ([#23888](https://github.com/ionic-team/ionic/issues/23888)) ([8888e2b](https://github.com/ionic-team/ionic/commit/8888e2bafd76b59f32b932b5d4a6a961b52894d9)), closes [#21327](https://github.com/ionic-team/ionic/issues/21327)
+* **react:** modal now mounts child component independently of other modals ([#23903](https://github.com/ionic-team/ionic/issues/23903)) ([1e13429](https://github.com/ionic-team/ionic/commit/1e13429731c1d4b5200af7f5ca20aff1f3078bfe)), closes [#23904](https://github.com/ionic-team/ionic/issues/23904)
+* **tab-bar:** safe area padding now added when slot="top" ([#23895](https://github.com/ionic-team/ionic/issues/23895)) ([4782969](https://github.com/ionic-team/ionic/commit/47829690b538903b70ad4fe77657404013270263)), closes [#23893](https://github.com/ionic-team/ionic/issues/23893)
+
+
+### Features
+
+* **action-sheet, loading, modal, picker, popover:** pass HTML attributes to host element ([#23929](https://github.com/ionic-team/ionic/issues/23929)) ([bd96a81](https://github.com/ionic-team/ionic/commit/bd96a81ff80ffe32914804ba9b6234c0286a33db))
+* **alert, toast:** pass arbitrary HTML attributes to host element ([#23891](https://github.com/ionic-team/ionic/issues/23891)) ([73a1daf](https://github.com/ionic-team/ionic/commit/73a1daf0aaf6ffe8c7871619f2aec5f6fca1321a)), closes [#23825](https://github.com/ionic-team/ionic/issues/23825)
+
+
+
 # [5.7.0 Potassium](https://github.com/ionic-team/ionic/compare/v5.6.14...v5.7.0) (2021-09-01)
 
 
@@ -3996,4 +4135,4 @@ The following dependencies need to be updated to resolve build errors
 
 <a name="0.1.0"></a>
 
-## [0.1.0](https://github.com/ionic-team/ionic/commit/43a8c4c7a719169336a84964fc1c737562d764a6) (2018-03-01)
+## [0.1.0](https://github.com/ionic-team/ionic/commit/43a8c4c7a719169336a84964fc1c737562d764a6) (2018-03-01)

README.md

@@ -30,11 +30,11 @@ an [issue](https://github.com/ionic-team/ionic/issues/new) on this repository.
 ### Contributing
 
 Thanks for your interest in contributing! Read up on our guidelines for
-[contributing](https://github.com/ionic-team/ionic/blob/master/.github/CONTRIBUTING.md)
+[contributing](https://github.com/ionic-team/ionic/blob/main/.github/CONTRIBUTING.md)
 and then look through our issues with a [help wanted](https://github.com/ionic-team/ionic/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
 label.
 
-Please note that this project is released with a [Contributor Code of Conduct](https://github.com/ionic-team/ionic/blob/master/CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms.
+Please note that this project is released with a [Contributor Code of Conduct](https://github.com/ionic-team/ionic/blob/main/CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms.
 
 
 ### Examples

angular/BREAKING.md

@@ -137,7 +137,7 @@ The back button is no longer added by default to a navigation bar. It should be
 </ion-toolbar>
 ```
 
-See the [back button documentation](https://github.com/ionic-team/ionic/blob/master/core/src/components/back-button) for more usage examples.
+See the [back button documentation](https://github.com/ionic-team/ionic/blob/main/core/src/components/back-button) for more usage examples.
 
 ## Button
 
@@ -507,7 +507,7 @@ _In the following examples, `{breakpoint}` refers to the optional screen breakpo
 - `push-{breakpoint}-{value}` attributes have been renamed to `push-{breakpoint}=“{value}”`
 - `pull-{breakpoint}-{value}` attributes have been renamed to `pull-{breakpoint}=“{value}”`
 
-Customizing the padding and width of a grid should now be done with CSS variables. For more information, see [Grid Layout](https://github.com/ionic-team/ionic-docs/blob/master/src/pages/layout/grid.md).
+Customizing the padding and width of a grid should now be done with CSS variables. For more information, see [Grid Layout](https://github.com/ionic-team/ionic-docs/blob/main/src/pages/layout/grid.md).
 
 ## Icon
 
@@ -1689,7 +1689,7 @@ The tab attribute defines the route to be shown upon clicking on this tab.
 </ion-tabs>
 ```
 
-See more usage examples in the [Tabs](https://github.com/ionic-team/ionic/blob/master/core/src/components/tabs) documentation.
+See more usage examples in the [Tabs](https://github.com/ionic-team/ionic/blob/main/core/src/components/tabs) documentation.
 
 
 ## Text / Typography

angular/README.md

@@ -16,11 +16,11 @@ Ionic Angular specific building blocks on top of [@ionic/core](https://www.npmjs
 
 ## License
 
-* [MIT](https://raw.githubusercontent.com/ionic-team/ionic/master/LICENSE)
+* [MIT](https://raw.githubusercontent.com/ionic-team/ionic/main/LICENSE)
 
 ## Testing ng-add in ionic
 
-1. Pull the latest from master
+1. Pull the latest from `main`
 2. Build ionic/angular: `npm run build`
 3. Run `npm link` from `ionic/angular/dist` directory
 4. Create a blank angular project

angular/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "5.7.0",
+  "version": "5.9.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "5.7.0",
+      "version": "5.9.4",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "5.6.14",
+        "@ionic/core": "5.9.3",
         "tslib": "^1.9.3"
       },
       "devDependencies": {
@@ -204,9 +204,9 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "5.6.14",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.6.14.tgz",
-      "integrity": "sha512-0LrEofgfA91aqDlXgnOIfC3QrRxazSA4Zu6StQ1ksQqzkYsJLmceaTowl/b72Yt4eaNHUQIVvUvazpoDNp+zRQ==",
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.9.3.tgz",
+      "integrity": "sha512-WM50vVxAAw+MQYqWXKUK4usBgkr7iQ9UWSb6t59mG4ZSy/fPAb7ZIdAjxY0U5i1ykk6A7Ur4B9ZJMpC/a7nnug==",
       "dependencies": {
         "@stencil/core": "^2.4.0",
         "ionicons": "^5.5.3",
@@ -5156,9 +5156,9 @@
       }
     },
     "@ionic/core": {
-      "version": "5.6.14",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.6.14.tgz",
-      "integrity": "sha512-0LrEofgfA91aqDlXgnOIfC3QrRxazSA4Zu6StQ1ksQqzkYsJLmceaTowl/b72Yt4eaNHUQIVvUvazpoDNp+zRQ==",
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.9.3.tgz",
+      "integrity": "sha512-WM50vVxAAw+MQYqWXKUK4usBgkr7iQ9UWSb6t59mG4ZSy/fPAb7ZIdAjxY0U5i1ykk6A7Ur4B9ZJMpC/a7nnug==",
       "requires": {
         "@stencil/core": "^2.4.0",
         "ionicons": "^5.5.3",

angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "5.7.0",
+  "version": "5.9.4",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -42,7 +42,7 @@
     "validate": "npm i && npm run lint && npm run test && npm run build"
   },
   "dependencies": {
-    "@ionic/core": "5.7.0",
+    "@ionic/core": "5.9.4",
     "tslib": "^1.9.3"
   },
   "peerDependencies": {

angular/src/app-initialize.ts

@@ -1,4 +1,5 @@
 import { NgZone } from '@angular/core';
+import { setupConfig } from '@ionic/core';
 import { applyPolyfills, defineCustomElements } from '@ionic/core/loader';
 
 import { Config } from './providers/config';
@@ -9,12 +10,11 @@ export const appInitialize = (config: Config, doc: Document, zone: NgZone) => {
   return (): any => {
     const win: IonicWindow | undefined = doc.defaultView as any;
     if (win && typeof (window as any) !== 'undefined') {
-      const Ionic = win.Ionic = win.Ionic || {};
 
-      Ionic.config = {
+      setupConfig({
         ...config,
         _zoneGate: (h: any) => zone.run(h)
-      };
+      });
 
       const aelFn = '__zone_symbol__addEventListener' in (doc.body as any)
         ? '__zone_symbol__addEventListener'

angular/src/directives/control-value-accessors/value-accessor.ts

@@ -86,11 +86,11 @@ export class ValueAccessor implements ControlValueAccessor, AfterViewInit, OnDes
      */
     const formControl = ngControl.control;
     if (formControl) {
-      const methodsToPatch = ['markAsTouched', 'markAllAsTouched', 'markAsUntouched', 'markAsDirty', 'markAsPristine'];
+      const methodsToPatch = ['markAsTouched', 'markAllAsTouched', 'markAsUntouched', 'markAsDirty', 'markAsPristine'] as const;
       methodsToPatch.forEach(method => {
        if (formControl[method]) {
          const oldFn = formControl[method].bind(formControl);
-         formControl[method] = (...params) => {
+         formControl[method] = (...params: any[]) => {
            oldFn(...params);
            setIonicClasses(this.el);
           };

angular/src/directives/navigation/ion-tabs.ts

@@ -86,10 +86,23 @@ export class IonTabs {
    *   b. If the last route view doesn't exist, then navigate
    *      to the default tabRootUrl
    */
-  @HostListener('ionTabButtonClick', ['$event.detail.tab'])
-  select(tab: string) {
+  @HostListener('ionTabButtonClick', ['$event'])
+  select(tabOrEvent: string | CustomEvent) {
+    const isTabString = typeof tabOrEvent === 'string';
+    const tab = (isTabString) ? tabOrEvent : (tabOrEvent as CustomEvent).detail.tab;
     const alreadySelected = this.outlet.getActiveStackId() === tab;
     const tabRootUrl = `${this.outlet.tabsPrefix}/${tab}`;
+
+    /**
+     * If this is a nested tab, prevent the event
+     * from bubbling otherwise the outer tabs
+     * will respond to this event too, causing
+     * the app to get directed to the wrong place.
+     */
+    if (!isTabString) {
+      (tabOrEvent as CustomEvent).stopPropagation();
+    }
+
     if (alreadySelected) {
       const activeStackId = this.outlet.getActiveStackId();
       const activeView = this.outlet.getLastRouteView(activeStackId);

angular/src/directives/navigation/stack-controller.ts

@@ -305,7 +305,7 @@ export class StackController {
 
 const cleanupAsync = (activeRoute: RouteView, views: RouteView[], viewsSnapshot: RouteView[], location: Location) => {
   if (typeof (requestAnimationFrame as any) === 'function') {
-    return new Promise<any>(resolve => {
+    return new Promise<void>(resolve => {
       requestAnimationFrame(() => {
         cleanup(activeRoute, views, viewsSnapshot, location);
         resolve();

angular/src/index.ts

@@ -43,7 +43,7 @@ export * from './types/ionic-lifecycle-hooks';
 export { IonicModule } from './ionic-module';
 
 // UTILS
-export { IonicSafeString, getPlatforms, isPlatform, createAnimation, IonicSwiper } from '@ionic/core';
+export { IonicSafeString, getPlatforms, isPlatform, createAnimation, IonicSwiper, IonicSlides } from '@ionic/core';
 
 // CORE TYPES
 export {

core/README.md

@@ -35,7 +35,7 @@ Additionally, within this package is a `dist/ionic.js` file and accompanying `di
 
 ## Framework Bindings
 
-The `@ionic/core` package can by used in simple HTML, or by vanilla JavaScript without any framework at all. Ionic also has packages that make it easier to integrate Ionic into a framework's traditional ecosystem and patterns. (However, at the lowest-level framework bindings are still just using Ionic Core and Web Components).
+The `@ionic/core` package can be used in simple HTML, or by vanilla JavaScript without any framework at all. Ionic also has packages that make it easier to integrate Ionic into a framework's traditional ecosystem and patterns. (However, at the lowest-level framework bindings are still just using Ionic Core and Web Components).
 
 * [@ionic/angular](https://www.npmjs.com/package/@ionic/angular)
 
@@ -60,7 +60,7 @@ Notice how `IonBadge` is imported from `@ionic/core/components/ion-badge` rather
 
 ## How to contribute
 
-[Check out the CONTRIBUTE guide](CONTRIBUTING.md)
+[Check out the CONTRIBUTE guide](/.github/CONTRIBUTING.md)
 
 ## Related
 

core/api.txt

@@ -6,6 +6,7 @@ ion-action-sheet,prop,buttons,(string | ActionSheetButton)[],[],false,false
 ion-action-sheet,prop,cssClass,string | string[] | undefined,undefined,false,false
 ion-action-sheet,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-action-sheet,prop,header,string | undefined,undefined,false,false
+ion-action-sheet,prop,htmlAttributes,ActionSheetAttributes | undefined,undefined,false,false
 ion-action-sheet,prop,keyboardClose,boolean,true,false,false
 ion-action-sheet,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-action-sheet,prop,mode,"ios" | "md",undefined,false,false
@@ -50,6 +51,7 @@ ion-alert,prop,buttons,(string | AlertButton)[],[],false,false
 ion-alert,prop,cssClass,string | string[] | undefined,undefined,false,false
 ion-alert,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-alert,prop,header,string | undefined,undefined,false,false
+ion-alert,prop,htmlAttributes,AlertAttributes | undefined,undefined,false,false
 ion-alert,prop,inputs,AlertInput[],[],false,false
 ion-alert,prop,keyboardClose,boolean,true,false,false
 ion-alert,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
@@ -333,7 +335,7 @@ ion-datetime,prop,monthShortNames,string | string[] | undefined,undefined,false,
 ion-datetime,prop,monthValues,number | number[] | string | undefined,undefined,false,false
 ion-datetime,prop,name,string,this.inputId,false,false
 ion-datetime,prop,pickerFormat,string | undefined,undefined,false,false
-ion-datetime,prop,pickerOptions,undefined | { columns?: PickerColumn[] | undefined; buttons?: PickerButton[] | undefined; cssClass?: string | string[] | undefined; showBackdrop?: boolean | undefined; backdropDismiss?: boolean | undefined; animated?: boolean | undefined; mode?: Mode | undefined; keyboardClose?: boolean | undefined; id?: string | undefined; enterAnimation?: AnimationBuilder | undefined; leaveAnimation?: AnimationBuilder | undefined; },undefined,false,false
+ion-datetime,prop,pickerOptions,undefined | { columns?: PickerColumn[] | undefined; buttons?: PickerButton[] | undefined; cssClass?: string | string[] | undefined; showBackdrop?: boolean | undefined; backdropDismiss?: boolean | undefined; animated?: boolean | undefined; mode?: Mode | undefined; keyboardClose?: boolean | undefined; id?: string | undefined; htmlAttributes?: PickerAttributes | undefined; enterAnimation?: AnimationBuilder | undefined; leaveAnimation?: AnimationBuilder | undefined; },undefined,false,false
 ion-datetime,prop,placeholder,null | string | undefined,undefined,false,false
 ion-datetime,prop,readonly,boolean,false,false,false
 ion-datetime,prop,value,null | string | undefined,undefined,false,false
@@ -621,6 +623,7 @@ ion-loading,prop,backdropDismiss,boolean,false,false,false
 ion-loading,prop,cssClass,string | string[] | undefined,undefined,false,false
 ion-loading,prop,duration,number,0,false,false
 ion-loading,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
+ion-loading,prop,htmlAttributes,LoadingAttributes | undefined,undefined,false,false
 ion-loading,prop,keyboardClose,boolean,true,false,false
 ion-loading,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-loading,prop,message,IonicSafeString | string | undefined,undefined,false,false
@@ -708,6 +711,7 @@ ion-modal,prop,component,Function | HTMLElement | null | string,undefined,true,f
 ion-modal,prop,componentProps,undefined | { [key: string]: any; },undefined,false,false
 ion-modal,prop,cssClass,string | string[] | undefined,undefined,false,false
 ion-modal,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
+ion-modal,prop,htmlAttributes,ModalAttributes | undefined,undefined,false,false
 ion-modal,prop,keyboardClose,boolean,true,false,false
 ion-modal,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-modal,prop,mode,"ios" | "md",undefined,false,false
@@ -776,6 +780,7 @@ ion-picker,prop,columns,PickerColumn[],[],false,false
 ion-picker,prop,cssClass,string | string[] | undefined,undefined,false,false
 ion-picker,prop,duration,number,0,false,false
 ion-picker,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
+ion-picker,prop,htmlAttributes,PickerAttributes | undefined,undefined,false,false
 ion-picker,prop,keyboardClose,boolean,true,false,false
 ion-picker,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-picker,prop,mode,"ios" | "md",undefined,false,false
@@ -811,6 +816,7 @@ ion-popover,prop,componentProps,undefined | { [key: string]: any; },undefined,fa
 ion-popover,prop,cssClass,string | string[] | undefined,undefined,false,false
 ion-popover,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-popover,prop,event,any,undefined,false,false
+ion-popover,prop,htmlAttributes,PopoverAttributes | undefined,undefined,false,false
 ion-popover,prop,keyboardClose,boolean,true,false,false
 ion-popover,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-popover,prop,mode,"ios" | "md",undefined,false,false
@@ -1268,6 +1274,7 @@ ion-toast,prop,cssClass,string | string[] | undefined,undefined,false,false
 ion-toast,prop,duration,number,0,false,false
 ion-toast,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-toast,prop,header,string | undefined,undefined,false,false
+ion-toast,prop,htmlAttributes,ToastAttributes | undefined,undefined,false,false
 ion-toast,prop,keyboardClose,boolean,false,false,false
 ion-toast,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-toast,prop,message,IonicSafeString | string | undefined,undefined,false,false

core/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@ionic/core",
-  "version": "5.7.0",
+  "version": "5.9.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "5.7.0",
+      "version": "5.9.4",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "^2.4.0",

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "5.7.0",
+  "version": "5.9.4",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",

core/src/components.d.ts

@@ -5,10 +5,12 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { ActionSheetButton, AlertButton, AlertInput, AnimationBuilder, AutocompleteTypes, CheckboxChangeEventDetail, Color, ComponentProps, ComponentRef, DatetimeChangeEventDetail, DatetimeOptions, DomRenderFn, FooterHeightFn, FrameworkDelegate, HeaderFn, HeaderHeightFn, InputChangeEventDetail, ItemHeightFn, ItemRenderFn, ItemReorderEventDetail, MenuChangeEventDetail, NavComponent, NavComponentWithProps, NavOptions, OverlayEventDetail, PickerButton, PickerColumn, RadioGroupChangeEventDetail, RangeChangeEventDetail, RangeValue, RefresherEventDetail, RouteID, RouterDirection, RouterEventDetail, RouterOutletOptions, RouteWrite, ScrollBaseDetail, ScrollDetail, SearchbarChangeEventDetail, SegmentButtonLayout, SegmentChangeEventDetail, SelectChangeEventDetail, SelectInterface, SelectPopoverOption, Side, SpinnerTypes, StyleEventDetail, SwipeGestureHandler, TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout, TextareaChangeEventDetail, TextFieldTypes, ToastButton, ToggleChangeEventDetail, TransitionDoneFn, TransitionInstruction, ViewController } from "./interface";
+import { ActionSheetAttributes, ActionSheetButton, AlertButton, AlertInput, AnimationBuilder, AutocompleteTypes, CheckboxChangeEventDetail, Color, ComponentProps, ComponentRef, DatetimeChangeEventDetail, DatetimeOptions, DomRenderFn, FooterHeightFn, FrameworkDelegate, HeaderFn, HeaderHeightFn, InputChangeEventDetail, ItemHeightFn, ItemRenderFn, ItemReorderEventDetail, LoadingAttributes, MenuChangeEventDetail, ModalAttributes, NavComponent, NavComponentWithProps, NavOptions, OverlayEventDetail, PickerAttributes, PickerButton, PickerColumn, PopoverAttributes, RadioGroupChangeEventDetail, RangeChangeEventDetail, RangeValue, RefresherEventDetail, RouteID, RouterDirection, RouterEventDetail, RouterOutletOptions, RouteWrite, ScrollBaseDetail, ScrollDetail, SearchbarChangeEventDetail, SegmentButtonLayout, SegmentChangeEventDetail, SelectChangeEventDetail, SelectInterface, SelectPopoverOption, Side, SpinnerTypes, StyleEventDetail, SwipeGestureHandler, TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout, TextareaChangeEventDetail, TextFieldTypes, ToastButton, ToggleChangeEventDetail, TransitionDoneFn, TransitionInstruction, ViewController } from "./interface";
 import { IonicSafeString } from "./utils/sanitization";
+import { AlertAttributes } from "./components/alert/alert-interface";
 import { NavigationHookCallback } from "./components/route/route-interface";
 import { SelectCompareFn } from "./components/select/select-interface";
+import { ToastAttributes } from "./components/toast/toast-interface";
 export namespace Components {
     interface IonActionSheet {
         /**
@@ -41,6 +43,10 @@ export namespace Components {
           * Title for the action sheet.
          */
         "header"?: string;
+        /**
+          * Additional attributes to pass to the action sheet.
+         */
+        "htmlAttributes"?: ActionSheetAttributes;
         /**
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          */
@@ -106,6 +112,10 @@ export namespace Components {
           * The main title in the heading of the alert.
          */
         "header"?: string;
+        /**
+          * Additional attributes to pass to the alert.
+         */
+        "htmlAttributes"?: AlertAttributes;
         /**
           * Array of input to show in the alert.
          */
@@ -166,7 +176,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * The icon name to use for the back button.
+          * The built-in named SVG icon name or the exact `src` of an SVG file to use for the back button.
          */
         "icon"?: string | null;
         /**
@@ -1177,6 +1187,10 @@ export namespace Components {
           * Animation to use when the loading indicator is presented.
          */
         "enterAnimation"?: AnimationBuilder;
+        /**
+          * Additional attributes to pass to the loader.
+         */
+        "htmlAttributes"?: LoadingAttributes;
         /**
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          */
@@ -1341,6 +1355,10 @@ export namespace Components {
           * Animation to use when the modal is presented.
          */
         "enterAnimation"?: AnimationBuilder;
+        /**
+          * Additional attributes to pass to the modal.
+         */
+        "htmlAttributes"?: ModalAttributes;
         /**
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          */
@@ -1558,6 +1576,10 @@ export namespace Components {
           * @param name The name of the column.
          */
         "getColumn": (name: string) => Promise<PickerColumn | undefined>;
+        /**
+          * Additional attributes to pass to the picker.
+         */
+        "htmlAttributes"?: PickerAttributes;
         /**
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          */
@@ -1630,6 +1652,10 @@ export namespace Components {
           * The event to pass to the popover animation.
          */
         "event": any;
+        /**
+          * Additional attributes to pass to the popover.
+         */
+        "htmlAttributes"?: PopoverAttributes;
         /**
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          */
@@ -1816,7 +1842,7 @@ export namespace Components {
          */
         "pullMin": number;
         /**
-          * Time it takes the refresher to to snap back to the `refreshing` state. Does not apply when the refresher content uses a spinner, enabling the native refresher.
+          * Time it takes the refresher to snap back to the `refreshing` state. Does not apply when the refresher content uses a spinner, enabling the native refresher.
          */
         "snapbackDuration": string;
     }
@@ -1910,7 +1936,7 @@ export namespace Components {
          */
         "push": (url: string, direction?: RouterDirection, animation?: AnimationBuilder | undefined) => Promise<boolean>;
         /**
-          * By default `ion-router` will match the routes at the root path ("/"). That can be changed when
+          * The root path to use when matching URLs. By default, this is set to "/", but you can specify an alternate prefix for all URL paths.
          */
         "root": string;
         /**
@@ -2565,6 +2591,10 @@ export namespace Components {
           * Header to be shown in the toast.
          */
         "header"?: string;
+        /**
+          * Additional attributes to pass to the toast.
+         */
+        "htmlAttributes"?: ToastAttributes;
         /**
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          */
@@ -3346,6 +3376,10 @@ declare namespace LocalJSX {
           * Title for the action sheet.
          */
         "header"?: string;
+        /**
+          * Additional attributes to pass to the action sheet.
+         */
+        "htmlAttributes"?: ActionSheetAttributes;
         /**
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          */
@@ -3409,6 +3443,10 @@ declare namespace LocalJSX {
           * The main title in the heading of the alert.
          */
         "header"?: string;
+        /**
+          * Additional attributes to pass to the alert.
+         */
+        "htmlAttributes"?: AlertAttributes;
         /**
           * Array of input to show in the alert.
          */
@@ -3473,7 +3511,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * The icon name to use for the back button.
+          * The built-in named SVG icon name or the exact `src` of an SVG file to use for the back button.
          */
         "icon"?: string | null;
         /**
@@ -4520,6 +4558,10 @@ declare namespace LocalJSX {
           * Animation to use when the loading indicator is presented.
          */
         "enterAnimation"?: AnimationBuilder;
+        /**
+          * Additional attributes to pass to the loader.
+         */
+        "htmlAttributes"?: LoadingAttributes;
         /**
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          */
@@ -4678,6 +4720,10 @@ declare namespace LocalJSX {
           * Animation to use when the modal is presented.
          */
         "enterAnimation"?: AnimationBuilder;
+        /**
+          * Additional attributes to pass to the modal.
+         */
+        "htmlAttributes"?: ModalAttributes;
         /**
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          */
@@ -4812,6 +4858,10 @@ declare namespace LocalJSX {
           * Animation to use when the picker is presented.
          */
         "enterAnimation"?: AnimationBuilder;
+        /**
+          * Additional attributes to pass to the picker.
+         */
+        "htmlAttributes"?: PickerAttributes;
         /**
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          */
@@ -4886,6 +4936,10 @@ declare namespace LocalJSX {
           * The event to pass to the popover animation.
          */
         "event"?: any;
+        /**
+          * Additional attributes to pass to the popover.
+         */
+        "htmlAttributes"?: PopoverAttributes;
         /**
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          */
@@ -5106,7 +5160,7 @@ declare namespace LocalJSX {
          */
         "pullMin"?: number;
         /**
-          * Time it takes the refresher to to snap back to the `refreshing` state. Does not apply when the refresher content uses a spinner, enabling the native refresher.
+          * Time it takes the refresher to snap back to the `refreshing` state. Does not apply when the refresher content uses a spinner, enabling the native refresher.
          */
         "snapbackDuration"?: string;
     }
@@ -5196,7 +5250,7 @@ declare namespace LocalJSX {
          */
         "onIonRouteWillChange"?: (event: CustomEvent<RouterEventDetail>) => void;
         /**
-          * By default `ion-router` will match the routes at the root path ("/"). That can be changed when
+          * The root path to use when matching URLs. By default, this is set to "/", but you can specify an alternate prefix for all URL paths.
          */
         "root"?: string;
         /**
@@ -5894,6 +5948,10 @@ declare namespace LocalJSX {
           * Header to be shown in the toast.
          */
         "header"?: string;
+        /**
+          * Additional attributes to pass to the toast.
+         */
+        "htmlAttributes"?: ToastAttributes;
         /**
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          */

core/src/components/action-sheet/action-sheet-interface.ts

@@ -1,3 +1,5 @@
+import { JSXBase } from '@stencil/core/internal';
+
 import { AnimationBuilder, Mode } from '../../interface';
 
 export interface ActionSheetOptions {
@@ -11,11 +13,14 @@ export interface ActionSheetOptions {
   mode?: Mode;
   keyboardClose?: boolean;
   id?: string;
+  htmlAttributes?: ActionSheetAttributes;
 
   enterAnimation?: AnimationBuilder;
   leaveAnimation?: AnimationBuilder;
 }
 
+export interface ActionSheetAttributes extends JSXBase.HTMLAttributes<HTMLElement> {}
+
 export interface ActionSheetButton {
   text?: string;
   role?: 'cancel' | 'destructive' | 'selected' | string;

core/src/components/action-sheet/action-sheet.ios.scss

@@ -22,11 +22,6 @@
   text-align: $action-sheet-ios-text-align;
 }
 
-.action-sheet-wrapper {
-  @include margin(var(--ion-safe-area-top, 0), auto, var(--ion-safe-area-bottom, 0), auto);
-}
-
-
 // iOS Action Sheet Container
 // ---------------------------------------------------
 

core/src/components/action-sheet/action-sheet.scss

@@ -67,7 +67,7 @@
 
 .action-sheet-wrapper {
   @include position(null, 0, 0, 0);
-  @include margin(auto);
+  @include margin(var(--ion-safe-area-top, 0), auto, var(--ion-safe-area-bottom, 0), auto);
   @include transform(translate3d(0, 100%, 0));
 
   display: block;

core/src/components/action-sheet/action-sheet.tsx

@@ -1,7 +1,7 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, h, readTask } from '@stencil/core';
 
 import { getIonMode } from '../../global/ionic-global';
-import { ActionSheetButton, AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface } from '../../interface';
+import { ActionSheetAttributes, ActionSheetButton, AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface } from '../../interface';
 import { Gesture } from '../../utils/gesture';
 import { createButtonActiveGesture } from '../../utils/gesture/button-active';
 import { BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall } from '../../utils/overlays';
@@ -90,6 +90,11 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
    */
   @Prop() animated = true;
 
+  /**
+   * Additional attributes to pass to the action sheet.
+   */
+  @Prop() htmlAttributes?: ActionSheetAttributes;
+
   /**
    * Emitted after the alert has presented.
    */
@@ -228,6 +233,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
   }
 
   render() {
+    const { htmlAttributes } = this;
     const mode = getIonMode(this);
     const allButtons = this.getButtons();
     const cancelButton = allButtons.find(b => b.role === 'cancel');
@@ -238,6 +244,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
         role="dialog"
         aria-modal="true"
         tabindex="-1"
+        {...htmlAttributes as any}
         style={{
           zIndex: `${20000 + this.overlayIndex}`,
         }}

core/src/components/action-sheet/readme.md

@@ -62,12 +62,19 @@ interface ActionSheetOptions {
   mode?: Mode;
   keyboardClose?: boolean;
   id?: string;
+  htmlAttributes?: ActionSheetAttributes;
 
   enterAnimation?: AnimationBuilder;
   leaveAnimation?: AnimationBuilder;
 }
 ```
 
+### ActionSheetAttributes
+
+```typescript
+interface ActionSheetAttributes extends JSXBase.HTMLAttributes<HTMLElement> {}
+```
+
 <!-- Auto Generated Below -->
 
 
@@ -524,6 +531,7 @@ export default defineComponent({
 | `cssClass`        | `css-class`        | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.                                                                                                            | `string \| string[] \| undefined`                       | `undefined` |
 | `enterAnimation`  | --                 | Animation to use when the action sheet is presented.                                                                                                                                                                        | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
 | `header`          | `header`           | Title for the action sheet.                                                                                                                                                                                                 | `string \| undefined`                                   | `undefined` |
+| `htmlAttributes`  | --                 | Additional attributes to pass to the action sheet.                                                                                                                                                                          | `ActionSheetAttributes \| undefined`                    | `undefined` |
 | `keyboardClose`   | `keyboard-close`   | If `true`, the keyboard will be automatically dismissed when the overlay is presented.                                                                                                                                      | `boolean`                                               | `true`      |
 | `leaveAnimation`  | --                 | Animation to use when the action sheet is dismissed.                                                                                                                                                                        | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
 | `mode`            | `mode`             | The mode determines which platform styles to use.                                                                                                                                                                           | `"ios" \| "md"`                                         | `undefined` |

core/src/components/action-sheet/test/basic/e2e.ts

@@ -111,3 +111,21 @@ test('action-sheet:rtl: basic, scroll without cancel', async () => {
 test('action-sheet:rtl: basic, custom backdrop', async () => {
   await testActionSheet(DIRECTORY, '#customBackdrop', true);
 });
+
+// Attributes
+
+test('action-sheet: htmlAttributes', async () => {
+  const page = await newE2EPage({ url: '/src/components/action-sheet/test/basic?ionic:_testing=true' });
+
+  await page.click('#basic');
+  await page.waitForSelector('#basic');
+
+  let toast = await page.find('ion-action-sheet');
+
+  expect(toast).not.toBe(null);
+  await toast.waitForVisible();
+
+  const attribute = await page.evaluate((el) => document.querySelector('ion-action-sheet').getAttribute('data-testid'));
+
+  expect(attribute).toEqual('basic-action-sheet');
+});

core/src/components/action-sheet/test/basic/index.html

@@ -71,6 +71,9 @@
       await openActionSheet({
         header: "Albums",
         subHeader: 'This is a sub header inside of an action sheet',
+        htmlAttributes: {
+          'data-testid': 'basic-action-sheet'
+        },
         buttons: [{
           text: 'Delete',
           role: 'destructive',

core/src/components/alert/alert-interface.ts

@@ -13,6 +13,7 @@ export interface AlertOptions {
   backdropDismiss?: boolean;
   translucent?: boolean;
   animated?: boolean;
+  htmlAttributes?: AlertAttributes;
 
   mode?: Mode;
   keyboardClose?: boolean;
@@ -22,6 +23,8 @@ export interface AlertOptions {
   leaveAnimation?: AnimationBuilder;
 }
 
+export interface AlertAttributes extends JSXBase.HTMLAttributes<HTMLElement> {}
+
 export interface AlertInput {
   type?: TextFieldTypes | 'checkbox' | 'radio' | 'textarea';
   name?: string;

core/src/components/alert/alert.md.vars.scss

@@ -80,7 +80,7 @@ $alert-md-message-empty-padding-bottom:       $alert-md-message-empty-padding-to
 $alert-md-message-empty-padding-start:        $alert-md-message-empty-padding-end !default;
 
 /// @prop - Maximum height of the alert content
-$alert-md-content-max-height:                 240px !default;
+$alert-md-content-max-height:                 266px !default;
 
 /// @prop - Border width of the alert input
 $alert-md-input-border-width:                 1px !default;

core/src/components/alert/alert.tsx

@@ -8,6 +8,7 @@ import { BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safe
 import { IonicSafeString, sanitizeDOMString } from '../../utils/sanitization';
 import { getClassMap } from '../../utils/theme';
 
+import { AlertAttributes } from './alert-interface';
 import { iosEnterAnimation } from './animations/ios.enter';
 import { iosLeaveAnimation } from './animations/ios.leave';
 import { mdEnterAnimation } from './animations/md.enter';
@@ -110,6 +111,11 @@ export class Alert implements ComponentInterface, OverlayInterface {
    */
   @Prop() animated = true;
 
+  /**
+   * Additional attributes to pass to the alert.
+   */
+  @Prop() htmlAttributes?: AlertAttributes;
+
   /**
    * Emitted after the alert has presented.
    */
@@ -550,17 +556,19 @@ export class Alert implements ComponentInterface, OverlayInterface {
   }
 
   render() {
-    const { overlayIndex, header, subHeader } = this;
+    const { overlayIndex, header, subHeader, htmlAttributes } = this;
     const mode = getIonMode(this);
     const hdrId = `alert-${overlayIndex}-hdr`;
     const subHdrId = `alert-${overlayIndex}-sub-hdr`;
     const msgId = `alert-${overlayIndex}-msg`;
+    const role = this.inputs.length > 0 || this.buttons.length > 0 ? 'alertdialog' : 'alert';
 
     return (
       <Host
-        role="dialog"
+        role={role}
         aria-modal="true"
         tabindex="-1"
+        {...htmlAttributes as any}
         style={{
           zIndex: `${20000 + overlayIndex}`,
         }}

core/src/components/alert/readme.md

@@ -95,16 +95,22 @@ interface AlertOptions {
   backdropDismiss?: boolean;
   translucent?: boolean;
   animated?: boolean;
-  
+  htmlAttributes?: AlertAttributes;
+
   mode?: Mode;
   keyboardClose?: boolean;
   id?: string;
-  
+
   enterAnimation?: AnimationBuilder;
   leaveAnimation?: AnimationBuilder;
 }
 ```
 
+### AlertAttributes
+```typescript
+interface AlertAttributes extends JSXBase.HTMLAttributes<HTMLElement> {}
+```
+
 ### AlertTextareaAttributes
 ```typescript
 interface AlertTextareaAttributes extends JSXBase.TextareaHTMLAttributes<HTMLTextAreaElement> {}
@@ -1768,6 +1774,7 @@ export default defineComponent({
 | `cssClass`        | `css-class`        | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.                                                                                                                                                                                                                   | `string \| string[] \| undefined`                       | `undefined` |
 | `enterAnimation`  | --                 | Animation to use when the alert is presented.                                                                                                                                                                                                                                                                                      | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
 | `header`          | `header`           | The main title in the heading of the alert.                                                                                                                                                                                                                                                                                        | `string \| undefined`                                   | `undefined` |
+| `htmlAttributes`  | --                 | Additional attributes to pass to the alert.                                                                                                                                                                                                                                                                                        | `AlertAttributes \| undefined`                          | `undefined` |
 | `inputs`          | --                 | Array of input to show in the alert.                                                                                                                                                                                                                                                                                               | `AlertInput[]`                                          | `[]`        |
 | `keyboardClose`   | `keyboard-close`   | If `true`, the keyboard will be automatically dismissed when the overlay is presented.                                                                                                                                                                                                                                             | `boolean`                                               | `true`      |
 | `leaveAnimation`  | --                 | Animation to use when the alert is dismissed.                                                                                                                                                                                                                                                                                      | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |

core/src/components/alert/test/basic/e2e.ts

@@ -102,3 +102,21 @@ test(`alert:rtl: basic, radio`, async () => {
 test(`alert:rtl: basic, checkbox`, async () => {
   await testAlert(DIRECTORY, '#checkbox', true);
 });
+
+// Attributes
+
+test('alert: htmlAttributes', async () => {
+  const page = await newE2EPage({ url: '/src/components/alert/test/basic?ionic:_testing=true' });
+
+  await page.click('#basic');
+  await page.waitForSelector('#basic');
+
+  let alert = await page.find('ion-alert');
+
+  expect(alert).not.toBe(null);
+  await alert.waitForVisible();
+
+  const attribute = await page.evaluate((el) => document.querySelector('ion-alert').getAttribute('data-testid'));
+
+  expect(attribute).toEqual('basic-alert');
+});

core/src/components/alert/test/basic/index.html

@@ -58,7 +58,10 @@
         header: 'Alert',
         subHeader: 'Subtitle',
         message: 'This is an alert message.',
-        buttons: ['OK']
+        buttons: ['OK'],
+        htmlAttributes: {
+          'data-testid': 'basic-alert'
+        }
       });
     }
 

core/src/components/back-button/back-button.tsx

@@ -2,8 +2,9 @@ import { Component, ComponentInterface, Element, Host, Prop, h } from '@stencil/
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
-import { AnimationBuilder, Color } from '../../interface';
-import { ButtonInterface } from '../../utils/element-interface';
+import type { AnimationBuilder, Color } from '../../interface';
+import type { ButtonInterface } from '../../utils/element-interface';
+import { inheritAriaAttributes } from '../../utils/helpers';
 import { createColorClasses, hostContext, openURL } from '../../utils/theme';
 
 /**
@@ -22,6 +23,7 @@ import { createColorClasses, hostContext, openURL } from '../../utils/theme';
   shadow: true
 })
 export class BackButton implements ComponentInterface, ButtonInterface {
+  private inheritedAttributes: { [k: string]: any } = {};
 
   @Element() el!: HTMLElement;
 
@@ -43,7 +45,8 @@ export class BackButton implements ComponentInterface, ButtonInterface {
   @Prop({ reflect: true }) disabled = false;
 
   /**
-   * The icon name to use for the back button.
+   * The built-in named SVG icon name or the exact `src` of an SVG file
+   * to use for the back button.
    */
   @Prop() icon?: string | null;
 
@@ -64,6 +67,8 @@ export class BackButton implements ComponentInterface, ButtonInterface {
   @Prop() routerAnimation: AnimationBuilder | undefined;
 
   componentWillLoad() {
+    this.inheritedAttributes = inheritAriaAttributes(this.el);
+
     if (this.defaultHref === undefined) {
       this.defaultHref = config.get('backButtonDefaultHref');
     }
@@ -115,9 +120,10 @@ export class BackButton implements ComponentInterface, ButtonInterface {
   }
 
   render() {
-    const { color, defaultHref, disabled, type, hasIconOnly, backButtonIcon, backButtonText } = this;
+    const { color, defaultHref, disabled, type, hasIconOnly, backButtonIcon, backButtonText, inheritedAttributes } = this;
     const showBackButton = defaultHref !== undefined;
     const mode = getIonMode(this);
+    const ariaLabel = inheritedAttributes['aria-label'] || backButtonText || 'back';
 
     return (
       <Host
@@ -139,7 +145,7 @@ export class BackButton implements ComponentInterface, ButtonInterface {
           disabled={disabled}
           class="button-native"
           part="native"
-          aria-label={backButtonText || 'back'}
+          aria-label={ariaLabel}
         >
           <span class="button-inner">
             {backButtonIcon && <ion-icon part="icon" icon={backButtonIcon} aria-hidden="true" lazy={false}></ion-icon>}

core/src/components/back-button/readme.md

@@ -315,7 +315,7 @@ export default defineComponent({
 | `color`           | `color`        | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined`                                   | `undefined` |
 | `defaultHref`     | `default-href` | The url to navigate back to by default when there is no history.                                                                                                                                                                                                       | `string \| undefined`                                   | `undefined` |
 | `disabled`        | `disabled`     | If `true`, the user cannot interact with the button.                                                                                                                                                                                                                   | `boolean`                                               | `false`     |
-| `icon`            | `icon`         | The icon name to use for the back button.                                                                                                                                                                                                                              | `null \| string \| undefined`                           | `undefined` |
+| `icon`            | `icon`         | The built-in named SVG icon name or the exact `src` of an SVG file to use for the back button.                                                                                                                                                                         | `null \| string \| undefined`                           | `undefined` |
 | `mode`            | `mode`         | The mode determines which platform styles to use.                                                                                                                                                                                                                      | `"ios" \| "md"`                                         | `undefined` |
 | `routerAnimation` | --             | When using a router, it specifies the transition animation when navigating to another page.                                                                                                                                                                            | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
 | `text`            | `text`         | The text to display in the back button.                                                                                                                                                                                                                                | `null \| string \| undefined`                           | `undefined` |

core/src/components/back-button/test/basic/index.html

@@ -18,8 +18,8 @@
     <ion-content>
       <h3>Default</h3>
       <p>
-        <ion-back-button></ion-back-button>
-        <ion-back-button text="Back"></ion-back-button>
+        <ion-back-button aria-label="back button"></ion-back-button>
+        <ion-back-button text="Back" aria-label="back button"></ion-back-button>
         <ion-back-button icon="add"></ion-back-button>
         <ion-back-button disabled text="Text Only" icon=""></ion-back-button>
         <ion-back-button icon="heart" text="Love" color="danger"></ion-back-button>

core/src/components/button/button.tsx

@@ -1,9 +1,9 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, h } from '@stencil/core';
 
 import { getIonMode } from '../../global/ionic-global';
-import { AnimationBuilder, Color, RouterDirection } from '../../interface';
-import { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
-import { hasShadowDom, inheritAttributes } from '../../utils/helpers';
+import type { AnimationBuilder, Color, RouterDirection } from '../../interface';
+import type { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
+import { hasShadowDom, inheritAriaAttributes } from '../../utils/helpers';
 import { createColorClasses, hostContext, openURL } from '../../utils/theme';
 
 /**
@@ -135,7 +135,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
     this.inToolbar = !!this.el.closest('ion-buttons');
     this.inListHeader = !!this.el.closest('ion-list-header');
     this.inItem = !!this.el.closest('ion-item') || !!this.el.closest('ion-item-divider');
-    this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
+    this.inheritedAttributes = inheritAriaAttributes(this.el);
   }
 
   private get hasIconOnly() {

core/src/components/content/content.scss

@@ -140,10 +140,37 @@
 }
 
 :host(.content-sizing) {
+  display: flex;
+
+  flex-direction: column;
+
+  /**
+   * This resolves a sizing issue in popovers where extra long content
+   * would overflow the popover's height, preventing scrolling. It's a
+   * quirk of flexbox that forces the content to shrink to fit.
+   *
+   * overflow: hidden can't be used here because it prevents the visual
+   * effect from showing on translucent headers.
+   */
+  min-height: 0;
+
   contain: none;
 }
 :host(.content-sizing) .inner-scroll {
   position: relative;
+
+  /**
+   * Because the outer content has display: flex here (to help enable
+   * scrolling in a popover), offsetting via `top` (such as when using
+   * a translucent header) creates white space under the content. Use
+   * a negative margin instead to keep the bottom in place. (A similar
+   * thing happens with `bottom` and footers.)
+   */
+  top: 0;
+  bottom: 0;
+  
+  margin-top: calc(var(--offset-top) * -1);
+  margin-bottom: calc(var(--offset-bottom) * -1);
 }
 
 .transition-effect {
@@ -199,4 +226,15 @@
 
 ::slotted([slot="fixed"]) {
   position: absolute;
+
+  /**
+   * When presenting ion-content inside of an ion-modal, the .inner-scroll
+   * element is composited. In WebKit, the fixed content is not composited
+   * causing it to appear under the main scrollable content as a result.
+   * The fixed content is correctly composited in other browsers. Adding
+   * the translateZ forces the fixed content to be composited so it correctly
+   * shows on top of the scrollable content. Setting a negative z-index will
+   * still allow the fixed content to appear under the scroll content if specified.
+   */
+  transform: translateZ(0);
 }

core/src/components/content/content.tsx

@@ -119,14 +119,6 @@ export class Content implements ComponentInterface {
     this.resize();
   }
 
-  @Listen('click', { capture: true })
-  onClick(ev: Event) {
-    if (this.isScrolling) {
-      ev.preventDefault();
-      ev.stopPropagation();
-    }
-  }
-
   private shouldForceOverscroll() {
     const { forceOverscroll } = this;
     const mode = getIonMode(this);
@@ -374,10 +366,17 @@ const getPageElement = (el: HTMLElement) => {
   if (tabs) {
     return tabs;
   }
-  const page = el.closest('ion-app,ion-page,.ion-page,page-inner');
+
+  /**
+   * If we're in a popover, we need to use its wrapper so we can account for space
+   * between the popover and the edges of the screen. But if the popover contains
+   * its own page element, we should use that instead.
+   */
+  const page = el.closest('ion-app, ion-page, .ion-page, page-inner, .popover-content');
   if (page) {
     return page;
   }
+
   return getParentElement(el);
 };
 

core/src/components/datetime/readme.md

@@ -792,31 +792,31 @@ export default defineComponent({
 
 ## Properties
 
-| Property          | Attribute           | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default         |
-| ----------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- |
-| `cancelText`      | `cancel-text`       | The text to display on the picker's cancel button.                                                                                                                                                                                                                                                                                                                                                                                                                                                | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'Cancel'`      |
-| `dayNames`        | `day-names`         | Full day of the week names. This can be used to provide locale names for each day in the week. Defaults to English.                                                                                                                                                                                                                                                                                                                                                                               | `string \| string[] \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                    | `undefined`     |
-| `dayShortNames`   | `day-short-names`   | Short abbreviated day of the week names. This can be used to provide locale names for each day in the week. Defaults to English. Defaults to: `['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']`                                                                                                                                                                                                                                                                                                 | `string \| string[] \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                    | `undefined`     |
-| `dayValues`       | `day-values`        | Values used to create the list of selectable days. By default every day is shown for the given month. However, to control exactly which days of the month to display, the `dayValues` input can take a number, an array of numbers, or a string of comma separated numbers. Note that even if the array days have an invalid number for the selected month, like `31` in February, it will correctly not show days which are not valid for the selected month.                                    | `number \| number[] \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined`     |
-| `disabled`        | `disabled`          | If `true`, the user cannot interact with the datetime.                                                                                                                                                                                                                                                                                                                                                                                                                                            | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`         |
-| `displayFormat`   | `display-format`    | The display format of the date and time as text that shows within the item. When the `pickerFormat` input is not used, then the `displayFormat` is used for both display the formatted text, and determining the datetime picker's columns. See the `pickerFormat` input description for more info. Defaults to `MMM D, YYYY`.                                                                                                                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'MMM D, YYYY'` |
-| `displayTimezone` | `display-timezone`  | The timezone to use for display purposes only. See [Date.prototype.toLocaleString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) for a list of supported timezones. If no value is provided, the component will default to displaying times in the user's local timezone.                                                                                                                                                               | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined`     |
-| `doneText`        | `done-text`         | The text to display on the picker's "Done" button.                                                                                                                                                                                                                                                                                                                                                                                                                                                | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'Done'`        |
-| `hourValues`      | `hour-values`       | Values used to create the list of selectable hours. By default the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, to control exactly which hours to display, the `hourValues` input can take a number, an array of numbers, or a string of comma separated numbers.                                                                                                                                                                                         | `number \| number[] \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined`     |
-| `max`             | `max`               | The maximum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the maximum could just be the year, such as `1994`. Defaults to the end of this year.                                                                                                                                                                  | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined`     |
-| `min`             | `min`               | The minimum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), such as `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the minimum could just be the year, such as `1994`. Defaults to the beginning of the year, 100 years ago from today.                                                                                                                           | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined`     |
-| `minuteValues`    | `minute-values`     | Values used to create the list of selectable minutes. By default the minutes range from `0` to `59`. However, to control exactly which minutes to display, the `minuteValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if the minute selections should only be every 15 minutes, then this input value would be `minuteValues="0,15,30,45"`.                                                                                            | `number \| number[] \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined`     |
-| `mode`            | `mode`              | The mode determines which platform styles to use.                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `"ios" \| "md"`                                                                                                                                                                                                                                                                                                                                                                                                                                      | `undefined`     |
-| `monthNames`      | `month-names`       | Full names for each month name. This can be used to provide locale month names. Defaults to English.                                                                                                                                                                                                                                                                                                                                                                                              | `string \| string[] \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                    | `undefined`     |
-| `monthShortNames` | `month-short-names` | Short abbreviated names for each month name. This can be used to provide locale month names. Defaults to English.                                                                                                                                                                                                                                                                                                                                                                                 | `string \| string[] \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                    | `undefined`     |
-| `monthValues`     | `month-values`      | Values used to create the list of selectable months. By default the month values range from `1` to `12`. However, to control exactly which months to display, the `monthValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if only summer months should be shown, then this input value would be `monthValues="6,7,8"`. Note that month numbers do *not* have a zero-based index, meaning January's value is `1`, and December's is `12`. | `number \| number[] \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined`     |
-| `name`            | `name`              | The name of the control, which is submitted with the form data.                                                                                                                                                                                                                                                                                                                                                                                                                                   | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                             | `this.inputId`  |
-| `pickerFormat`    | `picker-format`     | The format of the date and time picker columns the user selects. A datetime input can have one or many datetime parts, each getting their own column which allow individual selection of that particular datetime part. For example, year and month columns are two individually selectable columns which help choose an exact date from the datetime picker. Each column follows the string parse format. Defaults to use `displayFormat`.                                                       | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined`     |
-| `pickerOptions`   | --                  | Any additional options that the picker interface can accept. See the [Picker API docs](../picker) for the picker options.                                                                                                                                                                                                                                                                                                                                                                         | `undefined \| { columns?: PickerColumn[] \| undefined; buttons?: PickerButton[] \| undefined; cssClass?: string \| string[] \| undefined; showBackdrop?: boolean \| undefined; backdropDismiss?: boolean \| undefined; animated?: boolean \| undefined; mode?: Mode \| undefined; keyboardClose?: boolean \| undefined; id?: string \| undefined; enterAnimation?: AnimationBuilder \| undefined; leaveAnimation?: AnimationBuilder \| undefined; }` | `undefined`     |
-| `placeholder`     | `placeholder`       | The text to display when there's no date selected yet. Using lowercase to match the input attribute                                                                                                                                                                                                                                                                                                                                                                                               | `null \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                        | `undefined`     |
-| `readonly`        | `readonly`          | If `true`, the datetime appears normal but is not interactive.                                                                                                                                                                                                                                                                                                                                                                                                                                    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`         |
-| `value`           | `value`             | The value of the datetime as a valid ISO 8601 datetime string.                                                                                                                                                                                                                                                                                                                                                                                                                                    | `null \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                        | `undefined`     |
-| `yearValues`      | `year-values`       | Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`.                                                                         | `number \| number[] \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined`     |
+| Property          | Attribute           | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default         |
+| ----------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- |
+| `cancelText`      | `cancel-text`       | The text to display on the picker's cancel button.                                                                                                                                                                                                                                                                                                                                                                                                                                                | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'Cancel'`      |
+| `dayNames`        | `day-names`         | Full day of the week names. This can be used to provide locale names for each day in the week. Defaults to English.                                                                                                                                                                                                                                                                                                                                                                               | `string \| string[] \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `undefined`     |
+| `dayShortNames`   | `day-short-names`   | Short abbreviated day of the week names. This can be used to provide locale names for each day in the week. Defaults to English. Defaults to: `['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']`                                                                                                                                                                                                                                                                                                 | `string \| string[] \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `undefined`     |
+| `dayValues`       | `day-values`        | Values used to create the list of selectable days. By default every day is shown for the given month. However, to control exactly which days of the month to display, the `dayValues` input can take a number, an array of numbers, or a string of comma separated numbers. Note that even if the array days have an invalid number for the selected month, like `31` in February, it will correctly not show days which are not valid for the selected month.                                    | `number \| number[] \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined`     |
+| `disabled`        | `disabled`          | If `true`, the user cannot interact with the datetime.                                                                                                                                                                                                                                                                                                                                                                                                                                            | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`         |
+| `displayFormat`   | `display-format`    | The display format of the date and time as text that shows within the item. When the `pickerFormat` input is not used, then the `displayFormat` is used for both display the formatted text, and determining the datetime picker's columns. See the `pickerFormat` input description for more info. Defaults to `MMM D, YYYY`.                                                                                                                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'MMM D, YYYY'` |
+| `displayTimezone` | `display-timezone`  | The timezone to use for display purposes only. See [Date.prototype.toLocaleString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) for a list of supported timezones. If no value is provided, the component will default to displaying times in the user's local timezone.                                                                                                                                                               | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined`     |
+| `doneText`        | `done-text`         | The text to display on the picker's "Done" button.                                                                                                                                                                                                                                                                                                                                                                                                                                                | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'Done'`        |
+| `hourValues`      | `hour-values`       | Values used to create the list of selectable hours. By default the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, to control exactly which hours to display, the `hourValues` input can take a number, an array of numbers, or a string of comma separated numbers.                                                                                                                                                                                         | `number \| number[] \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined`     |
+| `max`             | `max`               | The maximum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the maximum could just be the year, such as `1994`. Defaults to the end of this year.                                                                                                                                                                  | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined`     |
+| `min`             | `min`               | The minimum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), such as `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the minimum could just be the year, such as `1994`. Defaults to the beginning of the year, 100 years ago from today.                                                                                                                           | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined`     |
+| `minuteValues`    | `minute-values`     | Values used to create the list of selectable minutes. By default the minutes range from `0` to `59`. However, to control exactly which minutes to display, the `minuteValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if the minute selections should only be every 15 minutes, then this input value would be `minuteValues="0,15,30,45"`.                                                                                            | `number \| number[] \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined`     |
+| `mode`            | `mode`              | The mode determines which platform styles to use.                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `"ios" \| "md"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `undefined`     |
+| `monthNames`      | `month-names`       | Full names for each month name. This can be used to provide locale month names. Defaults to English.                                                                                                                                                                                                                                                                                                                                                                                              | `string \| string[] \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `undefined`     |
+| `monthShortNames` | `month-short-names` | Short abbreviated names for each month name. This can be used to provide locale month names. Defaults to English.                                                                                                                                                                                                                                                                                                                                                                                 | `string \| string[] \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `undefined`     |
+| `monthValues`     | `month-values`      | Values used to create the list of selectable months. By default the month values range from `1` to `12`. However, to control exactly which months to display, the `monthValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if only summer months should be shown, then this input value would be `monthValues="6,7,8"`. Note that month numbers do *not* have a zero-based index, meaning January's value is `1`, and December's is `12`. | `number \| number[] \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined`     |
+| `name`            | `name`              | The name of the control, which is submitted with the form data.                                                                                                                                                                                                                                                                                                                                                                                                                                   | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `this.inputId`  |
+| `pickerFormat`    | `picker-format`     | The format of the date and time picker columns the user selects. A datetime input can have one or many datetime parts, each getting their own column which allow individual selection of that particular datetime part. For example, year and month columns are two individually selectable columns which help choose an exact date from the datetime picker. Each column follows the string parse format. Defaults to use `displayFormat`.                                                       | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined`     |
+| `pickerOptions`   | --                  | Any additional options that the picker interface can accept. See the [Picker API docs](../picker) for the picker options.                                                                                                                                                                                                                                                                                                                                                                         | `undefined \| { columns?: PickerColumn[] \| undefined; buttons?: PickerButton[] \| undefined; cssClass?: string \| string[] \| undefined; showBackdrop?: boolean \| undefined; backdropDismiss?: boolean \| undefined; animated?: boolean \| undefined; mode?: Mode \| undefined; keyboardClose?: boolean \| undefined; id?: string \| undefined; htmlAttributes?: PickerAttributes \| undefined; enterAnimation?: AnimationBuilder \| undefined; leaveAnimation?: AnimationBuilder \| undefined; }` | `undefined`     |
+| `placeholder`     | `placeholder`       | The text to display when there's no date selected yet. Using lowercase to match the input attribute                                                                                                                                                                                                                                                                                                                                                                                               | `null \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `undefined`     |
+| `readonly`        | `readonly`          | If `true`, the datetime appears normal but is not interactive.                                                                                                                                                                                                                                                                                                                                                                                                                                    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`         |
+| `value`           | `value`             | The value of the datetime as a valid ISO 8601 datetime string.                                                                                                                                                                                                                                                                                                                                                                                                                                    | `null \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `undefined`     |
+| `yearValues`      | `year-values`       | Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`.                                                                         | `number \| number[] \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined`     |
 
 
 ## Events

core/src/components/header/header.tsx

@@ -1,8 +1,11 @@
 import { Component, ComponentInterface, Element, Host, Prop, h, writeTask } from '@stencil/core';
 
 import { getIonMode } from '../../global/ionic-global';
+import { inheritAriaAttributes } from '../../utils/helpers';
+import { hostContext } from '../../utils/theme';
 
 import { cloneElement, createHeaderIndex, handleContentScroll, handleToolbarIntersection, setHeaderActive, setToolbarBackgroundOpacity } from './header.utils';
+
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
@@ -20,6 +23,7 @@ export class Header implements ComponentInterface {
   private contentScrollCallback?: any;
   private intersectionObserver?: any;
   private collapsibleMainHeader?: HTMLElement;
+  private inheritedAttributes: { [k: string]: any } = {};
 
   @Element() el!: HTMLElement;
 
@@ -41,6 +45,10 @@ export class Header implements ComponentInterface {
    */
   @Prop() translucent = false;
 
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAriaAttributes(this.el);
+  }
+
   async componentDidLoad() {
     await this.checkCollapsibleHeader();
   }
@@ -143,12 +151,16 @@ export class Header implements ComponentInterface {
   }
 
   render() {
-    const { translucent } = this;
+    const { translucent, inheritedAttributes } = this;
     const mode = getIonMode(this);
     const collapse = this.collapse || 'none';
+
+    // banner role must be at top level, so remove role if inside a menu
+    const roleType = hostContext('ion-menu', this.el) ? 'none' : 'banner';
+
     return (
       <Host
-        role="banner"
+        role={roleType}
         class={{
           [mode]: true,
 
@@ -159,6 +171,7 @@ export class Header implements ComponentInterface {
           [`header-collapse-${collapse}`]: true,
           [`header-translucent-${mode}`]: this.translucent,
         }}
+        {...inheritedAttributes}
       >
         { mode === 'ios' && translucent &&
           <div class="header-background"></div>

core/src/components/header/test/a11y/e2e.ts

@@ -0,0 +1,11 @@
+import { newE2EPage } from '@stencil/core/testing';
+import { AxePuppeteer } from '@axe-core/puppeteer';
+
+test('header: axe', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/header/test/a11y?ionic:_testing=true'
+  });
+
+  const results = await new AxePuppeteer(page).analyze();
+  expect(results.violations.length).toEqual(0);
+});

core/src/components/header/test/a11y/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8">
+    <title>Header - a11y</title>
+    <meta name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+    <link href="../../../../../css/core.css" rel="stylesheet">
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body>
+    <ion-header></ion-header>
+    <main>
+      <h1>Headers</h1>
+      <ion-header role="none"></ion-header>
+    </main>
+  </body>
+</html>

core/src/components/infinite-scroll-content/readme.md

@@ -2,10 +2,6 @@
 
 The `ion-infinite-scroll-content` component is the default child used by the `ion-infinite-scroll`. It displays an infinite scroll spinner that looks best based on the platform and changes the look depending on the infinite scroll's state. The default spinner can be changed and text can be added by setting the `loadingSpinner` and `loadingText` properties.
 
-## React
-
-The `ion-infinite-scroll-content` component is not supported in React.
-
 <!-- Auto Generated Below -->
 
 
@@ -39,6 +35,25 @@ The `ion-infinite-scroll-content` component is not supported in React.
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+import { IonContent, IonInfiniteScroll, IonInfiniteScrollContent } from '@ionic/react';
+
+export const InfiniteScrollExample: React.FC = () => (
+  <IonContent>
+    <IonInfiniteScroll>
+      <IonInfiniteScrollContent
+        loadingSpinner="bubbles"
+        loadingText="Loading more data...">
+      </IonInfiniteScrollContent>
+    </IonInfiniteScroll>
+  </IonContent>
+);
+```
+
+
 ### Stencil
 
 ```tsx

core/src/components/infinite-scroll-content/usage/react.md

@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonContent, IonInfiniteScroll, IonInfiniteScrollContent } from '@ionic/react';
+
+export const InfiniteScrollExample: React.FC = () => (
+  <IonContent>
+    <IonInfiniteScroll>
+      <IonInfiniteScrollContent
+        loadingSpinner="bubbles"
+        loadingText="Loading more data...">
+      </IonInfiniteScrollContent>
+    </IonInfiniteScroll>
+  </IonContent>
+);
+```

core/src/components/infinite-scroll/readme.md

@@ -111,6 +111,104 @@ function toggleInfiniteScroll() {
 ```
 
 
+### React
+
+```tsx
+import { 
+  IonButton,
+  IonContent, 
+  IonHeader,
+  IonInfiniteScroll, 
+  IonInfiniteScrollContent, 
+  IonItem,
+  IonLabel,
+  IonList,  
+  IonPage, 
+  IonTitle, 
+  IonToolbar,
+  useIonViewWillEnter
+} from '@ionic/react';
+import { useState } from 'react';
+
+const InfiniteScrollExample: React.FC = () => {
+  const [data, setData] = useState<string[]>([]);
+  const [isInfiniteDisabled, setInfiniteDisabled] = useState(false);
+  
+  const pushData = () => {
+    const max = data.length + 20;
+    const min = max - 20;
+    const newData = [];
+    for (let i = min; i < max; i++) {
+      newData.push('Item' + i);
+    }
+    
+    setData([
+      ...data,
+      ...newData
+    ]);
+  }
+  const loadData = (ev: any) => {
+    setTimeout(() => {
+      pushData();
+      console.log('Loaded data');
+      ev.target.complete();
+      if (data.length == 1000) {
+        setInfiniteDisabled(true);
+      }
+    }, 500);
+  }  
+  
+  useIonViewWillEnter(() => {
+    pushData();
+  });
+  
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Blank</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Blank</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        
+        <IonButton onClick={() => setInfiniteDisabled(!isInfiniteDisabled)} expand="block">
+          Toggle Infinite Scroll
+        </IonButton>
+        
+        <IonList>
+          {data.map((item, index) => {
+            return (
+              <IonItem key={index}>
+                <IonLabel>{item}</IonLabel>
+              </IonItem>
+            )
+          })}
+        </IonList>
+        
+        <IonInfiniteScroll
+          onIonInfinite={loadData}
+          threshold="100px"
+          disabled={isInfiniteDisabled}
+        >
+          <IonInfiniteScrollContent
+            loadingSpinner="bubbles"
+            loadingText="Loading more data..."
+          ></IonInfiniteScrollContent>
+        </IonInfiniteScroll>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default InfiniteScrollExample;
+```
+
+
 ### Stencil
 
 ```tsx

core/src/components/infinite-scroll/usage/react.md

@@ -0,0 +1,94 @@
+```tsx
+import { 
+  IonButton,
+  IonContent, 
+  IonHeader,
+  IonInfiniteScroll, 
+  IonInfiniteScrollContent, 
+  IonItem,
+  IonLabel,
+  IonList,  
+  IonPage, 
+  IonTitle, 
+  IonToolbar,
+  useIonViewWillEnter
+} from '@ionic/react';
+import { useState } from 'react';
+
+const InfiniteScrollExample: React.FC = () => {
+  const [data, setData] = useState<string[]>([]);
+  const [isInfiniteDisabled, setInfiniteDisabled] = useState(false);
+  
+  const pushData = () => {
+    const max = data.length + 20;
+    const min = max - 20;
+    const newData = [];
+    for (let i = min; i < max; i++) {
+      newData.push('Item' + i);
+    }
+    
+    setData([
+      ...data,
+      ...newData
+    ]);
+  }
+  const loadData = (ev: any) => {
+    setTimeout(() => {
+      pushData();
+      console.log('Loaded data');
+      ev.target.complete();
+      if (data.length == 1000) {
+        setInfiniteDisabled(true);
+      }
+    }, 500);
+  }  
+  
+  useIonViewWillEnter(() => {
+    pushData();
+  });
+  
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Blank</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Blank</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        
+        <IonButton onClick={() => setInfiniteDisabled(!isInfiniteDisabled)} expand="block">
+          Toggle Infinite Scroll
+        </IonButton>
+        
+        <IonList>
+          {data.map((item, index) => {
+            return (
+              <IonItem key={index}>
+                <IonLabel>{item}</IonLabel>
+              </IonItem>
+            )
+          })}
+        </IonList>
+        
+        <IonInfiniteScroll
+          onIonInfinite={loadData}
+          threshold="100px"
+          disabled={isInfiniteDisabled}
+        >
+          <IonInfiniteScrollContent
+            loadingSpinner="bubbles"
+            loadingText="Loading more data..."
+          ></IonInfiniteScrollContent>
+        </IonInfiniteScroll>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default InfiniteScrollExample;
+```

core/src/components/input/input.tsx

@@ -1,8 +1,14 @@
 import { Build, Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, State, Watch, h } from '@stencil/core';
 
 import { getIonMode } from '../../global/ionic-global';
-import { AutocompleteTypes, Color, InputChangeEventDetail, StyleEventDetail, TextFieldTypes } from '../../interface';
-import { debounceEvent, findItemLabel, inheritAttributes } from '../../utils/helpers';
+import type {
+  AutocompleteTypes,
+  Color,
+  InputChangeEventDetail,
+  StyleEventDetail,
+  TextFieldTypes,
+} from '../../interface';
+import { debounceEvent, findItemLabel, inheritAriaAttributes, inheritAttributes } from '../../utils/helpers';
 import { createColorClasses } from '../../utils/theme';
 
 /**
@@ -234,7 +240,10 @@ export class Input implements ComponentInterface {
   }
 
   componentWillLoad() {
-    this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);
+    this.inheritedAttributes = {
+      ...inheritAriaAttributes(this.el),
+      ...inheritAttributes(this.el, ['tabindex', 'title']),
+    };
   }
 
   connectedCallback() {

core/src/components/item-sliding/item-sliding.tsx

@@ -270,6 +270,13 @@ export class ItemSliding implements ComponentInterface {
   }
 
   private onStart() {
+    /**
+     * We need to query for the ion-item
+     * every time the gesture starts. Developers
+     * may toggle ion-item elements via *ngIf.
+     */
+    this.item = this.el.querySelector('ion-item');
+
     // Prevent scrolling during gesture
     this.disableContentScrollY();
 
@@ -387,16 +394,28 @@ export class ItemSliding implements ComponentInterface {
         ? SlidingState.Start | SlidingState.SwipeStart
         : SlidingState.Start;
     } else {
+      /**
+       * Item sliding cannot be interrupted
+       * while closing the item. If it did,
+       * it would allow the item to get into an
+       * inconsistent state where multiple
+       * items are then open at the same time.
+       */
+      if (this.gesture) {
+        this.gesture.enable(false);
+      }
       this.tmr = setTimeout(() => {
         this.state = SlidingState.Disabled;
         this.tmr = undefined;
+        if (this.gesture) {
+          this.gesture.enable(true);
+        }
       }, 600) as any;
 
       openSlidingItem = undefined;
       style.transform = '';
       return;
     }
-
     style.transform = `translate3d(${-openAmount}px,0,0)`;
     this.ionDrag.emit({
       amount: openAmount,

core/src/components/item-sliding/test/basic/index.html

@@ -41,6 +41,7 @@
         <ion-button expand="block" onclick="openItem('start')">Open Item Start</ion-button>
         <ion-button expand="block" onclick="openItem('end')">Open Item End</ion-button>
         <ion-button expand="block" onclick="openItemOneSide()">Open Item with only one side</ion-button>
+        <ion-button expand="block" onclick="setDynaicItem()">Swap dynamic item</ion-button>
       </div>
 
       <ion-list id="list">
@@ -369,6 +370,17 @@
             </ion-item-options>
           </ion-item-sliding>
 
+          <ion-item-sliding id="dynamic-item">
+            <ion-item>
+              <ion-label>Dynamic First Item</ion-label>
+            </ion-item>
+            <ion-item-options side="end">
+              <ion-item-option color="tertiary" expandable>
+                First Item Options
+              </ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+
           <ion-item>
             <ion-label class="ion-text-wrap">
               <h2>Normal ion-item (no sliding)</h2>
@@ -387,6 +399,20 @@
       </ion-list>
 
       <script>
+        const setDynaicItem = () => {
+          const sliding = document.querySelector('#dynamic-item');
+          sliding.innerHTML = `
+            <ion-item>
+              <ion-label>Dynamic Second Item</ion-label>
+            </ion-item>
+            <ion-item-options side="end">
+              <ion-item-option color="tertiary" expandable>
+                Second Item Options
+              </ion-item-option>
+            </ion-item-options>
+          `
+        }
+
         var dynamicSlidingEnabled = document.getElementsByClassName('sliding-enabled');
 
         // Toggle the dynamic options

core/src/components/item/item.tsx

@@ -35,6 +35,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
   @Element() el!: HTMLIonItemElement;
 
   @State() multipleInputs = false;
+  @State() focusable = true;
 
   /**
    * The color to use from your application's color palette.
@@ -173,7 +174,10 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
   }
 
   componentDidLoad() {
-    raf(() => this.setMultipleInputs());
+    raf(() => {
+      this.setMultipleInputs();
+      this.focusable = this.isFocusable();
+    });
   }
 
   // If the item contains multiple clickable elements and/or inputs, then the item
@@ -217,6 +221,11 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
     return (this.isClickable() || this.hasCover());
   }
 
+  private isFocusable(): boolean {
+    const focusableChild = this.el.querySelector('.ion-focusable');
+    return (this.canActivate() || focusableChild !== null);
+  }
+
   private getFirstInput(): HTMLIonInputElement | HTMLIonTextareaElement {
     const inputs = this.el.querySelectorAll('ion-input, ion-textarea') as NodeListOf<HTMLIonInputElement | HTMLIonTextareaElement>;
     return inputs[0];
@@ -289,7 +298,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
             'in-list': hostContext('ion-list', this.el),
             'item-multiple-inputs': this.multipleInputs,
             'ion-activatable': canActivate,
-            'ion-focusable': true,
+            'ion-focusable': this.focusable
           })
         }}
       >

core/src/components/label/label.ios.scss

@@ -89,11 +89,10 @@
   color: #{$item-ios-paragraph-text-color};
 }
 
-:host-context(.ion-color)::slotted(p) {
+:host(.in-item-color)::slotted(p) {
   color: inherit;
 }
 
-
 ::slotted(*) h2:last-child,
 ::slotted(*) h3:last-child,
 ::slotted(*) h4:last-child,

core/src/components/label/label.md.scss

@@ -104,6 +104,6 @@
   color: $item-md-paragraph-text-color;
 }
 
-:host-context(.ion-color)::slotted(p) {
+:host(.in-item-color)::slotted(p) {
   color: inherit;
 }

core/src/components/label/label.tsx

@@ -2,7 +2,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop
 
 import { getIonMode } from '../../global/ionic-global';
 import { Color, StyleEventDetail } from '../../interface';
-import { createColorClasses } from '../../utils/theme';
+import { createColorClasses, hostContext } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@@ -101,6 +101,7 @@ export class Label implements ComponentInterface {
       <Host
         class={createColorClasses(this.color, {
           [mode]: true,
+          'in-item-color': hostContext('ion-item.ion-color', this.el),
           [`label-${position}`]: position !== undefined,
           [`label-no-animate`]: (this.noAnimate)
         })}

core/src/components/label/test/color/e2e.ts

@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('label: color', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/label/test/color?ionic:_testing=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});

core/src/components/label/test/color/index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8">
+    <title>Label - Color</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Label - Color</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content color="light">
+        <ion-item>
+          <ion-label>Label Text<p>This paragraph should not inherit the color from content</p></ion-label>
+        </ion-item>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>

core/src/components/loading/loading-interface.ts

@@ -1,3 +1,5 @@
+import { JSXBase } from '@stencil/core/internal';
+
 import { AnimationBuilder, Mode, SpinnerTypes } from '../../interface';
 import { IonicSafeString } from '../../utils/sanitization';
 
@@ -13,7 +15,10 @@ export interface LoadingOptions {
   mode?: Mode;
   keyboardClose?: boolean;
   id?: string;
+  htmlAttributes?: LoadingAttributes;
 
   enterAnimation?: AnimationBuilder;
   leaveAnimation?: AnimationBuilder;
 }
+
+export interface LoadingAttributes extends JSXBase.HTMLAttributes<HTMLElement> {}

core/src/components/loading/loading.tsx

@@ -2,7 +2,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Meth
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
-import { AnimationBuilder, OverlayEventDetail, OverlayInterface, SpinnerTypes } from '../../interface';
+import { AnimationBuilder, LoadingAttributes, OverlayEventDetail, OverlayInterface, SpinnerTypes } from '../../interface';
 import { BACKDROP, dismiss, eventMethod, prepareOverlay, present } from '../../utils/overlays';
 import { IonicSafeString, sanitizeDOMString } from '../../utils/sanitization';
 import { getClassMap } from '../../utils/theme';
@@ -92,6 +92,11 @@ export class Loading implements ComponentInterface, OverlayInterface {
    */
   @Prop() animated = true;
 
+  /**
+   * Additional attributes to pass to the loader.
+   */
+  @Prop() htmlAttributes?: LoadingAttributes;
+
   /**
    * Emitted after the loading has presented.
    */
@@ -179,15 +184,16 @@ export class Loading implements ComponentInterface, OverlayInterface {
   }
 
   render() {
-    const { message, spinner } = this;
+    const { message, spinner, htmlAttributes } = this;
     const mode = getIonMode(this);
     return (
       <Host
-        onIonBackdropTap={this.onBackdropTap}
         tabindex="-1"
+        {...htmlAttributes as any}
         style={{
           zIndex: `${40000 + this.overlayIndex}`
         }}
+        onIonBackdropTap={this.onBackdropTap}
         class={{
           ...getClassMap(this.cssClass),
           [mode]: true,

core/src/components/loading/readme.md

@@ -54,12 +54,19 @@ interface LoadingOptions {
   mode?: Mode;
   keyboardClose?: boolean;
   id?: string;
+  htmlAttributes?: LoadingAttributes;
 
   enterAnimation?: AnimationBuilder;
   leaveAnimation?: AnimationBuilder;
 }
 ```
 
+### LoadingAttributes
+
+```typescript
+interface LoadingAttributes extends JSXBase.HTMLAttributes<HTMLElement> {}
+```
+
 <!-- Auto Generated Below -->
 
 
@@ -375,6 +382,7 @@ export default defineComponent({
 | `cssClass`        | `css-class`        | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.                                                                                                                 | `string \| string[] \| undefined`                                                                               | `undefined` |
 | `duration`        | `duration`         | Number of milliseconds to wait before dismissing the loading indicator.                                                                                                                                                          | `number`                                                                                                        | `0`         |
 | `enterAnimation`  | --                 | Animation to use when the loading indicator is presented.                                                                                                                                                                        | `((baseEl: any, opts?: any) => Animation) \| undefined`                                                         | `undefined` |
+| `htmlAttributes`  | --                 | Additional attributes to pass to the loader.                                                                                                                                                                                     | `LoadingAttributes \| undefined`                                                                                | `undefined` |
 | `keyboardClose`   | `keyboard-close`   | If `true`, the keyboard will be automatically dismissed when the overlay is presented.                                                                                                                                           | `boolean`                                                                                                       | `true`      |
 | `leaveAnimation`  | --                 | Animation to use when the loading indicator is dismissed.                                                                                                                                                                        | `((baseEl: any, opts?: any) => Animation) \| undefined`                                                         | `undefined` |
 | `message`         | `message`          | Optional text content to display in the loading indicator.                                                                                                                                                                       | `IonicSafeString \| string \| undefined`                                                                        | `undefined` |

core/src/components/loading/test/basic/e2e.ts

@@ -95,3 +95,19 @@ test('loading:rtl: backdrop standalone', async () => {
 test('loading:rtl: html content basic', async () => {
   await testLoading(DIRECTORY, '#html-content-loading', true);
 });
+
+test('loading: htmlAttributes', async () => {
+  const page = await newE2EPage({ url: '/src/components/loading/test/basic?ionic:_testing=true' });
+
+  await page.click('#basic-loading');
+  await page.waitForSelector('#basic-loading');
+
+  let alert = await page.find('ion-loading');
+
+  expect(alert).not.toBe(null);
+  await alert.waitForVisible();
+
+  const attribute = await page.evaluate((el) => document.querySelector('ion-loading').getAttribute('data-testid'));
+
+  expect(attribute).toEqual('basic-loading');
+});

core/src/components/loading/test/basic/index.html

@@ -24,7 +24,7 @@
     </ion-header>
 
     <ion-content class="ion-padding">
-      <ion-button id="basic-loading" expand="block" onclick="openLoading({ message: 'Hellooo', duration: 2000 })">Show Loading</ion-button>
+      <ion-button id="basic-loading" expand="block" onclick="openLoading({ message: 'Hellooo', duration: 2000, htmlAttributes: { 'data-testid': 'basic-loading' } })">Show Loading</ion-button>
       <ion-button id="default" expand="block" onclick="openLoading({duration: 2000, content: 'Please wait...'})">Show Default Loading</ion-button>
       <ion-button id="long-content-loading" expand="block" onclick="openLoading({duration: 2000, message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})">Show Loading with long message</ion-button>
       <ion-button id="no-spinner-loading" expand="block" onclick="openLoading({duration: 2000, message: 'Please wait...', spinner: null})">Show Loading with no spinner</ion-button>

core/src/components/menu-button/menu-button.tsx

@@ -2,9 +2,9 @@ import { Component, ComponentInterface, Element, Host, Listen, Prop, State, h }
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
-import { Color } from '../../interface';
-import { ButtonInterface } from '../../utils/element-interface';
-import { inheritAttributes } from '../../utils/helpers';
+import type { Color } from '../../interface';
+import type { ButtonInterface } from '../../utils/element-interface';
+import { inheritAriaAttributes } from '../../utils/helpers';
 import { menuController } from '../../utils/menu-controller';
 import { createColorClasses, hostContext } from '../../utils/theme';
 import { updateVisibility } from '../menu-toggle/menu-toggle-util';
@@ -58,7 +58,7 @@ export class MenuButton implements ComponentInterface, ButtonInterface {
   @Prop() type: 'submit' | 'reset' | 'button' = 'button';
 
   componentWillLoad() {
-    this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
+    this.inheritedAttributes = inheritAriaAttributes(this.el);
   }
 
   componentDidLoad() {

core/src/components/menu/menu.tsx

@@ -5,13 +5,14 @@ import { getIonMode } from '../../global/ionic-global';
 import { Animation, Gesture, GestureDetail, MenuChangeEventDetail, MenuI, Side } from '../../interface';
 import { getTimeGivenProgression } from '../../utils/animation/cubic-bezier';
 import { GESTURE_CONTROLLER } from '../../utils/gesture';
-import { assert, clamp, isEndSide as isEnd } from '../../utils/helpers';
+import { assert, clamp, inheritAriaAttributes, isEndSide as isEnd } from '../../utils/helpers';
 import { menuController } from '../../utils/menu-controller';
 
 const iosEasing = 'cubic-bezier(0.32,0.72,0,1)';
 const mdEasing = 'cubic-bezier(0.0,0.0,0.2,1)';
 const iosEasingReverse = 'cubic-bezier(1, 0, 0.68, 0.28)';
 const mdEasingReverse = 'cubic-bezier(0.4, 0, 0.6, 1)';
+const focusableQueryString = '[tabindex]:not([tabindex^="-"]), input:not([type=hidden]):not([tabindex^="-"]), textarea:not([tabindex^="-"]), button:not([tabindex^="-"]), select:not([tabindex^="-"]), .ion-focusable:not([tabindex^="-"])';
 
 /**
  * @part container - The container for the menu content.
@@ -39,6 +40,11 @@ export class Menu implements ComponentInterface, MenuI {
   backdropEl?: HTMLElement;
   menuInnerEl?: HTMLElement;
   contentEl?: HTMLElement;
+  lastFocus?: HTMLElement;
+
+  private inheritedAttributes: { [k: string]: any } = {};
+
+  private handleFocus = (ev: Event) => this.trapKeyboardFocus(ev, document);
 
   @Element() el!: HTMLIonMenuElement;
 
@@ -159,6 +165,7 @@ export class Menu implements ComponentInterface, MenuI {
 
     const el = this.el;
     const parent = el.parentNode as any;
+
     if (this.contentId === undefined) {
       console.warn(`[DEPRECATED][ion-menu] Using the [main] attribute is deprecated, please use the "contentId" property instead:
 BEFORE:
@@ -205,6 +212,10 @@ AFTER:
     this.updateState();
   }
 
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAriaAttributes(this.el);
+  }
+
   async componentDidLoad() {
     this.ionMenuChange.emit({ disabled: this.disabled, open: this._isOpen });
     this.updateState();
@@ -246,6 +257,13 @@ AFTER:
     }
   }
 
+  @Listen('keydown')
+  onKeydown(ev: KeyboardEvent) {
+    if (ev.key === 'Escape') {
+      this.close();
+    }
+  }
+
   /**
    * Returns `true` is the menu is open.
    */
@@ -301,6 +319,65 @@ AFTER:
     return menuController._setOpen(this, shouldOpen, animated);
   }
 
+  private focusFirstDescendant() {
+    const { el } = this;
+    const firstInput = el.querySelector(focusableQueryString) as HTMLElement | null;
+
+    if (firstInput) {
+      firstInput.focus();
+    } else {
+      el.focus();
+    }
+  }
+
+  private focusLastDescendant() {
+    const { el } = this;
+    const inputs = Array.from(el.querySelectorAll<HTMLElement>(focusableQueryString));
+    const lastInput = inputs.length > 0 ? inputs[inputs.length - 1] : null;
+
+    if (lastInput) {
+      lastInput.focus();
+    } else {
+      el.focus();
+    }
+  }
+
+  private trapKeyboardFocus(ev: Event, doc: Document) {
+    const target = ev.target as HTMLElement | null;
+    if (!target) { return; }
+
+    /**
+     * If the target is inside the menu contents, let the browser
+     * focus as normal and keep a log of the last focused element.
+     */
+    if (this.el.contains(target)) {
+      this.lastFocus = target;
+    } else {
+      /**
+       * Otherwise, we are about to have focus go out of the menu.
+       * Wrap the focus to either the first or last element.
+       */
+
+      /**
+       * Once we call `focusFirstDescendant`, another focus event
+       * will fire, which will cause `lastFocus` to be updated
+       * before we can run the code after that. We cache the value
+       * here to avoid that.
+       */
+      this.focusFirstDescendant();
+
+      /**
+       * If the cached last focused element is the same as the now-
+       * active element, that means the user was on the first element
+       * already and pressed Shift + Tab, so we need to wrap to the
+       * last descendant.
+       */
+      if (this.lastFocus === doc.activeElement) {
+        this.focusLastDescendant();
+      }
+    }
+  }
+
   async _setOpen(shouldOpen: boolean, animated = true): Promise<boolean> {
     // If the menu is disabled or it is currently being animated, let's do nothing
     if (!this._isActive() || this.isAnimating || shouldOpen === this._isOpen) {
@@ -479,6 +556,16 @@ AFTER:
     // this places the menu into the correct location before it animates in
     // this css class doesn't actually kick off any animations
     this.el.classList.add(SHOW_MENU);
+
+    /**
+     * We add a tabindex here so that focus trapping
+     * still works even if the menu does not have
+     * any focusable elements slotted inside. The
+     * focus trapping utility will fallback to focusing
+     * the menu so focus does not leave when the menu
+     * is open.
+     */
+    this.el.setAttribute('tabindex', '0');
     if (this.backdropEl) {
       this.backdropEl.classList.add(SHOW_BACKDROP);
     }
@@ -505,19 +592,51 @@ AFTER:
     }
 
     if (isOpen) {
-      // add css class
+      // add css class and hide content behind menu from screen readers
       if (this.contentEl) {
         this.contentEl.classList.add(MENU_CONTENT_OPEN);
+
+        /**
+         * When the menu is open and overlaying the main
+         * content, the main content should not be announced
+         * by the screenreader as the menu is the main
+         * focus. This is useful with screenreaders that have
+         * "read from top" gestures that read the entire
+         * page from top to bottom when activated.
+         */
+        this.contentEl.setAttribute('aria-hidden', 'true');
       }
 
       // emit open event
       this.ionDidOpen.emit();
+
+      // focus menu content for screen readers
+      if (this.menuInnerEl) {
+        this.focusFirstDescendant();
+      }
+
+      // setup focus trapping
+      document.addEventListener('focus', this.handleFocus, true);
     } else {
-      // remove css classes
+      // remove css classes and unhide content from screen readers
       this.el.classList.remove(SHOW_MENU);
+
+      /**
+       * Remove tabindex from the menu component
+       * so that is cannot be tabbed to.
+       */
+      this.el.removeAttribute('tabindex');
       if (this.contentEl) {
         this.contentEl.classList.remove(MENU_CONTENT_OPEN);
+
+        /**
+         * Remove aria-hidden so screen readers
+         * can announce the main content again
+         * now that the menu is not the main focus.
+         */
+        this.contentEl.removeAttribute('aria-hidden');
       }
+
       if (this.backdropEl) {
         this.backdropEl.classList.remove(SHOW_BACKDROP);
       }
@@ -528,6 +647,9 @@ AFTER:
 
       // emit close event
       this.ionDidClose.emit();
+
+      // undo focus trapping so multiple menus don't collide
+      document.removeEventListener('focus', this.handleFocus, true);
     }
   }
 
@@ -561,12 +683,13 @@ AFTER:
   }
 
   render() {
-    const { isEndSide, type, disabled, isPaneVisible } = this;
+    const { isEndSide, type, disabled, isPaneVisible, inheritedAttributes } = this;
     const mode = getIonMode(this);
 
     return (
       <Host
         role="navigation"
+        aria-label={inheritedAttributes['aria-label'] || 'menu'}
         class={{
           [mode]: true,
           [`menu-type-${type}`]: true,

core/src/components/menu/test/a11y/e2e.ts

@@ -0,0 +1,15 @@
+import { newE2EPage } from '@stencil/core/testing';
+import { AxePuppeteer } from '@axe-core/puppeteer';
+
+test('menu: axe', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/menu/test/a11y?ionic:_testing=true'
+  });
+
+  const menu = await page.find('ion-menu');
+  await menu.callMethod('open');
+  await menu.waitForVisible();
+
+  const results = await new AxePuppeteer(page).analyze();
+  expect(results.violations.length).toEqual(0);
+});

core/src/components/menu/test/a11y/index.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Segment - a11y</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+  <link href="../../../../../css/core.css" rel="stylesheet">
+  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
+  <script src="../../../../../scripts/testing/scripts.js"></script>
+  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+</head>
+
+<body>
+  <main>
+    <h1>Menu</h1>
+    <ion-menu menu-id="menu" content-id="main-content">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Menu</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <ion-list>
+          <ion-item>
+            <ion-button>Button</ion-button>
+          </ion-item>
+          <ion-item>
+            <ion-button>Button 2</ion-button>
+          </ion-item>
+          <ion-item>Menu Item</ion-item>
+          <ion-item>Menu Item</ion-item>
+          <ion-item>Menu Item</ion-item>
+        </ion-list>
+      </ion-content>
+    </ion-menu>
+  </main>
+</body>
+
+</html>

core/src/components/menu/test/basic/e2e.ts

@@ -1,6 +1,11 @@
 import { testMenu } from '../test.utils';
+import { newE2EPage } from '@stencil/core/testing';
 
 const DIRECTORY = 'basic';
+const getActiveElementID = async (page) => {
+  const activeElement = await page.evaluateHandle(() => document.activeElement);
+  return await page.evaluate(el => el && el.id, activeElement);
+}
 
 test('menu: start menu', async () => {
   await testMenu(DIRECTORY, '#start-menu', 'first');
@@ -14,6 +19,21 @@ test('menu: end menu', async () => {
   await testMenu(DIRECTORY, '#end-menu');
 });
 
+test('menu: focus trap', async () => {
+  const page = await newE2EPage({ url: '/src/components/menu/test/basic?ionic:_testing=true' });
+
+  await page.click('#open-first');
+  const menu = await page.find('#start-menu');
+  await menu.waitForVisible();
+  
+  let activeElID = await getActiveElementID(page);
+  expect(activeElID).toEqual('start-menu-button');
+
+  await page.keyboard.press('Tab');
+  activeElID = await getActiveElementID(page);
+  expect(activeElID).toEqual('start-menu-button');
+});
+
 /**
  * RTL Tests
  */

core/src/components/menu/test/basic/index.html

@@ -24,7 +24,7 @@
 
 <body>
   <ion-app>
-    <ion-menu side="start" menu-id="first" id="start-menu" content-id="main" class="menu-part">
+    <ion-menu side="start" menu-id="first" id="start-menu" content-id="main" class="menu-part" aria-label="start menu">
       <ion-header>
         <ion-toolbar color="primary">
           <ion-title>Start Menu</ion-title>
@@ -32,6 +32,9 @@
       </ion-header>
       <ion-content>
         <ion-list>
+          <ion-item>
+            <ion-button id="start-menu-button">Button</ion-button>
+          </ion-item>
           <ion-item>Menu Item</ion-item>
           <ion-item>Menu Item</ion-item>
           <ion-item>Menu Item</ion-item>
@@ -82,7 +85,7 @@
         </ion-toolbar>
       </ion-header>
       <ion-content class="ion-padding">
-        <ion-button expand="block" onclick="openFirst()">Open Start Menu</ion-button>
+        <ion-button expand="block" id="open-first" onclick="openFirst()">Open Start Menu</ion-button>
         <ion-button expand="block" onclick="openEnd()">Open End Menu</ion-button>
         <ion-button expand="block" onclick="openCustom()">Open Custom Menu</ion-button>
       </ion-content>

core/src/components/modal/modal-interface.ts

@@ -1,3 +1,5 @@
+import { JSXBase } from '@stencil/core/internal';
+
 import { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate, Mode } from '../../interface';
 
 export interface ModalOptions<T extends ComponentRef = ComponentRef> {
@@ -14,7 +16,10 @@ export interface ModalOptions<T extends ComponentRef = ComponentRef> {
   mode?: Mode;
   keyboardClose?: boolean;
   id?: string;
+  htmlAttributes?: ModalAttributes;
 
   enterAnimation?: AnimationBuilder;
   leaveAnimation?: AnimationBuilder;
 }
+
+export interface ModalAttributes extends JSXBase.HTMLAttributes<HTMLElement> {}

core/src/components/modal/modal.tsx

@@ -2,7 +2,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Meth
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
-import { Animation, AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate, Gesture, OverlayEventDetail, OverlayInterface } from '../../interface';
+import { Animation, AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate, Gesture, ModalAttributes, OverlayEventDetail, OverlayInterface } from '../../interface';
 import { attachComponent, detachComponent } from '../../utils/framework-delegate';
 import { BACKDROP, activeAnimations, dismiss, eventMethod, prepareOverlay, present } from '../../utils/overlays';
 import { getClassMap } from '../../utils/theme';
@@ -102,6 +102,11 @@ export class Modal implements ComponentInterface, OverlayInterface {
    */
   @Prop() presentingElement?: HTMLElement;
 
+  /**
+   * Additional attributes to pass to the modal.
+   */
+  @Prop() htmlAttributes?: ModalAttributes;
+
   /**
    * Emitted after the modal has presented.
    */
@@ -265,6 +270,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
   }
 
   render() {
+    const { htmlAttributes } = this;
     const mode = getIonMode(this);
 
     return (
@@ -272,14 +278,15 @@ export class Modal implements ComponentInterface, OverlayInterface {
         no-router
         aria-modal="true"
         tabindex="-1"
+        {...htmlAttributes as any}
+        style={{
+          zIndex: `${20000 + this.overlayIndex}`,
+        }}
         class={{
           [mode]: true,
           [`modal-card`]: this.presentingElement !== undefined && mode === 'ios',
           ...getClassMap(this.cssClass)
         }}
-        style={{
-          zIndex: `${20000 + this.overlayIndex}`,
-        }}
         onIonBackdropTap={this.onBackdropTap}
         onIonDismiss={this.onDismiss}
         onIonModalDidPresent={this.onLifecycle}

core/src/components/modal/readme.md

@@ -60,12 +60,19 @@ interface ModalOptions<T extends ComponentRef = ComponentRef> {
   mode?: Mode;
   keyboardClose?: boolean;
   id?: string;
+  htmlAttributes?: ModalAttributes;
 
   enterAnimation?: AnimationBuilder;
   leaveAnimation?: AnimationBuilder;
 }
 ```
 
+### ModalAttributes
+
+```typescript
+interface ModalAttributes extends JSXBase.HTMLAttributes<HTMLElement> {}
+```
+
 
 <!-- Auto Generated Below -->
 
@@ -829,6 +836,7 @@ export default defineComponent({
 | `componentProps`         | --                 | The data to pass to the modal component.                                                                                                                          | `undefined \| { [key: string]: any; }`                  | `undefined` |
 | `cssClass`               | `css-class`        | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.                                                  | `string \| string[] \| undefined`                       | `undefined` |
 | `enterAnimation`         | --                 | Animation to use when the modal is presented.                                                                                                                     | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
+| `htmlAttributes`         | --                 | Additional attributes to pass to the modal.                                                                                                                       | `ModalAttributes \| undefined`                          | `undefined` |
 | `keyboardClose`          | `keyboard-close`   | If `true`, the keyboard will be automatically dismissed when the overlay is presented.                                                                            | `boolean`                                               | `true`      |
 | `leaveAnimation`         | --                 | Animation to use when the modal is dismissed.                                                                                                                     | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
 | `mode`                   | `mode`             | The mode determines which platform styles to use.                                                                                                                 | `"ios" \| "md"`                                         | `undefined` |

core/src/components/modal/test/basic/e2e.ts

@@ -71,3 +71,19 @@ test('modal: basic', async () => {
 test('modal:rtl: basic', async () => {
   await testModal(DIRECTORY, '#basic-modal', true);
 });
+
+test('modal: htmlAttributes', async () => {
+  const page = await newE2EPage({ url: '/src/components/modal/test/basic?ionic:_testing=true' });
+
+  await page.click('#basic-modal');
+  await page.waitForSelector('#basic-modal');
+
+  let alert = await page.find('ion-modal');
+
+  expect(alert).not.toBe(null);
+  await alert.waitForVisible();
+
+  const attribute = await page.evaluate((el) => document.querySelector('ion-modal').getAttribute('data-testid'));
+
+  expect(attribute).toEqual('basic-modal');
+});

core/src/components/modal/test/basic/index.html

@@ -67,7 +67,10 @@
 
       // present the modal
       const modalElement = Object.assign(document.createElement('ion-modal'), {
-        component: element
+        component: element,
+        htmlAttributes: {
+          'data-testid': 'basic-modal'
+        }
       });
       // listen for close event
       const button = element.querySelector('ion-button');

core/src/components/picker/picker-interface.ts

@@ -1,3 +1,5 @@
+import { JSXBase } from '@stencil/core/internal';
+
 import { AnimationBuilder, Mode } from '../../interface';
 
 export interface PickerOptions {
@@ -11,11 +13,14 @@ export interface PickerOptions {
   mode?: Mode;
   keyboardClose?: boolean;
   id?: string;
+  htmlAttributes?: PickerAttributes;
 
   enterAnimation?: AnimationBuilder;
   leaveAnimation?: AnimationBuilder;
 }
 
+export interface PickerAttributes extends JSXBase.HTMLAttributes<HTMLElement> {}
+
 export interface PickerButton {
   text?: string;
   role?: string;

core/src/components/picker/picker.tsx

@@ -1,7 +1,7 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, State, h } from '@stencil/core';
 
 import { getIonMode } from '../../global/ionic-global';
-import { AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface, PickerButton, PickerColumn } from '../../interface';
+import { AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface, PickerAttributes, PickerButton, PickerColumn } from '../../interface';
 import { BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall } from '../../utils/overlays';
 import { getClassMap } from '../../utils/theme';
 
@@ -81,6 +81,11 @@ export class Picker implements ComponentInterface, OverlayInterface {
    */
   @Prop() animated = true;
 
+  /**
+   * Additional attributes to pass to the picker.
+   */
+  @Prop() htmlAttributes?: PickerAttributes;
+
   /**
    * Emitted after the picker has presented.
    */
@@ -213,11 +218,16 @@ export class Picker implements ComponentInterface, OverlayInterface {
   }
 
   render() {
+    const { htmlAttributes } = this;
     const mode = getIonMode(this);
     return (
       <Host
         aria-modal="true"
         tabindex="-1"
+        {...htmlAttributes as any}
+        style={{
+          zIndex: `${20000 + this.overlayIndex}`
+        }}
         class={{
           [mode]: true,
 
@@ -226,9 +236,6 @@ export class Picker implements ComponentInterface, OverlayInterface {
 
           ...getClassMap(this.cssClass)
         }}
-        style={{
-          zIndex: `${20000 + this.overlayIndex}`
-        }}
         onIonBackdropTap={this.onBackdropTap}
         onIonPickerWillDismiss={this.dispatchCancelHandler}
       >