voyager-ionic-core 7.5.1 → 7.5.5

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

@@ -88,6 +88,24 @@
   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
@@ -643,7 +661,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.textarea-label-placement-stacked) .label-text-wrapper:dir(rtl), :host(.textarea-label-placement-floating) .label-text-wrapper:dir(rtl) {
+  :host(.textarea-label-placement-stacked:dir(rtl)) .label-text-wrapper, :host(.textarea-label-placement-floating:dir(rtl)) .label-text-wrapper {
     transform-origin: right top;
   }
 }
@@ -826,22 +844,4 @@
 :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,6 +88,24 @@
   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
@@ -643,7 +661,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.textarea-label-placement-stacked) .label-text-wrapper:dir(rtl), :host(.textarea-label-placement-floating) .label-text-wrapper:dir(rtl) {
+  :host(.textarea-label-placement-stacked:dir(rtl)) .label-text-wrapper, :host(.textarea-label-placement-floating:dir(rtl)) .label-text-wrapper {
     transform-origin: right top;
   }
 }
@@ -838,6 +856,7 @@
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
+  min-height: 56px;
 }
 
 /**
@@ -900,7 +919,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.textarea-fill-solid) .textarea-wrapper:dir(rtl) {
+  :host(.textarea-fill-solid:dir(rtl)) .textarea-wrapper {
     border-top-left-radius: var(--border-radius);
     border-top-right-radius: var(--border-radius);
     border-bottom-right-radius: 0px;
@@ -956,6 +975,7 @@
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
+  min-height: 56px;
 }
 
 :host(.textarea-fill-outline.textarea-shape-round) {
@@ -1024,7 +1044,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.textarea-fill-outline.textarea-label-placement-stacked) .label-text-wrapper:dir(rtl), :host(.textarea-fill-outline.textarea-label-placement-floating) .label-text-wrapper:dir(rtl) {
+  :host(.textarea-fill-outline.textarea-label-placement-stacked:dir(rtl)) .label-text-wrapper, :host(.textarea-fill-outline.textarea-label-placement-floating:dir(rtl)) .label-text-wrapper {
     transform-origin: right top;
   }
 }
@@ -1167,7 +1187,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.textarea-fill-outline) .textarea-outline-start:dir(rtl) {
+  :host(.textarea-fill-outline:dir(rtl)) .textarea-outline-start {
     border-top-left-radius: 0px;
     border-top-right-radius: var(--border-radius);
     border-bottom-right-radius: var(--border-radius);
@@ -1196,7 +1216,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.textarea-fill-outline) .textarea-outline-end:dir(rtl) {
+  :host(.textarea-fill-outline:dir(rtl)) .textarea-outline-end {
     border-top-left-radius: var(--border-radius);
     border-top-right-radius: 0px;
     border-bottom-right-radius: 0px;
@@ -1248,20 +1268,6 @@
   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
@@ -1348,7 +1354,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host(.in-item) .textarea-highlight:dir(rtl) {
+    :host(.in-item:dir(rtl)) .textarea-highlight {
       left: unset;
       right: unset;
       right: 0;

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

@@ -93,7 +93,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host:dir(rtl) {
+    :host(:dir(rtl)) {
       left: unset;
       right: unset;
       right: 0;
@@ -155,7 +155,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.title-large) .toolbar-title:dir(rtl) {
+  :host(.title-large:dir(rtl)) .toolbar-title {
     transform-origin: calc(100% - inherit);
   }
 }

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

@@ -95,7 +95,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host:dir(rtl) {
+    :host(:dir(rtl)) {
       left: unset;
       right: unset;
       right: 0;

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

@@ -95,7 +95,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host:dir(rtl) {
+    :host(:dir(rtl)) {
       left: unset;
       right: unset;
       right: 0;

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

@@ -122,7 +122,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host(.legacy-toggle) label:dir(rtl) {
+    :host(.legacy-toggle:dir(rtl)) label {
       left: unset;
       right: unset;
       right: 0;
@@ -316,7 +316,7 @@ input {
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper:dir(rtl) {
+  :host(.toggle-label-placement-stacked.toggle-alignment-start:dir(rtl)) .label-text-wrapper {
     transform-origin: right top;
   }
 }
@@ -329,7 +329,7 @@ input {
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper:dir(rtl) {
+  :host(.toggle-label-placement-stacked.toggle-alignment-center:dir(rtl)) .label-text-wrapper {
     transform-origin: calc(100% - center) top;
   }
 }

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

@@ -122,7 +122,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host(.legacy-toggle) label:dir(rtl) {
+    :host(.legacy-toggle:dir(rtl)) label {
       left: unset;
       right: unset;
       right: 0;
@@ -316,7 +316,7 @@ input {
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper:dir(rtl) {
+  :host(.toggle-label-placement-stacked.toggle-alignment-start:dir(rtl)) .label-text-wrapper {
     transform-origin: right top;
   }
 }
@@ -329,7 +329,7 @@ input {
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper:dir(rtl) {
+  :host(.toggle-label-placement-stacked.toggle-alignment-center:dir(rtl)) .label-text-wrapper {
     transform-origin: calc(100% - center) top;
   }
 }

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/forms/form-controller.js

@@ -39,10 +39,6 @@ export const createLegacyFormController = (el) => {
   return { hasLegacyControl };
 };
 const hasLabelSlot = (controlEl) => {
-  const root = controlEl.shadowRoot;
-  if (root === null) {
-    return false;
-  }
   /**
    * Components that have a named label slot
    * also have other slots, so we need to query for
@@ -61,5 +57,5 @@ const hasLabelSlot = (controlEl) => {
   }
   return false;
 };
-const NAMED_LABEL_SLOT_COMPONENTS = ['ION-RANGE'];
+const NAMED_LABEL_SLOT_COMPONENTS = ['ION-INPUT', 'ION-TEXTAREA', 'ION-SELECT', 'ION-RANGE'];
 const UNNAMED_LABEL_SLOT_COMPONENTS = ['ION-TOGGLE', 'ION-CHECKBOX', 'ION-RADIO'];

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-19T00:28:11",
+  "timestamp": "2023-11-16T23:52:44",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.5.0",
+    "version": "4.7.2",
     "typescriptVersion": "5.2.2"
   },
   "components": [
@@ -7477,7 +7477,7 @@
           "mutable": false,
           "attr": "readonly",
           "reflectToAttr": false,
-          "docs": "If `true`, the datetime appears normal but is not interactive.",
+          "docs": "If `true`, the datetime appears normal but the selected date cannot be changed.",
           "docsTags": [],
           "default": "false",
           "values": [

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/{app-globals-ec816a70.js → app-globals-2398e405.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { i as initialize } from './ionic-global-246ca78f.js';
+import { i as initialize } from './ionic-global-40e42e7f.js';
 
 const globalScripts = initialize;
 

package/dist/esm/{button-active-d926d4f4.js → button-active-ce5cba4c.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { w as writeTask } from './index-b49b173c.js';
+import { w as writeTask } from './index-7c9b1bca.js';
 import { h as hapticSelectionEnd, a as hapticSelectionStart, b as hapticSelectionChanged } from './haptic-1243b917.js';
 import { createGesture } from './index-ff313b19.js';
 

package/dist/esm/{form-controller-ed77647a.js → form-controller-64edeaad.js}

@@ -40,10 +40,6 @@ const createLegacyFormController = (el) => {
   return { hasLegacyControl };
 };
 const hasLabelSlot = (controlEl) => {
-  const root = controlEl.shadowRoot;
-  if (root === null) {
-    return false;
-  }
   /**
    * Components that have a named label slot
    * also have other slots, so we need to query for
@@ -62,7 +58,7 @@ const hasLabelSlot = (controlEl) => {
   }
   return false;
 };
-const NAMED_LABEL_SLOT_COMPONENTS = ['ION-RANGE'];
+const NAMED_LABEL_SLOT_COMPONENTS = ['ION-INPUT', 'ION-TEXTAREA', 'ION-SELECT', 'ION-RANGE'];
 const UNNAMED_LABEL_SLOT_COMPONENTS = ['ION-TOGGLE', 'ION-CHECKBOX', 'ION-RADIO'];
 
 export { createLegacyFormController as c };

package/dist/esm/{index-df55802d.js → index-0aa6e61f.js}

@@ -4,8 +4,8 @@
 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 { b as getIonMode } from './ionic-global-40e42e7f.js';
+import { c as createAnimation } from './animation-8aa13916.js';
 
 /**
  * baseAnimation

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;

package/dist/esm/{index-a09eac70.js → index-6a0ccabb.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { w as writeTask, B as Build } from './index-b49b173c.js';
+import { w as writeTask, B as Build } from './index-7c9b1bca.js';
 import { r as raf } from './helpers-3379ba19.js';
 
 const LIFECYCLE_WILL_ENTER = 'ionViewWillEnter';
@@ -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-1651c430.js');
+const mdTransitionAnimation = () => import('./md.transition-66f18369.js');
 // TODO(FW-2832): types
 const transition = (opts) => {
   return new Promise((resolve, reject) => {