install dev build

.github/CODEOWNERS

@@ -13,7 +13,73 @@
 
 * @ionic-team/framework
 
+# Frameworks
+
+## Angular
+
+/packages/angular/ @sean-perkins @thetaPC
+/packages/angular-server @sean-perkins @thetaPC
+/packages/angular/test @thetaPC
+
+## React
+
+/packages/react/ @amandaejohnston
+/packages/react-router @amandaejohnston
+/packages/react/test-app/
+/packages/react-router/test-app/
+
+## Vue
+
+/packages/vue/ @liamdebeasi @thetaPC
+/packages/vue-router/ @liamdebeasi @thetaPC
+/packages/vue/test/ @thetaPC
+/packages/vue-router/__tests__ @thetaPC
+
+# Components
+
+/core/src/components/accordion/ @liamdebeasi
+/core/src/components/accordion-group/ @liamdebeasi
+
+/core/src/components/checkbox/ @amandaejohnston
+
+/core/src/components/datetime/ @liamdebeasi @amandaejohnston @sean-perkins
+/core/src/components/datetime-button/ @liamdebeasi
+
+/core/src/components/item/ @brandyscarney
+
+/core/src/components/menu/ @amandaejohnston
+/core/src/components/menu-toggle/ @amandaejohnston
+
+/core/src/components/nav/ @sean-perkins
+/core/src/components/nav-link/ @sean-perkins
+
+/core/src/components/picker-internal/ @liamdebeasi
+/core/src/components/picker-column-internal/ @liamdebeasi
+
+/core/src/components/radio/ @amandaejohnston
+/core/src/components/radio-group/ @amandaejohnston
+
+/core/src/components/refresher/ @liamdebeasi
+/core/src/components/refresher-content/ @liamdebeasi
+
+/core/src/components/searchbar/ @brandyscarney
+
+/core/src/components/segment/ @brandyscarney
+/core/src/components/segment-button/ @brandyscarney
+
+/core/src/components/skeleton-text/ @brandyscarney
+
 # Utilities
 
+/core/src/utils/animation/ @liamdebeasi
+/core/src/utils/content/ @sean-perkins
 /core/src/utils/gesture/ @liamdebeasi
 /core/src/utils/input-shims/ @liamdebeasi
+/core/src/utils/keyboard/ @liamdebeasi
+/core/src/utils/logging/ @amandaejohnston
+/core/src/utils/sanitization/ @liamdebeasi
+/core/src/utils/tap-click/ @liamdebeasi
+/core/src/utils/transition/ @liamdebeasi
+
+/core/src/css/ @brandyscarney
+/core/src/themes/ @brandyscarney

.github/COMPONENT-GUIDE.md

@@ -760,7 +760,7 @@ To work around this, you should set an RTL class on the host of your component a
 <Host
 class={{
   'my-cmp-rtl': document.dir === 'rtl'
-}}
+})
 >
  ...
 </Host>

.github/CONTRIBUTING.md

@@ -1,11 +1,10 @@
 # Contributing
 
