@ionic/core 8.8.4-dev.11776178970.14763043 → 8.8.4-dev.11776184632.103b8351

package/dist/collection/components/select-popover/select-popover.md.css

@@ -1,3 +1,58 @@
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
 /**
  * Convert a pixels given value into rem
  * 
@@ -84,6 +139,28 @@ ion-label {
   overflow-y: auto;
 }
 
+.select-option-label {
+  display: flex;
+  align-items: center;
+}
+
+.select-option-description {
+  display: block;
+}
+
+.select-option-label {
+  gap: 12px;
+}
+
+.select-option-description {
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 5px;
+  padding-bottom: 0;
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  font-size: 0.75rem;
+}
+
 /**
  * Convert a pixels given value into rem
  * 

package/dist/collection/components/skeleton-text/skeleton-text.js

@@ -32,11 +32,11 @@ export class SkeletonText {
         const animated = this.animated && config.getBoolean('animated', true);
         const inMedia = hostContext('ion-avatar', this.el) || hostContext('ion-thumbnail', this.el);
         const theme = getIonTheme(this);
-        return (h(Host, { key: '5014563646b6c5213750d503babce3013b66ec96', class: {
+        return (h(Host, { key: '7ecf3ae7e75872c65ba0620eecba500c7e75efd9', class: {
                 [theme]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, h("span", { key: '4b816883b1c71bb1db66d8b2b084559f7cb489bd' }, "\u00A0")));
+            } }, h("span", { key: '5d0cd4fec873b8874cbc61eeb14cc3332948714c' }, "\u00A0")));
     }
     static get is() { return "ion-skeleton-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spinner/spinner.js

@@ -56,7 +56,7 @@ export class Spinner {
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (h(Host, { key: '0b3ce4b99c2c828d05b507c4f073811ebbe17d0f', class: createColorClasses(self.color, {
+        return (h(Host, { key: 'ffa2aff2489b312e7fe5ed12367a8e7a5a0c9e84', class: createColorClasses(self.color, {
                 [theme]: true,
                 [`spinner-${spinnerName}`]: true,
                 'spinner-paused': self.paused || config.getBoolean('_testing'),

package/dist/collection/components/split-pane/split-pane.js

@@ -130,12 +130,12 @@ export class SplitPane {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '9d0c67f1f81b09bb9a6f14a66053e5cc7431a286', class: {
+        return (h(Host, { key: 'ba071f752105c205268870e6a6c56ff9bd526b58', class: {
                 [theme]: true,
                 // Used internally for styling
                 [`split-pane-${theme}`]: true,
                 'split-pane-visible': this.visible,
-            } }, h("slot", { key: 'ab7b3050d3c5484bd00949cf57efa4396b4d5bc3' })));
+            } }, h("slot", { key: '32717b94ab9f2e35d8e8e078916e17b2f537a36c' })));
     }
     static get is() { return "ion-split-pane"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tab/tab.js

@@ -51,10 +51,10 @@ export class Tab {
     }
     render() {
         const { tab, active, component } = this;
-        return (h(Host, { key: 'b249545a5adfcef4616afe79aa0f215bab464d0a', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (h(Host, { key: 'd0f187723395ce3a1b8bca0532ef5debbc937112', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, h("slot", { key: '19e2a406d96d20d8d4af8c3ff900e975d06021f6' })));
+            } }, h("slot", { key: '101dbf0b24d10663caac383cc55e00e7d8b69075' })));
     }
     static get is() { return "ion-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tab-bar/tab-bar.js

@@ -111,13 +111,13 @@ export class TabBar {
         const theme = getIonTheme(this);
         const shape = this.getShape();
         const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
-        return (h(Host, { key: 'e6466b90b72ed2e62c8c20fee2bc0b262ca4ccae', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: 'c611d612cadde5ccd785bca07044dd6d4b6ab7d8', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
                 [theme]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
                 [`tab-bar-${expand}`]: true,
                 [`tab-bar-${shape}`]: shape !== undefined,
-            }) }, h("slot", { key: '6801f9523822178692d9091b0132f1b1dd41892d' })));
+            }) }, h("slot", { key: 'e2a59593a95658fe2b4960900922525e180ff0b3' })));
     }
     static get is() { return "ion-tab-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tab-button/tab-button.js

@@ -93,7 +93,7 @@ export class TabButton {
             rel,
             target,
         };
-        return (h(Host, { key: '5a32785eaf0570cdc3444d52ce8bba8174c3e0b9', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (h(Host, { key: 'bcb528b6ff33f94949450e5dfd68e4d960cf5423', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 [theme]: true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
@@ -106,7 +106,7 @@ export class TabButton {
                 'ion-selectable': true,
                 [`tab-button-shape-${shape}`]: shape !== undefined,
                 'ion-focusable': true,
-            } }, h("a", Object.assign({ key: '1441f409b4a60823a57f27b90f6840b557b7d65a' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), h("span", { key: '1566ca0af66b6e51068aca221a89133d2af061ed', class: "button-inner" }, h("slot", { key: '757878091cfe3768107eb0a53b8d1c895ce43399' })), theme === 'md' && h("ion-ripple-effect", { key: '28dde3e7127bdc9d5e1477b47458a5a4ab71328e', type: "unbounded" }))));
+            } }, h("a", Object.assign({ key: '25b6a211e06c352c77e01d66f4158fc3a08431c1' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), h("span", { key: 'eb7a8ec7ff898fd69adc41e9d9bda04c72c8751c', class: "button-inner" }, h("slot", { key: 'b5e0aaebcc81dd3d306f9bf079033e956117700e' })), theme === 'md' && h("ion-ripple-effect", { key: '5f236205851b6512f2a4cd187950ca7b88e6622f', type: "unbounded" }))));
     }
     static get is() { return "ion-tab-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/tabs.js

@@ -165,7 +165,7 @@ export class Tabs {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
     render() {
-        return (h(Host, { key: '9c05f69a72ab24897f1febab0928783d08224734', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '56407c9562bfd095e0259e430879151b824287fd', name: "top" }), h("div", { key: '6a86ceff372b8a60342040d9361ad31bf05e80ec', class: "tabs-inner" }, h("slot", { key: 'a554d3e835236a87686a0a53bd16d3124e77c0c5' })), h("slot", { key: 'd241d4cfba26a7ce3a3f93703dae18b8857bd9ee', name: "bottom" })));
+        return (h(Host, { key: '349bb9ccaaa04426ea24f5dad1386a7876d9abdf', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '2ee0972213087203ebe442be897a95877d7c45f4', name: "top" }), h("div", { key: '15d7938fd4220c276d450eb277ae01fff6a82446', class: "tabs-inner" }, h("slot", { key: 'fb9005ecedc09ff3b4e90837806ace918c121dff' })), h("slot", { key: '0471aa1559469c9416d53ff4a1526b9cc2efde4b', name: "bottom" })));
     }
     static get is() { return "ion-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/text/text.js

@@ -11,9 +11,9 @@ import { getIonTheme } from "../../global/ionic-global";
 export class Text {
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '7a3f31d6e219207a1ff98ac441357caa512012e5', class: createColorClasses(this.color, {
+        return (h(Host, { key: '5b28c2e9965f6d9f5b25ba6c77f29e4c1de2da3c', class: createColorClasses(this.color, {
                 [theme]: true,
-            }) }, h("slot", { key: '392d48d6a5e0e5d1b44e762ec96fb8b53b3ebd49' })));
+            }) }, h("slot", { key: 'cbe285130bb096c5f3f4a7345a71db49d8bdef82' })));
     }
     static get is() { return "ion-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/textarea/textarea.js

@@ -565,7 +565,7 @@ export class Textarea {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: 'b31341357553adac08f518e48d83127415f36500', class: createColorClasses(this.color, {
+        return (h(Host, { key: '83736da2d61c935a71121245858009adef0b9d80', class: createColorClasses(this.color, {
                 [theme]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -577,7 +577,7 @@ export class Textarea {
                 'in-item': inItem,
                 'textarea-disabled': disabled,
                 'textarea-readonly': readonly,
-            }) }, h("label", { key: '406cb6739da3382da1f723c42f4ea5aee86e09d4', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), h("div", { key: '69056191d5f1036bcb88a31d44bc61e3a98f9ebc', class: "textarea-wrapper-inner" }, 
+            }) }, h("label", { key: '808ab4bcee4e76cc3e156fd50246a0b55010afae', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), h("div", { key: 'f18d3890414a2807df4ad853e5788b5ab6d43117', class: "textarea-wrapper-inner" }, 
         /**
          * For the ionic theme, we render the outline container here
          * instead of higher up, so it can be positioned relative to
@@ -587,7 +587,7 @@ export class Textarea {
          * <label> element, ensuring that clicking the label text
          * focuses the textarea.
          */
