@ionic/core 8.2.3-dev.11719513154.1075733b → 8.2.3-dev.11719565135.1ab35bb2

package/dist/collection/components/segment/test/wrap/segment.e2e.js

@@ -0,0 +1,85 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('segment: wrap'), () => {
+        test('should wrap long text', async ({ page }) => {
+            await page.setContent(`
+        <ion-segment>
+          <ion-segment-button value="long">
+            <ion-label>This is the button that never ends it just goes on and on my friends</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="free">
+            <ion-label>Free</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="purchased">
+            <ion-label>Purchased</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+      `, config);
+            const segment = page.locator('ion-segment');
+            await expect(segment).toHaveScreenshot(screenshot(`segment-wrap`));
+        });
+        test('should wrap long text with an icon', async ({ page }) => {
+            await page.setContent(`
+        <ion-segment>
+          <ion-segment-button value="long">
+            <ion-icon name="heart-outline"></ion-icon>
+            <ion-label>This is the button that never ends it just goes on and on my friends</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="free">
+            <ion-icon name="star-outline"></ion-icon>
+            <ion-label>Free</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="purchased">
+            <ion-icon name="square-outline"></ion-icon>
+            <ion-label>Purchased</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+      `, config);
+            const segment = page.locator('ion-segment');
+            await expect(segment).toHaveScreenshot(screenshot(`segment-wrap-icon`));
+        });
+        test('should wrap long text with a start icon', async ({ page }) => {
+            await page.setContent(`
+        <ion-segment>
+          <ion-segment-button layout="icon-start" value="long">
+            <ion-icon name="heart-outline"></ion-icon>
+            <ion-label>This is the button that never ends it just goes on and on my friends</ion-label>
+          </ion-segment-button>
+          <ion-segment-button layout="icon-start" value="free">
+            <ion-icon name="star-outline"></ion-icon>
+            <ion-label>Free</ion-label>
+          </ion-segment-button>
+          <ion-segment-button layout="icon-start" value="purchased">
+            <ion-icon name="square-outline"></ion-icon>
+            <ion-label>Purchased</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+      `, config);
+            const segment = page.locator('ion-segment');
+            await expect(segment).toHaveScreenshot(screenshot(`segment-wrap-icon-start`));
+        });
+        test('should wrap long text in a toolbar', async ({ page }) => {
+            await page.setContent(`
+        <ion-toolbar>
+          <ion-segment>
+            <ion-segment-button value="long">
+              <ion-label>This is the button that never ends it just goes on and on my friends</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="free">
+              <ion-label>Free</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="purchased">
+              <ion-label>Purchased</ion-label>
+            </ion-segment-button>
+          </ion-segment>
+        </ion-toolbar>
+      `, config);
+            const toolbar = page.locator('ion-toolbar');
+            await expect(toolbar).toHaveScreenshot(screenshot(`segment-wrap-toolbar`));
+        });
+    });
+});

package/dist/collection/components/segment-button/segment-button.ios.css

