chore(): add updated snapshots

.github/workflows/actions/test-angular-e2e/action.yml

@@ -8,7 +8,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 22.x
+        node-version: 18
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

.github/workflows/assign-issues.yml

@@ -13,6 +13,6 @@ jobs:
       - name: 'Auto-assign issue'
         uses: pozil/auto-assign-issue@39c06395cbac76e79afc4ad4e5c5c6db6ecfdd2e # v2.2.0
         with:
-          assignees: brandyscarney, ShaneK
+          assignees: brandyscarney, thetaPC, ShaneK
           numOfAssignee: 1
           allowSelfAssign: false

.github/workflows/build.yml

@@ -140,7 +140,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        apps: [ng16, ng17, ng18, ng19, ng20]
+        apps: [ng16, ng17, ng18, ng19]
     needs: [build-angular, build-angular-server]
     runs-on: ubuntu-latest
     steps:

.github/workflows/conventional-commit.yml

@@ -9,35 +9,24 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Validate PR title
-        if: |
-          !contains(github.event.pull_request.title, 'release') &&
-          !contains(github.event.pull_request.title, 'chore')
-        uses: amannn/action-semantic-pull-request@v5
+        uses:  amannn/action-semantic-pull-request@v5
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
           # Configure that a scope must always be provided.
           requireScope: true
-          # Configure allowed commit types
-          types: |
-            feat
-            fix
-            docs
-            style
-            refactor
-            perf
-            test
-            build
-            ci
-            revert
-            release
-            chore
           # Configure additional validation for the subject based on a regex.
           # This example ensures the subject doesn't start with an uppercase character.
           subjectPattern: ^(?![A-Z]).+$
-          # If `subjectPattern` is configured, you can use this property to
-          # override the default error message that is shown when the pattern
-          # doesn't match. The variables `subject` and `title` can be used
+          # If `subjectPattern` is configured, you can use this property to 
+          # override the default error message that is shown when the pattern 
+          # doesn't match. The variables `subject` and `title` can be used 
           # within the message.
           subjectPatternError: |
             The subject "{subject}" found in the pull request title "{title}" didn't match the configured pattern. Please ensure that the subject doesn't start with an uppercase character.
+          # If the PR contains one of these newline-delimited labels, the
+          # validation is skipped. If you want to rerun the validation when
+          # labels change, you might want to use the `labeled` and `unlabeled`
+          # event triggers in your workflow.
+          ignoreLabels: |
+            release

.github/workflows/stencil-nightly.yml

@@ -150,7 +150,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        apps: [ng16, ng17, ng18, ng19, ng20]
+        apps: [ng16, ng17, ng18, ng19]
     needs: [build-angular, build-angular-server]
     runs-on: ubuntu-latest
     steps:

CHANGELOG.md