-        theme === 'ionic' && fill === 'outline' && h("div", { key: 'eff37b99e2f47f1973cc61611647c28ae7271a4d', class: "textarea-outline" }), h("div", { key: '9c70d10b3d2cce601f670cd86bfc19fff10233da', class: "start-slot-wrapper" }, h("slot", { key: 'b0c92cc7941a0810faabfb1acf177c019e200a5d', name: "start" })), h("div", { key: 'a6f9a2c06a009c322d29aa3a6e2b5a79f3532c5b', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el), part: "container" }, h("textarea", Object.assign({ key: 'eb6bf7370fa3047ed475680111d3e232f0c0644c', class: "native-textarea", part: "native", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes), value)), h("div", { key: 'e869ef964514267c0d419d474c16303c01d26cec', class: "end-slot-wrapper" }, h("slot", { key: '8e9905fe7caaf4be904f9cfbc3d9d7f9c48deb50', name: "end" }))), shouldRenderHighlight && h("div", { key: '4287784c6b896b13a4205f5f959aebbbcdd49db3', class: "textarea-highlight" })), this.renderBottomContent()));
+        theme === 'ionic' && fill === 'outline' && h("div", { key: '9f6e88c47eb3535c2aec69e340fdcbe85ab62252', class: "textarea-outline" }), h("div", { key: 'd475f7f4aee2ec5e03f4926de20f31269a8fa822', class: "start-slot-wrapper" }, h("slot", { key: '3a73320f79fba2a1ea0570e10897d047320bf0a4', name: "start" })), h("div", { key: '4a6d0e4ca328435d537b814c052ba083e9470d6d', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el), part: "container" }, h("textarea", Object.assign({ key: 'afb9bad3b1cb2e904cad008abdc5a7145a2c2e0b', class: "native-textarea", part: "native", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes), value)), h("div", { key: '5de4fa3ef8c3b06b78f30fe5d7569df1012345a7', class: "end-slot-wrapper" }, h("slot", { key: 'fec86a4fdd3a3bafc34e63e51ee52be45f2d9203', name: "end" }))), shouldRenderHighlight && h("div", { key: 'd6414e625a41de93eb44670c2b26300c4c1c0470', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-textarea"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/thumbnail/thumbnail.js

@@ -10,9 +10,9 @@ import { getIonTheme } from "../../global/ionic-global";
 export class Thumbnail {
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '6053cf163155d4268dad4fc81ffc6bbc70d75659', class: {
+        return (h(Host, { key: '4e648ac7ee9586cb95ee5bba2cce9f36eb831763', class: {
                 [theme]: true,
-            } }, h("slot", { key: 'b7afb5835bce7c7ed9e5cf44758bbe2d802e1271' })));
+            } }, h("slot", { key: '2f249fca7ef22eb02a7a7a59a77dc3414aaca2ae' })));
     }
     static get is() { return "ion-thumbnail"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/title/title.js

@@ -27,11 +27,11 @@ export class ToolbarTitle {
     render() {
         const theme = getIonTheme(this);
         const size = this.getSize();
-        return (h(Host, { key: '8db3e5f9dbd8b1762a9919eaeef29c98649dfb25', class: createColorClasses(this.color, {
+        return (h(Host, { key: '1878dd41dc0bae351513c0fe0a2513b19860e2ca', class: createColorClasses(this.color, {
                 [theme]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, h("div", { key: 'a31ebae2c494a51d2145eec69d0b1bc635108a01', class: "toolbar-title" }, h("slot", { key: 'f5975b44b3e3afbf98dcbdb53fc78447b49407b3' }))));
+            }) }, h("div", { key: '6a901d75e397beb1392efe9369a0c1006267fc3b', class: "toolbar-title" }, h("slot", { key: 'd024f2dd88be52409be89df1e05aecfd31f851ee' }))));
     }
     static get is() { return "ion-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toast/toast.js

@@ -439,9 +439,9 @@ export class Toast {
         if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
             printIonWarning('[ion-toast] - This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
         }
-        return (h(Host, Object.assign({ key: '3507eaa18a5559a9052d34db180e176952dc466f', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '8f2a7964ecbc74d57a7743475f51abba45ec5302', tabindex: "-1" }, this.htmlAttributes, { style: {
                 zIndex: `${60000 + this.overlayIndex}`,
-            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true, [theme]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent, [`toast-shape-${shape}`]: shape !== undefined, [`toast-hue-${hue}`]: hue !== undefined })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: '195eb90ccd82a13254e843b80be0f380325accb4', class: wrapperClass, part: "wrapper" }, h("div", { key: 'd6072aa4a4848d72e68e04a7842d3f769f844ffc', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '02a1d72aaf401d27671906c8b84abd823def6da8', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: '1f133c27927ad840f58ea2e9112719ef880bf9a5', class: "toast-content", part: "content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
+            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true, [theme]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent, [`toast-shape-${shape}`]: shape !== undefined, [`toast-hue-${hue}`]: hue !== undefined })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: 'bb637ccbcda0c68c34d0a9efc8bd5c0ee9da49f9', class: wrapperClass, part: "wrapper" }, h("div", { key: '3779659eb5d855dd360503b336090c7e0b569975', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '768a222c9b188978afeda83119d71bde8fb6e2b3', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: '4a5fc7d5f374f5a7de1a916351143d5a31d939cf', class: "toast-content", part: "content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
     }
     static get is() { return "ion-toast"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toggle/toggle.js

@@ -338,7 +338,7 @@ export class Toggle {
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         const isIonicTheme = theme === 'ionic';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: 'b12951146a79d3839e6263e91e747398a0fa901d', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses(color, {
+        return (h(Host, { key: 'c6cb748b63423fee5ec8a20c971da76a789565be', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses(color, {
                 [theme]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -350,10 +350,10 @@ export class Toggle {
                 [`toggle-${rtl}`]: true,
                 'ion-activatable': isIonicTheme,
                 'ion-focusable': isIonicTheme,
-            }) }, h("label", { key: 'cf1d27243bf9bdd5bafaf6d86b76beb311b5e01c', class: "toggle-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: 'b3eb0f146836f5994c15bf1fd67a79f72b9414f7', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), h("div", { key: '56ddcfd6452f30fd6b38d0fd85be3ec966aa120b', class: {
+            }) }, h("label", { key: '74cfa7dff2e55a9a7a921c1eb2b2d32429c8468c', class: "toggle-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: 'c08526492a357cee5485895a72292c7530ed5503', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), h("div", { key: 'bd59cd8dab463e12125da45e43f9b6251240f158', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '706e5b667ee242fb1afb3e4afa613f9798fbe25b' }), this.renderHintText()), h("div", { key: '255ccd7d60f7d78b4eba8d380b303a72093e9d16', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '548804cb29efb86561074081acb7a3ebc4a20615' }), this.renderHintText()), h("div", { key: '4de487ca61f42687072b7b67541c4abefd1665f6', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     static get is() { return "ion-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toolbar/toolbar.js

@@ -242,11 +242,11 @@ export class Toolbar {
             Object.assign(childStyles, style);
         });
         const titlePlacement = this.getTitlePlacement();
-        return (h(Host, { key: 'a2103857ffb26f517b4190bb01a8fa170a042e45', class: Object.assign(Object.assign({}, createColorClasses(this.color, {
+        return (h(Host, { key: 'f0aeb982054f92d5f78f5ad199252e4b5f30da2a', class: Object.assign(Object.assign({}, createColorClasses(this.color, {
                 [theme]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 [`toolbar-title-placement-${titlePlacement}`]: true,
-            })), childStyles) }, h("div", { key: '288b74048d260c9279d6e60c8733e26105ee0098', class: "toolbar-background", part: "background" }), h("div", { key: 'fa4b8cfb32f3bfb84f451cf3a2420b37fc75533c', class: "toolbar-container", part: "container" }, h("slot", { key: 'fe9414ab3fa2ca84d424a400ba91ec8239d700ff', name: "start", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: 'c633cd1b6eef87adbfccfa61857518dcf62ac550', name: "secondary", onSlotchange: () => this.updateSlotClasses }), h("div", { key: 'aff3a3d8acbc480e9daec864aeb85d168ab2c447', class: "toolbar-content", part: "content" }, h("slot", { key: '52b45c5abbfe695e862c857163e7aa00c1c2af9a' })), h("slot", { key: '3157c16fcfe428230998f218c6233d114b550a6f', name: "primary", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: '4b74dff5b832ea0f3030efa319c63c876c3e90e2', name: "end", onSlotchange: () => this.updateSlotClasses }))));
+            })), childStyles) }, h("div", { key: '171fb03d11af753e7a5d8f0852cc4d6c7a83e659', class: "toolbar-background", part: "background" }), h("div", { key: 'bcdc3556337c68f225b6cb714c54dad0ef5a8573', class: "toolbar-container", part: "container" }, h("slot", { key: '76475d634be06e07f552bfe68d304336402a9d26', name: "start", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: 'd1585926018c983010a56014c076f0c1120b893f', name: "secondary", onSlotchange: () => this.updateSlotClasses }), h("div", { key: 'bb2609e1282304595f9770f4a14ff5c64b91c1fa', class: "toolbar-content", part: "content" }, h("slot", { key: '0c06057b148d82f9741387f843ea4b4a8a3c96b6' })), h("slot", { key: '78e91de1d9157e493b8742dd137f3dbf985166a2', name: "primary", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: '58b0271fb1a4b0739d0aa6336599727c0f411d3b', name: "end", onSlotchange: () => this.updateSlotClasses }))));
     }
     static get is() { return "ion-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/select-option-render.js

@@ -0,0 +1,62 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { h } from "@stencil/core";
+/**
+ * Cache that maps rendered span elements to the source HTMLElement
+ * they were cloned from. This prevents flickering when a user
+ * selects an option that has rich content, as the content will only be
+ * re-rendered if the source HTMLElement changes.
+ */
+const contentCache = new WeakMap();
+/**
+ * Renders cloned DOM content into a span element via a ref callback.
+ * The content is only cloned when the source element changes,
+ * preventing flicker caused by destroying and recreating web
+ * components (e.g., ion-avatar) on every re-render cycle.
+ *
+ * Uses span elements because this content may render within buttons,
+ * depending on the select interface. Buttons can only have phrasing
+ * content to prevent accessibility issues.
+ *
+ * @param id - Unique identifier for generating stable virtual DOM keys.
+ * @param content - The HTMLElement container whose child nodes will be cloned.
+ * @param className - CSS class applied to the wrapper span.
+ */
+const renderClonedContent = (id, content, className) => {
+    return (h("span", { class: className, key: `${className}-${id}`, ref: (el) => {
+            if (el) {
+                const cached = contentCache.get(el);
+                // Skip if this element already has clones from the same source
+                if (cached === content) {
+                    return;
+                }
+                // Clear previous content and clone new nodes
+                el.innerHTML = '';
+                Array.from(content.childNodes).forEach((n) => el.appendChild(n.cloneNode(true)));
+                contentCache.set(el, content);
+            }
+        } }));
+};
+/**
+ * Renders the label content for a select option within an overlay
+ * interface based on the presence of rich content.
+ *
+ * Uses span elements because this content may render within buttons,
+ * depending on the select interface. Buttons can only have phrasing
+ * content to prevent accessibility issues.
+ *
+ * @param option - The content option data containing label, slots,
+ * and description.
+ * @param className - The base CSS class for the label element.
+ */
+export const renderOptionLabel = (option, className) => {
+    const { id, label, startContent, endContent, description } = option;
+    const hasRichContent = !!startContent || !!endContent || !!description;
+    // Render the main label
+    const labelEl = typeof label === 'string' || !label ? (h("span", { key: `${className}-label-${id}` }, label)) : (renderClonedContent(id, label, `${className}-text`));
+    if (!hasRichContent) {
+        return (h("span", { class: className, key: `${className}-${id}` }, labelEl));
+    }
+    return (h("span", { class: className, key: `${className}-${id}` }, startContent && renderClonedContent(id, startContent, 'select-option-start'), h("span", { class: "select-option-content", key: `${className}-content-${id}` }, labelEl, description && (h("span", { class: "select-option-description", key: `${className}-desc-${id}` }, description))), endContent && renderClonedContent(id, endContent, 'select-option-end')));
+};

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-04-14T15:05:13",
+  "timestamp": "2026-04-14T16:39:35",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.0",
@@ -38874,6 +38874,114 @@
           "annotation": "prop",
           "docs": "The color of the ripple effect on MD mode.",
           "mode": "md"
+        },
+        {
+          "name": "--select-text-media-border-color",
+          "annotation": "prop",
+          "docs": "The border color of media (icons/images) in the select text.",
+          "mode": "ionic"
+        },
+        {
+          "name": "--select-text-media-border-color",
+          "annotation": "prop",
+          "docs": "The border color of media (icons/images) in the select text.",
+          "mode": "ios"
+        },
+        {
+          "name": "--select-text-media-border-color",
+          "annotation": "prop",
+          "docs": "The border color of media (icons/images) in the select text.",
+          "mode": "md"
+        },
+        {
+          "name": "--select-text-media-border-radius",
+          "annotation": "prop",
+          "docs": "The border radius of media (icons/images) in the select text.",
+          "mode": "ionic"
+        },
+        {
+          "name": "--select-text-media-border-radius",
+          "annotation": "prop",
+          "docs": "The border radius of media (icons/images) in the select text.",
+          "mode": "ios"
+        },
+        {
+          "name": "--select-text-media-border-radius",
+          "annotation": "prop",
+          "docs": "The border radius of media (icons/images) in the select text.",
+          "mode": "md"
+        },
+        {
+          "name": "--select-text-media-border-style",
+          "annotation": "prop",
+          "docs": "The border style of media (icons/images) in the select text.",
+          "mode": "ionic"
+        },
+        {
+          "name": "--select-text-media-border-style",
+          "annotation": "prop",
+          "docs": "The border style of media (icons/images) in the select text.",
+          "mode": "ios"
+        },
+        {
+          "name": "--select-text-media-border-style",
+          "annotation": "prop",
+          "docs": "The border style of media (icons/images) in the select text.",
+          "mode": "md"
+        },
+        {
+          "name": "--select-text-media-border-width",
+          "annotation": "prop",
+          "docs": "The border width of media (icons/images) in the select text.",
+          "mode": "ionic"
+        },
+        {
+          "name": "--select-text-media-border-width",
+          "annotation": "prop",
+          "docs": "The border width of media (icons/images) in the select text.",
+          "mode": "ios"
+        },
+        {
+          "name": "--select-text-media-border-width",
+          "annotation": "prop",
+          "docs": "The border width of media (icons/images) in the select text.",
+          "mode": "md"
+        },
+        {
+          "name": "--select-text-media-height",
+          "annotation": "prop",
+          "docs": "The height of media (icons/images) in the select text.",
+          "mode": "ionic"
+        },
+        {
+          "name": "--select-text-media-height",
+          "annotation": "prop",
+          "docs": "The height of media (icons/images) in the select text.",
+          "mode": "ios"
+        },
+        {
+          "name": "--select-text-media-height",
+          "annotation": "prop",
+          "docs": "The height of media (icons/images) in the select text.",
+          "mode": "md"
+        },
+        {
+          "name": "--select-text-media-width",
+          "annotation": "prop",
+          "docs": "The width of media (icons/images) in the select text.",
+          "mode": "ionic"
+        },
+        {
+          "name": "--select-text-media-width",
+          "annotation": "prop",
+          "docs": "The width of media (icons/images) in the select text.",
+          "mode": "ios"
+        },
+        {
+          "name": "--select-text-media-width",
+          "annotation": "prop",
+          "docs": "The width of media (icons/images) in the select text.",
+          "mode": "md"
         }
       ],
       "slots": [
@@ -39194,6 +39302,32 @@
       ],
       "usage": {},
       "props": [
+        {
+          "name": "description",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "description",
+          "reflectToAttr": false,
+          "docs": "Text that is placed underneath the option text to provide additional details about the option.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "disabled",
           "type": "boolean",
@@ -46080,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;\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}",
+      "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}",
       "docstring": "",
       "path": "src/components/action-sheet/action-sheet-interface.ts"
     },
@@ -46100,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;\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}",
+      "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}",
       "docstring": "",
       "path": "src/components/alert/alert-interface.ts"
     },
@@ -46465,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;\n  value: string;\n  disabled: boolean;\n  checked: boolean;\n  cssClass?: string | string[];\n  handler?: (value: any) => boolean | void | { [key: string]: any };\n}",
+      "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}",
       "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;\n  value: string;\n  disabled: boolean;\n  checked: boolean;\n  cssClass?: string | string[];\n  handler?: (value: any) => boolean | void | { [key: string]: any };\n}",
+      "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}",
       "docstring": "",
       "path": "src/components/select-popover/select-popover-interface.ts"
     },