@ionic/core 8.8.9-dev.11779411201.1a483e09 → 8.8.9-dev.11780349068.18c33698

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

@@ -1,25 +1,3 @@
-/**
- * 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
@@ -53,6 +31,28 @@
  * @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;
+ *   }
+ * }
+ */
 :host ion-list {
   margin-left: 0;
   margin-right: 0;
@@ -78,85 +78,6 @@ ion-label {
   overflow-y: auto;
 }
 
-/**
- * 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;
-}
-
-.select-option-label-text {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-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;
-}
-
-.select-option-start,
-.select-option-end {
-  display: flex;
-  align-items: center;
-}
-
-/**
- * Cap slotted children so they can't stretch the option
- * row out of proportion, keeping rows visually uniform
- * regardless of the content. ion-icon is excluded because
- * its `contain: strict` makes intrinsic sizes resolve to 0,
- * which would collapse the icon to zero width.
- */
-.select-option-start > *:not(ion-icon),
-.select-option-end > *:not(ion-icon) {
-  max-width: fit-content;
-}
-
-.select-option-description {
-  display: block;
-}
-
-.select-option-label {
-  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;
-}
-
-/**
- * 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
@@ -212,12 +133,6 @@ ion-checkbox.select-option-has-rich-content::part(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
@@ -272,13 +187,4 @@ ion-checkbox.select-option-has-rich-content::part(label),
  *     background-color: blue;
  *   }
  * }
- */
-/**
- * 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 > *,
-.select-option-end > * {
-  max-height: min(1.5rem, 48px);
-}
+ */

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

@@ -2,15 +2,10 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h, forceUpdate } from "@stencil/core";
-import { getOverlayLabelJustify, getOverlayLabelPlacement } from "../../utils/overlay-control-label";
 import { safeCall } from "../../utils/overlays";
