@pod-os/elements 0.6.1-bea440b.0 → 0.7.1-2196a40.0

package/dist/esm/{helpers-44e3bd9f.js → helpers-aeff219b.js}

@@ -1,3 +1,49 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+const transitionEndAsync = (el, expectedDuration = 0) => {
+  return new Promise((resolve) => {
+    transitionEnd(el, expectedDuration, resolve);
+  });
+};
+/**
+ * Allows developer to wait for a transition
+ * to finish and fallback to a timer if the
+ * transition is cancelled or otherwise
+ * never finishes. Also see transitionEndAsync
+ * which is an await-able version of this.
+ */
+const transitionEnd = (el, expectedDuration = 0, callback) => {
+  let unRegTrans;
+  let animationTimeout;
+  const opts = { passive: true };
+  const ANIMATION_FALLBACK_TIMEOUT = 500;
+  const unregister = () => {
+    if (unRegTrans) {
+      unRegTrans();
+    }
+  };
+  const onTransitionEnd = (ev) => {
+    if (ev === undefined || el === ev.target) {
+      unregister();
+      callback(ev);
+    }
+  };
+  if (el) {
+    el.addEventListener('webkitTransitionEnd', onTransitionEnd, opts);
+    el.addEventListener('transitionend', onTransitionEnd, opts);
+    animationTimeout = setTimeout(onTransitionEnd, expectedDuration + ANIMATION_FALLBACK_TIMEOUT);
+    unRegTrans = () => {
+      if (animationTimeout) {
+        clearTimeout(animationTimeout);
+        animationTimeout = undefined;
+      }
+      el.removeEventListener('webkitTransitionEnd', onTransitionEnd, opts);
+      el.removeEventListener('transitionend', onTransitionEnd, opts);
+    };
+  }
+  return unregister;
+};
 /**
  * Waits for a component to be ready for
  * both custom element and non-custom element builds.
@@ -12,6 +58,7 @@
  */
 const componentOnReady = (el, callback) => {
   if (el.componentOnReady) {
+    // eslint-disable-next-line custom-rules/no-component-on-ready-method
     el.componentOnReady().then((resolvedEl) => callback(resolvedEl));
   }
   else {
@@ -30,7 +77,7 @@ const componentOnReady = (el, callback) => {
  */
 const inheritAttributes = (el, attributes = []) => {
   const attributeObject = {};
-  attributes.forEach(attr => {
+  attributes.forEach((attr) => {
     if (el.hasAttribute(attr)) {
       const value = el.getAttribute(attr);
       if (value !== null) {
@@ -103,14 +150,21 @@ const ariaAttributes = [
  * Returns an array of aria attributes that should be copied from
  * the shadow host element to a target within the light DOM.
  * @param el The element that the attributes should be copied from.
+ * @param ignoreList The list of aria-attributes to ignore reflecting and removing from the host.
+ * Use this in instances where we manually specify aria attributes on the `<Host>` element.
  */
-const inheritAriaAttributes = (el) => {
-  return inheritAttributes(el, ariaAttributes);
+const inheritAriaAttributes = (el, ignoreList) => {
+  let attributesToInherit = ariaAttributes;
+  if (ignoreList && ignoreList.length > 0) {
+    attributesToInherit = attributesToInherit.filter((attr) => !ignoreList.includes(attr));
+  }
+  return inheritAttributes(el, attributesToInherit);
 };
 const addEventListener = (el, eventName, callback, opts) => {
+  var _a;
   if (typeof window !== 'undefined') {
     const win = window;
-    const config = win && win.Ionic && win.Ionic.config;
+    const config = (_a = win === null || win === void 0 ? void 0 : win.Ionic) === null || _a === void 0 ? void 0 : _a.config;
     if (config) {
       const ael = config.get('_ael');
       if (ael) {
@@ -124,9 +178,10 @@ const addEventListener = (el, eventName, callback, opts) => {
   return el.addEventListener(eventName, callback, opts);
 };
 const removeEventListener = (el, eventName, callback, opts) => {
+  var _a;
   if (typeof window !== 'undefined') {
     const win = window;
-    const config = win && win.Ionic && win.Ionic.config;
+    const config = (_a = win === null || win === void 0 ? void 0 : win.Ionic) === null || _a === void 0 ? void 0 : _a.config;
     if (config) {
       const rel = config.get('_rel');
       if (rel) {
@@ -174,6 +229,23 @@ const findItemLabel = (componentEl) => {
   }
   return null;
 };
+const focusElement = (el) => {
+  el.focus();
+  /**
+   * When programmatically focusing an element,
+   * the focus-visible utility will not run because
+   * it is expecting a keyboard event to have triggered this;
+   * however, there are times when we need to manually control
+   * this behavior so we call the `setFocus` method on ion-app
+   * which will let us explicitly set the elements to focus.
+   */
+  if (el.classList.contains('ion-focusable')) {
+    const app = el.closest('ion-app');
+    if (app) {
+      app.setFocus([el]);
+    }
+  }
+};
 /**
  * This method is used for Ionic's input components that use Shadow DOM. In
  * order to properly label the inputs to work with screen readers, we need
@@ -195,12 +267,8 @@ const getAriaLabel = (componentEl, inputId) => {
   // Grab the id off of the component in case they are using
   // a custom label using the label element
   const componentId = componentEl.id;
-  let labelId = labelledBy !== null && labelledBy.trim() !== ''
-    ? labelledBy
-    : inputId + '-lbl';
-  let label = labelledBy !== null && labelledBy.trim() !== ''
-    ? document.getElementById(labelledBy)
-    : findItemLabel(componentEl);
+  let labelId = labelledBy !== null && labelledBy.trim() !== '' ? labelledBy : inputId + '-lbl';
+  let label = labelledBy !== null && labelledBy.trim() !== '' ? document.getElementById(labelledBy) : findItemLabel(componentEl);
   if (label) {
     if (labelledBy === null) {
       label.id = labelId;
@@ -257,7 +325,7 @@ const assert = (actual, reason) => {
   if (!actual) {
     const message = 'ASSERT: ' + reason;
     console.error(message);
-    debugger; // tslint:disable-line
+    debugger; // eslint-disable-line
     throw new Error(message);
   }
 };
@@ -289,8 +357,10 @@ const pointerCoord = (ev) => {
 const isEndSide = (side) => {
   const isRTL = document.dir === 'rtl';
   switch (side) {
-    case 'start': return isRTL;
-    case 'end': return !isRTL;
+    case 'start':
+      return isRTL;
+    case 'end':
+      return !isRTL;
     default:
       throw new Error(`"${side}" is not a valid value for [side]. Use "start" or "end" instead.`);
   }
@@ -299,7 +369,7 @@ const debounceEvent = (event, wait) => {
   const original = event._original || event;
   return {
     _original: event,
-    emit: debounce(original.emit.bind(original), wait)
+    emit: debounce(original.emit.bind(original), wait),
   };
 };
 const debounce = (func, wait = 0) => {
@@ -309,5 +379,32 @@ const debounce = (func, wait = 0) => {
     timer = setTimeout(func, wait, ...args);
   };
 };
+/**
+ * Check whether the two string maps are shallow equal.
+ *
+ * undefined is treated as an empty map.
+ *
+ * @returns whether the keys are the same and the values are shallow equal.
+ */
+const shallowEqualStringMap = (map1, map2) => {
+  map1 !== null && map1 !== void 0 ? map1 : (map1 = {});
+  map2 !== null && map2 !== void 0 ? map2 : (map2 = {});
+  if (map1 === map2) {
+    return true;
+  }
+  const keys1 = Object.keys(map1);
+  if (keys1.length !== Object.keys(map2).length) {
+    return false;
+  }
+  for (const k1 of keys1) {
+    if (!(k1 in map2)) {
+      return false;
+    }
+    if (map1[k1] !== map2[k1]) {
+      return false;
+    }
+  }
+  return true;
+};
 
-export { componentOnReady as a, addEventListener as b, clamp as c, debounceEvent as d, removeEventListener as e, getAriaLabel as f, getElementRoot as g, hasShadowDom as h, inheritAriaAttributes as i, renderHiddenInput as j, findItemLabel as k, inheritAttributes as l, isEndSide as m, assert as n, debounce as o, pointerCoord as p, now as q, raf as r };
+export { inheritAttributes as a, clamp as b, componentOnReady as c, debounceEvent as d, addEventListener as e, removeEventListener as f, getElementRoot as g, hasShadowDom as h, inheritAriaAttributes as i, renderHiddenInput as j, findItemLabel as k, isEndSide as l, focusElement as m, assert as n, getAriaLabel as o, debounce as p, pointerCoord as q, raf as r, shallowEqualStringMap as s, transitionEndAsync as t, now as u };

package/dist/esm/index-0dbaca1a.js

@@ -0,0 +1,28 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+/**
+ * When accessing the window, it is important
+ * to account for SSR applications where the
+ * window is not available. Code that accesses
+ * window when it is not available will crash.
+ * Even checking if `window === undefined` will cause
+ * apps to crash in SSR.
+ *
+ * Use win below to access an SSR-safe version
+ * of the window.
+ *
+ * Example 1:
+ * Before:
+ * if (window.innerWidth > 768) { ... }
+ *
+ * After:
+ * import { win } from 'path/to/this/file';
+ * if (win?.innerWidth > 768) { ... }
+ *
+ * Note: Code inside of this if-block will
+ * not run in an SSR environment.
+ */
+const win = typeof window !== 'undefined' ? window : undefined;
+
+export { win as w };

package/dist/esm/index-1f3d8582.js

@@ -0,0 +1,34 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+/**
+ * Logs a warning to the console with an Ionic prefix
+ * to indicate the library that is warning the developer.
+ *
+ * @param message - The string message to be logged to the console.
+ */
+const printIonWarning = (message, ...params) => {
+  return console.warn(`[Ionic Warning]: ${message}`, ...params);
+};
+/*
+ * Logs an error to the console with an Ionic prefix
+ * to indicate the library that is warning the developer.
+ *
+ * @param message - The string message to be logged to the console.
+ * @param params - Additional arguments to supply to the console.error.
+ */
+const printIonError = (message, ...params) => {
+  return console.error(`[Ionic Error]: ${message}`, ...params);
+};
+/**
+ * Prints an error informing developers that an implementation requires an element to be used
+ * within a specific selector.
+ *
+ * @param el The web component element this is requiring the element.
+ * @param targetSelectors The selector or selectors that were not found.
+ */
+const printRequiredElementError = (el, ...targetSelectors) => {
+  return console.error(`<${el.tagName.toLowerCase()}> must be used inside ${targetSelectors.join(' or ')}.`);
+};
+
+export { printIonError as a, printRequiredElementError as b, printIonWarning as p };

package/dist/esm/{index-97199683.js → index-2be9a18b.js}

@@ -1,8 +1,11 @@
-import { MENU_BACK_BUTTON_PRIORITY } from './hardware-back-button-bb4c578a.js';
-import { a as componentOnReady } from './helpers-44e3bd9f.js';
-import { g as getIonMode } from './ionic-global-2e28f7c7.js';
-import { c as createAnimation } from './animation-fe6ed422.js';
+import { MENU_BACK_BUTTON_PRIORITY } from './hardware-back-button-242191a7.js';
+import { c as componentOnReady } from './helpers-aeff219b.js';
+import { g as getIonMode } from './ionic-global-6cd57191.js';
+import { c as createAnimation } from './animation-801a007a.js';
 
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 /**
  * baseAnimation
  * Base class which is extended by the various types. Each
@@ -20,6 +23,9 @@ const baseAnimation = (isIos) => {
   return createAnimation().duration(isIos ? 400 : 300);
 };
 
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 /**
  * Menu Overlay Type
  * The menu slides over the content. The content
@@ -41,18 +47,17 @@ const menuOverlayAnimation = (menu) => {
     closedX = -width + 'px';
     openedX = '0px';
   }
-  menuAnimation
-    .addElement(menu.menuInnerEl)
-    .fromTo('transform', `translateX(${closedX})`, `translateX(${openedX})`);
+  menuAnimation.addElement(menu.menuInnerEl).fromTo('transform', `translateX(${closedX})`, `translateX(${openedX})`);
   const mode = getIonMode(menu);
   const isIos = mode === 'ios';
   const opacity = isIos ? 0.2 : 0.25;
-  backdropAnimation
-    .addElement(menu.backdropEl)
-    .fromTo('opacity', 0.01, opacity);
+  backdropAnimation.addElement(menu.backdropEl).fromTo('opacity', 0.01, opacity);
   return baseAnimation(isIos).addAnimation([menuAnimation, backdropAnimation]);
 };
 
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 /**
  * Menu Push Type
  * The content slides over to reveal the menu underneath.
@@ -77,12 +82,13 @@ const menuPushAnimation = (menu) => {
   const contentAnimation = createAnimation()
     .addElement(menu.contentEl)
     .fromTo('transform', 'translateX(0px)', `translateX(${contentOpenedX})`);
-  const backdropAnimation = createAnimation()
-    .addElement(menu.backdropEl)
-    .fromTo('opacity', 0.01, 0.32);
+  const backdropAnimation = createAnimation().addElement(menu.backdropEl).fromTo('opacity', 0.01, 0.32);
   return baseAnimation(mode === 'ios').addAnimation([menuAnimation, contentAnimation, backdropAnimation]);
 };
 
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 /**
  * Menu Reveal Type
  * The content slides over to reveal the menu underneath.
@@ -90,13 +96,16 @@ const menuPushAnimation = (menu) => {
  */
 const menuRevealAnimation = (menu) => {
   const mode = getIonMode(menu);
-  const openedX = (menu.width * (menu.isEndSide ? -1 : 1)) + 'px';
+  const openedX = menu.width * (menu.isEndSide ? -1 : 1) + 'px';
   const contentOpen = createAnimation()
     .addElement(menu.contentEl) // REVIEW
     .fromTo('transform', 'translateX(0px)', `translateX(${openedX})`);
   return baseAnimation(mode === 'ios').addAnimation(contentOpen);
 };
 
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 const createMenuController = () => {
   const menuAnimations = new Map();
   const menus = [];
@@ -138,7 +147,8 @@ const createMenuController = () => {
   const isOpen = async (menu) => {
     if (menu != null) {
       const menuEl = await get(menu);
-      return (menuEl !== undefined && menuEl.isOpen());
+      // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
+      return menuEl !== undefined && menuEl.isOpen();
     }
     else {
       const menuEl = await getOpen();
@@ -157,21 +167,21 @@ const createMenuController = () => {
     if (menu === 'start' || menu === 'end') {
       // there could be more than one menu on the same side
       // so first try to get the enabled one
-      const menuRef = find(m => m.side === menu && !m.disabled);
+      const menuRef = find((m) => m.side === menu && !m.disabled);
       if (menuRef) {
         return menuRef;
       }
       // didn't find a menu side that is enabled
       // so try to get the first menu side found
-      return find(m => m.side === menu);
+      return find((m) => m.side === menu);
     }
     else if (menu != null) {
       // the menuId was not left or right
       // so try to get the menu by its "id"
-      return find(m => m.menuId === menu);
+      return find((m) => m.menuId === menu);
     }
     // return the first enabled menu
-    const menuEl = find(m => !m.disabled);
+    const menuEl = find((m) => !m.disabled);
     if (menuEl) {
       return menuEl;
     }
@@ -222,9 +232,7 @@ const createMenuController = () => {
     // then find all the other menus on this same side
     // and automatically disable other same side menus
     const side = menu.side;
-    menus
-      .filter(m => m.side === side && m !== menu)
-      .forEach(m => m.disabled = true);
+    menus.filter((m) => m.side === side && m !== menu).forEach((m) => (m.disabled = true));
   };
   const _setOpen = async (menu, shouldOpen, animated) => {
     if (isAnimatingSync()) {
@@ -247,13 +255,13 @@ const createMenuController = () => {
     return animation;
   };
   const _getOpenSync = () => {
-    return find(m => m._isOpen);
+    return find((m) => m._isOpen);
   };
   const getMenusSync = () => {
-    return menus.map(menu => menu.el);
+    return menus.map((menu) => menu.el);
   };
   const isAnimatingSync = () => {
-    return menus.some(menu => menu.isAnimating);
+    return menus.some((menu) => menu.isAnimating);
   };
   const find = (predicate) => {
     const instance = menus.find(predicate);
@@ -263,13 +271,11 @@ const createMenuController = () => {
     return undefined;
   };
   const waitUntilReady = () => {
-    return Promise.all(Array.from(document.querySelectorAll('ion-menu'))
-      .map(menu => new Promise(resolve => componentOnReady(menu, resolve))));
+    return Promise.all(Array.from(document.querySelectorAll('ion-menu')).map((menu) => new Promise((resolve) => componentOnReady(menu, resolve))));
   };
   registerAnimation('reveal', menuRevealAnimation);
   registerAnimation('push', menuPushAnimation);
   registerAnimation('overlay', menuOverlayAnimation);
-  /* tslint:disable-next-line */
   if (typeof document !== 'undefined') {
     document.addEventListener('ionBackButton', (ev) => {
       const openMenu = _getOpenSync();

package/dist/esm/{index-8d682224.js → index-51e4a829.js}

@@ -1,3 +1,6 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 /**
  * Does a simple sanitization of all elements
  * in an untrusted string
@@ -23,7 +26,7 @@ const sanitizeDOMString = (untrustedString) => {
      * Remove any elements
      * that are blocked
      */
-    blockedTags.forEach(blockedTag => {
+    blockedTags.forEach((blockedTag) => {
       const getElementsToRemove = documentFragment.querySelectorAll(blockedTag);
       for (let elementIndex = getElementsToRemove.length - 1; elementIndex >= 0; elementIndex--) {
         const element = getElementsToRemove[elementIndex];
@@ -39,7 +42,7 @@ const sanitizeDOMString = (untrustedString) => {
          * as they are left behind
          */
         const childElements = getElementChildren(element);
-        /* tslint:disable-next-line */
+        /* eslint-disable-next-line */
         for (let childIndex = 0; childIndex < childElements.length; childIndex++) {
           sanitizeElement(childElements[childIndex]);
         }
@@ -51,7 +54,7 @@ const sanitizeDOMString = (untrustedString) => {
      */
     // IE does not support .children on document fragments, only .childNodes
     const dfChildren = getElementChildren(documentFragment);
-    /* tslint:disable-next-line */
+    /* eslint-disable-next-line */
     for (let childIndex = 0; childIndex < dfChildren.length; childIndex++) {
       sanitizeElement(dfChildren[childIndex]);
     }
@@ -60,7 +63,7 @@ const sanitizeDOMString = (untrustedString) => {
     fragmentDiv.appendChild(documentFragment);
     // First child is always the div we did our work in
     const getInnerDiv = fragmentDiv.querySelector('div');
-    return (getInnerDiv !== null) ? getInnerDiv.innerHTML : fragmentDiv.innerHTML;
+    return getInnerDiv !== null ? getInnerDiv.innerHTML : fragmentDiv.innerHTML;
   }
   catch (err) {
     console.error(err);
@@ -88,7 +91,7 @@ const sanitizeElement = (element) => {
     // clean up any allowed attribs
     // that attempt to do any JS funny-business
     const attributeValue = attribute.value;
-    /* tslint:disable-next-line */
+    /* eslint-disable-next-line */
     if (attributeValue != null && attributeValue.toLowerCase().includes('javascript:')) {
       element.removeAttribute(attributeName);
     }
@@ -97,7 +100,7 @@ const sanitizeElement = (element) => {
    * Sanitize any nested children
    */
   const childElements = getElementChildren(element);
-  /* tslint:disable-next-line */
+  /* eslint-disable-next-line */
   for (let i = 0; i < childElements.length; i++) {
     sanitizeElement(childElements[i]);
   }
@@ -107,11 +110,12 @@ const sanitizeElement = (element) => {
  * so we revert to .childNodes instead
  */
 const getElementChildren = (el) => {
-  return (el.children != null) ? el.children : el.childNodes;
+  return el.children != null ? el.children : el.childNodes;
 };
 const isSanitizerEnabled = () => {
+  var _a;
   const win = window;
-  const config = win && win.Ionic && win.Ionic.config;
+  const config = (_a = win === null || win === void 0 ? void 0 : win.Ionic) === null || _a === void 0 ? void 0 : _a.config;
   if (config) {
     if (config.get) {
       return config.get('sanitizerEnabled', true);

package/dist/esm/{index-8a463a85.js → index-6048aed6.js}

@@ -1,25 +1,31 @@
-import { w as writeTask, B as Build } from './index-e4deec27.js';
-import { a as componentOnReady } from './helpers-44e3bd9f.js';
+import { w as writeTask, B as Build } from './index-cb938ffb.js';
+import { c as componentOnReady, r as raf } from './helpers-aeff219b.js';
 
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 const LIFECYCLE_WILL_ENTER = 'ionViewWillEnter';
 const LIFECYCLE_DID_ENTER = 'ionViewDidEnter';
 const LIFECYCLE_WILL_LEAVE = 'ionViewWillLeave';
 const LIFECYCLE_DID_LEAVE = 'ionViewDidLeave';
 const LIFECYCLE_WILL_UNLOAD = 'ionViewWillUnload';
 
-const iosTransitionAnimation = () => import('./ios.transition-a783e3cd.js');
-const mdTransitionAnimation = () => import('./md.transition-5a4a8c82.js');
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+const iosTransitionAnimation = () => import('./ios.transition-bbd952f2.js');
+const mdTransitionAnimation = () => import('./md.transition-5170a6d3.js');
 const transition = (opts) => {
   return new Promise((resolve, reject) => {
     writeTask(() => {
       beforeTransition(opts);
-      runTransition(opts).then(result => {
+      runTransition(opts).then((result) => {
         if (result.animation) {
           result.animation.destroy();
         }
         afterTransition(opts);
         resolve(result);
-      }, error => {
+      }, (error) => {
         afterTransition(opts);
         reject(error);
       });
@@ -51,9 +57,7 @@ const beforeTransition = (opts) => {
 };
 const runTransition = async (opts) => {
   const animationBuilder = await getAnimationBuilder(opts);
-  const ani = (animationBuilder && Build.isBrowser)
-    ? animation(animationBuilder, opts)
-    : noAnimation(opts); // fast path for no animation
+  const ani = animationBuilder && Build.isBrowser ? animation(animationBuilder, opts) : noAnimation(opts); // fast path for no animation
   return ani;
 };
 const afterTransition = (opts) => {
@@ -73,7 +77,7 @@ const getAnimationBuilder = async (opts) => {
   if (opts.animationBuilder) {
     return opts.animationBuilder;
   }
-  const getAnimation = (opts.mode === 'ios')
+  const getAnimation = opts.mode === 'ios'
     ? (await iosTransitionAnimation()).iosTransitionAnimation
     : (await mdTransitionAnimation()).mdTransitionAnimation;
   return getAnimation;
@@ -91,7 +95,7 @@ const animation = async (animationBuilder, opts) => {
   }
   return {
     hasCompleted: didComplete,
-    animation: trans
+    animation: trans,
   };
 };
 const noAnimation = async (opts) => {
@@ -101,18 +105,14 @@ const noAnimation = async (opts) => {
   fireWillEvents(enteringEl, leavingEl);
   fireDidEvents(enteringEl, leavingEl);
   return {
-    hasCompleted: true
+    hasCompleted: true,
   };
 };
 const waitForReady = async (opts, defaultDeep) => {
   const deep = opts.deepWait !== undefined ? opts.deepWait : defaultDeep;
-  const promises = deep ? [
-    deepReady(opts.enteringEl),
-    deepReady(opts.leavingEl),
-  ] : [
-    shallowReady(opts.enteringEl),
-    shallowReady(opts.leavingEl),
-  ];
+  const promises = deep
+    ? [deepReady(opts.enteringEl), deepReady(opts.leavingEl)]
+    : [shallowReady(opts.enteringEl), shallowReady(opts.leavingEl)];
   await Promise.all(promises);
   await notifyViewReady(opts.viewIsReady, opts.enteringEl);
 };
@@ -123,7 +123,7 @@ const notifyViewReady = async (viewIsReady, enteringEl) => {
 };
 const playTransition = (trans, opts) => {
   const progressCallback = opts.progressCallback;
-  const promise = new Promise(resolve => {
+  const promise = new Promise((resolve) => {
     trans.onFinish((currentStep) => resolve(currentStep === 1));
   });
   // cool, let's do this, start the transition
@@ -161,7 +161,7 @@ const lifecycle = (el, eventName) => {
 };
 const shallowReady = (el) => {
   if (el) {
-    return new Promise(resolve => componentOnReady(el, resolve));
+    return new Promise((resolve) => componentOnReady(el, resolve));
   }
   return Promise.resolve();
 };
@@ -169,10 +169,23 @@ const deepReady = async (el) => {
   const element = el;
   if (element) {
     if (element.componentOnReady != null) {
+      // eslint-disable-next-line custom-rules/no-component-on-ready-method
       const stencilEl = await element.componentOnReady();
       if (stencilEl != null) {
         return;
       }
+      /**
+       * Custom elements in Stencil will have __registerHost.
+       */
+    }
+    else if (element.__registerHost != null) {
+      /**
+       * Non-lazy loaded custom elements need to wait
+       * one frame for component to be loaded.
+       */
+      const waitForCustomElement = new Promise((resolve) => raf(resolve));
+      await waitForCustomElement;
+      return;
     }
     await Promise.all(Array.from(element.children).map(deepReady));
   }
@@ -190,9 +203,7 @@ const setPageHidden = (el, hidden) => {
 };
 const setZIndex = (enteringEl, leavingEl, direction) => {
   if (enteringEl !== undefined) {
-    enteringEl.style.zIndex = (direction === 'back')
-      ? '99'
-      : '101';
+    enteringEl.style.zIndex = direction === 'back' ? '99' : '101';
   }
   if (leavingEl !== undefined) {
     leavingEl.style.zIndex = '100';