@ionic/core 9.0.2 → 9.0.3-dev.11788456135.1ab1d6cd

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

@@ -0,0 +1,255 @@
+/**
+ * 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 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
+ * 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.
+ */
+.action-sheet-button-label-has-rich-content,
+.alert-radio-label-has-rich-content,
+.alert-checkbox-label-has-rich-content,
+.select-option-label-has-rich-content {
+  gap: var(--token-space-300, var(--token-scale-300, 12px));
+}
+
+.action-sheet-button-label-text,
+.alert-checkbox-label-text,
+.alert-radio-label-text,
+.select-option-label-text {
+  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;
+  -webkit-padding-start: var(--token-space-0, var(--token-scale-0, 0px));
+  padding-inline-start: var(--token-space-0, var(--token-scale-0, 0px));
+  -webkit-padding-end: var(--token-space-0, var(--token-scale-0, 0px));
+  padding-inline-end: var(--token-space-0, var(--token-scale-0, 0px));
+  padding-top: var(--token-space-0, var(--token-scale-0, 0px));
+  padding-bottom: var(--token-space-0, var(--token-scale-0, 0px));
+  color: var(--token-text-subtle, var(--token-primitives-neutral-1000, #3b3b3b));
+  font-size: var(--token-font-size-350, 0.875rem);
+}
+
+.select-option-start,
+.select-option-end {
+  gap: var(--token-space-200, var(--token-scale-200, 8px));
+}
+
+/**
+ * Cap slotted children so they can't stretch the option
+ * row out of proportion, keeping rows visually uniform
+ * regardless of the content.
+ */
+.select-option-start > ion-avatar,
+.select-option-start > ion-img,
+.select-option-start > ion-thumbnail,
+.select-option-start > img,
+.select-option-start > svg,
+.select-option-end > ion-avatar,
+.select-option-end > ion-img,
+.select-option-end > ion-thumbnail,
+.select-option-end > img,
+.select-option-end > svg {
+  width: var(--token-scale-1200, 48px);
+  height: var(--token-scale-1200, 48px);
+}
+
+.select-option-start > ion-icon,
+.select-option-end > ion-icon {
+  font-size: var(--token-scale-1200, 48px);
+}
+
+.action-sheet-button-label-has-rich-content,
+.alert-radio-label-has-rich-content,
+.alert-checkbox-label-has-rich-content,
+.select-option-label-has-rich-content {
+  display: flex;
+  align-items: center;
+}
+
+/**
+ * Outer label container has rich content
+ * (start, content, description, end) that needs the
+ * label to span the available row width.
+ */
+.action-sheet-button-label-has-rich-content,
+.alert-radio-label-has-rich-content,
+.alert-checkbox-label-has-rich-content,
+.select-option-content {
+  flex: 1;
+}
+
+.action-sheet-button-label-text,
+.alert-checkbox-label-text,
+.alert-radio-label-text,
+.select-option-label-text {
+  display: flex;
+  align-items: center;
+}
+
+.select-option-start,
+.select-option-end {
+  display: flex;
+  align-items: center;
+}
+
+.select-option-description {
+  display: block;
+}
+
+/**
+ * Non-rich labels are plain text and should ellipsize when they
+ * overflow the row. Rich-content labels switch to flex so the
+ * start / content / end pieces can lay out side-by-side and wrap.
+ */
+.select-option-label:not(.select-option-label-has-rich-content) {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.select-option-label-has-rich-content {
+  display: flex;
+  align-items: center;
+}
+
+ion-radio.select-option-has-rich-content::part(label),
+ion-checkbox.select-option-has-rich-content::part(label),
+.select-option-content {
+  flex: 1;
+  /**
+   * Let rich content wrap instead of inheriting the label part's
+   * single-line truncation, so arbitrary slotted elements render
+   * without clipping.
+   */
+  white-space: normal;
+}
+
+:host ion-list {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+ion-list-header,
+ion-label {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+/**
+ * The main content inside of a popover has overflow: hidden
+ * so that a descendant ion-content can be scrolled.
+ * However, select-popover does not use ion-content so we need
+ * to explicitly make this container scrollable.
+ */
+:host {
+  overflow-y: auto;
+}
+
+ion-item {
+  --border-width: var(--token-border-size-0, var(--token-scale-0, 0px));
+  --background-focused: transparent;
+  --background-focused-opacity: 1;
+  --background-hover: var(--token-bg-neutral-subtlest-press, var(--token-primitives-neutral-200, #eae9e9));
+  --background-hover-opacity: 1;
+  --background-activated: var(--token-bg-neutral-subtlest-press, var(--token-primitives-neutral-200, #eae9e9));
+  --background-activated-opacity: 1;
+}
+
+ion-item.ion-focused.item-checkbox-checked,
+ion-item.ion-focused.item-radio-checked {
+  --background-focused: var(--token-bg-primary-subtle-default, var(--token-semantics-primary-100, var(--token-primitives-blue-100, #e9ecfc)));
+  --background-focused-opacity: 1;
+}
+
+ion-list ion-radio::part(container) {
+  display: none;
+}
+
+ion-list ion-radio::part(label) {
+  -webkit-margin-start: var(--token-space-0, var(--token-scale-0, 0px));
+  margin-inline-start: var(--token-space-0, var(--token-scale-0, 0px));
+  -webkit-margin-end: var(--token-space-0, var(--token-scale-0, 0px));
+  margin-inline-end: var(--token-space-0, var(--token-scale-0, 0px));
+  margin-top: var(--token-space-0, var(--token-scale-0, 0px));
+  margin-bottom: var(--token-space-0, var(--token-scale-0, 0px));
+}
+
+ion-list ion-radio::part(label),
+ion-list ion-checkbox::part(label) {
+  font-size: var(--token-font-size-400, 1rem);
+  font-weight: var(--token-font-weight-medium, 500);
+  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;
+}
+
+.item-radio-checked,
+.item-checkbox-checked {
+  --background: var(--token-bg-primary-subtle-default, var(--token-semantics-primary-100, var(--token-primitives-blue-100, #e9ecfc)));
+}

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

@@ -1,3 +1,64 @@
+/**
+ * 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
+ * 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.
+ */
+/**
+ * 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;
+ *   }
+ * }
+ */
 /**
  * A heuristic that applies CSS to tablet
  * viewports.
@@ -57,36 +118,18 @@
 .alert-radio-label-has-rich-content,
 .alert-checkbox-label-has-rich-content,
 .select-option-label-has-rich-content {
-  display: flex;
-  align-items: center;
   gap: 16px;
 }
 
-/**
- * Outer label container has rich content
- * (start, content, description, end) that needs the
- * label to span the available row width.
- */
-.action-sheet-button-label-has-rich-content,
-.alert-radio-label-has-rich-content,
-.alert-checkbox-label-has-rich-content,
-.select-option-content {
-  flex: 1;
-}
-
 .action-sheet-button-label-text,
 .alert-checkbox-label-text,
 .alert-radio-label-text,
 .select-option-label-text {
-  display: flex;
-  align-items: center;
   gap: 12px;
 }
 
 .select-option-start,
 .select-option-end {
-  display: flex;
-  align-items: center;
   gap: 8px;
 }
 
@@ -95,39 +138,16 @@
   padding-right: 0;
   padding-top: 5px;
   padding-bottom: 0;
-  display: block;
   color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
   font-size: 0.75rem;
 }
 
 /**
- * Non-rich labels are plain text and should ellipsize when they
- * overflow the row. Rich-content labels switch to flex so the
- * start / content / end pieces can lay out side-by-side and wrap.
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
  */
-.select-option-label:not(.select-option-label-has-rich-content) {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.select-option-label-has-rich-content {
-  display: flex;
-  align-items: center;
-}
-
-ion-radio.select-option-has-rich-content::part(label),
-ion-checkbox.select-option-has-rich-content::part(label),
-.select-option-content {
-  flex: 1;
-  /**
-   * Let rich content wrap instead of inheriting the label part's
-   * single-line truncation, so arbitrary slotted elements render
-   * without clipping.
-   */
-  white-space: normal;
-}
-
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -216,39 +236,6 @@ ion-checkbox.select-option-has-rich-content::part(label),
   padding-inline-end: 16px;
 }
 
-/**
- * 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.
- */
 /**
  * A heuristic that applies CSS to tablet
  * viewports.
@@ -271,31 +258,6 @@ ion-checkbox.select-option-has-rich-content::part(label),
  *   }
  * }
  */
-:host ion-list {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-ion-list-header,
-ion-label {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-/**
- * The main content inside of a popover has overflow: hidden
- * so that a descendant ion-content can be scrolled.
- * However, select-popover does not use ion-content so we need
- * to explicitly make this container scrollable.
- */
-:host {
-  overflow-y: auto;
-}
-
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -330,26 +292,10 @@ ion-label {
  * convert to a unit other than $baselineUnit.
  */
 /**
- * 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 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.
@@ -405,4 +351,122 @@ ion-label {
  *     background-color: blue;
  *   }
  * }
- */
+ */
+.action-sheet-button-label-has-rich-content,
+.alert-radio-label-has-rich-content,
+.alert-checkbox-label-has-rich-content,
+.select-option-label-has-rich-content {
+  gap: 16px;
+}
+
+.action-sheet-button-label-text,
+.alert-checkbox-label-text,
+.alert-radio-label-text,
+.select-option-label-text {
+  gap: 12px;
+}
+
+.select-option-start,
+.select-option-end {
+  gap: 8px;
+}
+
+.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;
+}
+
+.action-sheet-button-label-has-rich-content,
+.alert-radio-label-has-rich-content,
+.alert-checkbox-label-has-rich-content,
+.select-option-label-has-rich-content {
+  display: flex;
+  align-items: center;
+}
+
+/**
+ * Outer label container has rich content
+ * (start, content, description, end) that needs the
+ * label to span the available row width.
+ */
+.action-sheet-button-label-has-rich-content,
+.alert-radio-label-has-rich-content,
+.alert-checkbox-label-has-rich-content,
+.select-option-content {
+  flex: 1;
+}
+
+.action-sheet-button-label-text,
+.alert-checkbox-label-text,
+.alert-radio-label-text,
+.select-option-label-text {
+  display: flex;
+  align-items: center;
+}
+
+.select-option-start,
+.select-option-end {
+  display: flex;
+  align-items: center;
+}
+
+.select-option-description {
+  display: block;
+}
+
+/**
+ * Non-rich labels are plain text and should ellipsize when they
+ * overflow the row. Rich-content labels switch to flex so the
+ * start / content / end pieces can lay out side-by-side and wrap.
+ */
+.select-option-label:not(.select-option-label-has-rich-content) {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.select-option-label-has-rich-content {
+  display: flex;
+  align-items: center;
+}
+
+ion-radio.select-option-has-rich-content::part(label),
+ion-checkbox.select-option-has-rich-content::part(label),
+.select-option-content {
+  flex: 1;
+  /**
+   * Let rich content wrap instead of inheriting the label part's
+   * single-line truncation, so arbitrary slotted elements render
+   * without clipping.
+   */
+  white-space: normal;
+}
+
+:host ion-list {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+ion-list-header,
+ion-label {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+/**
+ * The main content inside of a popover has overflow: hidden
+ * so that a descendant ion-content can be scrolled.
+ * However, select-popover does not use ion-content so we need
+ * to explicitly make this container scrollable.
+ */
+:host {
+  overflow-y: auto;
+}

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

@@ -6,8 +6,11 @@ import { getOverlayLabelJustify, getOverlayLabelPlacement } from "../../utils/ov
 import { safeCall } from "../../utils/overlays";
 import { renderOptionLabel } from "../../utils/select-option-render";
 import { getClassMap } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+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.
+ *
  * @internal
  */
 export class SelectPopover {
@@ -78,7 +81,7 @@ export class SelectPopover {
         }
     }
     renderCheckboxOptions(options) {
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         return options.map((option, index) => {
             /**
              * Cast to `SelectOverlayOption` to access rich content
@@ -95,8 +98,8 @@ export class SelectPopover {
                 endContent: richOption.endContent,
                 description: richOption.description,
             };
-            const defaultLabelPlacement = getOverlayLabelPlacement(mode, 'checkbox');
-            const defaultJustify = getOverlayLabelJustify(mode, 'checkbox');
+            const defaultLabelPlacement = getOverlayLabelPlacement(theme, 'checkbox');
+            const defaultJustify = getOverlayLabelJustify(theme, 'checkbox');
             return (h("ion-item", {
                 // TODO FW-4784
                 disabled: option.disabled, class: {
@@ -115,7 +118,7 @@ export class SelectPopover {
         });
     }
     renderRadioOptions(options) {
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const checked = options.filter((o) => o.checked).map((o) => o.value)[0];
         return (h("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, options.map((option, index) => {
             /**
@@ -142,7 +145,7 @@ export class SelectPopover {
                 }
             }, h("ion-radio", { class: {
                     'select-option-has-rich-content': hasRichContent,
-                }, value: option.value, disabled: option.disabled, justify: richOption.justify ?? getOverlayLabelJustify(mode, 'radio'), labelPlacement: richOption.labelPlacement ?? getOverlayLabelPlacement(mode, 'radio'), onClick: () => this.dismissParentPopover(), onKeyDown: (ev) => {
+                }, value: option.value, disabled: option.disabled, justify: richOption.justify ?? getOverlayLabelJustify(theme, 'radio'), labelPlacement: richOption.labelPlacement ?? getOverlayLabelPlacement(theme, 'radio'), onClick: () => this.dismissParentPopover(), onKeyDown: (ev) => {
                     if (ev.key === 'Enter' && !ev.repeat) {
                         this.pendingEnterTarget = ev.currentTarget;
                     }
@@ -164,20 +167,25 @@ export class SelectPopover {
     render() {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
-        return (h(Host, { key: '4b4ac4a4b6523147e7c1f5e29dd8043867f2baea', class: getIonMode(this) }, h("ion-list", { key: 'f700d3dc3ce68c20a4d981164b29262564097fb4' }, header !== undefined && h("ion-list-header", { key: '196bcd7963f13ef8bc46231545eee4cb8d526f5e' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: 'bb108e0aa2409997df35f52cb67e58e55e0fd630' }, h("ion-label", { key: '59e8d9196ff976f3835766662654c0f085e58ec3', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: '532f75d7c129ffadca4e6cbb619a4427aaede65c' }, subHeader), message !== undefined && h("p", { key: 'fc42c91594b9001e983cb5e4176fc4c9bff0f708' }, message)))), this.renderOptions(options))));
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '5c2fa9bfc1041fc034741182bf1beb57a51454be', class: {
+                [theme]: true,
+            } }, h("ion-list", { key: '8433b6e6628750f461dde919818a4aa77c3bdea7' }, header !== undefined && h("ion-list-header", { key: '907e8b7c35fb083c4311e2f781e808b9fb0f955b' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: '94862a5fcb2f8373cccef9acd97b675999a0246f' }, h("ion-label", { key: '0e7fe0f1bbcb4526e599d51583a0ce2a35645cd2', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: 'd28e66dee997780896b7b2ab4350e4475c6407dc' }, subHeader), message !== undefined && h("p", { key: 'aeb82906a1cb2729e969b4148ffe63d386babbd6' }, 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"]
+            "md": ["select-popover.md.scss"],
+            "ionic": ["select-popover.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["select-popover.ios.css"],
-            "md": ["select-popover.md.css"]
+            "md": ["select-popover.md.css"],
+            "ionic": ["select-popover.ionic.css"]
         };
     }
     static get properties() {