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

v7.x

Current Behavior

When using "ion-text-wrap" around a label to allow long labels for checkboxes to span multiple lines as described in #27509 this makes the actual checkbox vertically aligned central with the label text due to the shadow element "checkbox-wrapper" having the style "align-items: center". This prevents you from being able to align the checkbox at the top when you have long label text spanning multiple lines.

Expected Behavior

Need to be able to change the vertically alignment for "checkbox-wrapper" to "align-items: flex-start".

Steps to Reproduce

Create a checkbox as follows:

`

   <ion-checkbox [(ngModel)]="item.Checked" labelPlacement="end">
       <div class="ion-text-wrap">This is a really long label for a checkbox that will span onto multiple lines because there is so much text in it</div>
   </ion-checkbox>

`

Code Reproduction URL

https://stackblitz.com/edit/angular-k51j4b?file=src%2Fapp%2Fexample.component.html,src%2Fapp%2Fexample.component.css

Ionic Info

Ionic:

Ionic CLI : 6.19.1 (C:\Users\WebFletch\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : not installed
@angular-devkit/build-angular : 16.2.14
@angular-devkit/schematics : 16.2.14
@angular/cli : 16.2.14
@ionic/angular-toolkit : 11.0.1

Capacitor:

Capacitor CLI : 6.1.2
@capacitor/android : 6.1.2
@capacitor/core : 6.1.2
@capacitor/ios : 6.1.2

Utility:

cordova-res : 0.15.4
native-run : 2.0.1

System:

NodeJS : v18.20.4 (C:\Program Files\nodejs\node.exe)
npm : 9.8.1
OS : Windows 10

Additional Information

No response