@@ -1,3 +1,9 @@
+/**
+ * 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
@@ -117,18 +123,18 @@
 
 .button-native {
   border-radius: 0;
+  color: inherit;
   font-family: inherit;
   font-size: inherit;
   font-style: inherit;
   font-weight: inherit;
   letter-spacing: inherit;
+  text-align: inherit;
   text-decoration: inherit;
   text-indent: inherit;
   text-overflow: inherit;
   text-transform: inherit;
-  text-align: inherit;
   white-space: inherit;
-  color: inherit;
   -webkit-margin-start: var(--margin-start);
   margin-inline-start: var(--margin-start);
   -webkit-margin-end: var(--margin-end);
@@ -165,8 +171,8 @@
 }
 
 .button-native::after {
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -298,6 +304,12 @@ ion-ripple-effect {
     transition: none;
   }
 }
+/**
+ * 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
@@ -430,8 +442,8 @@ ion-ripple-effect {
   padding-inline-start: 2px;
   -webkit-padding-end: 2px;
   padding-inline-end: 2px;
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
 }

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

@@ -4,10 +4,11 @@
 import { Host, forceUpdate, h } from "@stencil/core";
 import { addEventListener, removeEventListener, inheritAttributes } from "../../utils/helpers";
 import { hostContext } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 let ids = 0;
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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.
  *
  * @part native - The native HTML button element that wraps all child elements.
  * @part indicator - The indicator displayed on the checked segment button.
@@ -76,10 +77,10 @@ export class SegmentButton {
     }
     render() {
         const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const hasSegmentColor = () => (segmentEl === null || segmentEl === void 0 ? void 0 : segmentEl.color) !== undefined;
-        return (h(Host, { key: '70cf5c7a3ae2620222c5250c644faf3cfc3b3e4e', class: {
-                [mode]: true,
+        return (h(Host, { key: '18e7844f7918fe0f7f4b78b19c9e62401a934c68', class: {
+                [theme]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'in-segment': hostContext('ion-segment', this.el),
@@ -94,23 +95,25 @@ export class SegmentButton {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, h("button", Object.assign({ key: 'a53c9f1e360934e8d2e90476642ba4507fc38ebd', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), h("span", { key: '7d8feda840d389941cc693f500b5eba0b39b41da', class: "button-inner" }, h("slot", { key: 'd9ae1eec45db253cbf573d29cd545658dd595d87' })), mode === 'md' && h("ion-ripple-effect", { key: '49e6a16968709dc9b3fc77bc9fb99acb42fda88c' })), h("div", { key: '4e3ea0989ed5205dbb03586e4facb439b05a92de', part: "indicator", class: {
+            } }, h("button", Object.assign({ key: '5e30ee078356df848a19b8f3b40457445108d9d1', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), h("span", { key: 'c6d1d9e5f520de659dc56b23d34efdfde6c7a3e0', class: "button-inner" }, h("slot", { key: 'd2f4792b4142444a7f578b08f6a7b51232484211' })), theme === 'md' && h("ion-ripple-effect", { key: '65fb7e28765f573898160e55c4b938124c8f4d03' })), h("div", { key: 'f1705639789b8b85bb70f4fb3e5301f81ef95999', part: "indicator", class: {
                 'segment-button-indicator': true,
                 'segment-button-indicator-animated': true,
-            } }, h("div", { key: '65c72a151080998c1e548c87d4d4ebd5c7dda72f', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, h("div", { key: '900acbaf069554be7abbe4716217b1c94b19ddc5', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     static get is() { return "ion-segment-button"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["segment-button.ios.scss"],
-            "md": ["segment-button.md.scss"]
+            "md": ["segment-button.md.scss"],
+            "ionic": ["segment-button.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["segment-button.ios.css"],
-            "md": ["segment-button.md.css"]
+            "md": ["segment-button.md.css"],
+            "ionic": ["segment-button.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/segment-button/segment-button.md.css

@@ -1,3 +1,9 @@
+/**
+ * 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
@@ -117,18 +123,18 @@
 
 .button-native {
   border-radius: 0;
+  color: inherit;
   font-family: inherit;
   font-size: inherit;
   font-style: inherit;
   font-weight: inherit;
   letter-spacing: inherit;
+  text-align: inherit;
   text-decoration: inherit;
   text-indent: inherit;
   text-overflow: inherit;
   text-transform: inherit;
-  text-align: inherit;
   white-space: inherit;
-  color: inherit;
   -webkit-margin-start: var(--margin-start);
   margin-inline-start: var(--margin-start);
   -webkit-margin-end: var(--margin-end);
@@ -165,8 +171,8 @@
 }
 
 .button-native::after {
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -298,6 +304,12 @@ ion-ripple-effect {
     transition: none;
   }
 }
+/**
+ * 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
@@ -359,8 +371,8 @@ ion-ripple-effect {
   --background-hover: var(--color-checked);
   --background-focused: var(--color-checked);
   --background-activated-opacity: 0;
-  --background-focused-opacity: .12;
-  --background-hover-opacity: .04;
+  --background-focused-opacity: 0.12;
+  --background-hover-opacity: 0.04;
   --color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.6);
   --color-checked: var(--ion-color-primary, #0054e9);
   --indicator-box-shadow: none;
@@ -488,8 +500,8 @@ ion-ripple-effect {
 }
 
 .segment-button-indicator {
-  left: 0;
   right: 0;
+  left: 0;
   bottom: 0;
 }
 

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

@@ -1,3 +1,9 @@
+/**
+ * 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
@@ -150,18 +156,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;
 }
@@ -555,7 +561,8 @@ 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
@@ -574,6 +581,12 @@ 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
@@ -629,6 +642,12 @@ 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

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

@@ -1,6 +1,7 @@
 /*!
  * (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";
@@ -9,10 +10,12 @@ 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 { getIonMode } from "../../global/ionic-global";
+import { config } from "../../global/config";
+import { getIonTheme } from "../../global/ionic-global";
 // TODO(FW-2832): types
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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.
  *
  * @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.
@@ -314,8 +317,8 @@ export class Select {
     async openPopover(ev) {
         const { fill, labelPlacement } = this;
         const interfaceOptions = this.interfaceOptions;
-        const mode = getIonMode(this);
-        const showBackdrop = mode === 'md' ? false : true;
+        const theme = getIonTheme(this);
+        const showBackdrop = theme === 'md' ? false : true;
         const multiple = this.multiple;
         const value = this.value;
         let event = ev;
@@ -326,7 +329,7 @@ export class Select {
          * when using a fill in MD mode or if the
          * label is floating/stacked.
          */
