add spinbutton poc

Issue number: resolves #28284

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Select focuses the first popover option when no value is provided. This
means that the first option is focused even if it disabled.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Select focuses the first **enabled** popover option when no value is
provided.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>

.github/workflows/stencil-nightly.yml

@@ -8,7 +8,12 @@ on:
     # at 6:00 UTC (6:00 am UTC)
     - cron: '00 06 * * 1-5'
   workflow_dispatch:
-    # allows for manual invocations in the GitHub UI
+    inputs:
+      npm_release_tag:
+        required: true
+        type: string
+        description: What version should be pulled from NPM?
+        default: nightly
 
 # When pushing a new commit we should
 # cancel the previous test run to not
@@ -24,7 +29,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: ./.github/workflows/actions/build-core-stencil-prerelease
         with:
-          stencil-version: nightly
+          stencil-version: ${{ inputs.npm_release_tag || 'nightly' }}
 
   test-core-clean-build:
     needs: [build-core-with-stencil-nightly]
@@ -47,7 +52,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: ./.github/workflows/actions/test-core-spec
         with:
-          stencil-version: nightly
+          stencil-version: ${{ inputs.npm_release_tag || 'nightly' }}
 
   test-core-screenshot:
     strategy:

CHANGELOG.md

@@ -3,6 +3,45 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.4.3](https://github.com/ionic-team/ionic-framework/compare/v7.4.2...v7.4.3) (2023-10-04)
+
+
+### Bug Fixes
+
+* **fab-button:** position is correct with custom sizes ([#28195](https://github.com/ionic-team/ionic-framework/issues/28195)) ([eb41b55](https://github.com/ionic-team/ionic-framework/commit/eb41b556b57c97139b9c36dc3e3be3711d8afaca)), closes [#22564](https://github.com/ionic-team/ionic-framework/issues/22564)
+* **range:** knob positions are correct on initial render with custom elements build ([#28257](https://github.com/ionic-team/ionic-framework/issues/28257)) ([ac2c8e6](https://github.com/ionic-team/ionic-framework/commit/ac2c8e6c22da4d0d8224def24ddef56ee9d26246)), closes [#25444](https://github.com/ionic-team/ionic-framework/issues/25444)
+
+
+
+
+
+## [7.4.2](https://github.com/ionic-team/ionic-framework/compare/v7.4.1...v7.4.2) (2023-09-27)
+
+
+### Bug Fixes
+
+* **react:** Nav unmounts component while invoking popTo or popToRoot ([#27821](https://github.com/ionic-team/ionic-framework/issues/27821)) ([0edcb2c](https://github.com/ionic-team/ionic-framework/commit/0edcb2cd85133ae8c304c53c37ca829e5fbad447)), closes [#27798](https://github.com/ionic-team/ionic-framework/issues/27798)
+* **title:** large title uses custom font on transition ([#28231](https://github.com/ionic-team/ionic-framework/issues/28231)) ([71a7af0](https://github.com/ionic-team/ionic-framework/commit/71a7af0f52fe62937b1dea1ca2739e78801a2a6d))
+
+
+
+
+
+## [7.4.1](https://github.com/ionic-team/ionic-framework/compare/v7.4.0...v7.4.1) (2023-09-20)
+
+
+### Bug Fixes
+
+* **overlays:** correctly re-add root to accessibility tree ([#28183](https://github.com/ionic-team/ionic-framework/issues/28183)) ([81714d4](https://github.com/ionic-team/ionic-framework/commit/81714d45bd97f0ba91729959b60a0dc1d1d06533)), closes [#28180](https://github.com/ionic-team/ionic-framework/issues/28180)
+* **radio,toggle,checkbox,select:** padded space is clickable in items ([#28136](https://github.com/ionic-team/ionic-framework/issues/28136)) ([5b7e422](https://github.com/ionic-team/ionic-framework/commit/5b7e422dc0bfd4d58fb31f62715af47e62dabb57)), closes [#27169](https://github.com/ionic-team/ionic-framework/issues/27169)
+* **range:** knob is not cut off in item with modern syntax ([#28199](https://github.com/ionic-team/ionic-framework/issues/28199)) ([0104d89](https://github.com/ionic-team/ionic-framework/commit/0104d899270d73e16f2850a5fd7d2ba25a9e7ef0)), closes [#27199](https://github.com/ionic-team/ionic-framework/issues/27199)
+* **scroll-assist:** improve input scroll accuracy with native resizing ([#28169](https://github.com/ionic-team/ionic-framework/issues/28169)) ([b5c736f](https://github.com/ionic-team/ionic-framework/commit/b5c736f5ac829efebedf3256ddf77ab3daa7a5f6)), closes [#22940](https://github.com/ionic-team/ionic-framework/issues/22940)
+* **scroll-assist:** re-run when keyboard changes ([#28174](https://github.com/ionic-team/ionic-framework/issues/28174)) ([3f06da4](https://github.com/ionic-team/ionic-framework/commit/3f06da4cfc0d59c658e17e09ccb1ea28a29339f9)), closes [#22940](https://github.com/ionic-team/ionic-framework/issues/22940)
+
+
+
+
+
 # [7.4.0](https://github.com/ionic-team/ionic-framework/compare/v7.3.4...v7.4.0) (2023-09-14)
 
 

core/CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.4.3](https://github.com/ionic-team/ionic-framework/compare/v7.4.2...v7.4.3) (2023-10-04)
+
+
+### Bug Fixes
+
+* **fab-button:** position is correct with custom sizes ([#28195](https://github.com/ionic-team/ionic-framework/issues/28195)) ([eb41b55](https://github.com/ionic-team/ionic-framework/commit/eb41b556b57c97139b9c36dc3e3be3711d8afaca)), closes [#22564](https://github.com/ionic-team/ionic-framework/issues/22564)
+* **range:** knob positions are correct on initial render with custom elements build ([#28257](https://github.com/ionic-team/ionic-framework/issues/28257)) ([ac2c8e6](https://github.com/ionic-team/ionic-framework/commit/ac2c8e6c22da4d0d8224def24ddef56ee9d26246)), closes [#25444](https://github.com/ionic-team/ionic-framework/issues/25444)
+
+
+
+
+
+## [7.4.2](https://github.com/ionic-team/ionic-framework/compare/v7.4.1...v7.4.2) (2023-09-27)
+
+
+### Bug Fixes
+
+* **title:** large title uses custom font on transition ([#28231](https://github.com/ionic-team/ionic-framework/issues/28231)) ([71a7af0](https://github.com/ionic-team/ionic-framework/commit/71a7af0f52fe62937b1dea1ca2739e78801a2a6d))
+
+
+
+
+
+## [7.4.1](https://github.com/ionic-team/ionic-framework/compare/v7.4.0...v7.4.1) (2023-09-20)
+
+
+### Bug Fixes
+
+* **overlays:** correctly re-add root to accessibility tree ([#28183](https://github.com/ionic-team/ionic-framework/issues/28183)) ([81714d4](https://github.com/ionic-team/ionic-framework/commit/81714d45bd97f0ba91729959b60a0dc1d1d06533)), closes [#28180](https://github.com/ionic-team/ionic-framework/issues/28180)
+* **radio,toggle,checkbox,select:** padded space is clickable in items ([#28136](https://github.com/ionic-team/ionic-framework/issues/28136)) ([5b7e422](https://github.com/ionic-team/ionic-framework/commit/5b7e422dc0bfd4d58fb31f62715af47e62dabb57)), closes [#27169](https://github.com/ionic-team/ionic-framework/issues/27169)
+* **range:** knob is not cut off in item with modern syntax ([#28199](https://github.com/ionic-team/ionic-framework/issues/28199)) ([0104d89](https://github.com/ionic-team/ionic-framework/commit/0104d899270d73e16f2850a5fd7d2ba25a9e7ef0)), closes [#27199](https://github.com/ionic-team/ionic-framework/issues/27199)
+* **scroll-assist:** improve input scroll accuracy with native resizing ([#28169](https://github.com/ionic-team/ionic-framework/issues/28169)) ([b5c736f](https://github.com/ionic-team/ionic-framework/commit/b5c736f5ac829efebedf3256ddf77ab3daa7a5f6)), closes [#22940](https://github.com/ionic-team/ionic-framework/issues/22940)
+* **scroll-assist:** re-run when keyboard changes ([#28174](https://github.com/ionic-team/ionic-framework/issues/28174)) ([3f06da4](https://github.com/ionic-team/ionic-framework/commit/3f06da4cfc0d59c658e17e09ccb1ea28a29339f9)), closes [#22940](https://github.com/ionic-team/ionic-framework/issues/22940)
+
+
+
+
+
 # [7.4.0](https://github.com/ionic-team/ionic-framework/compare/v7.3.4...v7.4.0) (2023-09-14)
 
 

core/package-lock.json

@@ -1,33 +1,33 @@
 {
   "name": "@ionic/core",
-  "version": "7.4.0",
+  "version": "7.4.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "7.4.0",
+      "version": "7.4.3",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "^4.2.1",
+        "@stencil/core": "^4.4.1",
         "ionicons": "7.1.0",
         "tslib": "^2.1.0"
       },
       "devDependencies": {
         "@axe-core/playwright": "^4.7.3",
-        "@capacitor/core": "^5.4.0",
+        "@capacitor/core": "^5.4.2",
         "@capacitor/haptics": "^5.0.6",
         "@capacitor/keyboard": "^5.0.6",
         "@capacitor/status-bar": "^5.0.6",
         "@ionic/eslint-config": "^0.3.0",
         "@ionic/prettier-config": "^2.0.0",
         "@jest/core": "^27.5.1",
-        "@playwright/test": "^1.38.0",
+        "@playwright/test": "^1.38.1",
         "@rollup/plugin-node-resolve": "^8.4.0",
         "@rollup/plugin-virtual": "^2.0.3",
         "@stencil/angular-output-target": "^0.8.2",
         "@stencil/react-output-target": "^0.5.3",
-        "@stencil/sass": "^3.0.5",
+        "@stencil/sass": "^3.0.6",
         "@stencil/vue-output-target": "^0.8.6",
         "@types/jest": "^27.5.2",
         "@types/node": "^14.6.0",
@@ -607,9 +607,9 @@
       "dev": true
     },
     "node_modules/@capacitor/core": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.4.0.tgz",
-      "integrity": "sha512-lBWMbhPtvtcPoICdvqOaTsS9GDFlw1QHgkHZ5rxQF4Nvahikllvcud1fEu4ta28pykMUSlpCX2iDXYustYaATg==",
+      "version": "5.4.2",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.4.2.tgz",
+      "integrity": "sha512-XbR1vldJFzBWHeoGPpgfNy3Zhjf0NxXdHEaGNANWVBg0ZWG2gwFr1dcRALUUQtbwrEEkCCNiLYg4YiQPRk7SEQ==",
       "dev": true,
       "dependencies": {
         "tslib": "^2.1.0"
@@ -1541,12 +1541,12 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.38.0",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.38.0.tgz",
-      "integrity": "sha512-xis/RXXsLxwThKnlIXouxmIvvT3zvQj1JE39GsNieMUrMpb3/GySHDh2j8itCG22qKVD4MYLBp7xB73cUW/UUw==",
+      "version": "1.38.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.38.1.tgz",
+      "integrity": "sha512-NqRp8XMwj3AK+zKLbZShl0r/9wKgzqI/527bkptKXomtuo+dOjU9NdMASQ8DNC9z9zLOMbG53T4eihYr3XR+BQ==",
       "dev": true,
       "dependencies": {
-        "playwright": "1.38.0"
+        "playwright": "1.38.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -1630,9 +1630,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.2.1.tgz",
-      "integrity": "sha512-alYwqVwxfD0n6HKRVJqJoTzQNnf44n/sddvjNu3JMEn3sfY/Ag7rpmwUntYjtJmRut+or+9gPPgIJviCuKi4yQ==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.4.1.tgz",
+      "integrity": "sha512-SirGcrb5yKHCn2BwdM7HGVXuvCdmwiXlVczEj8jJxQIm42CAUQCUECxtZidTzp+oZBZnWLnoAvfanchJsgkQzA==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -1651,9 +1651,9 @@
       }
     },
     "node_modules/@stencil/sass": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.5.tgz",
-      "integrity": "sha512-9nyllMXOEvHywo6fP2iwXgnq32A+OOUE36Aq7iUjzwT3wdr04qsvupO1JNIyRvmvCDF15hOKXztrZH1/wDu2Zg==",
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.6.tgz",
+      "integrity": "sha512-d+k8qCvDgzI/vIV7M5QavIS6b75X4yn+YQH80KA/L0oL/hKD8KeF3wMOd7P1nDhGLIGRNw5tBDbe0GeIsGVU7A==",
       "dev": true,
       "engines": {
         "node": ">=12.0.0",
@@ -8190,12 +8190,12 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.38.0",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.38.0.tgz",
-      "integrity": "sha512-fJGw+HO0YY+fU/F1N57DMO+TmXHTrmr905J05zwAQE9xkuwP/QLDk63rVhmyxh03dYnEhnRbsdbH9B0UVVRB3A==",
+      "version": "1.38.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.38.1.tgz",
+      "integrity": "sha512-oRMSJmZrOu1FP5iu3UrCx8JEFRIMxLDM0c/3o4bpzU5Tz97BypefWf7TuTNPWeCe279TPal5RtPPZ+9lW/Qkow==",
       "dev": true,
       "dependencies": {
-        "playwright-core": "1.38.0"
+        "playwright-core": "1.38.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -8208,9 +8208,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.38.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.38.0.tgz",
-      "integrity": "sha512-f8z1y8J9zvmHoEhKgspmCvOExF2XdcxMW8jNRuX4vkQFrzV4MlZ55iwb5QeyiFQgOFCUolXiRHgpjSEnqvO48g==",
+      "version": "1.38.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.38.1.tgz",
+      "integrity": "sha512-tQqNFUKa3OfMf4b2jQ7aGLB8o9bS3bOY0yMEtldtC2+spf8QXG9zvXLTXUeRsoNuxEYMgLYR+NXfAa1rjKRcrg==",
       "dev": true,
       "bin": {
         "playwright-core": "cli.js"
@@ -10802,9 +10802,9 @@
       "dev": true
     },
     "@capacitor/core": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.4.0.tgz",
-      "integrity": "sha512-lBWMbhPtvtcPoICdvqOaTsS9GDFlw1QHgkHZ5rxQF4Nvahikllvcud1fEu4ta28pykMUSlpCX2iDXYustYaATg==",
+      "version": "5.4.2",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.4.2.tgz",
+      "integrity": "sha512-XbR1vldJFzBWHeoGPpgfNy3Zhjf0NxXdHEaGNANWVBg0ZWG2gwFr1dcRALUUQtbwrEEkCCNiLYg4YiQPRk7SEQ==",
       "dev": true,
       "requires": {
         "tslib": "^2.1.0"
@@ -11469,12 +11469,12 @@
       }
     },
     "@playwright/test": {
-      "version": "1.38.0",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.38.0.tgz",
-      "integrity": "sha512-xis/RXXsLxwThKnlIXouxmIvvT3zvQj1JE39GsNieMUrMpb3/GySHDh2j8itCG22qKVD4MYLBp7xB73cUW/UUw==",
+      "version": "1.38.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.38.1.tgz",
+      "integrity": "sha512-NqRp8XMwj3AK+zKLbZShl0r/9wKgzqI/527bkptKXomtuo+dOjU9NdMASQ8DNC9z9zLOMbG53T4eihYr3XR+BQ==",
       "dev": true,
       "requires": {
-        "playwright": "1.38.0"
+        "playwright": "1.38.1"
       }
     },
     "@rollup/plugin-node-resolve": {
@@ -11536,9 +11536,9 @@
       "requires": {}
     },
     "@stencil/core": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.2.1.tgz",
-      "integrity": "sha512-alYwqVwxfD0n6HKRVJqJoTzQNnf44n/sddvjNu3JMEn3sfY/Ag7rpmwUntYjtJmRut+or+9gPPgIJviCuKi4yQ=="
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.4.1.tgz",
+      "integrity": "sha512-SirGcrb5yKHCn2BwdM7HGVXuvCdmwiXlVczEj8jJxQIm42CAUQCUECxtZidTzp+oZBZnWLnoAvfanchJsgkQzA=="
     },
     "@stencil/react-output-target": {
       "version": "0.5.3",
@@ -11548,9 +11548,9 @@
       "requires": {}
     },
     "@stencil/sass": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.5.tgz",
-      "integrity": "sha512-9nyllMXOEvHywo6fP2iwXgnq32A+OOUE36Aq7iUjzwT3wdr04qsvupO1JNIyRvmvCDF15hOKXztrZH1/wDu2Zg==",
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.6.tgz",
+      "integrity": "sha512-d+k8qCvDgzI/vIV7M5QavIS6b75X4yn+YQH80KA/L0oL/hKD8KeF3wMOd7P1nDhGLIGRNw5tBDbe0GeIsGVU7A==",
       "dev": true,
       "requires": {}
     },
@@ -16344,19 +16344,19 @@
       }
     },
     "playwright": {
-      "version": "1.38.0",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.38.0.tgz",
-      "integrity": "sha512-fJGw+HO0YY+fU/F1N57DMO+TmXHTrmr905J05zwAQE9xkuwP/QLDk63rVhmyxh03dYnEhnRbsdbH9B0UVVRB3A==",
+      "version": "1.38.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.38.1.tgz",
+      "integrity": "sha512-oRMSJmZrOu1FP5iu3UrCx8JEFRIMxLDM0c/3o4bpzU5Tz97BypefWf7TuTNPWeCe279TPal5RtPPZ+9lW/Qkow==",
       "dev": true,
       "requires": {
         "fsevents": "2.3.2",
-        "playwright-core": "1.38.0"
+        "playwright-core": "1.38.1"
       }
     },
     "playwright-core": {
-      "version": "1.38.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.38.0.tgz",
-      "integrity": "sha512-f8z1y8J9zvmHoEhKgspmCvOExF2XdcxMW8jNRuX4vkQFrzV4MlZ55iwb5QeyiFQgOFCUolXiRHgpjSEnqvO48g==",
+      "version": "1.38.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.38.1.tgz",
+      "integrity": "sha512-tQqNFUKa3OfMf4b2jQ7aGLB8o9bS3bOY0yMEtldtC2+spf8QXG9zvXLTXUeRsoNuxEYMgLYR+NXfAa1rjKRcrg==",
       "dev": true
     },
     "postcss": {

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "7.4.0",
+  "version": "7.4.3",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -31,25 +31,25 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "^4.2.1",
+    "@stencil/core": "^4.4.1",
     "ionicons": "7.1.0",
     "tslib": "^2.1.0"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.7.3",
-    "@capacitor/core": "^5.4.0",
+    "@capacitor/core": "^5.4.2",
     "@capacitor/haptics": "^5.0.6",
     "@capacitor/keyboard": "^5.0.6",
     "@capacitor/status-bar": "^5.0.6",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
     "@jest/core": "^27.5.1",
-    "@playwright/test": "^1.38.0",
+    "@playwright/test": "^1.38.1",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/angular-output-target": "^0.8.2",
     "@stencil/react-output-target": "^0.5.3",
-    "@stencil/sass": "^3.0.5",
+    "@stencil/sass": "^3.0.6",
     "@stencil/vue-output-target": "^0.8.6",
     "@types/jest": "^27.5.2",
     "@types/node": "^14.6.0",
@@ -95,6 +95,7 @@
     "test.spec": "stencil test --spec --max-workers=2",
     "test.spec.debug": "npx --node-arg=\"--inspect-brk\" stencil test --spec",
     "test.e2e": "npx playwright test",
+    "test.e2e.update-snapshots": "npm run test.e2e -- --update-snapshots",
     "test.watch": "jest --watch --no-cache",
     "test.treeshake": "node scripts/treeshaking.js dist/index.js",
     "validate": "npm run lint && npm run test && npm run build && npm run test.treeshake"

core/playwright.config.ts

@@ -60,7 +60,8 @@ const config: PlaywrightTestConfig = {
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
   maxFailures: 0,
-  retries: 2,
+  /* Test retries help catch flaky tests on CI */
+  retries: process.env.CI ? 2 : 0,
   reportSlowTests: null,
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,

core/src/components.d.ts

@@ -1336,6 +1336,7 @@ export namespace Components {
         "download": string | undefined;
         /**
           * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
+          * @deprecated Use the `fill` property on `ion-input` or `ion-textarea` instead.
          */
         "fill"?: 'outline' | 'solid';
         /**
@@ -5407,6 +5408,7 @@ declare namespace LocalJSX {
         "download"?: string | undefined;
         /**
           * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
+          * @deprecated Use the `fill` property on `ion-input` or `ion-textarea` instead.
          */
         "fill"?: 'outline' | 'solid';
         /**
@@ -6974,6 +6976,7 @@ declare namespace LocalJSX {
          */
         "mode"?: "ios" | "md";
         "onIonTabBarChanged"?: (event: IonTabBarCustomEvent<TabBarChangedEventDetail>) => void;
+        "onIonTabBarLoaded"?: (event: IonTabBarCustomEvent<void>) => void;
         /**
           * The selected tab component
          */

core/src/components/checkbox/checkbox.tsx

@@ -140,9 +140,8 @@ export class Checkbox implements ComponentInterface {
    */
   @Event() ionStyle!: EventEmitter<StyleEventDetail>;
 
-  // TODO(FW-3100): remove this
   connectedCallback() {
-    this.legacyFormController = createLegacyFormController(this.el);
+    this.legacyFormController = createLegacyFormController(this.el); // TODO(FW-3100): remove this
   }
 
   componentWillLoad() {
@@ -195,7 +194,7 @@ export class Checkbox implements ComponentInterface {
     });
   };
 
-  private toggleChecked = (ev: any) => {
+  private toggleChecked = (ev: Event) => {
     ev.preventDefault();
 
     this.setFocus();
@@ -211,6 +210,14 @@ export class Checkbox implements ComponentInterface {
     this.ionBlur.emit();
   };
 
+  private onClick = (ev: MouseEvent) => {
+    if (this.disabled) {
+      return;
+    }
+
+    this.toggleChecked(ev);
+  };
+
   // TODO(FW-3100): run contents of renderCheckbox directly instead
   render() {
     const { legacyFormController } = this;
@@ -252,6 +259,7 @@ export class Checkbox implements ComponentInterface {
           [`checkbox-alignment-${alignment}`]: true,
           [`checkbox-label-placement-${labelPlacement}`]: true,
         })}
+        onClick={this.onClick}
       >
         <label class="checkbox-wrapper">
           {/*
@@ -333,6 +341,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
           'legacy-checkbox': true,
           interactive: true,
         })}
+        onClick={this.onClick}
       >
         <svg class="checkbox-icon" viewBox="0 0 24 24" part="container">
           {path}

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

@@ -83,5 +83,28 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await checkbox.evaluate((el: HTMLIonCheckboxElement) => (el.checked = true));
       expect(ionChange).not.toHaveReceivedEvent();
     });
+
+    test('clicking padded space within item should click the checkbox', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-item>
+          <ion-checkbox>Size</ion-checkbox>
+        </ion-item>
+      `,
+        config
+      );
+      const itemNative = page.locator('.item-native');
+      const ionChange = await page.spyOnEvent('ionChange');
+
+      // Clicks the padded space within the item
+      await itemNative.click({
+        position: {
+          x: 5,
+          y: 5,
+        },
+      });
+
+      expect(ionChange).toHaveReceivedEvent();
+    });
   });
 });

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

@@ -0,0 +1,24 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import { Checkbox } from '../checkbox';
+
+describe('ion-checkbox: disabled', () => {
+  it('clicking disabled checkbox should not toggle checked state', async () => {
+    const page = await newSpecPage({
+      components: [Checkbox],
+      html: `
+        <ion-checkbox disabled="true">Checkbox</ion-checkbox>
+      `,
+    });
+
+    const checkbox = page.body.querySelector('ion-checkbox');
+
+    expect(checkbox.checked).toBe(false);
+
+    checkbox.click();
+
+    await page.waitForChanges();
+
+    expect(checkbox.checked).toBe(false);
+  });
+});

core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts

@@ -67,5 +67,28 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
       await checkbox.evaluate((el: HTMLIonCheckboxElement) => (el.checked = true));
       await expect(ionChange).not.toHaveReceivedEvent();
     });
+
+    test('clicking padded space within item should click the checkbox', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-item>
+          <ion-checkbox legacy="true" value="my-checkbox"></ion-checkbox>
+        </ion-item>
+      `,
+        config
+      );
+      const itemNative = page.locator('.item-native');
+      const ionChange = await page.spyOnEvent('ionChange');
+
+      // Clicks the padded space within the item
+      await itemNative.click({
+        position: {
+          x: 5,
+          y: 5,
+        },
+      });
+
+      expect(ionChange).toHaveReceivedEvent();
+    });
   });
 });

core/src/components/content/content.tsx

@@ -1,6 +1,6 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Build, Component, Element, Event, Host, Listen, Method, Prop, forceUpdate, h, readTask } from '@stencil/core';
-import { componentOnReady } from '@utils/helpers';
+import { componentOnReady, hasLazyBuild } from '@utils/helpers';
 import { isPlatform } from '@utils/platform';
 import { isRTL } from '@utils/rtl';
 import { createColorClasses, hostContext } from '@utils/theme';
@@ -34,6 +34,9 @@ export class Content implements ComponentInterface {
   private isMainContent = true;
   private resizeTimeout: ReturnType<typeof setTimeout> | null = null;
 
+  private tabsElement: HTMLElement | null = null;
+  private tabsLoadCallback?: () => void;
+
   // Detail is used in a hot loop in the scroll event, by allocating it here
   // V8 will be able to inline any read/write to it since it's a monomorphic class.
   // https://mrale.ph/blog/2015/01/11/whats-up-with-monomorphism.html
@@ -115,15 +118,61 @@ export class Content implements ComponentInterface {
 
   connectedCallback() {
     this.isMainContent = this.el.closest('ion-menu, ion-popover, ion-modal') === null;
+
+    /**
+     * The fullscreen content offsets need to be
+     * computed after the tab bar has loaded. Since
+     * lazy evaluation means components are not hydrated
+     * at the same time, we need to wait for the ionTabBarLoaded
+     * event to fire. This does not impact dist-custom-elements
+     * because there is no hydration there.
+     */
+    if (hasLazyBuild(this.el)) {
+      /**
+       * We need to cache the reference to the tabs.
+       * If just the content is unmounted then we won't
+       * be able to query for the closest tabs on disconnectedCallback
+       * since the content has been removed from the DOM tree.
+       */
+      const closestTabs = (this.tabsElement = this.el.closest('ion-tabs'));
+      if (closestTabs !== null) {
+        /**
+         * When adding and removing the event listener
+         * we need to make sure we pass the same function reference
+         * otherwise the event listener will not be removed properly.
+         * We can't only pass `this.resize` because "this" in the function
+         * context becomes a reference to IonTabs instead of IonContent.
+         *
+         * Additionally, we listen for ionTabBarLoaded on the IonTabs
+         * instance rather than the IonTabBar instance. It's possible for
+         * a tab bar to be conditionally rendered/mounted. Since ionTabBarLoaded
+         * bubbles, we can catch any instances of child tab bars loading by listening
+         * on IonTabs.
+         */
+        this.tabsLoadCallback = () => this.resize();
+        closestTabs.addEventListener('ionTabBarLoaded', this.tabsLoadCallback);
+      }
+    }
   }
 
   disconnectedCallback() {
     this.onScrollEnd();
-  }
 
-  @Listen('appload', { target: 'window' })
-  onAppLoad() {
-    this.resize();
+    if (hasLazyBuild(this.el)) {
+      /**
+       * The event listener and tabs caches need to
+       * be cleared otherwise this will create a memory
+       * leak where the IonTabs instance can never be
+       * garbage collected.
+       */
+      const { tabsElement, tabsLoadCallback } = this;
+      if (tabsElement !== null && tabsLoadCallback !== undefined) {
+        tabsElement.removeEventListener('ionTabBarLoaded', tabsLoadCallback);
+      }
+
+      this.tabsElement = null;
+      this.tabsLoadCallback = undefined;
+    }
   }
 
   /**

core/src/components/fab-button/fab-button.scss

@@ -199,7 +199,7 @@
 // --------------------------------------------------
 
 :host(.fab-button-small) {
-  @include margin(($fab-size - $fab-small-size) * 0.5);
+  @include margin($fab-button-small-margin);
 
   width: #{$fab-small-size};
   height: #{$fab-small-size};

core/src/components/fab-button/fab-button.vars.scss

@@ -11,3 +11,6 @@ $fab-small-size:                         40px !default;
 
 /// @prop - Border radius of the FAB button
 $fab-border-radius:                     50% !default;
+
+/// @prop - Margin applied to the small FAB button
+$fab-button-small-margin: 8px !default;

core/src/components/fab-list/fab-list.scss

@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 :host {
-  @include margin($fab-size + $fab-list-margin, 0);
+  @include margin(calc(100% + #{$fab-list-margin}), 0);
 
   display: none;
   position: absolute;
@@ -13,8 +13,15 @@
   flex-direction: column;
   align-items: center;
 
-  min-width: $fab-size;
-  min-height: $fab-size;
+  /**
+   * The list should be centered relative to the parent
+   * FAB button. We set minimum dimensions so the
+   * FAB list can be centered relative to the small FAB button.
+   * However, the small FAB button adds start/end margin, so we need
+   * to account for that in the FAB list dimensions.
+   */
+  min-width: $fab-small-size + ($fab-button-small-margin * 2);
+  min-height: $fab-small-size + ($fab-button-small-margin * 2);
 }
 
 :host(.fab-list-active) {
@@ -59,14 +66,14 @@
 }
 
 :host(.fab-list-side-start) {
-  @include margin(0, $fab-size + $fab-list-margin);
+  @include margin(0, calc(100% + #{$fab-list-margin}));
   @include position-horizontal(null, 0);
 
   flex-direction: row-reverse;
 }
 
 :host(.fab-list-side-end) {
-  @include margin(0, $fab-size + $fab-list-margin);
+  @include margin(0, calc(100% + #{$fab-list-margin}));
   @include position(null, null, null, 0);
 
   flex-direction: row;

core/src/components/fab/fab.scss

@@ -1,4 +1,5 @@
 @import "./fab.vars";
+@import "../fab-list/fab-list.vars";
 
 // Floating Action Button Container
 // --------------------------------------------------
@@ -6,6 +7,9 @@
 :host {
   position: absolute;
 
+  width: fit-content;
+  height: fit-content;
+
   z-index: $z-index-fixed-content;
 }
 
@@ -14,8 +18,8 @@
 // --------------------------------------------------
 
 :host(.fab-horizontal-center) {
-  @include position(null, null, null, 50%);
-  @include margin-horizontal(-$fab-size * 0.5, null);
+  @include position(null, 0px, null, 0px);
+  @include margin(null, auto);
 }
 
 :host(.fab-horizontal-start) {
@@ -38,22 +42,93 @@
   top: $fab-content-margin;
 }
 
+/**
+ * Reset the top value since edge
+ * styles use margin-top.
+ */
 :host(.fab-vertical-top.fab-edge) {
-  top: -$fab-size * 0.5;
+  top: 0;
 }
 
+/**
+ * We need to adjust the parent FAB button up by half
+ * its height so that half of it sits on the header. As a result,
+ * we target the slotted ion-fab-button instead of targeting the host.
+ */
+:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-button) {
+  margin-top: -50%;
+}
+
+/**
+ * The small FAB button adds top and bottom margin. We need to account for
+ * that margin when we adjust the FAB button for edge styles since we
+ * are overriding the margin-top value below.
+ */
+:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-button.fab-button-small) {
+  margin-top: calc((-100% + $fab-button-small-margin * 2) / 2);
+}
+
+/**
+ * Since we are adjusting the FAB button we also need
+ * to adjust the sibling ion-fab-list otherwise there will be
+ * a gap between the parent FAB button and the associated list.
+ */
+:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-start),
+:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-end) {
+  @include margin(-50%, null, null, null);
+}
+
+:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-top),
+:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-bottom) {
+  @include margin(calc(50% + #{$fab-list-margin}) null, null, null);
+}
 
 :host(.fab-vertical-bottom) {
   bottom: $fab-content-margin;
 }
 
+/**
+ * Reset the bottom value since edge
+ * styles use margin-bottom.
+ */
 :host(.fab-vertical-bottom.fab-edge) {
-  bottom: -$fab-size * 0.5;
+  bottom: 0;
 }
 
+/**
+ * We need to adjust the parent FAB button down by half
+ * its height so that half of it sits on the footer. As a result,
+ * we target the slotted ion-fab-button instead of targeting the host.
+ */
+:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-button) {
+  margin-bottom: -50%;
+}
+
+/**
+ * The small FAB button adds top and bottom margin. We need to account for
+ * that margin when we adjust the FAB button for edge styles since we
+ * are overriding the margin-bottom value below.
+ */
+:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-button.fab-button-small) {
+  margin-bottom: calc((-100% + $fab-button-small-margin * 2) / 2);
+}
+
+/**
+ * Since we are adjusting the FAB button we also need
+ * to adjust the sibling ion-fab-list otherwise there will be
+ * a gap between the parent FAB button and the associated list.
+ */
+:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-start),
+:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-end) {
+  @include margin(null, null, -50%, null);
+}
+
+:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-top),
+:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-bottom) {
+  @include margin(null, null, calc(50% + #{$fab-list-margin}) null);
+}
 
 :host(.fab-vertical-center) {
-  @include margin(-$fab-size * 0.5, null, null, null);
-
-  top: 50%;
+  @include position(0px, null, 0px, null);
+  @include margin(auto, null);
 }

core/src/components/fab/test/custom-size/fab.e2e.ts

@@ -0,0 +1,17 @@
+import { expect } from '@playwright/test';
+import { configs, test, Viewports } from '@utils/test/playwright';
+
+/**
+ * This behavior does not vary across modes
+ */
+configs({ modes: ['ios'] }).forEach(({ title, config, screenshot }) => {
+  test.describe(title('fab: custom size'), () => {
+    test('should position fabs correctly with custom sizes', async ({ page }) => {
+      await page.goto(`/src/components/fab/test/custom-size`, config);
+
+      await page.setViewportSize(Viewports.tablet.landscape);
+
+      await expect(page).toHaveScreenshot(screenshot(`fab-custom-size`));
+    });
+  });
+});

core/src/components/fab/test/custom-size/index.html

@@ -0,0 +1,241 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Floating Action Button - Custom Size</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      .ruler-y {
+        height: 100%;
+        width: 1px;
+
+        background: red;
+
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+
+        margin: 0 auto;
+
+        z-index: 10000;
+      }
+
+      .ruler-x {
+        height: 1px;
+        width: 100%;
+
+        background: red;
+
+        position: absolute;
+        top: 50%;
+        bottom: 0;
+        left: 0;
+        right: 0;
+
+        margin: 0 auto;
+
+        z-index: 10000;
+
+        transform: translateY(-50%);
+      }
+
+      ion-fab-button {
+        width: 80px;
+        height: 80px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Floating Action Button - Custom Size</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="ion-padding" id="content">
+        <div class="ruler-y"></div>
+        <div class="ruler-x"></div>
+
+        <ion-fab vertical="top" horizontal="start" slot="fixed" edge="true">
+          <ion-fab-button activated="true">
+            <ion-icon name="add"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-list side="bottom" activated="true">
+            <ion-fab-button show="true">
+              <ion-icon name="logo-facebook"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-vimeo"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-instagram"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+          <ion-fab-list side="end" activated="true">
+            <ion-fab-button show="true">
+              <ion-icon name="logo-facebook"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-vimeo"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-instagram"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+        </ion-fab>
+
+        <ion-fab vertical="top" horizontal="end" slot="fixed" edge="true">
+          <ion-fab-button activated="true">
+            <ion-icon name="add"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-list side="start" activated="true">
+            <ion-fab-button show="true">
+              <ion-icon name="logo-facebook"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-vimeo"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-instagram"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+          <ion-fab-list side="bottom" activated="true">
+            <ion-fab-button show="true">
+              <ion-icon name="logo-facebook"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-vimeo"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-instagram"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+        </ion-fab>
+
+        <ion-fab vertical="bottom" horizontal="start" slot="fixed" edge="true">
+          <ion-fab-button activated="true">
+            <ion-icon name="add"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-list side="top" activated="true">
+            <ion-fab-button show="true">
+              <ion-icon name="logo-facebook"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-vimeo"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-instagram"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+          <ion-fab-list side="end" activated="true">
+            <ion-fab-button show="true">
+              <ion-icon name="logo-facebook"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-vimeo"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-instagram"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+        </ion-fab>
+
+        <ion-fab vertical="bottom" horizontal="end" slot="fixed" edge="true">
+          <ion-fab-button activated="true">
+            <ion-icon name="add"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-list side="start" activated="true">
+            <ion-fab-button show="true">
+              <ion-icon name="logo-facebook"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-vimeo"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-instagram"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+          <ion-fab-list side="top" activated="true">
+            <ion-fab-button show="true">
+              <ion-icon name="logo-facebook"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-vimeo"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-instagram"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+        </ion-fab>
+
+        <ion-fab vertical="center" horizontal="center" slot="fixed">
+          <ion-fab-button activated="true">
+            <ion-icon name="add"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-list side="start" activated="true">
+            <ion-fab-button show="true">
+              <ion-icon name="logo-facebook"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-vimeo"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-instagram"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+          <ion-fab-list side="top" activated="true">
+            <ion-fab-button show="true">
+              <ion-icon name="logo-facebook"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-vimeo"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-instagram"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+          <ion-fab-list side="bottom" activated="true">
+            <ion-fab-button show="true">
+              <ion-icon name="logo-facebook"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-vimeo"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-instagram"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+          <ion-fab-list side="end" activated="true">
+            <ion-fab-button show="true">
+              <ion-icon name="logo-facebook"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-vimeo"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-instagram"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+        </ion-fab>
+      </ion-content>
+
+      <ion-footer>
+        <ion-toolbar>
+          <ion-title>Floating Action Button - Basic</ion-title>
+        </ion-toolbar>
+      </ion-footer>
+    </ion-app>
+  </body>
+</html>

core/src/components/header/header.ios.scss

@@ -107,3 +107,28 @@
 .header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-buttons.buttons-collapse {
   visibility: hidden;
 }
+
+/**
+ * The main header is only hidden once the collapsible large
+ * title is configured. As a result, if the main header loads
+ * before the collapsible large title is configured then the
+ * main header will be visible briefly before being hidden
+ * by the collapsible large title.
+ *
+ * The following selector ensures that any main header
+ * on a page with a collapsible large title is hidden
+ * before the collapsible large title is configured.
+ * Once the collapsible large title is configured the main
+ * header will have the ".header-collapse-main" class, and
+ * this selector will no longer apply.
+ *
+ * The :has(...) part of the selector ensures a couple things:
+ * 1. This will only apply within a page view since the content
+ * must be a subsequent-sibling of the header (~ ion-content).
+ * 2. This will only apply when that content has a collapse header (ion-header[collapse="condense"])
+ *
+ * We use opacity: 0 to avoid a layout shift.
+ */
+ion-header:not(.header-collapse-main):has(~ ion-content ion-header[collapse="condense"]) {
+  opacity: 0;
+}

core/src/components/item-sliding/test/basic/item-sliding.e2e.ts

@@ -1,18 +1,53 @@
 import { expect } from '@playwright/test';
 import { configs, dragElementBy, test } from '@utils/test/playwright';
 
-import { testSlidingItem } from '../test.utils';
-
 /**
- * item-sliding doesn't have mode-specific styling
+ * item-sliding doesn't have mode-specific styling,
+ * but the child components, item-options and item-option, do.
+ *
+ * It is important to test all modes to ensure that the
+ * child components are being rendered correctly.
  */
-configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
+configs().forEach(({ title, screenshot, config }) => {
   test.describe(title('item-sliding: basic'), () => {
-    test.fixme('should not have visual regressions', async ({ page }) => {
+    test.beforeEach(async ({ page }) => {
       await page.goto(`/src/components/item-sliding/test/basic`, config);
+    });
+    test.describe('start options', () => {
+      test('should not have visual regressions', async ({ page }) => {
+        const item = page.locator('#item2');
 
-      await testSlidingItem(page, 'item2', 'start', screenshot, true);
-      await testSlidingItem(page, 'item2', 'end', screenshot);
+        /**
+         * Negative dragByX value to drag element from the right to the left
+         * to reveal the options on the right side.
+         * Positive dragByX value to drag element from the left to the right
+         * to reveal the options on the left side.
+         */
+        const dragByX = config.direction === 'rtl' ? -150 : 150;
+
+        await dragElementBy(item, page, dragByX);
+        await page.waitForChanges();
+
+        await expect(item).toHaveScreenshot(screenshot('item-sliding-start'));
+      });
+    });
+
+    test.describe('end options', () => {
+      test('should not have visual regressions', async ({ page }) => {
+        const item = page.locator('#item2');
+
+        /**
+         * Negative dragByX value to drag element from the right to the left
+         * to reveal the options on the right side.
+         * Positive dragByX value to drag element from the left to the right
+         * to reveal the options on the left side.
+         */
+        const dragByX = config.direction === 'rtl' ? 150 : -150;
+
+        await dragElementBy(item, page, dragByX);
+
+        await expect(item).toHaveScreenshot(screenshot('item-sliding-end'));
+      });
     });
   });
 });

core/src/components/item-sliding/test/icons/item-sliding.e2e.ts

@@ -1,19 +1,36 @@
-import { configs, test } from '@utils/test/playwright';
+import { expect } from '@playwright/test';
+import { configs, test, dragElementBy } from '@utils/test/playwright';
 
-import { testSlidingItem } from '../test.utils';
-
-// TODO FW-3006
 /**
- * item-sliding doesn't have mode-specific styling
+ * item-sliding doesn't have mode-specific styling,
+ * but the child components, item-options and item-option, do.
+ *
+ * It is important to test all modes to ensure that the
+ * child components are being rendered correctly.
  */
-configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
-  test.describe.skip(title('item-sliding: icons'), () => {
+configs().forEach(({ title, screenshot, config }) => {
+  test.describe(title('item-sliding: icons'), () => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto(`/src/components/item-sliding/test/icons`, config);
 
       const itemIDs = ['iconsOnly', 'iconsStart', 'iconsEnd', 'iconsTop', 'iconsBottom'];
       for (const itemID of itemIDs) {
-        await testSlidingItem(page, itemID, itemID, screenshot);
+        const item = page.locator(`#${itemID}`);
+
+        /**
+         * Negative dragByX value to drag element from the right to the left
+         * to reveal the options on the right side.
+         * Positive dragByX value to drag element from the left to the right
+         * to reveal the options on the left side.
+         */
+        const dragByX = config.direction === 'rtl' ? 150 : -150;
+
+        await dragElementBy(item, page, dragByX);
+        await page.waitForChanges();
+
+        // Convert camelCase ids to kebab-case for screenshot file names
+        const itemIDKebab = itemID.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+        await expect(item).toHaveScreenshot(screenshot(`item-sliding-${itemIDKebab}`));
       }
     });
   });