5.5.2

resolves #22644

.circleci/config.yml

@@ -59,7 +59,7 @@ jobs:
     steps:
       - checkout
       - restore_cache: *restore-cache
-      - run: npm install
+      - run: npm install --legacy-peer-deps
       - save_cache: *save-cache
       - persist_to_workspace:
           root: /tmp/workspace
@@ -75,7 +75,7 @@ jobs:
       - restore_cache: *restore-cache-core
       - restore_cache: *restore-cache-core-stencil
       - run:
-          command: npm install
+          command: npm install --legacy-peer-deps
           working_directory: /tmp/workspace/core
       - save_cache: *save-cache-core
       - run:
@@ -94,7 +94,7 @@ jobs:
       - attach_workspace:
           at: /tmp/workspace
       - run:
-          command: npm install
+          command: npm install --legacy-peer-deps
           working_directory: /tmp/workspace/angular
       - run:
           command: sudo npm link
@@ -117,7 +117,7 @@ jobs:
       - attach_workspace:
           at: /tmp/workspace
       - run:
-          command: npm install
+          command: npm install --legacy-peer-deps
           working_directory: /tmp/workspace/packages/angular-server
       - run:
           command: npm run build.prod
@@ -134,7 +134,7 @@ jobs:
       - attach_workspace:
           at: /tmp/workspace
       - run:
-          command: npm install
+          command: npm install --legacy-peer-deps
           working_directory: /tmp/workspace/packages/react
       - run:
           command: sudo npm link
@@ -149,7 +149,6 @@ jobs:
           root: /tmp/workspace
           paths:
             - "*"
-
   build-react-router:
     <<: *defaults
     steps:
@@ -157,7 +156,7 @@ jobs:
       - attach_workspace:
           at: /tmp/workspace
       - run:
-          command: npm install
+          command: npm install --legacy-peer-deps
           working_directory: /tmp/workspace/packages/react-router
       - run:
           command: sudo npm link
@@ -179,6 +178,58 @@ jobs:
           paths:
             - "*"
 
+  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:
+            - "*"
+
+  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/core
+      - run:
+          command: sudo npm link @ionic/core
+          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:
+            - "*"
+
   test-core-clean-build:
     <<: *defaults
     steps:
@@ -282,6 +333,26 @@ jobs:
           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:
@@ -320,6 +391,28 @@ jobs:
           command: npm run test.spec
           working_directory: /tmp/workspace/packages/react-router
 
+  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:
@@ -327,7 +420,7 @@ jobs:
       - attach_workspace:
           at: /tmp/workspace
       - run:
-          command: npm install
+          command: npm install --legacy-peer-deps
           working_directory: /tmp/workspace/angular/test/test-app
       - run:
           command: npm run test -- --protractor-config=e2e/protractor-ci.conf.js
@@ -349,8 +442,11 @@ workflows:
           requires: [puppeteer-dependencies, build-core]
       - test-core-spec:
           requires: [build-core]
-      - test-core-treeshake:
-          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:
@@ -378,6 +474,16 @@ workflows:
           requires: [build-react]
       - test-react-router-spec:
           requires: [build-react-router]
+      - build-vue:
+          requires: [build-core]
+      - build-vue-router:
+          requires: [build-core, build-vue]
+      - test-vue-lint:
+          requires: [build-vue]
+      - test-vue-router-lint:
+          requires: [build-vue-router]
+      - test-vue-router-spec:
+          requires: [build-vue-router]
       - test-angular-lint:
           requires: [build-angular]
       - test-angular-e2e:

.github/COMPONENT-GUIDE.md

