@ionic/core 8.4.1-dev.11730909308.11b6f07d → 8.4.1-dev.11731700779.1cd68811

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

@@ -1,7 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import caretDownRegular from "@phosphor-icons/core/assets/regular/caret-down.svg";
 import { Host, h, forceUpdate } from "@stencil/core";
 import { compareOptions, createNotchController, isOptionSelected } from "../../utils/forms/index";
 import { focusVisibleElement, renderHiddenInput, inheritAttributes } from "../../utils/helpers";
@@ -10,12 +9,10 @@ import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
 import { watchForOptions } from "../../utils/watch-options";
 import { caretDownSharp, chevronExpand } from "ionicons/icons";
-import { config } from "../../global/config";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 // TODO(FW-2832): types
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @slot label - The label text to associate with the select. Use the `labelPlacement` property to control where the label is placed relative to the select. Use this if you need to render a label with custom HTML.
  * @slot start - Content to display at the leading edge of the select.
@@ -331,8 +328,8 @@ export class Select {
     async openPopover(ev) {
         const { fill, labelPlacement } = this;
         const interfaceOptions = this.interfaceOptions;
-        const theme = getIonTheme(this);
-        const showBackdrop = theme === 'md' ? false : true;
+        const mode = getIonMode(this);
+        const showBackdrop = mode === 'md' ? false : true;
         const multiple = this.multiple;
         const value = this.value;
         let event = ev;
@@ -343,7 +340,7 @@ export class Select {
          * when using a fill in MD mode or if the
          * label is floating/stacked.
          */
-        if (hasFloatingOrStackedLabel || (theme === 'md' && fill !== undefined)) {
+        if (hasFloatingOrStackedLabel || (mode === 'md' && fill !== undefined)) {
             size = 'cover';
             /**
              * Otherwise the popover
@@ -356,7 +353,7 @@ export class Select {
                     ionShadowTarget: this.nativeWrapperEl,
                 } });
         }
-        const popoverOpts = Object.assign(Object.assign({ theme,
+        const popoverOpts = Object.assign(Object.assign({ mode,
             event, alignment: 'center', size,
             showBackdrop }, interfaceOptions), { component: 'ion-select-popover', cssClass: ['select-popover', interfaceOptions.cssClass], componentProps: {
                 header: interfaceOptions.header,
@@ -381,9 +378,9 @@ export class Select {
         return popoverController.create(popoverOpts);
     }
     async openActionSheet() {
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const interfaceOptions = this.interfaceOptions;
-        const actionSheetOpts = Object.assign(Object.assign({ theme }, interfaceOptions), { buttons: this.createActionSheetButtons(this.childOpts, this.value), cssClass: ['select-action-sheet', interfaceOptions.cssClass] });
+        const actionSheetOpts = Object.assign(Object.assign({ mode }, interfaceOptions), { buttons: this.createActionSheetButtons(this.childOpts, this.value), cssClass: ['select-action-sheet', interfaceOptions.cssClass] });
         /**
          * Workaround for Stencil to autodefine
          * ion-action-sheet when
@@ -400,8 +397,8 @@ export class Select {
     async openAlert() {
         const interfaceOptions = this.interfaceOptions;
         const inputType = this.multiple ? 'checkbox' : 'radio';
-        const theme = getIonTheme(this);
-        const alertOpts = Object.assign(Object.assign({ theme }, interfaceOptions), { header: interfaceOptions.header ? interfaceOptions.header : this.labelText, inputs: this.createAlertInputs(this.childOpts, inputType, this.value), buttons: [
+        const mode = getIonMode(this);
+        const alertOpts = Object.assign(Object.assign({ mode }, interfaceOptions), { header: interfaceOptions.header ? interfaceOptions.header : this.labelText, inputs: this.createAlertInputs(this.childOpts, inputType, this.value), buttons: [
                 {
                     text: this.cancelText,
                     role: 'cancel',
@@ -435,8 +432,8 @@ export class Select {
     }
     openModal() {
         const { multiple, value, interfaceOptions } = this;
-        const theme = getIonTheme(this);
-        const modalOpts = Object.assign(Object.assign({}, interfaceOptions), { mode: theme, cssClass: ['select-modal', interfaceOptions.cssClass], component: 'ion-select-modal', componentProps: {
+        const mode = getIonMode(this);
+        const modalOpts = Object.assign(Object.assign({}, interfaceOptions), { mode, cssClass: ['select-modal', interfaceOptions.cssClass], component: 'ion-select-modal', componentProps: {
                 header: interfaceOptions.header,
                 multiple,
                 value,
@@ -541,8 +538,8 @@ export class Select {
      * when fill="outline".
      */
     renderLabelContainer() {
-        const theme = getIonTheme(this);
-        const hasOutlineFill = theme === 'md' && this.fill === 'outline';
+        const mode = getIonMode(this);
+        const hasOutlineFill = mode === 'md' && this.fill === 'outline';
         if (hasOutlineFill) {
             /**
              * The outline fill has a special outline
@@ -591,10 +588,15 @@ export class Select {
      * next to the select text.
      */
     renderSelectIcon() {
-        const { isExpanded, selectExpandedIcon, selectCollapsedIcon } = this;
-        let icon = selectCollapsedIcon;
-        if (isExpanded) {
-            icon = selectExpandedIcon;
+        const mode = getIonMode(this);
+        const { isExpanded, toggleIcon, expandedIcon } = this;
+        let icon;
+        if (isExpanded && expandedIcon !== undefined) {
+            icon = expandedIcon;
+        }
+        else {
+            const defaultIcon = mode === 'ios' ? chevronExpand : caretDownSharp;
+            icon = toggleIcon !== null && toggleIcon !== void 0 ? toggleIcon : defaultIcon;
         }
         return h("ion-icon", { class: "select-icon", part: "icon", "aria-hidden": "true", icon: icon });
     }
@@ -629,62 +631,14 @@ export class Select {
         const { disabled, inputId, isExpanded } = this;
         return (h("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "dialog", "aria-expanded": `${isExpanded}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) }));
     }
-    /**
-     * Get the icon to use for the expand icon.
-     * If an icon is set on the component, use that.
-     * Otherwise, use the icon set in the config.
-     * If no icon is set in the config, use the default icon.
-     */
-    get selectExpandedIcon() {
-        // Return the expandedIcon or toggleIcon if either is explicitly set
-        if (this.expandedIcon != null) {
-            return this.expandedIcon;
-        }
-        else if (this.toggleIcon != null) {
-            return this.toggleIcon;
-        }
-        // Determine the theme and map to default icons
-        const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: chevronExpand,
-            ionic: caretDownRegular,
-            md: caretDownSharp,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured select expanded icon or the default icon
-        return config.get('selectExpandedIcon', defaultIcon);
-    }
-    /**
-     * Get the icon to use for the collapsed icon.
-     * If an icon is set on the component, use that.
-     * Otherwise, use the icon set in the config.
-     * If no icon is set in the config, use the default icon.
-     */
-    get selectCollapsedIcon() {
-        // Return the toggleIcon if it is explicitly set
-        if (this.toggleIcon) {
-            return this.toggleIcon;
-        }
-        // Determine the theme and map to default icons
-        const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: chevronExpand,
-            ionic: caretDownRegular,
-            md: caretDownSharp,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        return config.get('selectCollapsedIcon', defaultIcon);
-    }
     render() {
         const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, shape, name, value } = this;
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const hasFloatingOrStackedLabel = labelPlacement === 'floating' || labelPlacement === 'stacked';
         const justifyEnabled = !hasFloatingOrStackedLabel && justify !== undefined;
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         const inItem = hostContext('ion-item', this.el);
-        const shouldRenderHighlight = theme === 'md' && fill !== 'outline' && !inItem;
+        const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem;
         const hasValue = this.hasValue();
         const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null;
         renderHiddenInput(true, el, name, parseValue(value), disabled);
@@ -706,8 +660,8 @@ export class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: '53907da3ad1bd7f5793ff1b3d24cfc88e6f5251c', onClick: this.onClick, class: createColorClasses(this.color, {
-                [theme]: true,
+        return (h(Host, { key: '144dfa5c49549a74fe516c65b9b8104a477ac789', onClick: this.onClick, class: createColorClasses(this.color, {
+                [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
                 'select-disabled': disabled,
@@ -722,22 +676,20 @@ export class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: '04bc2e3f361e5156a589c160d4c426f7b37d2013', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: 'f2686986bb3eeff51501198de7558307454ebeda', class: "select-wrapper-inner" }, h("slot", { key: '7718621897e898deb25855a0192233a98ce655a8', name: "start" }), h("div", { key: 'a052077e5ff65c2d21fb76e5e06399d70dc5968c', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '093233ca86b031cfa038186f59a69a9dd9003eca', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '43e345f1078246d0e97d070d71c098da48355099', class: "select-highlight" }))));
+            }) }, h("label", { key: '0edcfcbac575a9dccc77991531b6980d1caebf42', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '348151d90cb093f5d21c7d4a834264ac4a312c40', class: "select-wrapper-inner" }, h("slot", { key: '8b7708c7f81217435c58276da0c08bba766d9500', name: "start" }), h("div", { key: '10c520a335da0a0d1cf40f9365597beb244d3b48', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '0f15c40a5495e98e29d2a21ba21e0bc6f1c0125a', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'c87faad2e5ebf7f9453397d7ede43abd64d21294', class: "select-highlight" }))));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["select.ios.scss"],
-            "md": ["select.md.scss"],
-            "ionic": ["select.md.scss"]
+            "md": ["select.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["select.ios.css"],
-            "md": ["select.md.css"],
-            "ionic": ["select.md.css"]
+            "md": ["select.md.css"]
         };
     }
     static get properties() {
@@ -836,7 +788,7 @@ export class Select {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available in the `\"md\"` theme."
+                    "text": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available in `md` mode."
                 },
                 "attribute": "fill",
                 "reflect": false
@@ -1035,7 +987,7 @@ export class Select {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The toggle icon to use. Defaults to `\"chevronExpand\"` for the `\"ios\"` theme,\nor `\"caretDownSharp\"` for the `\"md\"` and `\"ionic\"` themes."
+                    "text": "The toggle icon to use. Defaults to `chevronExpand` for `ios` mode,\nor `caretDownSharp` for `md` mode."
                 },
                 "attribute": "toggle-icon",
                 "reflect": false
@@ -1052,7 +1004,7 @@ export class Select {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The toggle icon to show when the select is open. If defined, the icon\nrotation behavior in `\"md\"` theme will be disabled. If undefined, `toggleIcon`\nwill be used for when the select is both open and closed."
+                    "text": "The toggle icon to show when the select is open. If defined, the icon\nrotation behavior in `md` mode will be disabled. If undefined, `toggleIcon`\nwill be used for when the select is both open and closed."
                 },
                 "attribute": "expanded-icon",
                 "reflect": false

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

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -156,18 +150,18 @@
 button {
   position: absolute;
   top: 0;
+  left: 0;
   right: 0;
   bottom: 0;
-  left: 0;
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
+  clip: rect(0 0 0 0);
   opacity: 0;
   overflow: hidden;
-  clip: rect(0 0 0 0);
   -webkit-appearance: none;
   -moz-appearance: none;
 }
@@ -562,8 +556,7 @@ button {
   max-width: calc(100% / 0.75);
 }
 
-::slotted([slot=start]),
-::slotted([slot=end]) {
+::slotted([slot=start]), ::slotted([slot=end]) {
   /**
    * Prevent the slots from shrinking when the label and/or
    * selected item text is long enough to fill the rest of
@@ -582,12 +575,6 @@ button {
   margin-inline-end: 0;
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -643,12 +630,6 @@ button {
  *   }
  * }
  */
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -704,12 +685,6 @@ button {
  *   }
  * }
  */
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -836,12 +811,6 @@ button {
   max-width: calc(100% / 0.75);
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -1000,9 +969,7 @@ button {
    * Label text should not extend
    * beyond the bounds of the select.
    */
-  max-width: calc(
-    (100% - var(--padding-start) - var(--padding-end) - 8px) / 0.75
-  );
+  max-width: calc((100% - var(--padding-start) - var(--padding-end) - 8px) / 0.75);
 }
 
 /**
@@ -1019,8 +986,8 @@ button {
 }
 
 :host(.select-fill-outline) .select-outline-container {
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   display: flex;

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

@@ -77,7 +77,7 @@ export class SelectModal {
             } }, option.text))));
     }
     render() {
-        return (h(Host, { key: '95c255c175fa5ac4fbbf40d62942a4141160a26c', class: getIonMode(this) }, h("ion-header", { key: '44d928af413bbd646354aa0524841185781099e6' }, h("ion-toolbar", { key: 'e40f439ae12b8acb13014e165e0bd4da765fb087' }, this.header !== undefined && h("ion-title", { key: '5bd65f65a594edc4808701545a41330b5e10ff27' }, this.header), h("ion-buttons", { key: '66e3936a4bb22c48abd60690b4a79f26c3abe0e2', slot: "end" }, h("ion-button", { key: '6d4ffda63ad671e97002263b7a1bd69ea4673838', onClick: () => this.closeModal() }, "Close")))), h("ion-content", { key: '7c230147be38d46c86fed7be76cbc64591df10bb' }, h("ion-list", { key: 'adf3ee9959198f99a5b26dc76f74bbfa3a46605a' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
+        return (h(Host, { key: 'f4b92f4fc3d646f9a327e43a9622abaf69659c28', class: getIonMode(this) }, h("ion-header", { key: '11232ef496e7abd69e55cef988963a4869a7b01e' }, h("ion-toolbar", { key: 'e7c41878691a504d44c658db02807867df542588' }, this.header !== undefined && h("ion-title", { key: 'fcf9d33e0f3e0076ff14805de68848f9ef199cca' }, this.header), h("ion-buttons", { key: '748a967ae0ce68bc2fd018a6b9ebe0e4b810f6ac', slot: "end" }, h("ion-button", { key: 'f5e60791870b5085a31b7af70ed4bb3fb83eb185', onClick: () => this.closeModal() }, "Close")))), h("ion-content", { key: '159797957b6f788a9b393d91864c18db34481c68' }, h("ion-list", { key: '4124554fe8b2411637cbf02f08e50e0d8f804175' }, 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,8 @@
 :host {
   height: 100%;
-} /**
+}
+
+/**
  * A heuristic that applies CSS to tablet
  * viewports.
  *
@@ -22,12 +24,6 @@
  *   }
  * }
  */
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

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

@@ -2,11 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-import { getIonTheme } from "../../global/ionic-global";
-/**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- */
+import { getIonMode } from "../../global/ionic-global";
 export class SelectOption {
     constructor() {
         this.inputId = `ion-selopt-${selectOptionIds++}`;
@@ -14,10 +10,7 @@ export class SelectOption {
         this.value = undefined;
     }
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '54487af48b0482f847f6e782434ef739cde0a73e', class: {
-                [theme]: true,
-            }, role: "option", id: this.inputId }));
+        return h(Host, { key: '2e6fa159464f04f6d8720f960141f67918bc7534', role: "option", id: this.inputId, class: getIonMode(this) });
     }
     static get is() { return "ion-select-option"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -84,12 +78,6 @@ ion-label {
   overflow-y: auto;
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -145,12 +133,6 @@ ion-label {
  *   }
  * }
  */
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

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

@@ -4,11 +4,8 @@
 import { Host, h, forceUpdate } from "@stencil/core";
 import { safeCall } from "../../utils/overlays";
 import { getClassMap } from "../../utils/theme";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- *
  * @internal
  */
 export class SelectPopover {
@@ -105,25 +102,20 @@ export class SelectPopover {
     render() {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
-        const theme = getIonTheme(this);
-        return (h(Host, { key: 'e926e43a2e2a191d413ea8288a4785641ec46f8d', class: {
-                [theme]: true,
-            } }, h("ion-list", { key: '8d3ec54cb1a6ef1a6af4973d306ebccdf41d3f96' }, header !== undefined && h("ion-list-header", { key: 'f9d6efb98f1b020a98bec431d683e65215f070be' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: '5276388ce33a9d43ab75b7cd466cca634ffa9f85' }, h("ion-label", { key: '72572f777f72a3f15fc6f25a29c5dbacc4a42617', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: '021b5b51cb3bac8ae8325e5f763db78a93833ad0' }, subHeader), message !== undefined && h("p", { key: '684bb4655de6fdc2150c0a76f0ceeb14b7f4e55b' }, message)))), this.renderOptions(options))));
+        return (h(Host, { key: 'dd0990db4de4f175b176b27f35501dd1604ca400', class: getIonMode(this) }, h("ion-list", { key: 'cea2bc3687b8b2490a2a9ff4a1e16cd34169558e' }, header !== undefined && h("ion-list-header", { key: '194aebb53453c43f913daae45a1a3066a1708c4c' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: 'b706b07a3c63ad8104d2db413e210c735ec1bec9' }, h("ion-label", { key: '6e52b5b4cf6b04ff3dd5671d64264233de4190d5', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: '6ef4440d17f5db8c96c63b9aa5073f4fe4b8ad62' }, subHeader), message !== undefined && h("p", { key: 'c7b3b76c30ecd606c0e985a0258c13d3a75756e7' }, message)))), this.renderOptions(options))));
     }
     static get is() { return "ion-select-popover"; }
     static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "ios": ["select-popover.ios.scss"],
-            "md": ["select-popover.md.scss"],
-            "ionic": ["select-popover.md.scss"]
+            "md": ["select-popover.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["select-popover.ios.css"],
-            "md": ["select-popover.md.css"],
-            "ionic": ["select-popover.md.css"]
+            "md": ["select-popover.md.css"]
         };
     }
     static get properties() {

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

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -84,12 +78,6 @@ ion-label {
   overflow-y: auto;
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -145,12 +133,6 @@ ion-label {
  *   }
  * }
  */
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

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

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

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

@@ -4,11 +4,7 @@
 import { Host, h } from "@stencil/core";
 import { hostContext } from "../../utils/theme";
 import { config } from "../../global/config";
-import { getIonTheme } from "../../global/ionic-global";
-/**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- */
+import { getIonMode } from "../../global/ionic-global";
 export class SkeletonText {
     constructor() {
         this.animated = false;
@@ -28,12 +24,12 @@ export class SkeletonText {
     render() {
         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: '70efd9086ef58705a965a63aa3e5ac775757dc85', class: {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: 'fdfabf9364caf507450239b62be24f08873bd650', class: {
+                [mode]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, h("span", { key: '296246a88e33e0106045bec2f64738f48593ba12' }, "\u00A0")));
+            } }, h("span", { key: '3482c88dcc177547185ce87972afa064a542367d' }, "\u00A0")));
     }
     static get is() { return "ion-skeleton-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spinner/{spinner.ionic.css → spinner.css}

@@ -1,33 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
-/*
-Do not edit directly, this file was auto-generated.
-*/ /**
- * 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
@@ -259,37 +229,4 @@ svg {
     stroke-dasharray: 100px, 200px;
     stroke-dashoffset: -125px;
   }
-}
-:host {
-  --color: var(--ion-primitives-neutral-800, #626262);
-}
-
-/* Extra Small */
-:host(.spinner-xsmall) {
-  width: var(--ion-scale-600, 24px);
-  height: var(--ion-scale-600, 24px);
-}
-
-/* Small */
-:host(.spinner-small) {
-  width: var(--ion-scale-800, 32px);
-  height: var(--ion-scale-800, 32px);
-}
-
-/* Medium */
-:host(.spinner-medium) {
-  width: var(--ion-scale-1000, 40px);
-  height: var(--ion-scale-1000, 40px);
-}
-
-/* Large */
-:host(.spinner-large) {
-  width: var(--ion-scale-1200, 48px);
-  height: var(--ion-scale-1200, 48px);
-}
-
-/* Extra Large */
-:host(.spinner-xlarge) {
-  width: var(--ion-scale-1400, 56px);
-  height: var(--ion-scale-1400, 56px);
 }