fix(radio, checkbox, toggle): add top and bottom margins when in ion-item (#27788)

Issue number: Resolves #27498

---------

<!-- 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. -->

When `ion-radio`, `ion-checkbox`, or `ion-toggle` is used within
`ion-item`, top and bottom margins are not added to the label, while
they are present when using the legacy syntax. We didn't catch this
because the issue is only visible when using a label that breaks onto
more than one line; otherwise, the height of the item exceeds what the
margins would've added.

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

Margins added. Values were taken from `ion-item` styles
[here](096d9cc931/core/src/components/item/item.ios.scss (L203-L206))
and
[here](096d9cc931/core/src/components/item/item.md.scss (L298-L301)),
which no longer get applied because the `ion-label` is nested in an
additional shadow component. Note that left/right margins are already
included in the modern syntax labels.

## 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. -->

This PR is a combination of the following:
- https://github.com/ionic-team/ionic-framework/pull/27771
- https://github.com/ionic-team/ionic-framework/pull/27783
- https://github.com/ionic-team/ionic-framework/pull/27784

---------

Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>

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

@@ -50,3 +50,24 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('checkbox: long label in item'), () => {
+    test('should render margins correctly when using long label in item', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-list>
+            <ion-item>
+              <ion-checkbox justify="start">
+                <ion-label class="ion-text-wrap">Enable Notifications Enable Notifications Enable Notifications</ion-label>
+              </ion-checkbox>
+            </ion-item>
+          </ion-list>
+        `,
+        config
+      );
+      const list = page.locator('ion-list');
+      expect(await list.screenshot()).toMatchSnapshot(screenshot(`checkbox-long-label-in-item`));
+    });
+  });
+});

core/src/components/checkbox/test/item/index.html

@@ -148,6 +148,19 @@
             </ion-list>
           </div>
         </div>
+
+        <h1>Multiline Label</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <ion-item>
+              <ion-checkbox justify="start">
+                <ion-label class="ion-text-wrap">
+                  Enable Notifications Enable Notifications Enable Notifications
+                </ion-label>
+              </ion-checkbox>
+            </ion-item>
+          </div>
+        </div>
       </ion-content>
     </ion-app>
   </body>