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

package/hydrate/index.js

@@ -10311,12 +10311,19 @@ class ActionSheet {
             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 (hAsync("button", Object.assign({}, htmlAttrs, { role: isRadio ? 'radio' : undefined, type: "button", id: buttonId, class: Object.assign(Object.assign({}, buttonClass$3(b)), { 'action-sheet-selected': isActiveRadio }), onClick: () => {
                     if (isRadio) {
@@ -10333,12 +10340,12 @@ class ActionSheet {
         const cancelButton = allButtons.find((b) => b.role === 'cancel');
         const buttons = allButtons.filter((b) => b.role !== 'cancel');
         const headerID = `action-sheet-${overlayIndex}-header`;
-        return (hAsync(Host, Object.assign({ key: '32d662676784385bf348708be6560929ca1599f8', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(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 }), hAsync("ion-backdrop", { key: '8b84d7292ffcf68138fff9cd0ec6455c91c9cd25', tappable: this.backdropDismiss }), hAsync("div", { key: '2a733b2adef42786bec7ce9c29a29d0935952430', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: '1846b99afa26e30b6344e5a860300254e61f3692', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, hAsync("div", { key: 'c6a5a986304767935a6de7e01b5ca3feddc2c0d0', class: "action-sheet-container" }, hAsync("div", { key: '467fdb1c8468ca25e733606e0b427ad3888885e3', class: "action-sheet-group", ref: (el) => (this.groupEl = el), role: hasRadioButtons ? 'radiogroup' : undefined }, header !== undefined && (hAsync("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 }), hAsync("ion-backdrop", { key: '773948649ab8de68d0d683f5f0665c0fb94446db', tappable: this.backdropDismiss }), hAsync("div", { key: 'a107d07dc073c088da7059d2a96f393ae9a9e494', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: '7a0468225a402e3ae72048d84abb48cdb940e8ca', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, hAsync("div", { key: '6ba6a114547440c1e746a4fbba717954bfbe2a50', class: "action-sheet-container" }, hAsync("div", { key: '4d9c249bdcfc0ab981d187edd3d4b1397cc59f5a', class: "action-sheet-group", ref: (el) => (this.groupEl = el), role: hasRadioButtons ? 'radiogroup' : undefined }, header !== undefined && (hAsync("div", { key: '325c63cf2a1b081d411b3c80b65fe403e9aaa298', id: headerID, class: {
                 'action-sheet-title': true,
                 'action-sheet-has-sub-title': this.subHeader !== undefined,
-            } }, header, this.subHeader && hAsync("div", { key: 'b607fe7d470703d7b4f123413cf27487a5bb1bfe', class: "action-sheet-sub-title" }, this.subHeader))), this.renderActionSheetButtons(buttons)), cancelButton && (hAsync("div", { key: '35c91756085c12ab97239366350b800110381142', class: "action-sheet-group action-sheet-group-cancel" }, hAsync("button", Object.assign({ key: '803428a3d1a389b2dc4930cc46884dc2e2b137b0' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass$3(cancelButton), onClick: () => this.buttonClick(cancelButton) }), hAsync("span", { key: '38e86d26fa8fcd32d0ab13640b2701e458854542', class: "action-sheet-button-inner" }, cancelButton.icon && (hAsync("ion-icon", { key: 'bec1f332fcfa4b906d09dabae6c01bba1ef88460', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), theme === 'md' && hAsync("ion-ripple-effect", { key: 'b7cfbaa5a5e5aab0f2317e7bb019802ac4ed3481' })))))), hAsync("div", { key: 'c2527fc1383b7d9388ffbf6ab56461daf986a52d', tabindex: "0", "aria-hidden": "true" })));
+            } }, header, this.subHeader && hAsync("div", { key: '0ef643a1d43ab6f95017b55fe07ddc00e9a0a2f0', class: "action-sheet-sub-title" }, this.subHeader))), this.renderActionSheetButtons(buttons)), cancelButton && (hAsync("div", { key: '4549b06fd306ccc029b8a8c9209dafa13e4af8e3', class: "action-sheet-group action-sheet-group-cancel" }, hAsync("button", Object.assign({ key: 'cd33e2fed14ec36bce0c882449831fb8685c26ab' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass$3(cancelButton), onClick: () => this.buttonClick(cancelButton) }), hAsync("span", { key: '24717a96d90e806a1daddc78685d33afee6397ec', class: "action-sheet-button-inner" }, cancelButton.icon && (hAsync("ion-icon", { key: '9b3162193520f3e10db8f0ca016d367787848126', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), theme === 'md' && hAsync("ion-ripple-effect", { key: '5f6e18c24164395393d4541de1fa60cd88e0f6ea' })))))), hAsync("div", { key: '78a306469aafada4158d434502ab02c8d1fed2d0', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -10812,25 +10819,7 @@ 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() {
@@ -11017,12 +11006,19 @@ class Alert {
             return null;
         }
         return (hAsync("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 (hAsync("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 }) }, hAsync("div", { class: "alert-button-inner" }, hAsync("div", { class: "alert-checkbox-icon" }, hAsync("div", { class: "alert-checkbox-inner" })), renderOptionLabel(optionLabelOptions, 'alert-checkbox-label')), theme === 'md' && hAsync("ion-ripple-effect", null)));
         })));
@@ -11033,12 +11029,19 @@ class Alert {
             return null;
         }
         return (hAsync("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 (hAsync("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" }, hAsync("div", { class: "alert-button-inner" }, hAsync("div", { class: "alert-radio-icon" }, hAsync("div", { class: "alert-radio-inner" })), renderOptionLabel(optionLabelOptions, 'alert-radio-label'))));
         })));
@@ -11100,9 +11103,9 @@ class Alert {
          * If neither are defined, do not set aria-labelledby.
          */
         const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null;
-        return (hAsync(Host, { key: '85f702e645f4a8cad73af4c9dd7af4f86f70d579', tabindex: "-1", style: {
+        return (hAsync(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 }, hAsync("ion-backdrop", { key: 'd862b41243d5d1cc22720356be2f6384cb82357e', tappable: this.backdropDismiss }), hAsync("div", { key: '4c333dc639c03f51d43d8fe14fa3a87442f0edae', tabindex: "0", "aria-hidden": "true" }), hAsync("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), hAsync("div", { key: '6314d4512d9e7c73c6157aeb836c6618194f7b9c', class: "alert-head" }, header && (hAsync("h2", { key: 'bae3316beeecd6cd3973e047b33305b3e70a0edc', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (hAsync("h2", { key: '71909e6abaa42ed24e02db3f53ac4f33b1b12665', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (hAsync("h3", { key: 'a03827699204ae678411e83a72e7bf0af10201f5', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), hAsync("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 }, hAsync("ion-backdrop", { key: '4780caec3fe71a8d5f2112b8b8726d5a7de91192', tappable: this.backdropDismiss }), hAsync("div", { key: 'cc401fcade02bfc557820d31554d5e054da79b28', tabindex: "0", "aria-hidden": "true" }), hAsync("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), hAsync("div", { key: 'c8c72cd019eace73b622f2510e533c281267c48a', class: "alert-head" }, header && (hAsync("h2", { key: '0d95f68560dbb67721476d184df0d8654a07959c', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (hAsync("h2", { key: '6444463a2aeef3f076b0bfdfeba4387ced177826', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (hAsync("h3", { key: 'a92d7b54567152b57a8ccab6840e851c8fe5a47b', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), hAsync("div", { key: '3ba2cdf15219f03123f6dd884eb7a4da38549c08', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -39299,7 +39302,7 @@ class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (hAsync(Host, { key: '3b96c1aab2242d6d5c78c264e619b4bd48a5d41c', onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '460ec72063e2f484a1fd0d7605739f4cef2d8c87', onClick: this.onClick, class: createColorClasses$1(this.color, {
                 [theme]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -39318,7 +39321,7 @@ class Select {
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
                 [`select-size-${size}`]: size !== undefined,
-            }) }, hAsync("label", { key: '5d313940bd87d981d46ff8d463a68ba35ccb3285', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), hAsync("div", { key: '6ae3e00ce2f93e72bd03cc25988660d2c98b1b22', class: "select-wrapper-inner", part: "inner" }, 
+            }) }, hAsync("label", { key: 'a553837e266ce48e17687ee7ff4027f69a2eff1e', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), hAsync("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
@@ -39328,7 +39331,7 @@ class Select {
          * <label> element, ensuring that clicking the label text
          * focuses the select.
          */
-        theme === 'ionic' && fill === 'outline' && hAsync("div", { key: 'f6ef2571b7512bdbfd9a891bb0c4965165eb8b0e', class: "select-outline" }), hAsync("slot", { key: '6d31e8769453c6a6119c93602cabbc25a45aba03', name: "start" }), hAsync("div", { key: 'c3c88a6e11ec1ea09c77b9a40a1be9335e99637a', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: '627ca905d4721fa0b12a2e9ca808e323a2b98e69', name: "end" }), shouldRenderInnerIcon && this.renderSelectIcon()), shouldRenderOuterIcon && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { key: '3fc203f66aad27caf9e3cc533c2a81242900bd78', class: "select-highlight" })), this.renderBottomContent()));
+        theme === 'ionic' && fill === 'outline' && hAsync("div", { key: '04a19d0f8deff600f354c1e2682937884e8e3673', class: "select-outline" }), hAsync("slot", { key: '51e50dccee39355a3ac78b615e4a7a71a371a744', name: "start" }), hAsync("div", { key: '6bf71c54ee895db920d3f98ed7bc8869d9ea3874', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: '2f9ebe8996ebfc8371116ec48ca4b750b8c42e43', name: "end" }), shouldRenderInnerIcon && this.renderSelectIcon()), shouldRenderOuterIcon && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { key: 'cdf1742886c636270ada0b1e5c61faff40bacdc1', class: "select-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -39561,12 +39564,19 @@ class SelectModal {
     renderRadioOptions() {
         const checked = this.options.filter((o) => o.checked).map((o) => o.value)[0];
         return (hAsync("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 (hAsync("ion-item", { lines: "none", class: Object.assign({
                     // TODO FW-4784
@@ -39585,12 +39595,19 @@ 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 (hAsync("ion-item", { class: Object.assign({
                     // TODO FW-4784
@@ -39602,7 +39619,7 @@ class SelectModal {
         });
     }
     render() {
-        return (hAsync(Host, { key: '18730fa65652d7f4889222d085b96324df5938fa', class: Object.assign({ [getIonMode$1(this)]: true }, this.getModalContextClasses()) }, hAsync("ion-header", { key: 'f919ce66062f36b0826f4fbd51a34563971d7fc5' }, hAsync("ion-toolbar", { key: 'd60bb24925145dde45493cae446e581b9aadefab' }, this.header !== undefined && hAsync("ion-title", { key: 'fd26f906b8bd3e05233576f4c568eefcdb25f5de' }, this.header), hAsync("ion-buttons", { key: 'b3683b2d7e75ba63b7271da71849e905a37337b5', slot: "end" }, hAsync("ion-button", { key: '40a26fc0f05119538b0522276d6e798ce8e18c77', onClick: () => this.closeModal() }, this.cancelText)))), hAsync("ion-content", { key: '7c61146a953ebf2280564a02f1fa57c50f4b62bc' }, hAsync("ion-list", { key: '4d6742ae8bd030d60ea2cd5686f445063ba1e9a5' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
+        return (hAsync(Host, { key: '3fa77e7726ef4b7678cc2ea910e2e09b03ef7cbe', class: Object.assign({ [getIonMode$1(this)]: true }, this.getModalContextClasses()) }, hAsync("ion-header", { key: '141c87f6f2c0de5e3b614fb616402d2e26276829' }, hAsync("ion-toolbar", { key: '3a44e1c42eb4b48e313a234540ad4f71a1fe7d05' }, this.header !== undefined && hAsync("ion-title", { key: '418d57b29f25eb88a5a1cd9ccbdf73f34f75408a' }, this.header), hAsync("ion-buttons", { key: '7e37ad754da093d86acb758583acf47b9960fba1', slot: "end" }, hAsync("ion-button", { key: '5ac2c7d9bbc345f575319c141f0f6d7acdc4921e', onClick: () => this.closeModal() }, this.cancelText)))), hAsync("ion-content", { key: '4d397a2f668220839e58611da686a2eed94d4135' }, hAsync("ion-list", { key: 'e3e870e4a060af0d475ba8b8263b0eeb4158bac8' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -39741,12 +39758,19 @@ 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 (hAsync("ion-item", { class: Object.assign({
                     // TODO FW-4784
@@ -39760,12 +39784,19 @@ class SelectPopover {
     renderRadioOptions(options) {
         const checked = options.filter((o) => o.checked).map((o) => o.value)[0];
         return (hAsync("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 (hAsync("ion-item", { class: Object.assign({
                     // TODO FW-4784
@@ -39786,9 +39817,9 @@ class SelectPopover {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: 'feca67a1e521063a57e23191c04736aa85c5655f', class: {
+        return (hAsync(Host, { key: 'cf05dabe58fcd71a74ac46ab8cb3da7dd687068f', class: {
                 [theme]: true,
-            } }, hAsync("ion-list", { key: '646ff6d365c10dd16017096adf9cfa5ff1f61c2e' }, header !== undefined && hAsync("ion-list-header", { key: '059e91049e595eea5663fabb7f139f8ba37e5fec' }, header), hasSubHeaderOrMessage && (hAsync("ion-item", { key: '9cd2924bc696361003cfe7122bd6cdb855fa1c77' }, hAsync("ion-label", { key: '42c32787a86e4de9b98773652dcd7b269faf3da1', class: "ion-text-wrap" }, subHeader !== undefined && hAsync("h3", { key: 'e27f78519af68e24130be3d4a166f351bb2b174b' }, subHeader), message !== undefined && hAsync("p", { key: '6a3f45fc5f1d95c02ae37cba9741d2a7325971a4' }, message)))), this.renderOptions(options))));
+            } }, hAsync("ion-list", { key: 'a8367a02dd063da5b55ab133ccfa914990e86023' }, header !== undefined && hAsync("ion-list-header", { key: 'a5c1442720cc3e4a7c629f459c34d7a70f7ee913' }, header), hasSubHeaderOrMessage && (hAsync("ion-item", { key: '282735c1127096b1b0bf85b3fd20f26fe4535849' }, hAsync("ion-label", { key: '42aa5709d92f7d0232ef07d607cf4ef19f9ad633', class: "ion-text-wrap" }, subHeader !== undefined && hAsync("h3", { key: 'f89fee59d120604bc141ec5cc0a872e9c46fd059' }, subHeader), message !== undefined && hAsync("p", { key: '4778170bb58e781570c448d5d5d485b7ac2c9a7a' }, message)))), this.renderOptions(options))));
     }
     get el() { return getElement(this); }
     static get style() { return {

package/hydrate/index.mjs

@@ -10309,12 +10309,19 @@ class ActionSheet {
             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 (hAsync("button", Object.assign({}, htmlAttrs, { role: isRadio ? 'radio' : undefined, type: "button", id: buttonId, class: Object.assign(Object.assign({}, buttonClass$3(b)), { 'action-sheet-selected': isActiveRadio }), onClick: () => {
                     if (isRadio) {
@@ -10331,12 +10338,12 @@ class ActionSheet {
         const cancelButton = allButtons.find((b) => b.role === 'cancel');
         const buttons = allButtons.filter((b) => b.role !== 'cancel');
         const headerID = `action-sheet-${overlayIndex}-header`;
-        return (hAsync(Host, Object.assign({ key: '32d662676784385bf348708be6560929ca1599f8', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(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 }), hAsync("ion-backdrop", { key: '8b84d7292ffcf68138fff9cd0ec6455c91c9cd25', tappable: this.backdropDismiss }), hAsync("div", { key: '2a733b2adef42786bec7ce9c29a29d0935952430', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: '1846b99afa26e30b6344e5a860300254e61f3692', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, hAsync("div", { key: 'c6a5a986304767935a6de7e01b5ca3feddc2c0d0', class: "action-sheet-container" }, hAsync("div", { key: '467fdb1c8468ca25e733606e0b427ad3888885e3', class: "action-sheet-group", ref: (el) => (this.groupEl = el), role: hasRadioButtons ? 'radiogroup' : undefined }, header !== undefined && (hAsync("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 }), hAsync("ion-backdrop", { key: '773948649ab8de68d0d683f5f0665c0fb94446db', tappable: this.backdropDismiss }), hAsync("div", { key: 'a107d07dc073c088da7059d2a96f393ae9a9e494', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: '7a0468225a402e3ae72048d84abb48cdb940e8ca', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, hAsync("div", { key: '6ba6a114547440c1e746a4fbba717954bfbe2a50', class: "action-sheet-container" }, hAsync("div", { key: '4d9c249bdcfc0ab981d187edd3d4b1397cc59f5a', class: "action-sheet-group", ref: (el) => (this.groupEl = el), role: hasRadioButtons ? 'radiogroup' : undefined }, header !== undefined && (hAsync("div", { key: '325c63cf2a1b081d411b3c80b65fe403e9aaa298', id: headerID, class: {
                 'action-sheet-title': true,
                 'action-sheet-has-sub-title': this.subHeader !== undefined,
-            } }, header, this.subHeader && hAsync("div", { key: 'b607fe7d470703d7b4f123413cf27487a5bb1bfe', class: "action-sheet-sub-title" }, this.subHeader))), this.renderActionSheetButtons(buttons)), cancelButton && (hAsync("div", { key: '35c91756085c12ab97239366350b800110381142', class: "action-sheet-group action-sheet-group-cancel" }, hAsync("button", Object.assign({ key: '803428a3d1a389b2dc4930cc46884dc2e2b137b0' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass$3(cancelButton), onClick: () => this.buttonClick(cancelButton) }), hAsync("span", { key: '38e86d26fa8fcd32d0ab13640b2701e458854542', class: "action-sheet-button-inner" }, cancelButton.icon && (hAsync("ion-icon", { key: 'bec1f332fcfa4b906d09dabae6c01bba1ef88460', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), theme === 'md' && hAsync("ion-ripple-effect", { key: 'b7cfbaa5a5e5aab0f2317e7bb019802ac4ed3481' })))))), hAsync("div", { key: 'c2527fc1383b7d9388ffbf6ab56461daf986a52d', tabindex: "0", "aria-hidden": "true" })));
+            } }, header, this.subHeader && hAsync("div", { key: '0ef643a1d43ab6f95017b55fe07ddc00e9a0a2f0', class: "action-sheet-sub-title" }, this.subHeader))), this.renderActionSheetButtons(buttons)), cancelButton && (hAsync("div", { key: '4549b06fd306ccc029b8a8c9209dafa13e4af8e3', class: "action-sheet-group action-sheet-group-cancel" }, hAsync("button", Object.assign({ key: 'cd33e2fed14ec36bce0c882449831fb8685c26ab' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass$3(cancelButton), onClick: () => this.buttonClick(cancelButton) }), hAsync("span", { key: '24717a96d90e806a1daddc78685d33afee6397ec', class: "action-sheet-button-inner" }, cancelButton.icon && (hAsync("ion-icon", { key: '9b3162193520f3e10db8f0ca016d367787848126', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), theme === 'md' && hAsync("ion-ripple-effect", { key: '5f6e18c24164395393d4541de1fa60cd88e0f6ea' })))))), hAsync("div", { key: '78a306469aafada4158d434502ab02c8d1fed2d0', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -10810,25 +10817,7 @@ 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() {
@@ -11015,12 +11004,19 @@ class Alert {
             return null;
         }
         return (hAsync("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 (hAsync("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 }) }, hAsync("div", { class: "alert-button-inner" }, hAsync("div", { class: "alert-checkbox-icon" }, hAsync("div", { class: "alert-checkbox-inner" })), renderOptionLabel(optionLabelOptions, 'alert-checkbox-label')), theme === 'md' && hAsync("ion-ripple-effect", null)));
         })));
@@ -11031,12 +11027,19 @@ class Alert {
             return null;
         }
         return (hAsync("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 (hAsync("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" }, hAsync("div", { class: "alert-button-inner" }, hAsync("div", { class: "alert-radio-icon" }, hAsync("div", { class: "alert-radio-inner" })), renderOptionLabel(optionLabelOptions, 'alert-radio-label'))));
         })));
@@ -11098,9 +11101,9 @@ class Alert {
          * If neither are defined, do not set aria-labelledby.
          */
         const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null;
-        return (hAsync(Host, { key: '85f702e645f4a8cad73af4c9dd7af4f86f70d579', tabindex: "-1", style: {
+        return (hAsync(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 }, hAsync("ion-backdrop", { key: 'd862b41243d5d1cc22720356be2f6384cb82357e', tappable: this.backdropDismiss }), hAsync("div", { key: '4c333dc639c03f51d43d8fe14fa3a87442f0edae', tabindex: "0", "aria-hidden": "true" }), hAsync("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), hAsync("div", { key: '6314d4512d9e7c73c6157aeb836c6618194f7b9c', class: "alert-head" }, header && (hAsync("h2", { key: 'bae3316beeecd6cd3973e047b33305b3e70a0edc', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (hAsync("h2", { key: '71909e6abaa42ed24e02db3f53ac4f33b1b12665', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (hAsync("h3", { key: 'a03827699204ae678411e83a72e7bf0af10201f5', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), hAsync("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 }, hAsync("ion-backdrop", { key: '4780caec3fe71a8d5f2112b8b8726d5a7de91192', tappable: this.backdropDismiss }), hAsync("div", { key: 'cc401fcade02bfc557820d31554d5e054da79b28', tabindex: "0", "aria-hidden": "true" }), hAsync("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), hAsync("div", { key: 'c8c72cd019eace73b622f2510e533c281267c48a', class: "alert-head" }, header && (hAsync("h2", { key: '0d95f68560dbb67721476d184df0d8654a07959c', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (hAsync("h2", { key: '6444463a2aeef3f076b0bfdfeba4387ced177826', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (hAsync("h3", { key: 'a92d7b54567152b57a8ccab6840e851c8fe5a47b', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), hAsync("div", { key: '3ba2cdf15219f03123f6dd884eb7a4da38549c08', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -39297,7 +39300,7 @@ class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (hAsync(Host, { key: '3b96c1aab2242d6d5c78c264e619b4bd48a5d41c', onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '460ec72063e2f484a1fd0d7605739f4cef2d8c87', onClick: this.onClick, class: createColorClasses$1(this.color, {
                 [theme]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -39316,7 +39319,7 @@ class Select {
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
                 [`select-size-${size}`]: size !== undefined,
-            }) }, hAsync("label", { key: '5d313940bd87d981d46ff8d463a68ba35ccb3285', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), hAsync("div", { key: '6ae3e00ce2f93e72bd03cc25988660d2c98b1b22', class: "select-wrapper-inner", part: "inner" }, 
+            }) }, hAsync("label", { key: 'a553837e266ce48e17687ee7ff4027f69a2eff1e', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), hAsync("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
@@ -39326,7 +39329,7 @@ class Select {
          * <label> element, ensuring that clicking the label text
          * focuses the select.
          */
-        theme === 'ionic' && fill === 'outline' && hAsync("div", { key: 'f6ef2571b7512bdbfd9a891bb0c4965165eb8b0e', class: "select-outline" }), hAsync("slot", { key: '6d31e8769453c6a6119c93602cabbc25a45aba03', name: "start" }), hAsync("div", { key: 'c3c88a6e11ec1ea09c77b9a40a1be9335e99637a', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: '627ca905d4721fa0b12a2e9ca808e323a2b98e69', name: "end" }), shouldRenderInnerIcon && this.renderSelectIcon()), shouldRenderOuterIcon && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { key: '3fc203f66aad27caf9e3cc533c2a81242900bd78', class: "select-highlight" })), this.renderBottomContent()));
+        theme === 'ionic' && fill === 'outline' && hAsync("div", { key: '04a19d0f8deff600f354c1e2682937884e8e3673', class: "select-outline" }), hAsync("slot", { key: '51e50dccee39355a3ac78b615e4a7a71a371a744', name: "start" }), hAsync("div", { key: '6bf71c54ee895db920d3f98ed7bc8869d9ea3874', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: '2f9ebe8996ebfc8371116ec48ca4b750b8c42e43', name: "end" }), shouldRenderInnerIcon && this.renderSelectIcon()), shouldRenderOuterIcon && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { key: 'cdf1742886c636270ada0b1e5c61faff40bacdc1', class: "select-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -39559,12 +39562,19 @@ class SelectModal {
     renderRadioOptions() {
         const checked = this.options.filter((o) => o.checked).map((o) => o.value)[0];
         return (hAsync("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 (hAsync("ion-item", { lines: "none", class: Object.assign({
                     // TODO FW-4784
@@ -39583,12 +39593,19 @@ 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 (hAsync("ion-item", { class: Object.assign({
                     // TODO FW-4784
@@ -39600,7 +39617,7 @@ class SelectModal {
         });
     }
     render() {
-        return (hAsync(Host, { key: '18730fa65652d7f4889222d085b96324df5938fa', class: Object.assign({ [getIonMode$1(this)]: true }, this.getModalContextClasses()) }, hAsync("ion-header", { key: 'f919ce66062f36b0826f4fbd51a34563971d7fc5' }, hAsync("ion-toolbar", { key: 'd60bb24925145dde45493cae446e581b9aadefab' }, this.header !== undefined && hAsync("ion-title", { key: 'fd26f906b8bd3e05233576f4c568eefcdb25f5de' }, this.header), hAsync("ion-buttons", { key: 'b3683b2d7e75ba63b7271da71849e905a37337b5', slot: "end" }, hAsync("ion-button", { key: '40a26fc0f05119538b0522276d6e798ce8e18c77', onClick: () => this.closeModal() }, this.cancelText)))), hAsync("ion-content", { key: '7c61146a953ebf2280564a02f1fa57c50f4b62bc' }, hAsync("ion-list", { key: '4d6742ae8bd030d60ea2cd5686f445063ba1e9a5' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
+        return (hAsync(Host, { key: '3fa77e7726ef4b7678cc2ea910e2e09b03ef7cbe', class: Object.assign({ [getIonMode$1(this)]: true }, this.getModalContextClasses()) }, hAsync("ion-header", { key: '141c87f6f2c0de5e3b614fb616402d2e26276829' }, hAsync("ion-toolbar", { key: '3a44e1c42eb4b48e313a234540ad4f71a1fe7d05' }, this.header !== undefined && hAsync("ion-title", { key: '418d57b29f25eb88a5a1cd9ccbdf73f34f75408a' }, this.header), hAsync("ion-buttons", { key: '7e37ad754da093d86acb758583acf47b9960fba1', slot: "end" }, hAsync("ion-button", { key: '5ac2c7d9bbc345f575319c141f0f6d7acdc4921e', onClick: () => this.closeModal() }, this.cancelText)))), hAsync("ion-content", { key: '4d397a2f668220839e58611da686a2eed94d4135' }, hAsync("ion-list", { key: 'e3e870e4a060af0d475ba8b8263b0eeb4158bac8' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -39739,12 +39756,19 @@ 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 (hAsync("ion-item", { class: Object.assign({
                     // TODO FW-4784
@@ -39758,12 +39782,19 @@ class SelectPopover {
     renderRadioOptions(options) {
         const checked = options.filter((o) => o.checked).map((o) => o.value)[0];
         return (hAsync("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 (hAsync("ion-item", { class: Object.assign({
                     // TODO FW-4784
@@ -39784,9 +39815,9 @@ class SelectPopover {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: 'feca67a1e521063a57e23191c04736aa85c5655f', class: {
+        return (hAsync(Host, { key: 'cf05dabe58fcd71a74ac46ab8cb3da7dd687068f', class: {
                 [theme]: true,
-            } }, hAsync("ion-list", { key: '646ff6d365c10dd16017096adf9cfa5ff1f61c2e' }, header !== undefined && hAsync("ion-list-header", { key: '059e91049e595eea5663fabb7f139f8ba37e5fec' }, header), hasSubHeaderOrMessage && (hAsync("ion-item", { key: '9cd2924bc696361003cfe7122bd6cdb855fa1c77' }, hAsync("ion-label", { key: '42c32787a86e4de9b98773652dcd7b269faf3da1', class: "ion-text-wrap" }, subHeader !== undefined && hAsync("h3", { key: 'e27f78519af68e24130be3d4a166f351bb2b174b' }, subHeader), message !== undefined && hAsync("p", { key: '6a3f45fc5f1d95c02ae37cba9741d2a7325971a4' }, message)))), this.renderOptions(options))));
+            } }, hAsync("ion-list", { key: 'a8367a02dd063da5b55ab133ccfa914990e86023' }, header !== undefined && hAsync("ion-list-header", { key: 'a5c1442720cc3e4a7c629f459c34d7a70f7ee913' }, header), hasSubHeaderOrMessage && (hAsync("ion-item", { key: '282735c1127096b1b0bf85b3fd20f26fe4535849' }, hAsync("ion-label", { key: '42aa5709d92f7d0232ef07d607cf4ef19f9ad633', class: "ion-text-wrap" }, subHeader !== undefined && hAsync("h3", { key: 'f89fee59d120604bc141ec5cc0a872e9c46fd059' }, subHeader), message !== undefined && hAsync("p", { key: '4778170bb58e781570c448d5d5d485b7ac2c9a7a' }, message)))), this.renderOptions(options))));
     }
     get el() { return getElement(this); }
     static get style() { return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.8.4-dev.11776184632.103b8351",
+  "version": "8.8.4-dev.11776186452.1cc0af05",
   "description": "Base components for Ionic",
   "engines": {
     "node": ">= 16"