@ionic/core 8.8.20-dev.11787158518.168a2fea → 8.8.20-dev.11789504012.1a675914

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

@@ -6,36 +6,24 @@ 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 {
-    el;
-    // Tracks the option that received Enter-keydown so keyup only
-    // dismisses when the press started on the same option. Prevents
-    // Enter on the triggering ion-select from auto-dismissing.
-    pendingEnterTarget = null;
-    /**
-     * The header text of the popover
-     */
-    header;
-    /**
-     * The subheader text of the popover
-     */
-    subHeader;
-    /**
-     * The text content of the popover body
-     */
-    message;
-    /**
-     * If true, the select accepts multiple values
-     */
-    multiple;
-    /**
-     * An array of options for the popover
-     */
-    options = [];
+    constructor() {
+        // Tracks the option that received Enter-keydown so keyup only
+        // dismisses when the press started on the same option. Prevents
+        // Enter on the triggering ion-select from auto-dismissing.
+        this.pendingEnterTarget = null;
+        /**
+         * An array of options for the popover
+         */
+        this.options = [];
+    }
     findOptionFromEvent(ev) {
         const { options } = this;
         return options.find((o) => o.value === ev.target.value);
@@ -48,7 +36,7 @@ export class SelectPopover {
     callOptionHandler(ev) {
         const option = this.findOptionFromEvent(ev);
         const values = this.getValues(ev);
-        if (option?.handler) {
+        if (option === null || option === void 0 ? void 0 : option.handler) {
             safeCall(option.handler, values);
         }
     }
@@ -93,8 +81,9 @@ export class SelectPopover {
         }
     }
     renderCheckboxOptions(options) {
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         return options.map((option, index) => {
+            var _a, _b;
             /**
              * Cast to `SelectOverlayOption` to access rich content
              * fields (`startContent`, `endContent`, `description`)
@@ -110,18 +99,17 @@ 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: {
+                disabled: option.disabled, class: Object.assign({
                     // TODO FW-4784
-                    'item-checkbox-checked': option.checked,
-                    ...getClassMap(option.cssClass),
-                }
+                    'item-checkbox-checked': option.checked
+                }, getClassMap(option.cssClass))
             }, h("ion-checkbox", { class: {
                     'select-option-has-rich-content': hasRichContent,
-                }, value: option.value, disabled: option.disabled, checked: option.checked, justify: richOption.justify ?? defaultJustify, labelPlacement: richOption.labelPlacement ?? defaultLabelPlacement, onIonChange: (ev) => {
+                }, value: option.value, disabled: option.disabled, checked: option.checked, justify: (_a = richOption.justify) !== null && _a !== void 0 ? _a : defaultJustify, labelPlacement: (_b = richOption.labelPlacement) !== null && _b !== void 0 ? _b : defaultLabelPlacement, onIonChange: (ev) => {
                     this.setChecked(ev);
                     this.callOptionHandler(ev);
                     // TODO FW-4784
@@ -130,9 +118,10 @@ 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) => {
+            var _a, _b;
             /**
              * Cast to `SelectOverlayOption` to access rich content
              * fields (`startContent`, `endContent`, `description`)
@@ -150,14 +139,13 @@ export class SelectPopover {
             };
             return (h("ion-item", {
                 // TODO FW-4784
-                disabled: option.disabled, class: {
+                disabled: option.disabled, class: Object.assign({
                     // TODO FW-4784
-                    'item-radio-checked': option.value === checked,
-                    ...getClassMap(option.cssClass),
-                }
+                    'item-radio-checked': option.value === checked
+                }, getClassMap(option.cssClass))
             }, 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: (_a = richOption.justify) !== null && _a !== void 0 ? _a : getOverlayLabelJustify(theme, 'radio'), labelPlacement: (_b = richOption.labelPlacement) !== null && _b !== void 0 ? _b : getOverlayLabelPlacement(theme, 'radio'), onClick: () => this.dismissParentPopover(), onKeyDown: (ev) => {
                     if (ev.key === 'Enter' && !ev.repeat) {
                         this.pendingEnterTarget = ev.currentTarget;
                     }
@@ -179,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: '00e306f7d68005c0b17e598bec54471f5e38c991', class: {
+                [theme]: true,
+            } }, h("ion-list", { key: '1357288064dc139a0ef4904744f945bf1dc39b3c' }, header !== undefined && h("ion-list-header", { key: '4e918516f5666e90f3218edc3a08734822b76075' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: '170900f83842d73f6d9adbb7b9e4bc332dfa495d' }, h("ion-label", { key: 'a76efe58ad6066e601edc1794782e3928556423f', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: 'c88680bbbfc228a65c51f010c42158995d8a6507' }, subHeader), message !== undefined && h("p", { key: '91e49d1477b2b9d903da8a385da07b6e7de37f73' }, 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() {

package/dist/collection/components/select-popover/select-popover.md.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,10 @@
   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.
- */
-.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;
-}
-
 /**
  * Cap slotted children so they can't stretch the option
  * row out of proportion, keeping rows visually uniform
@@ -162,6 +176,67 @@ ion-checkbox.select-option-has-rich-content::part(label),
   height: 56px;
 }
 
+/**
+ * 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.
+ */
+/**
+ * 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
@@ -217,6 +292,100 @@ ion-checkbox.select-option-has-rich-content::part(label),
  *   }
  * }
  */
+.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;
@@ -242,6 +411,12 @@ 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
@@ -297,6 +472,12 @@ 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/test/fixtures.js

@@ -3,15 +3,8 @@
  */
 import { expect } from "@playwright/test";
 export class SelectPopoverPage {
-    page;
-    multiple;
-    options = [];
-    // Locators
-    popover;
-    selectPopover;
-    // Event spies
-    ionPopoverDidDismiss;
     constructor(page) {
+        this.options = [];
         this.page = page;
     }
     async setup(config, options, multiple = false) {

package/dist/collection/components/skeleton-text/skeleton-text.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

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

@@ -4,18 +4,18 @@
 import { Host, h } from "@stencil/core";
 import { hostContext } from "../../utils/theme";
 import { config } from "../../global/config";
-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.
+ */
 export class SkeletonText {
-    el;
-    /**
-     * If `true`, the skeleton text will animate.
-     */
-    animated = false;
-    /**
-     * Emitted when the styles change.
-     * @internal
-     */
-    ionStyle;
+    constructor() {
+        /**
+         * If `true`, the skeleton text will animate.
+         */
+        this.animated = false;
+    }
     componentWillLoad() {
         this.emitStyle();
     }
@@ -31,12 +31,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 mode = getIonMode(this);
-        return (h(Host, { key: '1114e5caf6419e9458db8256480b39e6989963b2', class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '7a27c2f32338a0770951ab814095dd0bf091966c', class: {
+                [theme]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, h("span", { key: '9137cf837f163fc0653437fc003666cddac103b0' }, "\u00A0")));
+            } }, h("span", { key: 'f21c7f76ea9095a6c2fe39714d2415abc0b5366b' }, "\u00A0")));
     }
     static get is() { return "ion-skeleton-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,3 +1,31 @@
+/**
+ * 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
@@ -62,6 +90,7 @@
   width: 28px;
   height: 28px;
   color: var(--color);
+  overflow: hidden;
   user-select: none;
 }
 
@@ -98,16 +127,6 @@ svg {
   }
 }
 
-:host(.spinner-lines) line,
-:host(.spinner-lines-small) line {
-  stroke-width: 7px;
-}
-
-:host(.spinner-lines-sharp) line,
-:host(.spinner-lines-sharp-small) line {
-  stroke-width: 4px;
-}
-
 :host(.spinner-lines) line,
 :host(.spinner-lines-small) line,
 :host(.spinner-lines-sharp) line,
@@ -229,4 +248,53 @@ svg {
     stroke-dasharray: 100px, 200px;
     stroke-dashoffset: -125px;
   }
+}
+:host {
+  --color: var(--token-primitives-neutral-800, #626262);
+  width: var(--token-scale-700, 28px);
+  height: var(--token-scale-700, 28px);
+}
+
+:host(.ion-color-medium) {
+  color: var(--ion-color-medium-subtle-contrast, var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262)));
+}
+
+:host(.spinner-lines) line,
+:host(.spinner-lines-small) line {
+  stroke-width: var(--token-scale-150, 6px);
+}
+
+:host(.spinner-lines-sharp) line,
+:host(.spinner-lines-sharp-small) line {
+  stroke-width: var(--token-scale-100, 4px);
+}
+
+/* Extra Small */
+:host(.spinner-xsmall) {
+  width: var(--token-scale-600, 24px);
+  height: var(--token-scale-600, 24px);
+}
+
+/* Small */
+:host(.spinner-small) {
+  width: var(--token-scale-800, 32px);
+  height: var(--token-scale-800, 32px);
+}
+
+/* Medium */
+:host(.spinner-medium) {
+  width: var(--token-scale-1000, 40px);
+  height: var(--token-scale-1000, 40px);
+}
+
+/* Large */
+:host(.spinner-large) {
+  width: var(--token-scale-1200, 48px);
+  height: var(--token-scale-1200, 48px);
+}
+
+/* Extra Large */
+:host(.spinner-xlarge) {
+  width: var(--token-scale-1400, 56px);
+  height: var(--token-scale-1400, 56px);
 }