bug: sheet modal. Cloned ion-footer doesn't apply stylesheets

[kumibrr]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.5.x

Current Behavior

When using sheet modals with expandToScroll = false, the cloned footer will not clone the stylesheets the original footer has.

This is noticeable immediately with iOS stylesheets applied, as the following style from modal.ios.scss will not be applied to the cloned footer

:host(.modal-sheet.modal-no-expand-scroll) ion-footer ion-toolbar:first-of-type {
  padding-top: $modal-sheet-padding-top;
}

footer.mov

Expected Behavior

The same styles should be applied to the cloned footer.

Steps to Reproduce

1. Create a sheet modal with expandToScroll = false
2. Apply custom styles to the footer and the elements in it. They must not be inlined, because inline styles will be cloned over.
3. Open the modal and change breakpoints.

The issue will be noticeable when breakpoint animation occurs.

Code Reproduction URL

https://stackblitz.com/edit/sjtqcsqr-qifxcqcp?file=src%2Fapp%2Fexample.component.css

Ionic Info

Ionic:

Ionic CLI: 7.2.1
Ionic Framework: @ionic/angular 8.5.1
@angular-devkit/build-angular: 19.2.4
@angular-devkit/schematics: not installed
@angular/cli: 19.2.4
@ionic/angular-toolkit: 12.1.1

Utility:

cordova-res: not installed globally
native-run : not installed globally

System:

NodeJS: v20.18.1
npm: 10.8.2
OS: macOS Unknown

Additional Information

No response

[thetaPC]

Thank you for submitting the issue!

I was able to reproduce this and we'll be looking into a solution.

[ShaneK]

Hey @kumibrr, I mentioned this in your other issue, but I do believe my PR should address this issue. If you want to test it, it's the same dev build, 8.5.8-dev.11748374591.17686118