@ionic/core 8.8.4-dev.11776178970.14763043 → 8.8.4-dev.11776186452.1cc0af05

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

@@ -3,11 +3,13 @@
  */
 import caretDownRegular from "@phosphor-icons/core/assets/regular/caret-down.svg";
 import { Build, Host, h, forceUpdate } from "@stencil/core";
+import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
 import { compareOptions, createNotchController, isOptionSelected, checkInvalidState } from "../../utils/forms/index";
 import { focusVisibleElement, renderHiddenInput, inheritAttributes } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
 import { actionSheetController, alertController, popoverController, modalController } from "../../utils/overlays";
 import { isRTL } from "../../utils/rtl/index";
+import { sanitizeDOMString } from "../../utils/sanitization/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
 import { watchForOptions } from "../../utils/watch-options";
 import { caretDownSharp, chevronExpand } from "ionicons/icons";
@@ -40,6 +42,7 @@ export class Select {
         this.helperTextId = `${this.inputId}-helper-text`;
         this.errorTextId = `${this.inputId}-error-text`;
         this.inheritedAttributes = {};
+        this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
         this.isExpanded = false;
         /**
          * The `hasFocus` state ensures the focus class is
@@ -402,9 +405,14 @@ export class Select {
                 .join(' ');
             const optClass = `${OPTION_CLASS} ${copyClasses}`;
             const isSelected = isOptionSelected(selectValue, value, this.compareWith);
+            const text = this.customHTMLEnabled ? getOptionContent(option) : option.textContent;
+            const startContent = this.customHTMLEnabled
+                ? getOptionContent(option, 'start')
+                : undefined;
+            const endContent = this.customHTMLEnabled ? getOptionContent(option, 'end') : undefined;
             return {
                 role: isSelected ? 'selected' : '',
-                text: option.textContent,
+                text: text !== null && text !== void 0 ? text : '',
                 cssClass: optClass,
                 handler: () => {
                     this.setValue(value);
@@ -413,6 +421,9 @@ export class Select {
                     'aria-checked': isSelected ? 'true' : 'false',
                     role: 'radio',
                 },
+                startContent: startContent !== null && startContent !== void 0 ? startContent : undefined,
+                endContent: endContent !== null && endContent !== void 0 ? endContent : undefined,
+                description: option.description,
             };
         });
         // Add "cancel" button
@@ -433,13 +444,21 @@ export class Select {
                 .filter((cls) => cls !== 'hydrated')
                 .join(' ');
             const optClass = `${OPTION_CLASS} ${copyClasses}`;
+            const label = this.customHTMLEnabled ? getOptionContent(option) : option.textContent;
+            const startContent = this.customHTMLEnabled
+                ? getOptionContent(option, 'start')
+                : undefined;
+            const endContent = this.customHTMLEnabled ? getOptionContent(option, 'end') : undefined;
             return {
                 type: inputType,
                 cssClass: optClass,
-                label: option.textContent || '',
+                label: label !== null && label !== void 0 ? label : '',
                 value,
                 checked: isOptionSelected(selectValue, value, this.compareWith),
                 disabled: option.disabled,
+                startContent: startContent !== null && startContent !== void 0 ? startContent : undefined,
+                endContent: endContent !== null && endContent !== void 0 ? endContent : undefined,
+                description: option.description,
             };
         });
         return alertInputs;
@@ -452,8 +471,13 @@ export class Select {
                 .filter((cls) => cls !== 'hydrated')
                 .join(' ');
             const optClass = `${OPTION_CLASS} ${copyClasses}`;
+            const text = this.customHTMLEnabled ? getOptionContent(option) : option.textContent;
+            const startContent = this.customHTMLEnabled
+                ? getOptionContent(option, 'start')
+                : undefined;
+            const endContent = this.customHTMLEnabled ? getOptionContent(option, 'end') : undefined;
             return {
-                text: option.textContent || '',
+                text: text !== null && text !== void 0 ? text : '',
                 cssClass: optClass,
                 value,
                 checked: isOptionSelected(selectValue, value, this.compareWith),
@@ -464,6 +488,9 @@ export class Select {
                         this.close();
                     }
                 },
+                startContent: startContent !== null && startContent !== void 0 ? startContent : undefined,
+                endContent: endContent !== null && endContent !== void 0 ? endContent : undefined,
+                description: option.description,
             };
         });
         return popoverOptions;
@@ -631,12 +658,18 @@ export class Select {
         }
         return;
     }
-    getText() {
+    /**
+     * Returns the text to display in the select based on the selected value.
+     *
+     * @param useHTML If `true`, the returned text will include any custom HTML content from the selected option. If `false`, the returned text will be plain text without any HTML. Defaults to `false`.
+     * @returns The text to display in the select, either with or without HTML based on the `useHTML` parameter.
+     */
+    getText(useHTML = false) {
         const selectedText = this.selectedText;
         if (selectedText != null && selectedText !== '') {
             return selectedText;
         }
-        return generateText(this.childOpts, this.value, this.compareWith);
+        return generateText(this.childOpts, this.value, this.compareWith, useHTML);
     }
     setFocus() {
         if (this.focusEl) {
@@ -725,7 +758,7 @@ export class Select {
      */
     renderSelectText() {
         const { placeholder } = this;
-        const displayValue = this.getText();
+        const displayValue = this.getText(true);
         let addPlaceholderClass = false;
         let selectText = displayValue;
         if (selectText === '' && placeholder !== undefined) {
@@ -737,6 +770,9 @@ export class Select {
             'select-placeholder': addPlaceholderClass,
         };
         const textPart = addPlaceholderClass ? 'placeholder' : 'text';
+        if (this.customHTMLEnabled) {
+            return h("div", { "aria-hidden": "true", class: selectTextClasses, part: textPart, innerHTML: selectText });
+        }
         return (h("div", { "aria-hidden": "true", class: selectTextClasses, part: textPart }, selectText));
     }
     /**
@@ -754,6 +790,7 @@ export class Select {
     get ariaLabel() {
         var _a;
         const { placeholder, inheritedAttributes } = this;
+        // Get the plain text from the selected text
         const displayValue = this.getText();
         // The aria label should be preferred over visible text if both are specified
         const definedLabel = (_a = inheritedAttributes['aria-label']) !== null && _a !== void 0 ? _a : this.labelText;
@@ -908,7 +945,7 @@ export class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: '663520f7e688836f89101008efd49f38cc5e4aed', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '460ec72063e2f484a1fd0d7605739f4cef2d8c87', onClick: this.onClick, class: createColorClasses(this.color, {
                 [theme]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -927,7 +964,7 @@ export class Select {
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
                 [`select-size-${size}`]: size !== undefined,
-            }) }, h("label", { key: '17c2602b8e33017cbb898a332f9960482ac72c84', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), h("div", { key: '00b4887a9f5c6137b2c817e69e77498b3502051d', class: "select-wrapper-inner", part: "inner" }, 
+            }) }, h("label", { key: 'a553837e266ce48e17687ee7ff4027f69a2eff1e', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), h("div", { key: 'e5071d8ee5e4078887ac27a192aa95553a9f487d', class: "select-wrapper-inner", part: "inner" }, 
         /**
          * For the ionic theme, we render the outline container here
          * instead of higher up, so it can be positioned relative to
@@ -937,7 +974,7 @@ export class Select {
          * <label> element, ensuring that clicking the label text
          * focuses the select.
          */
-        theme === 'ionic' && fill === 'outline' && h("div", { key: 'd4916d84ec0d92888139b84be64cd766150e1d83', class: "select-outline" }), h("slot", { key: 'ad9ca19118b0a4cad5995f1010bf8dc9b6c1d4d3', name: "start" }), h("div", { key: '7f36c316973409d237a135ee191bb0f39174e47c', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '0a23c1be8afefa31cf7161dd7470decf30603ce0', name: "end" }), shouldRenderInnerIcon && this.renderSelectIcon()), shouldRenderOuterIcon && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '0c455c157c0fb6f43f3f030758f5c583f13fceda', class: "select-highlight" })), this.renderBottomContent()));
+        theme === 'ionic' && fill === 'outline' && h("div", { key: '04a19d0f8deff600f354c1e2682937884e8e3673', class: "select-outline" }), h("slot", { key: '51e50dccee39355a3ac78b615e4a7a71a371a744', name: "start" }), h("div", { key: '6bf71c54ee895db920d3f98ed7bc8869d9ea3874', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '2f9ebe8996ebfc8371116ec48ca4b750b8c42e43', name: "end" }), shouldRenderInnerIcon && this.renderSelectIcon()), shouldRenderOuterIcon && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'cdf1742886c636270ada0b1e5c61faff40bacdc1', class: "select-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }
@@ -1618,25 +1655,99 @@ const parseValue = (value) => {
     }
     return value.toString();
 };
