feat(select-modal): add select default modal styling for ionic theme (#30771)

Issue number: resolves #

---------

<!-- 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?
Once IonSelect was using a modal-default (with no breakpoints) the
styling of the modal do not fit with the expected ones for ionic theme.
<img width="433" height="933" alt="Screenshot 2025-11-06 at 11 01 00"
src="https://github.com/user-attachments/assets/c9e23203-0f42-4ee3-af23-9d8f43936fd3"
/>



## What is the new behavior?
Under the same context new styling has been added.
<img width="429" height="930" alt="Screenshot 2025-11-06 at 11 01 22"
src="https://github.com/user-attachments/assets/e6fdfea0-2b09-424e-bb83-4af3c66d67a4"
/>



## Does this introduce a breaking change?

- [ ] Yes
- [X] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->

core/src/components/modal/modal.ionic.scss

@@ -27,6 +27,16 @@
   --border-radius: #{globals.$ion-border-radius-0};
 }
 
+// Default Modal
+// --------------------------------------------------
+
+// Modal when inside a select default-modal
+:host(.select-modal.modal-default) {
+  --max-height: 45%;
+  --max-width: calc(100% - (#{globals.$ion-space-400} * 2));
+  --min-height: 340px;
+}
+
 // Sheet Modal
 // --------------------------------------------------
 

core/src/components/select-modal/select-modal.ionic.scss

@@ -4,6 +4,10 @@
 // Ionic Select Modal
 // --------------------------------------------------
 
+:host(.in-modal-default) ion-content::part(scroll) {
+  --padding-bottom: #{globals.$ion-space-400};
+}
+
 // Item
 // ----------------------------------------------------------------
 

core/src/components/select-modal/select-modal.tsx

@@ -2,7 +2,7 @@ import { getIonMode } from '@global/ionic-global';
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, forceUpdate, h } from '@stencil/core';
 import { safeCall } from '@utils/overlays';
-import { getClassMap } from '@utils/theme';
+import { getClassMap, hostContext } from '@utils/theme';
 
 import type { CheckboxCustomEvent } from '../checkbox/checkbox-interface';
 import type { RadioGroupCustomEvent } from '../radio-group/radio-group-interface';
@@ -74,6 +74,14 @@ export class SelectModal implements ComponentInterface {
     }
   }
 
+  private getModalContextClasses() {
+    const el = this.el;
+    return {
+      'in-modal-default': hostContext('ion-modal.modal-default', el),
+      'in-modal-sheet': hostContext('ion-modal.modal-sheet', el),
+    };
+  }
+
   private renderRadioOptions() {
     const checked = this.options.filter((o) => o.checked).map((o) => o.value)[0];
 
@@ -143,7 +151,12 @@ export class SelectModal implements ComponentInterface {
 
   render() {
     return (
-      <Host class={getIonMode(this)}>
+      <Host
+        class={{
+          [getIonMode(this)]: true,
+          ...this.getModalContextClasses(),
+        }}
+      >
         <ion-header>
           <ion-toolbar>
             {this.header !== undefined && <ion-title>{this.header}</ion-title>}