-        if (hasFloatingOrStackedLabel || (mode === 'md' && fill !== undefined)) {
+        if (hasFloatingOrStackedLabel || (theme === 'md' && fill !== undefined)) {
             size = 'cover';
             /**
              * Otherwise the popover
@@ -339,7 +342,7 @@ export class Select {
                     ionShadowTarget: this.nativeWrapperEl,
                 } });
         }
-        const popoverOpts = Object.assign(Object.assign({ mode,
+        const popoverOpts = Object.assign(Object.assign({ theme,
             event, alignment: 'center', size,
             showBackdrop }, interfaceOptions), { component: 'ion-select-popover', cssClass: ['select-popover', interfaceOptions.cssClass], componentProps: {
                 header: interfaceOptions.header,
@@ -364,9 +367,9 @@ export class Select {
         return popoverController.create(popoverOpts);
     }
     async openActionSheet() {
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const interfaceOptions = this.interfaceOptions;
-        const actionSheetOpts = Object.assign(Object.assign({ mode }, interfaceOptions), { buttons: this.createActionSheetButtons(this.childOpts, this.value), cssClass: ['select-action-sheet', interfaceOptions.cssClass] });
+        const actionSheetOpts = Object.assign(Object.assign({ theme }, interfaceOptions), { buttons: this.createActionSheetButtons(this.childOpts, this.value), cssClass: ['select-action-sheet', interfaceOptions.cssClass] });
         /**
          * Workaround for Stencil to autodefine
          * ion-action-sheet when
@@ -383,8 +386,8 @@ export class Select {
     async openAlert() {
         const interfaceOptions = this.interfaceOptions;
         const inputType = this.multiple ? 'checkbox' : 'radio';
-        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: [
+        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: [
                 {
                     text: this.cancelText,
                     role: 'cancel',
@@ -501,8 +504,8 @@ export class Select {
      * when fill="outline".
      */
     renderLabelContainer() {
-        const mode = getIonMode(this);
-        const hasOutlineFill = mode === 'md' && this.fill === 'outline';
+        const theme = getIonTheme(this);
+        const hasOutlineFill = theme === 'md' && this.fill === 'outline';
         if (hasOutlineFill) {
             /**
              * The outline fill has a special outline
@@ -551,15 +554,10 @@ export class Select {
      * next to the select text.
      */
     renderSelectIcon() {
-        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;
+        const { isExpanded, selectExpandedIcon, selectCollapsedIcon } = this;
+        let icon = selectCollapsedIcon;
+        if (isExpanded) {
+            icon = selectExpandedIcon;
         }
         return h("ion-icon", { class: "select-icon", part: "icon", "aria-hidden": "true", icon: icon });
     }
@@ -594,14 +592,62 @@ 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 mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const hasFloatingOrStackedLabel = labelPlacement === 'floating' || labelPlacement === 'stacked';
         const justifyEnabled = !hasFloatingOrStackedLabel;
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         const inItem = hostContext('ion-item', this.el);
-        const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem;
+        const shouldRenderHighlight = theme === 'md' && fill !== 'outline' && !inItem;
         const hasValue = this.hasValue();
         const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null;
         renderHiddenInput(true, el, name, parseValue(value), disabled);
@@ -623,8 +669,8 @@ export class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: 'e14586e887c0b73457b9f1e8f0585dfc7d590051', onClick: this.onClick, class: createColorClasses(this.color, {
-                [mode]: true,
+        return (h(Host, { key: '50a843952ba75a266cb2690e3bac68c7bbb8ba95', onClick: this.onClick, class: createColorClasses(this.color, {
+                [theme]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
                 'select-disabled': disabled,
@@ -639,20 +685,22 @@ export class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: 'b44929542c809f2dca25afc588701762a083edd1', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '195e3fad9cea0363ff00bf257ec2975fe5aa6887', class: "select-wrapper-inner" }, h("slot", { key: '9da7161a69b92d6fd124a478348d3fa420092f26', name: "start" }), h("div", { key: '49c589c164d167de0ba5741a0c80fba58ea0bec6', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: 'de1536d910fceb8e2dbdda13abcf88ee969888b8', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'e821b7b32cd1996eaa6d471df9b531ad0d491098', class: "select-highlight" }))));
+            }) }, h("label", { key: '617e8b1ee3636c35e8262748028c5c9b53349ab8', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '0b5a7126bcb30203986c5a0ed9f2f41f25501ace', class: "select-wrapper-inner" }, h("slot", { key: '0e35013e26f58f04f7eb9228cb270991e5b755ae', name: "start" }), h("div", { key: 'cf131b61e7907f63a1ce32dd931a9753ae290807', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '0adb8f7cdd610dfe67e1a363180e99322f5a6343', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'd9d2954141a517296483c22eac4b143c4096e1c5', 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"]
+            "md": ["select.md.scss"],
+            "ionic": ["select.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["select.ios.css"],
-            "md": ["select.md.css"]
+            "md": ["select.md.css"],
+            "ionic": ["select.md.css"]
         };
     }
     static get properties() {
@@ -751,7 +799,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 `md` mode."
+                    "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."
                 },
                 "attribute": "fill",
                 "reflect": false
@@ -951,7 +999,7 @@ export class Select {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The toggle icon to use. Defaults to `chevronExpand` for `ios` mode,\nor `caretDownSharp` for `md` mode."
+                    "text": "The toggle icon to use. Defaults to `\"chevronExpand\"` for the `\"ios\"` theme,\nor `\"caretDownSharp\"` for the `\"md\"` and `\"ionic\"` themes."
                 },
                 "attribute": "toggle-icon",
                 "reflect": false
@@ -968,7 +1016,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` mode 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\"` theme will be disabled. If undefined, `toggleIcon`\nwill be used for when the select is both open and closed."
                 },
                 "attribute": "expanded-icon",
                 "reflect": false