-const generateText = (opts, value, compareWith) => {
+const generateText = (opts, value, compareWith, useHTML = false) => {
     if (value === undefined) {
         return '';
     }
     if (Array.isArray(value)) {
         return value
-            .map((v) => textForValue(opts, v, compareWith))
+            .map((v) => textForValue(opts, v, compareWith, useHTML))
             .filter((opt) => opt !== null)
             .join(', ');
     }
     else {
-        return textForValue(opts, value, compareWith) || '';
+        return textForValue(opts, value, compareWith, useHTML) || '';
     }
 };
-const textForValue = (opts, value, compareWith) => {
+const textForValue = (opts, value, compareWith, useHTML = false) => {
     const selectOpt = opts.find((opt) => {
         return compareOptions(value, getOptionValue(opt), compareWith);
     });
-    return selectOpt ? selectOpt.textContent : null;
+    const customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
+    if (!selectOpt)
+        return null;
+    return customHTMLEnabled && useHTML
+        ? getOptionContent(selectOpt, undefined, true)
+        : selectOpt.textContent;
+};
+/**
+ * Trims whitespace from all text nodes within a DOM tree.
+ * This prevents invisible layout shifts and unwanted gaps between
+ * elements when HTML content is injected via innerHTML or cloneNode,
+ * as browsers preserve whitespace (tabs, newlines, spaces) from
+ * the original source markup.
+ *
+ * @param node The root node to start trimming text nodes from.
+ */
+const trimTextNodes = (node) => {
+    node.childNodes.forEach((child) => {
+        var _a;
+        if (child.nodeType === Node.TEXT_NODE) {
+            child.textContent = ((_a = child.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+        }
+        else if (child.nodeType === Node.ELEMENT_NODE) {
+            trimTextNodes(child);
+        }
+    });
+};
+/**
+ * Extracts and clones content from an `ion-select-option` element
+ * for rendering within overlay interfaces or the select text when `customHTMLEnabled` is `true`.
+ *
+ * @param option - The `ion-select-option` element to extract content from.
+ * @param slotName - Optional slot name to extract. If omitted, extracts the default slot content.
+ * @param useHTML - If `true`, the returned string will include any custom HTML content. If `false`, the returned string will be plain text without any HTML.
+ * @returns When `useHTML` is `true`, a sanitized HTML string. When `false`, a
+ * div element containing cloned child nodes. Returns `null` if no matching
+ * content is found.
+ */
+const getOptionContent = (option, slotName, useHTML = false) => {
+    let nodes;
+    if (slotName) {
+        // Named slot: get elements with matching slot attribute
+        nodes = Array.from(option.children).filter((el) => el.getAttribute('slot') === slotName);
+    }
+    else {
+        // Default slot: get nodes without a slot attribute
+        nodes = Array.from(option.childNodes).filter((node) => {
+            var _a;
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                return !node.hasAttribute('slot');
+            }
+            // Exclude whitespace-only text nodes to prevent empty container returns
+            return ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim().length) !== 0;
+        });
+    }
+    if (nodes.length === 0) {
+        return null;
+    }
+    // Clone each node into a temporary container
+    const container = document.createElement('div');
+    nodes.forEach((n) => {
+        var _a;
+        const clone = n.cloneNode(true);
+        if (clone.nodeType === Node.TEXT_NODE) {
+            clone.textContent = ((_a = clone.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+        }
+        else {
+            trimTextNodes(clone);
+        }
+        container.appendChild(clone);
+    });
+    if (useHTML) {
+        return sanitizeDOMString(container.innerHTML.trim()) || null;
+    }
+    return container;
 };
 let selectIds = 0;
 const OPTION_CLASS = 'select-interface-option';

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

@@ -103,6 +103,13 @@
    * @prop --border-width: Width of the select border
    *
    * @prop --ripple-color: The color of the ripple effect on MD mode.
+   *
+   * @prop --select-text-media-width: The width of media (icons/images) in the select text.
+   * @prop --select-text-media-height: The height of media (icons/images) in the select text.
+   * @prop --select-text-media-border-width: The border width of media (icons/images) in the select text.
+   * @prop --select-text-media-border-color: The border color of media (icons/images) in the select text.
+   * @prop --select-text-media-border-radius: The border radius of media (icons/images) in the select text.
+   * @prop --select-text-media-border-style: The border style of media (icons/images) in the select text.
    */
   --padding-top: 0px;
   --padding-end: 0px;
@@ -114,6 +121,8 @@
   --highlight-color-focused: var(--ion-color-primary, #0054e9);
   --highlight-color-valid: var(--ion-color-success, #2dd55b);
   --highlight-color-invalid: var(--ion-color-danger, #c5000f);
+  --select-text-media-height: 1.5em;
+  --select-text-media-width: 1.5em;
   /**
    * This is a private API that is used to switch
    * out the highlight color based on the state
@@ -218,6 +227,19 @@ button {
   overflow: hidden;
 }
 
+.select-text img,
+.select-text ion-img,
+.select-text ion-icon,
+.select-text ion-thumbnail,
+.select-text ion-avatar {
+  border-radius: var(--select-text-media-border-radius);
+  width: var(--select-text-media-width);
+  height: var(--select-text-media-height);
+  border-width: var(--select-text-media-border-width);
+  border-style: var(--select-text-media-border-style);
+  border-color: var(--select-text-media-border-color);
+}
+
 .select-wrapper {
   display: flex;
   position: relative;
@@ -619,6 +641,15 @@ button {
   min-width: 16px;
 }
 
+/**
+ * If the select text contains rich content, we want to add some
+ * spacing between the items without changing the display to prevent
+ * losing the ellipsis behavior.
+ */
+.select-text > * {
+  margin-inline-start: 8px;
+}
+
 .label-text-wrapper {
   /**
    * Label text should not extend

package/dist/collection/components/select-modal/select-modal.ionic.css

@@ -63,6 +63,15 @@
   height: 100%;
 }
 
+.select-option-label {
+  display: flex;
+  align-items: center;
+}
+
+.select-option-description {
+  display: block;
+}
+
 :host(.in-modal-default) ion-content::part(scroll) {
   --padding-bottom: var(--token-space-400, var(--token-scale-400, 16px));
 }
@@ -127,4 +136,19 @@ ion-content {
 }
 ion-content:has(.radio-checked) .ion-focused:not(.item-radio-checked) {
   --background-focused-opacity: 1;
+}
+
+.select-option-label {
+  gap: var(--token-space-300, var(--token-scale-300, 12px));
+}
+
+.select-option-description {
+  font-size: var(--token-font-size-350, 0.875rem);
+  font-weight: var(--token-font-weight-regular, 400);
+  letter-spacing: var(--token-font-letter-spacing-0, 0%);
+  line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
+  text-decoration: none;
+  text-transform: none;
+  color: var(--token-text-subtle, var(--token-primitives-neutral-1000, #3b3b3b));
+  font-size: var(--token-font-size-350, 0.875rem);
 }

package/dist/collection/components/select-modal/select-modal.ios.css

@@ -1,7 +1,84 @@
+/**
+ * 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.
+ */
 :host {
   height: 100%;
 }
 
+.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/select-modal/select-modal.js

@@ -4,6 +4,7 @@
 import { getIonMode } from "../../global/ionic-global";
 import { Host, forceUpdate, h } from "@stencil/core";
 import { safeCall } from "../../utils/overlays";
+import { renderOptionLabel } from "../../utils/select-option-render";
 import { getClassMap, hostContext } from "../../utils/theme";
 export class SelectModal {
     constructor() {
@@ -60,33 +61,65 @@ export class SelectModal {
     }
     renderRadioOptions() {
         const checked = this.options.filter((o) => o.checked).map((o) => o.value)[0];
-        return (h("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, this.options.map((option) => (h("ion-item", { lines: "none", class: Object.assign({
-                // TODO FW-4784
-                'item-radio-checked': option.value === checked
-            }, getClassMap(option.cssClass)) }, h("ion-radio", { value: option.value, disabled: option.disabled, justify: "start", labelPlacement: "end", onClick: () => this.closeModal(), onKeyUp: (ev) => {
-                if (ev.key === ' ') {
-                    /**
-                     * Selecting a radio option with keyboard navigation,
-                     * either through the Enter or Space keys, should
-                     * dismiss the modal.
-                     */
-                    this.closeModal();
-                }
-            } }, option.text))))));
+        return (h("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, this.options.map((option, index) => {
+            /**
+             * Cast to `SelectOverlayOption` to access rich content
+             * fields (`startContent`, `endContent`, `description`)
+             * that are passed through from `ion-select` but not
+             * part of the public `SelectModalOption` interface.
+             */
+            const richOption = option;
+            const optionLabelOptions = {
+                id: `modal-option-${index}`,
+                label: richOption.text,
+                startContent: richOption.startContent,
+                endContent: richOption.endContent,
+                description: richOption.description,
+            };
+            return (h("ion-item", { lines: "none", class: Object.assign({
+                    // TODO FW-4784
+                    'item-radio-checked': option.value === checked
+                }, getClassMap(option.cssClass)) }, h("ion-radio", { value: option.value, disabled: option.disabled, justify: "start", labelPlacement: "end", onClick: () => this.closeModal(), onKeyUp: (ev) => {
+                    if (ev.key === ' ') {
+                        /**
+                         * Selecting a radio option with keyboard navigation,
+                         * either through the Enter or Space keys, should
+                         * dismiss the modal.
+                         */
+                        this.closeModal();
+                    }
+                } }, renderOptionLabel(optionLabelOptions, 'select-option-label'))));
+        })));
     }
     renderCheckboxOptions() {
-        return this.options.map((option) => (h("ion-item", { class: Object.assign({
-                // TODO FW-4784
-                'item-checkbox-checked': option.checked
-            }, getClassMap(option.cssClass)) }, h("ion-checkbox", { value: option.value, disabled: option.disabled, checked: option.checked, justify: "start", labelPlacement: "end", onIonChange: (ev) => {
-                this.setChecked(ev);
-                this.callOptionHandler(ev);
-                // TODO FW-4784
-                forceUpdate(this);
-            } }, option.text))));
+        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: richOption.text,
+                startContent: richOption.startContent,
+                endContent: richOption.endContent,
+                description: richOption.description,
+            };
+            return (h("ion-item", { class: Object.assign({
+                    // TODO FW-4784
+                    'item-checkbox-checked': option.checked
+                }, getClassMap(option.cssClass)) }, h("ion-checkbox", { value: option.value, disabled: option.disabled, checked: option.checked, justify: "start", labelPlacement: "end", onIonChange: (ev) => {
+                    this.setChecked(ev);
+                    this.callOptionHandler(ev);
+                    // TODO FW-4784
+                    forceUpdate(this);
+                } }, renderOptionLabel(optionLabelOptions, 'select-option-label'))));
+        });
     }
     render() {
-        return (h(Host, { key: 'c0218aa9ebcbe9d70a6cc1ed8d005ca656e163d3', class: Object.assign({ [getIonMode(this)]: true }, this.getModalContextClasses()) }, h("ion-header", { key: '4698d7442befa17e449655b2f9439001298991a0' }, h("ion-toolbar", { key: 'd0f1d3418f8fdbfdf12fef752f6be4939e70eb79' }, this.header !== undefined && h("ion-title", { key: '2916c22b3a42635e503fa0a0c916b32909999761' }, this.header), h("ion-buttons", { key: 'e93827fc49edd8ac04100e7df8a2a5144d257c19', slot: "end" }, h("ion-button", { key: '0b46828d67d5b4864f40fcbf082ae24797099fb9', onClick: () => this.closeModal() }, this.cancelText)))), h("ion-content", { key: '8460ad9ce425ad0b25b603d0cd42c58b68ca63ee' }, h("ion-list", { key: 'c48ea90af6f36a44102a8852267bd7f6f82f9598' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
+        return (h(Host, { key: '3fa77e7726ef4b7678cc2ea910e2e09b03ef7cbe', class: Object.assign({ [getIonMode(this)]: true }, this.getModalContextClasses()) }, h("ion-header", { key: '141c87f6f2c0de5e3b614fb616402d2e26276829' }, h("ion-toolbar", { key: '3a44e1c42eb4b48e313a234540ad4f71a1fe7d05' }, this.header !== undefined && h("ion-title", { key: '418d57b29f25eb88a5a1cd9ccbdf73f34f75408a' }, this.header), h("ion-buttons", { key: '7e37ad754da093d86acb758583acf47b9960fba1', slot: "end" }, h("ion-button", { key: '5ac2c7d9bbc345f575319c141f0f6d7acdc4921e', onClick: () => this.closeModal() }, this.cancelText)))), h("ion-content", { key: '4d397a2f668220839e58611da686a2eed94d4135' }, h("ion-list", { key: 'e3e870e4a060af0d475ba8b8263b0eeb4158bac8' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
     }
     static get is() { return "ion-select-modal"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,6 +1,85 @@
+/**
+ * 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.
+ */
 :host {
   height: 100%;
-} /**
+}
+
+.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;
+}
+
+/**
  * A heuristic that applies CSS to tablet
  * viewports.
  *