chore: use proper file

Issue number: resolves #25184

---------

Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>

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

@@ -6,11 +6,19 @@ runs:
     - uses: actions/setup-node@v4
       with:
         node-version: 18.x
-
+    - uses: ./.github/workflows/actions/download-archive
+      with:
+        name: ionic-core
+        path: ./core
+        filename: CoreBuild.zip
     - name: Install Angular Server Dependencies
       run: npm ci
       shell: bash
       working-directory: ./packages/angular-server
+    - name: Sync
+      run: npm run sync
+      shell: bash
+      working-directory: ./packages/angular-server
     - name: Build
       run: npm run build.prod
       shell: bash

.github/workflows/assign-issues.yml

@@ -13,6 +13,6 @@ jobs:
       - name: 'Auto-assign issue'
         uses: pozil/auto-assign-issue@c5bca5027e680b9e8411b826d16947afd8c76b32 # v2.0.0
         with:
-          assignees: brandyscarney, thetaPC, joselrio, rugoncalves, BenOsodrac, JoaoFerreira-FrontEnd, OS-giulianasilva
+          assignees: brandyscarney, thetaPC, joselrio, rugoncalves, BenOsodrac, JoaoFerreira-FrontEnd, OS-giulianasilva, tanner-reits
           numOfAssignee: 1
           allowSelfAssign: false

CHANGELOG.md

