fix(select): adjust label alignment when in a card (#27202)

Issue URL: resolves #27086

---------

<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- 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 an `ion-select` is inside a card, the label is slightly lower than
it should be, making it out of alignment with the label of an
`ion-input`.


<!-- Issues are required for both bug fixes and features. -->


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- When inside a card, the labels of `ion-input` and `ion-select` are in
line with each other.

## 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 bug was occurring because the label of ion-select is in the shadow
DOM. [As
recommended](https://github.com/ionic-team/ionic-framework/issues/27086#issuecomment-1494427311),
this fix was also added to ion-input and ion-textarea in case those
labels are also later moved to the shadow DOM.


Before:
<img width="534" alt="Screenshot 2023-04-13 at 4 35 44 PM"
src="https://user-images.githubusercontent.com/14926794/231877123-02f8e381-2137-4d3c-8dab-ae9051ad3591.png">

After:
<img width="535" alt="Screenshot 2023-04-13 at 4 36 02 PM"
src="https://user-images.githubusercontent.com/14926794/231877151-bd49b87b-762a-4d20-b6b7-57c1ab3bb368.png">

---------

Co-authored-by: ionitron <hi@ionicframework.com>

core/src/components/input/input.scss

@@ -299,6 +299,8 @@
   transition: background-color 15ms linear;
 
   background: var(--background);
+
+  line-height: normal;
 }
 
 // Input Native Wrapper

core/src/components/input/test/card/input.e2e.ts

@@ -0,0 +1,22 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('input: card', () => {
+  test('should render correctly in card', async ({ page, skip }) => {
+    skip.rtl();
+    skip.mode('ios');
+
+    await page.setContent(`
+      <ion-card>
+        <ion-card-content>
+          <ion-item style="border: 1px solid grey" lines="none">
+            <ion-input label="input" label-placement="stacked"></ion-input>
+          </ion-item>
+        </ion-card-content>
+      </ion-card>
+    `);
+
+    const card = page.locator('ion-card');
+    expect(await card.screenshot()).toMatchSnapshot(`input-card-${page.getSnapshotSettings()}.png`);
+  });
+});

core/src/components/select/select.scss

@@ -214,6 +214,8 @@ button {
 
   background: var(--background);
 
+  line-height: normal;
+
   cursor: inherit;
 
   box-sizing: border-box;

core/src/components/select/test/card/select.e2e.ts

@@ -0,0 +1,22 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('select: card', () => {
+  test('should render correctly in card', async ({ page, skip }) => {
+    skip.rtl();
+    skip.mode('ios');
+
+    await page.setContent(`
+      <ion-card>
+        <ion-card-content>
+          <ion-item style="border: 1px solid grey" lines="none">
+            <ion-select label="select" label-placement="stacked"></ion-select>
+          </ion-item>
+        </ion-card-content>
+      </ion-card>
+    `);
+
+    const card = page.locator('ion-card');
+    expect(await card.screenshot()).toMatchSnapshot(`select-card-${page.getSnapshotSettings()}.png`);
+  });
+});

core/src/components/textarea/test/card/textarea.e2e.ts

@@ -0,0 +1,22 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('textarea: card', () => {
+  test('should render correctly in card', async ({ page, skip }) => {
+    skip.rtl();
+    skip.mode('ios');
+
+    await page.setContent(`
+      <ion-card>
+        <ion-card-content>
+          <ion-item style="border: 1px solid grey" lines="none">
+            <ion-textarea label="textarea" label-placement="stacked"></ion-textarea>
+          </ion-item>
+        </ion-card-content>
+      </ion-card>
+    `);
+
+    const card = page.locator('ion-card');
+    expect(await card.screenshot()).toMatchSnapshot(`textarea-card-${page.getSnapshotSettings()}.png`);
+  });
+});

core/src/components/textarea/textarea.scss

@@ -261,6 +261,8 @@
   transition: background-color 15ms linear;
 
   background: var(--background);
+
+  line-height: normal;
 }
 
 // Textarea Native Wrapper