-import { renderOptionLabel } from "../../utils/select-option-render";
 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 {
@@ -44,10 +39,7 @@ export class SelectPopover {
      * Dismisses the host popover that the `ion-select-popover`
      * is rendered within.
      */
-    dismissParentPopover(isOptionDisabled = false) {
-        if (isOptionDisabled) {
-            return;
-        }
+    dismissParentPopover() {
         const popover = this.el.closest('ion-popover');
         if (popover) {
             popover.dismiss();
@@ -84,111 +76,56 @@ export class SelectPopover {
         }
     }
     renderCheckboxOptions(options) {
-        const theme = getIonTheme(this);
-        return options.map((option, index) => {
-            var _a, _b;
-            /**
-             * Cast to `SelectOverlayOption` to access rich content
-             * fields (`startContent`, `endContent`, `description`)
-             * that are passed through from `ion-select` but not
-             * part of the public `SelectPopoverOption` interface.
-             */
-            const richOption = option;
-            const hasRichContent = !!richOption.startContent || !!richOption.endContent || !!richOption.description;
-            const optionLabelOptions = {
-                id: `popover-option-${index}`,
-                label: richOption.text,
-                startContent: richOption.startContent,
-                endContent: richOption.endContent,
-                description: richOption.description,
-            };
-            const defaultLabelPlacement = getOverlayLabelPlacement(theme, 'checkbox');
-            const defaultJustify = getOverlayLabelJustify(theme, 'checkbox');
-            return (h("ion-item", {
+        return options.map((option) => (h("ion-item", { class: Object.assign({
+                // TODO FW-4784
+                'item-checkbox-checked': option.checked
+            }, getClassMap(option.cssClass)) }, h("ion-checkbox", { value: option.value, disabled: option.disabled, checked: option.checked, justify: "start", labelPlacement: "end", onIonChange: (ev) => {
+                this.setChecked(ev);
+                this.callOptionHandler(ev);
                 // TODO FW-4784
-                disabled: option.disabled, class: Object.assign({
-                    // TODO FW-4784
-                    '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: (_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
-                    forceUpdate(this);
-                } }, renderOptionLabel(optionLabelOptions, 'select-option-label'))));
-        });
+                forceUpdate(this);
+            } }, option.text))));
     }
     renderRadioOptions(options) {
-        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`)
-             * that are passed through from `ion-select` but not
-             * part of the public `SelectPopoverOption` interface.
-             */
-            const richOption = option;
-            const hasRichContent = !!richOption.startContent || !!richOption.endContent || !!richOption.description;
-            const optionLabelOptions = {
-                id: `popover-option-${index}`,
-                label: richOption.text,
-                startContent: richOption.startContent,
-                endContent: richOption.endContent,
-                description: richOption.description,
-            };
-            return (h("ion-item", {
+        return (h("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, options.map((option) => (h("ion-item", { class: Object.assign({
                 // TODO FW-4784
-                disabled: option.disabled, class: Object.assign({
-                    // TODO FW-4784
-                    '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: (_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(option.disabled), onKeyDown: (ev) => {
-                    if (ev.key === 'Enter' && !ev.repeat) {
-                        this.pendingEnterTarget = ev.currentTarget;
-                    }
-                }, onKeyUp: (ev) => {
-                    if (ev.key === ' ') {
-                        // Space selects and dismisses in one press.
-                        this.dismissParentPopover(option.disabled);
-                    }
-                    else if (ev.key === 'Enter') {
-                        const shouldDismiss = this.pendingEnterTarget === ev.currentTarget;
-                        this.pendingEnterTarget = null;
-                        if (shouldDismiss) {
-                            this.dismissParentPopover(option.disabled);
-                        }
+                'item-radio-checked': option.value === checked
+            }, getClassMap(option.cssClass)) }, h("ion-radio", { value: option.value, disabled: option.disabled, onClick: () => this.dismissParentPopover(), onKeyDown: (ev) => {
+                if (ev.key === 'Enter' && !ev.repeat) {
+                    this.pendingEnterTarget = ev.currentTarget;
+                }
+            }, onKeyUp: (ev) => {
+                if (ev.key === ' ') {
+                    // Space selects and dismisses in one press.
+                    this.dismissParentPopover();
+                }
+                else if (ev.key === 'Enter') {
+                    const shouldDismiss = this.pendingEnterTarget === ev.currentTarget;
+                    this.pendingEnterTarget = null;
+                    if (shouldDismiss) {
+                        this.dismissParentPopover();
                     }
-                } }, renderOptionLabel(optionLabelOptions, 'select-option-label'))));
-        })));
+                }
+            } }, option.text))))));
     }
     render() {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '4f989c900eada56b0cd28c7efa41152b84f52c9f', class: {
-                [theme]: true,
-            } }, h("ion-list", { key: '8f779068f9cd087b534ccc8f6b8f148af10fd73c' }, header !== undefined && h("ion-list-header", { key: 'a443be7d3d0100090adf640189fca8d1c8667816' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: 'e52669268b15ca99d2d320e4900b5b9829b814f6' }, h("ion-label", { key: '0ad9e913e482ea8f0defc63ca0ec4fc601d2fd4a', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: '6405546f3165d7ebcbc932119cf05305c4f1dfec' }, subHeader), message !== undefined && h("p", { key: '1e2ad24cba2899866683c383caa517b55f75b6fc' }, message)))), this.renderOptions(options))));
+        return (h(Host, { key: '81783ad099ad52b3e035efa18e5a23be766faf7b', class: getIonMode(this) }, h("ion-list", { key: '319171787e9c2228d1d5a0133b2f5e0998644516' }, header !== undefined && h("ion-list-header", { key: '09a0fdbe2807c270b9abdb908965f72c4838030c' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: 'ede19cb8e121fd14a2335fcb81cc59b9a102eac5' }, h("ion-label", { key: '6b98c0f132bc6161299b22c0e56092f85b7b0095', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: '8053e175eb36d7b8f52df1f93cee48ee0794857e' }, subHeader), message !== undefined && h("p", { key: '508673abcda7444ed8f8c828b5418dd48ef86b8e' }, 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.ionic.scss"]
+            "md": ["select-popover.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["select-popover.ios.css"],
-            "md": ["select-popover.md.css"],
-            "ionic": ["select-popover.ionic.css"]
+            "md": ["select-popover.md.css"]
         };
     }
     static get properties() {

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

@@ -1,25 +1,3 @@
-/**
- * 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
@@ -53,6 +31,28 @@
  * @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;
+ *   }
+ * }
+ */
 :host ion-list {
   margin-left: 0;
   margin-right: 0;
@@ -78,85 +78,6 @@ ion-label {
   overflow-y: auto;
 }
 
-/**
- * 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;
-}
-
-.select-option-label-text {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-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;
-}
-
-.select-option-start,
-.select-option-end {
-  display: flex;
-  align-items: center;
-}
-
-/**
- * Cap slotted children so they can't stretch the option
- * row out of proportion, keeping rows visually uniform
- * regardless of the content. ion-icon is excluded because
- * its `contain: strict` makes intrinsic sizes resolve to 0,
- * which would collapse the icon to zero width.
- */
-.select-option-start > *:not(ion-icon),
-.select-option-end > *:not(ion-icon) {
-  max-width: fit-content;
-}
-
-.select-option-description {
-  display: block;
-}
-
-.select-option-label {
-  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;
-}
-
-/**
- * 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
@@ -212,12 +133,6 @@ ion-checkbox.select-option-has-rich-content::part(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
@@ -301,14 +216,4 @@ ion-item {
   --background-focused: var(--ion-item-color, var(--ion-text-color, #000));
   --background-hover: var(--ion-item-color, var(--ion-text-color, #000));
   --color: var(--ion-color-primary, #0054e9);
-}
-
-/**
- * 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 > *,
-.select-option-end > * {
-  max-height: 24px;
 }

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() {
         /**
@@ -31,12 +27,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: 'aa94213767105077047a369d4e4861027af96060', class: {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: '887d958d982345ce610730ab5c9ae35010430f75', class: {
+                [mode]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, h("span", { key: 'c5dab0fb89d524827936aef5345cc0c7eda9e274' }, "\u00A0")));
+            } }, h("span", { key: 'a184f4b9780a2aada0a16729109ac81436e9c9e1' }, "\u00A0")));
     }
     static get is() { return "ion-skeleton-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,31 +1,3 @@
-/**
- * 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
@@ -90,7 +62,6 @@
   width: 28px;
   height: 28px;
   color: var(--color);
-  overflow: hidden;
   user-select: none;
 }
 
@@ -127,6 +98,16 @@ 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,
@@ -248,53 +229,4 @@ 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);
 }