@ionic/core 7.5.2-dev.11697818830.1a33c881 → 7.5.2-dev.11697834896.1fed55cc

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

@@ -41,17 +41,24 @@
   font-family: var(--ion-font-family, inherit);
   font-size: inherit;
   text-overflow: ellipsis;
+  box-sizing: border-box;
+}
+
+:host-context(.item-legacy) {
   white-space: nowrap;
   overflow: hidden;
-  box-sizing: border-box;
+}
+
+:host-context(.item:not(.item-input):not(.item-legacy)) {
+  flex-grow: 1;
 }
 
 :host(.ion-color) {
   color: var(--ion-color-base);
 }
 
-:host(.ion-text-wrap) {
-  white-space: normal;
+:host(.ion-text-nowrap) {
+  overflow: hidden;
 }
 
 :host-context(.item-interactive-disabled:not(.item-multiple-inputs)) {
@@ -70,6 +77,10 @@
   align-self: baseline;
 }
 
+:host-context(.item-skeleton-text) {
+  overflow: hidden;
+}
+
 :host(.label-fixed) {
   flex: 0 0 100px;
   width: 100px;

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

@@ -41,17 +41,24 @@
   font-family: var(--ion-font-family, inherit);
   font-size: inherit;
   text-overflow: ellipsis;
+  box-sizing: border-box;
+}
+
+:host-context(.item-legacy) {
   white-space: nowrap;
   overflow: hidden;
-  box-sizing: border-box;
+}
+
+:host-context(.item:not(.item-input):not(.item-legacy)) {
+  flex-grow: 1;
 }
 
 :host(.ion-color) {
   color: var(--ion-color-base);
 }
 
-:host(.ion-text-wrap) {
-  white-space: normal;
+:host(.ion-text-nowrap) {
+  overflow: hidden;
 }
 
 :host-context(.item-interactive-disabled:not(.item-multiple-inputs)) {
@@ -70,6 +77,10 @@
   align-self: baseline;
 }
 
+:host-context(.item-skeleton-text) {
+  overflow: hidden;
+}
+
 :host(.label-fixed) {
   flex: 0 0 100px;
   width: 100px;

package/dist/collection/components/menu/menu.js

@@ -173,18 +173,6 @@ export class Menu {
     this.contentEl = undefined;
   }
   onSplitPaneChanged(ev) {
-    const { target } = ev;
-    const closestSplitPane = this.el.closest('ion-split-pane');
-    /**
-     * Menu listens on the body for "ionSplitPaneVisible".
-     * However, this means the callback will run any time
-     * a SplitPane changes visibility. As a result, we only want
-     * Menu's visibility state to update if its parent SplitPane
-     * changes visibility.
-     */
-    if (target !== closestSplitPane) {
-      return;
-    }
     this.isPaneVisible = ev.detail.isPane(this.el);
     this.updateState();
   }

package/dist/collection/components/note/test/a11y/note.e2e.js

@@ -48,5 +48,48 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       const note = page.locator('ion-note');
       await expect(note).toHaveScreenshot(screenshot(`note-item-divider-scale`));
     });
+    test('should wrap label to the next line without truncating', async ({ page }) => {
+      await page.setContent(`
+        <style>
+          html {
+            font-size: 310%;
+          }
+        </style>
+
+        <ion-list>
+          <ion-item>
+            <ion-note slot="start">Really really long note</ion-note>
+            <ion-label>Label</ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Label</ion-label>
+            <ion-note slot="end">Really really long note</ion-note>
+          </ion-item>
+
+          <ion-item>
+            <ion-note slot="start">Note</ion-note>
+            <ion-label>Really really long label</ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Really really long label</ion-label>
+            <ion-note slot="end">Note</ion-note>
+          </ion-item>
+
+          <ion-item>
+            <ion-note slot="start">Really really long note</ion-note>
+            <ion-label>Really really long label</ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Really really long label</ion-label>
+            <ion-note slot="end">Really really long note</ion-note>
+          </ion-item>
+        </ion-list>
+      `, config);
+      const list = page.locator('ion-list');
+      await expect(list).toHaveScreenshot(screenshot(`note-wrapping-label-scale`));
+    });
   });
 });

package/dist/collection/components/radio/radio.js

