feat(core): add ionic colors

feat(toolbar): add ionic theme styles (#29656 )
Issue number: internal ---------   ## What is the new behavior?  Added ionic theme scss architecture for - Toolbar - Menu Button - Buttons - Searchbar - Title For the toolbar, it was decided to follow an approach closer to ios regarding the slots offering and behaviour, as it matches more closely the UX/UI requirements. - Added TODO related to z-index task on toolbar an header ionic files. - Added new ion-title and ion-toolbar tests for ionic theme. ## Does this introduce a breaking change? - [ ] Yes - [x] No  ## Other information  [Toolbar Sample Screen](https://ionic-framework-15lh8i02e-ionic1.vercel.app/src/components/toolbar/test/theme-ionic) --------- Co-authored-by: ionitron <hi@ionicframework.com> Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com> Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
2026-03-13 10:22:08 +08:00 · 2024-07-03 16:42:37 -07:00 · 2024-06-28 22:19:35 +01:00 · 2024-06-28 21:01:52 +01:00 · 2024-06-27 17:53:51 -04:00 · 2024-06-27 09:02:17 -07:00
944 changed files with 10961 additions and 4674 deletions
--- a/.gitattributes
+++ b/.gitattributes
@@ -0,0 +1 @@
+* text=auto eol=lf
--- a/.github/workflows/actions/test-angular-e2e/action.yml
+++ b/.github/workflows/actions/test-angular-e2e/action.yml
@@ -29,7 +29,7 @@ runs:
      shell: bash
      working-directory: ./packages/angular/test
    - name: Install Dependencies
-      run: npm install --legacy-peer-deps # TODO(FW-6227): Remove legacy-peer-deps flag
+      run: npm install
      shell: bash
      working-directory: ./packages/angular/test/build/${{ inputs.app }}
    - name: Sync Built Changes
--- a/.github/workflows/assign-issues.yml
+++ b/.github/workflows/assign-issues.yml
@@ -11,8 +11,8 @@ jobs:
      issues: write
    steps:
      - name: 'Auto-assign issue'
-        uses: pozil/auto-assign-issue@65947009a243e6b3993edeef4e64df3ca85d760c # v1.14.0
+        uses: pozil/auto-assign-issue@c5bca5027e680b9e8411b826d16947afd8c76b32 # v2.0.0
        with:
-          assignees: brandyscarney, thetaPC
+          assignees: brandyscarney, thetaPC, joselrio, rugoncalves, BenOsodrac, JoaoFerreira-FrontEnd, OS-giulianasilva
          numOfAssignee: 1
          allowSelfAssign: false
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,47 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [8.2.2](https://github.com/ionic-team/ionic-framework/compare/v8.2.1...v8.2.2) (2024-06-12)
+
+
+### Bug Fixes
+
+* **refresher:** show when content is fullscreen ([#29608](https://github.com/ionic-team/ionic-framework/issues/29608)) ([5cdfac8](https://github.com/ionic-team/ionic-framework/commit/5cdfac89f5389cb3009427183f7034ba05788bc2)), closes [#18714](https://github.com/ionic-team/ionic-framework/issues/18714)
+
+
+
+
+
+## [8.2.1](https://github.com/ionic-team/ionic-framework/compare/v8.2.0...v8.2.1) (2024-06-05)
+
+* **react:** export InputInputEventDetail type ([#29512](https://github.com/ionic-team/ionic-framework/issues/29512)) ([624ceba](https://github.com/ionic-team/ionic-framework/commit/624ceba2e128bb13a3afe4c35883f603f5488d0e)), closes [#29518](https://github.com/ionic-team/ionic-framework/issues/29518)
+
+
+
+
+
+# [8.2.0](https://github.com/ionic-team/ionic-framework/compare/v8.1.3...v8.2.0) (2024-05-22)
+
+
+### Features
+
+* **angular:** setting props on a signal works ([#29453](https://github.com/ionic-team/ionic-framework/issues/29453)) ([4640e04](https://github.com/ionic-team/ionic-framework/commit/4640e046ebbd35bf92737368c6262f79a8803a59)), closes [#28876](https://github.com/ionic-team/ionic-framework/issues/28876)
+
+
+
+
+
+## [8.1.3](https://github.com/ionic-team/ionic-framework/compare/v8.1.2...v8.1.3) (2024-05-22)
+
+
+### Bug Fixes
+
+* **core:** malformed URIs will not throw exception ([#29486](https://github.com/ionic-team/ionic-framework/issues/29486)) ([4a41983](https://github.com/ionic-team/ionic-framework/commit/4a41983098fe9bf83fdf05ce7ab28c79f414e11b)), closes [#29479](https://github.com/ionic-team/ionic-framework/issues/29479)
+
+
+
+
+
 ## [8.1.2](https://github.com/ionic-team/ionic-framework/compare/v8.1.1...v8.1.2) (2024-05-15)


--- 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/docs/CONTRIBUTING.md">
+  <a href="https://github.com/ionic-team/ionic-framework/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/docs/CONTRIBUTING.md">Contribute</a>
+  <a href="https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md">Contribute</a>
  <span> · </span>
  <a href="https://blog.ionicframework.com/">Blog</a>
  <br />
@@ -63,14 +63,15 @@ Looking for the `ionic-angular` package? Ionic 3 has been moved to the [`ionic-v

 ### Getting Started

-Start a new project by following our quick [Getting Started guide](https://ionicframework.com/getting-started/).
+Start a new project by following our [documentation](https://ionicframework.com/docs/).
 We would love to hear from you! If you have any feedback or run into issues using our framework, please file
-an [issue](https://github.com/ionic-team/ionic/issues/new) on this repository.
+an [issue](https://github.com/ionic-team/ionic-framework/issues/new) on this repository.

 ### Migration Guides

 Already have an Ionic app? These guides will help you migrate to the latest versions.

+* [Migrate from v7 to v8](https://ionicframework.com/docs/updating/8-0)
 * [Migrate from v6 to v7](https://ionicframework.com/docs/updating/7-0)
 * [Migrate from v5 to v6](https://ionicframework.com/docs/updating/6-0)
 * [Migrate from v4 to v5](https://ionicframework.com/docs/updating/5-0)
@@ -82,21 +83,16 @@ The Ionic Conference App is a full featured Ionic app. It is the perfect startin

 - [Angular Ionic Conference App](https://github.com/ionic-team/ionic-conference-app)
 - [React Ionic Conference App](https://github.com/ionic-team/ionic-react-conference-app)
-<!-- TODO(FW-3811): add this when the vue conference app is updated -->
-<!-- - [Vue Ionic Conference App](https://github.com/ionic-team/ionic-vue-conference-app) -->
+- [Vue Ionic Conference App](https://github.com/ionic-team/ionic-vue-conference-app)

 ### Contributing

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

-Please note that this project is released with a [Contributor Code of Conduct](https://github.com/ionic-team/ionic/blob/main/CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms.
-
-### Future Goals
-
-As Ionic Framework components migrate to the web component standard, a goal of ours is to have Ionic Framework easily work within all of the popular frameworks.
+Please note that this project is released with a [Contributor Code of Conduct](https://github.com/ionic-team/ionic-framework/blob/main/CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms.

 ### Earlier Versions

--- a/core/CHANGELOG.md
+++ b/core/CHANGELOG.md
@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [8.2.2](https://github.com/ionic-team/ionic-framework/compare/v8.2.1...v8.2.2) (2024-06-12)
+
+
+### Bug Fixes
+
+* **refresher:** show when content is fullscreen ([#29608](https://github.com/ionic-team/ionic-framework/issues/29608)) ([5cdfac8](https://github.com/ionic-team/ionic-framework/commit/5cdfac89f5389cb3009427183f7034ba05788bc2)), closes [#18714](https://github.com/ionic-team/ionic-framework/issues/18714)
+
+
+
+
+
+## [8.2.1](https://github.com/ionic-team/ionic-framework/compare/v8.2.0...v8.2.1) (2024-06-05)
+
+**Note:** Version bump only for package @ionic/core
+
+
+
+
+
+# [8.2.0](https://github.com/ionic-team/ionic-framework/compare/v8.1.3...v8.2.0) (2024-05-22)
+
+**Note:** Version bump only for package @ionic/core
+
+
+
+
+
+## [8.1.3](https://github.com/ionic-team/ionic-framework/compare/v8.1.2...v8.1.3) (2024-05-22)
+
+
+### Bug Fixes
+
+* **core:** malformed URIs will not throw exception ([#29486](https://github.com/ionic-team/ionic-framework/issues/29486)) ([4a41983](https://github.com/ionic-team/ionic-framework/commit/4a41983098fe9bf83fdf05ce7ab28c79f414e11b)), closes [#29479](https://github.com/ionic-team/ionic-framework/issues/29479)
+
+
+
+
+
 ## [8.1.2](https://github.com/ionic-team/ionic-framework/compare/v8.1.1...v8.1.2) (2024-05-15)


--- a/core/Dockerfile
+++ b/core/Dockerfile
@@ -1,5 +1,5 @@
 # Get Playwright
-FROM mcr.microsoft.com/playwright:v1.43.1
+FROM mcr.microsoft.com/playwright:v1.44.1

 # Set the working directory
 WORKDIR /ionic
--- a/core/api.txt
+++ b/core/api.txt
@@ -184,7 +184,8 @@ ion-app,prop,theme,"ios" | "md" | "ionic",undefined,false,false

 ion-avatar,shadow
 ion-avatar,prop,mode,"ios" | "md",undefined,false,false
-ion-avatar,prop,size,"large" | "medium" | "small" | "xsmall" | undefined,undefined,false,false
+ion-avatar,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
+ion-avatar,prop,size,"large" | "medium" | "small" | "xlarge" | "xsmall" | undefined,undefined,false,false
 ion-avatar,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-avatar,css-prop,--border-radius,ionic
 ion-avatar,css-prop,--border-radius,ios
@@ -311,7 +312,8 @@ ion-backdrop,event,ionBackdropTap,void,true
 ion-badge,shadow
 ion-badge,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-badge,prop,mode,"ios" | "md",undefined,false,false
-ion-badge,prop,size,"large" | "medium" | "small" | "xlarge" | undefined,undefined,false,false
+ion-badge,prop,shape,"round | rectangular" | "soft" | undefined,undefined,false,false
+ion-badge,prop,size,"large" | "medium" | "small" | "xlarge" | "xsmall" | "xxsmall" | undefined,undefined,false,false
 ion-badge,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-badge,css-prop,--background,ionic
 ion-badge,css-prop,--background,ios
@@ -396,73 +398,50 @@ ion-button,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-button,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-button,event,ionBlur,void,true
 ion-button,event,ionFocus,void,true
-ion-button,css-prop,--background,ionic
 ion-button,css-prop,--background,ios
 ion-button,css-prop,--background,md
-ion-button,css-prop,--background-activated,ionic
 ion-button,css-prop,--background-activated,ios
 ion-button,css-prop,--background-activated,md
-ion-button,css-prop,--background-activated-opacity,ionic
 ion-button,css-prop,--background-activated-opacity,ios
 ion-button,css-prop,--background-activated-opacity,md
-ion-button,css-prop,--background-focused,ionic
 ion-button,css-prop,--background-focused,ios
 ion-button,css-prop,--background-focused,md
-ion-button,css-prop,--background-focused-opacity,ionic
 ion-button,css-prop,--background-focused-opacity,ios
 ion-button,css-prop,--background-focused-opacity,md
-ion-button,css-prop,--background-hover,ionic
 ion-button,css-prop,--background-hover,ios
 ion-button,css-prop,--background-hover,md
-ion-button,css-prop,--background-hover-opacity,ionic
 ion-button,css-prop,--background-hover-opacity,ios
 ion-button,css-prop,--background-hover-opacity,md
-ion-button,css-prop,--border-color,ionic
 ion-button,css-prop,--border-color,ios
 ion-button,css-prop,--border-color,md
-ion-button,css-prop,--border-radius,ionic
 ion-button,css-prop,--border-radius,ios
 ion-button,css-prop,--border-radius,md
-ion-button,css-prop,--border-style,ionic
 ion-button,css-prop,--border-style,ios
 ion-button,css-prop,--border-style,md
-ion-button,css-prop,--border-width,ionic
 ion-button,css-prop,--border-width,ios
 ion-button,css-prop,--border-width,md
-ion-button,css-prop,--box-shadow,ionic
 ion-button,css-prop,--box-shadow,ios
 ion-button,css-prop,--box-shadow,md
-ion-button,css-prop,--color,ionic
 ion-button,css-prop,--color,ios
 ion-button,css-prop,--color,md
-ion-button,css-prop,--color-activated,ionic
 ion-button,css-prop,--color-activated,ios
 ion-button,css-prop,--color-activated,md
-ion-button,css-prop,--color-focused,ionic
 ion-button,css-prop,--color-focused,ios
 ion-button,css-prop,--color-focused,md
-ion-button,css-prop,--color-hover,ionic
 ion-button,css-prop,--color-hover,ios
 ion-button,css-prop,--color-hover,md
-ion-button,css-prop,--opacity,ionic
 ion-button,css-prop,--opacity,ios
 ion-button,css-prop,--opacity,md
-ion-button,css-prop,--padding-bottom,ionic
 ion-button,css-prop,--padding-bottom,ios
 ion-button,css-prop,--padding-bottom,md
-ion-button,css-prop,--padding-end,ionic
 ion-button,css-prop,--padding-end,ios
 ion-button,css-prop,--padding-end,md
-ion-button,css-prop,--padding-start,ionic
 ion-button,css-prop,--padding-start,ios
 ion-button,css-prop,--padding-start,md
-ion-button,css-prop,--padding-top,ionic
 ion-button,css-prop,--padding-top,ios
 ion-button,css-prop,--padding-top,md
-ion-button,css-prop,--ripple-color,ionic
 ion-button,css-prop,--ripple-color,ios
 ion-button,css-prop,--ripple-color,md
-ion-button,css-prop,--transition,ionic
 ion-button,css-prop,--transition,ios
 ion-button,css-prop,--transition,md
 ion-button,part,native
@@ -537,37 +516,26 @@ ion-checkbox,prop,value,any,'on',false,false
 ion-checkbox,event,ionBlur,void,true
 ion-checkbox,event,ionChange,CheckboxChangeEventDetail<any>,true
 ion-checkbox,event,ionFocus,void,true
-ion-checkbox,css-prop,--border-color,ionic
 ion-checkbox,css-prop,--border-color,ios
 ion-checkbox,css-prop,--border-color,md
-ion-checkbox,css-prop,--border-color-checked,ionic
 ion-checkbox,css-prop,--border-color-checked,ios
 ion-checkbox,css-prop,--border-color-checked,md
-ion-checkbox,css-prop,--border-radius,ionic
 ion-checkbox,css-prop,--border-radius,ios
 ion-checkbox,css-prop,--border-radius,md
-ion-checkbox,css-prop,--border-style,ionic
 ion-checkbox,css-prop,--border-style,ios
 ion-checkbox,css-prop,--border-style,md
-ion-checkbox,css-prop,--border-width,ionic
 ion-checkbox,css-prop,--border-width,ios
 ion-checkbox,css-prop,--border-width,md
-ion-checkbox,css-prop,--checkbox-background,ionic
 ion-checkbox,css-prop,--checkbox-background,ios
 ion-checkbox,css-prop,--checkbox-background,md
-ion-checkbox,css-prop,--checkbox-background-checked,ionic
 ion-checkbox,css-prop,--checkbox-background-checked,ios
 ion-checkbox,css-prop,--checkbox-background-checked,md
-ion-checkbox,css-prop,--checkmark-color,ionic
 ion-checkbox,css-prop,--checkmark-color,ios
 ion-checkbox,css-prop,--checkmark-color,md
-ion-checkbox,css-prop,--checkmark-width,ionic
 ion-checkbox,css-prop,--checkmark-width,ios
 ion-checkbox,css-prop,--checkmark-width,md
-ion-checkbox,css-prop,--size,ionic
 ion-checkbox,css-prop,--size,ios
 ion-checkbox,css-prop,--size,md
-ion-checkbox,css-prop,--transition,ionic
 ion-checkbox,css-prop,--transition,ios
 ion-checkbox,css-prop,--transition,md
 ion-checkbox,part,container
@@ -861,6 +829,7 @@ ion-grid,css-prop,--ion-grid-width-xs

 ion-header,none
 ion-header,prop,collapse,"condense" | "fade" | undefined,undefined,false,false
+ion-header,prop,divider,boolean,false,false,false
 ion-header,prop,mode,"ios" | "md",undefined,false,false
 ion-header,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-header,prop,translucent,boolean,false,false,false
@@ -909,7 +878,7 @@ ion-input,prop,fill,"outline" | "solid" | undefined,undefined,false,false
 ion-input,prop,helperText,string | undefined,undefined,false,false
 ion-input,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined,undefined,false,false
 ion-input,prop,label,string | undefined,undefined,false,false
-ion-input,prop,labelPlacement,"end" | "fixed" | "floating" | "stacked" | "start",'start',false,false
+ion-input,prop,labelPlacement,"end" | "fixed" | "floating" | "stacked" | "start" | undefined,undefined,false,false
 ion-input,prop,max,number | string | undefined,undefined,false,false
 ion-input,prop,maxlength,number | undefined,undefined,false,false
 ion-input,prop,min,number | string | undefined,undefined,false,false
@@ -921,7 +890,8 @@ 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,true
 ion-input,prop,required,boolean,false,false,false
-ion-input,prop,shape,"round" | undefined,undefined,false,false
+ion-input,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
+ion-input,prop,size,"large" | "medium" | "xlarge" | undefined,'medium',false,false
 ion-input,prop,spellcheck,boolean,false,false,false
 ion-input,prop,step,string | undefined,undefined,false,false
 ion-input,prop,theme,"ios" | "md" | "ionic",undefined,false,false
@@ -987,6 +957,9 @@ ion-input,css-prop,--placeholder-font-weight,md
 ion-input,css-prop,--placeholder-opacity,ionic
 ion-input,css-prop,--placeholder-opacity,ios
 ion-input,css-prop,--placeholder-opacity,md
+ion-input,css-prop,--text-color-invalid,ionic
+ion-input,css-prop,--text-color-invalid,ios
+ion-input,css-prop,--text-color-invalid,md

 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
@@ -1016,25 +989,19 @@ ion-item,css-prop,--background,md
 ion-item,css-prop,--background-activated,ionic
 ion-item,css-prop,--background-activated,ios
 ion-item,css-prop,--background-activated,md
-ion-item,css-prop,--background-activated-opacity,ionic
 ion-item,css-prop,--background-activated-opacity,ios
 ion-item,css-prop,--background-activated-opacity,md
-ion-item,css-prop,--background-focused,ionic
 ion-item,css-prop,--background-focused,ios
 ion-item,css-prop,--background-focused,md
-ion-item,css-prop,--background-focused-opacity,ionic
 ion-item,css-prop,--background-focused-opacity,ios
 ion-item,css-prop,--background-focused-opacity,md
-ion-item,css-prop,--background-hover,ionic
 ion-item,css-prop,--background-hover,ios
 ion-item,css-prop,--background-hover,md
-ion-item,css-prop,--background-hover-opacity,ionic
 ion-item,css-prop,--background-hover-opacity,ios
 ion-item,css-prop,--background-hover-opacity,md
 ion-item,css-prop,--border-color,ionic
 ion-item,css-prop,--border-color,ios
 ion-item,css-prop,--border-color,md
-ion-item,css-prop,--border-radius,ionic
 ion-item,css-prop,--border-radius,ios
 ion-item,css-prop,--border-radius,md
 ion-item,css-prop,--border-style,ionic
@@ -1043,43 +1010,30 @@ ion-item,css-prop,--border-style,md
 ion-item,css-prop,--border-width,ionic
 ion-item,css-prop,--border-width,ios
 ion-item,css-prop,--border-width,md
-ion-item,css-prop,--color,ionic
 ion-item,css-prop,--color,ios
 ion-item,css-prop,--color,md
-ion-item,css-prop,--color-activated,ionic
 ion-item,css-prop,--color-activated,ios
 ion-item,css-prop,--color-activated,md
-ion-item,css-prop,--color-focused,ionic
 ion-item,css-prop,--color-focused,ios
 ion-item,css-prop,--color-focused,md
-ion-item,css-prop,--color-hover,ionic
 ion-item,css-prop,--color-hover,ios
 ion-item,css-prop,--color-hover,md
-ion-item,css-prop,--detail-icon-color,ionic
 ion-item,css-prop,--detail-icon-color,ios
 ion-item,css-prop,--detail-icon-color,md
-ion-item,css-prop,--detail-icon-font-size,ionic
 ion-item,css-prop,--detail-icon-font-size,ios
 ion-item,css-prop,--detail-icon-font-size,md
-ion-item,css-prop,--detail-icon-opacity,ionic
 ion-item,css-prop,--detail-icon-opacity,ios
 ion-item,css-prop,--detail-icon-opacity,md
-ion-item,css-prop,--inner-border-width,ionic
 ion-item,css-prop,--inner-border-width,ios
 ion-item,css-prop,--inner-border-width,md
-ion-item,css-prop,--inner-box-shadow,ionic
 ion-item,css-prop,--inner-box-shadow,ios
 ion-item,css-prop,--inner-box-shadow,md
-ion-item,css-prop,--inner-padding-bottom,ionic
 ion-item,css-prop,--inner-padding-bottom,ios
 ion-item,css-prop,--inner-padding-bottom,md
-ion-item,css-prop,--inner-padding-end,ionic
 ion-item,css-prop,--inner-padding-end,ios
 ion-item,css-prop,--inner-padding-end,md
-ion-item,css-prop,--inner-padding-start,ionic
 ion-item,css-prop,--inner-padding-start,ios
 ion-item,css-prop,--inner-padding-start,md
-ion-item,css-prop,--inner-padding-top,ionic
 ion-item,css-prop,--inner-padding-top,ios
 ion-item,css-prop,--inner-padding-top,md
 ion-item,css-prop,--min-height,ionic
@@ -1097,10 +1051,8 @@ ion-item,css-prop,--padding-start,md
 ion-item,css-prop,--padding-top,ionic
 ion-item,css-prop,--padding-top,ios
 ion-item,css-prop,--padding-top,md
-ion-item,css-prop,--ripple-color,ionic
 ion-item,css-prop,--ripple-color,ios
 ion-item,css-prop,--ripple-color,md
-ion-item,css-prop,--transition,ionic
 ion-item,css-prop,--transition,ios
 ion-item,css-prop,--transition,md
 ion-item,part,detail-icon
@@ -1154,6 +1106,7 @@ ion-item-option,prop,expandable,boolean,false,false,false
 ion-item-option,prop,href,string | undefined,undefined,false,false
 ion-item-option,prop,mode,"ios" | "md",undefined,false,false
 ion-item-option,prop,rel,string | undefined,undefined,false,false
+ion-item-option,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
 ion-item-option,prop,target,string | undefined,undefined,false,false
 ion-item-option,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-item-option,prop,type,"button" | "reset" | "submit",'button',false,false
@@ -1195,6 +1148,7 @@ ion-list,none
 ion-list,prop,inset,boolean,false,false,false
 ion-list,prop,lines,"full" | "inset" | "none" | undefined,undefined,false,false
 ion-list,prop,mode,"ios" | "md",undefined,false,false
+ion-list,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
 ion-list,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-list,method,closeSlidingItems,closeSlidingItems() => Promise<boolean>

--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -1,14 +1,15 @@
 {
  "name": "@ionic/core",
-  "version": "8.1.2",
+  "version": "8.2.2",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@ionic/core",
-      "version": "8.1.2",
+      "version": "8.2.2",
      "license": "MIT",
      "dependencies": {
+        "@phosphor-icons/core": "^2.1.1",
        "@stencil/core": "^4.17.2",
        "ionicons": "^7.2.2",
        "tslib": "^2.1.0"
@@ -19,6 +20,7 @@
        "@capacitor/haptics": "^6.0.0",
        "@capacitor/keyboard": "^6.0.0",
        "@capacitor/status-bar": "^6.0.0",
+        "@clack/prompts": "^0.7.0",
        "@ionic/eslint-config": "^0.3.0",
        "@ionic/prettier-config": "^2.0.0",
        "@playwright/test": "^1.39.0",
@@ -57,12 +59,12 @@
      "dev": true
    },
    "node_modules/@axe-core/playwright": {
-      "version": "4.9.0",
-      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.9.0.tgz",
-      "integrity": "sha512-Q1Lz75dNsX38jof+aev7RficDMdH/HLOLySkDdXR0fUoeFcLdw4UNgDO2CNNP4CTpoesEdfYRdd6VmDXjhBgbA==",
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.9.1.tgz",
+      "integrity": "sha512-8m4WZbZq7/aq7ZY5IG8GqV+ZdvtGn/iJdom+wBg+iv/3BAOBIfNQtIu697a41438DzEEyptXWmC3Xl5Kx/o9/g==",
      "dev": true,
      "dependencies": {
-        "axe-core": "~4.9.0"
+        "axe-core": "~4.9.1"
      },
      "peerDependencies": {
        "playwright-core": ">= 1.0.0"
@@ -674,6 +676,43 @@
        "@capacitor/core": "^6.0.0"
      }
    },
+    "node_modules/@clack/core": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@clack/core/-/core-0.3.4.tgz",
+      "integrity": "sha512-H4hxZDXgHtWTwV3RAVenqcC4VbJZNegbBjlPvzOzCouXtS2y3sDvlO3IsbrPNWuLWPPlYVYPghQdSF64683Ldw==",
+      "dev": true,
+      "dependencies": {
+        "picocolors": "^1.0.0",
+        "sisteransi": "^1.0.5"
+      }
+    },
+    "node_modules/@clack/prompts": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@clack/prompts/-/prompts-0.7.0.tgz",
+      "integrity": "sha512-0MhX9/B4iL6Re04jPrttDm+BsP8y6mS7byuv0BvXgdXhbV5PdlsHt55dvNsuBCPZ7xq1oTAOOuotR9NFbQyMSA==",
+      "bundleDependencies": [
+        "is-unicode-supported"
+      ],
+      "dev": true,
+      "dependencies": {
+        "@clack/core": "^0.3.3",
+        "is-unicode-supported": "*",
+        "picocolors": "^1.0.0",
+        "sisteransi": "^1.0.5"
+      }
+    },
+    "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
+      "version": "1.3.0",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/@eslint-community/eslint-utils": {
      "version": "4.4.0",
      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -1753,6 +1792,11 @@
        "node": ">= 8"
      }
    },
+    "node_modules/@phosphor-icons/core": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@phosphor-icons/core/-/core-2.1.1.tgz",
+      "integrity": "sha512-v4ARvrip4qBCImOE5rmPUylOEK4iiED9ZyKjcvzuezqMaiRASCHKcRIuvvxL/twvLpkfnEODCOJp5dM4eZilxQ=="
+    },
    "node_modules/@pkgjs/parseargs": {
      "version": "0.11.0",
      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -1764,12 +1808,12 @@
      }
    },
    "node_modules/@playwright/test": {
-      "version": "1.43.1",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.43.1.tgz",
-      "integrity": "sha512-HgtQzFgNEEo4TE22K/X7sYTYNqEMMTZmFS8kTq6m8hXj+m1D8TgwgIbumHddJa9h4yl4GkKb8/bgAl2+g7eDgA==",
+      "version": "1.44.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.44.1.tgz",
+      "integrity": "sha512-1hZ4TNvD5z9VuhNJ/walIjvMVvYkZKf71axoF/uiAqpntQJXpG64dlXhoDXE3OczPuTuvjf/M5KWFg5VAVUS3Q==",
      "dev": true,
      "dependencies": {
-        "playwright": "1.43.1"
+        "playwright": "1.44.1"
      },
      "bin": {
        "playwright": "cli.js"
@@ -1859,9 +1903,9 @@
      }
    },
    "node_modules/@stencil/core": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.18.0.tgz",
-      "integrity": "sha512-cN+nvjy0L8KyYq7N1bmswN/AcBustFlsAxfyPQ+fd3m98lPo53jNKIxKve1ZQ4ZmzSzYO7alDhZvjIesM0rl7w==",
+      "version": "4.18.3",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.18.3.tgz",
+      "integrity": "sha512-8yoG5AFQYEPocVtuoc5kvRS0Hku0MoDWDUpADRaXPVHsOFLmxR16LJENj25ucCz5GEfeTGQ/tCE8JAypPmr/fQ==",
      "bin": {
        "stencil": "bin/stencil"
      },
@@ -2776,9 +2820,9 @@
      }
    },
    "node_modules/axe-core": {
-      "version": "4.9.0",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.9.0.tgz",
-      "integrity": "sha512-H5orY+M2Fr56DWmMFpMrq5Ge93qjNdPVqzBv5gWK3aD1OvjBEJlEzxf09z93dGVQeI0LiW+aCMIx1QtShC/zUw==",
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.9.1.tgz",
+      "integrity": "sha512-QbUdXJVTpvUTHU7871ppZkdOLBeGUKBQWHkHrvN2V9IQWGMt61zf3B45BtzjxEJzYuj0JBjBZP/hmYS/R9pmAw==",
      "dev": true,
      "engines": {
        "node": ">=4"
@@ -8498,12 +8542,12 @@
      }
    },
    "node_modules/playwright": {
-      "version": "1.43.1",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.43.1.tgz",
-      "integrity": "sha512-V7SoH0ai2kNt1Md9E3Gwas5B9m8KR2GVvwZnAI6Pg0m3sh7UvgiYhRrhsziCmqMJNouPckiOhk8T+9bSAK0VIA==",
+      "version": "1.44.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.44.1.tgz",
+      "integrity": "sha512-qr/0UJ5CFAtloI3avF95Y0L1xQo6r3LQArLIg/z/PoGJ6xa+EwzrwO5lpNr/09STxdHuUoP2mvuELJS+hLdtgg==",
      "dev": true,
      "dependencies": {
-        "playwright-core": "1.43.1"
+        "playwright-core": "1.44.1"
      },
      "bin": {
        "playwright": "cli.js"
@@ -8516,9 +8560,9 @@
      }
    },
    "node_modules/playwright-core": {
-      "version": "1.43.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.43.1.tgz",
-      "integrity": "sha512-EI36Mto2Vrx6VF7rm708qSnesVQKbxEWvPrfA1IPY6HgczBplDx7ENtx+K2n4kJ41sLLkuGfmb0ZLSSXlDhqPg==",
+      "version": "1.44.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.44.1.tgz",
+      "integrity": "sha512-wh0JWtYTrhv1+OSsLPgFzGzt67Y7BE/ZS3jEqgGBlp2ppp1ZDj8c+9IARNW4dwf1poq5MgHreEM2KV/GuR4cFA==",
      "dev": true,
      "bin": {
        "playwright-core": "cli.js"
@@ -10226,9 +10270,9 @@
      }
    },
    "node_modules/typescript": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
-      "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
+      "version": "5.4.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
+      "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
      "dev": true,
      "peer": true,
      "bin": {
@@ -10779,12 +10823,12 @@
  },
  "dependencies": {
    "@axe-core/playwright": {
-      "version": "4.9.0",
-      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.9.0.tgz",
-      "integrity": "sha512-Q1Lz75dNsX38jof+aev7RficDMdH/HLOLySkDdXR0fUoeFcLdw4UNgDO2CNNP4CTpoesEdfYRdd6VmDXjhBgbA==",
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.9.1.tgz",
+      "integrity": "sha512-8m4WZbZq7/aq7ZY5IG8GqV+ZdvtGn/iJdom+wBg+iv/3BAOBIfNQtIu697a41438DzEEyptXWmC3Xl5Kx/o9/g==",
      "dev": true,
      "requires": {
-        "axe-core": "~4.9.0"
+        "axe-core": "~4.9.1"
      }
    },
    "@babel/code-frame": {
@@ -11237,6 +11281,35 @@
      "dev": true,
      "requires": {}
    },
+    "@clack/core": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@clack/core/-/core-0.3.4.tgz",
+      "integrity": "sha512-H4hxZDXgHtWTwV3RAVenqcC4VbJZNegbBjlPvzOzCouXtS2y3sDvlO3IsbrPNWuLWPPlYVYPghQdSF64683Ldw==",
+      "dev": true,
+      "requires": {
+        "picocolors": "^1.0.0",
+        "sisteransi": "^1.0.5"
+      }
+    },
+    "@clack/prompts": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@clack/prompts/-/prompts-0.7.0.tgz",
+      "integrity": "sha512-0MhX9/B4iL6Re04jPrttDm+BsP8y6mS7byuv0BvXgdXhbV5PdlsHt55dvNsuBCPZ7xq1oTAOOuotR9NFbQyMSA==",
+      "dev": true,
+      "requires": {
+        "@clack/core": "^0.3.3",
+        "is-unicode-supported": "*",
+        "picocolors": "^1.0.0",
+        "sisteransi": "^1.0.5"
+      },
+      "dependencies": {
+        "is-unicode-supported": {
+          "version": "1.3.0",
+          "bundled": true,
+          "dev": true
+        }
+      }
+    },
    "@eslint-community/eslint-utils": {
      "version": "4.4.0",
      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -12006,6 +12079,11 @@
        "fastq": "^1.6.0"
      }
    },
+    "@phosphor-icons/core": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@phosphor-icons/core/-/core-2.1.1.tgz",
+      "integrity": "sha512-v4ARvrip4qBCImOE5rmPUylOEK4iiED9ZyKjcvzuezqMaiRASCHKcRIuvvxL/twvLpkfnEODCOJp5dM4eZilxQ=="
+    },
    "@pkgjs/parseargs": {
      "version": "0.11.0",
      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -12014,12 +12092,12 @@
      "optional": true
    },
    "@playwright/test": {
-      "version": "1.43.1",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.43.1.tgz",
-      "integrity": "sha512-HgtQzFgNEEo4TE22K/X7sYTYNqEMMTZmFS8kTq6m8hXj+m1D8TgwgIbumHddJa9h4yl4GkKb8/bgAl2+g7eDgA==",
+      "version": "1.44.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.44.1.tgz",
+      "integrity": "sha512-1hZ4TNvD5z9VuhNJ/walIjvMVvYkZKf71axoF/uiAqpntQJXpG64dlXhoDXE3OczPuTuvjf/M5KWFg5VAVUS3Q==",
      "dev": true,
      "requires": {
-        "playwright": "1.43.1"
+        "playwright": "1.44.1"
      }
    },
    "@rollup/plugin-node-resolve": {
@@ -12087,9 +12165,9 @@
      "requires": {}
    },
    "@stencil/core": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.18.0.tgz",
-      "integrity": "sha512-cN+nvjy0L8KyYq7N1bmswN/AcBustFlsAxfyPQ+fd3m98lPo53jNKIxKve1ZQ4ZmzSzYO7alDhZvjIesM0rl7w=="
+      "version": "4.18.3",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.18.3.tgz",
+      "integrity": "sha512-8yoG5AFQYEPocVtuoc5kvRS0Hku0MoDWDUpADRaXPVHsOFLmxR16LJENj25ucCz5GEfeTGQ/tCE8JAypPmr/fQ=="
    },
    "@stencil/react-output-target": {
      "version": "0.5.3",
@@ -12721,9 +12799,9 @@
      }
    },
    "axe-core": {
-      "version": "4.9.0",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.9.0.tgz",
-      "integrity": "sha512-H5orY+M2Fr56DWmMFpMrq5Ge93qjNdPVqzBv5gWK3aD1OvjBEJlEzxf09z93dGVQeI0LiW+aCMIx1QtShC/zUw==",
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.9.1.tgz",
+      "integrity": "sha512-QbUdXJVTpvUTHU7871ppZkdOLBeGUKBQWHkHrvN2V9IQWGMt61zf3B45BtzjxEJzYuj0JBjBZP/hmYS/R9pmAw==",
      "dev": true
    },
    "babel-jest": {
@@ -16917,19 +16995,19 @@
      }
    },
    "playwright": {
-      "version": "1.43.1",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.43.1.tgz",
-      "integrity": "sha512-V7SoH0ai2kNt1Md9E3Gwas5B9m8KR2GVvwZnAI6Pg0m3sh7UvgiYhRrhsziCmqMJNouPckiOhk8T+9bSAK0VIA==",
+      "version": "1.44.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.44.1.tgz",
+      "integrity": "sha512-qr/0UJ5CFAtloI3avF95Y0L1xQo6r3LQArLIg/z/PoGJ6xa+EwzrwO5lpNr/09STxdHuUoP2mvuELJS+hLdtgg==",
      "dev": true,
      "requires": {
        "fsevents": "2.3.2",
-        "playwright-core": "1.43.1"
+        "playwright-core": "1.44.1"
      }
    },
    "playwright-core": {
-      "version": "1.43.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.43.1.tgz",
-      "integrity": "sha512-EI36Mto2Vrx6VF7rm708qSnesVQKbxEWvPrfA1IPY6HgczBplDx7ENtx+K2n4kJ41sLLkuGfmb0ZLSSXlDhqPg==",
+      "version": "1.44.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.44.1.tgz",
+      "integrity": "sha512-wh0JWtYTrhv1+OSsLPgFzGzt67Y7BE/ZS3jEqgGBlp2ppp1ZDj8c+9IARNW4dwf1poq5MgHreEM2KV/GuR4cFA==",
      "dev": true
    },
    "postcss": {
@@ -18209,9 +18287,9 @@
      }
    },
    "typescript": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
-      "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
+      "version": "5.4.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
+      "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
      "dev": true,
      "peer": true
    },
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/core",
-  "version": "8.1.2",
+  "version": "8.2.2",
  "description": "Base components for Ionic",
  "keywords": [
    "ionic",
@@ -31,6 +31,7 @@
    "loader/"
  ],
  "dependencies": {
+    "@phosphor-icons/core": "^2.1.1",
    "@stencil/core": "^4.17.2",
    "ionicons": "^7.2.2",
    "tslib": "^2.1.0"
@@ -41,6 +42,7 @@
    "@capacitor/haptics": "^6.0.0",
    "@capacitor/keyboard": "^6.0.0",
    "@capacitor/status-bar": "^6.0.0",
+    "@clack/prompts": "^0.7.0",
    "@ionic/eslint-config": "^0.3.0",
    "@ionic/prettier-config": "^2.0.0",
    "@playwright/test": "^1.39.0",
@@ -102,7 +104,8 @@
    "docker.build": "docker build -t ionic-playwright .",
    "test.e2e.docker": "npm run docker.build && node ./scripts/docker.mjs",
    "test.e2e.docker.update-snapshots": "npm run test.e2e.docker -- --update-snapshots",
-    "test.e2e.docker.ci": "npm run docker.build && CI=true node ./scripts/docker.mjs"
+    "test.e2e.docker.ci": "npm run docker.build && CI=true node ./scripts/docker.mjs",
+    "test.e2e.script": "node scripts/testing/e2e-script.mjs"
  },
  "author": "Ionic Team",
  "license": "MIT",
@@ -111,7 +114,7 @@
    "url": "git+https://github.com/ionic-team/ionic-framework.git"
  },
  "bugs": {
-    "url": "https://github.com/ionic-team/ionic/issues"
+    "url": "https://github.com/ionic-team/ionic-framework/issues"
  },
  "homepage": "https://ionicframework.com/",
  "jest": {
--- a/core/scripts/testing/e2e-script.mjs
+++ b/core/scripts/testing/e2e-script.mjs
@@ -0,0 +1,260 @@
+// The purpose of this script is to provide a way run the E2E tests
+// without having the developer to manually run multiple commands based
+// on the desired end result.
+// E.g. update the local ground truths for a specific component or
+// open the Playwright report after running the E2E tests.
+
+import {
+  intro,
+  outro,
+  confirm,
+  spinner,
+  isCancel,
+  cancel,
+  text,
+  log,
+} from '@clack/prompts';
+import { exec, spawn } from 'child_process';
+import fs from 'node:fs';
+import { setTimeout as sleep } from 'node:timers/promises';
+import util from 'node:util';
+import color from 'picocolors';
+
+async function main() {
+  const execAsync = util.promisify(exec);
+  const cleanUpFiles = async () => {
+    // Clean up the local ground truths.
+    const cleanUp = spinner();
+  
+    // Inform the user that the local ground truths are being cleaned up.
+    cleanUp.start('Restoring local ground truths');
+  
+    // Reset the local ground truths.
+    await execAsync('git reset -- src/**/*-linux.png').catch((error) => {
+      cleanUp.stop('Failed to reset local ground truths');
+      console.error(error);
+      return process.exit(0);
+    });
+  
+    // Restore the local ground truths.
+    await execAsync('git restore -- src/**/*-linux.png').catch((error) => {
+      cleanUp.stop('Failed to restore local ground truths');
+      console.error(error);
+      return process.exit(0);
+    });
+  
+    // Inform the user that the local ground truths have been cleaned up.
+    cleanUp.stop('Local ground truths have been restored to their original state in order to avoid committing them.');
+  };
+
+  intro(color.inverse(' Update Local Ground Truths'));
+
+  // Ask user for the component name they want to test.
+  const componentValue = await text({
+    message: 'Enter the component or path you want to test (e.g. chip, src/components/chip)',
+    placeholder: 'Empty for all components',
+  });
+
+  // User cancelled the operation with `Ctrl+C` or `CMD+C`.
+  if (isCancel(componentValue)) {
+    cancel('Operation cancelled');
+    return process.exit(0);
+  }
+
+  // Ask user if they want to update their local ground truths.
+  const shouldUpdateTruths = await confirm({
+    message: 'Do you want to update your local ground truths?',
+  });
+
+  // User cancelled the operation with `Ctrl+C` or `CMD+C`.
+  if (isCancel(shouldUpdateTruths)) {
+    cancel('Operation cancelled');
+    return process.exit(0);
+  }
+
+  if (shouldUpdateTruths) {
+    const defaultBaseBranch = 'main';
+
+    // Ask user for the base branch.
+    let baseBranch = await text({
+      message: 'Enter the base branch name:',
+      placeholder: `default: ${defaultBaseBranch}`,
+    })
+
+    // User cancelled the operation with `Ctrl+C` or `CMD+C`.
+    if (isCancel(baseBranch)) {
+      cancel('Operation cancelled');
+      return process.exit(0);
+    }
+
+    // User didn't provide a base branch.
+    if (!baseBranch) {
+      baseBranch = defaultBaseBranch;
+    }
+
+    /**
+     * The provided base branch needs to be fetched.
+     * This ensures that the local base branch is up-to-date with the 
+     * remote base branch. Otherwise, there might be errors stating that
+     * certain files don't exist in the local base branch.
+     */
+    const fetchBaseBranch = spinner();
+
+    // Inform the user that the base branch is being fetched.
+    fetchBaseBranch.start(`Fetching "${baseBranch}" to have the latest changes`);
+
+    // Fetch the base branch.
+    await execAsync(`git fetch origin ${baseBranch}`).catch((error) => {
+      fetchBaseBranch.stop(`Failed to fetch "${baseBranch}"`);
+      console.error(error);
+      return process.exit(0);
+    });
+
+    // Inform the user that the base branch has been fetched.
+    fetchBaseBranch.stop(`Fetched "${baseBranch}"`);
+
+
+    const updateGroundTruth = spinner();
+
+    // Inform the user that the local ground truths are being updated.
+    updateGroundTruth.start('Updating local ground truths');
+
+    // Check if user provided an existing file or directory.
+    const isValidLocation = fs.existsSync(componentValue);
+
+    // User provided an existing file or directory.
+    if (isValidLocation) {
+      const stats = fs.statSync(componentValue);
+
+      // User provided a file as the component.
+      // ex: `componentValue` = `src/components/chip/test/basic/chip.e2e.ts`
+      if (stats.isFile()) {
+        // Update the local ground truths for the provided path.
+        await execAsync(`git checkout origin/${baseBranch} -- ${componentValue}-snapshots/*-linux.png`).catch((error) => {
+          updateGroundTruth.stop('Failed to update local ground truths');
+          console.error(error);
+          return process.exit(0);
+        });
+      }
+
+      // User provided a directory as the component.
+      // ex: `componentValue` = `src/components/chip`
+      if (stats.isDirectory()) {
+        // Update the local ground truths for the provided directory.
+        await execAsync(`git checkout origin/${baseBranch} -- ${componentValue}/test/*/*.e2e.ts-snapshots/*-linux.png`).catch((error) => {
+          updateGroundTruth.stop('Failed to update local ground truths');
+          console.error(error);
+          return process.exit(0);
+        });
+      }
+    }
+    // User provided a component name as the component.
+    // ex: `componentValue` = `chip`
+    else if (componentValue) {
+      // Update the local ground truths for the provided component.
+      await execAsync(`git checkout origin/${baseBranch} -- src/components/${componentValue}/test/*/${componentValue}.e2e.ts-snapshots/*-linux.png`).catch((error) => {
+        updateGroundTruth.stop('Failed to update local ground truths');
+        console.error(error);
+        return process.exit(0);
+      });
+    }
+    // User provided an empty string.
+    else {
+      // Update the local ground truths for all components.
+      await execAsync(`git checkout origin/${baseBranch} -- src/components/*/test/*/*.e2e.ts-snapshots/*-linux.png`).catch((error) => {
+        updateGroundTruth.stop('Failed to update local ground truths');
+        console.error(error);
+        return process.exit(0);
+      });
+    }
+
+    // Inform the user that the local ground truths have been updated.
+    updateGroundTruth.stop('Updated local ground truths');
+  }
+
+  const buildCore = spinner();
+
+  // Inform the user that the core is being built.
+  buildCore.start('Building core');
+
+  /**
+   * Build core
+   * Otherwise, the uncommitted changes will not be reflected in the tests because:
+   * - popping the stash doesn't trigger a re-render even if `npm start` is running
+   * - app is not running the `npm start` command
+   */
+  await execAsync('npm run build').catch((error) => {
+    // Clean up the local ground truths.
+    cleanUpFiles();
+
+    buildCore.stop('Failed to build core');
+    console.error(error);
+    return process.exit(0);
+  });
+
+  buildCore.stop('Built core');
+
+  const runE2ETests = spinner();
+
+  // Inform the user that the E2E tests are being run.
+  runE2ETests.start('Running E2E tests');
+
+  // User provided a component value.
+  if (componentValue) {
+    await execAsync(`npm run test.e2e.docker.ci ${componentValue}`).catch((error) => {
+      // Clean up the local ground truths.
+      cleanUpFiles();
+
+      runE2ETests.stop('Failed to run E2E tests');
+      console.error(error);
+      return process.exit(0);
+    });
+  } else {
+    await execAsync('npm run test.e2e.docker.ci').catch((error) => {
+      // Clean up the local ground truths.
+      cleanUpFiles();
+
+      runE2ETests.stop('Failed to run E2E tests');
+      console.error(error);
+      return process.exit(0);
+    });
+  }
+
+  runE2ETests.stop('Ran E2E tests');
+
+  // Clean up the local ground truths.
+  await cleanUpFiles();
+
+  // Ask user if they want to open the Playwright report.
+  const shouldOpenReport = await confirm({
+    message: 'Do you want to open the Playwright report?',
+  });
+
+  // User cancelled the operation with `Ctrl+C` or `CMD+C`.
+  if (isCancel(shouldOpenReport)) {
+    cancel('Operation cancelled');
+    return process.exit(0);
+  }
+
+  // User chose to open the Playwright report.
+  if (shouldOpenReport) {
+    // Use spawn to display the server information and the key to quit the server.
+    spawn('npx', ['playwright', 'show-report'], {
+      stdio: 'inherit',
+    });
+  } else {
+    // Inform the user that the Playwright report can be opened by running the following command.
+    log.info('If you change your mind, you can open the Playwright report by running the following command:');
+    log.info(color.bold('npx playwright show-report'));
+  }
+
+  if (shouldOpenReport) {
+    outro("You're all set! Don't forget to quit serving the Playwright report when you're done.");
+  } else {
+    outro("You're all set!");
+  }
+
+  await sleep(1000);
+}
+
+main().catch(console.error);
--- a/core/scripts/tokens/index.js
+++ b/core/scripts/tokens/index.js
@@ -16,6 +16,7 @@ const {
  getRgbaValue,
  hexToRgb,
  generateShadowValue,
+  generateFontSizeValue,
  generateFontFamilyValue,
  generateTypographyValue,
  generateRgbValue,
@@ -43,6 +44,8 @@ StyleDictionary.registerFormat({
          return `--${variablesPrefix}-${prop.name}: ${cssShadow};`;
        } else if (prop.attributes.category.match('font-family')) {
          return generateFontFamilyValue(prop);
+        } else if (prop.attributes.category.match('font-size')) {
+          return generateFontSizeValue(prop);
        } else {
          const rgb = hexToRgb(prop.value);
          prop.value = getRgbaValue(prop.value);
@@ -52,7 +55,11 @@ StyleDictionary.registerFormat({
        }
      });

-    return fileHeader({ file }) + ':root {\n' + prefixedVariables.join('\n') + '\n}\n';
+    return [
+      fileHeader({ file }),
+      '@use "../themes/functions.sizes" as font;\n',
+      ':root {\n' + prefixedVariables.join('\n') + '\n}\n',
+    ].join('\n');
  },
 });

@@ -72,6 +79,8 @@ StyleDictionary.registerFormat({
        return `$${variablesPrefix}-${prop.name}: var(--${variablesPrefix}-${prop.name}, ${cssShadow});`;
      } else if (prop.attributes.category.match('font-family')) {
        return generateFontFamilyValue(prop, 'scss');
+      } else if (prop.attributes.category.match('font-size')) {
+        return generateFontSizeValue(prop, 'scss');
      } else if (prop['$type'] === 'typography') {
        return generateTypographyValue(prop, dictionary);
      } else {
@@ -79,7 +88,11 @@ StyleDictionary.registerFormat({
      }
    });

-    return fileHeader({ file }) + prefixedVariables.join('\n') + '\n';
+    return [
+      fileHeader({ file }),
+      '@use "../themes/functions.sizes" as font;\n',
+      prefixedVariables.join('\n') + '\n',
+    ].join('\n');
  },
 });

--- a/core/scripts/tokens/utilities.js
+++ b/core/scripts/tokens/utilities.js
@@ -44,6 +44,15 @@ function generateShadowValue(shadow) {
  return `${shadow.offsetX} ${shadow.offsetY} ${shadow.blur} ${shadow.spread} ${color}`;
 }

+// Generates a valid font-size value from a font-size Design Token structure, while transforming the pixels to rem
+function generateFontSizeValue(prop, variableType = 'css') {
+  return variableType === 'scss'
+    ? `$${variablesPrefix}-${prop.name}: var(--${variablesPrefix}-${prop.name}, font.px-to-rem(${parseInt(
+        prop.value
+      )}));`
+    : `--${variablesPrefix}-${prop.name}: #{font.px-to-rem(${parseInt(prop.value)})};`;
+}
+
 // Generates a valid font-family value from a font-family Design Token structure
 function generateFontFamilyValue(prop, variableType = 'css') {
  // Remove the last word from the token, as it contains the name of the font, which we don't want to be included on the generated variables
@@ -60,12 +69,13 @@ function generateTypographyValue(prop, dictionary) {
  const fontWeightMap = getTypeMap(dictionary, 'font-weight');
  const lineHeightMap = getTypeMap(dictionary, 'line-height');
  const letterSpacingMap = getTypeMap(dictionary, 'letter-spacing');
+  const fontStyle = prop.attributes.item?.toLowerCase() === 'italic' ? 'italic' : 'normal';

  // This exact format is needed so that it compiles the tokens with the expected lint rules
  return `
  $${variablesPrefix}-${prop.name}: (
-    font-family: $ionic-font-family,
    font-size: $ionic-font-size-${fontSizeMap[typography.fontSize]},
+    font-style: ${fontStyle},
    font-weight: $ionic-font-weight-${fontWeightMap[typography.fontWeight]},
    letter-spacing: $ionic-letter-spacing-${letterSpacingMap[typography.letterSpacing] || 0},
    line-height: $ionic-line-height-${lineHeightMap[typography.lineHeight]},
@@ -105,12 +115,13 @@ function generateTypographyUtilityClass(prop, dictionary) {
  const fontWeightMap = getTypeMap(dictionary, 'font-weight');
  const lineHeightMap = getTypeMap(dictionary, 'line-height');
  const letterSpacingMap = getTypeMap(dictionary, 'letter-spacing');
+  const fontStyle = prop.attributes.item?.toLowerCase() === 'italic' ? 'italic' : 'normal';

  // This exact format is needed so that it compiles the tokens with the expected lint rules
  return `
  .${variablesPrefix}-${prop.name} {
-    font-family: $ionic-font-family;
    font-size: $ionic-font-size-${fontSizeMap[typography.fontSize]};
+    font-style: ${fontStyle};
    font-weight: $ionic-font-weight-${fontWeightMap[typography.fontWeight]};
    letter-spacing: $ionic-letter-spacing-${letterSpacingMap[typography.letterSpacing] || 0};
    line-height: $ionic-line-height-${lineHeightMap[typography.lineHeight]};
@@ -122,8 +133,8 @@ function generateTypographyUtilityClass(prop, dictionary) {

 // Generates a color based css utility-class from a color Design Token structure
 function generateColorUtilityClasses(prop, className) {
-  return `.${variablesPrefix}-${className} {\n  --color: $ionic-${prop.name};\n}
-  .${variablesPrefix}-background-${className} {\n  --background: $ionic-${prop.name};\n}`;
+  return `.${variablesPrefix}-${className} {\n  color: $ionic-${prop.name};\n}
+  .${variablesPrefix}-background-${className} {\n  background-color: $ionic-${prop.name};\n}`;
 }

 // Generates a font based css utility-class from a font Design Token structure
@@ -169,6 +180,7 @@ module.exports = {
  hexToRgb,
  hexToRgba,
  generateShadowValue,
+  generateFontSizeValue,
  generateFontFamilyValue,
  generateTypographyValue,
  generateRgbValue: generateValue,
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -336,9 +336,13 @@ export namespace Components {
         */
        "mode"?: "ios" | "md";
        /**
-          * Set to `"xsmall"` for the smallest size, `"small"` for a compact size, `"medium"` for the default height and width, or to `"large"` for a larger size.  Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
+          * Set to `"soft"` for an avatar with slightly rounded corners, `"round"` for an avatar with fully rounded corners, or `"rectangular"` for an avatar without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
         */
-        "size"?: `xsmall` | 'small' | 'medium' | 'large';
+        "shape"?: 'soft' | 'round' | 'rectangular';
+        /**
+          * Set to `"xsmall"` for the smallest size, `"small"` for a compact size, `"medium"` for the default height and width, `"large"` for a larger size, or `"xlarge"` for the largest dimensions.  Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
+         */
+        "size"?: `xsmall` | 'small' | 'medium' | 'large' | 'xlarge';
        /**
          * The theme determines the visual appearance of the component.
         */
@@ -414,9 +418,13 @@ export namespace Components {
         */
        "mode"?: "ios" | "md";
        /**
-          * Set to `"small"` for less height and width. Set to "medium" for slightly larger dimensions. Set to "large" for even greater height and width. Set to `"xlarge"` for the largest badge. Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
+          * Set to `"rectangular"` for non-rounded corners. Set to `"soft"` for slightly rounded corners. Set to `"round"` for fully rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
         */
-        "size"?: 'small' | 'medium' | 'large' | 'xlarge';
+        "shape"?: 'soft' | 'round | rectangular';
+        /**
+          * Set to `"xxsmall"` for the smallest badge. Set to "xsmall" for a very small badge. Set to `"small"` for a small badge. Set to "medium" for a medium badge. Set to "large" for a large badge. Set to `"xlarge"` for the largest badge.  Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
+         */
+        "size"?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
        /**
          * The theme determines the visual appearance of the component.
         */
@@ -1278,6 +1286,10 @@ export namespace Components {
          * Describes the scroll effect that will be applied to the header. Only applies when the theme is `"ios"`.  Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
         */
        "collapse"?: 'condense' | 'fade';
+        /**
+          * If `true`, the header will have a line at the bottom. TODO(ROU-10855): add support for this prop on ios/md themes
+         */
+        "divider": boolean;
        /**
          * The mode determines the platform behaviors of the component.
         */
@@ -1431,9 +1443,9 @@ export namespace Components {
         */
        "label"?: string;
        /**
-          * Where to place the label relative to the input. `"start"`: The label will appear to the left of the input in LTR and to the right in RTL. `"end"`: The label will appear to the right of the input in LTR and to the left in RTL. `"floating"`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input. `"stacked"`: The label will appear smaller and above the input regardless even when the input is blurred or has no value. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * Where to place the label relative to the input. `"start"`: The label will appear to the left of the input in LTR and to the right in RTL. `"end"`: The label will appear to the right of the input in LTR and to the left in RTL. `"floating"`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input. `"stacked"`: The label will appear smaller and above the input regardless even when the input is blurred or has no value. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").  Defaults to "stacked" for the ionic theme, or "start" for all other themes.  In the ionic theme, only the values "stacked" and "floating" are supported.
         */
-        "labelPlacement": 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
+        "labelPlacement"?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
        /**
          * The maximum value, which must not be less than its minimum (min attribute) value.
         */
@@ -1483,9 +1495,13 @@ 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 slightly rounded corners, `"round"` for an input with fully rounded corners, or `"rectangular"` for an input without rounded corners. Defaults to `"round"` for the ionic theme, and `undefined` for all other themes. Only applies when the fill is set to `"solid"` or `"outline"`.
         */
-        "shape"?: 'round';
+        "shape"?: 'soft' | 'round' | 'rectangular';
+        /**
+          * The size of the input. If "large", it will have an increased height. By default the size is medium. This property only applies to the `"ionic"` theme.
+         */
+        "size"?: 'medium' | 'large' | 'xlarge';
        /**
          * If `true`, the element will have its spelling and grammar checked.
         */
@@ -1645,6 +1661,10 @@ export namespace Components {
          * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
         */
        "rel": string | undefined;
+        /**
+          * Set to `"rectangular"` for non-rounded corners. Set to `"soft"` for slightly rounded corners. Set to `"round"` for fully rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
        /**
          * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
         */
@@ -1743,6 +1763,10 @@ export namespace Components {
          * The mode determines the platform behaviors of the component.
         */
        "mode"?: "ios" | "md";
+        /**
+          * Set to `"soft"` for slightly rounded corners, `"round"` for fully rounded corners, or `"rectangular"` for no rounded corners.  Defaults to `"round"` for the `ionic` theme when inset is `true` defaults to `"rectangular"` for the `ionic` theme when inset is `false`, undefined for all other themes.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
        /**
          * The theme determines the visual appearance of the component.
         */
@@ -5568,9 +5592,13 @@ declare namespace LocalJSX {
         */
        "mode"?: "ios" | "md";
        /**
-          * Set to `"xsmall"` for the smallest size, `"small"` for a compact size, `"medium"` for the default height and width, or to `"large"` for a larger size.  Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
+          * Set to `"soft"` for an avatar with slightly rounded corners, `"round"` for an avatar with fully rounded corners, or `"rectangular"` for an avatar without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
         */
-        "size"?: `xsmall` | 'small' | 'medium' | 'large';
+        "shape"?: 'soft' | 'round' | 'rectangular';
+        /**
+          * Set to `"xsmall"` for the smallest size, `"small"` for a compact size, `"medium"` for the default height and width, `"large"` for a larger size, or `"xlarge"` for the largest dimensions.  Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
+         */
+        "size"?: `xsmall` | 'small' | 'medium' | 'large' | 'xlarge';
        /**
          * The theme determines the visual appearance of the component.
         */
@@ -5650,9 +5678,13 @@ declare namespace LocalJSX {
         */
        "mode"?: "ios" | "md";
        /**
-          * Set to `"small"` for less height and width. Set to "medium" for slightly larger dimensions. Set to "large" for even greater height and width. Set to `"xlarge"` for the largest badge. Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
+          * Set to `"rectangular"` for non-rounded corners. Set to `"soft"` for slightly rounded corners. Set to `"round"` for fully rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
         */
-        "size"?: 'small' | 'medium' | 'large' | 'xlarge';
+        "shape"?: 'soft' | 'round | rectangular';
+        /**
+          * Set to `"xxsmall"` for the smallest badge. Set to "xsmall" for a very small badge. Set to `"small"` for a small badge. Set to "medium" for a medium badge. Set to "large" for a large badge. Set to `"xlarge"` for the largest badge.  Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
+         */
+        "size"?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
        /**
          * The theme determines the visual appearance of the component.
         */
@@ -6546,6 +6578,10 @@ declare namespace LocalJSX {
          * Describes the scroll effect that will be applied to the header. Only applies when the theme is `"ios"`.  Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
         */
        "collapse"?: 'condense' | 'fade';
+        /**
+          * If `true`, the header will have a line at the bottom. TODO(ROU-10855): add support for this prop on ios/md themes
+         */
+        "divider"?: boolean;
        /**
          * The mode determines the platform behaviors of the component.
         */
@@ -6707,7 +6743,7 @@ declare namespace LocalJSX {
         */
        "label"?: string;
        /**
-          * Where to place the label relative to the input. `"start"`: The label will appear to the left of the input in LTR and to the right in RTL. `"end"`: The label will appear to the right of the input in LTR and to the left in RTL. `"floating"`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input. `"stacked"`: The label will appear smaller and above the input regardless even when the input is blurred or has no value. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * Where to place the label relative to the input. `"start"`: The label will appear to the left of the input in LTR and to the right in RTL. `"end"`: The label will appear to the right of the input in LTR and to the left in RTL. `"floating"`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input. `"stacked"`: The label will appear smaller and above the input regardless even when the input is blurred or has no value. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").  Defaults to "stacked" for the ionic theme, or "start" for all other themes.  In the ionic theme, only the values "stacked" and "floating" are supported.
         */
        "labelPlacement"?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
        /**
@@ -6771,9 +6807,13 @@ 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 slightly rounded corners, `"round"` for an input with fully rounded corners, or `"rectangular"` for an input without rounded corners. Defaults to `"round"` for the ionic theme, and `undefined` for all other themes. Only applies when the fill is set to `"solid"` or `"outline"`.
         */
-        "shape"?: 'round';
+        "shape"?: 'soft' | 'round' | 'rectangular';
+        /**
+          * The size of the input. If "large", it will have an increased height. By default the size is medium. This property only applies to the `"ionic"` theme.
+         */
+        "size"?: 'medium' | 'large' | 'xlarge';
        /**
          * If `true`, the element will have its spelling and grammar checked.
         */
@@ -6933,6 +6973,10 @@ declare namespace LocalJSX {
          * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
         */
        "rel"?: string | undefined;
+        /**
+          * Set to `"rectangular"` for non-rounded corners. Set to `"soft"` for slightly rounded corners. Set to `"round"` for fully rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
        /**
          * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
         */
@@ -7021,6 +7065,10 @@ declare namespace LocalJSX {
          * The mode determines the platform behaviors of the component.
         */
        "mode"?: "ios" | "md";
+        /**
+          * Set to `"soft"` for slightly rounded corners, `"round"` for fully rounded corners, or `"rectangular"` for no rounded corners.  Defaults to `"round"` for the `ionic` theme when inset is `true` defaults to `"rectangular"` for the `ionic` theme when inset is `false`, undefined for all other themes.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
        /**
          * The theme determines the visual appearance of the component.
         */
--- a/core/src/components/accordion/accordion.tsx
+++ b/core/src/components/accordion/accordion.tsx
@@ -1,3 +1,4 @@
+import caretDownRegular from '@phosphor-icons/core/assets/regular/caret-down.svg';
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';
 import { addEventListener, getElementRoot, raf, removeEventListener, transitionEndAsync } from '@utils/helpers';
@@ -187,14 +188,34 @@ export class Accordion implements ComponentInterface {
    button.setAttribute('aria-expanded', `${expanded}`);
  };

+  get accordionToggleIcon() {
+    // Return the icon if it is explicitly set
+    if (this.toggleIcon != null) {
+      return this.toggleIcon;
+    }
+
+    // Determine the theme and map to default icons
+    const theme = getIonTheme(this);
+    const defaultIcons = {
+      ios: chevronDown,
+      ionic: caretDownRegular,
+      md: chevronDown,
+    };
+
+    // Get the default icon based on the theme, falling back to 'md' icon if necessary
+    const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+
+    // Return the configured accordion toggle icon or the default icon
+    return config.get('accordionToggleIcon', defaultIcon);
+  }
+
  private slotToggleIcon = () => {
    const ionItem = this.getSlottedHeaderIonItem();
    if (!ionItem) {
      return;
    }

-    const { toggleIconSlot } = this;
-    const accordionToggleIcon = this.toggleIcon ?? config.get('accordionToggleIcon', chevronDown);
+    const { accordionToggleIcon, toggleIconSlot } = this;

    /**
     * Check if there already is a toggle icon.
--- a/core/src/components/avatar/avatar.ionic.scss
+++ b/core/src/components/avatar/avatar.ionic.scss
@@ -16,13 +16,15 @@
  background: globals.$ionic-color-neutral-100;
  color: globals.$ionic-color-neutral-800;

-  font-weight: globals.$ionic-font-weight-regular;
+  font-weight: globals.$ionic-font-weight-medium;

-  line-height: globals.$ionic-line-height-600;
+  line-height: globals.$ionic-line-height-700;
 }

 :host(:not(.avatar-image)) {
-  border: globals.$ionic-border-size-025 solid globals.$ionic-color-neutral-800;
+  @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
+
+  border: globals.$ionic-border-size-025 globals.$ionic-border-style-solid globals.$ionic-color-neutral-800;
 }

 // Avatar Sizes
@@ -37,9 +39,7 @@

  font-size: globals.$ionic-font-size-300;

-  font-weight: globals.$ionic-font-weight-medium;
-
-  line-height: globals.$ionic-line-height-500;
+  line-height: globals.$ionic-line-height-400;
 }

 :host(.avatar-small) {
@@ -49,7 +49,9 @@
  width: globals.$ionic-scale-800;
  height: globals.$ionic-scale-800;

-  font-size: globals.$ionic-font-size-350;
+  font-size: globals.$ionic-font-size-400;
+
+  line-height: globals.$ionic-line-height-600;
 }

 :host(.avatar-medium) {
@@ -59,7 +61,7 @@
  width: globals.$ionic-scale-1000;
  height: globals.$ionic-scale-1000;

-  font-size: globals.$ionic-font-size-400;
+  font-size: globals.$ionic-font-size-450;
 }

 :host(.avatar-large) {
@@ -69,5 +71,67 @@
  width: globals.$ionic-scale-1200;
  height: globals.$ionic-scale-1200;

-  font-size: globals.$ionic-font-size-450;
+  font-size: globals.$ionic-font-size-500;
+}
+
+:host(.avatar-xlarge) {
+  --padding-end: #{globals.$ionic-space-300};
+  --padding-start: #{globals.$ionic-space-300};
+
+  width: globals.$ionic-scale-1400;
+  height: globals.$ionic-scale-1400;
+
+  font-size: globals.$ionic-font-size-550;
+}
+
+// Avatar Shapes
+// --------------------------------------------------
+
+:host(.avatar-xsmall.avatar-soft),
+:host(.avatar-small.avatar-soft) {
+  --border-radius: #{globals.$ionic-border-radius-100};
+}
+
+:host(.avatar-soft) {
+  --border-radius: #{globals.$ionic-border-radius-200};
+}
+
+:host(.avatar-round) {
+  --border-radius: #{globals.$ionic-border-radius-full};
+}
+
+:host(.avatar-rectangular) {
+  --border-radius: #{globals.$ionic-border-radius-0};
+}
+
+// Avatar Icon
+// --------------------------------------------------
+
+:host(.avatar-icon) {
+  @include padding(0);
+}
+
+:host(.avatar-xsmall) ::slotted(ion-icon) {
+  width: globals.$ionic-scale-400;
+  height: globals.$ionic-scale-400;
+}
+
+:host(.avatar-small) ::slotted(ion-icon) {
+  width: globals.$ionic-scale-500;
+  height: globals.$ionic-scale-500;
+}
+
+:host(.avatar-medium) ::slotted(ion-icon) {
+  width: globals.$ionic-scale-600;
+  height: globals.$ionic-scale-600;
+}
+
+:host(.avatar-large) ::slotted(ion-icon) {
+  width: globals.$ionic-scale-800;
+  height: globals.$ionic-scale-800;
+}
+
+:host(.avatar-xlarge) ::slotted(ion-icon) {
+  width: globals.$ionic-scale-1000;
+  height: globals.$ionic-scale-1000;
 }
--- a/core/src/components/avatar/avatar.tsx
+++ b/core/src/components/avatar/avatar.tsx
@@ -21,16 +21,30 @@ export class Avatar implements ComponentInterface {

  /**
   * Set to `"xsmall"` for the smallest size, `"small"` for a compact size, `"medium"`
-   * for the default height and width, or to `"large"` for a larger size.
+   * for the default height and width, `"large"` for a larger size, or `"xlarge"` for
+   * the largest dimensions.
   *
   * Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
   */
-  @Prop() size?: `xsmall` | 'small' | 'medium' | 'large';
+  @Prop() size?: `xsmall` | 'small' | 'medium' | 'large' | 'xlarge';
+
+  /**
+   * Set to `"soft"` for an avatar with slightly rounded corners,
+   * `"round"` for an avatar with fully rounded corners, or `"rectangular"`
+   * for an avatar without rounded corners.
+   *
+   * Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+   */
+  @Prop() shape?: 'soft' | 'round' | 'rectangular';

  get hasImage() {
    return !!this.el.querySelector('ion-img') || !!this.el.querySelector('img');
  }

+  get hasIcon() {
+    return !!this.el.querySelector('ion-icon');
+  }
+
  private getSize(): string | undefined {
    const theme = getIonTheme(this);
    const { size } = this;
@@ -47,16 +61,35 @@ export class Avatar implements ComponentInterface {
    return size;
  }

+  private getShape(): string | undefined {
+    const theme = getIonTheme(this);
+    const { shape } = this;
+
+    // TODO(ROU-10755): Remove theme check when shapes are defined for all themes.
+    if (theme !== 'ionic') {
+      return undefined;
+    }
+
+    if (shape === undefined) {
+      return 'round';
+    }
+
+    return shape;
+  }
+
  render() {
    const theme = getIonTheme(this);
    const size = this.getSize();
+    const shape = this.getShape();

    return (
      <Host
        class={{
          [theme]: true,
          [`avatar-${size}`]: size !== undefined,
+          [`avatar-${shape}`]: shape !== undefined,
          [`avatar-image`]: this.hasImage,
+          [`avatar-icon`]: this.hasIcon,
        }}
      >
        <slot></slot>
--- a/core/src/components/avatar/test/shape/avatar.e2e.ts
+++ b/core/src/components/avatar/test/shape/avatar.e2e.ts
@@ -0,0 +1,185 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior does not vary across directions.
+ */
+configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => {
+  test.describe(title('avatar: shape'), () => {
+    test.describe('round', () => {
+      test('should not have visual regressions when containing text', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-avatar shape="round">AB</ion-avatar>
+        `,
+          config
+        );
+
+        const avatar = page.locator('ion-avatar');
+
+        await expect(avatar).toHaveScreenshot(screenshot(`avatar-shape-round-text`));
+      });
+
+      test('should not have visual regressions when containing an icon', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-avatar shape="round">
+            <ion-icon name="person-outline"></ion-icon>
+          </ion-avatar>
+        `,
+          config
+        );
+
+        const avatar = page.locator('ion-avatar');
+
+        await expect(avatar).toHaveScreenshot(screenshot(`avatar-shape-round-icon`));
+      });
+
+      test('should not have visual regressions when containing an image', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-avatar shape="round">
+            <img src="/src/components/avatar/test/avatar.svg"/>
+          </ion-avatar>
+        `,
+          config
+        );
+
+        const avatar = page.locator('ion-avatar');
+
+        await expect(avatar).toHaveScreenshot(screenshot(`avatar-shape-round-image`));
+      });
+    });
+
+    test.describe('rectangular', () => {
+      test('should not have visual regressions when containing text', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-avatar shape="rectangular">AB</ion-avatar>
+        `,
+          config
+        );
+
+        const avatar = page.locator('ion-avatar');
+
+        await expect(avatar).toHaveScreenshot(screenshot(`avatar-shape-rectangular-text`));
+      });
+
+      test('should not have visual regressions when containing an icon', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-avatar shape="rectangular">
+            <ion-icon name="person-outline"></ion-icon>
+          </ion-avatar>
+        `,
+          config
+        );
+
+        const avatar = page.locator('ion-avatar');
+
+        await expect(avatar).toHaveScreenshot(screenshot(`avatar-shape-rectangular-icon`));
+      });
+
+      test('should not have visual regressions when containing an image', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-avatar shape="rectangular">
+            <img src="/src/components/avatar/test/avatar.svg"/>
+          </ion-avatar>
+        `,
+          config
+        );
+
+        const avatar = page.locator('ion-avatar');
+
+        await expect(avatar).toHaveScreenshot(screenshot(`avatar-shape-rectangular-image`));
+      });
+    });
+
+    test.describe('soft', () => {
+      test('should not have visual regressions when containing text', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            #container {
+              display: flex;
+              gap: 10px;
+            }
+          </style>
+
+          <div id="container">
+            <ion-avatar shape="soft" size="xsmall">AB</ion-avatar>
+            <ion-avatar shape="soft" size="small">AB</ion-avatar>
+            <ion-avatar shape="soft">AB</ion-avatar>
+          </div>
+        `,
+          config
+        );
+
+        const container = page.locator('#container');
+
+        await expect(container).toHaveScreenshot(screenshot(`avatar-shape-soft-text`));
+      });
+
+      test('should not have visual regressions when containing an icon', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            #container {
+              display: flex;
+              gap: 10px;
+            }
+          </style>
+
+          <div id="container">
+            <ion-avatar shape="soft" size="xsmall">
+              <ion-icon name="person-outline"></ion-icon>
+            </ion-avatar>
+            <ion-avatar shape="soft" size="small">
+              <ion-icon name="person-outline"></ion-icon>
+            </ion-avatar>
+            <ion-avatar shape="soft">
+              <ion-icon name="person-outline"></ion-icon>
+            </ion-avatar>
+          </div>
+        `,
+          config
+        );
+
+        const container = page.locator('#container');
+
+        await expect(container).toHaveScreenshot(screenshot(`avatar-shape-soft-icon`));
+      });
+
+      test('should not have visual regressions when containing an image', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            #container {
+              display: flex;
+              gap: 10px;
+            }
+          </style>
+
+          <div id="container">
+            <ion-avatar shape="soft" size="xsmall">
+              <img src="/src/components/avatar/test/avatar.svg"/>
+            </ion-avatar>
+            <ion-avatar shape="soft" size="small">
+              <img src="/src/components/avatar/test/avatar.svg"/>
+            </ion-avatar>
+            <ion-avatar shape="soft">
+              <img src="/src/components/avatar/test/avatar.svg"/>
+            </ion-avatar>
+          </div>
+        `,
+          config
+        );
+
+        const container = page.locator('#container');
+
+        await expect(container).toHaveScreenshot(screenshot(`avatar-shape-soft-image`));
+      });
+    });
+  });
+});
--- a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-image-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-image-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-image-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-image-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-image-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-image-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-text-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-text-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-icon-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-icon-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-image-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-image-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-image-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-image-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-image-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-image-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-text-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-text-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/avatar/test/shape/index.html
+++ b/core/src/components/avatar/test/shape/index.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Avatar - Shape</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>
+      .container {
+        display: flex;
+        gap: 10px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Avatar - Shape</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="ion-padding" id="content" no-bounce>
+        <h2>Default</h2>
+        <div class="container">
+          <ion-avatar>AB</ion-avatar>
+          <ion-avatar>
+            <ion-icon name="person-outline"></ion-icon>
+          </ion-avatar>
+          <ion-avatar>
+            <img src="/src/components/avatar/test/avatar.svg" />
+          </ion-avatar>
+        </div>
+
+        <h2>Soft</h2>
+        <div class="container">
+          <ion-avatar shape="soft" size="xsmall">AB</ion-avatar>
+          <ion-avatar shape="soft" size="small">AB</ion-avatar>
+          <ion-avatar shape="soft" size="medium">AB</ion-avatar>
+          <ion-avatar shape="soft" size="large">AB</ion-avatar>
+          <ion-avatar shape="soft" size="xlarge">AB</ion-avatar>
+        </div>
+
+        <h2>Round</h2>
+        <div class="container">
+          <ion-avatar shape="round" size="xsmall">AB</ion-avatar>
+          <ion-avatar shape="round" size="small">AB</ion-avatar>
+          <ion-avatar shape="round" size="medium">AB</ion-avatar>
+          <ion-avatar shape="round" size="large">AB</ion-avatar>
+          <ion-avatar shape="round" size="xlarge">AB</ion-avatar>
+        </div>
+
+        <h2>Rectangular</h2>
+        <div class="container">
+          <ion-avatar shape="rectangular" size="xsmall">AB</ion-avatar>
+          <ion-avatar shape="rectangular" size="small">AB</ion-avatar>
+          <ion-avatar shape="rectangular" size="medium">AB</ion-avatar>
+          <ion-avatar shape="rectangular" size="large">AB</ion-avatar>
+          <ion-avatar shape="rectangular" size="xlarge">AB</ion-avatar>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
--- a/core/src/components/avatar/test/size/avatar.e2e.ts
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts
@@ -185,5 +185,50 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
        await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-large-image`));
      });
    });
+
+    test.describe('xlarge', () => {
+      test('should not have visual regressions when containing text', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-avatar size="xlarge">AB</ion-avatar>
+        `,
+          config
+        );
+
+        const avatar = page.locator('ion-avatar');
+
+        await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-xlarge-text`));
+      });
+
+      test('should not have visual regressions when containing an icon', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-avatar size="xlarge">
+            <ion-icon name="person-outline"></ion-icon>
+          </ion-avatar>
+        `,
+          config
+        );
+
+        const avatar = page.locator('ion-avatar');
+
+        await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-xlarge-icon`));
+      });
+
+      test('should not have visual regressions when containing an image', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-avatar size="xlarge">
+            <img src="/src/components/avatar/test/avatar.svg"/>
+          </ion-avatar>
+        `,
+          config
+        );
+
+        const avatar = page.locator('ion-avatar');
+
+        await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-xlarge-image`));
+      });
+    });
  });
 });
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-icon-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-icon-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-image-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-image-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-image-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-image-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-image-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-image-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-text-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-text-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-icon-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-icon-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-image-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-image-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-image-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-image-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-image-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-image-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-text-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-text-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-icon-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-icon-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-image-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-image-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-image-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-image-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-image-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-image-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-text-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-text-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-icon-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-icon-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-image-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-image-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-image-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-image-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-image-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-image-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-text-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-text-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-icon-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-icon-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-image-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-image-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-image-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-image-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-image-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-image-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-text-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-text-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/avatar/test/size/index.html
+++ b/core/src/components/avatar/test/size/index.html
@@ -47,6 +47,7 @@
          <ion-avatar size="small">AB</ion-avatar>
          <ion-avatar size="medium">AB</ion-avatar>
          <ion-avatar size="large">AB</ion-avatar>
+          <ion-avatar size="xlarge">AB</ion-avatar>
        </div>

        <h2>Icons</h2>
@@ -63,6 +64,9 @@
          <ion-avatar size="large">
            <ion-icon name="person-outline"></ion-icon>
          </ion-avatar>
+          <ion-avatar size="xlarge">
+            <ion-icon name="person-outline"></ion-icon>
+          </ion-avatar>
        </div>

        <h2>Images</h2>
@@ -79,6 +83,9 @@
          <ion-avatar size="large">
            <img src="/src/components/avatar/test/avatar.svg" />
          </ion-avatar>
+          <ion-avatar size="xlarge">
+            <img src="/src/components/avatar/test/avatar.svg" />
+          </ion-avatar>
        </div>
      </ion-content>
    </ion-app>
--- a/core/src/components/back-button/back-button.tsx
+++ b/core/src/components/back-button/back-button.tsx
@@ -1,3 +1,4 @@
+import caretLeftRegular from '@phosphor-icons/core/assets/regular/caret-left.svg';
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, h } from '@stencil/core';
 import type { ButtonInterface } from '@utils/element-interface';
@@ -80,19 +81,24 @@ export class BackButton implements ComponentInterface, ButtonInterface {
  }

  get backButtonIcon() {
-    const icon = this.icon;
-    if (icon != null) {
-      // Icon is set on the component or by the config.
-      return icon;
+    // Return the icon if it is explicitly set
+    if (this.icon != null) {
+      return this.icon;
    }

-    if (getIonTheme(this) === 'ios') {
-      // default ios back button icon
-      return config.get('backButtonIcon', chevronBack);
-    }
+    // Determine the theme and map to default icons
+    const theme = getIonTheme(this);
+    const defaultIcons = {
+      ios: chevronBack,
+      ionic: caretLeftRegular,
+      md: arrowBackSharp,
+    };

-    // default md back button icon
-    return config.get('backButtonIcon', arrowBackSharp);
+    // Get the default icon based on the theme, falling back to 'md' icon if necessary
+    const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+
+    // Return the configured back button icon or the default icon
+    return config.get('backButtonIcon', defaultIcon);
  }

  get backButtonText() {
--- a/core/src/components/badge/badge.ionic.scss
+++ b/core/src/components/badge/badge.ionic.scss
@@ -18,9 +18,53 @@
  font-weight: globals.$ionic-font-weight-medium;
 }

+// Badge Shapes
+// --------------------------------------------------
+
+/* Soft Badge */
+:host(.badge-soft) {
+  @include border-radius(globals.$ionic-border-radius-200);
+}
+
+:host(.badge-xxsmall.badge-soft),
+:host(.badge-xsmall.badge-soft),
+:host(.badge-small.badge-soft) {
+  @include border-radius(globals.$ionic-border-radius-100);
+}
+
+/* Round Badge */
+:host(.badge-round) {
+  @include border-radius(globals.$ionic-border-radius-full);
+}
+
+/* Rectangular Badge */
+:host(.badge-rectangular) {
+  @include border-radius(globals.$ionic-border-radius-0);
+}
+
 // Badge Sizes
 // --------------------------------------------------

+/* 2-Extra Small Badge */
+:host(.badge-xxsmall) {
+  min-width: globals.$ionic-scale-400;
+  height: globals.$ionic-scale-400;
+
+  font-size: globals.$ionic-font-size-300;
+
+  line-height: globals.$ionic-line-height-400;
+}
+
+/* Extra Small Badge */
+:host(.badge-xsmall) {
+  min-width: globals.$ionic-scale-600;
+  height: globals.$ionic-scale-600;
+
+  font-size: globals.$ionic-font-size-350;
+
+  line-height: globals.$ionic-line-height-600;
+}
+
 /* Small Badge */
 :host(.badge-small) {
  min-width: globals.$ionic-scale-800;
--- a/core/src/components/badge/badge.tsx
+++ b/core/src/components/badge/badge.tsx
@@ -27,10 +27,41 @@ export class Badge implements ComponentInterface {
  @Prop({ reflect: true }) color?: Color;

  /**
-   * Set to `"small"` for less height and width. Set to "medium" for slightly larger dimensions. Set to "large" for even greater height and width. Set to `"xlarge"` for the largest badge.
+   * Set to `"rectangular"` for non-rounded corners.
+   * Set to `"soft"` for slightly rounded corners.
+   * Set to `"round"` for fully rounded corners.
+   *
+   * Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+   */
+  @Prop() shape?: 'soft' | 'round | rectangular';
+
+  /**
+   * Set to `"xxsmall"` for the smallest badge.
+   * Set to "xsmall" for a very small badge.
+   * Set to `"small"` for a small badge.
+   * Set to "medium" for a medium badge.
+   * Set to "large" for a large badge.
+   * Set to `"xlarge"` for the largest badge.
+   *
   * Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
   */
-  @Prop() size?: 'small' | 'medium' | 'large' | 'xlarge';
+  @Prop() size?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+
+  private getShape(): string | undefined {
+    const theme = getIonTheme(this);
+    const { shape } = this;
+
+    // TODO(ROU-10777): Remove theme check when shapes are defined for all themes.
+    if (theme !== 'ionic') {
+      return undefined;
+    }
+
+    if (shape === undefined) {
+      return 'round';
+    }
+
+    return shape;
+  }

  private getSize(): string | undefined {
    const theme = getIonTheme(this);
@@ -49,12 +80,14 @@ export class Badge implements ComponentInterface {
  }

  render() {
+    const shape = this.getShape();
    const size = this.getSize();
    const theme = getIonTheme(this);
    return (
      <Host
        class={createColorClasses(this.color, {
          [theme]: true,
+          [`badge-${shape}`]: shape !== undefined,
          [`badge-${size}`]: size !== undefined,
        })}
      >
--- a/core/src/components/badge/test/shape/badge.e2e.ts
+++ b/core/src/components/badge/test/shape/badge.e2e.ts
@@ -0,0 +1,129 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior does not vary across directions.
+ */
+configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => {
+  test.describe(title('badge: shape'), () => {
+    test('should render soft badges for smaller sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <div id="container">
+          <ion-badge shape="soft" size="xxsmall">1</ion-badge>
+          <ion-badge shape="soft" size="xsmall">1</ion-badge>
+          <ion-badge shape="soft" size="small">1</ion-badge>
+        </div>
+      `,
+        config
+      );
+
+      const container = page.locator('#container');
+
+      await expect(container).toHaveScreenshot(screenshot(`badge-shape-soft-smaller-sizes`));
+    });
+
+    test('should render soft badges with long text for smaller sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <div id="container">
+          <ion-badge shape="soft" size="xxsmall">99+</ion-badge>
+          <ion-badge shape="soft" size="xsmall">99+</ion-badge>
+          <ion-badge shape="soft" size="small">99+</ion-badge>
+        </div>
+      `,
+        config
+      );
+
+      const container = page.locator('#container');
+
+      await expect(container).toHaveScreenshot(screenshot(`badge-shape-soft-smaller-sizes-long-text`));
+    });
+
+    test('should render soft badges for larger sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <div id="container">
+          <ion-badge shape="soft" size="medium">1</ion-badge>
+          <ion-badge shape="soft" size="large">1</ion-badge>
+          <ion-badge shape="soft" size="xlarge">1</ion-badge>
+        </div>
+      `,
+        config
+      );
+
+      const container = page.locator('#container');
+
+      await expect(container).toHaveScreenshot(screenshot(`badge-shape-soft-larger-sizes`));
+    });
+
+    test('should render soft badges with long text for larger sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <div id="container">
+          <ion-badge shape="soft" size="medium">99+</ion-badge>
+          <ion-badge shape="soft" size="large">99+</ion-badge>
+          <ion-badge shape="soft" size="xlarge">99+</ion-badge>
+        </div>
+      `,
+        config
+      );
+
+      const container = page.locator('#container');
+
+      await expect(container).toHaveScreenshot(screenshot(`badge-shape-soft-larger-sizes-long-text`));
+    });
+
+    test('should render round badges', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-badge shape="round">1</ion-badge>
+      `,
+        config
+      );
+
+      const badge = page.locator('ion-badge');
+
+      await expect(badge).toHaveScreenshot(screenshot(`badge-shape-round`));
+    });
+
+    test('should render round badges with long text', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-badge shape="round">99+</ion-badge>
+      `,
+        config
+      );
+
+      const badge = page.locator('ion-badge');
+
+      await expect(badge).toHaveScreenshot(screenshot(`badge-shape-round-long-text`));
+    });
+
+    test('should render rectangular badges', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-badge shape="rectangular">1</ion-badge>
+      `,
+        config
+      );
+
+      const badge = page.locator('ion-badge');
+
+      await expect(badge).toHaveScreenshot(screenshot(`badge-shape-rectangular`));
+    });
+
+    test('should render rectangular badges with long text', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-badge shape="rectangular">99+</ion-badge>
+      `,
+        config
+      );
+
+      const badge = page.locator('ion-badge');
+
+      await expect(badge).toHaveScreenshot(screenshot(`badge-shape-rectangular-long-text`));
+    });
+  });
+});
--- a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/Show More
+++ b/Show More