@@ -9,6 +9,8 @@
   * [Ripple Effect](#ripple-effect)
   * [Example Components](#example-components)
   * [References](#references)
+- [Accessibility](#accessibility)
+  * [Checkbox](#checkbox)
 - [Rendering Anchor or Button](#rendering-anchor-or-button)
   * [Example Components](#example-components-1)
   * [Component Structure](#component-structure-1)
@@ -362,6 +364,131 @@ ion-ripple-effect {
 - [iOS Buttons](https://developer.apple.com/design/human-interface-guidelines/ios/controls/buttons/)
 
 
+## Accessibility
+
+### Checkbox
+
+#### Example Components
+
+- [ion-checkbox](https://github.com/ionic-team/ionic/tree/master/core/src/components/checkbox)
+- [ion-toggle](https://github.com/ionic-team/ionic/tree/master/core/src/components/toggle)
+
+#### VoiceOver
+
+In order for VoiceOver to work properly with a checkbox component there must be a native `input` with `type="checkbox"`, and `aria-checked` and `role="checkbox"` **must** be on the host element. The `aria-hidden` attribute needs to be added if the checkbox is disabled, preventing iOS users from selecting it:
+
+```tsx
+render() {
+  const { checked, disabled } = this;
+
+  return (
+    <Host
+      aria-checked={`${checked}`}
+      aria-hidden={disabled ? 'true' : null}
+      role="checkbox"
+    >
+      <input
+        type="checkbox"
+      />
+      ...
+    </Host>
+  );
+}
+```
+
+#### NVDA
+
+It is required to have `aria-checked` on the native input for checked to read properly and `disabled` to prevent tabbing to the input:
+
+```tsx
+render() {
+  const { checked, disabled } = this;
+
+  return (
+    <Host
+      aria-checked={`${checked}`}
+      aria-hidden={disabled ? 'true' : null}
+      role="checkbox"
+    >
+      <input
+        type="checkbox"
+        aria-checked={`${checked}`}
+        disabled={disabled}
+      />
+      ...
+    </Host>
+  );
+}
+```
+
+#### Labels
+
+A helper function has been created to get the proper `aria-label` for the checkbox. This can be imported as `getAriaLabel` like the following:
+
+```tsx
+const { label, labelId, labelText } = getAriaLabel(el, inputId);
+```
+
+where `el` and `inputId` are the following:
+
+```tsx
+private inputId = `ion-cb-${checkboxIds++}`;
+
+@Element() el!: HTMLElement;
+```
+
+This can then be added to the `Host` like the following:
+
+```tsx
+<Host
+  aria-labelledby={label ? labelId : null}
+  aria-checked={`${checked}`}
+  aria-hidden={disabled ? 'true' : null}
+  role="checkbox"
+>
+```
+
+In addition to that, the checkbox should have a label added:
+
+```tsx
+<Host
+  aria-labelledby={label ? labelId : null}
+  aria-checked={`${checked}`}
+  aria-hidden={disabled ? 'true' : null}
+  role="checkbox"
+>
+  <label htmlFor={inputId}>
+    {labelText}
+  </label>
+  <input
+    type="checkbox"
+    aria-checked={`${checked}`}
+    disabled={disabled}
+    id={inputId}
+  />
+```
+
+#### Hidden Input
+
+A helper function to render a hidden input has been added, it can be added in the `render`:
+
+```tsx
+renderHiddenInput(true, el, name, (checked ? value : ''), disabled);
+```
+
+> This is required for the checkbox to work with forms.
+
+#### Known Issues
+
+When using VoiceOver on macOS, Chrome will announce the following when you are focused on a checkbox:
+
+```
+currently on a checkbox inside of a checkbox
+```
+
+This is a compromise we have to make in order for it to work with the other screen readers & Safari.
+
+
 ## Rendering Anchor or Button
 
 Certain components can render an `<a>` or a `<button>` depending on the presence of an `href` attribute.

.github/ISSUE_TEMPLATE/bug_report.md

@@ -10,7 +10,7 @@ assignees: ''
 
 <!-- Please make sure you are posting an issue pertaining to the Ionic Framework. If you are having an issue with the Ionic Appflow services (Ionic View, Ionic Deploy, etc.) please consult the Ionic Appflow support portal (https://ionic.zendesk.com/hc/en-us) -->
 
-<!-- Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/ -->
+<!-- Please do not submit support requests or "How to" questions here. Instead, please use the Ionic Forum: https://forum.ionicframework.com/ -->
 
 <!-- ISSUES MISSING IMPORTANT INFORMATION MAY BE CLOSED WITHOUT INVESTIGATION. -->
 

.github/ISSUE_TEMPLATE/support_question.md

@@ -8,4 +8,4 @@ assignees: ''
 
 # Support Question
 
-Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/
+Please do not submit support requests or "How to" questions here. Instead, please use the Ionic Forum: https://forum.ionicframework.com/

.github/ionic-issue-bot.yml

@@ -27,7 +27,10 @@ comment:
         is added to issues that need a code reproduction.
 
 
-        Please provide a reproduction with the minimum amount of code required to reproduce the issue. Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.
+        Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.
+
+
+        If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.
 
 
         For a guide on how to create a good reproduction, see our [Contributing Guide](https://ionicframework.com/docs/contributing/how-to-contribute#creating-a-good-code-reproduction).
@@ -130,22 +133,6 @@ noReproduction:
   lock: true
   dryRun: false
 
-labelPullRequest:
-  labels:
-    - label: "package: angular"
-      branch: master
-      path: ^angular
-    - label: "package: core"
-      branch: master
-      path: ^core
-    - label: "package: react"
-      branch: master
-      path: ^react
-    - label: "package: vue"
-      branch: master
-      path: ^vue
-  dryRun: false
-
 wrongRepo:
   repos:
     - label: "ionitron: capacitor"

.github/labeler.yml

@@ -0,0 +1,21 @@
+# This is used with the label workflow which
+# will triage pull requests and apply a label based on the
+# paths that are modified in the pull request.
+#
+# For more information, see:
+# https://github.com/actions/labeler
+
+'package: core':
+  - core/**/*
+
+'package: angular':
+  - angular/**/*
+  - packages/angular-*/**/*
+
+'package: react':
+  - packages/react/**/*
+  - packages/react-*/**/*
+
+'package: vue':
+  - packages/vue/**/*
+  - packages/vue-*/**/*

.github/workflows/label.yml

@@ -0,0 +1,19 @@
+# This workflow will triage pull requests and apply a label based on the
+# paths that are modified in the pull request.
+#
+# To use this workflow, you will need to set up a .github/labeler.yml
+# file with configuration.  For more information, see:
+# https://github.com/actions/labeler
+
+name: "Pull Request Labeler"
+on:
+- pull_request_target
+
+jobs:
+  triage:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/labeler@main
+      with:
+        repo-token: "${{ secrets.GITHUB_TOKEN }}"
+        sync-labels: true

.gitignore

@@ -58,6 +58,7 @@ prerender-static.html
 # stencil
 angular/css/
 packages/react/css/
+packages/vue/css/
 core/css/
 core/hydrate/
 core/loader/

.scripts/common.js

@@ -14,7 +14,9 @@ const packages = [
   'angular',
   'packages/react',
   'packages/react-router',
-  'packages/angular-server'
+  'packages/angular-server',
+  'packages/vue',
+  'packages/vue-router'
 ];
 
 function readPkg(project) {
@@ -131,7 +133,7 @@ function preparePackage(tasks, package, version, install) {
         title: `${pkg.name}: install npm dependencies`,
         task: async () => {
           await fs.remove(path.join(projectRoot, 'node_modules'));
-          await execa('npm', ['i'], { cwd: projectRoot });
+          await execa('npm', ['i', '--legacy-peer-deps'], { cwd: projectRoot });
         }
       });
     }
@@ -141,13 +143,13 @@ function preparePackage(tasks, package, version, install) {
     if (package !== 'core') {
       projectTasks.push({
         title: `${pkg.name}: npm link @ionic/core`,
-        task: () => execa('npm', ['link', '@ionic/core'], { cwd: projectRoot })
+        task: () => execa('npm', ['link', '@ionic/core', '--legacy-peer-deps'], { cwd: projectRoot })
       });
 
       if (package === 'packages/react-router') {
         projectTasks.push({
           title: `${pkg.name}: npm link @ionic/react`,
-          task: () => execa('npm', ['link', '@ionic/react'], { cwd: projectRoot })
+          task: () => execa('npm', ['link', '@ionic/react', '--legacy-peer-deps'], { cwd: projectRoot })
         });
       }
     }
@@ -207,13 +209,13 @@ function prepareDevPackage(tasks, package, version) {
     if (package !== 'core') {
       projectTasks.push({
         title: `${pkg.name}: npm link @ionic/core`,
-        task: () => execa('npm', ['link', '@ionic/core'], { cwd: projectRoot })
+        task: () => execa('npm', ['link', '@ionic/core', '--legacy-peer-deps'], { cwd: projectRoot })
       });
 
       if (package === 'packages/react-router') {
         projectTasks.push({
           title: `${pkg.name}: npm link @ionic/react`,
-          task: () => execa('npm', ['link', '@ionic/react'], { cwd: projectRoot })
+          task: () => execa('npm', ['link', '@ionic/react', '--legacy-peer-deps'], { cwd: projectRoot })
         });
       }
     }

CHANGELOG.md

@@ -1,3 +1,234 @@
+## [5.5.2](https://github.com/ionic-team/ionic/compare/v5.5.1...v5.5.2) (2020-12-09)
+
+
+### Bug Fixes
+
+* **android:** setting hardwareBackButton: false in config now disables default webview behavior ([#22555](https://github.com/ionic-team/ionic/issues/22555)) ([dc9faa6](https://github.com/ionic-team/ionic/commit/dc9faa6a0fbebb64c83c107c79cfd486cc0c096a)), closes [#18237](https://github.com/ionic-team/ionic/issues/18237)
+* **button:** allow aria-label to be inherited on inner button ([#22632](https://github.com/ionic-team/ionic/issues/22632)) ([818e387](https://github.com/ionic-team/ionic/commit/818e387fe81ac7026fb374d8865116dadd433c87)), closes [#22629](https://github.com/ionic-team/ionic/issues/22629)
+* **react:** hardware back button now navigates correctly ([36939e1](https://github.com/ionic-team/ionic/commit/36939e10ae0b8ac9a9275ee06d8e0d345de7c64f))
+* **react:** setting a ref now allows other props to be passed in ([31f45cd](https://github.com/ionic-team/ionic/commit/31f45cdcc953b08749d9db08321fa5ec6cbe2532)), closes [#22609](https://github.com/ionic-team/ionic/issues/22609)
+* **refresher:** clean up old css if calling refresh method before native refresher is setup ([#22640](https://github.com/ionic-team/ionic/issues/22640)) ([8d5ed47](https://github.com/ionic-team/ionic/commit/8d5ed47a282f92a60a2c4126a673cc2a5733067e)), closes [#22636](https://github.com/ionic-team/ionic/issues/22636)
+* **refresher:** refresher correctly detects native refresher when shown asynchronously ([#22623](https://github.com/ionic-team/ionic/issues/22623)) ([5ed73cd](https://github.com/ionic-team/ionic/commit/5ed73cdf4d63eeee25ef28d9676fcaa4f8e07b47)), closes [#22616](https://github.com/ionic-team/ionic/issues/22616)
+* **vue:** adding non tab button elements inside ion-tab-bar no longer causes errors ([#22643](https://github.com/ionic-team/ionic/issues/22643)) ([61cf0c5](https://github.com/ionic-team/ionic/commit/61cf0c534e45ce09410be6bfb50bdc27b657d1bc)), closes [#22642](https://github.com/ionic-team/ionic/issues/22642)
+* **vue:** correctly handle navigation failures ([#22621](https://github.com/ionic-team/ionic/issues/22621)) ([216f51b](https://github.com/ionic-team/ionic/commit/216f51b12a8c4ae7b410f47ce3d350ea513b68a1)), closes [#22591](https://github.com/ionic-team/ionic/issues/22591)
+* **vue:** correctly remove old view when replacing route ([#22566](https://github.com/ionic-team/ionic/issues/22566)) ([4f4f31b](https://github.com/ionic-team/ionic/commit/4f4f31b65e48294c3130ff24ae00b1a2aa1f9d31)), closes [#22492](https://github.com/ionic-team/ionic/issues/22492)
+* **vue:** pass in correct route to props function ([#22605](https://github.com/ionic-team/ionic/issues/22605)) ([01afdc4](https://github.com/ionic-team/ionic/commit/01afdc42e5b1598d4d15cb51761bbb3eb5d13893)), closes [#22602](https://github.com/ionic-team/ionic/issues/22602)
+* **vue:** query strings are now correctly handled when navigating back ([#22615](https://github.com/ionic-team/ionic/issues/22615)) ([a94e2a8](https://github.com/ionic-team/ionic/commit/a94e2a87fb759e7b7daed2d0304c1199dbc7afd1)), closes [#22517](https://github.com/ionic-team/ionic/issues/22517)
+* **vue:** swipe back gesture is properly disabled when swipeBackEnabled config is false ([#22568](https://github.com/ionic-team/ionic/issues/22568)) ([9d04c12](https://github.com/ionic-team/ionic/commit/9d04c127e817676983940b034a4c7efc92fdfbc6)), closes [#22567](https://github.com/ionic-team/ionic/issues/22567)
+
+### For Ionic Vue Developers
+
+Vue Router 4 has been released! Be sure to update from the release candidate to the latest stable version of Vue Router.
+
+For more information on the changes in Vue Router 4, see https://github.com/vuejs/vue-router-next/releases/tag/v4.0.0.
+
+```
+npm install vue-router@4
+```
+
+
+
+
+## [5.5.1](https://github.com/ionic-team/ionic/compare/v5.5.0...v5.5.1) (2020-11-25)
+
+
+### Bug Fixes
+
+* **checkbox:** click handler now fires properly  ([#22573](https://github.com/ionic-team/ionic/issues/22573)) ([0786835](https://github.com/ionic-team/ionic/commit/07868354aaf88deebf7472a5bf0f34d7c823de17)), closes [#22557](https://github.com/ionic-team/ionic/issues/22557)
+* **radio:** properly announce radios on screen readers and resolve axe errors ([#22507](https://github.com/ionic-team/ionic/issues/22507)) ([afcc46e](https://github.com/ionic-team/ionic/commit/afcc46e1cc4d7f6e9d1a50f8b367da4b1d0c3143))
+* **react:** eliminate use of deprecated `findDOMNode`, resolves [#20972](https://github.com/ionic-team/ionic/issues/20972) ([5275332](https://github.com/ionic-team/ionic/commit/5275332e43694f3ee8738a1726c0d202b16c3052))
+* **router:** navigation guards now fire when navigating to a page with params ([#22521](https://github.com/ionic-team/ionic/issues/22521)) ([1956f98](https://github.com/ionic-team/ionic/commit/1956f9896883dc4687488e5418e50ce0f6cbe6c9)), closes [#22516](https://github.com/ionic-team/ionic/issues/22516)
+* **select:** fix a11y issues with axe and screen readers ([#22494](https://github.com/ionic-team/ionic/issues/22494)) ([04b874e](https://github.com/ionic-team/ionic/commit/04b874e32a65588ca79eda9399ab7e9d86a3cb77)), closes [#21552](https://github.com/ionic-team/ionic/issues/21552) [#21548](https://github.com/ionic-team/ionic/issues/21548)
+* **select:** improvements for announcing placeholder and value on screenreaders ([#22556](https://github.com/ionic-team/ionic/issues/22556)) ([ea52db6](https://github.com/ionic-team/ionic/commit/ea52db66f05a185fed6b2e849734a7ffa1c6c6ea))
+* **vue:** onBeforeRouteLeave and onBeforeRouteUpdate hooks now fire properly ([#22542](https://github.com/ionic-team/ionic/issues/22542)) ([8002114](https://github.com/ionic-team/ionic/commit/8002114e720361e60d7a7fe2d15ab88b49a72e1b)), closes [#22540](https://github.com/ionic-team/ionic/issues/22540)
+* **vue:** tabs now correctly fire lifecycle events ([#22479](https://github.com/ionic-team/ionic/issues/22479)) ([cdc2fb6](https://github.com/ionic-team/ionic/commit/cdc2fb652fe5aa149eaa751a77fb506ac1f64195)), closes [#22466](https://github.com/ionic-team/ionic/issues/22466)
+* **vue:** unit testing a routerLink-capable component no longer warns of missing router dependency ([#22532](https://github.com/ionic-team/ionic/issues/22532)) ([4e23aad](https://github.com/ionic-team/ionic/commit/4e23aad3d911188e4a2706545463a81332c00ce9)), closes [#22506](https://github.com/ionic-team/ionic/issues/22506)
+
+### For Ionic Vue Developers
+
+When updating to Ionic Vue v5.5.1 make sure you are on the latest version of `vue-router@next` to take advantage of the bug fixes in this release:
+
+```
+npm install vue-router@next
+```
+
+
+
+# [5.5.0 Chlorine](https://github.com/ionic-team/ionic/compare/v5.4.4...v5.5.0) (2020-11-18)
+
+
+### Bug Fixes
+
+* **backdrop:** nvda no longer incorrectly announces backdrop ([#22481](https://github.com/ionic-team/ionic/issues/22481)) ([2d878fc](https://github.com/ionic-team/ionic/commit/2d878fc4f6c7a710dbfb722e188e3e402e1672f9)), closes [#22102](https://github.com/ionic-team/ionic/issues/22102)
+* **checkbox:** use a native input to fix a11y issues with axe and screen readers ([#22402](https://github.com/ionic-team/ionic/issues/22402)) ([7214a84](https://github.com/ionic-team/ionic/commit/7214a8401b709e1353155304cf6e9f97b2b4d294)), closes [#21644](https://github.com/ionic-team/ionic/issues/21644) [#20517](https://github.com/ionic-team/ionic/issues/20517) [#17796](https://github.com/ionic-team/ionic/issues/17796)
+* **input:** title attribute is now automatically inherited ([#22493](https://github.com/ionic-team/ionic/issues/22493)) ([abad12f](https://github.com/ionic-team/ionic/commit/abad12fbdb1378066282fe8e9b7761747951b685)), closes [#22055](https://github.com/ionic-team/ionic/issues/22055)
+* **refresher:** ios native refresher now works in side menu ([#22449](https://github.com/ionic-team/ionic/issues/22449)) ([a4a6453](https://github.com/ionic-team/ionic/commit/a4a64530ff083b83187b293dfdacb0fa45ad9f51))
+* **refresher:** md native refresher now works in side menu ([#22446](https://github.com/ionic-team/ionic/issues/22446)) ([6b817f2](https://github.com/ionic-team/ionic/commit/6b817f26b08d01d8367d16308db775b6192e7628)), closes [#20832](https://github.com/ionic-team/ionic/issues/20832)
+* **toggle:** use a native input to fix a11y issues with axe and screen readers ([#22477](https://github.com/ionic-team/ionic/issues/22477)) ([813611a](https://github.com/ionic-team/ionic/commit/813611a61b664c9827760ccaa889d0e2fcae7d94)), closes [#22011](https://github.com/ionic-team/ionic/issues/22011) [#21552](https://github.com/ionic-team/ionic/issues/21552)
+* **vue:** correctly pass route props to components ([#22476](https://github.com/ionic-team/ionic/issues/22476)) ([0956f8b](https://github.com/ionic-team/ionic/commit/0956f8bc5588836996c8c74f98166c347414a312)), closes [#22472](https://github.com/ionic-team/ionic/issues/22472)
+* **vue:** tab bar now works with slot="top" ([#22461](https://github.com/ionic-team/ionic/issues/22461)) ([e17c822](https://github.com/ionic-team/ionic/commit/e17c822bfbc2a876226738b77a4c95c02e0b5953)), closes [#22456](https://github.com/ionic-team/ionic/issues/22456)
+
+
+### Features
+
+* **chip:** add disabled property ([#20658](https://github.com/ionic-team/ionic/issues/20658)) ([0a0cbd8](https://github.com/ionic-team/ionic/commit/0a0cbd8f2a505ad2b3d8afb60cb1e940ced52e0d)), closes [#19510](https://github.com/ionic-team/ionic/issues/19510)
+* **segment:** add swipeGesture property to allow for disabling of the swipe gesture ([#22087](https://github.com/ionic-team/ionic/issues/22087)) ([65bc995](https://github.com/ionic-team/ionic/commit/65bc99577c44cce653dafd9937c4d8f9c45fff61)), closes [#22048](https://github.com/ionic-team/ionic/issues/22048)
+* **vue:** composition api lifecycle methods ([#22241](https://github.com/ionic-team/ionic/issues/22241)) ([f5b0299](https://github.com/ionic-team/ionic/commit/f5b0299729c2c639e432612e62fb7eaa189ca969))
+* **vue:** vetur support ([#22403](https://github.com/ionic-team/ionic/issues/22403)) ([e76f79d](https://github.com/ionic-team/ionic/commit/e76f79d0548c97edd193808f5e0a19889cffae5b))
+* **vue:** web-types support ([#22428](https://github.com/ionic-team/ionic/issues/22428)) ([639314a](https://github.com/ionic-team/ionic/commit/639314ab218b65a9a2de6040417b0e1b363e47ef)), closes [#19522](https://github.com/ionic-team/ionic/issues/19522)
+
+
+### Performance Improvements
+
+* **ios:** move content to stacking context while preserving position: fixed behavior ([#22489](https://github.com/ionic-team/ionic/issues/22489)) ([d77a9d5](https://github.com/ionic-team/ionic/commit/d77a9d57ec02c69df43ec2a286eea674a85cae36)), closes [#22473](https://github.com/ionic-team/ionic/issues/22473)
+
+
+
+## [5.4.4](https://github.com/ionic-team/ionic/compare/v5.4.3...v5.4.4) (2020-11-12)
+
+
+### Bug Fixes
+
+* **build:** add missing es5 output ([228d349](https://github.com/ionic-team/ionic/commit/228d349c6e29b62cbfee5d5502883682cfa5032f))
+
+
+
+## [5.4.3](https://github.com/ionic-team/ionic/compare/v5.4.2...v5.4.3) (2020-11-06)
+
+
+### Bug Fixes
+
+* **all** add missing vendor prefixes to css ([0989ea5](https://github.com/ionic-team/ionic/commit/0989ea5ac897f528e8fce5434861ca080b9b4a56))
+
+
+
+## [5.4.2](https://github.com/ionic-team/ionic/compare/v5.4.1...v5.4.2) (2020-11-05)
+
+
+### Bug Fixes
+
+* **alert:** correctly position alert when keyboard is open ([#22425](https://github.com/ionic-team/ionic/issues/22425)) ([9752cd6](https://github.com/ionic-team/ionic/commit/9752cd6371bc4a720e45871161e389e4a9ad8e8f))
+* **ios:** contenteditable elements are now selectable on iOS ([#22404](https://github.com/ionic-team/ionic/issues/22404)) ([023fb18](https://github.com/ionic-team/ionic/commit/023fb1841259a61b361066ca369aeffd488efa3f)), closes [#18368](https://github.com/ionic-team/ionic/issues/18368)
+* **item:** only add click event listener to items with inputs ([#22352](https://github.com/ionic-team/ionic/issues/22352)) ([9659ad6](https://github.com/ionic-team/ionic/commit/9659ad63349d5123ca2bd2548a43e37d5ee817e7)), closes [#22011](https://github.com/ionic-team/ionic/issues/22011)
+* **range:** gesture is now properly re-created on connectedCallback ([#22407](https://github.com/ionic-team/ionic/issues/22407)) ([2fea36f](https://github.com/ionic-team/ionic/commit/2fea36fc98f772443a6560a9491f2f0e574366d1)), closes [#22335](https://github.com/ionic-team/ionic/issues/22335)
+* **refresher:** work properly in modal by waiting for content to be ready ([#22390](https://github.com/ionic-team/ionic/issues/22390)) ([91d0414](https://github.com/ionic-team/ionic/commit/91d041485cb3565fa81fea24c1811e48108f277a)), closes [#22256](https://github.com/ionic-team/ionic/issues/22256)
+* **segment-button:** color property is now reactive if previously undefined ([#22405](https://github.com/ionic-team/ionic/issues/22405)) ([04161c9](https://github.com/ionic-team/ionic/commit/04161c9512ed8e965c93698d7f5501a21485052f)), closes [#20831](https://github.com/ionic-team/ionic/issues/20831)
+* **vue:** correctly switch tabs after going back ([#22309](https://github.com/ionic-team/ionic/issues/22309)) ([daf6a92](https://github.com/ionic-team/ionic/commit/daf6a92127d36c20f3445f83bd7bd3e739bb1b27)), closes [#22307](https://github.com/ionic-team/ionic/issues/22307)
+* **vue:** ensure view is updated correctly when replacing a route outside of a nav guard ([#22429](https://github.com/ionic-team/ionic/issues/22429)) ([5a4d0c0](https://github.com/ionic-team/ionic/commit/5a4d0c0217ce93f98364bdd4d8d163679f82a6b3)), closes [#22412](https://github.com/ionic-team/ionic/issues/22412)
+
+
+### Performance Improvements
+
+* **ios:** move content to stacking context to improve scrolling performance on iOS devices ([#22180](https://github.com/ionic-team/ionic/issues/22180)) ([9f44966](https://github.com/ionic-team/ionic/commit/9f44966d8572a27d8296b38ae4f3e689c76c2e44))
+
+
+
+## [5.4.1](https://github.com/ionic-team/ionic/compare/v5.4.0...v5.4.1) (2020-10-22)
+
+
+### Bug Fixes
+
+* **select:** properly align label with select in item in MD mode ([#22330](https://github.com/ionic-team/ionic/issues/22330)) ([1a2e532](https://github.com/ionic-team/ionic/commit/1a2e5322fb7ac0dd6bd3d0705b8e32f9d3649bfc)), closes [#19887](https://github.com/ionic-team/ionic/issues/19887)
+* **vue:** going back with query params now goes to correct view ([#22350](https://github.com/ionic-team/ionic/issues/22350)) ([561a4ac](https://github.com/ionic-team/ionic/commit/561a4ac535432873860c3d0a4ac60481929d9089)), closes [#22324](https://github.com/ionic-team/ionic/issues/22324)
+* **vue:** improve compatibility with route guards ([#22371](https://github.com/ionic-team/ionic/issues/22371)) ([31f9bc8](https://github.com/ionic-team/ionic/commit/31f9bc81d6d0fa81f9abe20172bb606651a2d75d)), closes [#22344](https://github.com/ionic-team/ionic/issues/22344)
+* **vue:** improve handling of parameterized urls ([#22360](https://github.com/ionic-team/ionic/issues/22360)) ([6fad0fe](https://github.com/ionic-team/ionic/commit/6fad0fe42814cde1126e6df264b99c069849c87a)), closes [#22359](https://github.com/ionic-team/ionic/issues/22359)
+* **vue:** lifecycle events are now fired in component context ([#22348](https://github.com/ionic-team/ionic/issues/22348)) ([bcef804](https://github.com/ionic-team/ionic/commit/bcef804deac4dea27def475460aff4cdf0d7d2fc)), closes [#22338](https://github.com/ionic-team/ionic/issues/22338)
+
+
+
+# [5.4.0 Sulfur](https://github.com/ionic-team/ionic/compare/v5.3.0...v5.4.0) (2020-10-15)
+
+> This is the first stable release of Ionic Vue.
+
+Enjoy the Vue! :tada:
+
+### New to Ionic Vue?
+
+Check out our [Quickstart Guide](https://ionicframework.com/docs/vue/quickstart) to get up and running. Then be sure to check out our [Building Your First App Guide](https://ionicframework.com/docs/vue/your-first-app) to learn how build a cross platform Ionic Vue application from start to finish!
+
+
+
+# [5.4.0-rc.3](https://github.com/ionic-team/ionic/compare/v5.4.0-rc.2...v5.4.0-rc.3) (2020-10-14)
+
+> This version is dedicated to our upcoming Ionic Vue release.
+
+### Bug Fixes
+
+* **vue:** ion-page component is now properly shown with HMR ([#22319](https://github.com/ionic-team/ionic/issues/22319)) ([c5ab562](https://github.com/ionic-team/ionic/commit/c5ab562eaa098717407e6b3e8139abd2112246a2))
+
+### Upgrade Steps
+
+```
+npm install @ionic/vue@5.4.0-rc.3 @ionic/vue-router@5.4.0-rc.3 --save-exact
+```
+
+### New to Ionic Vue?
+
+Check out our [Quickstart Guide](https://ionicframework.com/docs/vue/quickstart) to get up and running. Then be sure to check out our [Building Your First App Guide](https://ionicframework.com/docs/vue/your-first-app) to learn how build a cross platform Ionic Vue application from start to finish!
+
+
+
+# [5.4.0-rc.2](https://github.com/ionic-team/ionic/compare/v5.4.0-rc.1...v5.4.0-rc.2) (2020-10-13)
+
+> This version is dedicated to our upcoming Ionic Vue release.
+
+### Bug Fixes
+
+* **vue:** do not hide page content when using ion-page in non-routing contexts  ([#22302](https://github.com/ionic-team/ionic/issues/22302)) ([fff82d0](https://github.com/ionic-team/ionic/commit/fff82d0bdcd850e7c70947b39d554e88c4cdfd1e)), closes [#22300](https://github.com/ionic-team/ionic/issues/22300)
+* **vue:** going back from tabs page to a non-tabs page now selects correct page ([#22275](https://github.com/ionic-team/ionic/issues/22275)) ([b06ae16](https://github.com/ionic-team/ionic/commit/b06ae165912cbab811fe4a3c35b4e2b3fe0b425b)), closes [#22258](https://github.com/ionic-team/ionic/issues/22258)
+* **vue:** improve swipe to go back reliability ([#22288](https://github.com/ionic-team/ionic/issues/22288)) ([c74fd41](https://github.com/ionic-team/ionic/commit/c74fd4147b57e6b11c22dffdf6355568a763f30a)), closes [#22237](https://github.com/ionic-team/ionic/issues/22237)
+* **vue:** modal, popover, and nav are now created within application context ([#22282](https://github.com/ionic-team/ionic/issues/22282)) ([6026c65](https://github.com/ionic-team/ionic/commit/6026c65b1ae80af0f8604e7a3bcb220153267955)), closes [#22079](https://github.com/ionic-team/ionic/issues/22079)
+* **vue:** pages now render in correct outlet when using multiple nested outlets ([#22301](https://github.com/ionic-team/ionic/issues/22301)) ([52f655c](https://github.com/ionic-team/ionic/commit/52f655c9d40988cac36f88c88f24195b3f64c431)), closes [#22286](https://github.com/ionic-team/ionic/issues/22286)
+
+### Upgrade Steps
+
+```
+npm install @ionic/vue@5.4.0-rc.2 @ionic/vue-router@5.4.0-rc.2 --save-exact
+```
+
+### New to Ionic Vue?
+
+Check out our [Quickstart Guide](https://ionicframework.com/docs/vue/quickstart) to get up and running. Then be sure to check out our [Building Your First App Guide](https://ionicframework.com/docs/vue/your-first-app) to learn how build a cross platform Ionic Vue application from start to finish!
+
+
+
+# [5.4.0-rc.1](https://github.com/ionic-team/ionic/compare/v5.3.5...v5.4.0-rc.1) (2020-10-08)
+
+> This version is dedicated to our upcoming Ionic Vue release.
+
+### Bug Fixes
+
+* **vue:** correctly handle query params ([#22253](https://github.com/ionic-team/ionic/issues/22253)) ([6849dd3](https://github.com/ionic-team/ionic/commit/6849dd3483fb90aac1ff19834390a652c59a74de)), closes [#22229](https://github.com/ionic-team/ionic/issues/22229)
+* **vue:** correctly show ion-back-button when going back ([#22260](https://github.com/ionic-team/ionic/issues/22260)) ([39d2530](https://github.com/ionic-team/ionic/commit/39d2530427b1cd86975fc95ab2c8da9f4b0b27b3)), closes [#22217](https://github.com/ionic-team/ionic/issues/22217)
+* **vue:** hide layout shift on ion-page components ([#22254](https://github.com/ionic-team/ionic/issues/22254)) ([2bad1bb](https://github.com/ionic-team/ionic/commit/2bad1bb82e0fa3fe9e3db54403565d210f636120)), closes [#22052](https://github.com/ionic-team/ionic/issues/22052)
+* **vue:** ion-tab-bar no longer throws undefined error when re-creating tabs ([#22261](https://github.com/ionic-team/ionic/issues/22261)) ([d746561](https://github.com/ionic-team/ionic/commit/d746561ea29e61db2cfb55d2765b5548fd8b5a78)), closes [#22255](https://github.com/ionic-team/ionic/issues/22255)
+
+### Upgrade Steps
+
+```
+npm install @ionic/vue@5.4.0-rc.1 @ionic/vue-router@5.4.0-rc.1 --save-exact
+```
+
+### New to Ionic Vue?
+
+Check out our [Quickstart Guide](https://ionicframework.com/docs/vue/quickstart) to get up and running. Then be sure to check out our [Building Your First App Guide](https://ionicframework.com/docs/vue/your-first-app) to learn how build a cross platform Ionic Vue application from start to finish!
+
+
+
+## [5.3.5](https://github.com/ionic-team/ionic/compare/v5.3.4...v5.3.5) (2020-10-07)
+
+
+### Bug Fixes
+
+* **button:** allow any element type to use the "icon-only" slot ([#22168](https://github.com/ionic-team/ionic/issues/22168)) ([c454c84](https://github.com/ionic-team/ionic/commit/c454c84ef46322143467600334a0263d4e7df6cb))
+* **datetime:** do not set ampm when the column doesn't exist ([#22220](https://github.com/ionic-team/ionic/issues/22220)) ([18fb885](https://github.com/ionic-team/ionic/commit/18fb8855e0c45fe65843b33811812c51c74de90f)), closes [#22149](https://github.com/ionic-team/ionic/issues/22149)
+* **datetime:** remove the automatic switching from am to pm ([#22207](https://github.com/ionic-team/ionic/issues/22207)) ([f81d18c](https://github.com/ionic-team/ionic/commit/f81d18c6f9f1bce056afda1cac4cf6d6ace0a7ca)), closes [#18924](https://github.com/ionic-team/ionic/issues/18924) [#22171](https://github.com/ionic-team/ionic/issues/22171) [#22199](https://github.com/ionic-team/ionic/issues/22199)
+* **item:** properly align datetime and select with fixed or no labels ([#22221](https://github.com/ionic-team/ionic/issues/22221)) ([f42c688](https://github.com/ionic-team/ionic/commit/f42c688f4630e3dc5d10b947e7f2bee9d5967d8c)), closes [#18773](https://github.com/ionic-team/ionic/issues/18773) [#18761](https://github.com/ionic-team/ionic/issues/18761) [#18779](https://github.com/ionic-team/ionic/issues/18779)
+* **label:** keep color when focused on a floating or stacked label ([#18576](https://github.com/ionic-team/ionic/issues/18576)) ([992580a](https://github.com/ionic-team/ionic/commit/992580a3830321bdf9591681ebe38e823205389d)), closes [#18531](https://github.com/ionic-team/ionic/issues/18531)
+* **select:** do not close popover or set value when switching with arrow keys ([#22210](https://github.com/ionic-team/ionic/issues/22210)) ([1878c8e](https://github.com/ionic-team/ionic/commit/1878c8e7e01c02f06bdc5f1562af0d45531539cf)), closes [#22179](https://github.com/ionic-team/ionic/issues/22179)
+
+
+
 ## [5.3.4](https://github.com/ionic-team/ionic/compare/v5.3.3...v5.3.4) (2020-09-25)
 
 

README.md

@@ -12,7 +12,7 @@ Ionic Framework is based on [Web Components](https://www.webcomponents.org/intro
 | ------- | ------- | ------- |:-----:|
 | **Core** | [`@ionic/core`](https://www.npmjs.com/package/@ionic/core) | [![version](https://img.shields.io/npm/v/@ionic/core/latest.svg)](https://www.npmjs.com/package/@ionic/core) | [`README.md`](core/README.md)
 | **Angular** | [`@ionic/angular`](https://www.npmjs.com/package/@ionic/angular) | [![version](https://img.shields.io/npm/v/@ionic/angular/latest.svg)](https://www.npmjs.com/package/@ionic/angular) | [`README.md`](angular/README.md)
-| **Vue** | [`@ionic/vue`](https://www.npmjs.com/package/@ionic/vue) | [![version](https://img.shields.io/npm/v/@ionic/vue/latest.svg)](https://www.npmjs.com/package/@ionic/vue) | [`README.md`](vue/README.md)
+| **Vue** | [`@ionic/vue`](https://www.npmjs.com/package/@ionic/vue) | [![version](https://img.shields.io/npm/v/@ionic/vue/latest.svg)](https://www.npmjs.com/package/@ionic/vue) | [`README.md`](packages/vue/README.md)
 | **React** | [`@ionic/react`](https://www.npmjs.com/package/@ionic/react) | [![version](https://img.shields.io/npm/v/@ionic/react/latest.svg)](https://www.npmjs.com/package/@ionic/react) | [`README.md`](packages/react/README.md)
 
 Looking for the `ionic-angular` package? Ionic 3 has been moved to the [`ionic-v3`](https://github.com/ionic-team/ionic-v3) repo. See [Earlier Versions](#earlier-versions).

angular/README.md

@@ -7,7 +7,6 @@ Ionic Angular specific building blocks on top of [@ionic/core](https://www.npmjs
 
 * [Ionic Core Components](https://www.npmjs.com/package/@ionic/core)
 * [Ionic Documentation](https://ionicframework.com/docs/)
-* [Ionic Worldwide Slack](http://ionicworldwide.herokuapp.com/)
 * [Ionic Forum](https://forum.ionicframework.com/)
 * [Ionicons](http://ionicons.com/)
 * [Stencil](https://stenciljs.com/)

angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "5.3.4",
+  "version": "5.5.2",
   "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.3.4",
+    "@ionic/core": "5.5.2",
     "tslib": "^1.9.3"
   },
   "peerDependencies": {

angular/src/directives/proxies-list.txt

@@ -1,5 +1,5 @@
 
-import * as d from './proxies';
+import type * as d from './proxies';
 
 export const DIRECTIVES = [
   d.IonApp,

angular/test/test-app/package.json

@@ -8,7 +8,8 @@
     "sync:build": "sh scripts/build-ionic.sh",
     "sync": "sh scripts/sync.sh",
     "build": "npm run sync && ng build --prod --no-progress",
-    "test": "ng e2e --prod",
+    "pretest": "webdriver-manager update --versions.chrome 87.0.4280.20",
+    "test": "ng e2e --prod --webdriver-update=false",
     "test.dev": "npm run sync && ng e2e",
     "lint": "ng lint",
     "postinstall": "npm run sync && ngcc",

core/README.md

@@ -47,7 +47,6 @@ The `@ionic/core` package can by used in simple HTML, or by vanilla JavaScript w
 ## Related
 
 * [Ionic Documentation](https://ionicframework.com/docs/)
-* [Ionic Worldwide Slack](http://ionicworldwide.herokuapp.com/)
 * [Ionic Forum](https://forum.ionicframework.com/)
 * [Ionicons](http://ionicons.com/)
 * [Stencil](https://stenciljs.com/)

core/api.txt

@@ -248,6 +248,7 @@ ion-checkbox,part,mark
 
 ion-chip,shadow
 ion-chip,prop,color,string | undefined,undefined,false,false
+ion-chip,prop,disabled,boolean,false,false,false
 ion-chip,prop,mode,"ios" | "md",undefined,false,false
 ion-chip,prop,outline,boolean,false,false,false
 ion-chip,css-prop,--background
@@ -1014,6 +1015,7 @@ ion-segment,prop,color,string | undefined,undefined,false,false
 ion-segment,prop,disabled,boolean,false,false,false
 ion-segment,prop,mode,"ios" | "md",undefined,false,false
 ion-segment,prop,scrollable,boolean,false,false,false
+ion-segment,prop,swipeGesture,boolean,true,false,false
 ion-segment,prop,value,null | string | undefined,undefined,false,false
 ion-segment,event,ionChange,SegmentChangeEventDetail,true
 ion-segment,css-prop,--background

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "5.3.4",
+  "version": "5.5.2",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -15,11 +15,11 @@
     "progressive web app",
     "pwa"
   ],
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "es2015": "dist/esm/index.mjs",
-  "es2017": "dist/esm/index.mjs",
-  "jsnext:main": "dist/esm/index.mjs",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "es2015": "dist/esm/index.js",
+  "es2017": "dist/esm/index.js",
+  "jsnext:main": "dist/esm/index.js",
   "collection:main": "dist/collection/index.js",
   "collection": "dist/collection/collection-manifest.json",
   "types": "dist/types/interface.d.ts",
@@ -36,8 +36,9 @@
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
-    "@stencil/core": "1.17.3",
+    "@stencil/core": "2.1.2",
     "@stencil/sass": "1.3.2",
+    "@stencil/vue-output-target": "0.2.2",
     "@types/jest": "^26.0.10",
     "@types/node": "^14.6.0",
     "@types/puppeteer": "3.0.1",
@@ -58,10 +59,11 @@
     "swiper": "5.4.1",
     "tslint": "^6.1.3",
     "tslint-ionic-rules": "0.0.21",
-    "tslint-react": "^5.0.0"
+    "tslint-react": "^5.0.0",
+    "typescript": "^4.0.5"
   },
   "scripts": {
-    "build": "npm run clean && npm run build.css && npm run build.vendor && stencil build --docs --es5 && npm run cdnloader",
+    "build": "npm run clean && npm run build.css && npm run build.vendor && stencil build --docs --es5 --docs-json dist/docs.json && npm run cdnloader",
     "build.vendor": "rollup --config ./scripts/swiper.rollup.config.js",
     "build.css": "npm run css.sass && npm run css.minify",
     "build.debug": "npm run clean && stencil build --debug",
@@ -73,7 +75,7 @@
     "css.sass": "sass src/css:./css",
     "lint": "npm run lint.ts && npm run lint.sass",
     "lint.fix": "npm run lint.ts.fix && npm run lint.sass.fix",
-    "lint.sass": "stylelint 'src/**/*.scss'",
+    "lint.sass": "stylelint \"src/**/*.scss\"",
     "lint.sass.fix": "npm run lint.sass -- --fix",
     "lint.ts": "tslint --project .",
     "lint.ts.fix": "tslint --project . --fix",
@@ -87,7 +89,7 @@
     "test.screenshot": "stencil test --e2e --screenshot --screenshot-connector=scripts/screenshot/dev.js",
     "test.screenshot.ci": "stencil test --e2e --screenshot --screenshot-connector=scripts/screenshot/ci.js --ci",
     "test.watch": "jest --watch --no-cache",
-    "test.treeshake": "node scripts/treeshaking.js dist/index.mjs",
+    "test.treeshake": "node scripts/treeshaking.js dist/index.js",
     "validate": "npm run lint && npm run test && npm run build && npm run test.treeshake"
   },
   "author": "Ionic Team",

core/scripts/treeshaking.js

@@ -1,89 +1,94 @@
-
 const path = require('path');
 const { rollup } = require('rollup');
 const virtual = require('@rollup/plugin-virtual');
 const fs = require('fs');
 
-function main() {
-  const input = process.argv[2] || get_input();
-  check(input).then(result => {
-    const relative = path.relative(process.cwd(), input);
+async function main() {
+  const input = process.argv[2] || getInput();
+  const result = await check(input);
+  const relative = path.relative(process.cwd(), input);
 
-    if (result.shaken) {
-      console.error(`Success! ${relative} is fully tree-shakeable`);
-    } else {
-      error(`Failed to tree-shake ${relative}`);
-    }
-  });
+  if (result.shaken) {
+    console.error(`Success! ${relative} is fully tree-shakeable`);
+  } else {
+    error(`Failed to tree-shake ${relative}`);
+  }
 }
 
-
 function error(msg) {
-	console.error(msg);
-	process.exit(1);
+  console.error(msg);
+  process.exit(1);
 }
 
-function get_input() {
-	if (!fs.existsSync('package.json')) {
-		error(`Could not find package.json`);
-	}
+function getInput() {
+  if (!fs.existsSync('package.json')) {
+    error(`Could not find package.json`);
+  }
 
-	const pkg = JSON.parse(fs.readFileSync('package.json'), 'utf-8');
+  const pkg = JSON.parse(fs.readFileSync('package.json'), 'utf-8');
 
-	const unresolved = pkg.module || pkg.main || 'index';
-	const resolved = resolve(unresolved);
+  const unresolved = pkg.module || pkg.main || 'index';
+  const resolved = resolve(unresolved);
 
-	if (!resolved) {
-		error(`Could not resolve entry point`);
-	}
+  if (!resolved) {
+    error(`Could not resolve entry point`);
+  }
 
-	return resolved;
+  return resolved;
 }
 
 function resolve(file) {
-	if (is_directory(file)) {
-		return if_exists(`${file}/index.mjs`) || if_exists(`${file}/index.js`);
-	}
+  if (isDirectory(file)) {
+    return ifExists(`${file}/index.js`) || ifExists(`${file}/index.cjs.js`);
+  }
 
-	return if_exists(file) || if_exists(`${file}.mjs`) || if_exists(`${file}.js`);
+  return ifExists(file) || ifExists(`${file}.js`) || ifExists(`${file}.cjs.js`);
 }
 
-function is_directory(file) {
-	try {
-		const stats = fs.statSync(file);
-		return stats.isDirectory();
-	} catch (err) {
-		return false;
-	}
+function isDirectory(file) {
+  try {
+    const stats = fs.statSync(file);
+    return stats.isDirectory();
+  } catch (err) {
+    return false;
+  }
 }
 
-function if_exists(file) {
-	return fs.existsSync(file) ? file : null;
+function ifExists(file) {
+  return fs.existsSync(file) ? file : null;
 }
 
-const check = input => {
-	const resolved = path.resolve(input);
+async function check(input) {
+  const resolved = path.resolve(input);
 
-	return rollup({
-		input: '__agadoo__',
-		plugins: [
-			virtual({
-				__agadoo__: `import ${JSON.stringify(resolved)}`,
-				'tslib': '',
-			})
-		],
-		onwarn: (warning, handle) => {
-			if (warning.code !== 'EMPTY_BUNDLE') handle(warning);
-		}
-	}).then(bundle => bundle.generate({
-		format: 'es'
-	})).then(o => {
-		const output = o.output;
-		console.log(output);
-		return {
-			shaken: output.length === 1 && output[0].code.trim() === ''
-		};
-	});
-};
+  const bundle = await rollup({
+    input: '__agadoo__',
+    plugins: [
+      virtual({
+        __agadoo__: `import ${JSON.stringify(resolved)}`,
+        tslib: `
+          const noop = () => {};  
+          export const __awaiter = noop;
+          export const __extends = noop;
+          export const __generator = noop;
+          export const __spreadArrays = noop;
+        `,
+      }),
+    ],
+    onwarn: (warning, handle) => {
+      if (warning.code !== 'EMPTY_BUNDLE') handle(warning);
+    },
+  });
+
+  const o = await bundle.generate({
+    format: 'es',
+  });
+
+  const output = o.output;
+  console.log(output);
+  return {
+    shaken: output.length === 1 && output[0].code.trim() === '',
+  };
+}
 
 main();

core/src/components.d.ts

@@ -394,7 +394,7 @@ export namespace Components {
          */
         "name": string;
         /**
-          * The value of the toggle does not mean if it's checked or not, use the `checked` property for that.  The value of a toggle is analogous to the value of a `<input type="checkbox">`, it's only used when the toggle participates in a native `<form>`.
+          * The value of the checkbox does not mean if it's checked or not, use the `checked` property for that.  The value of a checkbox is analogous to the value of an `<input type="checkbox">`, it's only used when the checkbox participates in a native `<form>`.
          */
         "value": string;
     }
@@ -403,6 +403,10 @@ export namespace Components {
           * 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).
          */
         "color"?: Color;
+        /**
+          * If `true`, the user cannot interact with the chip.
+         */
+        "disabled": boolean;
         /**
           * The mode determines which platform styles to use.
          */
@@ -858,7 +862,7 @@ export namespace Components {
          */
         "color"?: Color;
         /**
-          * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke.
+          * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
          */
         "debounce": number;
         /**
@@ -1704,7 +1708,7 @@ export namespace Components {
          */
         "name": string;
         "setButtonTabindex": (value: number) => Promise<void>;
-        "setFocus": () => Promise<void>;
+        "setFocus": (ev: any) => Promise<void>;
         /**
           * the value of the radio.
          */
@@ -1730,7 +1734,7 @@ export namespace Components {
          */
         "color"?: Color;
         /**
-          * How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value.
+          * How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value. This also impacts form bindings such as `ngModel` or `v-model`.
          */
         "debounce": number;
         /**
@@ -1991,7 +1995,7 @@ export namespace Components {
          */
         "color"?: Color;
         /**
-          * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke.
+          * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
          */
         "debounce": number;
         /**
@@ -2060,6 +2064,10 @@ export namespace Components {
           * If `true`, the segment buttons will overflow and the user can swipe to see them. In addition, this will disable the gesture to drag the indicator between the buttons in order to swipe to see hidden buttons.
          */
         "scrollable": boolean;
+        /**
+          * If `true`, users will be able to swipe between segment buttons to activate them.
+         */
+        "swipeGesture": boolean;
         /**
           * the value of the segment.
          */
@@ -2430,7 +2438,7 @@ export namespace Components {
          */
         "cols"?: number;
         /**
-          * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke.
+          * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
          */
         "debounce": number;
         /**
@@ -3701,7 +3709,7 @@ declare namespace LocalJSX {
          */
         "name"?: string;
         /**
-          * Emitted when the toggle loses focus.
+          * Emitted when the checkbox loses focus.
          */
         "onIonBlur"?: (event: CustomEvent<void>) => void;
         /**
@@ -3709,7 +3717,7 @@ declare namespace LocalJSX {
          */
         "onIonChange"?: (event: CustomEvent<CheckboxChangeEventDetail>) => void;
         /**
-          * Emitted when the toggle has focus.
+          * Emitted when the checkbox has focus.
          */
         "onIonFocus"?: (event: CustomEvent<void>) => void;
         /**
@@ -3717,7 +3725,7 @@ declare namespace LocalJSX {
          */
         "onIonStyle"?: (event: CustomEvent<StyleEventDetail>) => void;
         /**
-          * The value of the toggle does not mean if it's checked or not, use the `checked` property for that.  The value of a toggle is analogous to the value of a `<input type="checkbox">`, it's only used when the toggle participates in a native `<form>`.
+          * The value of the checkbox does not mean if it's checked or not, use the `checked` property for that.  The value of a checkbox is analogous to the value of an `<input type="checkbox">`, it's only used when the checkbox participates in a native `<form>`.
          */
         "value"?: string;
     }
@@ -3726,6 +3734,10 @@ declare namespace LocalJSX {
           * 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).
          */
         "color"?: Color;
+        /**
+          * If `true`, the user cannot interact with the chip.
+         */
+        "disabled"?: boolean;
         /**
           * The mode determines which platform styles to use.
          */
@@ -4197,7 +4209,7 @@ declare namespace LocalJSX {
          */
         "color"?: Color;
         /**
-          * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke.
+          * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
          */
         "debounce"?: number;
         /**
@@ -4442,6 +4454,10 @@ declare namespace LocalJSX {
           * The mode determines which platform styles to use.
          */
         "mode"?: "ios" | "md";
+        /**
+          * Emitted when the color changes.
+         */
+        "onIonColor"?: (event: CustomEvent<StyleEventDetail>) => void;
         /**
           * Emitted when the styles change.
          */
@@ -4988,7 +5004,7 @@ declare namespace LocalJSX {
          */
         "color"?: Color;
         /**
-          * How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value.
+          * How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value. This also impacts form bindings such as `ngModel` or `v-model`.
          */
         "debounce"?: number;
         /**
@@ -5261,7 +5277,7 @@ declare namespace LocalJSX {
          */
         "color"?: Color;
         /**
-          * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke.
+          * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
          */
         "debounce"?: number;
         /**
@@ -5362,6 +5378,10 @@ declare namespace LocalJSX {
           * If `true`, the segment buttons will overflow and the user can swipe to see them. In addition, this will disable the gesture to drag the indicator between the buttons in order to swipe to see hidden buttons.
          */
         "scrollable"?: boolean;
+        /**
+          * If `true`, users will be able to swipe between segment buttons to activate them.
+         */
+        "swipeGesture"?: boolean;
         /**
           * the value of the segment.
          */
@@ -5737,7 +5757,7 @@ declare namespace LocalJSX {
          */
         "cols"?: number;
         /**
-          * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke.
+          * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
          */
         "debounce"?: number;
         /**

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

core/src/components/alert/alert.scss

@@ -27,7 +27,7 @@
   @include position(0, 0, 0, 0);
 
   display: flex;
-  position: fixed;
+  position: absolute;
 
   align-items: center;
   justify-content: center;

core/src/components/alert/alert.tsx

@@ -139,8 +139,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
     if (
       !inputTypes.has('radio')
       || (ev.target && !this.el.contains(ev.target))
-      || ev.target.classList.contains('alert-button'))
-    {
+      || ev.target.classList.contains('alert-button')) {
       return;
     }
 
@@ -159,7 +158,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
 
     // If hitting arrow down or arrow right, move to the next radio
     // If we're on the last radio, move to the first radio
-    if (['ArrowDown', 'ArrowRight'].includes(ev.key)) {
+    if (['ArrowDown', 'ArrowRight'].includes(ev.code)) {
       nextEl = (index === radios.length - 1)
         ? radios[0]
         : radios[index + 1];
@@ -167,10 +166,10 @@ export class Alert implements ComponentInterface, OverlayInterface {
 
     // If hitting arrow up or arrow left, move to the previous radio
     // If we're on the first radio, move to the last radio
-    if (['ArrowUp', 'ArrowLeft'].includes(ev.key)) {
+    if (['ArrowUp', 'ArrowLeft'].includes(ev.code)) {
       nextEl = (index === 0)
         ? radios[radios.length - 1]
-        : radios[index - 1]
+        : radios[index - 1];
     }
 
     if (nextEl && radios.includes(nextEl)) {
@@ -374,22 +373,24 @@ export class Alert implements ComponentInterface, OverlayInterface {
     return values;
   }
 
-  private renderAlertInputs(labelledBy: string | undefined) {
+  private renderAlertInputs() {
     switch (this.inputType) {
-      case 'checkbox': return this.renderCheckbox(labelledBy);
-      case 'radio': return this.renderRadio(labelledBy);
-      default: return this.renderInput(labelledBy);
+      case 'checkbox': return this.renderCheckbox();
+      case 'radio': return this.renderRadio();
+      default: return this.renderInput();
     }
   }
 
-  private renderCheckbox(labelledby: string | undefined) {
+  private renderCheckbox() {
     const inputs = this.processedInputs;
     const mode = getIonMode(this);
+
     if (inputs.length === 0) {
       return null;
     }
+
     return (
-      <div class="alert-checkbox-group" aria-labelledby={labelledby}>
+      <div class="alert-checkbox-group">
         { inputs.map(i => (
           <button
             type="button"
@@ -423,13 +424,15 @@ export class Alert implements ComponentInterface, OverlayInterface {
     );
   }
 
-  private renderRadio(labelledby: string | undefined) {
+  private renderRadio() {
     const inputs = this.processedInputs;
+
     if (inputs.length === 0) {
       return null;
     }
+
     return (
-      <div class="alert-radio-group" role="radiogroup" aria-labelledby={labelledby} aria-activedescendant={this.activeId}>
+      <div class="alert-radio-group" role="radiogroup" aria-activedescendant={this.activeId}>
         { inputs.map(i => (
           <button
             type="button"
@@ -460,13 +463,13 @@ export class Alert implements ComponentInterface, OverlayInterface {
     );
   }
 
-  private renderInput(labelledby: string | undefined) {
+  private renderInput() {
     const inputs = this.processedInputs;
     if (inputs.length === 0) {
       return null;
     }
     return (
-      <div class="alert-input-group" aria-labelledby={labelledby}>
+      <div class="alert-input-group">
         { inputs.map(i => {
           if (i.type === 'textarea') {
             return (
@@ -553,13 +556,6 @@ export class Alert implements ComponentInterface, OverlayInterface {
     const subHdrId = `alert-${overlayIndex}-sub-hdr`;
     const msgId = `alert-${overlayIndex}-msg`;
 
-    let labelledById: string | undefined;
-    if (header !== undefined) {
-      labelledById = hdrId;
-    } else if (subHeader !== undefined) {
-      labelledById = subHdrId;
-    }
-
     return (
       <Host
         role="dialog"
@@ -590,7 +586,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
 
           <div id={msgId} class="alert-message" innerHTML={sanitizeDOMString(this.message)}></div>
 
-          {this.renderAlertInputs(labelledById)}
+          {this.renderAlertInputs()}
           {this.renderAlertButtons()}
 
         </div>

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

core/src/components/app/app.scss

@@ -3,6 +3,16 @@ html.plt-mobile ion-app {
   user-select: none;
 }
 
+/**
+ * This works around a WebKit issue
+ * where user-select: none was causing
+ * contenteditable to not be selectable,
+ * even though inputs and textareas are selectable.
+ */
+html.plt-mobile ion-app [contenteditable] {
+  user-select: text;
+}
+
 ion-app.force-statusbar-padding {
   --ion-safe-area-top: 20px;
 }

core/src/components/app/app.tsx

@@ -13,7 +13,7 @@ export class App implements ComponentInterface {
 
   componentDidLoad() {
     if (Build.isBrowser) {
-      rIC(() => {
+      rIC(async () => {
         const isHybrid = isPlatform(window, 'hybrid');
         if (!config.getBoolean('_testing')) {
           import('../../utils/tap-click').then(module => module.startTapClick(config));
@@ -24,8 +24,11 @@ export class App implements ComponentInterface {
         if (config.getBoolean('inputShims', needInputShims())) {
           import('../../utils/input-shims/input-shims').then(module => module.startInputShims(config));
         }
+        const hardwareBackButtonModule = await import('../../utils/hardware-back-button');
         if (config.getBoolean('hardwareBackButton', isHybrid)) {
-          import('../../utils/hardware-back-button').then(module => module.startHardwareBackButton());
+          hardwareBackButtonModule.startHardwareBackButton();
+        } else {
+          hardwareBackButtonModule.blockHardwareBackButton();
         }
         if (typeof (window as any) !== 'undefined') {
           import('../../utils/keyboard/keyboard').then(module => module.startKeyboardAssist(window));

core/src/components/app/test/safe-area/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr" class="safe-area">
+<html lang="en" dir="ltr" class="safe-area">
 
 <head>
   <meta charset="UTF-8">

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

core/src/components/avatar/test/standalone/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

core/src/components/back-button/test/host-element/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

core/src/components/backdrop/backdrop.tsx

@@ -67,6 +67,7 @@ export class Backdrop implements ComponentInterface {
     return (
       <Host
         tabindex="-1"
+        aria-hidden="true"
         class={{
           [mode]: true,
           'backdrop-hide': !this.visible,

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

core/src/components/badge/test/standalone/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

core/src/components/button/button.tsx

@@ -3,7 +3,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop
 import { getIonMode } from '../../global/ionic-global';
 import { AnimationBuilder, Color, RouterDirection } from '../../interface';
 import { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
-import { hasShadowDom } from '../../utils/helpers';
+import { hasShadowDom, inheritAttributes } from '../../utils/helpers';
 import { createColorClasses, hostContext, openURL } from '../../utils/theme';
 
 /**
@@ -28,6 +28,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
   private inItem = false;
   private inListHeader = false;
   private inToolbar = false;
+  private inheritedAttributes: { [k: string]: any } = {};
 
   @Element() el!: HTMLElement;
 
@@ -134,10 +135,11 @@ 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']);
   }
 
   private get hasIconOnly() {
-    return !!this.el.querySelector('ion-icon[slot="icon-only"]');
+    return !!this.el.querySelector('[slot="icon-only"]');
   }
 
   private get rippleType() {
@@ -184,7 +186,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
 
   render() {
     const mode = getIonMode(this);
-    const { buttonType, type, disabled, rel, target, size, href, color, expand, hasIconOnly, shape, strong } = this;
+    const { buttonType, type, disabled, rel, target, size, href, color, expand, hasIconOnly, shape, strong, inheritedAttributes } = this;
     const finalSize = size === undefined && this.inItem ? 'small' : size;
     const TagType = href === undefined ? 'button' : 'a' as any;
     const attrs = (TagType === 'button')
@@ -227,6 +229,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
           disabled={disabled}
           onFocus={this.onFocus}
           onBlur={this.onBlur}
+          {...inheritedAttributes}
         >
           <span class="button-inner">
             <slot name="icon-only"></slot>

core/src/components/button/test/anchor/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

core/src/components/button/test/clear/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

core/src/components/button/test/dynamic/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

core/src/components/button/test/expand/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

core/src/components/button/test/form/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

core/src/components/button/test/icon/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">
@@ -17,6 +17,14 @@
     <ion-header>
       <ion-toolbar>
         <ion-title>Button - Icon</ion-title>
+        <ion-buttons slot="end">
+          <ion-button>
+            <ion-icon slot="icon-only" name="heart"></ion-icon>
+          </ion-button>
+          <ion-button class="avatar-button">
+            <img slot="icon-only" src="/src/components/avatar/test/avatar.svg">
+          </ion-button>
+        </ion-buttons>
       </ion-toolbar>
     </ion-header>
 
@@ -26,8 +34,6 @@
           <ion-icon name="home" slot="start"></ion-icon>
           Left Icon
         </ion-button>
-      </p>
-      <p>
         <ion-button href="#">
           <ion-icon name="home" slot="start"></ion-icon>
           Left Icon
@@ -38,8 +44,6 @@
           <ion-icon name="star" slot="end"></ion-icon>
           Right Icon
         </ion-button>
-      </p>
-      <p>
         <ion-button href="#">
           <ion-icon name="star" slot="end"></ion-icon>
           Right Icon
@@ -49,8 +53,6 @@
         <ion-button>
           <ion-icon name="flag" slot="icon-only"></ion-icon>
         </ion-button>
-      </p>
-      <p>
         <ion-button href="#">
           <ion-icon name="flag" slot="icon-only"></ion-icon>
         </ion-button>
@@ -60,8 +62,6 @@
           <ion-icon name="help-circle" slot="start"></ion-icon>
           Left, Large
         </ion-button>
-      </p>
-      <p>
         <ion-button size="large" href="#">
           <ion-icon name="help-circle" slot="start"></ion-icon>
           Left, Large
@@ -72,8 +72,6 @@
           <ion-icon name="settings" slot="end"></ion-icon>
           Right, Large
         </ion-button>
-      </p>
-      <p>
         <ion-button size="large" href="#">
           <ion-icon name="settings" slot="end"></ion-icon>
           Right, Large
@@ -83,8 +81,6 @@
         <ion-button size="large">
           <ion-icon name="heart" slot="icon-only"></ion-icon>
         </ion-button>
-      </p>
-      <p>
         <ion-button size="large" href="#">
           <ion-icon name="heart" slot="icon-only"></ion-icon>
         </ion-button>
@@ -94,8 +90,6 @@
           <ion-icon name="checkmark" slot="start"></ion-icon>
           Left, Small
         </ion-button>
-      </p>
-      <p>
         <ion-button size="small" href="#">
           <ion-icon name="checkmark" slot="start"></ion-icon>
           Left, Small
@@ -106,8 +100,6 @@
           <ion-icon name="arrow-forward" slot="end"></ion-icon>
           Right, Small
         </ion-button>
-      </p>
-      <p>
         <ion-button size="small" href="#">
           <ion-icon name="arrow-forward" slot="end"></ion-icon>
           Right, Small
@@ -117,8 +109,6 @@
         <ion-button size="small">
           <ion-icon name="search" slot="icon-only"></ion-icon>
         </ion-button>
-      </p>
-      <p>
         <ion-button size="small" href="#">
           <ion-icon name="search" slot="icon-only"></ion-icon>
         </ion-button>
@@ -128,4 +118,15 @@
   </ion-app>
 </body>
 
+<style>
+  .avatar-button img {
+    border-radius: 50%;
+  }
+
+  .ios .avatar-button img {
+    width: 26px;
+    height: 26px;
+  }
+</style>
+
 </html>

core/src/components/button/test/outline/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

core/src/components/button/test/perf/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

core/src/components/button/test/round/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

core/src/components/button/test/size/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

core/src/components/button/test/standalone/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">
@@ -50,6 +50,7 @@
   <ion-button class="wide">wide</ion-button>
   <ion-button class="large">large</ion-button>
   <ion-button class="round">rounded</ion-button>
+  <ion-button aria-label="this is my custom label">custom aria-label</ion-button>
 
   <!-- Custom Colors -->
   <ion-button class="custom">custom</ion-button>

core/src/components/button/test/states/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

core/src/components/button/test/strong/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

core/src/components/button/test/toolbar/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

core/src/components/buttons/test/icon/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

core/src/components/card-header/test/basic/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

core/src/components/card/test/button/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

core/src/components/card/test/standalone/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

core/src/components/card/test/translucent/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

core/src/components/checkbox/checkbox.scss

@@ -40,8 +40,18 @@
   --checkmark-color: #{current-color(contrast)};
 }
 
-button {
+label {
   @include input-cover();
+
+  display: flex;
+  
+  align-items: center;
+
+  opacity: 0;
+}
+
+input {
+  @include visually-hidden();
 }
 
 .checkbox-icon {

core/src/components/checkbox/checkbox.tsx

@@ -2,7 +2,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop
 
 import { getIonMode } from '../../global/ionic-global';
 import { CheckboxChangeEventDetail, Color, StyleEventDetail } from '../../interface';
-import { findItemLabel, renderHiddenInput } from '../../utils/helpers';
+import { getAriaLabel, renderHiddenInput } from '../../utils/helpers';
 import { createColorClasses, hostContext } from '../../utils/theme';
 
 /**
@@ -22,7 +22,7 @@ import { createColorClasses, hostContext } from '../../utils/theme';
 export class Checkbox implements ComponentInterface {
 
   private inputId = `ion-cb-${checkboxIds++}`;
-  private buttonEl?: HTMLElement;
+  private focusEl?: HTMLElement;
 
   @Element() el!: HTMLElement;
 
@@ -54,11 +54,11 @@ export class Checkbox implements ComponentInterface {
   @Prop() disabled = false;
 
   /**
-   * The value of the toggle does not mean if it's checked or not, use the `checked`
+   * The value of the checkbox does not mean if it's checked or not, use the `checked`
    * property for that.
    *
-   * The value of a toggle is analogous to the value of a `<input type="checkbox">`,
-   * it's only used when the toggle participates in a native `<form>`.
+   * The value of a checkbox is analogous to the value of an `<input type="checkbox">`,
+   * it's only used when the checkbox participates in a native `<form>`.
    */
   @Prop() value = 'on';
 
@@ -68,12 +68,12 @@ export class Checkbox implements ComponentInterface {
   @Event() ionChange!: EventEmitter<CheckboxChangeEventDetail>;
 
   /**
-   * Emitted when the toggle has focus.
+   * Emitted when the checkbox has focus.
    */
   @Event() ionFocus!: EventEmitter<void>;
 
   /**
-   * Emitted when the toggle loses focus.
+   * Emitted when the checkbox loses focus.
    */
   @Event() ionBlur!: EventEmitter<void>;
 
@@ -109,12 +109,14 @@ export class Checkbox implements ComponentInterface {
   }
 
   private setFocus() {
-    if (this.buttonEl) {
-      this.buttonEl.focus();
+    if (this.focusEl) {
+      this.focusEl.focus();
     }
   }
 
-  private onClick = () => {
+  private onClick = (ev: any) => {
+    ev.preventDefault();
+
     this.setFocus();
     this.checked = !this.checked;
     this.indeterminate = false;
@@ -129,14 +131,11 @@ export class Checkbox implements ComponentInterface {
   }
 
   render() {
-    const { inputId, indeterminate, disabled, checked, value, color, el } = this;
-    const labelId = inputId + '-lbl';
+    const { color, checked, disabled, el, indeterminate, inputId, name, value } = this;
     const mode = getIonMode(this);
-    const label = findItemLabel(el);
-    if (label) {
-      label.id = labelId;
-    }
-    renderHiddenInput(true, el, this.name, (checked ? value : ''), disabled);
+    const { label, labelId, labelText } = getAriaLabel(el, inputId);
+
+    renderHiddenInput(true, el, name, (checked ? value : ''), disabled);
 
     let path = indeterminate
       ? <path d="M6 12L18 12" part="mark" />
@@ -151,10 +150,10 @@ export class Checkbox implements ComponentInterface {
     return (
       <Host
         onClick={this.onClick}
-        role="checkbox"
-        aria-disabled={disabled ? 'true' : null}
+        aria-labelledby={label ? labelId : null}
         aria-checked={`${checked}`}
-        aria-labelledby={labelId}
+        aria-hidden={disabled ? 'true' : null}
+        role="checkbox"
         class={createColorClasses(color, {
           [mode]: true,
           'in-item': hostContext('ion-item', el),
@@ -167,14 +166,18 @@ export class Checkbox implements ComponentInterface {
         <svg class="checkbox-icon" viewBox="0 0 24 24" part="container">
           {path}
         </svg>
-        <button
-          type="button"
-          onFocus={this.onFocus}
-          onBlur={this.onBlur}
-          disabled={this.disabled}
-          ref={btnEl => this.buttonEl = btnEl}
-        >
-        </button>
+        <label htmlFor={inputId}>
+          {labelText}
+        </label>
+        <input
+          type="checkbox"
+          aria-checked={`${checked}`}
+          disabled={disabled}
+          id={inputId}
+          onFocus={() => this.onFocus()}
+          onBlur={() => this.onBlur()}
+          ref={focusEl => this.focusEl = focusEl}
+        />
       </Host>
     );
   }

core/src/components/checkbox/readme.md

@@ -228,8 +228,8 @@ export class CheckboxExample {
       <ion-label>{{entry.val}}</ion-label>
       <ion-checkbox
         slot="end"
-        @input="entry.checked = $event.target.value"
-        :value="entry.isChecked">
+        @update:modelValue="entry.isChecked = $event"
+        :modelValue="entry.isChecked">
       </ion-checkbox>
     </ion-item>
   </ion-list>
@@ -266,16 +266,16 @@ export default defineComponent({
 | `indeterminate` | `indeterminate` | If `true`, the checkbox will visually appear as indeterminate.                                                                                                                                                                                                         | `boolean`             | `false`        |
 | `mode`          | `mode`          | The mode determines which platform styles to use.                                                                                                                                                                                                                      | `"ios" \| "md"`       | `undefined`    |
 | `name`          | `name`          | The name of the control, which is submitted with the form data.                                                                                                                                                                                                        | `string`              | `this.inputId` |
-| `value`         | `value`         | The value of the toggle does not mean if it's checked or not, use the `checked` property for that.  The value of a toggle is analogous to the value of a `<input type="checkbox">`, it's only used when the toggle participates in a native `<form>`.                  | `string`              | `'on'`         |
+| `value`         | `value`         | The value of the checkbox does not mean if it's checked or not, use the `checked` property for that.  The value of a checkbox is analogous to the value of an `<input type="checkbox">`, it's only used when the checkbox participates in a native `<form>`.           | `string`              | `'on'`         |
 
 
 ## Events
 
 | Event       | Description                                    | Type                                     |
 | ----------- | ---------------------------------------------- | ---------------------------------------- |
-| `ionBlur`   | Emitted when the toggle loses focus.           | `CustomEvent<void>`                      |
+| `ionBlur`   | Emitted when the checkbox loses focus.         | `CustomEvent<void>`                      |
 | `ionChange` | Emitted when the checked property has changed. | `CustomEvent<CheckboxChangeEventDetail>` |
-| `ionFocus`  | Emitted when the toggle has focus.             | `CustomEvent<void>`                      |
+| `ionFocus`  | Emitted when the checkbox has focus.           | `CustomEvent<void>`                      |
 
 
 ## Shadow Parts

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">
@@ -26,6 +26,11 @@
     </ion-header>
 
     <ion-content id="content">
+      <ion-item onClick="clickItem()">
+        <ion-label>Clickable Item</ion-label>
+        <ion-checkbox></ion-checkbox>
+      </ion-item>
+
       <ion-item>
         <ion-label>Default</ion-label>
         <ion-checkbox checked></ion-checkbox>
@@ -38,7 +43,7 @@
 
       <ion-item>
         <ion-label>Secondary</ion-label>
-        <ion-checkbox checked color="secondary"></ion-checkbox>
+        <ion-checkbox disabled checked color="secondary"></ion-checkbox>
       </ion-item>
 
       <ion-item>
@@ -103,6 +108,35 @@
     </ion-content>
 
   </ion-app>
+
+  <script>
+    const inputs = document.querySelectorAll('ion-checkbox');
+
+    for (var i = 0; i < inputs.length; i++) {
+      const input = inputs[i];
+
+      input.addEventListener('ionBlur', function() {
+        console.log('Listen ionBlur: fired');
+      });
+
+      input.addEventListener('ionFocus', function() {
+        console.log('Listen ionFocus: fired');
+      });
+
+      input.addEventListener('ionChange', function(ev) {
+        console.log('Listen ionChange: fired', ev.detail);
+      });
+
+      input.addEventListener('click', function() {
+        console.log('Listen click: fired');
+      });
+    }
+
+    const clickItem = () => {
+      console.log('Item click: fired');
+    }
+  </script>
+
 </body>
 
 </html>

core/src/components/checkbox/test/indeterminate/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">
@@ -31,22 +31,22 @@
       <div class="ion-padding-start">
         <!-- Default to unchecked -->
         <label for="unchecked">Unchecked</label>
-        <input name="unchecked" type="checkbox">
+        <input name="unchecked" id="unchecked" type="checkbox">
         <br>
 
         <!-- Default to checked -->
         <label for="checked">Checked</label>
-        <input name="checked" type="checkbox" checked />
+        <input name="checked" id="checked" type="checkbox" checked />
         <br>
 
         <!-- Default to indeterminate -->
         <label for="indeterminate">Indeterminate</label>
-        <input name="indeterminate" type="checkbox" class="indeterminate">
+        <input name="indeterminate" id="indeterminate" type="checkbox" class="indeterminate">
         <br>
 
         <!-- Default to checked / indeterminate -->
         <label for="both">Checked / Indeterminate</label>
-        <input name="both" type="checkbox" checked class="indeterminate">
+        <input name="both" id="both" type="checkbox" checked class="indeterminate">
         <br>
       </div>
 
@@ -81,15 +81,15 @@
         </ion-label>
       </ion-list-header>
       <div class="ion-padding-start">
-        <ion-checkbox indeterminate></ion-checkbox>
-        <ion-checkbox indeterminate color="secondary"></ion-checkbox>
-        <ion-checkbox indeterminate color="tertiary"></ion-checkbox>
-        <ion-checkbox indeterminate color="success"></ion-checkbox>
-        <ion-checkbox indeterminate color="warning"></ion-checkbox>
-        <ion-checkbox indeterminate color="danger"></ion-checkbox>
-        <ion-checkbox indeterminate color="dark"></ion-checkbox>
-        <ion-checkbox indeterminate color="medium"></ion-checkbox>
-        <ion-checkbox indeterminate color="light"></ion-checkbox>
+        <ion-checkbox aria-label="Default Indeterminate" indeterminate></ion-checkbox>
+        <ion-checkbox aria-label="Secondary Indeterminate" indeterminate color="secondary"></ion-checkbox>
+        <ion-checkbox aria-label="Tertiary Indeterminate" indeterminate color="tertiary"></ion-checkbox>
+        <ion-checkbox aria-label="Success Indeterminate" indeterminate color="success"></ion-checkbox>
+        <ion-checkbox aria-label="Warning Indeterminate" indeterminate color="warning"></ion-checkbox>
+        <ion-checkbox aria-label="Danger Indeterminate" indeterminate color="danger"></ion-checkbox>
+        <ion-checkbox aria-label="Dark Indeterminate" indeterminate color="dark"></ion-checkbox>
+        <ion-checkbox aria-label="Medium Indeterminate" indeterminate color="medium"></ion-checkbox>
+        <ion-checkbox aria-label="Light Indeterminate" indeterminate color="light"></ion-checkbox>
       </div>
 
       <ion-list-header>
@@ -100,20 +100,20 @@
 
       <ul>
         <li>
-          <ion-checkbox name="tall" id="tall" indeterminate></ion-checkbox>
-          <label for="tall">Tall Things</label>
+          <ion-checkbox aria-labelledby="tall-label-0" indeterminate></ion-checkbox>
+          <label id="tall-label-0">Tall Things</label>
           <ul>
             <li>
-              <ion-checkbox name="tall-1" id="tall-1" checked></ion-checkbox>
-              <label for="tall-1">Skyscrapers</label>
+              <ion-checkbox aria-labelledby="tall-label-1" checked></ion-checkbox>
+              <label id="tall-label-1">Skyscrapers</label>
             </li>
             <li>
-              <ion-checkbox name="tall-2" id="tall-2"></ion-checkbox>
-              <label for="tall-2">Trees</label>
+              <ion-checkbox aria-labelledby="tall-label-2"></ion-checkbox>
+              <label id="tall-label-2">Trees</label>
             </li>
             <li>
-              <ion-checkbox name="tall-2" id="tall-2"></ion-checkbox>
-              <label for="tall-2">Giants</label>
+              <ion-checkbox aria-labelledby="tall-label-3"></ion-checkbox>
+              <label id="tall-label-3">Giants</label>
             </li>
           </ul>
         </li>

core/src/components/checkbox/test/standalone/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">
@@ -13,67 +13,67 @@
 
 <body class="ion-padding">
   <h1>Default</h1>
-  <ion-checkbox></ion-checkbox>
-  <ion-checkbox checked></ion-checkbox>
-  <ion-checkbox disabled></ion-checkbox>
-  <ion-checkbox disabled checked></ion-checkbox>
+  <ion-checkbox aria-label="Default Checkbox"></ion-checkbox>
+  <ion-checkbox aria-label="Default Checkbox" checked></ion-checkbox>
+  <ion-checkbox aria-label="Default Checkbox" disabled></ion-checkbox>
+  <ion-checkbox aria-label="Default Checkbox" disabled checked></ion-checkbox>
 
   <h1>Colors</h1>
-  <ion-checkbox color="primary"></ion-checkbox>
-  <ion-checkbox color="secondary"></ion-checkbox>
-  <ion-checkbox color="tertiary"></ion-checkbox>
-  <ion-checkbox color="success"></ion-checkbox>
-  <ion-checkbox color="warning"></ion-checkbox>
-  <ion-checkbox color="danger"></ion-checkbox>
-  <ion-checkbox color="light"></ion-checkbox>
-  <ion-checkbox color="medium"></ion-checkbox>
-  <ion-checkbox color="dark"></ion-checkbox>
+  <ion-checkbox aria-label="Checkbox Primary" color="primary"></ion-checkbox>
+  <ion-checkbox aria-label="Checkbox Secondary" color="secondary"></ion-checkbox>
+  <ion-checkbox aria-label="Checkbox Tertiary" color="tertiary"></ion-checkbox>
+  <ion-checkbox aria-label="Checkbox Success" color="success"></ion-checkbox>
+  <ion-checkbox aria-label="Checkbox Warning" color="warning"></ion-checkbox>
+  <ion-checkbox aria-label="Checkbox Danger" color="danger"></ion-checkbox>
+  <ion-checkbox aria-label="Checkbox Light" color="light"></ion-checkbox>
+  <ion-checkbox aria-label="Checkbox Medium" color="medium"></ion-checkbox>
+  <ion-checkbox aria-label="Checkbox Dark" color="dark"></ion-checkbox>
 
   <hr>
 
-  <ion-checkbox checked color="primary"></ion-checkbox>
-  <ion-checkbox checked color="secondary"></ion-checkbox>
-  <ion-checkbox checked color="tertiary"></ion-checkbox>
-  <ion-checkbox checked color="success"></ion-checkbox>
-  <ion-checkbox checked color="warning"></ion-checkbox>
-  <ion-checkbox checked color="danger"></ion-checkbox>
-  <ion-checkbox checked color="light"></ion-checkbox>
-  <ion-checkbox checked color="medium"></ion-checkbox>
-  <ion-checkbox checked color="dark"></ion-checkbox>
+  <ion-checkbox aria-label="Checkbox Primary" checked color="primary"></ion-checkbox>
+  <ion-checkbox aria-label="Checkbox Secondary" checked color="secondary"></ion-checkbox>
+  <ion-checkbox aria-label="Checkbox Tertiary" checked color="tertiary"></ion-checkbox>
+  <ion-checkbox aria-label="Checkbox Success" checked color="success"></ion-checkbox>
+  <ion-checkbox aria-label="Checkbox Warning" checked color="warning"></ion-checkbox>
+  <ion-checkbox aria-label="Checkbox Danger" checked color="danger"></ion-checkbox>
+  <ion-checkbox aria-label="Checkbox Light" checked color="light"></ion-checkbox>
+  <ion-checkbox aria-label="Checkbox Medium" checked color="medium"></ion-checkbox>
+  <ion-checkbox aria-label="Checkbox Dark" checked color="dark"></ion-checkbox>
 
   <hr>
 
-  <ion-checkbox checked disabled color="primary"></ion-checkbox>
-  <ion-checkbox checked disabled color="secondary"></ion-checkbox>
-  <ion-checkbox checked disabled color="tertiary"></ion-checkbox>
-  <ion-checkbox checked disabled color="success"></ion-checkbox>
-  <ion-checkbox checked disabled color="warning"></ion-checkbox>
-  <ion-checkbox checked disabled color="danger"></ion-checkbox>
-  <ion-checkbox checked disabled color="light"></ion-checkbox>
-  <ion-checkbox checked disabled color="medium"></ion-checkbox>
-  <ion-checkbox checked disabled color="dark"></ion-checkbox>
+  <ion-checkbox aria-label="Checkbox Primary" checked disabled color="primary"></ion-checkbox>
+  <ion-checkbox aria-label="Checkbox Secondary" checked disabled color="secondary"></ion-checkbox>
+  <ion-checkbox aria-label="Checkbox Tertiary" checked disabled color="tertiary"></ion-checkbox>
+  <ion-checkbox aria-label="Checkbox Success" checked disabled color="success"></ion-checkbox>
+  <ion-checkbox aria-label="Checkbox Warning" checked disabled color="warning"></ion-checkbox>
+  <ion-checkbox aria-label="Checkbox Danger" checked disabled color="danger"></ion-checkbox>
+  <ion-checkbox aria-label="Checkbox Light" checked disabled color="light"></ion-checkbox>
+  <ion-checkbox aria-label="Checkbox Medium" checked disabled color="medium"></ion-checkbox>
+  <ion-checkbox aria-label="Checkbox Dark" checked disabled color="dark"></ion-checkbox>
 
   <h1>Custom</h1>
-  <ion-checkbox class="custom"></ion-checkbox>
-  <ion-checkbox class="custom" checked></ion-checkbox>
-  <ion-checkbox class="custom" disabled></ion-checkbox>
-  <ion-checkbox class="custom" disabled checked></ion-checkbox>
+  <ion-checkbox aria-label="Checkbox Custom" class="custom"></ion-checkbox>
+  <ion-checkbox aria-label="Checkbox Custom" class="custom" checked></ion-checkbox>
+  <ion-checkbox aria-label="Checkbox Custom" class="custom" disabled></ion-checkbox>
+  <ion-checkbox aria-label="Checkbox Custom" class="custom" disabled checked></ion-checkbox>
 
   <h1>Custom: checked</h1>
-  <ion-checkbox class="custom-checked"></ion-checkbox>
-  <ion-checkbox class="custom-checked" checked></ion-checkbox>
-  <ion-checkbox class="custom-checked" disabled></ion-checkbox>
-  <ion-checkbox class="custom-checked" disabled checked></ion-checkbox>
+  <ion-checkbox aria-label="Checkbox Custom" class="custom-checked"></ion-checkbox>
+  <ion-checkbox aria-label="Checkbox Custom" class="custom-checked" checked></ion-checkbox>
+  <ion-checkbox aria-label="Checkbox Custom" class="custom-checked" disabled></ion-checkbox>
+  <ion-checkbox aria-label="Checkbox Custom" class="custom-checked" disabled checked></ion-checkbox>
 
   <h1>Custom: light</h1>
-  <ion-checkbox class="custom-light"></ion-checkbox>
-  <ion-checkbox class="custom-light" checked></ion-checkbox>
-  <ion-checkbox class="custom-light" disabled></ion-checkbox>
-  <ion-checkbox class="custom-light" disabled checked></ion-checkbox>
+  <ion-checkbox aria-label="Checkbox Custom Light" class="custom-light"></ion-checkbox>
+  <ion-checkbox aria-label="Checkbox Custom Light" class="custom-light" checked></ion-checkbox>
+  <ion-checkbox aria-label="Checkbox Custom Light" class="custom-light" disabled></ion-checkbox>
+  <ion-checkbox aria-label="Checkbox Custom Light" class="custom-light" disabled checked></ion-checkbox>
 
   <h1>Custom: transition</h1>
-  <ion-checkbox class="custom-transition"></ion-checkbox>
-  <ion-checkbox class="custom-transition" checked></ion-checkbox>
+  <ion-checkbox aria-label="Checkbox Custom Transition" class="custom-transition"></ion-checkbox>
+  <ion-checkbox aria-label="Checkbox Custom Transition" class="custom-transition" checked></ion-checkbox>
 
   <style>
     .custom {

core/src/components/checkbox/usage/vue.md

@@ -22,8 +22,8 @@
       <ion-label>{{entry.val}}</ion-label>
       <ion-checkbox
         slot="end"
-        @input="entry.checked = $event.target.value"
-        :value="entry.isChecked">
+        @update:modelValue="entry.isChecked = $event"
+        :modelValue="entry.isChecked">
       </ion-checkbox>
     </ion-item>
   </ion-list>

core/src/components/chip/chip.scss

@@ -37,6 +37,11 @@
   box-sizing: border-box;
 }
 
+:host(.chip-disabled) {
+  cursor: default;
+  opacity: .4;
+  pointer-events: none;
+}
 
 // Chip Colors
 // ---------------------------------------------

core/src/components/chip/chip.tsx

@@ -28,14 +28,21 @@ export class Chip implements ComponentInterface {
    */
   @Prop() outline = false;
 
+  /**
+   * If `true`, the user cannot interact with the chip.
+   */
+  @Prop() disabled = false;
+
   render() {
     const mode = getIonMode(this);
 
     return (
       <Host
+        aria-disabled={this.disabled ? 'true' : null}
         class={createColorClasses(this.color, {
           [mode]: true,
           'chip-outline': this.outline,
+          'chip-disabled': this.disabled,
           'ion-activatable': true,
         })}
       >

core/src/components/chip/readme.md

@@ -7,7 +7,7 @@ Chips represent complex entities in small blocks, such as a contact. A chip can
 
 ## Usage
 
-### Angular / javascript
+### Angular
 
 ```html
 <ion-chip>
@@ -22,6 +22,60 @@ Chips represent complex entities in small blocks, such as a contact. A chip can
   <ion-label color="dark">Secondary w/ Dark label</ion-label>
 </ion-chip>
 
+<ion-chip [disabled]="true">
+  <ion-label>Disabled Chip</ion-label>
+</ion-chip>
+
+<ion-chip>
+  <ion-icon name="pin"></ion-icon>
+  <ion-label>Default</ion-label>
+</ion-chip>
+
+<ion-chip>
+  <ion-icon name="heart" color="dark"></ion-icon>
+  <ion-label>Default</ion-label>
+</ion-chip>
+
+<ion-chip>
+  <ion-label>Button Chip</ion-label>
+  <ion-icon name="close-circle"></ion-icon>
+</ion-chip>
+
+<ion-chip>
+  <ion-icon name="pin" color="primary"></ion-icon>
+  <ion-label>Icon Chip</ion-label>
+  <ion-icon name="close"></ion-icon>
+</ion-chip>
+
+<ion-chip>
+  <ion-avatar>
+    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+  </ion-avatar>
+  <ion-label>Avatar Chip</ion-label>
+  <ion-icon name="close-circle"></ion-icon>
+</ion-chip>
+```
+
+
+### Javascript
+
+```html
+<ion-chip>
+  <ion-label>Default</ion-label>
+</ion-chip>
+
+<ion-chip>
+  <ion-label color="secondary">Secondary Label</ion-label>
+</ion-chip>
+
+<ion-chip color="secondary">
+  <ion-label color="dark">Secondary w/ Dark label</ion-label>
+</ion-chip>
+
+<ion-chip disabled="true">
+  <ion-label>Disabled Chip</ion-label>
+</ion-chip>
+
 <ion-chip>
   <ion-icon name="pin"></ion-icon>
   <ion-label>Default</ion-label>
@@ -81,6 +135,10 @@ export const ChipExamples: React.FC = () => {
           <IonLabel color="dark">Secondary w/ Dark label</IonLabel>
         </IonChip>
 
+        <IonChip disabled={true}>
+          <IonLabel>Disabled Chip</IonLabel>
+        </IonChip>
+
         <IonChip>
           <IonIcon icon={pin} />
           <IonLabel>Default</IonLabel>
@@ -191,6 +249,10 @@ export class ChipExample {
     <ion-label color="dark">Secondary w/ Dark label</ion-label>
   </ion-chip>
 
+  <ion-chip :disabled="true">
+    <ion-label>Disabled Chip</ion-label>
+  </ion-chip>
+
   <ion-chip>
     <ion-icon :icon="pin"></ion-icon>
     <ion-label>Default</ion-label>
@@ -240,11 +302,12 @@ export default defineComponent({
 
 ## Properties
 
-| Property  | Attribute | Description                                                                                                                                                                                                                                                            | Type                  | Default     |
-| --------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
-| `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` |
-| `mode`    | `mode`    | The mode determines which platform styles to use.                                                                                                                                                                                                                      | `"ios" \| "md"`       | `undefined` |
-| `outline` | `outline` | Display an outline style button.                                                                                                                                                                                                                                       | `boolean`             | `false`     |
+| Property   | Attribute  | Description                                                                                                                                                                                                                                                            | Type                  | Default     |
+| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
+| `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` |
+| `disabled` | `disabled` | If `true`, the user cannot interact with the chip.                                                                                                                                                                                                                     | `boolean`             | `false`     |
+| `mode`     | `mode`     | The mode determines which platform styles to use.                                                                                                                                                                                                                      | `"ios" \| "md"`       | `undefined` |
+| `outline`  | `outline`  | Display an outline style button.                                                                                                                                                                                                                                       | `boolean`             | `false`     |
 
 
 ## CSS Custom Properties

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

core/src/components/chip/test/standalone/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 <head>
   <meta charset="UTF-8">
   <title>Chip - Standalone</title>

core/src/components/chip/test/states/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">
@@ -17,6 +17,7 @@
   <ion-app>
     <ion-content>
       <h3>Default</h3>
+
       <p>
         <ion-chip>
           <ion-label>Default</ion-label>
@@ -195,6 +196,26 @@
         </ion-chip>
       </p>
 
+      <h3>Disabled</h3>
+
+      <p>
+        <ion-chip disabled>
+          <ion-label>Disabled</ion-label>
+        </ion-chip>
+        <ion-chip outline color="danger" class="ion-focused" disabled>
+          <ion-label>Disabled Outline</ion-label>
+        </ion-chip>
+        <ion-chip color="secondary" class="ion-focused" disabled>
+          <ion-icon name="checkmark-circle"></ion-icon>
+          <ion-label>Disabled Secondary with Icon</ion-label>
+        </ion-chip>
+        <ion-chip outline class="ion-focused" disabled>
+          <ion-icon name="git-pull-request"></ion-icon>
+          <ion-label>Disabled Outline with Icon and Avatar</ion-label>
+          <ion-icon name="close-circle"></ion-icon>
+        </ion-chip>
+      </p>
+
       <h3>Custom</h3>
 
       <!-- Custom Font -->
@@ -246,11 +267,6 @@
       padding-left: 8px;
     }
 
-    ion-chip {
-      display: inline-block !important;
-      vertical-align: middle;
-    }
-
     .wide {
       --background: #d1f3ff;
       --background-hover: #add8e6;

core/src/components/chip/usage/angular.md

@@ -11,6 +11,10 @@
   <ion-label color="dark">Secondary w/ Dark label</ion-label>
 </ion-chip>
 
+<ion-chip [disabled]="true">
+  <ion-label>Disabled Chip</ion-label>
+</ion-chip>
+
 <ion-chip>
   <ion-icon name="pin"></ion-icon>
   <ion-label>Default</ion-label>

core/src/components/chip/usage/javascript.md

@@ -11,6 +11,10 @@
   <ion-label color="dark">Secondary w/ Dark label</ion-label>
 </ion-chip>
 
+<ion-chip disabled="true">
+  <ion-label>Disabled Chip</ion-label>
+</ion-chip>
+
 <ion-chip>
   <ion-icon name="pin"></ion-icon>
   <ion-label>Default</ion-label>

core/src/components/chip/usage/react.md

@@ -24,6 +24,10 @@ export const ChipExamples: React.FC = () => {
           <IonLabel color="dark">Secondary w/ Dark label</IonLabel>
         </IonChip>
 
+        <IonChip disabled={true}>
+          <IonLabel>Disabled Chip</IonLabel>
+        </IonChip>
+
         <IonChip>
           <IonIcon icon={pin} />
           <IonLabel>Default</IonLabel>
@@ -57,4 +61,4 @@ export const ChipExamples: React.FC = () => {
   );
 };
 
-```
+```

core/src/components/chip/usage/vue.md

@@ -12,6 +12,10 @@
     <ion-label color="dark">Secondary w/ Dark label</ion-label>
   </ion-chip>
 
+  <ion-chip :disabled="true">
+    <ion-label>Disabled Chip</ion-label>
+  </ion-chip>
+
   <ion-chip>
     <ion-icon :icon="pin"></ion-icon>
     <ion-label>Default</ion-label>

core/src/components/content/content.scss

@@ -83,6 +83,25 @@
 .scroll-y,
 .scroll-x {
   -webkit-overflow-scrolling: touch;
+
+  /**
+   * This adds `.inner-scroll` as part of the
+   * stacking context in WebKit. Without it,
+   * children of ion-content are treated as
+   * siblings rather than descendants. This
+   * can result in the children being put
+   * into their own layers, degrading
+   * scrolling performance.
+   *
+   * An optimization called "layer backing
+   * sharing" usually kicks in to prevent
+   * this, but having translate3d defeats
+   * this optimization.
+   *
+   * See: https://bugs.webkit.org/show_bug.cgi?id=216701
+   */
+  z-index: 0;
+
   will-change: scroll-position;
 }
 

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

core/src/components/content/test/fixed/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

core/src/components/content/test/fullscreen/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

core/src/components/content/test/standalone/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 <head>
   <meta charset="UTF-8">
   <title>Content - Standalone</title>

core/src/components/datetime/datetime-util.spec.ts

@@ -220,7 +220,7 @@ describe('datetime-util', () => {
         "second": undefined,
         "tzOffset": 0,
         "year": 1000,
-        "ampm": "am"
+        "ampm": undefined
       });
     });
 
@@ -235,7 +235,7 @@ describe('datetime-util', () => {
         "second": undefined,
         "tzOffset": 0,
         "year": undefined,
-        "ampm": "pm"
+        "ampm": undefined
       });
     });
 
@@ -250,7 +250,7 @@ describe('datetime-util', () => {
         "second": 20,
         "tzOffset": 0,
         "year": 1994,
-        "ampm": "pm"
+        "ampm": undefined
       });
     });
 
@@ -265,7 +265,7 @@ describe('datetime-util', () => {
         "second": undefined,
         "tzOffset": 0,
         "year": 2018,
-        "ampm": "am"
+        "ampm": undefined
       });
     });
 

core/src/components/datetime/datetime-util.ts

@@ -3,10 +3,16 @@
  * Defaults to the current date if
  * no date given
  */
-export const getDateValue = (date: DatetimeData, format: string): number => {
+export const getDateValue = (date: DatetimeData, format: string): number | string => {
   const getValue = getValueFromFormat(date, format);
 
-  if (getValue !== undefined) { return getValue; }
+  if (getValue !== undefined) {
+    if (format === FORMAT_A || format === FORMAT_a) {
+      date.ampm = getValue;
+    }
+
+    return getValue;
+  }
 
   const defaultDate = parseDate(new Date().toISOString());
   return getValueFromFormat((defaultDate as DatetimeData), format);
@@ -238,7 +244,6 @@ export const parseDate = (val: string | undefined | null): DatetimeData | undefi
     second: parse[6],
     millisecond: parse[7],
     tzOffset,
-    ampm: parse[4] >= 12 ? 'pm' : 'am'
   };
 };
 
@@ -326,24 +331,6 @@ export const updateDate = (existingData: DatetimeData, newData: any, displayTime
       // newData is from the datetime picker's selected values
       // update the existing datetimeValue with the new values
       if (newData.ampm !== undefined && newData.hour !== undefined) {
-        // If the date we came from exists, we need to change the meridiem value when
-        // going to and from 12
-        if (existingData.ampm !== undefined && existingData.hour !== undefined) {
-          // If the existing meridiem is am, we want to switch to pm if it is either
-          // A) coming from 0 (12 am)
-          // B) going to 12 (12 pm)
-          if (existingData.ampm === 'am' && (existingData.hour === 0 || newData.hour.value === 12)) {
-            newData.ampm.value = 'pm';
-          }
-
-          // If the existing meridiem is pm, we want to switch to am if it is either
-          // A) coming from 12 (12 pm)
-          // B) going to 12 (12 am)
-          if (existingData.ampm === 'pm' && (existingData.hour === 12 || newData.hour.value === 12)) {
-            newData.ampm.value = 'am';
-          }
-        }
-
         // change the value of the hour based on whether or not it is am or pm
         // if the meridiem is pm and equal to 12, it remains 12
         // otherwise we add 12 to the hour value

core/src/components/datetime/datetime.tsx

@@ -2,7 +2,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Meth
 
 import { getIonMode } from '../../global/ionic-global';
 import { DatetimeChangeEventDetail, DatetimeOptions, PickerColumn, PickerColumnOption, PickerOptions, StyleEventDetail } from '../../interface';
-import { clamp, findItemLabel, renderHiddenInput } from '../../utils/helpers';
+import { addEventListener, clamp, findItemLabel, renderHiddenInput } from '../../utils/helpers';
 import { pickerController } from '../../utils/overlays';
 import { hostContext } from '../../utils/theme';
 
@@ -271,7 +271,7 @@ export class Datetime implements ComponentInterface {
       this.isExpanded = false;
       this.setFocus();
     });
-    picker.addEventListener('ionPickerColChange', async (event: any) => {
+    addEventListener(picker, 'ionPickerColChange', async (event: any) => {
       const data = event.detail;
 
       const colSelectedIndex = data.selectedIndex;
@@ -285,7 +285,7 @@ export class Datetime implements ComponentInterface {
       if (data.name !== 'ampm' && this.datetimeValue.ampm !== undefined) {
         changeData['ampm'] = {
           value: this.datetimeValue.ampm
-        }
+        };
       }
 
       this.updateDatetimeValue(changeData);

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">
@@ -113,8 +113,8 @@
         </ion-item>
 
         <ion-item>
-          <ion-label>HH:mm</ion-label>
-          <ion-datetime display-format="HH:mm"></ion-datetime>
+          <ion-label>HH:mm A</ion-label>
+          <ion-datetime display-format="HH:mm A"></ion-datetime>
         </ion-item>
 
         <ion-item>
@@ -127,6 +127,11 @@
           <ion-datetime display-format="h:mm a" value="01:47"></ion-datetime>
         </ion-item>
 
+        <ion-item>
+          <ion-label>h:mm A</ion-label>
+          <ion-datetime display-format="h:mm A" value="14:23"></ion-datetime>
+        </ion-item>
+
         <ion-item>
           <ion-label>hh:mm A (15 min steps)</ion-label>
           <ion-datetime display-format="h:mm A" minute-values="0,15,30,45"></ion-datetime>

core/src/components/datetime/test/datetime.spec.ts

@@ -30,6 +30,38 @@ describe('Datetime', () => {
       expect(monthvalue).toEqual(date.getMonth() + 1);
       expect(yearValue).toEqual(date.getFullYear());
     });
+
+    it('it should return the date value for a given time', () => {
+      const dateTimeData: DatetimeData = {
+        hour: 2,
+        minute: 23,
+        tzOffset: 0
+      };
+
+      const hourValue = getDateValue(dateTimeData, 'hh');
+      const minuteValue = getDateValue(dateTimeData, 'mm');
+      const ampmValue = getDateValue(dateTimeData, 'A');
+
+      expect(hourValue).toEqual(2);
+      expect(minuteValue).toEqual(23);
+      expect(ampmValue).toEqual("am");
+    });
+
+    it('it should return the date value for a given time after 12', () => {
+      const dateTimeData: DatetimeData = {
+        hour: 16,
+        minute: 47,
+        tzOffset: 0
+      };
+
+      const hourValue = getDateValue(dateTimeData, 'hh');
+      const minuteValue = getDateValue(dateTimeData, 'mm');
+      const ampmValue = getDateValue(dateTimeData, 'a');
+
+      expect(hourValue).toEqual(4);
+      expect(minuteValue).toEqual(47);
+      expect(ampmValue).toEqual("pm");
+    });
   });
 
   describe('getDateTime()', () => {

core/src/components/datetime/test/standalone/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

core/src/components/fab-button/test/standalone/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

core/src/components/fab/test/standalone/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

core/src/components/fab/test/states/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

core/src/components/fab/test/translucent/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">