@@ -121,6 +121,8 @@ export class Radio {
   emitStyle() {
     const style = {
       'interactive-disabled': this.disabled,
+      // TODO(FW-3125): remove this
+      legacy: !!this.legacy,
     };
     if (this.legacyFormController.hasLegacyControl()) {
       style['radio-checked'] = this.checked;

package/dist/collection/components/range/range.js

@@ -226,6 +226,8 @@ export class Range {
       this.ionStyle.emit({
         interactive: true,
         'interactive-disabled': this.disabled,
+        // TODO(FW-2997): remove this
+        legacy: !!this.legacy,
       });
     }
   }

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

@@ -1,3 +1,36 @@
+/**
+ * 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.
+ */
 :host([slot]) {
   display: none;
   line-height: 0;
@@ -13,7 +46,7 @@
  * icons resize with Dynamic Type.
  */
 ::slotted(ion-icon) {
-  font-size: dynamic-font(16px);
+  font-size: 1rem;
 }
 
 /**

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

@@ -1,3 +1,36 @@
+/**
+ * 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.
+ */
 :host([slot]) {
   display: none;
   line-height: 0;
@@ -13,7 +46,7 @@
  * icons resize with Dynamic Type.
  */
 ::slotted(ion-icon) {
-  font-size: dynamic-font(16px);
+  font-size: 1rem;
 }
 
 /**

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

@@ -81,17 +81,6 @@
 
 :host(:not(.legacy-select)) {
   width: 100%;
-  min-height: 44px;
-}
-
-/**
- * Since the label sits on top of the element,
- * the component needs to be taller otherwise the
- * label will appear too close to the select text.
- */
-:host(.select-label-placement-floating),
-:host(.select-label-placement-stacked) {
-  min-height: 56px;
 }
 
 :host(.ion-color) {
@@ -110,6 +99,11 @@
   overflow: hidden;
 }
 
+:host(.in-item:not(.legacy-select)) {
+  flex: 1 1 0;
+  width: 0;
+}
+
 :host(.in-item.legacy-select) {
   position: static;
   max-width: 45%;
@@ -632,6 +626,20 @@ button {
   --padding-start: 16px;
 }
 
+:host(:not(.legacy-select)) {
+  min-height: 44px;
+}
+
+/**
+ * Since the label sits on top of the element,
+ * the component needs to be taller otherwise the
+ * label will appear too close to the select text.
+ */
+:host(.select-label-placement-floating),
+:host(.select-label-placement-stacked) {
+  min-height: 56px;
+}
+
 .select-icon {
   width: 1.125rem;
   height: 1.125rem;

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

@@ -465,6 +465,8 @@ export class Select {
       style['has-placeholder'] = this.placeholder !== undefined;
       style['has-value'] = this.hasValue();
       style['has-focus'] = this.isExpanded;
+      // TODO(FW-3194): remove this
+      style['legacy'] = !!this.legacy;
     }
     this.ionStyle.emit(style);
   }

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

@@ -81,17 +81,6 @@
 
 :host(:not(.legacy-select)) {
   width: 100%;
-  min-height: 44px;
-}
-
-/**
- * Since the label sits on top of the element,
- * the component needs to be taller otherwise the
- * label will appear too close to the select text.
- */
-:host(.select-label-placement-floating),
-:host(.select-label-placement-stacked) {
-  min-height: 56px;
 }
 
 :host(.ion-color) {
@@ -110,6 +99,11 @@
   overflow: hidden;
 }
 
+:host(.in-item:not(.legacy-select)) {
+  flex: 1 1 0;
+  width: 0;
+}
+
 :host(.in-item.legacy-select) {
   position: static;
   max-width: 45%;
@@ -664,7 +658,6 @@ button {
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
-  min-height: 56px;
 }
 
 /**
@@ -785,7 +778,6 @@ button {
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
-  min-height: 56px;
 }
 
 :host(.select-fill-outline.select-shape-round) {
@@ -1040,6 +1032,10 @@ button {
   --padding-start: 16px;
 }
 
+:host(:not(.legacy-select)) {
+  min-height: 56px;
+}
+
 .select-icon {
   width: 0.8125rem;
   transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);

package/dist/collection/components/select/test/legacy/wrapping/select.e2e.js

@@ -27,7 +27,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       await page.setContent(`
         <ion-item>
           <ion-label>Really long label should not wrap</ion-label>
-          <ion-select value="wrap" class="ion-text-wrap">
+          <ion-select value="wrap" legacy="true" class="ion-text-wrap">
             <ion-select-option value="wrap">Should wrap value only when label exists and really long text exists to make it wrap the text</ion-select-option>
           </ion-select>
         </ion-item>

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

@@ -9,6 +9,18 @@ export class SkeletonText {
   constructor() {
     this.animated = false;
   }
+  componentWillLoad() {
+    this.emitStyle();
+  }
+  emitStyle() {
+    // The emitted property is used by item in order
+    // to add the item-skeleton-text class which applies
+    // overflow: hidden to its label
+    const style = {
+      'skeleton-text': true,
+    };
+    this.ionStyle.emit(style);
+  }
   render() {
     const animated = this.animated && config.getBoolean('animated', true);
     const inMedia = hostContext('ion-avatar', this.el) || hostContext('ion-thumbnail', this.el);
@@ -53,5 +65,32 @@ export class SkeletonText {
       }
     };
   }
+  static get events() {
+    return [{
+        "method": "ionStyle",
+        "name": "ionStyle",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Emitted when the styles change."
+        },
+        "complexType": {
+          "original": "StyleEventDetail",
+          "resolved": "StyleEventDetail",
+          "references": {
+            "StyleEventDetail": {
+              "location": "import",
+              "path": "../../interface",
+              "id": "src/interface.d.ts::StyleEventDetail"
+            }
+          }
+        }
+      }];
+  }
   static get elementRef() { return "el"; }
 }

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

@@ -88,24 +88,6 @@
   box-sizing: border-box;
 }
 
-:host(:not(.legacy-textarea)) {
-  min-height: 44px;
-}
-
-/**
- * Since the label sits on top of the element,
- * the component needs to be taller otherwise the
- * label will appear too close to the textarea text.
- * Also, floating and stacked labels should not
- * push the label down since it it
- * sits on top of the textarea.
- */
-:host(.textarea-label-placement-floating),
-:host(.textarea-label-placement-stacked) {
-  --padding-top: 0px;
-  min-height: 56px;
-}
-
 /**
  * When the cols property is set we should
  * respect that width instead of defaulting
@@ -844,4 +826,22 @@
 :host(.legacy-textarea) .native-textarea[disabled],
 :host(.textarea-disabled) {
   opacity: 0.3;
+}
+
+:host(:not(.legacy-textarea)) {
+  min-height: 44px;
+}
+
+/**
+ * Since the label sits on top of the element,
+ * the component needs to be taller otherwise the
+ * label will appear too close to the textarea text.
+ * Also, floating and stacked labels should not
+ * push the label down since it it
+ * sits on top of the textarea.
+ */
+:host(.textarea-label-placement-floating),
+:host(.textarea-label-placement-stacked) {
+  --padding-top: 0px;
+  min-height: 56px;
 }

package/dist/collection/components/textarea/textarea.js

@@ -182,6 +182,8 @@ export class Textarea {
         'has-placeholder': this.placeholder !== undefined,
         'has-value': this.hasValue(),
         'has-focus': this.hasFocus,
+        // TODO(FW-2876): remove this
+        legacy: !!this.legacy,
       });
     }
   }

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

@@ -88,24 +88,6 @@
   box-sizing: border-box;
 }
 
-:host(:not(.legacy-textarea)) {
-  min-height: 44px;
-}
-
-/**
- * Since the label sits on top of the element,
- * the component needs to be taller otherwise the
- * label will appear too close to the textarea text.
- * Also, floating and stacked labels should not
- * push the label down since it it
- * sits on top of the textarea.
- */
-:host(.textarea-label-placement-floating),
-:host(.textarea-label-placement-stacked) {
-  --padding-top: 0px;
-  min-height: 56px;
-}
-
 /**
  * When the cols property is set we should
  * respect that width instead of defaulting
@@ -856,7 +838,6 @@
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
-  min-height: 56px;
 }
 
 /**
@@ -975,7 +956,6 @@
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
-  min-height: 56px;
 }
 
 :host(.textarea-fill-outline.textarea-shape-round) {
@@ -1268,6 +1248,20 @@
   letter-spacing: 0.0333333333em;
 }
 
+:host(:not(.legacy-textarea)) {
+  min-height: 56px;
+}
+
+/**
+ * Floating and stacked labels should not
+ * push the label down since it it
+ * sits on top of the textarea.
+ */
+:host(.textarea-label-placement-floating),
+:host(.textarea-label-placement-stacked) {
+  --padding-top: 0px;
+}
+
 /**
  * When the textarea is focused the label should
  * take on the highlight color. This should

package/dist/collection/components/toggle/toggle.js

@@ -123,6 +123,8 @@ export class Toggle {
     if (this.legacyFormController.hasLegacyControl()) {
       this.ionStyle.emit({
         'interactive-disabled': this.disabled,
+        // TODO(FW-2990): remove this
+        legacy: !!this.legacy,
       });
     }
   }

package/dist/collection/utils/animation/animation.js

@@ -449,6 +449,16 @@ export const createAnimation = (animationId) => {
         }
       }
     });
+    /**
+     * Clean up any value coercion before
+     * the user callbacks fire otherwise
+     * they may get stale values. For example,
+     * if someone calls progressStart(0) the
+     * animation may still be reversed.
+     */
+    forceDurationValue = undefined;
+    forceDirectionValue = undefined;
+    forceDelayValue = undefined;
     onFinishCallbacks.forEach((onFinishCallback) => {
       return onFinishCallback.c(currentStep, ani);
     });
@@ -652,17 +662,8 @@ export const createAnimation = (animationId) => {
         update(false, false);
       }
     }
-    if (playTo !== undefined) {
-      onFinish(() => {
-        forceDurationValue = undefined;
-        forceDirectionValue = undefined;
-        forceDelayValue = undefined;
-      }, {
-        oneTimeCallback: true,
-      });
-      if (!parentAnimation) {
-        play();
-      }
+    if (playTo !== undefined && !parentAnimation) {
+      play();
     }
     return ani;
   };

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-10-20T16:22:43",
+  "timestamp": "2023-10-20T20:50:38",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.5.0",

package/dist/esm/{animation-92066c62.js → animation-a9cdd18b.js}

@@ -572,6 +572,16 @@ const createAnimation = (animationId) => {
         }
       }
     });