@@ -3,59 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.6.5](https://github.com/ionic-team/ionic-framework/compare/v8.6.4...v8.6.5) (2025-07-16)
-
-
-### Bug Fixes
-
-* **input-otp:** improve autofill detection and invalid character handling ([#30541](https://github.com/ionic-team/ionic-framework/issues/30541)) ([8b4023d](https://github.com/ionic-team/ionic-framework/commit/8b4023d520212c254395a5be6d3a76dcbee6f2da)), closes [#30459](https://github.com/ionic-team/ionic-framework/issues/30459)
-* **input:** prevent layout shift when hiding password toggle ([#30533](https://github.com/ionic-team/ionic-framework/issues/30533)) ([f1defba](https://github.com/ionic-team/ionic-framework/commit/f1defba2acb417c6f243b2902923d85efbb6f879)), closes [#29562](https://github.com/ionic-team/ionic-framework/issues/29562)
-* **item:** allow nested content to be conditionally interactive ([#30519](https://github.com/ionic-team/ionic-framework/issues/30519)) ([3f730ab](https://github.com/ionic-team/ionic-framework/commit/3f730ab1d77be54d1faf14168eee9e9dc41002d6)), closes [#29763](https://github.com/ionic-team/ionic-framework/issues/29763)
-* **modal:** dismiss child modals when parent is dismissed ([#30540](https://github.com/ionic-team/ionic-framework/issues/30540)) ([9b0099f](https://github.com/ionic-team/ionic-framework/commit/9b0099f462fda6d40b49dde1a1c97afbbbee2287)), closes [#30389](https://github.com/ionic-team/ionic-framework/issues/30389)
-* **modal:** dismiss modal when parent element is removed from DOM ([#30544](https://github.com/ionic-team/ionic-framework/issues/30544)) ([850338c](https://github.com/ionic-team/ionic-framework/commit/850338cbd5c76addbc2cc3068b93071dea14c0af)), closes [#30389](https://github.com/ionic-team/ionic-framework/issues/30389)
-* **modal:** improve card modal background transition from portrait to landscape ([#30551](https://github.com/ionic-team/ionic-framework/issues/30551)) ([d37b9b8](https://github.com/ionic-team/ionic-framework/commit/d37b9b8e468b7b2c9cda8b27fe7019bb905ad2bf))
-* **segment-view:** scroll to correct content when height is not set ([#30547](https://github.com/ionic-team/ionic-framework/issues/30547)) ([d14311f](https://github.com/ionic-team/ionic-framework/commit/d14311fb65ae3de7ba7578791ce1ea44f186c413)), closes [#30543](https://github.com/ionic-team/ionic-framework/issues/30543)
-
-
-
-
-
-## [8.6.4](https://github.com/ionic-team/ionic-framework/compare/v8.6.3...v8.6.4) (2025-07-09)
-
-
-### Bug Fixes
-
-* **modal:** support iOS card view transitions for viewport changes ([#30520](https://github.com/ionic-team/ionic-framework/issues/30520)) ([0fd9e82](https://github.com/ionic-team/ionic-framework/commit/0fd9e824508333a53175d7da5f681fc3126a2394)), closes [#30296](https://github.com/ionic-team/ionic-framework/issues/30296)
-
-
-
-
-
-## [8.6.3](https://github.com/ionic-team/ionic-framework/compare/v8.6.2...v8.6.3) (2025-07-02)
-
-
-### Bug Fixes
-
-* **angular:** update schematics to support Angular's latest build system ([#30525](https://github.com/ionic-team/ionic-framework/issues/30525)) ([08e3e7a](https://github.com/ionic-team/ionic-framework/commit/08e3e7ab5165baea668571af9845933b5befeb46)), closes [ionic-team/ionic-docs#2091](https://github.com/ionic-team/ionic-docs/issues/2091)
-* **modal:** add conditional tabIndex for handle cycling ([#30510](https://github.com/ionic-team/ionic-framework/issues/30510)) ([ee47660](https://github.com/ionic-team/ionic-framework/commit/ee47660745428e04c78cfef0555f3c5788959a8c))
-* **select:** focus the correct selected item in an action sheet interface with a header ([#30481](https://github.com/ionic-team/ionic-framework/issues/30481)) ([80a111c](https://github.com/ionic-team/ionic-framework/commit/80a111cffac70e831eb57e827301370163ef4e2a)), closes [#30480](https://github.com/ionic-team/ionic-framework/issues/30480)
-
-
-
-
-
-## [8.6.2](https://github.com/ionic-team/ionic-framework/compare/v8.6.1...v8.6.2) (2025-06-18)
-
-
-### Bug Fixes
-
-* **picker-column:** fallback to elementFromPoint for iOS 16 Shadow DOM bug ([#30479](https://github.com/ionic-team/ionic-framework/issues/30479)) ([6ae2907](https://github.com/ionic-team/ionic-framework/commit/6ae29077424434f3523d75426f3328765a4797f4)), closes [#29672](https://github.com/ionic-team/ionic-framework/issues/29672)
-* **range:** improve focus and blur handling for dual knobs ([#30482](https://github.com/ionic-team/ionic-framework/issues/30482)) ([6811fe5](https://github.com/ionic-team/ionic-framework/commit/6811fe5cc88f132f998476a3f4b956ce21122631))
-
-
-
-
-
 ## [8.6.1](https://github.com/ionic-team/ionic-framework/compare/v8.6.0...v8.6.1) (2025-06-11)
 
 

core/CHANGELOG.md

@@ -3,58 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.6.5](https://github.com/ionic-team/ionic-framework/compare/v8.6.4...v8.6.5) (2025-07-16)
-
-
-### Bug Fixes
-
-* **input-otp:** improve autofill detection and invalid character handling ([#30541](https://github.com/ionic-team/ionic-framework/issues/30541)) ([8b4023d](https://github.com/ionic-team/ionic-framework/commit/8b4023d520212c254395a5be6d3a76dcbee6f2da)), closes [#30459](https://github.com/ionic-team/ionic-framework/issues/30459)
-* **input:** prevent layout shift when hiding password toggle ([#30533](https://github.com/ionic-team/ionic-framework/issues/30533)) ([f1defba](https://github.com/ionic-team/ionic-framework/commit/f1defba2acb417c6f243b2902923d85efbb6f879)), closes [#29562](https://github.com/ionic-team/ionic-framework/issues/29562)
-* **item:** allow nested content to be conditionally interactive ([#30519](https://github.com/ionic-team/ionic-framework/issues/30519)) ([3f730ab](https://github.com/ionic-team/ionic-framework/commit/3f730ab1d77be54d1faf14168eee9e9dc41002d6)), closes [#29763](https://github.com/ionic-team/ionic-framework/issues/29763)
-* **modal:** dismiss child modals when parent is dismissed ([#30540](https://github.com/ionic-team/ionic-framework/issues/30540)) ([9b0099f](https://github.com/ionic-team/ionic-framework/commit/9b0099f462fda6d40b49dde1a1c97afbbbee2287)), closes [#30389](https://github.com/ionic-team/ionic-framework/issues/30389)
-* **modal:** dismiss modal when parent element is removed from DOM ([#30544](https://github.com/ionic-team/ionic-framework/issues/30544)) ([850338c](https://github.com/ionic-team/ionic-framework/commit/850338cbd5c76addbc2cc3068b93071dea14c0af)), closes [#30389](https://github.com/ionic-team/ionic-framework/issues/30389)
-* **modal:** improve card modal background transition from portrait to landscape ([#30551](https://github.com/ionic-team/ionic-framework/issues/30551)) ([d37b9b8](https://github.com/ionic-team/ionic-framework/commit/d37b9b8e468b7b2c9cda8b27fe7019bb905ad2bf))
-* **segment-view:** scroll to correct content when height is not set ([#30547](https://github.com/ionic-team/ionic-framework/issues/30547)) ([d14311f](https://github.com/ionic-team/ionic-framework/commit/d14311fb65ae3de7ba7578791ce1ea44f186c413)), closes [#30543](https://github.com/ionic-team/ionic-framework/issues/30543)
-
-
-
-
-
-## [8.6.4](https://github.com/ionic-team/ionic-framework/compare/v8.6.3...v8.6.4) (2025-07-09)
-
-
-### Bug Fixes
-
-* **modal:** support iOS card view transitions for viewport changes ([#30520](https://github.com/ionic-team/ionic-framework/issues/30520)) ([0fd9e82](https://github.com/ionic-team/ionic-framework/commit/0fd9e824508333a53175d7da5f681fc3126a2394)), closes [#30296](https://github.com/ionic-team/ionic-framework/issues/30296)
-
-
-
-
-
-## [8.6.3](https://github.com/ionic-team/ionic-framework/compare/v8.6.2...v8.6.3) (2025-07-02)
-
-
-### Bug Fixes
-
-* **modal:** add conditional tabIndex for handle cycling ([#30510](https://github.com/ionic-team/ionic-framework/issues/30510)) ([ee47660](https://github.com/ionic-team/ionic-framework/commit/ee47660745428e04c78cfef0555f3c5788959a8c))
-* **select:** focus the correct selected item in an action sheet interface with a header ([#30481](https://github.com/ionic-team/ionic-framework/issues/30481)) ([80a111c](https://github.com/ionic-team/ionic-framework/commit/80a111cffac70e831eb57e827301370163ef4e2a)), closes [#30480](https://github.com/ionic-team/ionic-framework/issues/30480)
-
-
-
-
-
-## [8.6.2](https://github.com/ionic-team/ionic-framework/compare/v8.6.1...v8.6.2) (2025-06-18)
-
-
-### Bug Fixes
-
-* **picker-column:** fallback to elementFromPoint for iOS 16 Shadow DOM bug ([#30479](https://github.com/ionic-team/ionic-framework/issues/30479)) ([6ae2907](https://github.com/ionic-team/ionic-framework/commit/6ae29077424434f3523d75426f3328765a4797f4)), closes [#29672](https://github.com/ionic-team/ionic-framework/issues/29672)
-* **range:** improve focus and blur handling for dual knobs ([#30482](https://github.com/ionic-team/ionic-framework/issues/30482)) ([6811fe5](https://github.com/ionic-team/ionic-framework/commit/6811fe5cc88f132f998476a3f4b956ce21122631))
-
-
-
-
-
 ## [8.6.1](https://github.com/ionic-team/ionic-framework/compare/v8.6.0...v8.6.1) (2025-06-11)
 
 

core/Dockerfile

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

core/api.txt

@@ -667,15 +667,33 @@ ion-content,method,scrollToTop,scrollToTop(duration?: number) => Promise<void>
 ion-content,event,ionScroll,ScrollDetail,true
 ion-content,event,ionScrollEnd,ScrollBaseDetail,true
 ion-content,event,ionScrollStart,ScrollBaseDetail,true
-ion-content,css-prop,--background
-ion-content,css-prop,--color
-ion-content,css-prop,--keyboard-offset
-ion-content,css-prop,--offset-bottom
-ion-content,css-prop,--offset-top
-ion-content,css-prop,--padding-bottom
-ion-content,css-prop,--padding-end
-ion-content,css-prop,--padding-start
-ion-content,css-prop,--padding-top
+ion-content,css-prop,--background,ionic
+ion-content,css-prop,--background,ios
+ion-content,css-prop,--background,md
+ion-content,css-prop,--color,ionic
+ion-content,css-prop,--color,ios
+ion-content,css-prop,--color,md
+ion-content,css-prop,--keyboard-offset,ionic
+ion-content,css-prop,--keyboard-offset,ios
+ion-content,css-prop,--keyboard-offset,md
+ion-content,css-prop,--offset-bottom,ionic
+ion-content,css-prop,--offset-bottom,ios
+ion-content,css-prop,--offset-bottom,md
+ion-content,css-prop,--offset-top,ionic
+ion-content,css-prop,--offset-top,ios
+ion-content,css-prop,--offset-top,md
+ion-content,css-prop,--padding-bottom,ionic
+ion-content,css-prop,--padding-bottom,ios
+ion-content,css-prop,--padding-bottom,md
+ion-content,css-prop,--padding-end,ionic
+ion-content,css-prop,--padding-end,ios
+ion-content,css-prop,--padding-end,md
+ion-content,css-prop,--padding-start,ionic
+ion-content,css-prop,--padding-start,ios
+ion-content,css-prop,--padding-start,md
+ion-content,css-prop,--padding-top,ionic
+ion-content,css-prop,--padding-top,ios
+ion-content,css-prop,--padding-top,md
 ion-content,part,background
 ion-content,part,scroll
 

core/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@ionic/core",
-  "version": "8.6.5",
+  "version": "8.6.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "8.6.5",
+      "version": "8.6.1",
       "license": "MIT",
       "dependencies": {
         "@phosphor-icons/core": "^2.1.1",
@@ -23,13 +23,13 @@
         "@clack/prompts": "^0.11.0",
         "@ionic/eslint-config": "^0.3.0",
         "@ionic/prettier-config": "^2.0.0",
-        "@playwright/test": "^1.54.1",
+        "@playwright/test": "^1.52.0",
         "@rollup/plugin-node-resolve": "^8.4.0",
         "@rollup/plugin-virtual": "^2.0.3",
         "@stencil/angular-output-target": "^0.10.0",
         "@stencil/react-output-target": "0.5.3",
         "@stencil/sass": "^3.0.9",
-        "@stencil/vue-output-target": "0.10.8",
+        "@stencil/vue-output-target": "0.10.7",
         "@types/jest": "^29.5.6",
         "@types/node": "^18.19.47",
         "@typescript-eslint/eslint-plugin": "^6.7.2",
@@ -751,9 +751,9 @@
       }
     },
     "node_modules/@capacitor/core": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-7.4.0.tgz",
-      "integrity": "sha512-P6NnjoHyobZgTjynlZSn27d0SUj6j38inlNxFnKZr9qwU7/r6+0Sg2nWkGkIH/pMmXHsvGD8zVe6KUq1UncIjA==",
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-7.3.0.tgz",
+      "integrity": "sha512-t/DdTyBchQ2eAZuCmAARlqQsrEm0WyeNwh5zeRuv+cR6gnAsw+86/EWvJ/em5dTnZyaqEy8vlmOMdWarrUbnuQ==",
       "dev": true,
       "dependencies": {
         "tslib": "^2.1.0"
@@ -1933,12 +1933,12 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.54.1",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.54.1.tgz",
-      "integrity": "sha512-FS8hQ12acieG2dYSksmLOF7BNxnVf2afRJdCuM1eMSxj6QTSE6G4InGF7oApGgDb65MX7AwMVlIkpru0yZA4Xw==",
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.52.0.tgz",
+      "integrity": "sha512-uh6W7sb55hl7D6vsAeA+V2p5JnlAqzhqFyF0VcJkKZXkgnFcVG9PziERRHQfPLfNGx1C292a4JqbWzhR8L4R1g==",
       "dev": true,
       "dependencies": {
-        "playwright": "1.54.1"
+        "playwright": "1.52.0"
       },
       "bin": {
         "playwright": "cli.js"
@@ -2178,10 +2178,11 @@
       }
     },
     "node_modules/@stencil/vue-output-target": {
-      "version": "0.10.8",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.10.8.tgz",
-      "integrity": "sha512-/a20LG29xqy/lxBqo6zc1LbyS20GW9xghypZ7vYdo5fQB8jHClAQDkn+c8aykQlre5TtHiODgvr/rRDUrQKwyg==",
+      "version": "0.10.7",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.10.7.tgz",
+      "integrity": "sha512-IYxDe+SLCkwhwsWRdynE31rTK1zN3hVwwojQ/V9lrN8Gnx4PTvrUQHiRno9jFo1dk+EaBZWX9gZSmXta0ZaZew==",
       "dev": true,
+      "license": "MIT",
       "peerDependencies": {
         "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0",
         "vue": "^3.4.38",
@@ -9680,12 +9681,12 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.54.1",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.54.1.tgz",
-      "integrity": "sha512-peWpSwIBmSLi6aW2auvrUtf2DqY16YYcCMO8rTVx486jKmDTJg7UAhyrraP98GB8BoPURZP8+nxO7TSd4cPr5g==",
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.52.0.tgz",
+      "integrity": "sha512-JAwMNMBlxJ2oD1kce4KPtMkDeKGHQstdpFPcPH3maElAXon/QZeTvtsfXmTMRyO9TslfoYOXkSsvao2nE1ilTw==",
       "dev": true,
       "dependencies": {
-        "playwright-core": "1.54.1"
+        "playwright-core": "1.52.0"
       },
       "bin": {
         "playwright": "cli.js"
@@ -9698,9 +9699,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.54.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.54.1.tgz",
-      "integrity": "sha512-Nbjs2zjj0htNhzgiy5wu+3w09YetDx5pkrpI/kZotDlDUaYk0HVA5xrBVPdow4SAUIlhgKcJeJg4GRKW6xHusA==",
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.52.0.tgz",
+      "integrity": "sha512-l2osTgLXSMeuLZOML9qYODUQoPPnUsKsb5/P6LJ2e6uPKXUdPK5WYhN4z03G+YNbWmGDY4YENauNu4ZKczreHg==",
       "dev": true,
       "bin": {
         "playwright-core": "cli.js"

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.6.5",
+  "version": "8.6.1",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -45,13 +45,13 @@
     "@clack/prompts": "^0.11.0",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
-    "@playwright/test": "^1.54.1",
+    "@playwright/test": "^1.52.0",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/angular-output-target": "^0.10.0",
     "@stencil/react-output-target": "0.5.3",
     "@stencil/sass": "^3.0.9",
-    "@stencil/vue-output-target": "0.10.8",
+    "@stencil/vue-output-target": "0.10.7",
     "@types/jest": "^29.5.6",
     "@types/node": "^18.19.47",
     "@typescript-eslint/eslint-plugin": "^6.7.2",

core/scripts/tokens/utils.js

@@ -142,12 +142,8 @@ function generateTypographyOutput(prop, propName, isVariable) {
 
 // Generates a color based css utility-class from a color Design Token structure
 function generateColorUtilityClasses(prop, className) {
-  const isBg = className.includes('bg');
-  const cssProp = isBg ? 'background-color' : 'color';
-  return `.${variablesPrefix}-${className} {
-  --${cssProp}: $${variablesPrefix}-${prop.name};
-  ${cssProp}: $${variablesPrefix}-${prop.name};
-}`;
+  return `.${variablesPrefix}-${className} {\n  color: $${variablesPrefix}-${prop.name};\n}
+  .${variablesPrefix}-background-${className} {\n  background-color: $${variablesPrefix}-${prop.name};\n}`;
 }
 
 // Generates margin and padding utility classes to match the token-agnostic
@@ -268,10 +264,7 @@ function generateSpaceUtilityClasses(prop, className) {
 
 // Generates a valid box-shadow value from a shadow Design Token structure
 function generateRadiusUtilityClasses(propName) {
-  return `.${variablesPrefix}-${propName} {
-  --border-radius: $${variablesPrefix}-${propName};
-  border-radius: $${variablesPrefix}-${propName};
-}`;
+  return `.${variablesPrefix}-${propName} {\n  border-radius: $${variablesPrefix}-${propName};\n}`;
 }
 
 // Generates a border based css utility-class from a font Design Token structure
@@ -289,10 +282,7 @@ function generateBorderUtilityClasses(prop, propName) {
     default:
       attribute = 'border-color';
   }
-  return `.${variablesPrefix}-${propName} {
-  --${attribute}: $${variablesPrefix}-${propName};
-  ${attribute}: $${variablesPrefix}-${propName};
-}`;
+  return `.${variablesPrefix}-${propName} {\n  ${attribute}: $${variablesPrefix}-${propName};\n}`;
 }
 
 // Generates a font based css utility-class from a font Design Token structure
@@ -302,10 +292,7 @@ function generateFontUtilityClasses(prop, propName) {
 
 // Generates a valid box-shadow value from a shadow Design Token structure
 function generateShadowUtilityClasses(propName) {
-  return `.${variablesPrefix}-${propName} {
-  --box-shadow: $${variablesPrefix}-${propName};
-  box-shadow: $${variablesPrefix}-${propName};
-}`;
+  return `.${variablesPrefix}-${propName} {\n  box-shadow: $${variablesPrefix}-${propName};\n}`;
 }
 
 // Generates a utility class for a given token category and name

core/src/components/accordion-group/test/expand/accordion-group.e2e.ts

@@ -10,7 +10,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           <style>
             /* Background styles to show the border radius */
             :root {
-              --background: #ccc7c7;
+              background: #ccc7c7;
             }
           </style>
           <ion-accordion-group>
@@ -48,7 +48,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           <style>
             /* Background styles to show the border radius */
             :root {
-              --background: #ccc7c7;
+              background: #ccc7c7;
             }
           </style>
           <ion-accordion-group value="first">
@@ -88,7 +88,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           <style>
             /* Background styles to show the border radius */
             :root {
-              --background: #ccc7c7;
+              background: #ccc7c7;
             }
           </style>
           <ion-accordion-group expand="inset">
@@ -126,7 +126,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           <style>
             /* Background styles to show the border radius */
             :root {
-              --background: #ccc7c7;
+              background: #ccc7c7;
             }
           </style>
           <ion-accordion-group value="first" expand="inset">

core/src/components/accordion-group/test/shape/accordion-group.e2e.ts

@@ -10,7 +10,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           <style>
             /* Background styles to show the border radius */
             :root {
-              --background: #222;
+              background: #222;
             }
           </style>
 

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

@@ -10,7 +10,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           <style>
             /* Background styles to show the border radius */
             :root {
-              --background: #222;
+              background: #222;
             }
           </style>
 

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

@@ -212,15 +212,16 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
 
   /**
    * Dismiss the action sheet overlay after it has been presented.
-   * This is a no-op if the overlay has not been presented yet. If you want
-   * to remove an overlay from the DOM that was never presented, use the
-   * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
    *
    * @param data Any data to emit in the dismiss events.
    * @param role The role of the element that is dismissing the action sheet.
    * This can be useful in a button handler for determining which button was
-   * clicked to dismiss the action sheet. Some examples include:
-   * `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
+   * clicked to dismiss the action sheet.
+   * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
+   *
+   * This is a no-op if the overlay has not been presented yet. If you want
+   * to remove an overlay from the DOM that was never presented, use the
+   * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
    */
   @Method()
   async dismiss(data?: any, role?: string): Promise<boolean> {

core/src/components/alert/alert.tsx

@@ -434,15 +434,16 @@ export class Alert implements ComponentInterface, OverlayInterface {
 
   /**
    * Dismiss the alert overlay after it has been presented.
-   * This is a no-op if the overlay has not been presented yet. If you want
-   * to remove an overlay from the DOM that was never presented, use the
-   * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
    *
    * @param data Any data to emit in the dismiss events.
    * @param role The role of the element that is dismissing the alert.
    * This can be useful in a button handler for determining which button was
-   * clicked to dismiss the alert. Some examples include:
-   * `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
+   * clicked to dismiss the alert.
+   * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
+   *
+   * This is a no-op if the overlay has not been presented yet. If you want
+   * to remove an overlay from the DOM that was never presented, use the
+   * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
    */
   @Method()
   async dismiss(data?: any, role?: string): Promise<boolean> {

core/src/components/app/app.tsx

@@ -25,7 +25,7 @@ export class App implements ComponentInterface {
    * inside of a popover when the user presents it, but the popover is not always
    * presented as a result of keyboard action.)
    *
-   * @param elements An array of HTML elements to set focus on.
+   * @param elements - The elements to set focus on.
    */
   @Method()
   async setFocus(elements: HTMLElement[]) {

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

@@ -4,226 +4,11 @@ import { configs, test } from '@utils/test/playwright';
 configs().forEach(({ config, screenshot, title }) => {
   test.describe(title('breadcrumbs: basic'), () => {
     test('should not have visual regressions', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-breadcrumbs>
-          <ion-breadcrumb>First</ion-breadcrumb>
-          <ion-breadcrumb>Second</ion-breadcrumb>
-          <ion-breadcrumb>Third</ion-breadcrumb>
-          <ion-breadcrumb>Fourth</ion-breadcrumb>
-        </ion-breadcrumbs>
-      `,
-        config
-      );
+      await page.goto(`/src/components/breadcrumbs/test/basic`, config);
 
-      const breadcrumbs = page.locator('ion-breadcrumbs');
+      await page.setIonViewport();
 
-      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-basic`));
-    });
-
-    test('should not have visual regressions with links', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-breadcrumbs>
-          <ion-breadcrumb href="#">First</ion-breadcrumb>
-          <ion-breadcrumb href="#">Second</ion-breadcrumb>
-          <ion-breadcrumb href="#">Third</ion-breadcrumb>
-          <ion-breadcrumb>Fourth</ion-breadcrumb>
-        </ion-breadcrumbs>
-      `,
-        config
-      );
-
-      const breadcrumbs = page.locator('ion-breadcrumbs');
-
-      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-links`));
-    });
-
-    test('should not have visual regressions with custom separators', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-breadcrumbs>
-          <ion-breadcrumb>
-            First
-            <ion-icon slot="separator" name="arrow-forward"></ion-icon>
-          </ion-breadcrumb>
-          <ion-breadcrumb>
-            Second
-            <ion-icon slot="separator" name="arrow-forward"></ion-icon>
-          </ion-breadcrumb>
-          <ion-breadcrumb>
-            Third
-            <ion-icon slot="separator" name="arrow-forward"></ion-icon>
-          </ion-breadcrumb>
-          <ion-breadcrumb>
-            Fourth
-          </ion-breadcrumb>
-        </ion-breadcrumbs>
-      `,
-        config
-      );
-
-      const breadcrumbs = page.locator('ion-breadcrumbs');
-
-      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-custom-separators`));
-    });
-
-    test('should not have visual regressions with slotted start icons', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-breadcrumbs>
-          <ion-breadcrumb>
-            <ion-icon slot="start" name="home"></ion-icon>
-            First
-          </ion-breadcrumb>
-          <ion-breadcrumb>
-            <ion-icon slot="start" name="folder"></ion-icon>
-            Second
-          </ion-breadcrumb>
-          <ion-breadcrumb>
-            <ion-icon slot="start" name="folder"></ion-icon>
-            Third
-          </ion-breadcrumb>
-          <ion-breadcrumb>
-            <ion-icon slot="start" name="document"></ion-icon>
-            Fourth
-          </ion-breadcrumb>
-        </ion-breadcrumbs>
-      `,
-        config
-      );
-
-      const breadcrumbs = page.locator('ion-breadcrumbs');
-
-      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-slotted-start-icons`));
-    });
-
-    test('should not have visual regressions with slotted end icons', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-breadcrumbs>
-          <ion-breadcrumb>
-            First
-            <ion-icon slot="end" name="home"></ion-icon>
-          </ion-breadcrumb>
-          <ion-breadcrumb>
-            Second
-            <ion-icon slot="end" name="folder"></ion-icon>
-          </ion-breadcrumb>
-          <ion-breadcrumb>
-            Third
-            <ion-icon slot="end" name="folder"></ion-icon>
-          </ion-breadcrumb>
-          <ion-breadcrumb>
-            Fourth
-            <ion-icon slot="end" name="document"></ion-icon>
-          </ion-breadcrumb>
-        </ion-breadcrumbs>
-      `,
-        config
-      );
-
-      const breadcrumbs = page.locator('ion-breadcrumbs');
-
-      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-slotted-end-icons`));
-    });
-
-    test('should not have visual regressions in a toolbar', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-toolbar>
-          <ion-breadcrumbs>
-            <ion-breadcrumb>First</ion-breadcrumb>
-            <ion-breadcrumb>Second</ion-breadcrumb>
-            <ion-breadcrumb>Third</ion-breadcrumb>
-            <ion-breadcrumb>Fourth</ion-breadcrumb>
-          </ion-breadcrumbs>
-        </ion-toolbar>
-      `,
-        config
-      );
-
-      const breadcrumbs = page.locator('ion-breadcrumbs');
-
-      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-in-toolbar`));
-    });
-  });
-});
-
-/**
- * This behavior does not vary across directions
- */
-configs({ directions: ['ltr'] }).forEach(({ config, screenshot, title }) => {
-  test.describe(title('breadcrumbs: states'), () => {
-    test('should not have visual regressions when focused', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-breadcrumbs>
-          <ion-breadcrumb href="#">First</ion-breadcrumb>
-          <ion-breadcrumb href="#">Second</ion-breadcrumb>
-          <ion-breadcrumb href="#" class="ion-focused">Third</ion-breadcrumb>
-          <ion-breadcrumb>Fourth</ion-breadcrumb>
-        </ion-breadcrumbs>
-      `,
-        config
-      );
-
-      const breadcrumbs = page.locator('ion-breadcrumbs');
-      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-focused`));
-    });
-
-    test('should not have visual regressions when all breadcrumbs are disabled', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-breadcrumbs>
-          <ion-breadcrumb disabled>First</ion-breadcrumb>
-          <ion-breadcrumb disabled>Second</ion-breadcrumb>
-          <ion-breadcrumb disabled>Third</ion-breadcrumb>
-          <ion-breadcrumb disabled>Fourth</ion-breadcrumb>
-        </ion-breadcrumbs>
-      `,
-        config
-      );
-
-      const breadcrumbs = page.locator('ion-breadcrumbs');
-
-      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-all-disabled`));
-    });
-
-    test('should not have visual regressions when one breadcrumb is disabled', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-breadcrumbs>
-          <ion-breadcrumb>First</ion-breadcrumb>
-          <ion-breadcrumb disabled>Second</ion-breadcrumb>
-          <ion-breadcrumb>Third</ion-breadcrumb>
-          <ion-breadcrumb>Fourth</ion-breadcrumb>
-        </ion-breadcrumbs>
-      `,
-        config
-      );
-
-      const breadcrumbs = page.locator('ion-breadcrumbs');
-
-      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-one-disabled`));
-    });
-
-    test('should not have visual regressions when setting a different breadcrumb to active', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-breadcrumbs>
-          <ion-breadcrumb>First</ion-breadcrumb>
-          <ion-breadcrumb>Second</ion-breadcrumb>
-          <ion-breadcrumb active>Third</ion-breadcrumb>
-          <ion-breadcrumb>Fourth</ion-breadcrumb>
-        </ion-breadcrumbs>
-      `,
-        config
-      );
-
-      const breadcrumbs = page.locator('ion-breadcrumbs');
-
-      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-custom-active`));
+      await expect(page).toHaveScreenshot(screenshot(`breadcrumb-diff`));
     });
   });
 });