@@ -3,6 +3,68 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.2.7](https://github.com/ionic-team/ionic-framework/compare/v8.2.5...v8.2.7) (2024-08-13)
+
+
+### Bug Fixes
+
+* **alert:** do not overwrite id set in htmlAttributes ([#29708](https://github.com/ionic-team/ionic-framework/issues/29708)) ([1295ced](https://github.com/ionic-team/ionic-framework/commit/1295cedae9ffbcc40389c19499e58e7e21fb424e)), closes [#29704](https://github.com/ionic-team/ionic-framework/issues/29704)
+* **angular:** add focusTrap prop to modal and popover ([#29729](https://github.com/ionic-team/ionic-framework/issues/29729)) ([05913c3](https://github.com/ionic-team/ionic-framework/commit/05913c3cc3f2e8cb91f9a0944cd55e78392b0ba3)), closes [#29728](https://github.com/ionic-team/ionic-framework/issues/29728)
+* **angular:** remove the tabindex set by routerLink from Ionic components ([#29744](https://github.com/ionic-team/ionic-framework/issues/29744)) ([20073e1](https://github.com/ionic-team/ionic-framework/commit/20073e10c934d3704734195c72f4281c9b9658e3)), closes [#20632](https://github.com/ionic-team/ionic-framework/issues/20632)
+* **content:** allow custom roles and aria attributes to be set on content ([#29753](https://github.com/ionic-team/ionic-framework/issues/29753)) ([7b16397](https://github.com/ionic-team/ionic-framework/commit/7b16397714be773fda28658ab4009755f545b735))
+* **item:** router-link remains clickable with item cover ([#29743](https://github.com/ionic-team/ionic-framework/issues/29743)) ([a9f278a](https://github.com/ionic-team/ionic-framework/commit/a9f278ad67758a19e0e12ce7ed6d13eb573b0765))
+* **overlays:** do not overwrite id set in htmlAttributes ([#29722](https://github.com/ionic-team/ionic-framework/issues/29722)) ([92ce563](https://github.com/ionic-team/ionic-framework/commit/92ce563c402e557b08a622bd20f78459782312e2)), closes [#29712](https://github.com/ionic-team/ionic-framework/issues/29712)
+* **react:** add onPointerDown, onTouchEnd, add onTouchMove ([#29736](https://github.com/ionic-team/ionic-framework/issues/29736)) ([bfee3cd](https://github.com/ionic-team/ionic-framework/commit/bfee3cd064a9b495489c2679ccfb762e622dbf09)), closes [#29174](https://github.com/ionic-team/ionic-framework/issues/29174)
+* **vue:** pass router-link value to href to properly render clickable elements ([#29745](https://github.com/ionic-team/ionic-framework/issues/29745)) ([ab4f279](https://github.com/ionic-team/ionic-framework/commit/ab4f2791c1968adbb1d858c5f009fa251bb9101b))
+
+
+
+
+
+## [8.2.6](https://github.com/ionic-team/ionic-framework/compare/v8.2.5...v8.2.6) (2024-07-24)
+
+
+### Bug Fixes
+
+* **alert:** do not overwrite id set in htmlAttributes ([#29708](https://github.com/ionic-team/ionic-framework/issues/29708)) ([1295ced](https://github.com/ionic-team/ionic-framework/commit/1295cedae9ffbcc40389c19499e58e7e21fb424e)), closes [#29704](https://github.com/ionic-team/ionic-framework/issues/29704)
+* **angular:** add focusTrap prop to modal and popover ([#29729](https://github.com/ionic-team/ionic-framework/issues/29729)) ([05913c3](https://github.com/ionic-team/ionic-framework/commit/05913c3cc3f2e8cb91f9a0944cd55e78392b0ba3)), closes [#29728](https://github.com/ionic-team/ionic-framework/issues/29728)
+* **overlays:** do not overwrite id set in htmlAttributes ([#29722](https://github.com/ionic-team/ionic-framework/issues/29722)) ([92ce563](https://github.com/ionic-team/ionic-framework/commit/92ce563c402e557b08a622bd20f78459782312e2)), closes [#29712](https://github.com/ionic-team/ionic-framework/issues/29712)
+
+
+
+
+
+## [8.2.5](https://github.com/ionic-team/ionic-framework/compare/v8.2.4...v8.2.5) (2024-07-03)
+
+
+### Bug Fixes
+
+* **dependencies:** use latest @stencil/core to remove DOMException errors ([#29685](https://github.com/ionic-team/ionic-framework/issues/29685)) ([d70ea4](https://github.com/ionic-team/ionic/commit/d70ea400a4713bd091af1393e196e10844a190b6)), closes [#29681](https://github.com/ionic-team/ionic/issues/29681)
+* **vue:** add optional IonicConfig type parameter to IonicVue plugin ([#29637](https://github.com/ionic-team/ionic-framework/issues/29637)) ([90893f4](https://github.com/ionic-team/ionic-framework/commit/90893f46c930dbccd4251fa2f56bdde30b669158)), closes [#29659](https://github.com/ionic-team/ionic-framework/issues/29659)
+
+
+
+
+
+## [8.2.4](https://github.com/ionic-team/ionic-framework/compare/v8.2.2...v8.2.4) (2024-06-28)
+
+
+### Bug Fixes
+
+* **angular:** popover arrow navigation with disabled items ([#29662](https://github.com/ionic-team/ionic-framework/issues/29662)) ([ceb41f3](https://github.com/ionic-team/ionic-framework/commit/ceb41f31f382ff1bcf81de2b11680699d33d5077)), closes [#29640](https://github.com/ionic-team/ionic-framework/issues/29640)
+
+
+
+
+
+## 8.2.3
+
+This version should be skipped. Install 8.2.4 instead.
+
+
+
+
+
 ## [8.2.2](https://github.com/ionic-team/ionic-framework/compare/v8.2.1...v8.2.2) (2024-06-12)
 
 

core/CHANGELOG.md

@@ -3,6 +3,60 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.2.7](https://github.com/ionic-team/ionic-framework/compare/v8.2.5...v8.2.7) (2024-08-13)
+
+
+### Bug Fixes
+
+* **alert:** do not overwrite id set in htmlAttributes ([#29708](https://github.com/ionic-team/ionic-framework/issues/29708)) ([1295ced](https://github.com/ionic-team/ionic-framework/commit/1295cedae9ffbcc40389c19499e58e7e21fb424e)), closes [#29704](https://github.com/ionic-team/ionic-framework/issues/29704)
+* **content:** allow custom roles and aria attributes to be set on content ([#29753](https://github.com/ionic-team/ionic-framework/issues/29753)) ([7b16397](https://github.com/ionic-team/ionic-framework/commit/7b16397714be773fda28658ab4009755f545b735))
+* **item:** router-link remains clickable with item cover ([#29743](https://github.com/ionic-team/ionic-framework/issues/29743)) ([a9f278a](https://github.com/ionic-team/ionic-framework/commit/a9f278ad67758a19e0e12ce7ed6d13eb573b0765))
+* **overlays:** do not overwrite id set in htmlAttributes ([#29722](https://github.com/ionic-team/ionic-framework/issues/29722)) ([92ce563](https://github.com/ionic-team/ionic-framework/commit/92ce563c402e557b08a622bd20f78459782312e2)), closes [#29712](https://github.com/ionic-team/ionic-framework/issues/29712)
+* **vue:** pass router-link value to href to properly render clickable elements ([#29745](https://github.com/ionic-team/ionic-framework/issues/29745)) ([ab4f279](https://github.com/ionic-team/ionic-framework/commit/ab4f2791c1968adbb1d858c5f009fa251bb9101b))
+
+
+
+
+
+## [8.2.6](https://github.com/ionic-team/ionic-framework/compare/v8.2.5...v8.2.6) (2024-07-24)
+
+
+### Bug Fixes
+
+* **alert:** do not overwrite id set in htmlAttributes ([#29708](https://github.com/ionic-team/ionic-framework/issues/29708)) ([1295ced](https://github.com/ionic-team/ionic-framework/commit/1295cedae9ffbcc40389c19499e58e7e21fb424e)), closes [#29704](https://github.com/ionic-team/ionic-framework/issues/29704)
+* **overlays:** do not overwrite id set in htmlAttributes ([#29722](https://github.com/ionic-team/ionic-framework/issues/29722)) ([92ce563](https://github.com/ionic-team/ionic-framework/commit/92ce563c402e557b08a622bd20f78459782312e2)), closes [#29712](https://github.com/ionic-team/ionic-framework/issues/29712)
+
+
+
+
+
+## [8.2.5](https://github.com/ionic-team/ionic-framework/compare/v8.2.4...v8.2.5) (2024-07-03)
+
+**Note:** Version bump only for package @ionic/core
+
+
+
+
+
+## [8.2.4](https://github.com/ionic-team/ionic-framework/compare/v8.2.2...v8.2.4) (2024-06-28)
+
+
+### Bug Fixes
+
+* **angular:** popover arrow navigation with disabled items ([#29662](https://github.com/ionic-team/ionic-framework/issues/29662)) ([ceb41f3](https://github.com/ionic-team/ionic-framework/commit/ceb41f31f382ff1bcf81de2b11680699d33d5077)), closes [#29640](https://github.com/ionic-team/ionic-framework/issues/29640)
+
+
+
+
+
+## 8.2.3
+
+This version should be skipped. Install 8.2.4 instead.
+
+
+
+
+
 ## [8.2.2](https://github.com/ionic-team/ionic-framework/compare/v8.2.1...v8.2.2) (2024-06-12)
 
 

core/Dockerfile

@@ -1,5 +1,5 @@
 # Get Playwright
-FROM mcr.microsoft.com/playwright:v1.44.1
+FROM mcr.microsoft.com/playwright:v1.46.0
 
 # Set the working directory
 WORKDIR /ionic

core/api.txt

@@ -185,7 +185,7 @@ 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,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
-ion-avatar,prop,size,"large" | "medium" | "small" | "xlarge" | "xsmall" | undefined,undefined,false,false
+ion-avatar,prop,size,"large" | "medium" | "small" | "xlarge" | "xsmall" | "xxsmall" | 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
@@ -398,50 +398,73 @@ 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
@@ -465,10 +488,13 @@ ion-card,prop,shape,"rectangular" | "round" | "soft" | undefined,'round',false,t
 ion-card,prop,target,string | undefined,undefined,false,false
 ion-card,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-card,prop,type,"button" | "reset" | "submit",'button',false,false
+ion-card,css-prop,--background,ionic
 ion-card,css-prop,--background,ios
 ion-card,css-prop,--background,md
+ion-card,css-prop,--border-radius,ionic
 ion-card,css-prop,--border-radius,ios
 ion-card,css-prop,--border-radius,md
+ion-card,css-prop,--color,ionic
 ion-card,css-prop,--color,ios
 ion-card,css-prop,--color,md
 ion-card,part,native
@@ -665,19 +691,16 @@ ion-datetime,event,ionFocus,void,true
 ion-datetime,css-prop,--background,ionic
 ion-datetime,css-prop,--background,ios
 ion-datetime,css-prop,--background,md
-ion-datetime,css-prop,--background-rgb,ionic
 ion-datetime,css-prop,--background-rgb,ios
 ion-datetime,css-prop,--background-rgb,md
-ion-datetime,css-prop,--title-color,ionic
+ion-datetime,css-prop,--focus-ring-color,ionic
+ion-datetime,css-prop,--focus-ring-width,ionic
 ion-datetime,css-prop,--title-color,ios
 ion-datetime,css-prop,--title-color,md
-ion-datetime,css-prop,--wheel-fade-background-rgb,ionic
 ion-datetime,css-prop,--wheel-fade-background-rgb,ios
 ion-datetime,css-prop,--wheel-fade-background-rgb,md
-ion-datetime,css-prop,--wheel-highlight-background,ionic
 ion-datetime,css-prop,--wheel-highlight-background,ios
 ion-datetime,css-prop,--wheel-highlight-background,md
-ion-datetime,css-prop,--wheel-highlight-border-radius,ionic
 ion-datetime,css-prop,--wheel-highlight-border-radius,ios
 ion-datetime,css-prop,--wheel-highlight-border-radius,md
 ion-datetime,part,calendar-day
@@ -972,7 +995,7 @@ ion-item,prop,button,boolean,false,false,false
 ion-item,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-item,prop,detail,boolean | undefined,undefined,false,false
 ion-item,prop,detailIcon,string | undefined,undefined,false,false
-ion-item,prop,disabled,boolean,false,false,false
+ion-item,prop,disabled,boolean,false,false,true
 ion-item,prop,download,string | undefined,undefined,false,false
 ion-item,prop,href,string | undefined,undefined,false,false
 ion-item,prop,lines,"full" | "inset" | "none" | undefined,undefined,false,false
@@ -989,19 +1012,25 @@ 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
@@ -1010,30 +1039,43 @@ 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
@@ -1051,8 +1093,10 @@ 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
@@ -2097,8 +2141,11 @@ ion-spinner,prop,duration,number | undefined,undefined,false,false
 ion-spinner,prop,mode,"ios" | "md",undefined,false,false
 ion-spinner,prop,name,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-sharp" | "lines-sharp-small" | "lines-small" | undefined,undefined,false,false
 ion-spinner,prop,paused,boolean,false,false,false
+ion-spinner,prop,size,"large" | "medium" | "small" | "xlarge" | "xsmall" | undefined,undefined,false,false
 ion-spinner,prop,theme,"ios" | "md" | "ionic",undefined,false,false
-ion-spinner,css-prop,--color
+ion-spinner,css-prop,--color,ionic
+ion-spinner,css-prop,--color,ios
+ion-spinner,css-prop,--color,md
 
 ion-split-pane,shadow
 ion-split-pane,prop,contentId,string | undefined,undefined,false,true
@@ -2229,7 +2276,8 @@ ion-textarea,prop,placeholder,string | undefined,undefined,false,false
 ion-textarea,prop,readonly,boolean,false,false,false
 ion-textarea,prop,required,boolean,false,false,false
 ion-textarea,prop,rows,number | undefined,undefined,false,false
-ion-textarea,prop,shape,"round" | undefined,undefined,false,false
+ion-textarea,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
+ion-textarea,prop,size,"large" | "medium" | "small" | undefined,'medium',false,false
 ion-textarea,prop,spellcheck,boolean,false,false,false
 ion-textarea,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-textarea,prop,value,null | string | undefined,'',false,false

core/custom-rules/await-playwright-promise-assertion.js

@@ -67,4 +67,5 @@ const ASYNC_PLAYWRIGHT_ASSERTS = [
   'toHaveTitle',
   'toHaveURL',
   'toBeOK',
+  'click'
 ];

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.2.2",
+  "version": "8.2.7",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -32,12 +32,12 @@
   ],
   "dependencies": {
     "@phosphor-icons/core": "^2.1.1",
-    "@stencil/core": "^4.17.2",
+    "@stencil/core": "^4.19.2",
     "ionicons": "^7.2.2",
     "tslib": "^2.1.0"
   },
   "devDependencies": {
-    "@axe-core/playwright": "^4.8.5",
+    "@axe-core/playwright": "^4.9.1",
     "@capacitor/core": "^6.0.0",
     "@capacitor/haptics": "^6.0.0",
     "@capacitor/keyboard": "^6.0.0",
@@ -45,15 +45,15 @@
     "@clack/prompts": "^0.7.0",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
-    "@playwright/test": "^1.39.0",
+    "@playwright/test": "^1.46.0",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/angular-output-target": "^0.8.4",
-    "@stencil/react-output-target": "^0.5.3",
+    "@stencil/react-output-target": "^0.6.0",
     "@stencil/sass": "^3.0.9",
-    "@stencil/vue-output-target": "^0.8.7",
+    "@stencil/vue-output-target": "^0.8.9",
     "@types/jest": "^29.5.6",
-    "@types/node": "^14.6.0",
+    "@types/node": "^18.19.47",
     "@typescript-eslint/eslint-plugin": "^6.7.2",
     "@typescript-eslint/parser": "^6.7.2",
     "chalk": "^5.3.0",

core/scripts/testing/scripts.js

@@ -28,6 +28,27 @@
     document.head.appendChild(linkTag);
   }
 
+  /**
+  * The `ionic` theme uses a different stylesheet than the `iOS` and `md` themes.
+  * This is to ensure that the `ionic` theme is loaded when the `ionic:theme=ionic`
+  * or when the HTML tag has the `theme="ionic"` attribute. This is useful for
+  * the snapshot tests, where the `ionic` theme is not loaded by default.
+  */
+  const themeQuery = window.location.search.match(/ionic:theme=([a-z]+)/);
+  const themeAttr = document.documentElement.getAttribute('theme');
+
+  if ((themeQuery && themeQuery[1] === 'ionic') || themeAttr === 'ionic') {
+    const ionicThemeLinkTag = document.querySelector('link[href*="css/ionic/bundle.ionic.css"]');
+
+    if (!ionicThemeLinkTag) {
+      const linkTag = document.createElement('link');
+      linkTag.setAttribute('rel', 'stylesheet');
+      linkTag.setAttribute('type', 'text/css');
+      linkTag.setAttribute('href', '/css/ionic/bundle.ionic.css');
+      document.head.appendChild(linkTag);
+    }
+  }
+
   window.Ionic = window.Ionic || {};
   window.Ionic.config = window.Ionic.config || {};
 

core/src/components.d.ts

@@ -340,9 +340,9 @@ export namespace Components {
          */
         "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.
+          * Set to `"xxsmall"` for the smallest size. Set to `"xsmall"` for a very small size. Set to `"small"` for a compact size. Set to `"medium"` for the default height and width. Set to `"large"` for a larger size. Set to `"xlarge"` for the largest dimensions.  Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
          */
-        "size"?: `xsmall` | 'small' | 'medium' | 'large' | 'xlarge';
+        "size"?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -3346,6 +3346,10 @@ export namespace Components {
           * If `true`, the spinner's animation will be paused.
          */
         "paused": boolean;
+        /**
+          * Set to `"xsmall"` for the smallest size. Set to `"small"` for a smaller size. Set to `"medium"` for a medium size. Set to `"large"` for a large size. Set to `"xlarge"` for the largest size.  Defaults to `"xsmall"` for the `ionic` theme, undefined for all other themes.
+         */
+        "size"?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -3613,9 +3617,13 @@ export namespace Components {
          */
         "setFocus": () => Promise<void>;
         /**
-          * The shape of the textarea. If "round" it will have an increased border radius.
+          * Set to `"soft"` for a textarea with slightly rounded corners, `"round"` for a textarea with fully rounded corners, or `"rectangular"` for a textarea without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
          */
-        "shape"?: 'round';
+        "shape"?: 'soft' | 'round' | 'rectangular';
+        /**
+          * The size of the textarea. If "large" it will increase the height of the textarea, while "small" and "medium" provide progressively smaller heights. The default size is "medium". This property only applies to the `"ionic"` theme.
+         */
+        "size"?: 'small' | 'medium' | 'large';
         /**
           * If `true`, the element will have its spelling and grammar checked.
          */
@@ -5596,9 +5604,9 @@ declare namespace LocalJSX {
          */
         "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.
+          * Set to `"xxsmall"` for the smallest size. Set to `"xsmall"` for a very small size. Set to `"small"` for a compact size. Set to `"medium"` for the default height and width. Set to `"large"` for a larger size. Set to `"xlarge"` for the largest dimensions.  Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
          */
-        "size"?: `xsmall` | 'small' | 'medium' | 'large' | 'xlarge';
+        "size"?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -8689,6 +8697,10 @@ declare namespace LocalJSX {
           * If `true`, the spinner's animation will be paused.
          */
         "paused"?: boolean;
+        /**
+          * Set to `"xsmall"` for the smallest size. Set to `"small"` for a smaller size. Set to `"medium"` for a medium size. Set to `"large"` for a large size. Set to `"xlarge"` for the largest size.  Defaults to `"xsmall"` for the `ionic` theme, undefined for all other themes.
+         */
+        "size"?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -8965,9 +8977,13 @@ declare namespace LocalJSX {
          */
         "rows"?: number;
         /**
-          * The shape of the textarea. If "round" it will have an increased border radius.
+          * Set to `"soft"` for a textarea with slightly rounded corners, `"round"` for a textarea with fully rounded corners, or `"rectangular"` for a textarea without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
          */
-        "shape"?: 'round';
+        "shape"?: 'soft' | 'round' | 'rectangular';
+        /**
+          * The size of the textarea. If "large" it will increase the height of the textarea, while "small" and "medium" provide progressively smaller heights. The default size is "medium". This property only applies to the `"ionic"` theme.
+         */
+        "size"?: 'small' | 'medium' | 'large';
         /**
           * If `true`, the element will have its spelling and grammar checked.
          */

core/src/components/accordion/test/disabled/accordion.e2e.ts

@@ -48,7 +48,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
 
       await expect(accordion).toHaveClass(/accordion-collapsed/);
 
-      accordion.click();
+      await accordion.click();
       await page.waitForChanges();
 
       await expect(accordion).toHaveClass(/accordion-collapsed/);
@@ -71,7 +71,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
 
       await expect(accordion).toHaveClass(/accordion-collapsed/);
 
-      accordion.click();
+      await accordion.click();
       await page.waitForChanges();
 
       await expect(accordion).toHaveClass(/accordion-collapsed/);

core/src/components/accordion/test/readonly/accordion.e2e.ts

@@ -48,7 +48,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
 
       await expect(accordion).toHaveClass(/accordion-collapsed/);
 
-      accordion.click();
+      await accordion.click();
       await page.waitForChanges();
 
       await expect(accordion).toHaveClass(/accordion-collapsed/);
@@ -71,7 +71,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
 
       await expect(accordion).toHaveClass(/accordion-collapsed/);
 
-      accordion.click();
+      await accordion.click();
       await page.waitForChanges();
 
       await expect(accordion).toHaveClass(/accordion-collapsed/);

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

@@ -312,7 +312,9 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
   }
 
   componentWillLoad() {
-    setOverlayId(this.el);
+    if (!this.htmlAttributes?.id) {
+      setOverlayId(this.el);
+    }
   }
 
   componentDidLoad() {

core/src/components/action-sheet/test/action-sheet-id.spec.ts

@@ -1,41 +0,0 @@
-import { newSpecPage } from '@stencil/core/testing';
-
-import { ActionSheet } from '../action-sheet';
-
-it('action sheet should be assigned an incrementing id', async () => {
-  const page = await newSpecPage({
-    components: [ActionSheet],
-    html: `<ion-action-sheet is-open="true"></ion-action-sheet>`,
-  });
-  let actionSheet: HTMLIonActionSheetElement;
-
-  actionSheet = page.body.querySelector('ion-action-sheet')!;
-
-  expect(actionSheet).not.toBe(null);
-  expect(actionSheet.getAttribute('id')).toBe('ion-overlay-1');
-
-  // Remove the action sheet from the DOM
-  actionSheet.remove();
-  await page.waitForChanges();
-
-  // Create a new action sheet to verify the id is incremented
-  actionSheet = document.createElement('ion-action-sheet');
-  actionSheet.isOpen = true;
-  page.body.appendChild(actionSheet);
-  await page.waitForChanges();
-
-  actionSheet = page.body.querySelector('ion-action-sheet')!;
-
-  expect(actionSheet.getAttribute('id')).toBe('ion-overlay-2');
-
-  // Presenting the same action sheet again should reuse the existing id
-
-  actionSheet.isOpen = false;
-  await page.waitForChanges();
-  actionSheet.isOpen = true;
-  await page.waitForChanges();
-
-  actionSheet = page.body.querySelector('ion-action-sheet')!;
-
-  expect(actionSheet.getAttribute('id')).toBe('ion-overlay-2');
-});

core/src/components/action-sheet/test/action-sheet-id.spec.tsx

@@ -0,0 +1,55 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import { ActionSheet } from '../action-sheet';
+import { h } from '@stencil/core';
+
+describe('action-sheet: id', () => {
+  it('action sheet should be assigned an incrementing id', async () => {
+    const page = await newSpecPage({
+      components: [ActionSheet],
+      html: `<ion-action-sheet is-open="true"></ion-action-sheet>`,
+    });
+    let actionSheet: HTMLIonActionSheetElement;
+
+    actionSheet = page.body.querySelector('ion-action-sheet')!;
+
+    expect(actionSheet).not.toBe(null);
+    expect(actionSheet.getAttribute('id')).toBe('ion-overlay-1');
+
+    // Remove the action sheet from the DOM
+    actionSheet.remove();
+    await page.waitForChanges();
+
+    // Create a new action sheet to verify the id is incremented
+    actionSheet = document.createElement('ion-action-sheet');
+    actionSheet.isOpen = true;
+    page.body.appendChild(actionSheet);
+    await page.waitForChanges();
+
+    actionSheet = page.body.querySelector('ion-action-sheet')!;
+
+    expect(actionSheet.getAttribute('id')).toBe('ion-overlay-2');
+
+    // Presenting the same action sheet again should reuse the existing id
+
+    actionSheet.isOpen = false;
+    await page.waitForChanges();
+    actionSheet.isOpen = true;
+    await page.waitForChanges();
+
+    actionSheet = page.body.querySelector('ion-action-sheet')!;
+
+    expect(actionSheet.getAttribute('id')).toBe('ion-overlay-2');
+  });
+
+  it('should not overwrite the id set in htmlAttributes', async () => {
+    const id = 'custom-id';
+    const page = await newSpecPage({
+      components: [ActionSheet],
+      template: () => <ion-action-sheet htmlAttributes={{ id }} overlayIndex={-1}></ion-action-sheet>,
+    });
+
+    const alert = page.body.querySelector('ion-action-sheet')!;
+    expect(alert.id).toBe(id);
+  });
+});

core/src/components/alert/alert.tsx

@@ -343,7 +343,9 @@ export class Alert implements ComponentInterface, OverlayInterface {
   }
 
   componentWillLoad() {
-    setOverlayId(this.el);
+    if (!this.htmlAttributes?.id) {
+      setOverlayId(this.el);
+    }
     this.inputsChanged();
     this.buttonsChanged();
   }

core/src/components/alert/test/alert-id.spec.ts

@@ -1,41 +0,0 @@
-import { newSpecPage } from '@stencil/core/testing';
-
-import { Alert } from '../alert';
-
-it('alert should be assigned an incrementing id', async () => {
-  const page = await newSpecPage({
-    components: [Alert],
-    html: `<ion-alert is-open="true"></ion-alert>`,
-  });
-  let alert: HTMLIonAlertElement;
-
-  alert = page.body.querySelector('ion-alert')!;
-
-  expect(alert).not.toBe(null);
-  expect(alert.getAttribute('id')).toBe('ion-overlay-1');
-
-  // Remove the alert from the DOM
-  alert.remove();
-  await page.waitForChanges();
-
-  // Create a new alert to verify the id is incremented
-  alert = document.createElement('ion-alert');
-  alert.isOpen = true;
-  page.body.appendChild(alert);
-  await page.waitForChanges();
-
-  alert = page.body.querySelector('ion-alert')!;
-
-  expect(alert.getAttribute('id')).toBe('ion-overlay-2');
-
-  // Presenting the same alert again should reuse the existing id
-
-  alert.isOpen = false;
-  await page.waitForChanges();
-  alert.isOpen = true;
-  await page.waitForChanges();
-
-  alert = page.body.querySelector('ion-alert')!;
-
-  expect(alert.getAttribute('id')).toBe('ion-overlay-2');
-});

core/src/components/alert/test/alert-id.spec.tsx

@@ -0,0 +1,55 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import { Alert } from '../alert';
+import { h } from '@stencil/core';
+
+describe('alert: id', () => {
+  it('alert should be assigned an incrementing id', async () => {
+    const page = await newSpecPage({
+      components: [Alert],
+      html: `<ion-alert is-open="true"></ion-alert>`,
+    });
+    let alert: HTMLIonAlertElement;
+
+    alert = page.body.querySelector('ion-alert')!;
+
+    expect(alert).not.toBe(null);
+    expect(alert.getAttribute('id')).toBe('ion-overlay-1');
+
+    // Remove the alert from the DOM
+    alert.remove();
+    await page.waitForChanges();
+
+    // Create a new alert to verify the id is incremented
+    alert = document.createElement('ion-alert');
+    alert.isOpen = true;
+    page.body.appendChild(alert);
+    await page.waitForChanges();
+
+    alert = page.body.querySelector('ion-alert')!;
+
+    expect(alert.getAttribute('id')).toBe('ion-overlay-2');
+
+    // Presenting the same alert again should reuse the existing id
+
+    alert.isOpen = false;
+    await page.waitForChanges();
+    alert.isOpen = true;
+    await page.waitForChanges();
+
+    alert = page.body.querySelector('ion-alert')!;
+
+    expect(alert.getAttribute('id')).toBe('ion-overlay-2');
+  });
+
+  it('should not overwrite the id set in htmlAttributes', async () => {
+    const id = 'custom-id';
+    const page = await newSpecPage({
+      components: [Alert],
+      template: () => <ion-alert htmlAttributes={{ id }} overlayIndex={-1}></ion-alert>,
+    });
+
+    const alert = page.body.querySelector('ion-alert')!;
+    expect(alert.id).toBe(id);
+  });
+});

core/src/components/avatar/avatar.ionic.scss

@@ -1,5 +1,5 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
-@import "./avatar";
+@import "./avatar.common";
 
 // Ionic Avatar
 // --------------------------------------------------
@@ -30,6 +30,20 @@
 // Avatar Sizes
 // --------------------------------------------------
 
+/* 2-Extra Small */
+:host(.avatar-xxsmall) {
+  --padding-end: #{globals.$ionic-space-050};
+  --padding-start: #{globals.$ionic-space-050};
+
+  width: globals.$ionic-scale-400;
+  height: globals.$ionic-scale-400;
+
+  font-size: globals.$ionic-font-size-300;
+
+  line-height: globals.$ionic-line-height-500;
+}
+
+/* Extra Small */
 :host(.avatar-xsmall) {
   --padding-end: #{globals.$ionic-space-050};
   --padding-start: #{globals.$ionic-space-050};
@@ -39,9 +53,10 @@
 
   font-size: globals.$ionic-font-size-300;
 
-  line-height: globals.$ionic-line-height-400;
+  line-height: globals.$ionic-line-height-500;
 }
 
+/* Small */
 :host(.avatar-small) {
   --padding-end: #{globals.$ionic-space-150};
   --padding-start: #{globals.$ionic-space-150};
@@ -54,6 +69,7 @@
   line-height: globals.$ionic-line-height-600;
 }
 
+/* Medium */
 :host(.avatar-medium) {
   --padding-end: #{globals.$ionic-space-200};
   --padding-start: #{globals.$ionic-space-200};
@@ -64,6 +80,7 @@
   font-size: globals.$ionic-font-size-450;
 }
 
+/* Large */
 :host(.avatar-large) {
   --padding-end: #{globals.$ionic-space-250};
   --padding-start: #{globals.$ionic-space-250};
@@ -74,6 +91,7 @@
   font-size: globals.$ionic-font-size-500;
 }
 
+/* Extra Large */
 :host(.avatar-xlarge) {
   --padding-end: #{globals.$ionic-space-300};
   --padding-start: #{globals.$ionic-space-300};
@@ -87,6 +105,7 @@
 // Avatar Shapes
 // --------------------------------------------------
 
+:host(.avatar-xxsmall.avatar-soft),
 :host(.avatar-xsmall.avatar-soft),
 :host(.avatar-small.avatar-soft) {
   --border-radius: #{globals.$ionic-border-radius-100};

core/src/components/avatar/avatar.ios.scss

@@ -1,4 +1,4 @@
-@import "./avatar";
+@import "./avatar.common";
 @import "./avatar.ios.vars";
 
 // iOS Avatar

core/src/components/avatar/avatar.md.scss

@@ -1,4 +1,4 @@
-@import "./avatar";
+@import "./avatar.common";
 @import "./avatar.md.vars";
 
 // Material Design Avatar

core/src/components/avatar/avatar.tsx

@@ -20,13 +20,16 @@ export class Avatar implements ComponentInterface {
   @Element() el!: HTMLElement;
 
   /**
-   * 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.
+   * Set to `"xxsmall"` for the smallest size.
+   * Set to `"xsmall"` for a very small size.
+   * Set to `"small"` for a compact size.
+   * Set to `"medium"` for the default height and width.
+   * Set to `"large"` for a larger size.
+   * Set to `"xlarge"` for the largest dimensions.
    *
    * Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
    */
-  @Prop() size?: `xsmall` | 'small' | 'medium' | 'large' | 'xlarge';
+  @Prop() size?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 
   /**
    * Set to `"soft"` for an avatar with slightly rounded corners,

core/src/components/avatar/test/shape/avatar.e2e.ts

@@ -108,6 +108,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           </style>
 
           <div id="container">
+            <ion-avatar shape="soft" size="xxsmall">A</ion-avatar>
             <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>
@@ -132,6 +133,9 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           </style>
 
           <div id="container">
+            <ion-avatar shape="soft" size="xxsmall">
+              <ion-icon name="person-outline"></ion-icon>
+            </ion-avatar>
             <ion-avatar shape="soft" size="xsmall">
               <ion-icon name="person-outline"></ion-icon>
             </ion-avatar>
@@ -162,6 +166,9 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           </style>
 
           <div id="container">
+            <ion-avatar shape="soft" size="xxsmall">
+              <img src="/src/components/avatar/test/avatar.svg"/>
+            </ion-avatar>
             <ion-avatar shape="soft" size="xsmall">
               <img src="/src/components/avatar/test/avatar.svg"/>
             </ion-avatar>

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

@@ -43,6 +43,7 @@
 
         <h2>Soft</h2>
         <div class="container">
+          <ion-avatar shape="soft" size="xxsmall">A</ion-avatar>
           <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>
@@ -52,6 +53,7 @@
 
         <h2>Round</h2>
         <div class="container">
+          <ion-avatar shape="round" size="xxsmall">A</ion-avatar>
           <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>
@@ -61,6 +63,7 @@
 
         <h2>Rectangular</h2>
         <div class="container">
+          <ion-avatar shape="rectangular" size="xxsmall">A</ion-avatar>
           <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>

core/src/components/avatar/test/size/avatar.e2e.ts

@@ -6,6 +6,51 @@ import { configs, test } from '@utils/test/playwright';
  */
 configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => {
   test.describe(title('avatar: size'), () => {
+    test.describe('xxsmall', () => {
+      test('should not have visual regressions when containing text', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-avatar size="xxsmall">A</ion-avatar>
+        `,
+          config
+        );
+
+        const avatar = page.locator('ion-avatar');
+
+        await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-xxsmall-text`));
+      });
+
+      test('should not have visual regressions when containing an icon', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-avatar size="xxsmall">
+            <ion-icon name="person-outline"></ion-icon>
+          </ion-avatar>
+        `,
+          config
+        );
+
+        const avatar = page.locator('ion-avatar');
+
+        await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-xxsmall-icon`));
+      });
+
+      test('should not have visual regressions when containing an image', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-avatar size="xxsmall">
+            <img src="/src/components/avatar/test/avatar.svg"/>
+          </ion-avatar>
+        `,
+          config
+        );
+
+        const avatar = page.locator('ion-avatar');
+
+        await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-xxsmall-image`));
+      });
+    });
+
     test.describe('xsmall', () => {
       test('should not have visual regressions when containing text', async ({ page }) => {
         await page.setContent(

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

@@ -43,6 +43,7 @@
 
         <h2>Text</h2>
         <div class="container">
+          <ion-avatar size="xxsmall">A</ion-avatar>
           <ion-avatar size="xsmall">AB</ion-avatar>
           <ion-avatar size="small">AB</ion-avatar>
           <ion-avatar size="medium">AB</ion-avatar>
@@ -52,6 +53,9 @@
 
         <h2>Icons</h2>
         <div class="container">
+          <ion-avatar size="xxsmall">
+            <ion-icon name="person-outline"></ion-icon>
+          </ion-avatar>
           <ion-avatar size="xsmall">
             <ion-icon name="person-outline"></ion-icon>
           </ion-avatar>
@@ -71,6 +75,9 @@
 
         <h2>Images</h2>
         <div class="container">
+          <ion-avatar size="xxsmall">
+            <img src="/src/components/avatar/test/avatar.svg" />
+          </ion-avatar>
           <ion-avatar size="xsmall">
             <img src="/src/components/avatar/test/avatar.svg" />
           </ion-avatar>

core/src/components/badge/badge.common.scss

@@ -1,4 +1,6 @@
-@import "./badge.vars";
+@use "../../themes/functions.color" as color;
+@import "../../themes/mixins";
+@import "./badge.common.vars";
 
 // Badge
 // --------------------------------------------------
@@ -13,8 +15,6 @@
    * @prop --padding-bottom: Bottom padding of the badge
    * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge
    */
-  --background: #{ion-color(primary, base)};
-  --color: #{ion-color(primary, contrast)};
   --padding-top: #{$badge-padding-top};
   --padding-end: #{$badge-padding-end};
   --padding-bottom: #{$badge-padding-bottom};
@@ -30,7 +30,6 @@
   background: var(--background);
   color: var(--color);
 
-  font-family: $font-family-base;
   font-size: $badge-font-size;
   font-weight: $badge-font-weight;
 
@@ -45,8 +44,8 @@
 }
 
 :host(.ion-color) {
-  background: #{current-color(base)};
-  color: #{current-color(contrast)};
+  background: #{color.current-color(base)};
+  color: #{color.current-color(contrast)};
 }
 
 :host(:empty) {

core/src/components/badge/badge.common.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/native/native.globals";
+@import "../../themes/functions.font";
 
 // Badge
 // --------------------------------------------------

core/src/components/badge/badge.ionic.scss

@@ -1,12 +1,14 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
-@import "./badge";
+@use "./badge.common";
 
 // Ionic Badge
 // --------------------------------------------------
 
 :host {
-  --padding-start: #{globals.$ionic-space-100};
-  --padding-end: #{globals.$ionic-space-100};
+  --background: #{globals.ion-color(primary, base)};
+  --color: #{globals.ion-color(primary, contrast)};
+  --padding-start: #{globals.$ionic-space-200};
+  --padding-end: #{globals.$ionic-space-200};
   --padding-top: #{globals.$ionic-space-0};
   --padding-bottom: #{globals.$ionic-space-0};
 
@@ -23,23 +25,23 @@
 
 /* Soft Badge */
 :host(.badge-soft) {
-  @include border-radius(globals.$ionic-border-radius-200);
+  @include globals.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);
+  @include globals.border-radius(globals.$ionic-border-radius-100);
 }
 
 /* Round Badge */
 :host(.badge-round) {
-  @include border-radius(globals.$ionic-border-radius-full);
+  @include globals.border-radius(globals.$ionic-border-radius-full);
 }
 
 /* Rectangular Badge */
 :host(.badge-rectangular) {
-  @include border-radius(globals.$ionic-border-radius-0);
+  @include globals.border-radius(globals.$ionic-border-radius-0);
 }
 
 // Badge Sizes
@@ -47,6 +49,9 @@
 
 /* 2-Extra Small Badge */
 :host(.badge-xxsmall) {
+  --padding-start: #{globals.$ionic-space-050};
+  --padding-end: #{globals.$ionic-space-050};
+
   min-width: globals.$ionic-scale-400;
   height: globals.$ionic-scale-400;
 
@@ -57,6 +62,9 @@
 
 /* Extra Small Badge */
 :host(.badge-xsmall) {
+  --padding-start: #{globals.$ionic-space-100};
+  --padding-end: #{globals.$ionic-space-100};
+
   min-width: globals.$ionic-scale-600;
   height: globals.$ionic-scale-600;
 
@@ -67,6 +75,9 @@
 
 /* Small Badge */
 :host(.badge-small) {
+  --padding-start: #{globals.$ionic-space-100};
+  --padding-end: #{globals.$ionic-space-100};
+
   min-width: globals.$ionic-scale-800;
   height: globals.$ionic-scale-800;
 
@@ -87,9 +98,6 @@
 
 /* Large Badge */
 :host(.badge-large) {
-  --padding-start: #{globals.$ionic-space-200};
-  --padding-end: #{globals.$ionic-space-200};
-
   min-width: globals.$ionic-scale-1200;
   height: globals.$ionic-scale-1200;
 
@@ -100,9 +108,6 @@
 
 /* Extra Large Badge */
 :host(.badge-xlarge) {
-  --padding-start: #{globals.$ionic-space-200};
-  --padding-end: #{globals.$ionic-space-200};
-
   min-width: globals.$ionic-scale-1400;
   height: globals.$ionic-scale-1400;
 

core/src/components/badge/badge.ios.scss

@@ -1,4 +1,4 @@
-@import "./badge";
+@import "./badge.native";
 @import "./badge.ios.vars";
 
 // iOS Badge

core/src/components/badge/badge.md.scss

@@ -1,4 +1,4 @@
-@import "./badge";
+@import "./badge.native";
 @import "./badge.md.vars";
 
 // Material Design Badge

core/src/components/badge/badge.native.scss

@@ -0,0 +1,13 @@
+@import "../../themes/native/native.globals.md";
+@import "./badge.common";
+@import "./badge.common.vars";
+
+// Badge
+// --------------------------------------------------
+
+:host {
+  --background: #{ion-color(primary, base)};
+  --color: #{ion-color(primary, contrast)};
+
+  font-family: $font-family-base;
+}

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

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs().forEach(({ config, screenshot, title }) => {
+configs({ modes: ['md', 'ios', 'ionic-md'] }).forEach(({ config, screenshot, title }) => {
   test.describe(title('badge: rendering'), () => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto('/src/components/badge/test/basic', config);

core/src/components/button/button.common.scss

@@ -51,8 +51,6 @@
 
   color: var(--color);
 
-  font-family: $font-family-base;
-
   text-align: center;
   text-decoration: none;
 
@@ -217,18 +215,9 @@
 // --------------------------------------------------
 
 ::slotted(ion-icon) {
-  font-size: 1.35em;
   pointer-events: none;
 }
 
-::slotted(ion-icon[slot="start"]) {
-  @include margin(0, 0.3em, 0, -0.3em);
-}
-
-::slotted(ion-icon[slot="end"]) {
-  @include margin(0, -0.2em, 0, 0.3em);
-}
-
 // Button Ripple effect
 // --------------------------------------------------
 

core/src/components/button/button.ionic.scss

@@ -1,48 +1,23 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "./button.common";
 
 // Ionic Button
 // -------------------------------------------------------------------------------
 :host {
-  --overflow: hidden;
-  --border-width: initial;
-  --border-color: initial;
-  --border-style: initial;
-  --color-activated: var(--color);
-  --color-focused: var(--color);
-  --color-hover: var(--color);
-  --box-shadow: none;
   --padding-bottom: var(--padding-top);
-  --padding-end: #{globals.$ionic-space-400};
+  --padding-end: #{globals.$ionic-space-500};
   --padding-start: var(--padding-end);
-  --padding-top: #{globals.$ionic-space-300};
+  --padding-top: #{globals.$ionic-space-0};
   --focus-ring-color: #{globals.$ionic-state-focus-1};
   --focus-ring-width: #{globals.$ionic-border-size-050};
 
-  display: inline-block;
-
   position: relative;
 
-  width: auto;
-
   min-height: globals.$ionic-scale-1000;
 
-  color: var(--color);
-
   font-family: globals.$ionic-font-family;
-
   font-size: globals.$ionic-font-size-350;
 
-  text-align: center;
-  text-decoration: none;
-
-  white-space: normal;
-
-  user-select: none;
-  vertical-align: top; // the better option for most scenarios
-  vertical-align: -webkit-baseline-middle; // the best for those that support it
-
-  font-kerning: none;
-
   // Target area
   &::after {
     @include globals.position(50%, 0, null, 0);
@@ -59,14 +34,60 @@
 
     z-index: 1;
   }
+}
 
-  ::slotted(ion-icon[slot="start"]) {
-    @include globals.margin-horizontal(null, globals.$ionic-space-200);
-  }
+// Button Fills
+// -------------------------------------------------------------------------------
 
-  ::slotted(ion-icon[slot="end"]) {
-    @include globals.margin-horizontal(globals.$ionic-space-200, null);
-  }
+// Solid Button
+// --------------------------------------------------
+
+:host(.button-solid) {
+  --background-activated: #{globals.ion-color(primary, shade)};
+  --background-hover: #{globals.ion-color(primary, contrast)};
+  --background-focused: #{globals.ion-color(primary, contrast)};
+  --background-focused-opacity: 0.24;
+  --background-hover-opacity: 0.08;
+  --ripple-opacity: var(--background-activated-opacity, 1);
+  --ripple-color: var(--background-activated);
+}
+
+// Outline Button
+// --------------------------------------------------
+
+:host(.button-outline) {
+  --border-width: #{globals.$ionic-border-size-025};
+  --border-style: #{globals.$ionic-border-style-solid};
+  --background-activated: #{globals.$ionic-color-neutral-200};
+  --background-focused: transparent;
+  --background-hover: #{globals.ion-color(primary, base)};
+  --background-hover-opacity: 0.04;
+  --ripple-opacity: var(--background-activated-opacity, 1);
+  --ripple-color: var(--background-activated);
+}
+
+// Clear Button
+// --------------------------------------------------
+
+:host(.button-clear) {
+  --background-activated: #{globals.$ionic-color-neutral-200};
+  --background-focused: transparent;
+  --background-hover: #{globals.ion-color(primary, base)};
+  --background-hover-opacity: 0.04;
+  --ripple-opacity: var(--background-activated-opacity, 1);
+  --ripple-color: var(--background-activated);
+}
+
+// Ripple Effect
+// -------------------------------------------------------------------------------
+
+:host(.button-solid.ion-color) ion-ripple-effect {
+  color: globals.current-color(shade);
+}
+
+:host(.button-outline.ion-color) ion-ripple-effect,
+:host(.button-clear.ion-color) ion-ripple-effect {
+  color: globals.$ionic-color-neutral-200;
 }
 
 // Button Sizes
@@ -154,6 +175,9 @@
 // Button Shapes
 // -------------------------------------------------------------------------------
 
+// Soft Button
+// --------------------------------------------------
+
 :host(.button-soft) {
   --border-radius: #{globals.$ionic-border-radius-200};
 }
@@ -163,15 +187,21 @@
   --border-radius: #{globals.$ionic-border-radius-100};
 }
 
+// Round Button
+// --------------------------------------------------
+
 :host(.button-round) {
   --border-radius: #{globals.$ionic-border-radius-full};
 }
 
+// Rectangular Button
+// --------------------------------------------------
+
 :host(.button-rectangular) {
   --border-radius: #{globals.$ionic-border-radius-0};
 }
 
-// Button Focused
+// Button: Focus
 // -------------------------------------------------------------------------------
 
 // Only show the focus ring when the button is focused
@@ -180,209 +210,33 @@
   outline-offset: globals.$ionic-border-size-050;
 }
 
-// Fill Solid Button
-// -------------------------------------------------------------------------------
+/**
+ * Only allow overriding of opacity here
+ * as developers should not be overriding
+ * colors when using the color prop.
+ */
 
-:host(.button-solid) {
-  --background-activated: #{globals.$ionic-color-primary-base};
+:host(.button-solid.ion-color.ion-focused) .button-native::after {
+  background: globals.current-color(contrast);
 }
 
-:host(.button-solid.ion-activated) .button-native::after {
-  background: #{globals.$ionic-color-primary-900};
-}
-
-// Fill Outline Button
+// Button: Activated
 // --------------------------------------------------
 
-:host(.button-outline) {
-  --border-width: #{globals.$ionic-border-size-025};
-  --border-style: #{globals.$ionic-border-style-solid};
-  --background-activated: #{globals.$ionic-color-neutral-200};
-  --background-activated-opacity: 1;
-  --background-focused: transparent;
-  --background-hover: transparent;
-  --background-focused-opacity: 0.1;
-  --color-activated: #{globals.$ionic-color-primary-base};
+:host(.button-solid.ion-color.ion-activated) .button-native::after {
+  background: globals.current-color(shade);
 }
 
-:host(.button-outline.ion-focused) {
-  --border-color: transparent;
-}
-
-// Fill Clear Button
-// --------------------------------------------------
-
-:host(.button-clear) {
-  --background-activated: #{globals.$ionic-color-neutral-200};
-  --background-activated-opacity: 1;
-  --background-focused: transparent;
-  --background-hover: transparent;
-}
-
-// Button Hover
-// --------------------------------------------------
-
-:host(.button-solid) {
-  --background-hover: #{globals.$ionic-color-primary-800};
-}
-
-:host(.button-outline),
-:host(.button-clear) {
-  --background-hover: #{globals.$ionic-color-neutral-100};
+:host(.ion-activated) .button-native:has(ion-ripple-effect)::after,
+:host(.button-solid.ion-color.ion-activated) .button-native:has(ion-ripple-effect)::after {
+  background: transparent;
 }
 
 // Button: Disabled
 // --------------------------------------------------
 
 :host(.button-disabled) {
-  --background: #{globals.$ionic-state-disabled};
-  --border-color: var(--color);
-
-  cursor: default;
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-// Solid Button
-// --------------------------------------------------
-
-// Default Solid Color
-:host(.button-solid) {
-  --background: #{globals.$ionic-color-primary-base};
-  --color: #{globals.$ionic-color-base-white};
-}
-
-// Outline Button
-// --------------------------------------------------
-
-// Default Outline Color
-:host(.button-outline) {
-  --border-color: #{globals.$ionic-color-primary-base};
-  --background: #{globals.$ionic-color-base-white};
-  --color: #{globals.$ionic-color-primary-base};
-}
-
-// Clear Button
-// --------------------------------------------------
-
-// Default Clear Color
-:host(.button-clear) {
-  --border-width: #{globals.$ionic-border-size-0};
-  --background: transparent;
-  --color: #{globals.$ionic-color-primary-base};
-}
-
-// Block Button
-// --------------------------------------------------
-
-:host(.button-block) {
-  display: block;
-}
-
-:host(.button-block) .button-native {
-  @include globals.margin-horizontal(0);
-
-  width: 100%;
-
-  clear: both;
-
-  contain: content;
-}
-
-:host(.button-block) .button-native::after {
-  clear: both;
-}
-
-// Full Button
-// --------------------------------------------------
-
-:host(.button-full) {
-  display: block;
-}
-
-:host(.button-full) .button-native {
-  @include globals.margin-horizontal(0);
-
-  width: 100%;
-
-  contain: content;
-}
-
-:host(.button-full:not(.button-round)) .button-native {
-  @include globals.border-radius(0);
-
-  border-right-width: 0;
-  border-left-width: 0;
-}
-
-.button-native {
-  @include globals.border-radius(var(--border-radius));
-  @include globals.font-smoothing();
-  @include globals.margin(0);
-  @include globals.padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
-  @include globals.text-inherit();
-
-  display: flex;
-
-  position: relative;
-
-  align-items: center;
-
-  width: 100%;
-  height: 100%;
-
-  min-height: inherit;
-
-  transition: var(--transition);
-
-  border-width: var(--border-width);
-  border-style: var(--border-style);
-  border-color: var(--border-color);
-
-  outline: none;
-
-  background: var(--background);
-
-  line-height: 1;
-
-  box-shadow: var(--box-shadow);
-
-  contain: layout style;
-  cursor: pointer;
-
-  opacity: var(--opacity);
-  overflow: var(--overflow);
-
-  z-index: 0;
-  box-sizing: border-box;
-  appearance: none;
-}
-
-.button-native::-moz-focus-inner {
-  border: 0;
-}
-
-.button-inner {
-  display: flex;
-  position: relative;
-
-  flex-flow: row nowrap;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-
-  width: 100%;
-  height: 100%;
-
-  z-index: 1;
-}
-
-// Button Slots
-// --------------------------------------------------
-
-::slotted([slot="start"]),
-::slotted([slot="end"]) {
-  flex-shrink: 0;
+  opacity: 0.6;
 }
 
 // Button Icons
@@ -390,47 +244,28 @@
 
 ::slotted(ion-icon) {
   font-size: globals.$ionic-font-size-500;
-  pointer-events: none;
 }
 
-// Button: States
-// --------------------------------------------------
-
-.button-native::after {
-  @include globals.button-state();
+:host(.button-small) ::slotted(ion-icon[slot="start"]) {
+  @include globals.margin-horizontal(null, globals.$ionic-space-200);
 }
 
-// Button Focused
-:host(.ion-focused) {
-  color: var(--color-focused);
+::slotted(ion-icon[slot="start"]) {
+  @include globals.margin-horizontal(null, globals.$ionic-space-250);
 }
 
-:host(.ion-focused) .button-native::after {
-  background: var(--background-focused);
-
-  opacity: var(--background-focused-opacity);
+:host(.button-large) ::slotted(ion-icon[slot="start"]) {
+  @include globals.margin-horizontal(null, globals.$ionic-space-300);
 }
 
-// Button Hover
-@media (any-hover: hover) {
-  :host(:hover) {
-    color: var(--color-hover);
-  }
-
-  :host(:hover) .button-native::after {
-    background: var(--background-hover);
-
-    opacity: var(--background-hover-opacity);
-  }
+:host(.button-small) ::slotted(ion-icon[slot="end"]) {
+  @include globals.margin-horizontal(globals.$ionic-space-200, null);
 }
 
-// Button Activated
-:host(.ion-activated) {
-  color: var(--color-activated);
+::slotted(ion-icon[slot="end"]) {
+  @include globals.margin-horizontal(globals.$ionic-space-250, null);
 }
 
-:host(.ion-activated) .button-native::after {
-  background: var(--background-activated);
-
-  opacity: var(--background-activated-opacity);
+:host(.button-large) ::slotted(ion-icon[slot="end"]) {
+  @include globals.margin-horizontal(globals.$ionic-space-300, null);
 }

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

@@ -1,4 +1,4 @@
-@import "./button";
+@import "./button.native";
 @import "./button.ios.vars";
 @import "../toolbar/toolbar.ios.vars";
 

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

@@ -1,4 +1,4 @@
-@import "./button";
+@import "./button.native";
 @import "./button.md.vars";
 
 // Material Design Button

core/src/components/button/button.native.scss

@@ -0,0 +1,24 @@
+@use "../../themes/native/native.globals.md" as globals;
+@use "./button.common";
+
+// Button - iOS and Material Design
+// --------------------------------------------------
+
+:host {
+  font-family: globals.$font-family-base;
+}
+
+// Button Icons
+// --------------------------------------------------
+
+::slotted(ion-icon) {
+  font-size: 1.35em;
+}
+
+::slotted(ion-icon[slot="start"]) {
+  @include globals.margin(0, 0.3em, 0, -0.3em);
+}
+
+::slotted(ion-icon[slot="end"]) {
+  @include globals.margin(0, -0.2em, 0, 0.3em);
+}

core/src/components/button/button.tsx

@@ -6,7 +6,7 @@ import { inheritAriaAttributes, hasShadowDom } from '@utils/helpers';
 import { printIonWarning } from '@utils/logging';
 import { createColorClasses, hostContext, openURL } from '@utils/theme';
 
-import { getIonTheme } from '../../global/ionic-global';
+import { getIonTheme, getIonMode } from '../../global/ionic-global';
 import type { AnimationBuilder, Color } from '../../interface';
 import type { RouterDirection } from '../router/utils/interface';
 
@@ -353,6 +353,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
       this;
 
     const theme = getIonTheme(this);
+    const mode = getIonMode(this);
     const size = this.getSize();
     const shape = this.getShape();
     const TagType = href === undefined ? 'button' : ('a' as any);
@@ -421,7 +422,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
             <slot></slot>
             <slot name="end"></slot>
           </span>
-          {theme === 'md' && <ion-ripple-effect type={this.rippleType}></ion-ripple-effect>}
+          {mode === 'md' && <ion-ripple-effect type={this.rippleType}></ion-ripple-effect>}
         </TagType>
       </Host>
     );

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

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs().forEach(({ config, screenshot, title }) => {
+configs({ modes: ['ios', 'md', 'ionic-md', 'ionic-ios'] }).forEach(({ config, screenshot, title }) => {
   test.describe(title('button: basic'), () => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto(`/src/components/button/test/basic`, config);
@@ -39,9 +39,9 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ config, title }) => {
 });
 
 /**
- * Ripple effect is only available in MD mode.
+ * Ripple effect is only available in MD and Ionic mode.
  */
-configs({ modes: ['md'] }).forEach(({ config, screenshot, title }) => {
+configs({ modes: ['md', 'ionic-md'] }).forEach(({ config, screenshot, title }) => {
   test.describe(title('button: ripple effect'), () => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto(`/src/components/button/test/basic?ionic:_testing=false`, config);