+    /**
+     * Clean up any value coercion before
+     * the user callbacks fire otherwise
+     * they may get stale values. For example,
+     * if someone calls progressStart(0) the
+     * animation may still be reversed.
+     */
+    forceDurationValue = undefined;
+    forceDirectionValue = undefined;
+    forceDelayValue = undefined;
     onFinishCallbacks.forEach((onFinishCallback) => {
       return onFinishCallback.c(currentStep, ani);
     });
@@ -775,17 +785,8 @@ const createAnimation = (animationId) => {
         update(false, false);
       }
     }
-    if (playTo !== undefined) {
-      onFinish(() => {
-        forceDurationValue = undefined;
-        forceDirectionValue = undefined;
-        forceDelayValue = undefined;
-      }, {
-        oneTimeCallback: true,
-      });
-      if (!parentAnimation) {
-        play();
-      }
+    if (playTo !== undefined && !parentAnimation) {
+      play();
     }
     return ani;
   };

package/dist/esm/{index-a09eac70.js → index-533d569d.js}

@@ -10,8 +10,8 @@ const LIFECYCLE_WILL_LEAVE = 'ionViewWillLeave';
 const LIFECYCLE_DID_LEAVE = 'ionViewDidLeave';
 const LIFECYCLE_WILL_UNLOAD = 'ionViewWillUnload';
 
-const iosTransitionAnimation = () => import('./ios.transition-4d1322d6.js');
-const mdTransitionAnimation = () => import('./md.transition-66b425d0.js');
+const iosTransitionAnimation = () => import('./ios.transition-b3053722.js');
+const mdTransitionAnimation = () => import('./md.transition-bdf2eec2.js');
 // TODO(FW-2832): types
 const transition = (opts) => {
   return new Promise((resolve, reject) => {

package/dist/esm/{index-df55802d.js → index-5c647d55.js}

@@ -5,7 +5,7 @@ import { p as printIonWarning } from './index-595d62c9.js';
 import { MENU_BACK_BUTTON_PRIORITY } from './hardware-back-button-39299f84.js';
 import { c as componentOnReady } from './helpers-3379ba19.js';
 import { b as getIonMode } from './ionic-global-246ca78f.js';
-import { c as createAnimation } from './animation-92066c62.js';
+import { c as createAnimation } from './animation-a9cdd18b.js';
 
 /**
  * baseAnimation