@ionic/core 8.8.4-dev.11776184632.103b8351 → 8.8.4-dev.11776186452.1cc0af05

package/dist/collection/components/alert/alert.js

@@ -173,25 +173,7 @@ export class Alert {
         this.inputType = inputTypes.values().next().value;
         this.processedInputs = inputs.map((i, index) => {
             var _a;
-            return ({
-                type: i.type || 'text',
-                name: i.name || `${index}`,
-                placeholder: i.placeholder || '',
-                value: i.value,
-                label: i.label,
-                checked: !!i.checked,
-                disabled: !!i.disabled,
-                id: i.id || `alert-input-${this.overlayIndex}-${index}`,
-                handler: i.handler,
-                min: i.min,
-                max: i.max,
-                cssClass: (_a = i.cssClass) !== null && _a !== void 0 ? _a : '',
-                attributes: i.attributes || {},
-                tabindex: i.type === 'radio' && i !== focusable ? -1 : 0,
-                startContent: i.startContent,
-                endContent: i.endContent,
-                description: i.description,
-            });
+            return Object.assign(Object.assign({}, i), { type: i.type || 'text', name: i.name || `${index}`, placeholder: i.placeholder || '', checked: !!i.checked, disabled: !!i.disabled, id: i.id || `alert-input-${this.overlayIndex}-${index}`, cssClass: (_a = i.cssClass) !== null && _a !== void 0 ? _a : '', attributes: i.attributes || {}, tabindex: i.type === 'radio' && i !== focusable ? -1 : 0 });
         });
     }
     connectedCallback() {
@@ -380,12 +362,19 @@ export class Alert {
             return null;
         }
         return (h("div", { class: "alert-checkbox-group" }, inputs.map((i) => {
+            /**
+             * Cast to `SelectAlertInput` to access rich content
+             * fields (`startContent`, `endContent`, `description`)
+             * that are passed through from `ion-select` but not
+             * part of the public `AlertInput` interface.
+             */
+            const richInput = i;
             const optionLabelOptions = {
-                id: i.id,
-                label: i.label,
-                startContent: i.startContent,
-                endContent: i.endContent,
-                description: i.description,
+                id: richInput.id,
+                label: richInput.label,
+                startContent: richInput.startContent,
+                endContent: richInput.endContent,
+                description: richInput.description,
             };
             return (h("button", { type: "button", onClick: () => this.cbClick(i), "aria-checked": `${i.checked}`, id: i.id, disabled: i.disabled, tabIndex: i.tabindex, role: "checkbox", class: Object.assign(Object.assign({}, getClassMap(i.cssClass)), { 'alert-tappable': true, 'alert-checkbox': true, 'alert-checkbox-button': true, 'ion-focusable': true, 'alert-checkbox-button-disabled': i.disabled || false }) }, h("div", { class: "alert-button-inner" }, h("div", { class: "alert-checkbox-icon" }, h("div", { class: "alert-checkbox-inner" })), renderOptionLabel(optionLabelOptions, 'alert-checkbox-label')), theme === 'md' && h("ion-ripple-effect", null)));
         })));
@@ -396,12 +385,19 @@ export class Alert {
             return null;
         }
         return (h("div", { class: "alert-radio-group", role: "radiogroup", "aria-activedescendant": this.activeId }, inputs.map((i) => {
+            /**
+             * Cast to `SelectAlertInput` to access rich content
+             * fields (`startContent`, `endContent`, `description`)
+             * that are passed through from `ion-select` but not
+             * part of the public `AlertInput` interface.
+             */
+            const richInput = i;
             const optionLabelOptions = {
-                id: i.id,
-                label: i.label,
-                startContent: i.startContent,
-                endContent: i.endContent,
-                description: i.description,
+                id: richInput.id,
+                label: richInput.label,
+                startContent: richInput.startContent,
+                endContent: richInput.endContent,
+                description: richInput.description,
             };
             return (h("button", { type: "button", onClick: () => this.rbClick(i), "aria-checked": `${i.checked}`, disabled: i.disabled, id: i.id, tabIndex: i.tabindex, class: Object.assign(Object.assign({}, getClassMap(i.cssClass)), { 'alert-radio-button': true, 'alert-tappable': true, 'alert-radio': true, 'ion-focusable': true, 'alert-radio-button-disabled': i.disabled || false }), role: "radio" }, h("div", { class: "alert-button-inner" }, h("div", { class: "alert-radio-icon" }, h("div", { class: "alert-radio-inner" })), renderOptionLabel(optionLabelOptions, 'alert-radio-label'))));
         })));
@@ -463,9 +459,9 @@ export class Alert {
          * If neither are defined, do not set aria-labelledby.
          */
         const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null;
-        return (h(Host, { key: '85f702e645f4a8cad73af4c9dd7af4f86f70d579', tabindex: "-1", style: {
+        return (h(Host, { key: '643939c4af9c1a68b60eea5724f8662f13bb3f72', tabindex: "-1", style: {
                 zIndex: `${20000 + overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, h("ion-backdrop", { key: 'd862b41243d5d1cc22720356be2f6384cb82357e', tappable: this.backdropDismiss }), h("div", { key: '4c333dc639c03f51d43d8fe14fa3a87442f0edae', tabindex: "0", "aria-hidden": "true" }), h("div", Object.assign({ key: '1bf38d8254a8275749def00ae89059126571250f', class: "alert-wrapper ion-overlay-wrapper", role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "0", ref: (el) => (this.wrapperEl = el) }, htmlAttributes), h("div", { key: '6314d4512d9e7c73c6157aeb836c6618194f7b9c', class: "alert-head" }, header && (h("h2", { key: 'bae3316beeecd6cd3973e047b33305b3e70a0edc', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (h("h2", { key: '71909e6abaa42ed24e02db3f53ac4f33b1b12665', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (h("h3", { key: 'a03827699204ae678411e83a72e7bf0af10201f5', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: 'd7bbd7c25bf453c329b5fbbd1a5fcddaf98def46', tabindex: "0", "aria-hidden": "true" })));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, h("ion-backdrop", { key: '4780caec3fe71a8d5f2112b8b8726d5a7de91192', tappable: this.backdropDismiss }), h("div", { key: 'cc401fcade02bfc557820d31554d5e054da79b28', tabindex: "0", "aria-hidden": "true" }), h("div", Object.assign({ key: '234caa09b6e0d224bdce0de0659dcdbd668cad91', class: "alert-wrapper ion-overlay-wrapper", role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "0", ref: (el) => (this.wrapperEl = el) }, htmlAttributes), h("div", { key: 'c8c72cd019eace73b622f2510e533c281267c48a', class: "alert-head" }, header && (h("h2", { key: '0d95f68560dbb67721476d184df0d8654a07959c', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (h("h2", { key: '6444463a2aeef3f076b0bfdfeba4387ced177826', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (h("h3", { key: 'a92d7b54567152b57a8ccab6840e851c8fe5a47b', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: '3ba2cdf15219f03123f6dd884eb7a4da38549c08', tabindex: "0", "aria-hidden": "true" })));
     }
     static get is() { return "ion-alert"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/select/select.js

@@ -945,7 +945,7 @@ export class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: '3b96c1aab2242d6d5c78c264e619b4bd48a5d41c', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '460ec72063e2f484a1fd0d7605739f4cef2d8c87', onClick: this.onClick, class: createColorClasses(this.color, {
                 [theme]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -964,7 +964,7 @@ export class Select {
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
                 [`select-size-${size}`]: size !== undefined,
-            }) }, h("label", { key: '5d313940bd87d981d46ff8d463a68ba35ccb3285', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), h("div", { key: '6ae3e00ce2f93e72bd03cc25988660d2c98b1b22', class: "select-wrapper-inner", part: "inner" }, 
+            }) }, h("label", { key: 'a553837e266ce48e17687ee7ff4027f69a2eff1e', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), h("div", { key: 'e5071d8ee5e4078887ac27a192aa95553a9f487d', class: "select-wrapper-inner", part: "inner" }, 
         /**
          * For the ionic theme, we render the outline container here
          * instead of higher up, so it can be positioned relative to
@@ -974,7 +974,7 @@ export class Select {
          * <label> element, ensuring that clicking the label text
          * focuses the select.
          */
-        theme === 'ionic' && fill === 'outline' && h("div", { key: 'f6ef2571b7512bdbfd9a891bb0c4965165eb8b0e', class: "select-outline" }), h("slot", { key: '6d31e8769453c6a6119c93602cabbc25a45aba03', name: "start" }), h("div", { key: 'c3c88a6e11ec1ea09c77b9a40a1be9335e99637a', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '627ca905d4721fa0b12a2e9ca808e323a2b98e69', name: "end" }), shouldRenderInnerIcon && this.renderSelectIcon()), shouldRenderOuterIcon && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '3fc203f66aad27caf9e3cc533c2a81242900bd78', class: "select-highlight" })), this.renderBottomContent()));
+        theme === 'ionic' && fill === 'outline' && h("div", { key: '04a19d0f8deff600f354c1e2682937884e8e3673', class: "select-outline" }), h("slot", { key: '51e50dccee39355a3ac78b615e4a7a71a371a744', name: "start" }), h("div", { key: '6bf71c54ee895db920d3f98ed7bc8869d9ea3874', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '2f9ebe8996ebfc8371116ec48ca4b750b8c42e43', name: "end" }), shouldRenderInnerIcon && this.renderSelectIcon()), shouldRenderOuterIcon && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'cdf1742886c636270ada0b1e5c61faff40bacdc1', class: "select-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select-modal/select-modal.js

@@ -62,12 +62,19 @@ export class SelectModal {
     renderRadioOptions() {
         const checked = this.options.filter((o) => o.checked).map((o) => o.value)[0];
         return (h("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, this.options.map((option, index) => {
+            /**
+             * Cast to `SelectOverlayOption` to access rich content
+             * fields (`startContent`, `endContent`, `description`)
+             * that are passed through from `ion-select` but not
+             * part of the public `SelectModalOption` interface.
+             */
+            const richOption = option;
             const optionLabelOptions = {
                 id: `modal-option-${index}`,
-                label: option.text,
-                startContent: option.startContent,
-                endContent: option.endContent,
-                description: option.description,
+                label: richOption.text,
+                startContent: richOption.startContent,
+                endContent: richOption.endContent,
+                description: richOption.description,
             };
             return (h("ion-item", { lines: "none", class: Object.assign({
                     // TODO FW-4784
@@ -86,12 +93,19 @@ export class SelectModal {
     }
     renderCheckboxOptions() {
         return this.options.map((option, index) => {
+            /**
+             * Cast to `SelectOverlayOption` to access rich content
+             * fields (`startContent`, `endContent`, `description`)
+             * that are passed through from `ion-select` but not
+             * part of the public `SelectModalOption` interface.
+             */
+            const richOption = option;
             const optionLabelOptions = {
                 id: `modal-option-${index}`,
-                label: option.text,
-                startContent: option.startContent,
-                endContent: option.endContent,
-                description: option.description,
+                label: richOption.text,
+                startContent: richOption.startContent,
+                endContent: richOption.endContent,
+                description: richOption.description,
             };
             return (h("ion-item", { class: Object.assign({
                     // TODO FW-4784
@@ -105,7 +119,7 @@ export class SelectModal {
         });
     }
     render() {
-        return (h(Host, { key: '18730fa65652d7f4889222d085b96324df5938fa', class: Object.assign({ [getIonMode(this)]: true }, this.getModalContextClasses()) }, h("ion-header", { key: 'f919ce66062f36b0826f4fbd51a34563971d7fc5' }, h("ion-toolbar", { key: 'd60bb24925145dde45493cae446e581b9aadefab' }, this.header !== undefined && h("ion-title", { key: 'fd26f906b8bd3e05233576f4c568eefcdb25f5de' }, this.header), h("ion-buttons", { key: 'b3683b2d7e75ba63b7271da71849e905a37337b5', slot: "end" }, h("ion-button", { key: '40a26fc0f05119538b0522276d6e798ce8e18c77', onClick: () => this.closeModal() }, this.cancelText)))), h("ion-content", { key: '7c61146a953ebf2280564a02f1fa57c50f4b62bc' }, h("ion-list", { key: '4d6742ae8bd030d60ea2cd5686f445063ba1e9a5' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
+        return (h(Host, { key: '3fa77e7726ef4b7678cc2ea910e2e09b03ef7cbe', class: Object.assign({ [getIonMode(this)]: true }, this.getModalContextClasses()) }, h("ion-header", { key: '141c87f6f2c0de5e3b614fb616402d2e26276829' }, h("ion-toolbar", { key: '3a44e1c42eb4b48e313a234540ad4f71a1fe7d05' }, this.header !== undefined && h("ion-title", { key: '418d57b29f25eb88a5a1cd9ccbdf73f34f75408a' }, this.header), h("ion-buttons", { key: '7e37ad754da093d86acb758583acf47b9960fba1', slot: "end" }, h("ion-button", { key: '5ac2c7d9bbc345f575319c141f0f6d7acdc4921e', onClick: () => this.closeModal() }, this.cancelText)))), h("ion-content", { key: '4d397a2f668220839e58611da686a2eed94d4135' }, h("ion-list", { key: 'e3e870e4a060af0d475ba8b8263b0eeb4158bac8' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
     }
     static get is() { return "ion-select-modal"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/select-popover/select-popover.js

@@ -77,12 +77,19 @@ export class SelectPopover {
     }
     renderCheckboxOptions(options) {
         return options.map((option, index) => {
+            /**
+             * Cast to `SelectOverlayOption` to access rich content
+             * fields (`startContent`, `endContent`, `description`)
+             * that are passed through from `ion-select` but not
+             * part of the public `SelectPopoverOption` interface.
+             */
+            const richOption = option;
             const optionLabelOptions = {
                 id: `popover-option-${index}`,
-                label: option.text,
-                startContent: option.startContent,
-                endContent: option.endContent,
-                description: option.description,
+                label: richOption.text,
+                startContent: richOption.startContent,
+                endContent: richOption.endContent,
+                description: richOption.description,
             };
             return (h("ion-item", { class: Object.assign({
                     // TODO FW-4784
@@ -98,12 +105,19 @@ export class SelectPopover {
     renderRadioOptions(options) {
         const checked = options.filter((o) => o.checked).map((o) => o.value)[0];
         return (h("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, options.map((option, index) => {
+            /**
+             * Cast to `SelectOverlayOption` to access rich content
+             * fields (`startContent`, `endContent`, `description`)
+             * that are passed through from `ion-select` but not
+             * part of the public `SelectPopoverOption` interface.
+             */
+            const richOption = option;
             const optionLabelOptions = {
                 id: `popover-option-${index}`,
-                label: option.text,
-                startContent: option.startContent,
-                endContent: option.endContent,
-                description: option.description,
+                label: richOption.text,
+                startContent: richOption.startContent,
+                endContent: richOption.endContent,
+                description: richOption.description,
             };
             return (h("ion-item", { class: Object.assign({
                     // TODO FW-4784
@@ -124,9 +138,9 @@ export class SelectPopover {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'feca67a1e521063a57e23191c04736aa85c5655f', class: {
+        return (h(Host, { key: 'cf05dabe58fcd71a74ac46ab8cb3da7dd687068f', class: {
                 [theme]: true,
-            } }, h("ion-list", { key: '646ff6d365c10dd16017096adf9cfa5ff1f61c2e' }, header !== undefined && h("ion-list-header", { key: '059e91049e595eea5663fabb7f139f8ba37e5fec' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: '9cd2924bc696361003cfe7122bd6cdb855fa1c77' }, h("ion-label", { key: '42c32787a86e4de9b98773652dcd7b269faf3da1', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: 'e27f78519af68e24130be3d4a166f351bb2b174b' }, subHeader), message !== undefined && h("p", { key: '6a3f45fc5f1d95c02ae37cba9741d2a7325971a4' }, message)))), this.renderOptions(options))));
+            } }, h("ion-list", { key: 'a8367a02dd063da5b55ab133ccfa914990e86023' }, header !== undefined && h("ion-list-header", { key: 'a5c1442720cc3e4a7c629f459c34d7a70f7ee913' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: '282735c1127096b1b0bf85b3fd20f26fe4535849' }, h("ion-label", { key: '42aa5709d92f7d0232ef07d607cf4ef19f9ad633', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: 'f89fee59d120604bc141ec5cc0a872e9c46fd059' }, subHeader), message !== undefined && h("p", { key: '4778170bb58e781570c448d5d5d485b7ac2c9a7a' }, message)))), this.renderOptions(options))));
     }
     static get is() { return "ion-select-popover"; }
     static get encapsulation() { return "scoped"; }

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-04-14T16:39:35",
+  "timestamp": "2026-04-14T17:09:53",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.0",
@@ -46214,7 +46214,7 @@
       "path": "src/interface.d.ts"
     },
     "src/components/action-sheet/action-sheet-interface.ts::ActionSheetButton": {
-      "declaration": "export interface ActionSheetButton<T = any> {\n  text?: string | HTMLElement;\n  role?: LiteralUnion<'cancel' | 'destructive' | 'selected', string>;\n  icon?: string;\n  cssClass?: string | string[];\n  id?: string;\n  htmlAttributes?: { [key: string]: any };\n  handler?: () => boolean | void | Promise<boolean | void>;\n  data?: T;\n  /**\n   * When `disabled` is `true` the action\n   * sheet button will not be interactive. Note\n   * that buttons with a 'cancel' role cannot\n   * be disabled as that would make it difficult for\n   * users to dismiss the action sheet.\n   */\n  disabled?: boolean;\n  startContent?: HTMLElement;\n  endContent?: HTMLElement;\n  description?: string;\n}",
+      "declaration": "export interface ActionSheetButton<T = any> {\n  text?: string;\n  role?: LiteralUnion<'cancel' | 'destructive' | 'selected', string>;\n  icon?: string;\n  cssClass?: string | string[];\n  id?: string;\n  htmlAttributes?: { [key: string]: any };\n  handler?: () => boolean | void | Promise<boolean | void>;\n  data?: T;\n  /**\n   * When `disabled` is `true` the action\n   * sheet button will not be interactive. Note\n   * that buttons with a 'cancel' role cannot\n   * be disabled as that would make it difficult for\n   * users to dismiss the action sheet.\n   */\n  disabled?: boolean;\n}",
       "docstring": "",
       "path": "src/components/action-sheet/action-sheet-interface.ts"
     },
@@ -46234,7 +46234,7 @@
       "path": "src/components/alert/alert-interface.ts"
     },
     "src/components/alert/alert-interface.ts::AlertInput": {
-      "declaration": "export interface AlertInput {\n  type?: TextFieldTypes | 'checkbox' | 'radio' | 'textarea';\n  name?: string;\n  placeholder?: string;\n  value?: any; // TODO(FW-2832): type\n  /**\n   * The label text to display next to the input, if the input type is `radio` or `checkbox`.\n   */\n  label?: string | HTMLElement;\n  checked?: boolean;\n  disabled?: boolean;\n  id?: string;\n  handler?: (input: AlertInput) => void;\n  min?: string | number;\n  max?: string | number;\n  cssClass?: string | string[];\n  attributes?: { [key: string]: any };\n  tabindex?: number;\n  startContent?: HTMLElement;\n  endContent?: HTMLElement;\n  description?: string;\n}",
+      "declaration": "export interface AlertInput {\n  type?: TextFieldTypes | 'checkbox' | 'radio' | 'textarea';\n  name?: string;\n  placeholder?: string;\n  value?: any; // TODO(FW-2832): type\n  /**\n   * The label text to display next to the input, if the input type is `radio` or `checkbox`.\n   */\n  label?: string;\n  checked?: boolean;\n  disabled?: boolean;\n  id?: string;\n  handler?: (input: AlertInput) => void;\n  min?: string | number;\n  max?: string | number;\n  cssClass?: string | string[];\n  attributes?: { [key: string]: any };\n  tabindex?: number;\n}",
       "docstring": "",
       "path": "src/components/alert/alert-interface.ts"
     },
@@ -46599,12 +46599,12 @@
       "path": "src/components/select/select-interface.ts"
     },
     "src/components/select-modal/select-modal-interface.ts::SelectModalOption": {
-      "declaration": "export interface SelectModalOption {\n  text: string | HTMLElement;\n  value: string;\n  disabled: boolean;\n  checked: boolean;\n  cssClass?: string | string[];\n  handler?: (value: any) => boolean | void | { [key: string]: any };\n  startContent?: HTMLElement;\n  endContent?: HTMLElement;\n  description?: string;\n}",
+      "declaration": "export interface SelectModalOption {\n  text: string;\n  value: string;\n  disabled: boolean;\n  checked: boolean;\n  cssClass?: string | string[];\n  handler?: (value: any) => boolean | void | { [key: string]: any };\n}",
       "docstring": "",
       "path": "src/components/select-modal/select-modal-interface.ts"
     },
     "src/components/select-popover/select-popover-interface.ts::SelectPopoverOption": {
-      "declaration": "export interface SelectPopoverOption {\n  text: string | HTMLElement;\n  value: string;\n  disabled: boolean;\n  checked: boolean;\n  cssClass?: string | string[];\n  handler?: (value: any) => boolean | void | { [key: string]: any };\n  startContent?: HTMLElement;\n  endContent?: HTMLElement;\n  description?: string;\n}",
+      "declaration": "export interface SelectPopoverOption {\n  text: string;\n  value: string;\n  disabled: boolean;\n  checked: boolean;\n  cssClass?: string | string[];\n  handler?: (value: any) => boolean | void | { [key: string]: any };\n}",
       "docstring": "",
       "path": "src/components/select-popover/select-popover-interface.ts"
     },

package/dist/esm/ion-action-sheet.entry.js

@@ -474,12 +474,19 @@ const ActionSheet = class {
             if (isRadio) {
                 htmlAttrs['aria-checked'] = isActiveRadio ? 'true' : 'false';
             }
+            /**
+             * Cast to `SelectActionSheetButton` to access rich content
+             * fields (`startContent`, `endContent`, `description`)
+             * that are passed through from `ion-select` but not
+             * part of the public `ActionSheetButton` interface.
+             */
+            const richButton = b;
             const optionLabelOptions = {
                 id: buttonId,
-                label: b.text,
-                startContent: b.startContent,
-                endContent: b.endContent,
-                description: b.description,
+                label: richButton.text,
+                startContent: richButton.startContent,
+                endContent: richButton.endContent,
+                description: richButton.description,
             };
             return (h("button", Object.assign({}, htmlAttrs, { role: isRadio ? 'radio' : undefined, type: "button", id: buttonId, class: Object.assign(Object.assign({}, buttonClass(b)), { 'action-sheet-selected': isActiveRadio }), onClick: () => {
                     if (isRadio) {
@@ -496,12 +503,12 @@ const ActionSheet = class {
         const cancelButton = allButtons.find((b) => b.role === 'cancel');
         const buttons = allButtons.filter((b) => b.role !== 'cancel');
         const headerID = `action-sheet-${overlayIndex}-header`;
-        return (h(Host, Object.assign({ key: '32d662676784385bf348708be6560929ca1599f8', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '8abe5fcc3941ca61ec313b4c47608c58c8eb2815', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({ [theme]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: '8b84d7292ffcf68138fff9cd0ec6455c91c9cd25', tappable: this.backdropDismiss }), h("div", { key: '2a733b2adef42786bec7ce9c29a29d0935952430', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '1846b99afa26e30b6344e5a860300254e61f3692', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: 'c6a5a986304767935a6de7e01b5ca3feddc2c0d0', class: "action-sheet-container" }, h("div", { key: '467fdb1c8468ca25e733606e0b427ad3888885e3', class: "action-sheet-group", ref: (el) => (this.groupEl = el), role: hasRadioButtons ? 'radiogroup' : undefined }, header !== undefined && (h("div", { key: 'e06690113e9c4da1089bd3495c819f72d7505574', id: headerID, class: {
+            }, class: Object.assign(Object.assign({ [theme]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: '773948649ab8de68d0d683f5f0665c0fb94446db', tappable: this.backdropDismiss }), h("div", { key: 'a107d07dc073c088da7059d2a96f393ae9a9e494', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '7a0468225a402e3ae72048d84abb48cdb940e8ca', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '6ba6a114547440c1e746a4fbba717954bfbe2a50', class: "action-sheet-container" }, h("div", { key: '4d9c249bdcfc0ab981d187edd3d4b1397cc59f5a', class: "action-sheet-group", ref: (el) => (this.groupEl = el), role: hasRadioButtons ? 'radiogroup' : undefined }, header !== undefined && (h("div", { key: '325c63cf2a1b081d411b3c80b65fe403e9aaa298', id: headerID, class: {
                 'action-sheet-title': true,
                 'action-sheet-has-sub-title': this.subHeader !== undefined,
-            } }, header, this.subHeader && h("div", { key: 'b607fe7d470703d7b4f123413cf27487a5bb1bfe', class: "action-sheet-sub-title" }, this.subHeader))), this.renderActionSheetButtons(buttons)), cancelButton && (h("div", { key: '35c91756085c12ab97239366350b800110381142', class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({ key: '803428a3d1a389b2dc4930cc46884dc2e2b137b0' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { key: '38e86d26fa8fcd32d0ab13640b2701e458854542', class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { key: 'bec1f332fcfa4b906d09dabae6c01bba1ef88460', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), theme === 'md' && h("ion-ripple-effect", { key: 'b7cfbaa5a5e5aab0f2317e7bb019802ac4ed3481' })))))), h("div", { key: 'c2527fc1383b7d9388ffbf6ab56461daf986a52d', tabindex: "0", "aria-hidden": "true" })));
+            } }, header, this.subHeader && h("div", { key: '0ef643a1d43ab6f95017b55fe07ddc00e9a0a2f0', class: "action-sheet-sub-title" }, this.subHeader))), this.renderActionSheetButtons(buttons)), cancelButton && (h("div", { key: '4549b06fd306ccc029b8a8c9209dafa13e4af8e3', class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({ key: 'cd33e2fed14ec36bce0c882449831fb8685c26ab' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { key: '24717a96d90e806a1daddc78685d33afee6397ec', class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { key: '9b3162193520f3e10db8f0ca016d367787848126', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), theme === 'md' && h("ion-ripple-effect", { key: '5f6e18c24164395393d4541de1fa60cd88e0f6ea' })))))), h("div", { key: '78a306469aafada4158d434502ab02c8d1fed2d0', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ion-alert.entry.js

@@ -269,25 +269,7 @@ const Alert = class {
         this.inputType = inputTypes.values().next().value;
         this.processedInputs = inputs.map((i, index) => {
             var _a;
-            return ({
-                type: i.type || 'text',
-                name: i.name || `${index}`,
-                placeholder: i.placeholder || '',
-                value: i.value,
-                label: i.label,
-                checked: !!i.checked,
-                disabled: !!i.disabled,
-                id: i.id || `alert-input-${this.overlayIndex}-${index}`,
-                handler: i.handler,
-                min: i.min,
-                max: i.max,
-                cssClass: (_a = i.cssClass) !== null && _a !== void 0 ? _a : '',
-                attributes: i.attributes || {},
-                tabindex: i.type === 'radio' && i !== focusable ? -1 : 0,
-                startContent: i.startContent,
-                endContent: i.endContent,
-                description: i.description,
-            });
+            return Object.assign(Object.assign({}, i), { type: i.type || 'text', name: i.name || `${index}`, placeholder: i.placeholder || '', checked: !!i.checked, disabled: !!i.disabled, id: i.id || `alert-input-${this.overlayIndex}-${index}`, cssClass: (_a = i.cssClass) !== null && _a !== void 0 ? _a : '', attributes: i.attributes || {}, tabindex: i.type === 'radio' && i !== focusable ? -1 : 0 });
         });
     }
     connectedCallback() {
@@ -476,12 +458,19 @@ const Alert = class {
             return null;
         }
         return (h("div", { class: "alert-checkbox-group" }, inputs.map((i) => {
+            /**
+             * Cast to `SelectAlertInput` to access rich content
+             * fields (`startContent`, `endContent`, `description`)
+             * that are passed through from `ion-select` but not
+             * part of the public `AlertInput` interface.
+             */
+            const richInput = i;
             const optionLabelOptions = {
-                id: i.id,
-                label: i.label,
-                startContent: i.startContent,
-                endContent: i.endContent,
-                description: i.description,
+                id: richInput.id,
+                label: richInput.label,
+                startContent: richInput.startContent,
+                endContent: richInput.endContent,
+                description: richInput.description,
             };
             return (h("button", { type: "button", onClick: () => this.cbClick(i), "aria-checked": `${i.checked}`, id: i.id, disabled: i.disabled, tabIndex: i.tabindex, role: "checkbox", class: Object.assign(Object.assign({}, getClassMap(i.cssClass)), { 'alert-tappable': true, 'alert-checkbox': true, 'alert-checkbox-button': true, 'ion-focusable': true, 'alert-checkbox-button-disabled': i.disabled || false }) }, h("div", { class: "alert-button-inner" }, h("div", { class: "alert-checkbox-icon" }, h("div", { class: "alert-checkbox-inner" })), renderOptionLabel(optionLabelOptions, 'alert-checkbox-label')), theme === 'md' && h("ion-ripple-effect", null)));
         })));
@@ -492,12 +481,19 @@ const Alert = class {
             return null;
         }
         return (h("div", { class: "alert-radio-group", role: "radiogroup", "aria-activedescendant": this.activeId }, inputs.map((i) => {
+            /**
+             * Cast to `SelectAlertInput` to access rich content
+             * fields (`startContent`, `endContent`, `description`)
+             * that are passed through from `ion-select` but not
+             * part of the public `AlertInput` interface.
+             */
+            const richInput = i;
             const optionLabelOptions = {
-                id: i.id,
-                label: i.label,
-                startContent: i.startContent,
-                endContent: i.endContent,
-                description: i.description,
+                id: richInput.id,
+                label: richInput.label,
+                startContent: richInput.startContent,
+                endContent: richInput.endContent,
+                description: richInput.description,
             };
             return (h("button", { type: "button", onClick: () => this.rbClick(i), "aria-checked": `${i.checked}`, disabled: i.disabled, id: i.id, tabIndex: i.tabindex, class: Object.assign(Object.assign({}, getClassMap(i.cssClass)), { 'alert-radio-button': true, 'alert-tappable': true, 'alert-radio': true, 'ion-focusable': true, 'alert-radio-button-disabled': i.disabled || false }), role: "radio" }, h("div", { class: "alert-button-inner" }, h("div", { class: "alert-radio-icon" }, h("div", { class: "alert-radio-inner" })), renderOptionLabel(optionLabelOptions, 'alert-radio-label'))));
         })));
@@ -559,9 +555,9 @@ const Alert = class {
          * If neither are defined, do not set aria-labelledby.
          */
         const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null;
-        return (h(Host, { key: '85f702e645f4a8cad73af4c9dd7af4f86f70d579', tabindex: "-1", style: {
+        return (h(Host, { key: '643939c4af9c1a68b60eea5724f8662f13bb3f72', tabindex: "-1", style: {
                 zIndex: `${20000 + overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, h("ion-backdrop", { key: 'd862b41243d5d1cc22720356be2f6384cb82357e', tappable: this.backdropDismiss }), h("div", { key: '4c333dc639c03f51d43d8fe14fa3a87442f0edae', tabindex: "0", "aria-hidden": "true" }), h("div", Object.assign({ key: '1bf38d8254a8275749def00ae89059126571250f', class: "alert-wrapper ion-overlay-wrapper", role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "0", ref: (el) => (this.wrapperEl = el) }, htmlAttributes), h("div", { key: '6314d4512d9e7c73c6157aeb836c6618194f7b9c', class: "alert-head" }, header && (h("h2", { key: 'bae3316beeecd6cd3973e047b33305b3e70a0edc', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (h("h2", { key: '71909e6abaa42ed24e02db3f53ac4f33b1b12665', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (h("h3", { key: 'a03827699204ae678411e83a72e7bf0af10201f5', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: 'd7bbd7c25bf453c329b5fbbd1a5fcddaf98def46', tabindex: "0", "aria-hidden": "true" })));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, h("ion-backdrop", { key: '4780caec3fe71a8d5f2112b8b8726d5a7de91192', tappable: this.backdropDismiss }), h("div", { key: 'cc401fcade02bfc557820d31554d5e054da79b28', tabindex: "0", "aria-hidden": "true" }), h("div", Object.assign({ key: '234caa09b6e0d224bdce0de0659dcdbd668cad91', class: "alert-wrapper ion-overlay-wrapper", role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "0", ref: (el) => (this.wrapperEl = el) }, htmlAttributes), h("div", { key: 'c8c72cd019eace73b622f2510e533c281267c48a', class: "alert-head" }, header && (h("h2", { key: '0d95f68560dbb67721476d184df0d8654a07959c', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (h("h2", { key: '6444463a2aeef3f076b0bfdfeba4387ced177826', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (h("h3", { key: 'a92d7b54567152b57a8ccab6840e851c8fe5a47b', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: '3ba2cdf15219f03123f6dd884eb7a4da38549c08', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ion-select-modal.entry.js

@@ -74,12 +74,19 @@ const SelectModal = class {
     renderRadioOptions() {
         const checked = this.options.filter((o) => o.checked).map((o) => o.value)[0];
         return (h("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, this.options.map((option, index) => {
+            /**
+             * Cast to `SelectOverlayOption` to access rich content
+             * fields (`startContent`, `endContent`, `description`)
+             * that are passed through from `ion-select` but not
+             * part of the public `SelectModalOption` interface.
+             */
+            const richOption = option;
             const optionLabelOptions = {
                 id: `modal-option-${index}`,
-                label: option.text,
-                startContent: option.startContent,
-                endContent: option.endContent,
-                description: option.description,
+                label: richOption.text,
+                startContent: richOption.startContent,
+                endContent: richOption.endContent,
+                description: richOption.description,
             };
             return (h("ion-item", { lines: "none", class: Object.assign({
                     // TODO FW-4784
@@ -98,12 +105,19 @@ const SelectModal = class {
     }
     renderCheckboxOptions() {
         return this.options.map((option, index) => {
+            /**
+             * Cast to `SelectOverlayOption` to access rich content
+             * fields (`startContent`, `endContent`, `description`)
+             * that are passed through from `ion-select` but not
+             * part of the public `SelectModalOption` interface.
+             */
+            const richOption = option;
             const optionLabelOptions = {
                 id: `modal-option-${index}`,
-                label: option.text,
-                startContent: option.startContent,
-                endContent: option.endContent,
-                description: option.description,
+                label: richOption.text,
+                startContent: richOption.startContent,
+                endContent: richOption.endContent,
+                description: richOption.description,
             };
             return (h("ion-item", { class: Object.assign({
                     // TODO FW-4784
@@ -117,7 +131,7 @@ const SelectModal = class {
         });
     }
     render() {
-        return (h(Host, { key: '18730fa65652d7f4889222d085b96324df5938fa', class: Object.assign({ [getIonMode(this)]: true }, this.getModalContextClasses()) }, h("ion-header", { key: 'f919ce66062f36b0826f4fbd51a34563971d7fc5' }, h("ion-toolbar", { key: 'd60bb24925145dde45493cae446e581b9aadefab' }, this.header !== undefined && h("ion-title", { key: 'fd26f906b8bd3e05233576f4c568eefcdb25f5de' }, this.header), h("ion-buttons", { key: 'b3683b2d7e75ba63b7271da71849e905a37337b5', slot: "end" }, h("ion-button", { key: '40a26fc0f05119538b0522276d6e798ce8e18c77', onClick: () => this.closeModal() }, this.cancelText)))), h("ion-content", { key: '7c61146a953ebf2280564a02f1fa57c50f4b62bc' }, h("ion-list", { key: '4d6742ae8bd030d60ea2cd5686f445063ba1e9a5' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
+        return (h(Host, { key: '3fa77e7726ef4b7678cc2ea910e2e09b03ef7cbe', class: Object.assign({ [getIonMode(this)]: true }, this.getModalContextClasses()) }, h("ion-header", { key: '141c87f6f2c0de5e3b614fb616402d2e26276829' }, h("ion-toolbar", { key: '3a44e1c42eb4b48e313a234540ad4f71a1fe7d05' }, this.header !== undefined && h("ion-title", { key: '418d57b29f25eb88a5a1cd9ccbdf73f34f75408a' }, this.header), h("ion-buttons", { key: '7e37ad754da093d86acb758583acf47b9960fba1', slot: "end" }, h("ion-button", { key: '5ac2c7d9bbc345f575319c141f0f6d7acdc4921e', onClick: () => this.closeModal() }, this.cancelText)))), h("ion-content", { key: '4d397a2f668220839e58611da686a2eed94d4135' }, h("ion-list", { key: 'e3e870e4a060af0d475ba8b8263b0eeb4158bac8' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/ion-select_3.entry.js

@@ -895,7 +895,7 @@ const Select = class {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: '3b96c1aab2242d6d5c78c264e619b4bd48a5d41c', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '460ec72063e2f484a1fd0d7605739f4cef2d8c87', onClick: this.onClick, class: createColorClasses(this.color, {
                 [theme]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -914,7 +914,7 @@ const Select = class {
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
                 [`select-size-${size}`]: size !== undefined,
-            }) }, h("label", { key: '5d313940bd87d981d46ff8d463a68ba35ccb3285', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), h("div", { key: '6ae3e00ce2f93e72bd03cc25988660d2c98b1b22', class: "select-wrapper-inner", part: "inner" }, 
+            }) }, h("label", { key: 'a553837e266ce48e17687ee7ff4027f69a2eff1e', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), h("div", { key: 'e5071d8ee5e4078887ac27a192aa95553a9f487d', class: "select-wrapper-inner", part: "inner" }, 
         /**
          * For the ionic theme, we render the outline container here
          * instead of higher up, so it can be positioned relative to
@@ -924,7 +924,7 @@ const Select = class {
          * <label> element, ensuring that clicking the label text
          * focuses the select.
          */
-        theme === 'ionic' && fill === 'outline' && h("div", { key: 'f6ef2571b7512bdbfd9a891bb0c4965165eb8b0e', class: "select-outline" }), h("slot", { key: '6d31e8769453c6a6119c93602cabbc25a45aba03', name: "start" }), h("div", { key: 'c3c88a6e11ec1ea09c77b9a40a1be9335e99637a', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '627ca905d4721fa0b12a2e9ca808e323a2b98e69', name: "end" }), shouldRenderInnerIcon && this.renderSelectIcon()), shouldRenderOuterIcon && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '3fc203f66aad27caf9e3cc533c2a81242900bd78', class: "select-highlight" })), this.renderBottomContent()));
+        theme === 'ionic' && fill === 'outline' && h("div", { key: '04a19d0f8deff600f354c1e2682937884e8e3673', class: "select-outline" }), h("slot", { key: '51e50dccee39355a3ac78b615e4a7a71a371a744', name: "start" }), h("div", { key: '6bf71c54ee895db920d3f98ed7bc8869d9ea3874', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '2f9ebe8996ebfc8371116ec48ca4b750b8c42e43', name: "end" }), shouldRenderInnerIcon && this.renderSelectIcon()), shouldRenderOuterIcon && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'cdf1742886c636270ada0b1e5c61faff40bacdc1', class: "select-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -1151,12 +1151,19 @@ const SelectPopover = class {
     }
     renderCheckboxOptions(options) {
         return options.map((option, index) => {
+            /**
+             * Cast to `SelectOverlayOption` to access rich content
+             * fields (`startContent`, `endContent`, `description`)
+             * that are passed through from `ion-select` but not
+             * part of the public `SelectPopoverOption` interface.
+             */
+            const richOption = option;
             const optionLabelOptions = {
                 id: `popover-option-${index}`,
-                label: option.text,
-                startContent: option.startContent,
-                endContent: option.endContent,
-                description: option.description,
+                label: richOption.text,
+                startContent: richOption.startContent,
+                endContent: richOption.endContent,
+                description: richOption.description,
             };
             return (h("ion-item", { class: Object.assign({
                     // TODO FW-4784
@@ -1172,12 +1179,19 @@ const SelectPopover = class {
     renderRadioOptions(options) {
         const checked = options.filter((o) => o.checked).map((o) => o.value)[0];
         return (h("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, options.map((option, index) => {
+            /**
+             * Cast to `SelectOverlayOption` to access rich content
+             * fields (`startContent`, `endContent`, `description`)
+             * that are passed through from `ion-select` but not
+             * part of the public `SelectPopoverOption` interface.
+             */
+            const richOption = option;
             const optionLabelOptions = {
                 id: `popover-option-${index}`,
-                label: option.text,
-                startContent: option.startContent,
-                endContent: option.endContent,
-                description: option.description,
+                label: richOption.text,
+                startContent: richOption.startContent,
+                endContent: richOption.endContent,
+                description: richOption.description,
             };
             return (h("ion-item", { class: Object.assign({
                     // TODO FW-4784
@@ -1198,9 +1212,9 @@ const SelectPopover = class {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'feca67a1e521063a57e23191c04736aa85c5655f', class: {
+        return (h(Host, { key: 'cf05dabe58fcd71a74ac46ab8cb3da7dd687068f', class: {
                 [theme]: true,
-            } }, h("ion-list", { key: '646ff6d365c10dd16017096adf9cfa5ff1f61c2e' }, header !== undefined && h("ion-list-header", { key: '059e91049e595eea5663fabb7f139f8ba37e5fec' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: '9cd2924bc696361003cfe7122bd6cdb855fa1c77' }, h("ion-label", { key: '42c32787a86e4de9b98773652dcd7b269faf3da1', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: 'e27f78519af68e24130be3d4a166f351bb2b174b' }, subHeader), message !== undefined && h("p", { key: '6a3f45fc5f1d95c02ae37cba9741d2a7325971a4' }, message)))), this.renderOptions(options))));
+            } }, h("ion-list", { key: 'a8367a02dd063da5b55ab133ccfa914990e86023' }, header !== undefined && h("ion-list-header", { key: 'a5c1442720cc3e4a7c629f459c34d7a70f7ee913' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: '282735c1127096b1b0bf85b3fd20f26fe4535849' }, h("ion-label", { key: '42aa5709d92f7d0232ef07d607cf4ef19f9ad633', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: 'f89fee59d120604bc141ec5cc0a872e9c46fd059' }, subHeader), message !== undefined && h("p", { key: '4778170bb58e781570c448d5d5d485b7ac2c9a7a' }, message)))), this.renderOptions(options))));
     }
     get el() { return getElement(this); }
 };