@ionic/core 8.8.4-dev.11776186452.1cc0af05 → 8.8.4-dev.11776246162.138c2737

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

@@ -3,13 +3,11 @@
  */
 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";
@@ -42,7 +40,6 @@ 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
@@ -405,14 +402,9 @@ 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: text !== null && text !== void 0 ? text : '',
+                text: option.textContent,
                 cssClass: optClass,
                 handler: () => {
                     this.setValue(value);
@@ -421,9 +413,6 @@ 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
@@ -444,21 +433,13 @@ 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: label !== null && label !== void 0 ? label : '',
+                label: option.textContent || '',
                 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;
@@ -471,13 +452,8 @@ 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: text !== null && text !== void 0 ? text : '',
+                text: option.textContent || '',
                 cssClass: optClass,
                 value,
                 checked: isOptionSelected(selectValue, value, this.compareWith),
@@ -488,9 +464,6 @@ 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;
@@ -658,18 +631,12 @@ export class Select {
         }
         return;
     }
-    /**
-     * 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) {
+    getText() {
         const selectedText = this.selectedText;
         if (selectedText != null && selectedText !== '') {
             return selectedText;
         }
-        return generateText(this.childOpts, this.value, this.compareWith, useHTML);
+        return generateText(this.childOpts, this.value, this.compareWith);
     }
     setFocus() {
         if (this.focusEl) {
@@ -758,7 +725,7 @@ export class Select {
      */
     renderSelectText() {
         const { placeholder } = this;
-        const displayValue = this.getText(true);
+        const displayValue = this.getText();
         let addPlaceholderClass = false;
         let selectText = displayValue;
         if (selectText === '' && placeholder !== undefined) {
@@ -770,9 +737,6 @@ 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));
     }
     /**
@@ -790,7 +754,6 @@ 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;
@@ -945,7 +908,7 @@ export class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: '460ec72063e2f484a1fd0d7605739f4cef2d8c87', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '663520f7e688836f89101008efd49f38cc5e4aed', onClick: this.onClick, class: createColorClasses(this.color, {
                 [theme]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -964,7 +927,7 @@ export class Select {
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
                 [`select-size-${size}`]: size !== undefined,
-            }) }, 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" }, 
+            }) }, 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" }, 
         /**
          * For the ionic theme, we render the outline container here
          * instead of higher up, so it can be positioned relative to
@@ -974,7 +937,7 @@ export class Select {
          * <label> element, ensuring that clicking the label text
          * focuses the select.
          */
-        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()));
+        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()));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }
@@ -1655,99 +1618,25 @@ const parseValue = (value) => {
     }
     return value.toString();
 };
-const generateText = (opts, value, compareWith, useHTML = false) => {
+const generateText = (opts, value, compareWith) => {
     if (value === undefined) {
         return '';
     }
     if (Array.isArray(value)) {
         return value
-            .map((v) => textForValue(opts, v, compareWith, useHTML))
+            .map((v) => textForValue(opts, v, compareWith))
             .filter((opt) => opt !== null)
             .join(', ');
     }
     else {
-        return textForValue(opts, value, compareWith, useHTML) || '';
+        return textForValue(opts, value, compareWith) || '';
     }
 };
-const textForValue = (opts, value, compareWith, useHTML = false) => {
+const textForValue = (opts, value, compareWith) => {
     const selectOpt = opts.find((opt) => {
         return compareOptions(value, getOptionValue(opt), compareWith);
     });
-    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;
+    return selectOpt ? selectOpt.textContent : null;
 };
 let selectIds = 0;
 const OPTION_CLASS = 'select-interface-option';

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

@@ -103,13 +103,6 @@
    * @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;
@@ -121,8 +114,6 @@
   --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
@@ -227,19 +218,6 @@ 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;
@@ -641,15 +619,6 @@ 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,15 +63,6 @@
   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));
 }
@@ -136,19 +127,4 @@ 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,84 +1,7 @@
-/**
- * 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,7 +4,6 @@
 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() {
@@ -61,65 +60,33 @@ export class SelectModal {
     }
     renderRadioOptions() {
         const checked = this.options.filter((o) => o.checked).map((o) => o.value)[0];
-        return (h("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, this.options.map((option, index) => {
-            /**
-             * Cast to `SelectOverlayOption` to access rich content
-             * fields (`startContent`, `endContent`, `description`)
-             * that are passed through from `ion-select` but not
-             * part of the public `SelectModalOption` interface.
-             */
-            const richOption = option;
-            const optionLabelOptions = {
-                id: `modal-option-${index}`,
-                label: 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'))));
-        })));
+        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))))));
     }
     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: 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'))));
-        });
+        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))));
     }
     render() {
-        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()))));
+        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()))));
     }
     static get is() { return "ion-select-modal"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,85 +1,6 @@
-/**
- * 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.
  *