fix(select): ensure select sizes are respected when the label is empty

core/src/components/select/select.common.scss

@@ -57,16 +57,6 @@
   cursor: pointer;
 }
 
-/**
- * Since the label sits on top of the element,
- * the component needs to be taller otherwise the
- * label will appear too close to the select text.
- */
-:host(.select-label-placement-floating),
-:host(.select-label-placement-stacked) {
-  min-height: 56px;
-}
-
 :host(.ion-color) {
   --highlight-color-focused: #{current-color(base)};
 }
@@ -221,17 +211,6 @@ button {
   overflow: hidden;
 }
 
-:host(.select-label-placement-stacked) .select-wrapper-inner,
-:host(.select-label-placement-floating) .select-wrapper-inner {
-  /**
-   * When using a stacked/floating label, the inner wrapper is
-   * stacked vertically under the label container. This line
-   * ensures that the inner wrapper fills all the remaining height
-   * of the component.
-   */
-  flex-grow: 1;
-}
-
 // Select Highlight
 // ----------------------------------------------------------------
 

core/src/components/select/select.native.scss

@@ -118,6 +118,27 @@
   max-width: calc(100% / #{$form-control-label-stacked-scale});
 }
 
+/**
+ * Since the label sits on top of the element,
+ * the component needs to be taller otherwise the
+ * label will appear too close to the select text.
+ */
+:host(.select-label-placement-floating),
+:host(.select-label-placement-stacked) {
+  min-height: 56px;
+}
+
+/**
+ * When using a stacked/floating label, the inner wrapper is
+ * stacked vertically under the label container. This line
+ * ensures that the inner wrapper fills all the remaining height
+ * of the component.
+ */
+:host(.select-label-placement-stacked) .select-wrapper-inner,
+:host(.select-label-placement-floating) .select-wrapper-inner {
+  flex-grow: 1;
+}
+
 // Start/End Slots
 // ----------------------------------------------------------------
 

core/src/components/select/test/size/index.html

@@ -47,20 +47,29 @@ <h2>Small</h2>
             <ion-select size="small" fill="outline" label="Label" label-placement="stacked" value="filledText">
               <ion-select-option value="filledText">Filled text</ion-select-option>
             </ion-select>
+            <ion-select size="small" fill="outline" label="" label-placement="stacked" value="filledText2">
+              <ion-select-option value="filledText2">Filled text</ion-select-option>
+            </ion-select>
           </div>
 
           <div class="grid-item">
             <h2>Medium</h2>
             <ion-select size="medium" fill="outline" label="Label" label-placement="stacked" value="filledText">
               <ion-select-option value="filledText">Filled text</ion-select-option>
             </ion-select>
+            <ion-select size="medium" fill="outline" label="" label-placement="stacked" value="filledText2">
+              <ion-select-option value="filledText2">Filled text</ion-select-option>
+            </ion-select>
           </div>
 
           <div class="grid-item">
             <h2>Large</h2>
             <ion-select size="large" fill="outline" label="Label" label-placement="stacked" value="filledText">
               <ion-select-option value="filledText">Filled text</ion-select-option>
             </ion-select>
+            <ion-select size="large" fill="outline" label="" label-placement="stacked" value="filledText2">
+              <ion-select-option value="filledText2">Filled text</ion-select-option>
+            </ion-select>
           </div>
         </div>
       </ion-content>

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

@@ -28,6 +28,26 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ config, screens
 
         await expect(select).toHaveScreenshot(screenshot(`select-size-${size}`));
       });
+
+      test(`${size} - should not have visual regressions when label is unset`, async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-select 
+            size="${size}"
+            fill="outline"
+            label-placement="stacked"
+            value="filledText"
+          >
+            <ion-select-option value="filledText">Filled text</ion-select-option>
+          </ion-select>
+      `,
+          config
+        );
+
+        const select = page.locator('ion-select');
+
+        await expect(select).toHaveScreenshot(screenshot(`select-size-${size}-unset-label`));
+      });
     });
   });
 });