fix(select-option): add rich content styles

core/src/components/action-sheet/action-sheet.common.scss

@@ -243,10 +243,18 @@
   align-items: center;
 }
 
+.action-sheet-button-label-has-rich-content,
 .select-option-content {
   flex: 1;
 }
 
+.select-option-start,
+.select-option-end {
+  display: flex;
+
+  align-items: center;
+}
+
 .select-option-description {
   display: block;
 }

core/src/components/action-sheet/action-sheet.ionic.scss

@@ -1,22 +1,111 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "../../themes/mixins" as mixins;
+@use "../../themes/functions.font" as fontMixins;
 @use "./action-sheet.common";
-@use "./action-sheet.md" as action-sheet-md;
 
 // Ionic Action Sheet
 // --------------------------------------------------
 
+:host {
+  --background: #{globals.$ion-bg-surface-default};
+  --backdrop-opacity: 0.7;
+  --button-background: transparent;
+  --button-background-selected: currentColor;
+  --button-background-selected-opacity: 0;
+  --button-background-activated: transparent;
+  --button-background-activated-opacity: 0;
+  --button-background-hover: currentColor;
+  --button-background-hover-opacity: 0.04;
+  --button-background-focused: currentColor;
+  --button-background-focused-opacity: 0.12;
+  --button-color: #{globals.$ion-text-default};
+  --button-color-disabled: var(--button-color);
+  --color: #{globals.$ion-text-default};
+}
+
+// Action Sheet Wrapper
+// -----------------------------------------
+
+.action-sheet-wrapper {
+  @include mixins.margin(var(--ion-safe-area-top, 0), auto, 0, auto);
+}
+
+.action-sheet-title {
+  @include mixins.padding(globals.$ion-scale-400);
+  @include globals.typography(globals.$ion-heading-h6-medium);
+
+  color: var(--color);
+
+  text-align: start;
+}
+
+.action-sheet-sub-title {
+  @include globals.typography(globals.$ion-body-lg-regular);
+}
+
+// Action Sheet Group
+// -----------------------------------------
+
+.action-sheet-group:first-child {
+  @include mixins.padding(globals.$ion-scale-400, null, null, null);
+}
+
+.action-sheet-group:last-child {
+  @include mixins.padding(null, null, globals.$ion-scale-400, null);
+}
+
+// Action Sheet Buttons
+// -----------------------------------------
+
+.action-sheet-button {
+  @include mixins.padding(
+    globals.$ion-scale-300,
+    globals.$ion-scale-400,
+    globals.$ion-scale-300,
+    globals.$ion-scale-400
+  );
+  @include globals.typography(globals.$ion-body-md-regular);
+
+  position: relative;
+
+  min-height: 52px;
+
+  text-align: start;
+
+  contain: content;
+  overflow: hidden;
+}
+
+.action-sheet-icon {
+  @include mixins.margin(globals.$ion-scale-0, globals.$ion-scale-600, globals.$ion-scale-0, globals.$ion-scale-0);
+  @include globals.typography(globals.$ion-body-md-regular);
+
+  color: var(--color, globals.$ion-text-default);
+}
+
+.action-sheet-button-inner {
+  justify-content: flex-start;
+}
+
+.action-sheet-selected {
+  font-weight: bold;
+}
+
 // Action Sheet: Select Option
 // --------------------------------------------------
 
 .action-sheet-button-label {
   gap: globals.$ion-space-300;
 }
 
+.select-option-start,
+.select-option-end {
+  gap: globals.$ion-space-200;
+}
+
 .select-option-description {
   @include globals.typography(globals.$ion-body-md-regular);
   @include globals.padding(0);
 
   color: globals.$ion-text-subtle;
-
-  font-size: globals.$ion-font-size-350;
 }

core/src/components/action-sheet/action-sheet.md.scss

@@ -1,7 +1,7 @@
 @import "./action-sheet.native";
 @import "./action-sheet.md.vars";
 
-// Material Design Action Sheet Title
+// Material Design Action Sheet
 // -----------------------------------------
 
 :host {

core/src/components/action-sheet/action-sheet.native.scss

@@ -10,6 +10,11 @@
   gap: 12px;
 }
 
+.select-option-start,
+.select-option-end {
+  gap: 8px;
+}
+
 .select-option-description {
   @include mixins.padding(5px, 0, 0, 0);
 

core/src/components/alert/alert.common.scss

@@ -262,6 +262,13 @@ textarea.alert-input {
   flex: 1;
 }
 
+.select-option-start,
+.select-option-end {
+  display: flex;
+
+  align-items: center;
+}
+
 .select-option-description {
   display: block;
 }

core/src/components/alert/alert.ionic.scss

@@ -13,6 +13,11 @@
   gap: globals.$ion-space-300;
 }
 
+.select-option-start,
+.select-option-end {
+  gap: globals.$ion-space-200;
+}
+
 .select-option-description {
   @include globals.typography(globals.$ion-body-md-regular);
   @include globals.padding(0);

core/src/components/alert/alert.native.scss

@@ -11,6 +11,11 @@
   gap: 12px;
 }
 
