feat(select): allow HTML within options

core/api.txt

@@ -2326,6 +2326,24 @@ ion-select,css-prop,--placeholder-opacity,md
 ion-select,css-prop,--ripple-color,ionic
 ion-select,css-prop,--ripple-color,ios
 ion-select,css-prop,--ripple-color,md
+ion-select,css-prop,--select-text-media-border-color,ionic
+ion-select,css-prop,--select-text-media-border-color,ios
+ion-select,css-prop,--select-text-media-border-color,md
+ion-select,css-prop,--select-text-media-border-radius,ionic
+ion-select,css-prop,--select-text-media-border-radius,ios
+ion-select,css-prop,--select-text-media-border-radius,md
+ion-select,css-prop,--select-text-media-border-style,ionic
+ion-select,css-prop,--select-text-media-border-style,ios
+ion-select,css-prop,--select-text-media-border-style,md
+ion-select,css-prop,--select-text-media-border-width,ionic
+ion-select,css-prop,--select-text-media-border-width,ios
+ion-select,css-prop,--select-text-media-border-width,md
+ion-select,css-prop,--select-text-media-height,ionic
+ion-select,css-prop,--select-text-media-height,ios
+ion-select,css-prop,--select-text-media-height,md
+ion-select,css-prop,--select-text-media-width,ionic
+ion-select,css-prop,--select-text-media-width,ios
+ion-select,css-prop,--select-text-media-width,md
 ion-select,part,bottom
 ion-select,part,container
 ion-select,part,error-text
@@ -2345,6 +2363,7 @@ ion-select-modal,prop,multiple,boolean | undefined,undefined,false,false
 ion-select-modal,prop,options,SelectModalOption[],[],false,false
 
 ion-select-option,shadow
+ion-select-option,prop,description,string | undefined,undefined,false,false
 ion-select-option,prop,disabled,boolean,false,false,false
 ion-select-option,prop,mode,"ios" | "md",undefined,false,false
 ion-select-option,prop,theme,"ios" | "md" | "ionic",undefined,false,false

core/src/components.d.ts

@@ -3813,6 +3813,10 @@ export namespace Components {
         "options": SelectModalOption[];
     }
     interface IonSelectOption {
+        /**
+          * Text that is placed underneath the option text to provide additional details about the option.
+         */
+        "description"?: string;
         /**
           * If `true`, the user cannot interact with the select option. This property does not apply when `interface="action-sheet"` as `ion-action-sheet` does not allow for disabled buttons.
           * @default false
@@ -9897,6 +9901,10 @@ declare namespace LocalJSX {
         "options"?: SelectModalOption[];
     }
     interface IonSelectOption {
+        /**
+          * Text that is placed underneath the option text to provide additional details about the option.
+         */
+        "description"?: string;
         /**
           * If `true`, the user cannot interact with the select option. This property does not apply when `interface="action-sheet"` as `ion-action-sheet` does not allow for disabled buttons.
           * @default false
@@ -11268,6 +11276,7 @@ declare namespace LocalJSX {
     interface IonSelectOptionAttributes {
         "disabled": boolean;
         "value": string;
+        "description": string;
     }
     interface IonSelectPopoverAttributes {
         "header": string;

core/src/components/action-sheet/action-sheet-interface.ts

@@ -14,7 +14,7 @@ export interface ActionSheetOptions extends OverlayOptions {
 }
 
 export interface ActionSheetButton<T = any> {
-  text?: string;
+  text?: string | HTMLElement;
   role?: LiteralUnion<'cancel' | 'destructive' | 'selected', string>;
   icon?: string;
   cssClass?: string | string[];
@@ -30,4 +30,7 @@ export interface ActionSheetButton<T = any> {
    * users to dismiss the action sheet.
    */
   disabled?: boolean;
+  startContent?: HTMLElement;
+  endContent?: HTMLElement;
+  description?: string;
 }

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

@@ -233,3 +233,20 @@
     }
   }
 }
+
+// Action Sheet: Select Option
+// --------------------------------------------------
+
+.action-sheet-button-label {
+  display: flex;
+
+  align-items: center;
+}
+
+.select-option-content {
+  flex: 1;
+}
+
+.select-option-description {
+  display: block;
+}

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

@@ -0,0 +1,22 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "./action-sheet.common";
+@use "./action-sheet.md" as action-sheet-md;
+
+// Ionic Action Sheet
+// --------------------------------------------------
+
+// Action Sheet: Select Option
+// --------------------------------------------------
+
+.action-sheet-button-label {
+  gap: globals.$ion-space-300;
+}
+
+.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.ios.scss

