fix(input): default to soft shape

fix(button): default shape and add support for other themes
test(button): add other shapes to shape test
2026-03-13 10:22:08 +08:00 · 2024-04-12 10:26:53 -04:00 · 2024-04-12 10:20:56 -04:00 · 2024-04-11 16:55:24 -04:00 · 2024-04-11 16:08:20 +01:00 · 2024-04-10 16:00:03 -04:00
483 changed files with 8475 additions and 1461 deletions
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -13,73 +13,7 @@

 * @ionic-team/framework

-# Frameworks
-
-## Angular
-
-/packages/angular/ @sean-perkins @thetaPC
-/packages/angular-server @sean-perkins @thetaPC
-/packages/angular/test @thetaPC
-
-## React
-
-/packages/react/ @amandaejohnston
-/packages/react-router @amandaejohnston
-/packages/react/test-app/
-/packages/react-router/test-app/
-
-## Vue
-
-/packages/vue/ @liamdebeasi @thetaPC
-/packages/vue-router/ @liamdebeasi @thetaPC
-/packages/vue/test/ @thetaPC
-/packages/vue-router/__tests__ @thetaPC
-
-# Components
-
-/core/src/components/accordion/ @liamdebeasi
-/core/src/components/accordion-group/ @liamdebeasi
-
-/core/src/components/checkbox/ @amandaejohnston
-
-/core/src/components/datetime/ @liamdebeasi @amandaejohnston @sean-perkins
-/core/src/components/datetime-button/ @liamdebeasi
-
-/core/src/components/item/ @brandyscarney
-
-/core/src/components/menu/ @amandaejohnston
-/core/src/components/menu-toggle/ @amandaejohnston
-
-/core/src/components/nav/ @sean-perkins
-/core/src/components/nav-link/ @sean-perkins
-
-/core/src/components/picker/ @liamdebeasi
-/core/src/components/picker-column/ @liamdebeasi
-
-/core/src/components/radio/ @amandaejohnston
-/core/src/components/radio-group/ @amandaejohnston
-
-/core/src/components/refresher/ @liamdebeasi
-/core/src/components/refresher-content/ @liamdebeasi
-
-/core/src/components/searchbar/ @brandyscarney
-
-/core/src/components/segment/ @brandyscarney
-/core/src/components/segment-button/ @brandyscarney
-
-/core/src/components/skeleton-text/ @brandyscarney
-
 # Utilities

-/core/src/utils/animation/ @liamdebeasi
-/core/src/utils/content/ @sean-perkins
 /core/src/utils/gesture/ @liamdebeasi
 /core/src/utils/input-shims/ @liamdebeasi
-/core/src/utils/keyboard/ @liamdebeasi
-/core/src/utils/logging/ @amandaejohnston
-/core/src/utils/sanitization/ @liamdebeasi
-/core/src/utils/tap-click/ @liamdebeasi
-/core/src/utils/transition/ @liamdebeasi
-
-/core/src/css/ @brandyscarney
-/core/src/themes/ @brandyscarney
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -25,7 +25,7 @@ Issue number: resolves #
  If this introduces a breaking change:
  1. Describe the impact and migration path for existing applications below.
  2. Update the BREAKING.md file with the breaking change.
-  3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information.
+  3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information.
 -->


--- a/.github/workflows/actions/build-core-stencil-prerelease/action.yml
+++ b/.github/workflows/actions/build-core-stencil-prerelease/action.yml
@@ -29,4 +29,4 @@ runs:
      with:
        name: ionic-core
        output: core/CoreBuild.zip
-        paths: core/dist core/components core/css core/hydrate core/loader core/src/components.d.ts
+        paths: core/dist core/components core/src/foundations core/css core/hydrate core/loader core/src/components.d.ts
--- a/.github/workflows/actions/build-core/action.yml
+++ b/.github/workflows/actions/build-core/action.yml
@@ -31,4 +31,4 @@ runs:
      with:
        name: ionic-core
        output: core/CoreBuild.zip
-        paths: core/dist core/components core/css core/hydrate core/loader core/src/components.d.ts core/api.txt
+        paths: core/dist core/components core/src/foundations core/css core/hydrate core/loader core/src/components.d.ts core/api.txt
--- a/.github/workflows/assign-issues.yml
+++ b/.github/workflows/assign-issues.yml
@@ -13,6 +13,6 @@ jobs:
      - name: 'Auto-assign issue'
        uses: pozil/auto-assign-issue@edee9537367a8fbc625d27f9e10aa8bad47b8723 # v1.13.0
        with:
-          assignees: liamdebeasi, sean-perkins, brandyscarney, amandaejohnston, mapsandapps, thetaPC
+          assignees: liamdebeasi, sean-perkins, brandyscarney, amandaejohnston, thetaPC
          numOfAssignee: 1
          allowSelfAssign: false
--- a/.github/workflows/release-ionic.yml
+++ b/.github/workflows/release-ionic.yml
@@ -41,8 +41,8 @@ jobs:
      uses: ./.github/workflows/actions/upload-archive
      with:
        name: ionic-docs
-        output: docs/DocsBuild.zip
-        paths: docs/core.json docs/core.d.ts
+        output: packages/docs/DocsBuild.zip
+        paths: packages/docs/core.json packages/docs/core.d.ts

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

  release-angular:
--- a/BREAKING.md
+++ b/BREAKING.md
@@ -30,6 +30,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
  - [Progress bar](#version-8x-progress-bar)
  - [Radio](#version-8x-radio)
  - [Range](#version-8x-range)
+  - [Searchbar](#version-8x-searchbar)
  - [Select](#version-8x-select)
  - [Textarea](#version-8x-textarea)
  - [Toggle](#version-8x-toggle)
@@ -264,6 +265,10 @@ For more information on styling toast buttons, refer to the [Toast Theming docum

 - The `legacy` property and support for the legacy syntax, which involved placing an `ion-range` inside of an `ion-item` with an `ion-label`, have been removed. Ionic will also no longer attempt to automatically associate form controls with sibling `<label>` elements as these label elements are now used inside the form control. Developers should provide a label (either visible text or `aria-label`) directly to the form control. For more information on migrating from the legacy range syntax, refer to the [Range documentation](https://ionicframework.com/docs/api/range#migrating-from-legacy-range-syntax).

+<h4 id="version-8x-searchbar">Searchbar</h4>
+
+- The `autocapitalize` property now defaults to `'off'`.
+
 <h4 id="version-8x-select">Select</h4>

 - The `legacy` property and support for the legacy syntax, which involved placing an `ion-select` inside of an `ion-item` with an `ion-label`, have been removed. Ionic will also no longer attempt to automatically associate form controls with sibling `<label>` elements as these label elements are now used inside the form control. Developers should provide a label (either visible text or `aria-label`) directly to the form control. For more information on migrating from the legacy select syntax, refer to the [Select documentation](https://ionicframework.com/docs/api/select#migrating-from-legacy-select-syntax).
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,67 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+
+## [7.8.3](https://github.com/ionic-team/ionic-framework/compare/v7.8.2...v7.8.3) (2024-04-03)
+
+
+### Bug Fixes
+
+* **button:** activated outline button in toolbar no longer blends into background on MD dark mode ([#29216](https://github.com/ionic-team/ionic-framework/issues/29216)) ([ee5da7a](https://github.com/ionic-team/ionic-framework/commit/ee5da7a747c0a0b420c5e371a9fe9ec4938d179e))
+* **popover:** viewport can be scrolled if no content present ([#29215](https://github.com/ionic-team/ionic-framework/issues/29215)) ([f08759c](https://github.com/ionic-team/ionic-framework/commit/f08759c2b8256ff66f8d1901bd8e0be4617db262)), closes [#29211](https://github.com/ionic-team/ionic-framework/issues/29211)
+
+
+
+
+
+# [8.0.0-rc.0](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.4...v8.0.0-rc.0) (2024-03-27)
+
+**Note:** Version bump only for package ionic-framework
+
+
+
+
+
+# [8.0.0-beta.4](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.3...v8.0.0-beta.4) (2024-03-27)
+
+
+### Bug Fixes
+
+* **angular:** schematics account for new theme files ([#29185](https://github.com/ionic-team/ionic-framework/issues/29185)) ([b0a10df](https://github.com/ionic-team/ionic-framework/commit/b0a10dfa56a65ee3905cc2c3d48d2221a42f222f))
+
+
+### Code Refactoring
+
+* **haptics:** remove cordova haptics support ([#29186](https://github.com/ionic-team/ionic-framework/issues/29186)) ([9efeb0a](https://github.com/ionic-team/ionic-framework/commit/9efeb0ad31aadee5f5ae542641d928ecf93fe82a))
+* **searchbar:** autocapitalize defaults to off ([#29107](https://github.com/ionic-team/ionic-framework/issues/29107)) ([6e477b7](https://github.com/ionic-team/ionic-framework/commit/6e477b743e41b2b37627c8208901704f599b762a))
+
+
+### Features
+
+* **button:** add circular shape as round ([#29161](https://github.com/ionic-team/ionic-framework/issues/29161)) ([44529f0](https://github.com/ionic-team/ionic-framework/commit/44529f0a62f1b1ce42750a20f19e829b2789febd))
+* **input:** add input-password-toggle component ([#29175](https://github.com/ionic-team/ionic-framework/issues/29175)) ([6c500fd](https://github.com/ionic-team/ionic-framework/commit/6c500fd6b2e2553c11fcddc9d86ac9a29f76e172))
+* remove css animations support for ionic animations ([#29123](https://github.com/ionic-team/ionic-framework/issues/29123)) ([892594d](https://github.com/ionic-team/ionic-framework/commit/892594de0665e8fc5c8a737d292812842ea03d64))
+
+
+### BREAKING CHANGES
+
+* **searchbar:** The `autocapitalize` property on Searchbar now defaults to `'off'`.
+* **haptics:** Support for the Cordova Haptics plugin has been removed. Components that integrate with haptics, such as `ion-picker` and `ion-toggle`, will continue to function but will no longer play haptics in Cordova environments. Developers should migrate to Capacitor to continue to have haptics in these components.
+
+
+
+
+
+## [7.8.2](https://github.com/ionic-team/ionic-framework/compare/v7.8.1...v7.8.2) (2024-03-27)
+
+### Bug Fixes
+
+* **searchbar:** autocapitalize is initialized correctly ([#29197](https://github.com/ionic-team/ionic-framework/issues/29197)) ([8ad66c0](https://github.com/ionic-team/ionic-framework/commit/8ad66c03d777edcab19c97cba696b171acc2d2e8)), closes [#29193](https://github.com/ionic-team/ionic-framework/issues/29193)
+
+
+
+
+
 # [8.0.0-beta.3](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.2...v8.0.0-beta.3) (2024-03-20)


--- a/README.md
+++ b/README.md
@@ -20,7 +20,7 @@
  <a href="https://github.com/ionic-team/ionic-framework/blob/main/LICENSE">
    <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="Ionic Framework is released under the MIT license." />
  </a>
-  <a href="https://github.com/ionic-team/ionic/blob/main/.github/CONTRIBUTING.md">
+  <a href="https://github.com/ionic-team/ionic/blob/main/docs/CONTRIBUTING.md">
    <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome!" />
  </a>
  <a href="https://twitter.com/Ionicframework">
@@ -38,7 +38,7 @@
    Documentation
  </a>
  <span> · </span>
-  <a href="https://github.com/ionic-team/ionic/blob/main/.github/CONTRIBUTING.md">Contribute</a>
+  <a href="https://github.com/ionic-team/ionic/blob/main/docs/CONTRIBUTING.md">Contribute</a>
  <span> · </span>
  <a href="https://blog.ionicframework.com/">Blog</a>
  <br />
@@ -88,7 +88,7 @@ The Ionic Conference App is a full featured Ionic app. It is the perfect startin
 ### Contributing

 Thanks for your interest in contributing! Read up on our guidelines for
-[contributing](https://github.com/ionic-team/ionic/blob/main/.github/CONTRIBUTING.md)
+[contributing](https://github.com/ionic-team/ionic/blob/main/docs/CONTRIBUTING.md)
 and then look through our issues with a [help wanted](https://github.com/ionic-team/ionic/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
 label.

--- a/core/.stylelintrc.yml
+++ b/core/.stylelintrc.yml
@@ -23,10 +23,10 @@ rules:
  at-rule-empty-line-before:
    - always
    - except:
-      - blockless-after-blockless
-      - first-nested
+        - blockless-after-blockless
+        - first-nested
      ignore:
-      - after-comment
+        - after-comment

  block-closing-brace-newline-before:
    - always
@@ -40,14 +40,13 @@ rules:
  custom-property-empty-line-before:
    - always
    - except:
-      - after-comment
-      - after-custom-property
-      - first-nested
+        - after-comment
+        - after-custom-property
+        - first-nested

  declaration-no-important:
    - true

-
  order/order:
    - custom-properties
    - dollar-variables
@@ -57,216 +56,212 @@ rules:

  # https://github.com/sasstools/sass-lint/blob/develop/lib/config/property-sort-orders/smacss.yml
  order/properties-order:
-
    # Box

    - emptyLineBefore: always
      properties:
-      - display
-      - position
-      - top
-      - right
-      - bottom
-      - left
+        - display
+        - position
+        - top
+        - right
+        - bottom
+        - left

    - emptyLineBefore: always
      properties:
-      - flex
-      - flex-basis
-      - flex-direction
-      - flex-flow
-      - flex-grow
-      - flex-shrink
-      - flex-wrap
-      - align-content
-      - align-items
-      - align-self
-      - justify-content
-      - order
+        - flex
+        - flex-basis
+        - flex-direction
+        - flex-flow
+        - flex-grow
+        - flex-shrink
+        - flex-wrap
+        - align-content
+        - align-items
+        - align-self
+        - justify-content
+        - order

    - emptyLineBefore: always
      properties:
-      - width
-      - min-width
-      - max-width
+        - width
+        - min-width
+        - max-width

-      - height
-      - min-height
-      - max-height
+        - height
+        - min-height
+        - max-height

    - emptyLineBefore: always
      properties:
-      - margin
-      - margin-top
-      - margin-right
-      - margin-bottom
-      - margin-left
+        - margin
+        - margin-top
+        - margin-right
+        - margin-bottom
+        - margin-left

    - emptyLineBefore: always
      properties:
-      - padding
-      - padding-top
-      - padding-right
-      - padding-bottom
-      - padding-left
+        - padding
+        - padding-top
+        - padding-right
+        - padding-bottom
+        - padding-left

    - emptyLineBefore: always
      properties:
-      - float
-      - clear
+        - float
+        - clear

    - emptyLineBefore: always
      properties:
-      - columns
-      - column-gap
-      - column-fill
-      - column-rule
-      - column-span
-      - column-count
-      - column-width
+        - columns
+        - column-gap
+        - column-fill
+        - column-rule
+        - column-span
+        - column-count
+        - column-width

    - emptyLineBefore: always
      properties:
-      - transform
-      - transform-box
-      - transform-origin
-      - transform-style
+        - transform
+        - transform-box
+        - transform-origin
+        - transform-style

    - emptyLineBefore: always
      properties:
-      - transition
-      - transition-delay
-      - transition-duration
-      - transition-property
-      - transition-timing-function
+        - transition
+        - transition-delay
+        - transition-duration
+        - transition-property
+        - transition-timing-function

    # Border

    - emptyLineBefore: always
      properties:
-      - border
-      - border-top
-      - border-right
-      - border-bottom
-      - border-left
-      - border-width
-      - border-top-width
-      - border-right-width
-      - border-bottom-width
-      - border-left-width
+        - border
+        - border-top
+        - border-right
+        - border-bottom
+        - border-left
+        - border-width
+        - border-top-width
+        - border-right-width
+        - border-bottom-width
+        - border-left-width

-      - border-style
-      - border-top-style
-      - border-right-style
-      - border-bottom-style
-      - border-left-style
+        - border-style
+        - border-top-style
+        - border-right-style
+        - border-bottom-style
+        - border-left-style

-      - border-radius
-      - border-top-left-radius
-      - border-top-right-radius
-      - border-bottom-left-radius
-      - border-bottom-right-radius
+        - border-radius
+        - border-top-left-radius
+        - border-top-right-radius
+        - border-bottom-left-radius
+        - border-bottom-right-radius

-      - border-color
-      - border-top-color
-      - border-right-color
-      - border-bottom-color
-      - border-left-color
+        - border-color
+        - border-top-color
+        - border-right-color
+        - border-bottom-color
+        - border-left-color

    - emptyLineBefore: always
      properties:
-      - outline
-      - outline-color
-      - outline-offset
-      - outline-style
-      - outline-width
+        - outline
+        - outline-color
+        - outline-offset
+        - outline-style
+        - outline-width

    # Background

    - emptyLineBefore: always
      properties:
-      - background
-      - background-attachment
-      - background-clip
-      - background-color
-      - background-image
-      - background-repeat
-      - background-position
-      - background-size
+        - background
+        - background-attachment
+        - background-clip
+        - background-color
+        - background-image
+        - background-repeat
+        - background-position
+        - background-size

-    # Text
+        # Text

-      - color
+        - color

    - emptyLineBefore: always
      properties:
-      - font
-      - font-family
-      - font-size
-      - font-smoothing
-      - font-style
-      - font-variant
-      - font-weight
+        - font
+        - font-family
+        - font-size
+        - font-smoothing
+        - font-style
+        - font-variant
+        - font-weight

    - emptyLineBefore: always
      properties:
-      - letter-spacing
-      - line-height
-      - list-style
+        - letter-spacing
+        - line-height
+        - list-style

    - emptyLineBefore: always
      properties:
-      - text-align
-      - text-decoration
-      - text-indent
-      - text-overflow
-      - text-rendering
-      - text-shadow
-      - text-transform
-      - text-wrap
+        - text-align
+        - text-decoration
+        - text-indent
+        - text-overflow
+        - text-rendering
+        - text-shadow
+        - text-transform
+        - text-wrap

    - emptyLineBefore: always
      properties:
-      - white-space
-      - word-spacing
+        - white-space
+        - word-spacing

    # Other

    - emptyLineBefore: always
      properties:
-      - border-collapse
-      - border-spacing
-      - box-shadow
-      - caption-side
-      - contain
-      - content
-      - cursor
-      - direction
-      - empty-cells
-      - object-fit
-      - opacity
-      - overflow
-      - quotes
-      - speak
-      - table-layout
-      - touch-action
-      - user-select
-      - vertical-align
-      - visibility
-      - z-index
+        - border-collapse
+        - border-spacing
+        - box-shadow
+        - caption-side
+        - contain
+        - content
+        - cursor
+        - direction
+        - empty-cells
+        - object-fit
+        - opacity
+        - overflow
+        - quotes
+        - speak
+        - table-layout
+        - touch-action
+        - user-select
+        - vertical-align
+        - visibility
+        - z-index

  property-disallowed-list:
    - background-position
    - right
    - left
    - float
-    - padding
    - padding-left
    - padding-right
-    - margin
    - margin-left
    - margin-right
-    - border-radius
    - border-top-left-radius
    - border-top-right-radius
    - border-bottom-right-radius
--- a/core/CHANGELOG.md
+++ b/core/CHANGELOG.md
@@ -3,6 +3,63 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+
+## [7.8.3](https://github.com/ionic-team/ionic-framework/compare/v7.8.2...v7.8.3) (2024-04-03)
+
+
+### Bug Fixes
+
+* **button:** activated outline button in toolbar no longer blends into background on MD dark mode ([#29216](https://github.com/ionic-team/ionic-framework/issues/29216)) ([ee5da7a](https://github.com/ionic-team/ionic-framework/commit/ee5da7a747c0a0b420c5e371a9fe9ec4938d179e))
+* **popover:** viewport can be scrolled if no content present ([#29215](https://github.com/ionic-team/ionic-framework/issues/29215)) ([f08759c](https://github.com/ionic-team/ionic-framework/commit/f08759c2b8256ff66f8d1901bd8e0be4617db262)), closes [#29211](https://github.com/ionic-team/ionic-framework/issues/29211)
+
+
+
+
+
+# [8.0.0-rc.0](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.4...v8.0.0-rc.0) (2024-03-27)
+
+**Note:** Version bump only for package @ionic/core
+
+
+
+
+
+# [8.0.0-beta.4](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.3...v8.0.0-beta.4) (2024-03-27)
+
+
+### Code Refactoring
+
+* **haptics:** remove cordova haptics support ([#29186](https://github.com/ionic-team/ionic-framework/issues/29186)) ([9efeb0a](https://github.com/ionic-team/ionic-framework/commit/9efeb0ad31aadee5f5ae542641d928ecf93fe82a))
+* **searchbar:** autocapitalize defaults to off ([#29107](https://github.com/ionic-team/ionic-framework/issues/29107)) ([6e477b7](https://github.com/ionic-team/ionic-framework/commit/6e477b743e41b2b37627c8208901704f599b762a))
+
+
+### Features
+
+* **button:** add circular shape as round ([#29161](https://github.com/ionic-team/ionic-framework/issues/29161)) ([44529f0](https://github.com/ionic-team/ionic-framework/commit/44529f0a62f1b1ce42750a20f19e829b2789febd))
+* **input:** add input-password-toggle component ([#29175](https://github.com/ionic-team/ionic-framework/issues/29175)) ([6c500fd](https://github.com/ionic-team/ionic-framework/commit/6c500fd6b2e2553c11fcddc9d86ac9a29f76e172))
+* remove css animations support for ionic animations ([#29123](https://github.com/ionic-team/ionic-framework/issues/29123)) ([892594d](https://github.com/ionic-team/ionic-framework/commit/892594de0665e8fc5c8a737d292812842ea03d64))
+
+
+### BREAKING CHANGES
+
+* **searchbar:** The `autocapitalize` property on Searchbar now defaults to `'off'`.
+* **haptics:** Support for the Cordova Haptics plugin has been removed. Components that integrate with haptics, such as `ion-picker` and `ion-toggle`, will continue to function but will no longer play haptics in Cordova environments. Developers should migrate to Capacitor to continue to have haptics in these components.
+
+
+
+
+
+## [7.8.2](https://github.com/ionic-team/ionic-framework/compare/v7.8.1...v7.8.2) (2024-03-27)
+
+
+### Bug Fixes
+
+* **searchbar:** autocapitalize is initialized correctly ([#29197](https://github.com/ionic-team/ionic-framework/issues/29197)) ([8ad66c0](https://github.com/ionic-team/ionic-framework/commit/8ad66c03d777edcab19c97cba696b171acc2d2e8)), closes [#29193](https://github.com/ionic-team/ionic-framework/issues/29193)
+
+
+
+
+
 # [8.0.0-beta.3](https://github.com/ionic-team/ionic-framework/compare/v7.8.1...v8.0.0-beta.3) (2024-03-20)


--- a/core/api.txt
+++ b/core/api.txt
@@ -234,8 +234,8 @@ ion-button,prop,mode,"ios" | "md",undefined,false,false
 ion-button,prop,rel,string | undefined,undefined,false,false
 ion-button,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-button,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
-ion-button,prop,shape,"round" | undefined,undefined,false,true
-ion-button,prop,size,"default" | "large" | "small" | undefined,undefined,false,true
+ion-button,prop,shape,"rectangular" | "round" | undefined,undefined,false,true
+ion-button,prop,size,"default" | "large" | "small" | "xlarge" | "xsmall" | undefined,undefined,false,true
 ion-button,prop,strong,boolean,false,false,false
 ion-button,prop,target,string | undefined,undefined,false,false
 ion-button,prop,theme,"ios" | "md" | "ionic",undefined,false,false
@@ -282,6 +282,7 @@ ion-card,prop,mode,"ios" | "md",undefined,false,false
 ion-card,prop,rel,string | undefined,undefined,false,false
 ion-card,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-card,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
+ion-card,prop,shape,"rectangular" | "round" | undefined,undefined,false,true
 ion-card,prop,target,string | undefined,undefined,false,false
 ion-card,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-card,prop,type,"button" | "reset" | "submit",'button',false,false
@@ -346,6 +347,7 @@ ion-chip,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "second
 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,prop,shape,"rectangular" | "round" | undefined,undefined,false,false
 ion-chip,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-chip,css-prop,--background
 ion-chip,css-prop,--color
@@ -387,6 +389,7 @@ ion-col,css-prop,--ion-grid-columns

 ion-content,shadow
 ion-content,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-content,prop,fixedSlotPlacement,"after" | "before",'after',false,false
 ion-content,prop,forceOverscroll,boolean | undefined,undefined,false,false
 ion-content,prop,fullscreen,boolean,false,false,false
 ion-content,prop,mode,"ios" | "md",undefined,false,false
@@ -598,12 +601,13 @@ ion-input,prop,autocomplete,"name" | "email" | "tel" | "url" | "on" | "off" | "h
 ion-input,prop,autocorrect,"off" | "on",'off',false,false
 ion-input,prop,autofocus,boolean,false,false,false
 ion-input,prop,clearInput,boolean,false,false,false
+ion-input,prop,clearInputIcon,string | undefined,undefined,false,false
 ion-input,prop,clearOnEdit,boolean | undefined,undefined,false,false
 ion-input,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-input,prop,counter,boolean,false,false,false
 ion-input,prop,counterFormatter,((inputLength: number, maxLength: number) => string) | undefined,undefined,false,false
 ion-input,prop,debounce,number | undefined,undefined,false,false
-ion-input,prop,disabled,boolean,false,false,false
+ion-input,prop,disabled,boolean,false,false,true
 ion-input,prop,enterkeyhint,"done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined,undefined,false,false
 ion-input,prop,errorText,string | undefined,undefined,false,false
 ion-input,prop,fill,"outline" | "solid" | undefined,undefined,false,false
@@ -620,7 +624,7 @@ ion-input,prop,multiple,boolean | undefined,undefined,false,false
 ion-input,prop,name,string,this.inputId,false,false
 ion-input,prop,pattern,string | undefined,undefined,false,false
 ion-input,prop,placeholder,string | undefined,undefined,false,false
-ion-input,prop,readonly,boolean,false,false,false
+ion-input,prop,readonly,boolean,false,false,true
 ion-input,prop,required,boolean,false,false,false
 ion-input,prop,shape,"round" | undefined,undefined,false,false
 ion-input,prop,spellcheck,boolean,false,false,false
@@ -653,6 +657,12 @@ ion-input,css-prop,--placeholder-font-style
 ion-input,css-prop,--placeholder-font-weight
 ion-input,css-prop,--placeholder-opacity

+ion-input-password-toggle,shadow
+ion-input-password-toggle,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-input-password-toggle,prop,hideIcon,string | undefined,undefined,false,false
+ion-input-password-toggle,prop,mode,"ios" | "md",undefined,false,false
+ion-input-password-toggle,prop,showIcon,string | undefined,undefined,false,false
+
 ion-item,shadow
 ion-item,prop,button,boolean,false,false,false
 ion-item,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
@@ -1265,7 +1275,7 @@ ion-row,prop,theme,"ios" | "md" | "ionic",undefined,false,false

 ion-searchbar,scoped
 ion-searchbar,prop,animated,boolean,false,false,false
-ion-searchbar,prop,autocapitalize,string,undefined,true,false
+ion-searchbar,prop,autocapitalize,string,'off',false,false
 ion-searchbar,prop,autocomplete,"name" | "email" | "tel" | "url" | "on" | "off" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo",'off',false,false
 ion-searchbar,prop,autocorrect,"off" | "on",'off',false,false
 ion-searchbar,prop,cancelButtonIcon,string,config.get('backButtonIcon', arrowBackSharp) as string,false,false
--- a/core/package-lock.json
+++ b/core/package-lock.json
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/core",
-  "version": "8.0.0-beta.3",
+  "version": "8.0.0-rc.0",
  "description": "Base components for Ionic",
  "keywords": [
    "ionic",
@@ -67,17 +67,19 @@
    "rollup": "^2.26.4",
    "sass": "^1.33.0",
    "serve": "^14.0.1",
+    "style-dictionary": "^3.9.2",
    "stylelint": "^13.13.1",
    "stylelint-order": "^4.1.0"
  },
  "scripts": {
-    "build": "npm run clean && npm run build.css && stencil build --es5 --docs-json dist/docs.json",
+    "build": "npm run clean && npm run build.tokens && npm run build.css && stencil build --es5 --docs-json dist/docs.json",
    "build.css": "npm run css.sass && npm run css.minify",
    "build.debug": "npm run clean && stencil build --debug",
    "build.docs.json": "stencil build --docs-json dist/docs.json",
+    "build.tokens": "node ./scripts/tokens.js && npm run lint.sass.fix",
    "clean": "node scripts/clean.js",
    "css.minify": "cleancss -O2 -o ./css/ionic.bundle.css ./css/ionic.bundle.css",
-    "css.sass": "sass --embed-sources src/css:./css",
+    "css.sass": "sass --embed-sources --style compressed src/css:./css",
    "eslint": "eslint src",
    "lint": "npm run lint.ts && npm run lint.sass && npm run prettier -- --write --cache",
    "lint.fix": "npm run lint.ts.fix && npm run lint.sass.fix && npm run prettier -- --write --cache",
--- a/core/scripts/readme.md
+++ b/core/scripts/readme.md
@@ -1,44 +1,4 @@

-## Build
+# Core Scripts

-### 1. Clone ionic
-
-    git@github.com:ionic-team/ionic.git
-    cd ionic
-
-### 2. Run `npm install`
-
-  cd core
-  npm install
-
-
-Notice that `@ionic/core` lives in `core`.
-
-### 3. Run `npm start`
-
-Make sure you are inside the `core` directory.
-
-    npm start
-
-With the `dev` command, Ionic components will be built with [Stencil](https://stenciljs.com/), changes to source files are watched, a local http server will startup, and http://localhost:3333/ will open in a browser.
-
-### 4. Preview
-
-Navigate to http://localhost:3333/src/components/. Each component has small e2e apps found in the `test` directory, for example: http://localhost:3333/src/components/button/test/basic
-
-As changes are made in an editor to source files, the e2e app will live-reload.
-
-## How to contribute
-
-1. `npm start` allows you to modify the components and have live reloading, just like another ionic app.
-
-2. When everything looks good, run  `npm run validate` to verify the tests linter and production build passes.
-
-
-# Deploy
-
-1. `npm run prepare.deploy`
-2. Review/update changelog
-3. Commit updates using the package name and version number as the commit message.
-4. `npm run deploy`
-5. :tada:
+This file has been moved to [/docs/core/testing/preview-changes.md](/docs/core/testing/preview-changes.md).
--- a/core/scripts/tokens.js
+++ b/core/scripts/tokens.js
@@ -0,0 +1,174 @@
+/* For generating Design Tokens, we use Style Dictionary for several reasons:
+- It's prepared to easily generate tokens for multiple types of outputs (CSS, SCSS, iOS, Android, documentation, etc.).
+- It also works very well out of the box with any kind of Design Tokens formats, like Figma Tokens, as well as APIs to adjust to more custom ones.
+- It is probably the most well-known and widely used Design Tokens tool. It has also been regularly maintained for a long time.
+- It can easily scale to different necessities we might have in the future.
+*/
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const StyleDictionary = require('style-dictionary');
+
+const { fileHeader } = StyleDictionary.formatHelpers;
+
+// Empty for as an example of how we can add some extra variables, not from the tokens JSON
+const customVariables = ``;
+
+// Prefix for all generated variables
+const variablesPrefix = 'ionic';
+
+// CSS vanilla :root format
+StyleDictionary.registerFormat({
+  name: 'rootFormat',
+  formatter({ dictionary, file }) {
+    // Add a prefix to all variable names
+    const prefixedVariables = dictionary.allProperties.map((prop) => {
+      return `  --${variablesPrefix}-${prop.name}: ${prop.value};`;
+    });
+
+    return (
+      fileHeader({ file }) +
+      ':root {\n' +
+      prefixedVariables.join('\n') + // Join all prefixed variables with a newline
+      customVariables +
+      '\n}\n'
+    );
+  },
+});
+
+// scss variables format
+StyleDictionary.registerFormat({
+  name: 'scssVariablesFormat',
+  formatter({ dictionary, file }) {
+    // Add a prefix to all variable names
+    const prefixedVariables = dictionary.allProperties.map((prop) => {
+      return `$${variablesPrefix}-${prop.name}: var(--${variablesPrefix}-${prop.name}, ${prop.value});`;
+    });
+
+    return (
+      fileHeader({ file }) +
+      prefixedVariables.join('\n') + // Join all prefixed variables with a newline
+      customVariables +
+      '\n'
+    );
+  },
+});
+
+// Create utility-classes
+StyleDictionary.registerFormat({
+  name: 'cssUtilityClassesFormat',
+  formatter({ dictionary, file }) {
+    const utilityClasses = dictionary.allProperties.map((prop) => {
+      let tokenType = prop.attributes.category;
+      const className = `${prop.name}`;
+      let utilityClass = '';
+
+      switch (tokenType) {
+        case 'color':
+          utilityClass = `.${variablesPrefix}-${className} {\n  color: $ionic-${prop.name};\n}
+.${variablesPrefix}-background-${className} {\n  background-color: $ionic-${prop.name};\n}`;
+          break;
+        case 'border':
+          const borderAttribute = prop.attributes.type === 'radius' ? 'border-radius' : 'border-width';
+          utilityClass = `.${variablesPrefix}-${className} {\n  ${borderAttribute}: $ionic-${prop.name};\n}`;
+          break;
+        case 'font':
+          let fontAttribute;
+          switch (prop.attributes.type) {
+            case 'size':
+              fontAttribute = 'font-size';
+              break;
+            case 'weight':
+              fontAttribute = 'font-weight';
+              break;
+            case 'line-height':
+              fontAttribute = 'line-height';
+              break;
+            case 'letter-spacing':
+              fontAttribute = 'letter-spacing';
+              break;
+            case 'family':
+              return;
+          }
+          utilityClass = `.${variablesPrefix}-${className} {\n  ${fontAttribute}: $ionic-${prop.name};\n}`;
+          break;
+        case 'elevation':
+          utilityClass = `.${variablesPrefix}-${className} {\n  box-shadow: $ionic-${prop.name};\n}`;
+          break;
+        case 'space':
+          utilityClass = `.${variablesPrefix}-margin-${className} {\n  margin: $ionic-${prop.name};\n};
+.${variablesPrefix}-padding-${className} {\n  padding: $ionic-${prop.name};\n}`;
+          break;
+        default:
+          utilityClass = `.${variablesPrefix}-${className} {\n  ${tokenType}: $ionic-${prop.name};\n}`;
+      }
+
+      return utilityClass;
+    });
+
+    return [fileHeader({ file }), '@import "./ionic.vars";\n', utilityClasses.join('\n')].join('\n');
+  },
+});
+
+// Make Style Dictionary comply with the $ format on properties from W3C Guidelines
+const w3cTokenJsonParser = {
+  pattern: /\.json|\.tokens\.json|\.tokens$/,
+  parse(_a) {
+    var contents = _a.contents;
+    // replace $value with value so that style dictionary recognizes it
+    var preparedContent = (contents || '{}')
+      .replace(/"\$?value":/g, '"value":')
+      // convert $description to comment
+      .replace(/"\$?description":/g, '"comment":');
+    //
+    return JSON.parse(preparedContent);
+  },
+};
+
+StyleDictionary.registerParser(w3cTokenJsonParser);
+
+// Generate Tokens
+StyleDictionary.extend({
+  source: ['./src/foundations/*.json'],
+  platforms: {
+    css: {
+      buildPath: './src/foundations/',
+      transformGroup: 'css',
+      files: [
+        {
+          destination: 'ionic.root.scss',
+          format: 'rootFormat',
+          options: {
+            outputReferences: true,
+            fileHeader: `myFileHeader`,
+          },
+        },
+      ],
+    },
+    scss: {
+      buildPath: './src/foundations/',
+      transformGroup: 'scss',
+      files: [
+        {
+          destination: 'ionic.vars.scss',
+          format: 'scssVariablesFormat',
+          options: {
+            outputReferences: true,
+            fileHeader: `myFileHeader`,
+          },
+        },
+        {
+          destination: 'ionic.utility.scss',
+          format: 'cssUtilityClassesFormat',
+          options: {
+            outputReferences: true,
+            fileHeader: `myFileHeader`,
+          },
+        },
+      ],
+    },
+  },
+  fileHeader: {
+    myFileHeader: () => {
+      return [`This is an auto-generated file, please do not change it directly.`, `Ionic Design System`];
+    },
+  },
+}).buildAllPlatforms();
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -543,13 +543,13 @@ export namespace Components {
         */
        "routerDirection": RouterDirection;
        /**
-          * Set to `"round"` for a button with more rounded corners.
+          * Set to `"soft"` for a button with soft rounded corners, `"round"` for a button with fully rounded corners, or `"rectangular" for a button without rounded corners. Defaults to `"soft"` for the `"ios`" and `"ionic"` themes and `"round"` for the `"md"` theme.
         */
-        "shape"?: 'round';
+        "shape"?: 'soft' | 'round' | 'rectangular';
        /**
          * Set to `"small"` for a button with less height and padding, to `"default"` for a button with the default height and padding, or to `"large"` for a button with more height and padding. By default the size is unset, unless the button is inside of an item, where the size is `"small"` by default. Set the size to `"default"` inside of an item to make it a standard size button.
         */
-        "size"?: 'small' | 'default' | 'large';
+        "size"?: 'xsmall' | 'small' | 'default' | 'large' | 'xlarge';
        /**
          * If `true`, activates a button with a heavier font weight.
         */
@@ -618,6 +618,10 @@ export namespace Components {
          * When using a router, it specifies the transition direction when navigating to another page using `href`.
         */
        "routerDirection": RouterDirection;
+        /**
+          * Set to `"round"` for a card with more rounded corners, or `"rectangular"` for a card without rounded corners.
+         */
+        "shape"?: 'round' | 'rectangular';
        /**
          * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
         */
@@ -750,6 +754,10 @@ export namespace Components {
          * Display an outline style button.
         */
        "outline": boolean;
+        /**
+          * Define the Chip corner shape, when using the Ionic Theme.
+         */
+        "shape"?: 'round' | 'rectangular';
        /**
          * The theme determines the visual appearance of the component.
         */
@@ -866,6 +874,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;
+        /**
+          * Controls where the fixed content is placed relative to the main content in the DOM. This can be used to control the order in which fixed elements receive keyboard focus. For example, if a FAB in the fixed slot should receive keyboard focus before the main page content, set this property to `'before'`.
+         */
+        "fixedSlotPlacement": 'after' | 'before';
        /**
          * If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, this does not disable the system bounce on iOS. That is an OS level setting.
         */
@@ -1342,6 +1354,10 @@ export namespace Components {
          * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.
         */
        "clearInput": boolean;
+        /**
+          * The icon to use for the clear button. Only applies when `clearInput` is set to `true`.
+         */
+        "clearInputIcon"?: string;
        /**
          * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types.
         */
@@ -1447,9 +1463,9 @@ export namespace Components {
         */
        "setFocus": () => Promise<void>;
        /**
-          * The shape of the input. If "round" it will have an increased border radius.
+          * Set to `"soft"` for an input with soft rounded corners, `"round"` for an input with fully rounded corners, or `"rectangular" for an input without rounded corners. Defaults to `"soft"`.
         */
-        "shape"?: 'round';
+        "shape"?: 'soft' | 'round';
        /**
          * If `true`, the element will have its spelling and grammar checked.
         */
@@ -1471,6 +1487,25 @@ export namespace Components {
         */
        "value"?: string | number | null;
    }
+    interface IonInputPasswordToggle {
+        /**
+          * 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;
+        /**
+          * The icon that can be used to represent hiding a password. If not set, the "eyeOff" Ionicon will be used.
+         */
+        "hideIcon"?: string;
+        /**
+          * The mode determines which platform styles to use.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * The icon that can be used to represent showing a password. If not set, the "eye" Ionicon will be used.
+         */
+        "showIcon"?: string;
+        "type": TextFieldTypes;
+    }
    interface IonItem {
        /**
          * If `true`, a button tag will be rendered and the item will be tappable.
@@ -4323,6 +4358,12 @@ declare global {
        prototype: HTMLIonInputElement;
        new (): HTMLIonInputElement;
    };
+    interface HTMLIonInputPasswordToggleElement extends Components.IonInputPasswordToggle, HTMLStencilElement {
+    }
+    var HTMLIonInputPasswordToggleElement: {
+        prototype: HTMLIonInputPasswordToggleElement;
+        new (): HTMLIonInputPasswordToggleElement;
+    };
    interface HTMLIonItemElement extends Components.IonItem, HTMLStencilElement {
    }
    var HTMLIonItemElement: {
@@ -5147,6 +5188,7 @@ declare global {
        "ion-infinite-scroll": HTMLIonInfiniteScrollElement;
        "ion-infinite-scroll-content": HTMLIonInfiniteScrollContentElement;
        "ion-input": HTMLIonInputElement;
+        "ion-input-password-toggle": HTMLIonInputPasswordToggleElement;
        "ion-item": HTMLIonItemElement;
        "ion-item-divider": HTMLIonItemDividerElement;
        "ion-item-group": HTMLIonItemGroupElement;
@@ -5733,13 +5775,13 @@ declare namespace LocalJSX {
         */
        "routerDirection"?: RouterDirection;
        /**
-          * Set to `"round"` for a button with more rounded corners.
+          * Set to `"soft"` for a button with soft rounded corners, `"round"` for a button with fully rounded corners, or `"rectangular" for a button without rounded corners. Defaults to `"soft"` for the `"ios`" and `"ionic"` themes and `"round"` for the `"md"` theme.
         */
-        "shape"?: 'round';
+        "shape"?: 'soft' | 'round' | 'rectangular';
        /**
          * Set to `"small"` for a button with less height and padding, to `"default"` for a button with the default height and padding, or to `"large"` for a button with more height and padding. By default the size is unset, unless the button is inside of an item, where the size is `"small"` by default. Set the size to `"default"` inside of an item to make it a standard size button.
         */
-        "size"?: 'small' | 'default' | 'large';
+        "size"?: 'xsmall' | 'small' | 'default' | 'large' | 'xlarge';
        /**
          * If `true`, activates a button with a heavier font weight.
         */
@@ -5808,6 +5850,10 @@ declare namespace LocalJSX {
          * When using a router, it specifies the transition direction when navigating to another page using `href`.
         */
        "routerDirection"?: RouterDirection;
+        /**
+          * Set to `"round"` for a card with more rounded corners, or `"rectangular"` for a card without rounded corners.
+         */
+        "shape"?: 'round' | 'rectangular';
        /**
          * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
         */
@@ -5952,6 +5998,10 @@ declare namespace LocalJSX {
          * Display an outline style button.
         */
        "outline"?: boolean;
+        /**
+          * Define the Chip corner shape, when using the Ionic Theme.
+         */
+        "shape"?: 'round' | 'rectangular';
        /**
          * The theme determines the visual appearance of the component.
         */
@@ -6068,6 +6118,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;
+        /**
+          * Controls where the fixed content is placed relative to the main content in the DOM. This can be used to control the order in which fixed elements receive keyboard focus. For example, if a FAB in the fixed slot should receive keyboard focus before the main page content, set this property to `'before'`.
+         */
+        "fixedSlotPlacement"?: 'after' | 'before';
        /**
          * If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, this does not disable the system bounce on iOS. That is an OS level setting.
         */
@@ -6552,6 +6606,10 @@ declare namespace LocalJSX {
          * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.
         */
        "clearInput"?: boolean;
+        /**
+          * The icon to use for the clear button. Only applies when `clearInput` is set to `true`.
+         */
+        "clearInputIcon"?: string;
        /**
          * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types.
         */
@@ -6665,9 +6723,9 @@ declare namespace LocalJSX {
         */
        "required"?: boolean;
        /**
-          * The shape of the input. If "round" it will have an increased border radius.
+          * Set to `"soft"` for an input with soft rounded corners, `"round"` for an input with fully rounded corners, or `"rectangular" for an input without rounded corners. Defaults to `"soft"`.
         */
-        "shape"?: 'round';
+        "shape"?: 'soft' | 'round';
        /**
          * If `true`, the element will have its spelling and grammar checked.
         */
@@ -6689,6 +6747,25 @@ declare namespace LocalJSX {
         */
        "value"?: string | number | null;
    }
+    interface IonInputPasswordToggle {
+        /**
+          * 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;
+        /**
+          * The icon that can be used to represent hiding a password. If not set, the "eyeOff" Ionicon will be used.
+         */
+        "hideIcon"?: string;
+        /**
+          * The mode determines which platform styles to use.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * The icon that can be used to represent showing a password. If not set, the "eye" Ionicon will be used.
+         */
+        "showIcon"?: string;
+        "type"?: TextFieldTypes;
+    }
    interface IonItem {
        /**
          * If `true`, a button tag will be rendered and the item will be tappable.
@@ -8121,7 +8198,7 @@ declare namespace LocalJSX {
        /**
          * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
         */
-        "autocapitalize": string;
+        "autocapitalize"?: string;
        /**
          * Set the input's autocomplete property.
         */
@@ -9064,6 +9141,7 @@ declare namespace LocalJSX {
        "ion-infinite-scroll": IonInfiniteScroll;
        "ion-infinite-scroll-content": IonInfiniteScrollContent;
        "ion-input": IonInput;
+        "ion-input-password-toggle": IonInputPasswordToggle;
        "ion-item": IonItem;
        "ion-item-divider": IonItemDivider;
        "ion-item-group": IonItemGroup;
@@ -9162,6 +9240,7 @@ declare module "@stencil/core" {
            "ion-infinite-scroll": LocalJSX.IonInfiniteScroll & JSXBase.HTMLAttributes<HTMLIonInfiniteScrollElement>;
            "ion-infinite-scroll-content": LocalJSX.IonInfiniteScrollContent & JSXBase.HTMLAttributes<HTMLIonInfiniteScrollContentElement>;
            "ion-input": LocalJSX.IonInput & JSXBase.HTMLAttributes<HTMLIonInputElement>;
+            "ion-input-password-toggle": LocalJSX.IonInputPasswordToggle & JSXBase.HTMLAttributes<HTMLIonInputPasswordToggleElement>;
            "ion-item": LocalJSX.IonItem & JSXBase.HTMLAttributes<HTMLIonItemElement>;
            "ion-item-divider": LocalJSX.IonItemDivider & JSXBase.HTMLAttributes<HTMLIonItemDividerElement>;
            "ion-item-group": LocalJSX.IonItemGroup & JSXBase.HTMLAttributes<HTMLIonItemGroupElement>;
--- a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-scale-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-scale-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/button/button.ionic.scss
+++ b/core/src/components/button/button.ionic.scss
@@ -0,0 +1,243 @@
+@import "./button";
+@import "./button.ionic.vars";
+
+// Ionic Button
+// -------------------------------------------------------------------------------
+
+:host {
+  --padding-bottom: var(--padding-top);
+  --padding-end: #{$button-ionic-padding-end};
+  --padding-start: var(--padding-end);
+  --padding-top: #{$button-ionic-padding-top};
+  --focus-ring-color: #9ec4fd;
+  --focus-ring-width: 2px;
+
+  position: relative;
+
+  min-height: #{$button-ionic-min-height};
+
+  font-size: #{$button-ionic-font-size};
+
+  // Target area
+  &::after {
+    @include position(50%, 0, null, 0);
+    position: absolute;
+
+    height: 100%;
+    min-height: px-to-rem(48);
+
+    transform: translateY(-50%);
+
+    content: "";
+
+    cursor: pointer;
+
+    z-index: 1;
+  }
+
+  ::slotted(ion-icon[slot="start"]) {
+    @include margin-horizontal(null, px-to-rem(8));
+  }
+
+  ::slotted(ion-icon[slot="end"]) {
+    @include margin-horizontal(px-to-rem(8), null);
+  }
+}
+
+// Button Sizes
+// -------------------------------------------------------------------------------
+
+/* Extra Small and Small Button */
+:host(.button-xsmall),
+:host(.button-small) {
+  ::slotted(ion-icon[slot="start"]) {
+    @include margin-horizontal(null, px-to-rem(4));
+  }
+
+  ::slotted(ion-icon[slot="end"]) {
+    @include margin-horizontal(px-to-rem(4), null);
+  }
+}
+
+/* Extra Small Button */
+:host(.button-xsmall) {
+  --border-radius: #{$button-ionic-xsmall-border-radius};
+  --padding-top: #{$button-ionic-xsmall-padding-top};
+  --padding-end: #{$button-ionic-xsmall-padding-end};
+
+  min-height: #{$button-ionic-xsmall-min-height};
+
+  font-size: #{$button-ionic-xsmall-font-size};
+}
+
+/* Small Button */
+:host(.button-small) {
+  --border-radius: #{$button-ionic-small-border-radius};
+  --padding-top: #{$button-ionic-small-padding-top};
+  --padding-end: #{$button-ionic-small-padding-end};
+
+  min-height: #{$button-ionic-small-min-height};
+
+  font-size: #{$button-ionic-small-font-size};
+}
+
+/* Large Button */
+:host(.button-large) {
+  --padding-top: #{$button-ionic-large-padding-top};
+  --padding-end: #{$button-ionic-large-padding-end};
+
+  min-height: #{$button-ionic-large-min-height};
+
+  font-size: #{$button-ionic-large-font-size};
+}
+
+/* Extra Large Button */
+:host(.button-xlarge) {
+  --padding-top: #{$button-ionic-xlarge-padding-top};
+  --padding-end: #{$button-ionic-xlarge-padding-end};
+
+  min-height: #{$button-ionic-xlarge-min-height};
+
+  font-size: #{$button-ionic-xlarge-font-size};
+}
+
+// Button with Icons
+// -------------------------------------------------------------------------------
+
+/* Button containing only an icon */
+::slotted(ion-icon[slot="start"]),
+::slotted(ion-icon[slot="end"]),
+::slotted(ion-icon[slot="icon-only"]) {
+  font-size: px-to-rem(16);
+}
+
+:host(.button-xsmall),
+:host(.button-small),
+:host(.button-large),
+:host(.button-xlarge) {
+  ::slotted(ion-icon[slot="start"]),
+  ::slotted(ion-icon[slot="end"]),
+  ::slotted(ion-icon[slot="icon-only"]) {
+    font-size: 1em;
+  }
+}
+
+/* Button extra small */
+:host(.button-has-icon-only.button-xsmall) {
+  --padding-end: #{$button-has-icon-only-padding-end-xsmall};
+}
+
+/* Button small */
+:host(.button-has-icon-only.button-small) {
+  --padding-end: #{$button-has-icon-only-padding-end-small};
+}
+
+/* Default */
+:host(.button-has-icon-only) {
+  --padding-end: #{$button-has-icon-only-padding-end};
+}
+
+/* Button large */
+:host(.button-has-icon-only.button-large) {
+  --padding-end: #{$button-has-icon-only-padding-end-large};
+}
+
+/* Button extra large */
+:host(.button-has-icon-only.button-xlarge) {
+  --padding-end: #{$button-has-icon-only-padding-end-xlarge};
+}
+
+// Button Shapes
+// -------------------------------------------------------------------------------
+
+// Button Shape Rectangular
+// -------------------------------------------------------------------------------
+
+:host(.button-rectangular) {
+  --border-radius: #{$button-ionic-rectangular-border-radius};
+}
+
+// Button Shape Soft
+// -------------------------------------------------------------------------------
+
+:host(.button-soft) {
+  --border-radius: #{$button-ionic-soft-border-radius};
+}
+
+// Button Shape Round
+// -------------------------------------------------------------------------------
+:host(.button-round) {
+  --border-radius: #{$button-ionic-round-border-radius};
+}
+
+// Button Focused
+// -------------------------------------------------------------------------------
+
+// Only show the focus ring when the button is focused
+:host(.ion-focused) .button-native {
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
+  outline-offset: 2px;
+}
+
+// Fill Solid Button
+// -------------------------------------------------------------------------------
+
+:host(.button-solid) {
+  --background-activated: #{ion-color(primary, shade)};
+}
+
+:host(.button-solid.ion-color.ion-activated) .button-native::after {
+  background: #{current-color(shade)};
+}
+
+
+// Fill Outline Button
+// --------------------------------------------------
+
+:host(.button-outline) {
+  --border-width: #{$button-ionic-outline-border-width};
+  --border-style: #{$button-ionic-outline-border-style};
+  --background-activated: #e3e3e3;
+  --background-activated-opacity: 1;
+  --background-focused: transparent;
+  --background-hover: transparent;
+  --background-focused-opacity: 0.1;
+  --color-activated: #{ion-color(primary, base)};
+}
+
+:host(.button-outline.ion-focused) {
+  --border-color: transparent;
+}
+
+// Fill Clear Button
+// --------------------------------------------------
+
+:host(.button-clear) {
+  --background-activated: #e3e3e3;
+  --background-activated-opacity: 1;
+  --background-focused: transparent;
+  --background-hover: transparent;
+}
+
+// Button Hover
+// --------------------------------------------------
+
+:host(.button-outline),
+:host(.button-clear) {
+  --background-hover: #121212;
+  --background-hover-opacity: 0.04;
+}
+
+// Button: Disabled
+// --------------------------------------------------
+
+:host(.button-disabled) {
+  --color: #c9c9c9;
+  --border-color: var(--color);
+
+  opacity: 1;
+}
+
+:host(.button-solid.button-disabled) {
+  --background: #f5f5f5;
+}
--- a/core/src/components/button/button.ionic.vars.scss
+++ b/core/src/components/button/button.ionic.vars.scss
@@ -0,0 +1,167 @@
+@import "../../themes/ionic.globals.ios";
+
+// Ionic Button
+// -------------------------------------------------------------------------------
+
+/// @prop - Padding top of the button
+$button-ionic-padding-top:                                    px-to-rem(12) !default;
+
+/// @prop - Padding end of the button
+$button-ionic-padding-end:                                    px-to-rem(16) !default;
+
+/// @prop - Padding bottom of the button
+$button-ionic-padding-bottom:                                 $button-ionic-padding-top !default;
+
+/// @prop - Padding start of the button
+$button-ionic-padding-start:                                  $button-ionic-padding-end !default;
+
+/// @prop - Minimum height of the button
+$button-ionic-min-height:                                     px-to-rem(40) !default;
+
+/// @prop - Font size of the button text
+/// The maximum font size is calculated by taking the default font size
+/// and multiplying it by 3, since 310% of the default is the maximum
+$button-ionic-font-size:                                      dynamic-font-max(14px, 3) !default;
+
+// Ionic Extra Small Button
+// -------------------------------------------------------------------------------
+
+/// @prop - Border radius of the extra small button
+$button-ionic-xsmall-border-radius:                           px-to-rem(4) !default;
+
+/// @prop - Padding top of the extra small button
+$button-ionic-xsmall-padding-top:                             px-to-rem(4) !default;
+
+/// @prop - Padding end of the extra small button
+$button-ionic-xsmall-padding-end:                             px-to-rem(12) !default;
+
+/// @prop - Padding bottom of the extra small button
+$button-ionic-xsmall-padding-bottom:                          $button-ionic-xsmall-padding-top !default;
+
+/// @prop - Padding start of the extra small button
+$button-ionic-xsmall-padding-start:                           $button-ionic-xsmall-padding-end !default;
+
+/// @prop - Minimum height of the extra small button
+$button-ionic-xsmall-min-height:                              px-to-rem(24) !default;
+
+/// @prop - Font size of the extra small button text
+/// The maximum font size is calculated by taking the default font size
+/// and multiplying it by 3, since 310% of the default is the maximum
+$button-ionic-xsmall-font-size:                               dynamic-font-max(12px, 3) !default;
+
+// Ionic Small Button
+// -------------------------------------------------------------------------------
+
+/// @prop - Border radius of the small button
+$button-ionic-small-border-radius:                            px-to-rem(4) !default;
+
+/// @prop - Padding top of the small button
+$button-ionic-small-padding-top:                              px-to-rem(8) !default;
+
+/// @prop - Padding end of the small button
+$button-ionic-small-padding-end:                              px-to-rem(16) !default;
+
+/// @prop - Padding bottom of the small button
+$button-ionic-small-padding-bottom:                           $button-ionic-small-padding-top !default;
+
+/// @prop - Padding start of the small button
+$button-ionic-small-padding-start:                            $button-ionic-small-padding-end !default;
+
+/// @prop - Minimum height of the small button
+$button-ionic-small-min-height:                               px-to-rem(32) !default;
+
+/// @prop - Font size of the small button text
+/// The maximum font size is calculated by taking the default font size
+/// and multiplying it by 3, since 310% of the default is the maximum
+$button-ionic-small-font-size:                                dynamic-font-max(12px, 3) !default;
+
+// Ionic Large Button
+// -------------------------------------------------------------------------------
+
+/// @prop - Padding top of the large button
+$button-ionic-large-padding-top:                              px-to-rem(16) !default;
+
+/// @prop - Padding end of the large button
+$button-ionic-large-padding-end:                              px-to-rem(24) !default;
+
+/// @prop - Padding bottom of the large button
+$button-ionic-large-padding-bottom:                           $button-ionic-large-padding-top !default;
+
+/// @prop - Padding start of the large button
+$button-ionic-large-padding-start:                            $button-ionic-large-padding-end !default;
+
+/// @prop - Minimum height of the large button
+$button-ionic-large-min-height:                               px-to-rem(48) !default;
+
+/// @prop - Font size of the large button text
+/// The maximum font size is calculated by taking the default font size
+/// and multiplying it by 3, since 310% of the default is the maximum
+$button-ionic-large-font-size:                                dynamic-font-max(16px, 3) !default;
+
+// Ionic Extra Large Button
+// -------------------------------------------------------------------------------
+
+/// @prop - Padding top of the extra large button
+$button-ionic-xlarge-padding-top:                             px-to-rem(16) !default;
+
+/// @prop - Padding end of the extra large button
+$button-ionic-xlarge-padding-end:                             px-to-rem(32) !default;
+
+/// @prop - Padding bottom of the extra large button
+$button-ionic-xlarge-padding-bottom:                          $button-ionic-xlarge-padding-top !default;
+
+/// @prop - Padding start of the extra large button
+$button-ionic-xlarge-padding-start:                           $button-ionic-xlarge-padding-end !default;
+
+/// @prop - Minimum height of the extra large button
+$button-ionic-xlarge-min-height:                              px-to-rem(56) !default;
+
+/// @prop - Font size of the extra large button text
+/// The maximum font size is calculated by taking the default font size
+/// and multiplying it by 3, since 310% of the default is the maximum
+$button-ionic-xlarge-font-size:                               dynamic-font-max(20px, 3) !default;
+
+// Ionic Rectangular Button
+// -------------------------------------------------------------------------------
+
+/// @prop - Border radius of the rectangular button
+$button-ionic-rectangular-border-radius:                     0 !default;
+
+// Ionic Soft Button
+// -------------------------------------------------------------------------------
+
+/// @prop - Border radius of the soft button
+$button-ionic-soft-border-radius:                            px-to-rem(8) !default;
+
+// Ionic Round Button
+// -------------------------------------------------------------------------------
+
+/// @prop - Border radius of the round button
+$button-ionic-round-border-radius:                           px-to-rem(999) !default;
+
+// Ionic Outline Button
+// -------------------------------------------------------------------------------
+
+/// @prop - Border width of the outline button
+$button-ionic-outline-border-width:                           1px !default;
+
+/// @prop - Border style of the outline button
+$button-ionic-outline-border-style:                           solid !default;
+
+// Ionic Icon Only Button
+// -------------------------------------------------------------------------------
+
+/// @prop - Padding end of the icon only button
+$button-has-icon-only-padding-end:                            px-to-rem(13) !default;
+
+/// @prop - Padding end of the icon only extra small button
+$button-has-icon-only-padding-end-xsmall:                     px-to-rem(6) !default;
+
+/// @prop - Padding end of the icon only small button
+$button-has-icon-only-padding-end-small:                      px-to-rem(10) !default;
+
+/// @prop - Padding end of the icon only large button
+$button-has-icon-only-padding-end-large:                      px-to-rem(16) !default;
+
+/// @prop - Padding end of the icon only extra large button
+$button-has-icon-only-padding-end-xlarge:                     px-to-rem(18) !default;
--- a/core/src/components/button/button.ios.scss
+++ b/core/src/components/button/button.ios.scss
@@ -7,7 +7,6 @@
 // --------------------------------------------------

 :host {
-  --border-radius: #{$button-ios-border-radius};
  --padding-top: #{$button-ios-padding-top};
  --padding-bottom: #{$button-ios-padding-bottom};
  --padding-start: #{$button-ios-padding-start};
@@ -42,7 +41,6 @@
 // --------------------------------------------------

 :host(.button-outline) {
-  --border-radius: #{$button-ios-outline-border-radius};
  --border-width: #{$button-ios-outline-border-width};
  --border-style: #{$button-ios-outline-border-style};
  --background-activated: #{ion-color(primary, base)};
@@ -114,6 +112,12 @@
  font-size: #{$button-ios-small-font-size};
 }

+// iOS Soft Button
+// --------------------------------------------------
+
+:host(.button-soft) {
+  --border-radius: #{$button-ios-soft-border-radius};
+}

 // iOS Round Button
 // --------------------------------------------------
@@ -126,6 +130,13 @@
  --padding-bottom: #{$button-ios-round-padding-bottom};
 }

+// iOS Rectangular Button
+// --------------------------------------------------
+
+:host(.button-rectangular) {
+  --border-radius: #{$button-ios-rectangular-border-radius};
+}
+
 // iOS Strong Button
 // --------------------------------------------------

@@ -149,7 +160,20 @@
 }

 ::slotted(ion-icon[slot="icon-only"]) {
-  font-size: 1.125em;
+  /**
+    * The values were provided through a native iOS app.
+    * min font size: 15px, default font size: 18px, max font size: 43px
+    *
+    * Since the `ion-button` uses `rem` for the font size, we can't
+    * just pass the desired icon font size in `em` to the `
+    * dynamic-font-clamp`. Instead, we need to adjust the base size
+    * to account for the ion-button` font size.
+    *
+    * For example, if the default font size of `ion-button` is 16px
+    * (derived from rem), then the base size can use the default font
+    * size of the icon.
+    */
+  font-size: dynamic-font-clamp(0.84, 18px, 2.39, 1em);
 }

 :host(.button-small.button-has-icon-only) {
@@ -157,11 +181,23 @@
  min-width: clamp(23px, 2.16em, 54px);
  // TODO(FW-6053): replace em value with the min-height variable.
  min-height: clamp(23px, 2.16em, 54px);
-  
 }

 :host(.button-small) ::slotted(ion-icon[slot="icon-only"]) {
-  font-size: 1.4em;
+  /**
+    * The values were provided through a native iOS app.
+    * min font size: 12px, default font size: 17px, max font size: 40px
+    *
+    * Since the `ion-button` uses `rem` for the font size, we can't
+    * just pass the desired icon font size in `em` to the `
+    * dynamic-font-clamp`. Instead, we need to adjust the base size
+    * to account for the ion-button` font size.
+    *
+    * For example, if the default font size of `ion-button` is 13px
+    * (derived from rem) and the default font size of the icon is
+    * 17px, then the base size would need to be increased.
+    */
+  font-size: dynamic-font-clamp(0.58, 20.93px, 1.92, 1em);
 }

 :host(.button-large.button-has-icon-only) {
@@ -172,7 +208,20 @@
 }

 :host(.button-large) ::slotted(ion-icon[slot="icon-only"]) {
-  font-size: 1em;
+  /**
+    * The values were provided through a native iOS app.
+    * min font size: 15px, default font size: 18px, max font size: 43px
+    *
+    * Since the `ion-button` uses `rem` for the font size, we can't
+    * just pass the desired icon font size in `em` to the `
+    * dynamic-font-clamp`. Instead, we need to adjust the base size
+    * to account for the ion-button` font size.
+    *
+    * For example, if the default font size of `ion-button` is 20px
+    * (derived from rem) and the default font size of the icon is
+    * 18px, then the base size would need to be decreased.
+    */
+  font-size: dynamic-font-clamp(1.05, 14.4px, 2.99, 1em);
 }

 // iOS Button Focused
@@ -247,3 +296,12 @@
 :host(.button-solid.ion-color.ion-activated) .button-native::after {
  background: #{current-color(shade)};
 }
+
+
+// Activated Button in Toolbar
+// --------------------------------------------------
+
+:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
+  background: var(--ion-toolbar-color, var(--color));
+  color: #{var(--ion-toolbar-background, var(--background), ion-color(primary, contrast))};
+}
--- a/core/src/components/button/button.ios.vars.scss
+++ b/core/src/components/button/button.ios.vars.scss
@@ -30,9 +30,6 @@ $button-ios-padding-start:                            $button-ios-padding-end !d
 /// @prop - Minimum height of the button
 $button-ios-min-height:                               3.1em !default;

-/// @prop - Border radius of the button
-$button-ios-border-radius:                            14px !default;
-
 /// @prop - Font size of the button text
 /// The maximum font size is calculated by taking the default font size
 /// and multiplying it by 3, since 310% of the default is the maximum
@@ -104,8 +101,6 @@ $button-ios-outline-border-width:                     1px !default;
 /// @prop - Border style of the outline button
 $button-ios-outline-border-style:                     solid !default;

-/// @prop - Border radius of the outline button
-$button-ios-outline-border-radius:                    $button-ios-border-radius !default;

 // iOS Clear Button
 // --------------------------------------------------
@@ -127,6 +122,13 @@ $button-ios-clear-opacity-activated:                  .4 !default;
 /// @prop - Opacity of the clear button on hover
 $button-ios-clear-opacity-hover:                      .6 !default;

+// iOS Soft Button
+// --------------------------------------------------
+
+/// @prop - Border radius of the soft button
+$button-ios-soft-border-radius:                            14px !default;
+
+
 // iOS Round Button
 // --------------------------------------------------

@@ -146,6 +148,13 @@ $button-ios-round-padding-start:                      $button-round-padding-star
 $button-ios-round-border-radius:                      $button-round-border-radius !default;


+// iOS Rectangular Button
+// --------------------------------------------------
+
+/// @prop - Border radius of the rectangular button
+$button-ios-rectangular-border-radius:               0 !default;
+
+
 // iOS Decorator Button
 // --------------------------------------------------

--- a/core/src/components/button/button.md.scss
+++ b/core/src/components/button/button.md.scss
@@ -5,7 +5,6 @@
 // --------------------------------------------------

 :host {
-  --border-radius: #{$button-md-border-radius};
  --padding-top: #{$button-md-padding-top};
  --padding-bottom: #{$button-md-padding-bottom};
  --padding-start: #{$button-md-padding-start};
@@ -76,6 +75,13 @@
 }


+// Material Design Soft Button
+// --------------------------------------------------
+
+:host(.button-soft) {
+  --border-radius: #{$button-md-soft-border-radius};
+}
+
 // Material Design Round Button
 // --------------------------------------------------

@@ -87,6 +93,12 @@
  --padding-bottom: #{$button-md-round-padding-bottom};
 }

+// Material Design Rectangular Button
+// --------------------------------------------------
+
+:host(.button-rectangular) {
+  --border-radius: #{$button-md-rectangular-border-radius};
+}

 // Material Design Button Sizes
 // --------------------------------------------------
@@ -142,7 +154,21 @@
 }

 ::slotted(ion-icon[slot="icon-only"]) {
-  font-size: 1.6em;
+  /**
+    * The values were provided through MD design,
+    * large and small are based on the iOS sizes.
+    * min font size: 15px, default font size: 22.4px, max font size: 43px
+    *
+    * Since the `ion-button` uses `rem` for the font size, we can't
+    * just pass the desired icon font size in `em` to the `
+    * dynamic-font-clamp`. Instead, we need to adjust the base size
+    * to account for the ion-button` font size.
+    *
+    * For example, if the default font size of `ion-button` is 14px
+    * (derived from rem) and the default font size of the icon is
+    * 22.4px, then the base size would need to be increased.
+    */
+  font-size: dynamic-font-clamp(0.59, 25.6px, 1.68, 1em);
 }

 :host(.button-small.button-has-icon-only) {
@@ -153,7 +179,21 @@
 }

 :host(.button-small) ::slotted(ion-icon[slot="icon-only"]) {
-  font-size: 1.23em;
+  /**
+    * The values were provided through MD design,
+    * large and small are based on the iOS sizes.
+    * min font size: 12px, default font size: 16px, max font size: 40px
+    *
+    * Since the `ion-button` uses `rem` for the font size, we can't
+    * just pass the desired icon font size in `em` to the `
+    * dynamic-font-clamp`. Instead, we need to adjust the base size
+    * to account for the ion-button` font size.
+    *
+    * For example, if the default font size of `ion-button` is 13px
+    * (derived from rem) and the default font size of the icon is
+    * 16px, then the base size would need to be increased.
+    */
+  font-size: dynamic-font-clamp(0.66, 19.7px, 2.05, 1em);
 }

 :host(.button-large.button-has-icon-only) {
@@ -164,7 +204,21 @@
 }

 :host(.button-large) ::slotted(ion-icon[slot="icon-only"]) {
-  font-size: 1.4em;
+  /**
+    * The values were provided through MD design,
+    * large and small are based on the iOS sizes.
+    * min font size: 15px, default font size: 28px, max font size: 43px
+    *
+    * Since the `ion-button` uses `rem` for the font size, we can't
+    * just pass the desired icon font size in `em` to the `
+    * dynamic-font-clamp`. Instead, we need to adjust the base size
+    * to account for the ion-button` font size.
+    *
+    * For example, if the default font size of `ion-button` is 20px
+    * (derived from rem) and the default font size of the icon is
+    * 28px, then the base size would need to be increased.
+    */
+    font-size: dynamic-font-clamp(0.67, 22.4px, 1.92, 1em);
 }

 // Material Design Button: Hover
@@ -196,3 +250,12 @@
    background: #{current-color(base)};
  }
 }
+
+
+// Activated Button in Toolbar
+// --------------------------------------------------
+
+:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
+  background: var(--ion-toolbar-background, var(--color));
+  color: #{var(--ion-toolbar-color, var(--background), ion-color(primary, contrast))};
+}
--- a/core/src/components/button/button.md.vars.scss
+++ b/core/src/components/button/button.md.vars.scss
@@ -30,9 +30,6 @@ $button-md-padding-start:                               1.1em !default;
 /// @prop - Minimum height of the button
 $button-md-min-height:                                  36px !default;

-/// @prop - Border radius of the button
-$button-md-border-radius:                               4px !default;
-
 /// @prop - Font size of the button text
 $button-md-font-size:                                   dynamic-font(14px) !default;

@@ -93,6 +90,13 @@ $button-md-small-min-height:                            2.1em !default;
 /// @prop - Font size of the small button
 $button-md-small-font-size:                             dynamic-font(13px) !default;

+// Material Design Round Button
+// --------------------------------------------------
+
+/// @prop - Border radius of the soft button
+$button-md-soft-border-radius:                          4px !default;
+
+
 // Material Design Round Button
 // --------------------------------------------------

@@ -112,6 +116,13 @@ $button-md-round-padding-start:                         $button-round-padding-st
 $button-md-round-border-radius:                         $button-round-border-radius !default;


+// Material Design Rectangular Button
+// --------------------------------------------------
+
+/// @prop - Border radius of the rectangular button
+$button-md-rectangular-border-radius:                  0 !default;
+
+
 // Material Design Decorator Button
 // --------------------------------------------------

--- a/core/src/components/button/button.scss
+++ b/core/src/components/button/button.scss
@@ -325,11 +325,3 @@ ion-ripple-effect {
  background: #{var(--ion-toolbar-color, var(--background))};
  color: #{var(--ion-toolbar-background, var(--color))};
 }
-
-// Activated Button in Toolbar
-// --------------------------------------------------
-
-:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
-  background: var(--ion-toolbar-color, var(--color));
-  color: #{var(--ion-toolbar-background, var(--background), ion-color(primary, contrast))};
-}
--- a/core/src/components/button/button.tsx
+++ b/core/src/components/button/button.tsx
@@ -26,7 +26,7 @@ import type { RouterDirection } from '../router/utils/interface';
  styleUrls: {
    ios: 'button.ios.scss',
    md: 'button.md.scss',
-    ionic: 'button.md.scss',
+    ionic: 'button.ionic.scss',
  },
  shadow: true,
 })
@@ -115,9 +115,11 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
  @Prop() rel: string | undefined;

  /**
-   * Set to `"round"` for a button with more rounded corners.
+   * Set to `"soft"` for a button with soft rounded corners, `"round"` for a button
+   * with fully rounded corners, or `"rectangular" for a button without rounded corners.
+   * Defaults to `"soft"` for the `"ios`" and `"ionic"` themes and `"round"` for the `"md"` theme.
   */
-  @Prop({ reflect: true }) shape?: 'round';
+  @Prop({ reflect: true }) shape?: 'soft' | 'round' | 'rectangular';

  /**
   * Set to `"small"` for a button with less height and padding, to `"default"`
@@ -126,7 +128,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
   * is inside of an item, where the size is `"small"` by default. Set the size to
   * `"default"` inside of an item to make it a standard size button.
   */
-  @Prop({ reflect: true }) size?: 'small' | 'default' | 'large';
+  @Prop({ reflect: true }) size?: 'xsmall' | 'small' | 'default' | 'large' | 'xlarge';

  /**
   * If `true`, activates a button with a heavier font weight.
@@ -216,6 +218,38 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
    return 'bounded';
  }

+  /**
+   * Set the default shape for the different themes
+   */
+  private getShape(): string | undefined {
+    const theme = getIonTheme(this);
+    const { shape } = this;
+
+    if (shape === undefined) {
+      return theme === 'md' ? 'round' : 'soft';
+    }
+
+    return shape;
+  }
+
+  /**
+   * Disable the "xsmall" and "xlarge" sizes if the theme is "ios" or "md"
+   */
+  private getSize(): string | undefined {
+    const theme = getIonTheme(this);
+    const { size } = this;
+
+    if (size === undefined && this.inItem) {
+      return 'small';
+    }
+
+    if ((theme === 'ios' || theme === 'md') && (size === 'xsmall' || size === 'xlarge')) {
+      return undefined;
+    }
+
+    return size;
+  }
+
  /**
   * Finds the form element based on the provided `form` selector
   * or element reference provided.
@@ -321,18 +355,17 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
      disabled,
      rel,
      target,
-      size,
      href,
      color,
      expand,
      hasIconOnly,
-      shape,
      strong,
      inheritedAttributes,
    } = this;

    const theme = getIonTheme(this);
-    const finalSize = size === undefined && this.inItem ? 'small' : size;
+    const finalSize = this.getSize();
+    const finalShape = this.getShape();
    const TagType = href === undefined ? 'button' : ('a' as any);
    const attrs =
      TagType === 'button'
@@ -372,7 +405,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
          [buttonType]: true,
          [`${buttonType}-${expand}`]: expand !== undefined,
          [`${buttonType}-${finalSize}`]: finalSize !== undefined,
-          [`${buttonType}-${shape}`]: shape !== undefined,
+          [`${buttonType}-${finalShape}`]: finalShape !== undefined,
          [`${buttonType}-${fill}`]: true,
          [`${buttonType}-strong`]: strong,
          'in-toolbar': hostContext('ion-toolbar', this.el),
--- a/core/src/components/button/test/clear/button.e2e.ts
+++ b/core/src/components/button/test/clear/button.e2e.ts
@@ -1,14 +1,17 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';

-configs().forEach(({ title, config, screenshot }) => {
-  test.describe(title('button: clear'), () => {
+/**
+ * Fill="clear" does not render differently based on the direction.
+ */
+configs({ directions: ['ltr'], modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, config, screenshot }) => {
+  test.describe(title('button: fill: clear'), () => {
    test('should not have visual regressions', async ({ page }) => {
      await page.goto(`/src/components/button/test/clear`, config);

      await page.setIonViewport();

-      await expect(page).toHaveScreenshot(screenshot(`button-clear`));
+      await expect(page).toHaveScreenshot(screenshot(`button-fill-clear`));
    });
  });
 });
--- a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-ios-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-ios-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-ios-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-ios-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-ios-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-ios-rtl-Mobile-Safari-linux.png
--- a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-md-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-md-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-md-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-md-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-md-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-md-rtl-Mobile-Safari-linux.png
--- a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Safari-linux.png
--- a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-rtl-Mobile-Safari-linux.png
--- a/core/src/components/button/test/round/button.e2e.ts
+++ b/core/src/components/button/test/round/button.e2e.ts
@@ -1,69 +0,0 @@
-import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
-
-/**
- * All content takes up the full width, so RTL has no effect.
- */
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('button: round'), () => {
-    test.describe('default', () => {
-      test('should not have visual regressions', async ({ page }) => {
-        await page.goto(`/src/components/button/test/round`, config);
-
-        await page.setIonViewport();
-
-        const container = page.locator('#default');
-
-        await expect(container).toHaveScreenshot(screenshot(`button-round`));
-      });
-    });
-
-    test.describe('outline', () => {
-      test('should not have visual regressions', async ({ page }) => {
-        await page.goto(`/src/components/button/test/round`, config);
-
-        await page.setIonViewport();
-
-        const container = page.locator('#outline');
-
-        await expect(container).toHaveScreenshot(screenshot(`button-outline-round`));
-      });
-    });
-
-    test.describe('clear', () => {
-      test('should not have visual regressions', async ({ page }) => {
-        await page.goto(`/src/components/button/test/round`, config);
-
-        await page.setIonViewport();
-
-        const container = page.locator('#clear');
-
-        await expect(container).toHaveScreenshot(screenshot(`button-clear-round`));
-      });
-    });
-
-    test.describe('color', () => {
-      test('should not have visual regressions', async ({ page }) => {
-        await page.goto(`/src/components/button/test/round`, config);
-
-        await page.setIonViewport();
-
-        const container = page.locator('#color');
-
-        await expect(container).toHaveScreenshot(screenshot(`button-color-round`));
-      });
-    });
-
-    test.describe('expand', () => {
-      test('should not have visual regressions', async ({ page }) => {
-        await page.goto(`/src/components/button/test/round`, config);
-
-        await page.setIonViewport();
-
-        const container = page.locator('#expand');
-
-        await expect(container).toHaveScreenshot(screenshot(`button-expand-round`));
-      });
-    });
-  });
-});
--- a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/button/test/round/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/button/test/round/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/button/test/round/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/button/test/round/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/button/test/round/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/button/test/round/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/button/test/round/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/button/test/round/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/button/test/round/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-outline-round-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/button/test/round/button.e2e.ts-snapshots/button-outline-round-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-outline-round-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/button/test/round/button.e2e.ts-snapshots/button-outline-round-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-outline-round-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/button/test/round/button.e2e.ts-snapshots/button-outline-round-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/button/test/round/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/button/test/round/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/button/test/round/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-round-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/button/test/round/button.e2e.ts-snapshots/button-round-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-round-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/button/test/round/button.e2e.ts-snapshots/button-round-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-round-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/button/test/round/button.e2e.ts-snapshots/button-round-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/button/test/round/index.html
+++ b/core/src/components/button/test/round/index.html
@@ -1,160 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Button - Round</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-
-    <style>
-      .grid {
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        grid-gap: 10px;
-      }
-    </style>
-  </head>
-
-  <body>
-    <ion-app>
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Button - Round</ion-title>
-        </ion-toolbar>
-      </ion-header>
-
-      <ion-content class="ion-padding" no-bounce>
-        <h1>Default</h1>
-        <div id="default" class="grid">
-          <div>
-            <ion-button size="small" shape="round">Button</ion-button>
-          </div>
-          <div>
-            <ion-button shape="round">Button</ion-button>
-          </div>
-          <div>
-            <ion-button size="large" shape="round">Button</ion-button>
-          </div>
-
-          <div>
-            <ion-button size="small" shape="round">
-              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
-            </ion-button>
-          </div>
-          <div>
-            <ion-button shape="round">
-              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
-            </ion-button>
-          </div>
-          <div>
-            <ion-button size="large" shape="round">
-              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
-            </ion-button>
-          </div>
-        </div>
-
-        <h1>Outline</h1>
-        <div id="outline" class="grid">
-          <div>
-            <ion-button size="small" shape="round" fill="outline">Button</ion-button>
-          </div>
-          <div>
-            <ion-button shape="round" fill="outline">Button</ion-button>
-          </div>
-          <div>
-            <ion-button size="large" shape="round" fill="outline">Button</ion-button>
-          </div>
-          <div>
-            <ion-button size="small" shape="round" fill="outline">
-              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
-            </ion-button>
-          </div>
-          <div>
-            <ion-button shape="round" fill="outline">
-              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
-            </ion-button>
-          </div>
-          <div>
-            <ion-button size="large" shape="round" fill="outline">
-              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
-            </ion-button>
-          </div>
-        </div>
-
-        <h1>Clear</h1>
-        <!-- The buttons have the `ion-focused` class to  highlight that they are round. Otherwise, they would be invisible. -->
-        <div id="clear" class="grid">
-          <div>
-            <ion-button size="small" shape="round" fill="clear" class="ion-focused">Button</ion-button>
-          </div>
-          <div>
-            <ion-button shape="round" fill="clear" class="ion-focused">Button</ion-button>
-          </div>
-          <div>
-            <ion-button size="large" shape="round" fill="clear" class="ion-focused">Button</ion-button>
-          </div>
-          <div>
-            <ion-button size="small" shape="round" fill="clear" class="ion-focused">
-              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
-            </ion-button>
-          </div>
-          <div>
-            <ion-button shape="round" fill="clear" class="ion-focused">
-              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
-            </ion-button>
-          </div>
-          <div>
-            <ion-button size="large" shape="round" fill="clear" class="ion-focused">
-              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
-            </ion-button>
-          </div>
-        </div>
-
-        <h1>Color</h1>
-        <div id="color">
-          <ion-button shape="round">Default</ion-button>
-          <ion-button shape="round" color="primary">Primary</ion-button>
-          <ion-button shape="round" color="secondary">Secondary</ion-button>
-          <ion-button shape="round" color="tertiary">Tertiary</ion-button>
-          <ion-button shape="round" color="success">Success</ion-button>
-          <ion-button shape="round" color="warning">Warning</ion-button>
-          <ion-button shape="round" color="danger">Danger</ion-button>
-          <ion-button shape="round" color="light">Light</ion-button>
-          <ion-button shape="round" color="medium">Medium</ion-button>
-          <ion-button shape="round" color="dark">Dark</ion-button>
-
-          <ion-button fill="outline" shape="round">Default</ion-button>
-          <ion-button fill="outline" shape="round" color="primary">Primary</ion-button>
-          <ion-button fill="outline" shape="round" color="secondary">Secondary</ion-button>
-          <ion-button fill="outline" shape="round" color="tertiary">Tertiary</ion-button>
-          <ion-button fill="outline" shape="round" color="success">Success</ion-button>
-          <ion-button fill="outline" shape="round" color="warning">Warning</ion-button>
-          <ion-button fill="outline" shape="round" color="danger">Danger</ion-button>
-          <ion-button fill="outline" shape="round" color="light">Light</ion-button>
-          <ion-button fill="outline" shape="round" color="medium">Medium</ion-button>
-          <ion-button fill="outline" shape="round" color="dark">Dark</ion-button>
-        </div>
-
-        <h1>Expand</h1>
-        <div id="expand">
-          <ion-button shape="round" expand="block">Block</ion-button>
-          <ion-button shape="round" expand="full" color="danger">Full</ion-button>
-          <ion-button shape="round" fill="outline" expand="block">Block - Outline</ion-button>
-          <ion-button shape="round" fill="outline" expand="full" color="danger">Full - Outline</ion-button>
-        </div>
-
-        <h1>Strong</h1>
-        <div id="strong">
-          <ion-button shape="round" strong>Strong</ion-button>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
--- a/core/src/components/button/test/shape/button.e2e.ts
+++ b/core/src/components/button/test/shape/button.e2e.ts
@@ -0,0 +1,111 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * All content takes up the full width, so RTL has no effect.
+ */
+// TODO: FW-6077 - Add ionic theme on MD mode to this test.
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('button: shape'), () => {
+    test.describe('round', () => {
+      test.describe('default', () => {
+        test('should not have visual regressions', async ({ page }) => {
+          await page.goto(`/src/components/button/test/shape`, config);
+
+          await page.setIonViewport();
+
+          const container = page.locator('#default');
+
+          await expect(container).toHaveScreenshot(screenshot(`button-round`));
+        });
+      });
+
+      test.describe('outline', () => {
+        test('should not have visual regressions', async ({ page }) => {
+          await page.goto(`/src/components/button/test/shape`, config);
+
+          await page.setIonViewport();
+
+          const container = page.locator('#outline');
+
+          await expect(container).toHaveScreenshot(screenshot(`button-outline-round`));
+        });
+      });
+
+      test.describe('clear', () => {
+        test('should not have visual regressions', async ({ page }) => {
+          await page.goto(`/src/components/button/test/shape`, config);
+
+          await page.setIonViewport();
+
+          const container = page.locator('#clear');
+
+          await expect(container).toHaveScreenshot(screenshot(`button-clear-round`));
+        });
+      });
+
+      test.describe('color', () => {
+        test('should not have visual regressions', async ({ page }) => {
+          await page.goto(`/src/components/button/test/shape`, config);
+
+          await page.setIonViewport();
+
+          const container = page.locator('#color');
+
+          await expect(container).toHaveScreenshot(screenshot(`button-color-round`));
+        });
+      });
+
+      test.describe('expand', () => {
+        test('should not have visual regressions', async ({ page }) => {
+          await page.goto(`/src/components/button/test/shape`, config);
+
+          await page.setIonViewport();
+
+          const container = page.locator('#expand');
+
+          await expect(container).toHaveScreenshot(screenshot(`button-expand-round`));
+        });
+      });
+    });
+  });
+});
+
+/**
+ * Shape="rectangular" is only available in the Ionic theme.
+ */
+configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('button: shape'), () => {
+    test.describe('rectangular', () => {
+      test('should not have visual regressions', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            ion-button {
+              margin: 8px;
+            }
+          </style>
+          <div id="container">
+            <ion-button shape="rectangular" fill="solid">Rectangular Button, Solid</ion-button>
+            <ion-button class="ion-focused" shape="rectangular" fill="solid">Rectangular Button, Solid, Focused</ion-button>
+            <ion-button class="ion-activated" shape="rectangular" fill="solid">Rectangular Button, Solid, Activated</ion-button>
+
+            <ion-button shape="rectangular" fill="outline">Rectangular Button, Outline</ion-button>
+            <ion-button class="ion-focused" shape="rectangular" fill="outline">Rectangular Button, Outline, Focused</ion-button>
+            <ion-button class="ion-activated" shape="rectangular" fill="outline">Rectangular Button, Outline, Activated</ion-button>
+
+            <ion-button shape="rectangular" fill="clear">Rectangular Button</ion-button>
+            <ion-button class="ion-focused" shape="rectangular" fill="clear">Rectangular Button, Focused</ion-button>
+            <ion-button class="ion-activated" shape="rectangular" fill="clear">Rectangular Button, Activated</ion-button>
+          </div>
+          `,
+          config
+        );
+
+        const container = page.locator('#container');
+
+        await expect(container).toHaveScreenshot(screenshot(`button-shape-rectangular`));
+      });
+    });
+  });
+});
--- a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Chrome-linux.png
--- a/Show More
+++ b/Show More