+.select-option-start,
+.select-option-end {
+  gap: 8px;
+}
+
 .select-option-description {
   @include mixins.padding(5px, 0, 0, 0);
 

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

@@ -14,6 +14,26 @@
   align-items: center;
 }
 
+ion-radio.select-option-has-rich-content::part(label),
+ion-checkbox.select-option-has-rich-content::part(label),
+.select-option-content {
+  flex: 1;
+
+  /**
+   * Let rich content wrap instead of inheriting the label part's
+   * single-line truncation, so arbitrary slotted elements render
+   * without clipping.
+   */
+  white-space: normal;
+}
+
+.select-option-start,
+.select-option-end {
+  display: flex;
+
+  align-items: center;
+}
+
 .select-option-description {
   display: block;
 }

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

@@ -85,6 +85,11 @@ ion-content {
   gap: globals.$ion-space-300;
 }
 
+.select-option-start,
+.select-option-end {
+  gap: globals.$ion-space-200;
+}
+
 .select-option-description {
   @include globals.typography(globals.$ion-body-md-regular);
 

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

@@ -10,6 +10,11 @@
   gap: 12px;
 }
 
+.select-option-start,
+.select-option-end {
+  gap: 8px;
+}
+
 .select-option-description {
   @include mixins.padding(5px, 0, 0, 0);
 

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

@@ -127,6 +127,7 @@ export class SelectModal implements ComponentInterface {
            * part of the public `SelectModalOption` interface.
            */
           const richOption = option as SelectOverlayOption;
+          const hasRichContent = !!richOption.startContent || !!richOption.endContent || !!richOption.description;
           const optionLabelOptions = {
             id: `modal-option-${index}`,
             label: richOption.text,
@@ -145,6 +146,9 @@ export class SelectModal implements ComponentInterface {
               }}
             >
               <ion-radio
+                class={{
+                  'select-option-has-rich-content': hasRichContent,
+                }}
                 value={option.value}
                 disabled={option.disabled}
                 justify="start"
@@ -186,6 +190,7 @@ export class SelectModal implements ComponentInterface {
        * part of the public `SelectModalOption` interface.
        */
       const richOption = option as SelectOverlayOption;
+      const hasRichContent = !!richOption.startContent || !!richOption.endContent || !!richOption.description;
       const optionLabelOptions = {
         id: `modal-option-${index}`,
         label: richOption.text,
@@ -203,6 +208,9 @@ export class SelectModal implements ComponentInterface {
           }}
         >
           <ion-checkbox
+            class={{
+              'select-option-has-rich-content': hasRichContent,
+            }}
             value={option.value}
             disabled={option.disabled}
             checked={option.checked}

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

@@ -37,6 +37,26 @@ ion-label {
   flex-wrap: wrap;
 }
 
+ion-radio.select-option-has-rich-content::part(label),
+ion-checkbox.select-option-has-rich-content::part(label),
+.select-option-content {
+  flex: 1;
+
+  /**
+   * Let rich content wrap instead of inheriting the label part's
+   * single-line truncation, so arbitrary slotted elements render
+   * without clipping.
+   */
+  white-space: normal;
+}
+
+.select-option-start,
+.select-option-end {
+  display: flex;
+
+  align-items: center;
+}
+
 .select-option-description {
   display: block;
 }

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

@@ -12,6 +12,11 @@
   gap: globals.$ion-space-300;
 }
 
+.select-option-start,
+.select-option-end {
+  gap: globals.$ion-space-200;
+}
+
 .select-option-description {
   @include globals.typography(globals.$ion-body-md-regular);
   @include globals.padding(0);

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

@@ -10,6 +10,11 @@
   gap: 12px;
 }
 
+.select-option-start,
+.select-option-end {
+  gap: 8px;
+}
+
 .select-option-description {
   @include mixins.padding(5px, 0, 0, 0);
 

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

@@ -135,6 +135,7 @@ export class SelectPopover implements ComponentInterface {
        * part of the public `SelectPopoverOption` interface.
        */
       const richOption = option as SelectOverlayOption;
+      const hasRichContent = !!richOption.startContent || !!richOption.endContent || !!richOption.description;
       const optionLabelOptions = {
         id: `popover-option-${index}`,
         label: richOption.text,
@@ -152,6 +153,9 @@ export class SelectPopover implements ComponentInterface {
           }}
         >
           <ion-checkbox
+            class={{
+              'select-option-has-rich-content': hasRichContent,
+            }}
             value={option.value}
             disabled={option.disabled}
             checked={option.checked}
@@ -184,6 +188,7 @@ export class SelectPopover implements ComponentInterface {
            * part of the public `SelectPopoverOption` interface.
            */
           const richOption = option as SelectOverlayOption;
+          const hasRichContent = !!richOption.startContent || !!richOption.endContent || !!richOption.description;
           const optionLabelOptions = {
             id: `popover-option-${index}`,
             label: richOption.text,
@@ -201,6 +206,9 @@ export class SelectPopover implements ComponentInterface {
               }}
             >
               <ion-radio
+                class={{
+                  'select-option-has-rich-content': hasRichContent,
+                }}
                 value={option.value}
                 disabled={option.disabled}
                 onClick={() => this.dismissParentPopover()}