@@ -1,4 +1,4 @@
-@import "./action-sheet";
+@import "./action-sheet.native";
 @import "./action-sheet.ios.vars";
 
 // iOS Action Sheet

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

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

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

@@ -0,0 +1,19 @@
+@use "../../themes/native/native.theme.default" as native;
+@use "../../themes/mixins" as mixins;
+@use "../../themes/functions.font" as font;
+@use "./action-sheet.common";
+
+// Action Sheet: Native
+// --------------------------------------------------
+
+.action-sheet-button-label {
+  gap: 12px;
+}
+
+.select-option-description {
+  @include mixins.padding(5px, 0, 0, 0);
+
+  color: native.$text-color-step-300;
+
+  font-size: font.dynamic-font(12px);
+}

core/src/components/action-sheet/action-sheet.tsx

@@ -16,6 +16,7 @@ import {
   safeCall,
   setOverlayId,
 } from '@utils/overlays';
+import { renderOptionLabel } from '@utils/select-option-render';
 import { getClassMap } from '@utils/theme';
 
 import { getIonMode, getIonTheme } from '../../global/ionic-global';
@@ -37,7 +38,7 @@ import { mdLeaveAnimation } from './animations/md.leave';
   styleUrls: {
     ios: 'action-sheet.ios.scss',
     md: 'action-sheet.md.scss',
-    ionic: 'action-sheet.md.scss',
+    ionic: 'action-sheet.ionic.scss',
   },
   scoped: true,
 })
@@ -559,6 +560,14 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
         htmlAttrs['aria-checked'] = isActiveRadio ? 'true' : 'false';
       }
 
+      const optionLabelOptions = {
+        id: buttonId,
+        label: b.text,
+        startContent: b.startContent,
+        endContent: b.endContent,
+        description: b.description,
+      };
+
       return (
         <button
           {...htmlAttrs}
@@ -580,7 +589,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
         >
           <span class="action-sheet-button-inner">
             {b.icon && <ion-icon icon={b.icon} aria-hidden="true" lazy={false} class="action-sheet-icon" />}
-            {b.text}
+            {renderOptionLabel(optionLabelOptions, 'action-sheet-button-label')}
           </span>
           {theme === 'md' && <ion-ripple-effect></ion-ripple-effect>}
         </button>

core/src/components/alert/alert-interface.ts

@@ -25,7 +25,7 @@ export interface AlertInput {
   /**
    * The label text to display next to the input, if the input type is `radio` or `checkbox`.
    */
-  label?: string;
+  label?: string | HTMLElement;
   checked?: boolean;
   disabled?: boolean;
   id?: string;
@@ -35,6 +35,9 @@ export interface AlertInput {
   cssClass?: string | string[];
   attributes?: { [key: string]: any };
   tabindex?: number;
+  startContent?: HTMLElement;
+  endContent?: HTMLElement;
+  description?: string;
 }
 
 type AlertButtonOverlayHandler = boolean | void | { [key: string]: any };

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

@@ -247,3 +247,21 @@ textarea.alert-input {
   min-height: $alert-input-min-height;
   resize: none;
 }
+
+// Alert Button: Select Option
+// --------------------------------------------------
+
+.alert-radio-label,
+.alert-checkbox-label {
+  display: flex;
+
+  align-items: center;
+}
+
+.select-option-content {
+  flex: 1;
+}
+
+.select-option-description {
+  display: block;
+}

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

@@ -0,0 +1,23 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "./alert.common";
+@use "./alert.md" as alert-md;
+
+// Ionic Alert
+// --------------------------------------------------
+
+// Alert: Select Option
+// --------------------------------------------------
+
+.alert-radio-label,
+.alert-checkbox-label {
+  gap: globals.$ion-space-300;
+}
+
+.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/alert/alert.ios.scss

@@ -1,4 +1,4 @@
-@import "./alert";
+@import "./alert.native";
 @import "./alert.ios.vars";
 
 // iOS Alert

core/src/components/alert/alert.md.scss

@@ -1,4 +1,4 @@
-@import "./alert";
+@import "./alert.native";
 @import "./alert.md.vars";
 
 // Material Design Alert

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

@@ -0,0 +1,20 @@
+@use "../../themes/native/native.theme.default" as native;
+@use "../../themes/mixins" as mixins;
+@use "../../themes/functions.font" as font;
+@use "./alert.common";
+
+// Alert: Native
+// --------------------------------------------------
+
+.alert-radio-label,
+.alert-checkbox-label {
+  gap: 12px;
+}
+
+.select-option-description {
+  @include mixins.padding(5px, 0, 0, 0);
+
+  color: native.$text-color-step-300;
+
+  font-size: font.dynamic-font(12px);
+}