@ionic/core 7.5.2-dev.11697818830.1a33c881 → 7.5.2-dev.11698187124.1b7ea660

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

@@ -122,12 +122,25 @@
   overscroll-behavior-y: contain;
 }
 
-.alert-checkbox-group::-webkit-scrollbar,
-.alert-radio-group::-webkit-scrollbar,
-.alert-message::-webkit-scrollbar {
-  display: none;
+/**
+  * Scrollbars on mobile devices will be hidden.
+  * Users can still scroll the content by swiping.
+  * If a user has a fine pointing device, such as a
+  * mouse or trackpad, then scrollbars will be
+  * visible. This allows users to scroll the
+  * content with their pointing device.
+  * Otherwise, the user would have to use the
+  * keyboard to navigate through the options.
+  * This may not be intuitive for users who
+  * are not familiar with keyboard navigation.
+  */
+@media (any-pointer: coarse) {
+  .alert-checkbox-group::-webkit-scrollbar,
+  .alert-radio-group::-webkit-scrollbar,
+  .alert-message::-webkit-scrollbar {
+    display: none;
+  }
 }
-
 .alert-input {
   padding-left: 0;
   padding-right: 0;

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

@@ -122,12 +122,25 @@
   overscroll-behavior-y: contain;
 }
 
-.alert-checkbox-group::-webkit-scrollbar,
-.alert-radio-group::-webkit-scrollbar,
-.alert-message::-webkit-scrollbar {
-  display: none;
+/**
+  * Scrollbars on mobile devices will be hidden.
+  * Users can still scroll the content by swiping.
+  * If a user has a fine pointing device, such as a
+  * mouse or trackpad, then scrollbars will be
+  * visible. This allows users to scroll the
+  * content with their pointing device.
+  * Otherwise, the user would have to use the
+  * keyboard to navigate through the options.
+  * This may not be intuitive for users who
+  * are not familiar with keyboard navigation.
+  */
+@media (any-pointer: coarse) {
+  .alert-checkbox-group::-webkit-scrollbar,
+  .alert-radio-group::-webkit-scrollbar,
+  .alert-message::-webkit-scrollbar {
+    display: none;
+  }
 }
-
 .alert-input {
   padding-left: 0;
   padding-right: 0;

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

@@ -121,20 +121,6 @@
   --highlight-color-focused: var(--ion-color-base);
 }
 
-:host(:not(.legacy-input)) {
-  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 input text.
- */
-:host(.input-label-placement-floating),
-:host(.input-label-placement-stacked) {
-  min-height: 56px;
-}
-
 .native-input {
   padding-left: 0;
   padding-right: 0;
@@ -734,6 +720,20 @@
   height: 18px;
 }
 
+:host(:not(.legacy-input)) {
+  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 input text.
+ */
+:host(.input-label-placement-floating),
+:host(.input-label-placement-stacked) {
+  min-height: 56px;
+}
+
 :host(.legacy-input) .native-input[disabled],
 :host(.input-disabled) {
   opacity: 0.3;

package/dist/collection/components/input/input.js

@@ -3,7 +3,7 @@
  */
 import { Build, Host, forceUpdate, h } from "@stencil/core";
 import { createLegacyFormController, createNotchController } from "../../utils/forms/index";
-import { inheritAriaAttributes, debounceEvent, findItemLabel, inheritAttributes } from "../../utils/helpers";
+import { inheritAriaAttributes, debounceEvent, findItemLabel, inheritAttributes, componentOnReady, } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
 import { createSlotMutationController } from "../../utils/slot-mutation-controller";
 import { createColorClasses, hostContext } from "../../utils/theme";
@@ -207,7 +207,14 @@ export class Input {
   /**
    * Returns the native `<input>` element used under the hood.
    */
-  getInputElement() {
+  async getInputElement() {
+    /**
+     * If this gets called in certain early lifecycle hooks (ex: Vue onMounted),
+     * nativeInput won't be defined yet with the custom elements build, so wait for it to load in.
+     */
+    if (!this.nativeInput) {
+      await new Promise((resolve) => componentOnReady(this.el, resolve));
+    }
     return Promise.resolve(this.nativeInput);
   }
   /**

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

@@ -121,20 +121,6 @@
   --highlight-color-focused: var(--ion-color-base);
 }
 
-:host(:not(.legacy-input)) {
-  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 input text.
- */
-:host(.input-label-placement-floating),
-:host(.input-label-placement-stacked) {
-  min-height: 56px;
-}
-
 .native-input {
   padding-left: 0;
   padding-right: 0;
@@ -748,7 +734,6 @@
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
-  min-height: 56px;
 }
 
 /**
@@ -867,7 +852,6 @@
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
-  min-height: 56px;
 }
 
 :host(.input-fill-outline.input-shape-round) {
@@ -1198,6 +1182,10 @@
   letter-spacing: 0.0333333333em;
 }
 
+:host(:not(.legacy-input)) {
+  min-height: 56px;
+}
+
 /**
  * When the input is focused the label should
  * take on the highlight color. This should

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

@@ -343,11 +343,11 @@ export class Menu {
       this.animation = undefined;
     }
     // Create new animation
-    this.animation = await menuController._createAnimation(this.type, this);
+    const animation = (this.animation = await menuController._createAnimation(this.type, this));
     if (!config.getBoolean('animated', true)) {
-      this.animation.duration(0);
+      animation.duration(0);
     }
-    this.animation.fill('both');
+    animation.fill('both');
   }
   async startAnimation(shouldOpen, animated) {
     const isReversed = !shouldOpen;

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

@@ -85,7 +85,6 @@ export class Radio {
   }
   /** @internal */
   async setFocus(ev) {
-    // TODO(FW-2832): type (using Event triggers a build error due to conflict with Stencil Event import)
     ev.stopPropagation();
     ev.preventDefault();
     this.el.focus();
@@ -416,7 +415,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
     return {
       "setFocus": {
         "complexType": {
-          "signature": "(ev: any) => Promise<void>",
+          "signature": "(ev: globalThis.Event) => Promise<void>",
           "parameters": [{
               "tags": [],
               "text": ""
@@ -425,6 +424,10 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
             "Promise": {
               "location": "global",
               "id": "global::Promise"
+            },
+            "globalThis": {
+              "location": "global",
+              "id": "global::globalThis"
             }
           },
           "return": "Promise<void>"

package/dist/collection/components/radio/test/legacy/a11y/radio.e2e.js

@@ -8,9 +8,11 @@ import { configs, test } from "../../../../../utils/test/playwright/index";
  */
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('radio: a11y'), () => {
-    // TODO(FW-5218)
-    test.fixme('tabbing should switch between radio groups', async ({ page, pageUtils }) => {
+    test.beforeEach(async ({ page, skip }) => {
+      skip.browser('webkit', 'Tabbing is flaky in Safari');
       await page.goto(`/src/components/radio/test/legacy/a11y`, config);
+    });
+    test('tabbing should switch between radio groups', async ({ page, pageUtils }) => {
       const firstGroupRadios = page.locator('#first-group ion-radio');
       const secondGroupRadios = page.locator('#second-group ion-radio');
       await pageUtils.pressKeys('Tab');
@@ -20,9 +22,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await pageUtils.pressKeys('shift+Tab');
       await expect(firstGroupRadios.nth(0)).toBeFocused();
     });
-    // TODO(FW-5218)
-    test.fixme('using arrow keys should move between enabled radios within group', async ({ page, pageUtils }) => {
-      await page.goto(`/src/components/radio/test/legacy/a11y`, config);
+    test('using arrow keys should move between enabled radios within group', async ({ page, pageUtils }) => {
       const firstGroupRadios = page.locator('#first-group ion-radio');
       await pageUtils.pressKeys('Tab');
       await expect(firstGroupRadios.nth(0)).toBeFocused();

package/dist/collection/components/refresher/refresher.utils.js

@@ -16,7 +16,6 @@ export const createPullingAnimation = (type, pullingSpinner, refresherEl) => {
     : createTranslateAnimation(pullingSpinner, refresherEl);
 };
 const createBaseAnimation = (pullingRefresherIcon) => {
-  // TODO(FW-2832): add types/re-evaluate asserting so many things
   const spinner = pullingRefresherIcon.querySelector('ion-spinner');
   const circle = spinner.shadowRoot.querySelector('circle');
   const spinnerArrowContainer = pullingRefresherIcon.querySelector('.spinner-arrow-container');
@@ -173,6 +172,14 @@ export const shouldUseNativeRefresher = async (referenceEl, mode) => {
   const refreshingSpinner = referenceEl.querySelector('ion-refresher-content .refresher-refreshing ion-spinner');
   return (pullingSpinner !== null &&
     refreshingSpinner !== null &&
+    /**
+     * We use webkitOverflowScrolling for feature detection with rubber band scrolling
+     * on iOS. When doing referenceEl.style, webkitOverflowScrolling is undefined on non-iOS platforms.
+     * However, it will be the empty string on iOS.
+     * Note that we do not use getPropertyValue (and thus need to cast as any) because calling
+     * getPropertyValue('-webkit-overflow-scrolling') will return the empty string if it is not
+     * set on the element, even if the platform does not support that.
+     */
     ((mode === 'ios' && isPlatform('mobile') && referenceEl.style.webkitOverflowScrolling !== undefined) ||
       mode === 'md'));
 };

package/dist/collection/components/searchbar/searchbar.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, forceUpdate, h } from "@stencil/core";
-import { debounceEvent, raf } from "../../utils/helpers";
+import { debounceEvent, raf, componentOnReady } from "../../utils/helpers";
 import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses } from "../../utils/theme";
 import { arrowBackSharp, closeCircle, closeSharp, searchOutline, searchSharp } from "ionicons/icons";
@@ -189,7 +189,14 @@ export class Searchbar {
   /**
    * Returns the native `<input>` element used under the hood.
    */
-  getInputElement() {
+  async getInputElement() {
+    /**
+     * If this gets called in certain early lifecycle hooks (ex: Vue onMounted),
+     * nativeInput won't be defined yet with the custom elements build, so wait for it to load in.
+     */
+    if (!this.nativeInput) {
+      await new Promise((resolve) => componentOnReady(this.el, resolve));
+    }
     return Promise.resolve(this.nativeInput);
   }
   /**

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) {
@@ -632,6 +621,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.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) {
@@ -664,7 +653,6 @@ button {
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
-  min-height: 56px;
 }
 
 /**
@@ -785,7 +773,6 @@ button {
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
-  min-height: 56px;
 }
 
 :host(.select-fill-outline.select-shape-round) {
@@ -1040,6 +1027,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/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

@@ -3,7 +3,7 @@
  */
 import { Build, Host, forceUpdate, h, writeTask, } from "@stencil/core";
 import { createLegacyFormController, createNotchController } from "../../utils/forms/index";
-import { inheritAriaAttributes, debounceEvent, findItemLabel, inheritAttributes } from "../../utils/helpers";
+import { inheritAriaAttributes, debounceEvent, findItemLabel, inheritAttributes, componentOnReady, } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
 import { createSlotMutationController } from "../../utils/slot-mutation-controller";
 import { createColorClasses, hostContext } from "../../utils/theme";
@@ -169,7 +169,14 @@ export class Textarea {
   /**
    * Returns the native `<textarea>` element used under the hood.
    */
-  getInputElement() {
+  async getInputElement() {
+    /**
+     * If this gets called in certain early lifecycle hooks (ex: Vue onMounted),
+     * nativeInput won't be defined yet with the custom elements build, so wait for it to load in.
+     */
+    if (!this.nativeInput) {
+      await new Promise((resolve) => componentOnReady(this.el, resolve));
+    }
     return Promise.resolve(this.nativeInput);
   }
   emitStyle() {

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/utils/animation/animation.js

@@ -387,11 +387,25 @@ export const createAnimation = (animationId) => {
   const updateKeyframes = (keyframeValues) => {
     if (supportsWebAnimations) {
       getWebAnimations().forEach((animation) => {
-        if (animation.effect.setKeyframes) {
-          animation.effect.setKeyframes(keyframeValues);
+        /**
+         * animation.effect's type is AnimationEffect.
+         * However, in this case we have a more specific
+         * type of AnimationEffect called KeyframeEffect which
+         * inherits from AnimationEffect. As a result,
+         * we cast animation.effect to KeyframeEffect.
+         */
+        const keyframeEffect = animation.effect;
+        /**
+         * setKeyframes is not supported in all browser
+         * versions that Ionic supports, so we need to
+         * check for support before using it.
+         */
+        // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+        if (keyframeEffect.setKeyframes) {
+          keyframeEffect.setKeyframes(keyframeValues);
         }
         else {
-          const newEffect = new KeyframeEffect(animation.effect.target, keyframeValues, animation.effect.getTiming());
+          const newEffect = new KeyframeEffect(keyframeEffect.target, keyframeValues, keyframeEffect.getTiming());
           animation.effect = newEffect;
         }
       });
@@ -536,6 +550,7 @@ export const createAnimation = (animationId) => {
     step = Math.min(Math.max(step, 0), 0.9999);
     if (supportsWebAnimations) {
       webAnimations.forEach((animation) => {
+        // When creating the animation the delay is guaranteed to be set to a number.
         animation.currentTime = animation.effect.getComputedTiming().delay + getDuration() * step;
         animation.pause();
       });

package/dist/collection/utils/content/index.js

@@ -58,7 +58,6 @@ export const findClosestIonContent = (el) => {
  * Scrolls to the top of the element. If an `ion-content` is found, it will scroll
  * using the public API `scrollToTop` with a duration.
  */
-// TODO(FW-2832): type
 export const scrollToTop = (el, durationMs) => {
   if (isIonContent(el)) {
     const content = el;

package/dist/collection/utils/input-shims/hacks/common.js

@@ -13,8 +13,16 @@ export const relocateInput = (componentEl, inputEl, shouldRelocate, inputRelativ
     removeClone(componentEl, inputEl);
   }
 };
-// TODO(FW-2832): type
 export const isFocused = (input) => {
+  /**
+   * https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode
+   * Calling getRootNode on an element in standard web page will return HTMLDocument.
+   * Calling getRootNode on an element inside of the Shadow DOM will return the associated ShadowRoot.
+   * Calling getRootNode on an element that is not attached to a document/shadow tree will return
+   * the root of the DOM tree it belongs to.
+   * isFocused is used for the hide-caret utility which only considers input/textarea elements
+   * that are present in the DOM, so we don't set types for that final case since it does not apply.
+   */
   return input === input.getRootNode().activeElement;
 };
 const addClone = (componentEl, inputEl, inputRelativeY, disabledClonedInput = false) => {

package/dist/collection/utils/watch-options.js

@@ -1,7 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-// TODO(FW-2832): types
 export const watchForOptions = (containerEl, tagName, onChange) => {
   if (typeof MutationObserver === 'undefined') {
     return;
@@ -25,10 +24,22 @@ const getSelectedOption = (mutationList, tagName) => {
   });
   return newOption;
 };
-export const findCheckedOption = (el, tagName) => {
-  if (el.nodeType !== 1) {
+/**
+ * The "value" key is only set on some components such as ion-select-option.
+ * As a result, we create a default union type of HTMLElement and the "value" key.
+ * However, implementers are required to provide the appropriate component type
+ * such as HTMLIonSelectOptionElement.
+ */
+export const findCheckedOption = (node, tagName) => {
+  /**
+   * https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType
+   * The above check ensures "node" is an Element (nodeType 1).
+   */
+  if (node.nodeType !== 1) {
     return undefined;
   }
+  // HTMLElement inherits from Element, so we cast "el" as T.
+  const el = node;
   const options = el.tagName === tagName.toUpperCase() ? [el] : Array.from(el.querySelectorAll(tagName));
   return options.find((o) => o.value === el.value);
 };

package/dist/docs.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2023-10-20T16:22:43",
+  "timestamp": "2023-10-24T22:41:46",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.5.0",
+    "version": "4.6.0",
     "typescriptVersion": "5.2.2"
   },
   "components": [

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

@@ -510,11 +510,25 @@ const createAnimation = (animationId) => {
   const updateKeyframes = (keyframeValues) => {
     if (supportsWebAnimations) {
       getWebAnimations().forEach((animation) => {
-        if (animation.effect.setKeyframes) {
-          animation.effect.setKeyframes(keyframeValues);
+        /**
+         * animation.effect's type is AnimationEffect.
+         * However, in this case we have a more specific
+         * type of AnimationEffect called KeyframeEffect which
+         * inherits from AnimationEffect. As a result,
+         * we cast animation.effect to KeyframeEffect.
+         */
+        const keyframeEffect = animation.effect;
+        /**
+         * setKeyframes is not supported in all browser
+         * versions that Ionic supports, so we need to
+         * check for support before using it.
+         */
+        // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+        if (keyframeEffect.setKeyframes) {
+          keyframeEffect.setKeyframes(keyframeValues);
         }
         else {
-          const newEffect = new KeyframeEffect(animation.effect.target, keyframeValues, animation.effect.getTiming());
+          const newEffect = new KeyframeEffect(keyframeEffect.target, keyframeValues, keyframeEffect.getTiming());
           animation.effect = newEffect;
         }
       });
@@ -659,6 +673,7 @@ const createAnimation = (animationId) => {
     step = Math.min(Math.max(step, 0), 0.9999);
     if (supportsWebAnimations) {
       webAnimations.forEach((animation) => {
+        // When creating the animation the delay is guaranteed to be set to a number.
         animation.currentTime = animation.effect.getComputedTiming().delay + getDuration() * step;
         animation.pause();
       });

package/dist/esm/{index-746a238e.js → index-4392efa5.js}

@@ -59,7 +59,6 @@ const findClosestIonContent = (el) => {
  * Scrolls to the top of the element. If an `ion-content` is found, it will scroll
  * using the public API `scrollToTop` with a duration.
  */
-// TODO(FW-2832): type
 const scrollToTop = (el, durationMs) => {
   if (isIonContent(el)) {
     const content = el;