-Thanks for your interest in contributing to the Ionic Framework! 🎉
+Thanks for your interest in contributing to the Ionic Framework! :tada:
 
 - [Contributing Etiquette](#contributing-etiquette)
 - [Creating an Issue](#creating-an-issue)
   * [Creating a Good Code Reproduction](#creating-a-good-code-reproduction)
-- [Using VS Code on Windows](#using-vs-code-on-windows)
 - [Creating a Pull Request](#creating-a-pull-request)
   * [Requirements](#requirements)
   * [Setup](#setup)
@@ -82,19 +81,6 @@ Without a reliable code reproduction, it is unlikely we will be able to resolve
 * **No secret code needed:** Creating a minimal reproduction of the issue prevents you from having to publish any proprietary code used in your project.
 * **Get help fixing the issue:** If we can reliably reproduce an issue, there is a good chance we will be able to address it.
 
-## Using VS Code on Windows
-
-To contribute on Windows, do the following:
-
-- Configure VS Code to read/save files using line breaks (LF) instead of carriage returns (CRLF). Set it globally by navigating to: Settings -> Text Editor -> Files -> Eol. Set to `\n`.
-
-  - You can optionally use the following settings in your `.vscode/settings.json`:
-    ```json
-    { "files.eol": "\n" }
-    ```
-
-- Check that the Git setting `core.autocrlf` is set to `false`: run `git config -l | grep autocrlf`. Switch it to false using: `git config --global core.autocrlf false`.
-- If you've already cloned the `ionic-framework` repo, the files may already be cached as LF. To undo this, you need to clean the cache files of the repository. Run the following (make sure you stage or commit your changes first): `git rm --cached -r .` then `git reset --hard`.
 
 ## Creating a Pull Request
 
@@ -260,14 +246,6 @@ npm install file:/~/ionic-vue-router-7.0.1.tgz
 
 #### Lint Changes
 
-> [!IMPORTANT]
-> If you are using a Windows machine, you will need to configure your local development environment to use the correct line endings.
-> - Check that the Git setting `core.autocrlf` is set to `false`: run `git config -l | grep autocrlf`. Switch it to false using: `git config --global core.autocrlf false`.
-> - If you've already cloned the `ionic-docs` repo, the files may already be cached as LF. To undo this, you need to clean the cache files of the repository. Run the following (make sure you stage or commit your changes first): `git rm --cached -r .` then `git reset --hard`.
-
-
-
-
 1. Run `npm run lint` to lint the TypeScript and Sass.
 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.
 3. To lint and fix only TypeScript errors, run `npm run lint.ts` and `npm run lint.ts.fix`, respectively.

.github/PULL_REQUEST_TEMPLATE.md

@@ -25,7 +25,7 @@ Issue number: resolves #
   If this introduces a breaking change:
   1. Describe the impact and migration path for existing applications below.
   2. Update the BREAKING.md file with the breaking change.
-  3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information.
+  3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information.
 -->
 
 

.github/workflows/assign-issues.yml

@@ -11,8 +11,8 @@ jobs:
       issues: write
     steps:
       - name: 'Auto-assign issue'
-        uses: pozil/auto-assign-issue@65947009a243e6b3993edeef4e64df3ca85d760c # v1.14.0
+        uses: pozil/auto-assign-issue@edee9537367a8fbc625d27f9e10aa8bad47b8723 # v1.13.0
         with:
-          assignees: liamdebeasi, sean-perkins, brandyscarney, amandaejohnston, thetaPC
+          assignees: liamdebeasi, sean-perkins, brandyscarney, amandaejohnston, mapsandapps, thetaPC
           numOfAssignee: 1
           allowSelfAssign: false

.github/workflows/release-ionic.yml

@@ -41,8 +41,8 @@ jobs:
       uses: ./.github/workflows/actions/upload-archive
       with:
         name: ionic-docs
-        output: packages/docs/DocsBuild.zip
-        paths: packages/docs/core.json packages/docs/core.d.ts
+        output: docs/DocsBuild.zip
+        paths: docs/core.json docs/core.d.ts
 
   release-docs:
     needs: [release-core]
@@ -53,7 +53,7 @@ jobs:
       uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-docs
-        path: ./packages/docs
+        path: ./docs
         filename: DocsBuild.zip
     - uses: ./.github/workflows/actions/publish-npm
       with:
@@ -61,7 +61,7 @@ jobs:
         tag: ${{ inputs.tag }}
         version: ${{ inputs.version }}
         preid: ${{ inputs.preid }}
-        working-directory: 'packages/docs'
+        working-directory: 'docs'
         token: ${{ secrets.NPM_TOKEN }}
 
   release-angular:

.github/workflows/release.yml

@@ -20,7 +20,10 @@ on:
         type: choice
         description: Which npm tag should this be published to?
         options:
-          - v7-lts
+          - latest
+          - next
+          - v5-lts
+          - v4-lts
       preid:
         type: choice
         description: Which prerelease identifier should be used? This is only needed when version is "prepatch", "preminor", "premajor", or "prerelease".

.vercelignore

@@ -1 +0,0 @@
-core/src/components/**/*/*.png

CHANGELOG.md

@@ -3,62 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [7.8.6](https://github.com/ionic-team/ionic-framework/compare/v7.8.5...v7.8.6) (2024-04-24)
-
-
-### Bug Fixes
-
-* **input:** clear button can be navigated using screen reader ([#29366](https://github.com/ionic-team/ionic-framework/issues/29366)) ([#29383](https://github.com/ionic-team/ionic-framework/issues/29383)) ([5ce0c60](https://github.com/ionic-team/ionic-framework/commit/5ce0c609f365aa497814067276b67fc4e58bdb35))
-
-
-
-
-
-## [7.8.5](https://github.com/ionic-team/ionic-framework/compare/v7.8.4...v7.8.5) (2024-04-17)
-
-
-### Bug Fixes
-
-* **modal:** improve sheet modal scrolling and gesture behavior ([#29312](https://github.com/ionic-team/ionic-framework/issues/29312)) ([9738228](https://github.com/ionic-team/ionic-framework/commit/9738228bc05abe3e2012e57b0e6b85f0ec06f66b)), closes [#24583](https://github.com/ionic-team/ionic-framework/issues/24583)
-
-
-
-
-
-## [7.8.4](https://github.com/ionic-team/ionic-framework/compare/v7.8.3...v7.8.4) (2024-04-10)
-
-
-### Performance Improvements
-
-* **styles:** compress distributed global stylesheets ([#29275](https://github.com/ionic-team/ionic-framework/issues/29275)) ([b3cd49b](https://github.com/ionic-team/ionic-framework/commit/b3cd49bf2219aacffc1ac34acbae7c76ef243765))
-
-
-
-
-
-## [7.8.3](https://github.com/ionic-team/ionic-framework/compare/v7.8.2...v7.8.3) (2024-04-03)
-
-
-### Bug Fixes
-
-* **button:** activated outline button in toolbar no longer blends into background on MD dark mode ([#29216](https://github.com/ionic-team/ionic-framework/issues/29216)) ([ee5da7a](https://github.com/ionic-team/ionic-framework/commit/ee5da7a747c0a0b420c5e371a9fe9ec4938d179e))
-* **popover:** viewport can be scrolled if no content present ([#29215](https://github.com/ionic-team/ionic-framework/issues/29215)) ([f08759c](https://github.com/ionic-team/ionic-framework/commit/f08759c2b8256ff66f8d1901bd8e0be4617db262)), closes [#29211](https://github.com/ionic-team/ionic-framework/issues/29211)
-
-
-
-
-
-## [7.8.2](https://github.com/ionic-team/ionic-framework/compare/v7.8.1...v7.8.2) (2024-03-27)
-
-
-### Bug Fixes
-
-* **searchbar:** autocapitalize is initialized correctly ([#29197](https://github.com/ionic-team/ionic-framework/issues/29197)) ([8ad66c0](https://github.com/ionic-team/ionic-framework/commit/8ad66c03d777edcab19c97cba696b171acc2d2e8)), closes [#29193](https://github.com/ionic-team/ionic-framework/issues/29193)
-
-
-
-
-
 ## [7.8.1](https://github.com/ionic-team/ionic-framework/compare/v7.8.0...v7.8.1) (2024-03-20)
 
 

README.md

@@ -20,7 +20,7 @@
   <a href="https://github.com/ionic-team/ionic-framework/blob/main/LICENSE">
     <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="Ionic Framework is released under the MIT license." />
   </a>
-  <a href="https://github.com/ionic-team/ionic/blob/main/docs/CONTRIBUTING.md">
+  <a href="https://github.com/ionic-team/ionic/blob/main/.github/CONTRIBUTING.md">
     <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome!" />
   </a>
   <a href="https://twitter.com/Ionicframework">
@@ -38,7 +38,7 @@
     Documentation
   </a>
   <span> · </span>
-  <a href="https://github.com/ionic-team/ionic/blob/main/docs/CONTRIBUTING.md">Contribute</a>
+  <a href="https://github.com/ionic-team/ionic/blob/main/.github/CONTRIBUTING.md">Contribute</a>
   <span> · </span>
   <a href="https://blog.ionicframework.com/">Blog</a>
   <br />
@@ -88,7 +88,7 @@ The Ionic Conference App is a full featured Ionic app. It is the perfect startin
 ### Contributing
 
 Thanks for your interest in contributing! Read up on our guidelines for
-[contributing](https://github.com/ionic-team/ionic/blob/main/docs/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.
 

core/CHANGELOG.md

@@ -3,62 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [7.8.6](https://github.com/ionic-team/ionic-framework/compare/v7.8.5...v7.8.6) (2024-04-24)
-
-
-### Bug Fixes
-
-* **input:** clear button can be navigated using screen reader ([#29366](https://github.com/ionic-team/ionic-framework/issues/29366)) ([#29383](https://github.com/ionic-team/ionic-framework/issues/29383)) ([5ce0c60](https://github.com/ionic-team/ionic-framework/commit/5ce0c609f365aa497814067276b67fc4e58bdb35))
-
-
-
-
-
-## [7.8.5](https://github.com/ionic-team/ionic-framework/compare/v7.8.4...v7.8.5) (2024-04-17)
-
-
-### Bug Fixes
-
-* **modal:** improve sheet modal scrolling and gesture behavior ([#29312](https://github.com/ionic-team/ionic-framework/issues/29312)) ([9738228](https://github.com/ionic-team/ionic-framework/commit/9738228bc05abe3e2012e57b0e6b85f0ec06f66b)), closes [#24583](https://github.com/ionic-team/ionic-framework/issues/24583)
-
-
-
-
-
-## [7.8.4](https://github.com/ionic-team/ionic-framework/compare/v7.8.3...v7.8.4) (2024-04-10)
-
-
-### Performance Improvements
-
-* **styles:** compress distributed global stylesheets ([#29275](https://github.com/ionic-team/ionic-framework/issues/29275)) ([b3cd49b](https://github.com/ionic-team/ionic-framework/commit/b3cd49bf2219aacffc1ac34acbae7c76ef243765))
-
-
-
-
-
-## [7.8.3](https://github.com/ionic-team/ionic-framework/compare/v7.8.2...v7.8.3) (2024-04-03)
-
-
-### Bug Fixes
-
-* **button:** activated outline button in toolbar no longer blends into background on MD dark mode ([#29216](https://github.com/ionic-team/ionic-framework/issues/29216)) ([ee5da7a](https://github.com/ionic-team/ionic-framework/commit/ee5da7a747c0a0b420c5e371a9fe9ec4938d179e))
-* **popover:** viewport can be scrolled if no content present ([#29215](https://github.com/ionic-team/ionic-framework/issues/29215)) ([f08759c](https://github.com/ionic-team/ionic-framework/commit/f08759c2b8256ff66f8d1901bd8e0be4617db262)), closes [#29211](https://github.com/ionic-team/ionic-framework/issues/29211)
-
-
-
-
-
-## [7.8.2](https://github.com/ionic-team/ionic-framework/compare/v7.8.1...v7.8.2) (2024-03-27)
-
-
-### Bug Fixes
-
-* **searchbar:** autocapitalize is initialized correctly ([#29197](https://github.com/ionic-team/ionic-framework/issues/29197)) ([8ad66c0](https://github.com/ionic-team/ionic-framework/commit/8ad66c03d777edcab19c97cba696b171acc2d2e8)), closes [#29193](https://github.com/ionic-team/ionic-framework/issues/29193)
-
-
-
-
-
 ## [7.8.1](https://github.com/ionic-team/ionic-framework/compare/v7.8.0...v7.8.1) (2024-03-20)
 
 

core/api.txt

@@ -549,7 +549,7 @@ ion-infinite-scroll-content,prop,loadingText,IonicSafeString | string | undefine
 ion-input,scoped
 ion-input,prop,accept,string | undefined,undefined,false,false
 ion-input,prop,autocapitalize,string,'off',false,false
-ion-input,prop,autocomplete,"name" | "email" | "tel" | "url" | "on" | "off" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo",'off',false,false
+ion-input,prop,autocomplete,"name" | "on" | "off" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo",'off',false,false
 ion-input,prop,autocorrect,"off" | "on",'off',false,false
 ion-input,prop,autofocus,boolean,false,false,false
 ion-input,prop,clearInput,boolean,false,false,false
@@ -1159,7 +1159,7 @@ ion-row,shadow
 ion-searchbar,scoped
 ion-searchbar,prop,animated,boolean,false,false,false
 ion-searchbar,prop,autocapitalize,string,'default',false,false
-ion-searchbar,prop,autocomplete,"name" | "email" | "tel" | "url" | "on" | "off" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo",'off',false,false
+ion-searchbar,prop,autocomplete,"name" | "on" | "off" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo",'off',false,false
 ion-searchbar,prop,autocorrect,"off" | "on",'off',false,false
 ion-searchbar,prop,cancelButtonIcon,string,config.get('backButtonIcon', arrowBackSharp) as string,false,false
 ion-searchbar,prop,cancelButtonText,string,'Cancel',false,false

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "7.8.6",
+  "version": "7.8.1",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -49,18 +49,17 @@
     "@stencil/angular-output-target": "^0.8.4",
     "@stencil/react-output-target": "^0.5.3",
     "@stencil/sass": "^3.0.9",
-    "@stencil/vue-output-target": "^0.8.7",
+    "@stencil/vue-output-target": "^0.0.1-dev.11711372539.10de27e3",
     "@types/jest": "^29.5.6",
     "@types/node": "^14.6.0",
     "@typescript-eslint/eslint-plugin": "^6.7.2",
     "@typescript-eslint/parser": "^6.7.2",
-    "chalk": "^5.3.0",
     "clean-css-cli": "^5.6.1",
     "domino": "^2.1.6",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-custom-rules": "file:custom-rules",
-    "execa": "^8.0.1",
+    "execa": "^5.0.0",
     "fs-extra": "^9.0.1",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
@@ -78,7 +77,7 @@
     "build.docs.json": "stencil build --docs-json dist/docs.json",
     "clean": "node scripts/clean.js",
     "css.minify": "cleancss -O2 -o ./css/ionic.bundle.css ./css/ionic.bundle.css",
-    "css.sass": "sass --embed-sources --style compressed src/css:./css",
+    "css.sass": "sass --embed-sources src/css:./css",
     "eslint": "eslint src",
     "lint": "npm run lint.ts && npm run lint.sass && npm run prettier -- --write --cache",
     "lint.fix": "npm run lint.ts.fix && npm run lint.sass.fix && npm run prettier -- --write --cache",
@@ -97,9 +96,10 @@
     "test.treeshake": "node scripts/treeshaking.js dist/index.js",
     "validate": "npm run lint && npm run test && npm run build && npm run test.treeshake",
     "docker.build": "docker build -t ionic-playwright .",
-    "test.e2e.docker": "npm run docker.build && node ./scripts/docker.mjs",
+    "test.e2e.docker": "npm run docker.build && docker run -it --rm -e DISPLAY=$(cat docker-display.txt) -v $(cat docker-display-volume.txt) --ipc=host --mount=type=bind,source=./,target=/ionic ionic-playwright npm run test.e2e --",
     "test.e2e.docker.update-snapshots": "npm run test.e2e.docker -- --update-snapshots",
-    "test.e2e.docker.ci": "npm run docker.build && CI=true node ./scripts/docker.mjs"
+    "test.e2e.docker.ci": "npm run docker.build && docker run -e CI='true' --rm --ipc=host --mount=type=bind,source=./,target=/ionic ionic-playwright npm run test.e2e --",
+    "test.report": "npx playwright show-report"
   },
   "author": "Ionic Team",
   "license": "MIT",

core/scripts/docker.mjs

@@ -1,56 +0,0 @@
-import { execa } from 'execa';
-import * as fs from 'fs';
-import { resolve } from 'path';
-import chalk from 'chalk';
-
-const removeNewline = (string) => {
-  return string.replace(/(\r\n|\n|\r)/gm, "");
-}
-
-const readConfigFile = (file) => {
-  if (fs.existsSync(file)) {
-    return fs.readFileSync(file, { encoding: 'utf-8' });
-  }
-
-  return '';
-}
-
-// These files are optional, so we don't want to error if they don't exist
-const display = removeNewline(readConfigFile('docker-display.txt'));
-const displayVolume = removeNewline(readConfigFile('docker-display-volume.txt'));
-
-// Using --mount requires an absolute path which is what this gives us.
-const pwd = resolve('./');
-
-/**
- * -it will let the user gracefully kill the process using Ctrl+C (or equivalent)
- * -e DISPLAY and -v handle configuration for headed mode
- * --ipc=host is recommended when using Chromium to avoid out of memory crashes: https://playwright.dev/docs/ci#docker
- * --init is recommended to avoid zombie processes: https://playwright.dev/docs/ci#docker
- * --mount allow us to mount the local Ionic project inside of the Docker container so devs do not need to re-build the project in Docker.
- */
-const args = ['run', '--rm', '--init', `-e DISPLAY=${display}`, `-v ${displayVolume}`, '--ipc=host', `--mount=type=bind,source=${pwd},target=/ionic`, 'ionic-playwright', 'npm run test.e2e --', ...process.argv.slice(2)];
-
-// Set the CI env variable so Playwright uses the CI config
-if (process.env.CI) {
-  args.splice(1, 0, '-e CI=true');
-/**
- * Otherwise, we should let the session be interactive locally. This will
- * not work on CI which is why we do not apply it there.
- */
-} else {
-  args.splice(1, 0, '-it');
-}
-
-/**
- * While these config files are optional to run the tests, they are required to run
- * the tests in headed mode. Add a warning if dev tries to run headed tests without
- * the correct config files.
- */
-const requestHeaded = process.argv.find(arg => arg.includes('headed'));
-const hasHeadedConfigFiles = display && displayVolume;
-if (requestHeaded && !hasHeadedConfigFiles) {
-  console.warn(chalk.yellow.bold('\n⚠️ You are running tests in headed mode, but one or more of your headed config files was not found.\nPlease ensure that both docker-display.txt and docker-display-volume.txt have been created in the correct location.\n'));
-}
-
-execa('docker', args, { shell: true, stdio: 'inherit' });

core/scripts/readme.md

@@ -1,4 +1,44 @@
 
-# Core Scripts
+## Build
 
-This file has been moved to [/docs/core/testing/preview-changes.md](/docs/core/testing/preview-changes.md).
+### 1. Clone ionic
+
+    git@github.com:ionic-team/ionic.git
+    cd ionic
+
+### 2. Run `npm install`
+
+  cd core
+  npm install
+
+
+Notice that `@ionic/core` lives in `core`.
+
+### 3. Run `npm start`
+
+Make sure you are inside the `core` directory.
+
+    npm start
+
+With the `dev` command, Ionic components will be built with [Stencil](https://stenciljs.com/), changes to source files are watched, a local http server will startup, and http://localhost:3333/ will open in a browser.
+
+### 4. Preview
+
+Navigate to http://localhost:3333/src/components/. Each component has small e2e apps found in the `test` directory, for example: http://localhost:3333/src/components/button/test/basic
+
+As changes are made in an editor to source files, the e2e app will live-reload.
+
+## How to contribute
+
+1. `npm start` allows you to modify the components and have live reloading, just like another ionic app.
+
+2. When everything looks good, run  `npm run validate` to verify the tests linter and production build passes.
+
+
+# Deploy
+
+1. `npm run prepare.deploy`
+2. Review/update changelog
+3. Commit updates using the package name and version number as the commit message.
+4. `npm run deploy`
+5. :tada:

core/src/components/button/button.ios.scss

@@ -212,12 +212,3 @@
 :host(.button-solid.ion-color.ion-activated) .button-native::after {
   background: #{current-color(shade)};
 }
-
-
-// Activated Button in Toolbar
-// --------------------------------------------------
-
-:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
-  background: var(--ion-toolbar-color, var(--color));
-  color: #{var(--ion-toolbar-background, var(--background), ion-color(primary, contrast))};
-}

core/src/components/button/button.md.scss

@@ -160,12 +160,3 @@
     background: #{current-color(base)};
   }
 }
-
-
-// Activated Button in Toolbar
-// --------------------------------------------------
-
-:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
-  background: var(--ion-toolbar-background, var(--color));
-  color: #{var(--ion-toolbar-color, var(--background), ion-color(primary, contrast))};
-}

core/src/components/button/button.scss

@@ -331,3 +331,11 @@ ion-ripple-effect {
   background: #{var(--ion-toolbar-color, var(--background))};
   color: #{var(--ion-toolbar-background, var(--color))};
 }
+
+// Activated Button in Toolbar
+// --------------------------------------------------
+
+:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
+  background: var(--ion-toolbar-color, var(--color));
+  color: #{var(--ion-toolbar-background, var(--background), ion-color(primary, contrast))};
+}

core/src/components/input/input.tsx

@@ -831,15 +831,6 @@ export class Input implements ComponentInterface {
                    */
                   ev.preventDefault();
                 }}
-                onFocusin={(ev) => {
-                  /**
-                   * Prevent the focusin event from bubbling otherwise it will cause the focusin
-                   * event listener in scroll assist to fire. When this fires, focus will be moved
-                   * back to the input even if the clear button was never tapped. This poses issues
-                   * for screen readers as it means users would be unable to swipe past the clear button.
-                   */
-                  ev.stopPropagation();
-                }}
                 onClick={this.clearTextInput}
               >
                 <ion-icon aria-hidden="true" icon={mode === 'ios' ? closeCircle : closeSharp}></ion-icon>

core/src/components/modal/gestures/sheet.ts

@@ -1,6 +1,5 @@
-import { isIonContent, findClosestIonContent } from '@utils/content';
 import { createGesture } from '@utils/gesture';
-import { clamp, raf, getElementRoot } from '@utils/helpers';
+import { clamp, raf } from '@utils/helpers';
 
 import type { Animation } from '../../../interface';
 import type { GestureDetail } from '../../../utils/gesture';
@@ -143,35 +142,22 @@ export const createSheetGesture = (
 
   const canStart = (detail: GestureDetail) => {
     /**
-     * If we are swiping on the content, swiping should only be possible if the content
-     * is scrolled all the way to the top so that we do not interfere with scrolling.
-     *
-     * We cannot assume that the `ion-content` target will remain consistent between swipes.
-     * For example, when using ion-nav within a modal it is possible to swipe, push a view,
-     * and then swipe again. The target content will not be the same between swipes.
+     * If the sheet is fully expanded and
+     * the user is swiping on the content,
+     * the gesture should not start to
+     * allow for scrolling on the content.
      */
-    const contentEl = findClosestIonContent(detail.event.target! as HTMLElement);
+    const content = (detail.event.target! as HTMLElement).closest('ion-content');
     currentBreakpoint = getCurrentBreakpoint();
 
-    if (currentBreakpoint === 1 && contentEl) {
-      /**
-       * The modal should never swipe to close on the content with a refresher.
-       * Note 1: We cannot solve this by making this gesture have a higher priority than
-       * the refresher gesture as the iOS native refresh gesture uses a scroll listener in
-       * addition to a gesture.
-       *
-       * Note 2: Do not use getScrollElement here because we need this to be a synchronous
-       * operation, and getScrollElement is asynchronous.
-       */
-      const scrollEl = isIonContent(contentEl) ? getElementRoot(contentEl).querySelector('.inner-scroll') : contentEl;
-      const hasRefresherInContent = !!contentEl.querySelector('ion-refresher');
-      return !hasRefresherInContent && scrollEl!.scrollTop === 0;
+    if (currentBreakpoint === 1 && content) {
+      return false;
     }
 
     return true;
   };
 
-  const onStart = (detail: GestureDetail) => {
+  const onStart = () => {
     /**
      * If canDismiss is anything other than `true`
      * then users should be able to swipe down
@@ -187,10 +173,11 @@ export const createSheetGesture = (
     canDismissBlocksGesture = baseEl.canDismiss !== undefined && baseEl.canDismiss !== true && minBreakpoint === 0;
 
     /**
-     * If we are pulling down, then it is possible we are pulling on the content.
-     * We do not want scrolling to happen at the same time as the gesture.
+     * If swiping on the content
+     * we should disable scrolling otherwise
+     * the sheet will expand and the content will scroll.
      */
-    if (detail.deltaY > 0 && contentEl) {
+    if (contentEl) {
       contentEl.scrollY = false;
     }
 
@@ -206,16 +193,6 @@ export const createSheetGesture = (
   };
 
   const onMove = (detail: GestureDetail) => {
-    /**
-     * If we are pulling down, then it is possible we are pulling on the content.
-     * We do not want scrolling to happen at the same time as the gesture.
-     * This accounts for when the user scrolls down, scrolls all the way up, and then
-     * pulls down again such that the modal should start to move.
-     */
-    if (detail.deltaY > 0 && contentEl) {
-      contentEl.scrollY = false;
-    }
-
     /**
      * Given the change in gesture position on the Y axis,
      * compute where the offset of the animation should be
@@ -337,17 +314,6 @@ export const createSheetGesture = (
       onDismiss();
     }
 
-    /**
-     * If the sheet is going to be fully expanded then we should enable
-     * scrolling immediately. The sheet modal animation takes ~500ms to finish
-     * so if we wait until then there is a visible delay for when scrolling is
-     * re-enabled. Native iOS allows for scrolling on the sheet modal as soon
-     * as the gesture is released, so we align with that.
-     */
-    if (contentEl && snapToBreakpoint === breakpoints[breakpoints.length - 1]) {
-      contentEl.scrollY = true;
-    }
-
     return new Promise<void>((resolve) => {
       animation
         .onFinish(
@@ -368,6 +334,14 @@ export const createSheetGesture = (
                   currentBreakpoint = snapToBreakpoint;
                   onBreakpointChange(currentBreakpoint);
 
+                  /**
+                   * If the sheet is fully expanded, we can safely
+                   * enable scrolling again.
+                   */
+                  if (contentEl && currentBreakpoint === breakpoints[breakpoints.length - 1]) {
+                    contentEl.scrollY = true;
+                  }
+
                   /**
                    * Backdrop should become enabled
                    * after the backdropBreakpoint value

core/src/components/popover/popover.scss

@@ -101,6 +101,8 @@
   display: flex;
 
   flex-direction: column;
+
+  overflow: hidden;
 }
 
 // Nested Popovers

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

@@ -48,98 +48,6 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
  * Translucent popovers are only available on iOS
  */
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('popover: scrolling'), async () => {
-    test.beforeEach(({ skip }) => {
-      test.info().annotations.push({
-        type: 'issue',
-        description: 'https://github.com/ionic-team/ionic-framework/issues/29211',
-      });
-      // We are testing if Ionic sets overflow is set correctly on elements,
-      // so we do not need to test across browsers
-      skip.browser('webkit', 'Behavior does not vary across browsers');
-      skip.browser('firefox', 'Behavior does not vary across browsers');
-    });
-    test('should scroll to bottom without IonContent', async ({ page }) => {
-      await page.setContent(
-        `
-        <style>
-          ion-popover {
-            --height: 150px;
-          }
-        </style>
-        <ion-popover>
-          <p>Text</p>
-          <p>Text</p>
-          <p>Text</p>
-          <p>Text</p>
-          <p>Text</p>
-          <p>Text</p>
-          <p>Text</p>
-          <p>Text</p>
-          <p>Text</p>
-          <p>Text</p>
-        </ion-popover>
-      `,
-        config
-      );
-
-      const popover = page.locator('ion-popover');
-      const viewport = popover.locator('.popover-viewport');
-      const p = popover.locator('p');
-      const lastP = await p.last();
-
-      await popover.evaluate((el: HTMLIonPopoverElement) => el.present());
-
-      await expect(lastP).not.toBeInViewport();
-
-      // hover over viewport and scroll to bottom
-      await viewport.hover();
-      await page.mouse.wheel(0, 500);
-
-      await expect(lastP).toBeInViewport();
-    });
-    test('should scroll to bottom with IonContent', async ({ page }) => {
-      await page.setContent(
-        `
-        <style>
-          ion-popover {
-            --height: 150px;
-          }
-        </style>
-        <ion-popover>
-          <ion-content>
-            <p>Text</p>
-            <p>Text</p>
-            <p>Text</p>
-            <p>Text</p>
-            <p>Text</p>
-            <p>Text</p>
-            <p>Text</p>
-            <p>Text</p>
-            <p>Text</p>
-            <p>Text</p>
-          </ion-content>
-        </ion-popover>
-      `,
-        config
-      );
-
-      const popover = page.locator('ion-popover');
-      const content = popover.locator('ion-content');
-      const p = popover.locator('p');
-      const lastP = await p.last();
-
-      await popover.evaluate((el: HTMLIonPopoverElement) => el.present());
-
-      await expect(lastP).not.toBeInViewport();
-
-      // hover over viewport and scroll to bottom
-      await content.hover();
-      await page.mouse.wheel(0, 500);
-
-      await expect(lastP).toBeInViewport();
-    });
-  });
   test.describe(title('popover: translucent variants'), async () => {
     let popoverFixture!: PopoverFixture;
     test.beforeEach(async ({ page }) => {

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

@@ -1,160 +1,14 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ themes: ['light', 'dark'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('toolbar: basic (LTR only)'), () => {
-    test('should not have visual regressions with text only', async ({ page }) => {
-      await page.setContent(
-        `
-          <ion-header>
-            <ion-toolbar>
-              <ion-title>Toolbar</ion-title>
-            </ion-toolbar>
-          </ion-header>
-        `,
-        config
-      );
-
-      const header = page.locator('ion-header');
-      await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-text-only`));
-    });
-  });
-});
-
-configs({ themes: ['light', 'dark'] }).forEach(({ title, screenshot, config }) => {
+configs().forEach(({ title, screenshot, config }) => {
   test.describe(title('toolbar: basic'), () => {
-    test('should truncate long title with ellipsis', async ({ page }) => {
-      await page.setContent(
-        `
-          <ion-header>
-            <ion-toolbar>
-              <ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
-            </ion-toolbar>
-          </ion-header>
-        `,
-        config
-      );
+    test('should not have visual regressions', async ({ page }) => {
+      await page.goto(`/src/components/toolbar/test/basic`, config);
 
+      // capture both header toolbars at once, but don't include all the white space in the ion-content
       const header = page.locator('ion-header');
-      await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-long-text`));
-    });
-
-    test('should not have visual regressions with icon-only buttons', async ({ page }) => {
-      await page.setContent(
-        `
-          <ion-header>
-            <ion-toolbar>
-              <ion-buttons slot="secondary">
-                <ion-button>
-                  <ion-icon slot="icon-only" name="person-circle"></ion-icon>
-                </ion-button>
-                <ion-button>
-                  <ion-icon slot="icon-only" name="search"></ion-icon>
-                </ion-button>
-              </ion-buttons>
-              <ion-buttons slot="primary">
-                <ion-button color="secondary">
-                  <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-                </ion-button>
-              </ion-buttons>
-              <ion-title>Toolbar</ion-title>
-            </ion-toolbar>
-            <ion-toolbar>
-              <ion-buttons slot="secondary">
-                <ion-button class="ion-activated">
-                  <ion-icon slot="icon-only" name="person-circle"></ion-icon>
-                </ion-button>
-                <ion-button class="ion-activated">
-                  <ion-icon slot="icon-only" name="search"></ion-icon>
-                </ion-button>
-              </ion-buttons>
-              <ion-buttons slot="primary">
-                <ion-button color="secondary" class="ion-activated">
-                  <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-                </ion-button>
-              </ion-buttons>
-              <ion-title>Activated Buttons</ion-title>
-            </ion-toolbar>
-          </ion-header>
-        `,
-        config
-      );
-
-      const header = page.locator('ion-header');
-      await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-icon-buttons`));
-    });
-
-    test('should not have visual regressions with buttons with icons and text', async ({ page }) => {
-      await page.setContent(
-        `
-          <ion-header>
-            <ion-toolbar>
-              <ion-buttons slot="secondary">
-                <ion-button fill="solid">
-                  <ion-icon slot="start" name="person-circle"></ion-icon>
-                  Solid
-                </ion-button>
-              </ion-buttons>
-              <ion-title>Solid</ion-title>
-              <ion-buttons slot="primary">
-                <ion-button fill="solid" color="secondary">
-                  Help
-                  <ion-icon slot="end" name="help-circle"></ion-icon>
-                </ion-button>
-              </ion-buttons>
-            </ion-toolbar>
-            <ion-toolbar>
-              <ion-buttons slot="secondary">
-                <ion-button fill="solid" class="ion-activated">
-                  <ion-icon slot="start" name="person-circle"></ion-icon>
-                  Solid
-                </ion-button>
-              </ion-buttons>
-              <ion-title>Solid Activated</ion-title>
-              <ion-buttons slot="primary">
-                <ion-button fill="solid" color="secondary" class="ion-activated">
-                  Help
-                  <ion-icon slot="end" name="help-circle"></ion-icon>
-                </ion-button>
-              </ion-buttons>
-            </ion-toolbar>
-            <ion-toolbar>
-              <ion-buttons slot="secondary">
-                <ion-button fill="outline">
-                  <ion-icon slot="start" name="star"></ion-icon>
-                  Star
-                </ion-button>
-              </ion-buttons>
-              <ion-title>Outline</ion-title>
-              <ion-buttons slot="primary">
-                <ion-button color="secondary" fill="outline">
-                  Info
-                  <ion-icon slot="end" name="information-circle"></ion-icon>
-                </ion-button>
-              </ion-buttons>
-            </ion-toolbar>
-            <ion-toolbar>
-              <ion-buttons slot="secondary">
-                <ion-button fill="outline" class="ion-activated">
-                  <ion-icon slot="start" name="star"></ion-icon>
-                  Star
-                </ion-button>
-              </ion-buttons>
-              <ion-title>Outline Activated</ion-title>
-              <ion-buttons slot="primary">
-                <ion-button color="secondary" fill="outline" class="ion-activated">
-                  Info
-                  <ion-icon slot="end" name="information-circle"></ion-icon>
-                </ion-button>
-              </ion-buttons>
-            </ion-toolbar>
-          </ion-header>
-        `,
-        config
-      );
-
-      const header = page.locator('ion-header');
-      await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-text-icon-buttons`));
+      await expect(header).toHaveScreenshot(screenshot(`toolbar-basic`));
     });
   });
 });