@pod-os/elements 0.7.1-92705ee.0 → 0.7.1-a71f01c.0

package/dist/components/ionic-global.js

@@ -0,0 +1,226 @@
+import { getMode, Context, setPlatformHelpers, setMode } from '@stencil/core/internal/client';
+
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+class Config {
+  constructor() {
+    this.m = new Map();
+  }
+  reset(configObj) {
+    this.m = new Map(Object.entries(configObj));
+  }
+  get(key, fallback) {
+    const value = this.m.get(key);
+    return value !== undefined ? value : fallback;
+  }
+  getBoolean(key, fallback = false) {
+    const val = this.m.get(key);
+    if (val === undefined) {
+      return fallback;
+    }
+    if (typeof val === 'string') {
+      return val === 'true';
+    }
+    return !!val;
+  }
+  getNumber(key, fallback) {
+    const val = parseFloat(this.m.get(key));
+    return isNaN(val) ? (fallback !== undefined ? fallback : NaN) : val;
+  }
+  set(key, value) {
+    this.m.set(key, value);
+  }
+}
+const config = /*@__PURE__*/ new Config();
+const configFromSession = (win) => {
+  try {
+    const configStr = win.sessionStorage.getItem(IONIC_SESSION_KEY);
+    return configStr !== null ? JSON.parse(configStr) : {};
+  }
+  catch (e) {
+    return {};
+  }
+};
+const saveConfig = (win, c) => {
+  try {
+    win.sessionStorage.setItem(IONIC_SESSION_KEY, JSON.stringify(c));
+  }
+  catch (e) {
+    return;
+  }
+};
+const configFromURL = (win) => {
+  const configObj = {};
+  win.location.search
+    .slice(1)
+    .split('&')
+    .map((entry) => entry.split('='))
+    .map(([key, value]) => [decodeURIComponent(key), decodeURIComponent(value)])
+    .filter(([key]) => startsWith(key, IONIC_PREFIX))
+    .map(([key, value]) => [key.slice(IONIC_PREFIX.length), value])
+    .forEach(([key, value]) => {
+    configObj[key] = value;
+  });
+  return configObj;
+};
+const startsWith = (input, search) => {
+  return input.substr(0, search.length) === search;
+};
+const IONIC_PREFIX = 'ionic:';
+const IONIC_SESSION_KEY = 'ionic-persist-config';
+
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+const getPlatforms = (win) => setupPlatforms(win);
+const isPlatform = (winOrPlatform, platform) => {
+  if (typeof winOrPlatform === 'string') {
+    platform = winOrPlatform;
+    winOrPlatform = undefined;
+  }
+  return getPlatforms(winOrPlatform).includes(platform);
+};
+const setupPlatforms = (win = window) => {
+  if (typeof win === 'undefined') {
+    return [];
+  }
+  win.Ionic = win.Ionic || {};
+  let platforms = win.Ionic.platforms;
+  if (platforms == null) {
+    platforms = win.Ionic.platforms = detectPlatforms(win);
+    platforms.forEach((p) => win.document.documentElement.classList.add(`plt-${p}`));
+  }
+  return platforms;
+};
+const detectPlatforms = (win) => {
+  const customPlatformMethods = config.get('platform');
+  return Object.keys(PLATFORMS_MAP).filter((p) => {
+    const customMethod = customPlatformMethods === null || customPlatformMethods === void 0 ? void 0 : customPlatformMethods[p];
+    return typeof customMethod === 'function' ? customMethod(win) : PLATFORMS_MAP[p](win);
+  });
+};
+const isMobileWeb = (win) => isMobile(win) && !isHybrid(win);
+const isIpad = (win) => {
+  // iOS 12 and below
+  if (testUserAgent(win, /iPad/i)) {
+    return true;
+  }
+  // iOS 13+
+  if (testUserAgent(win, /Macintosh/i) && isMobile(win)) {
+    return true;
+  }
+  return false;
+};
+const isIphone = (win) => testUserAgent(win, /iPhone/i);
+const isIOS = (win) => testUserAgent(win, /iPhone|iPod/i) || isIpad(win);
+const isAndroid = (win) => testUserAgent(win, /android|sink/i);
+const isAndroidTablet = (win) => {
+  return isAndroid(win) && !testUserAgent(win, /mobile/i);
+};
+const isPhablet = (win) => {
+  const width = win.innerWidth;
+  const height = win.innerHeight;
+  const smallest = Math.min(width, height);
+  const largest = Math.max(width, height);
+  return smallest > 390 && smallest < 520 && largest > 620 && largest < 800;
+};
+const isTablet = (win) => {
+  const width = win.innerWidth;
+  const height = win.innerHeight;
+  const smallest = Math.min(width, height);
+  const largest = Math.max(width, height);
+  return isIpad(win) || isAndroidTablet(win) || (smallest > 460 && smallest < 820 && largest > 780 && largest < 1400);
+};
+const isMobile = (win) => matchMedia(win, '(any-pointer:coarse)');
+const isDesktop = (win) => !isMobile(win);
+const isHybrid = (win) => isCordova(win) || isCapacitorNative(win);
+const isCordova = (win) => !!(win['cordova'] || win['phonegap'] || win['PhoneGap']);
+const isCapacitorNative = (win) => {
+  const capacitor = win['Capacitor'];
+  return !!(capacitor === null || capacitor === void 0 ? void 0 : capacitor.isNative);
+};
+const isElectron = (win) => testUserAgent(win, /electron/i);
+const isPWA = (win) => { var _a; return !!(((_a = win.matchMedia) === null || _a === void 0 ? void 0 : _a.call(win, '(display-mode: standalone)').matches) || win.navigator.standalone); };
+const testUserAgent = (win, expr) => expr.test(win.navigator.userAgent);
+const matchMedia = (win, query) => { var _a; return (_a = win.matchMedia) === null || _a === void 0 ? void 0 : _a.call(win, query).matches; };
+const PLATFORMS_MAP = {
+  ipad: isIpad,
+  iphone: isIphone,
+  ios: isIOS,
+  android: isAndroid,
+  phablet: isPhablet,
+  tablet: isTablet,
+  cordova: isCordova,
+  capacitor: isCapacitorNative,
+  electron: isElectron,
+  pwa: isPWA,
+  mobile: isMobile,
+  mobileweb: isMobileWeb,
+  desktop: isDesktop,
+  hybrid: isHybrid,
+};
+
+let defaultMode;
+const getIonMode = (ref) => {
+  return (ref && getMode(ref)) || defaultMode;
+};
+const initialize = (userConfig = {}) => {
+  if (typeof window === 'undefined') {
+    return;
+  }
+  const doc = window.document;
+  const win = window;
+  Context.config = config;
+  const Ionic = (win.Ionic = win.Ionic || {});
+  const platformHelpers = {};
+  if (userConfig._ael) {
+    platformHelpers.ael = userConfig._ael;
+  }
+  if (userConfig._rel) {
+    platformHelpers.rel = userConfig._rel;
+  }
+  if (userConfig._ce) {
+    platformHelpers.ce = userConfig._ce;
+  }
+  setPlatformHelpers(platformHelpers);
+  // create the Ionic.config from raw config object (if it exists)
+  // and convert Ionic.config into a ConfigApi that has a get() fn
+  const configObj = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, configFromSession(win)), { persistConfig: false }), Ionic.config), configFromURL(win)), userConfig);
+  config.reset(configObj);
+  if (config.getBoolean('persistConfig')) {
+    saveConfig(win, configObj);
+  }
+  // Setup platforms
+  setupPlatforms(win);
+  // first see if the mode was set as an attribute on <html>
+  // which could have been set by the user, or by pre-rendering
+  // otherwise get the mode via config settings, and fallback to md
+  Ionic.config = config;
+  Ionic.mode = defaultMode = config.get('mode', doc.documentElement.getAttribute('mode') || (isPlatform(win, 'ios') ? 'ios' : 'md'));
+  config.set('mode', defaultMode);
+  doc.documentElement.setAttribute('mode', defaultMode);
+  doc.documentElement.classList.add(defaultMode);
+  if (config.getBoolean('_testing')) {
+    config.set('animated', false);
+  }
+  const isIonicElement = (elm) => { var _a; return (_a = elm.tagName) === null || _a === void 0 ? void 0 : _a.startsWith('ION-'); };
+  const isAllowedIonicModeValue = (elmMode) => ['ios', 'md'].includes(elmMode);
+  setMode((elm) => {
+    while (elm) {
+      const elmMode = elm.mode || elm.getAttribute('mode');
+      if (elmMode) {
+        if (isAllowedIonicModeValue(elmMode)) {
+          return elmMode;
+        }
+        else if (isIonicElement(elm)) {
+          console.warn('Invalid ionic mode: "' + elmMode + '", expected: "ios" or "md"');
+        }
+      }
+      elm = elm.parentElement;
+    }
+    return defaultMode;
+  });
+};
+
+export { isPlatform as a, config as c, getIonMode as g, initialize as i };

package/dist/{custom-elements → components}/ios.transition.js

@@ -1,5 +1,9 @@
-import { f as createAnimation, g as getIonPageElement } from './index.js';
+import { c as createAnimation } from './animation.js';
+import { g as getIonPageElement } from './index7.js';
 
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 const DURATION = 540;
 const getClonedElement = (tagName) => {
   return document.querySelector(`${tagName}.ion-cloned-element`);
@@ -8,16 +12,16 @@ const shadow = (el) => {
   return el.shadowRoot || el;
 };
 const getLargeTitle = (refEl) => {
-  const tabs = (refEl.tagName === 'ION-TABS') ? refEl : refEl.querySelector('ion-tabs');
+  const tabs = refEl.tagName === 'ION-TABS' ? refEl : refEl.querySelector('ion-tabs');
   const query = 'ion-content ion-header:not(.header-collapse-condense-inactive) ion-title.title-large';
   if (tabs != null) {
     const activeTab = tabs.querySelector('ion-tab:not(.tab-hidden), .ion-page:not(.ion-page-hidden)');
-    return (activeTab != null) ? activeTab.querySelector(query) : null;
+    return activeTab != null ? activeTab.querySelector(query) : null;
   }
   return refEl.querySelector(query);
 };
 const getBackButton = (refEl, backDirection) => {
-  const tabs = (refEl.tagName === 'ION-TABS') ? refEl : refEl.querySelector('ion-tabs');
+  const tabs = refEl.tagName === 'ION-TABS' ? refEl : refEl.querySelector('ion-tabs');
   let buttonsList = [];
   if (tabs != null) {
     const activeTab = tabs.querySelector('ion-tab:not(.tab-hidden), .ion-page:not(.ion-page-hidden)');
@@ -61,36 +65,44 @@ const createLargeTitleTransition = (rootAnimation, rtl, backDirection, enteringE
   }
   return {
     forward: shouldAnimationForward,
-    backward: shouldAnimationBackward
+    backward: shouldAnimationBackward,
   };
 };
 const animateBackButton = (rootAnimation, rtl, backDirection, backButtonEl, largeTitleBox, backButtonBox) => {
-  const BACK_BUTTON_START_OFFSET = (rtl) ? `calc(100% - ${backButtonBox.right + 4}px)` : `${backButtonBox.left - 4}px`;
-  const START_TEXT_TRANSLATE = (rtl) ? '7px' : '-7px';
-  const END_TEXT_TRANSLATE = (rtl) ? '-4px' : '4px';
-  const ICON_TRANSLATE = (rtl) ? '-4px' : '4px';
-  const TEXT_ORIGIN_X = (rtl) ? 'right' : 'left';
-  const ICON_ORIGIN_X = (rtl) ? 'left' : 'right';
+  const BACK_BUTTON_START_OFFSET = rtl ? `calc(100% - ${backButtonBox.right + 4}px)` : `${backButtonBox.left - 4}px`;
+  const START_TEXT_TRANSLATE = rtl ? '7px' : '-7px';
+  const END_TEXT_TRANSLATE = rtl ? '-4px' : '4px';
+  const ICON_TRANSLATE = rtl ? '-4px' : '4px';
+  const TEXT_ORIGIN_X = rtl ? 'right' : 'left';
+  const ICON_ORIGIN_X = rtl ? 'left' : 'right';
   const FORWARD_TEXT_KEYFRAMES = [
-    { offset: 0, opacity: 0, transform: `translate3d(${START_TEXT_TRANSLATE}, ${largeTitleBox.top - 40}px, 0) scale(2.1)` },
-    { offset: 1, opacity: 1, transform: `translate3d(${END_TEXT_TRANSLATE}, ${backButtonBox.top - 46}px, 0) scale(1)` }
+    {
+      offset: 0,
+      opacity: 0,
+      transform: `translate3d(${START_TEXT_TRANSLATE}, ${largeTitleBox.top - 40}px, 0) scale(2.1)`,
+    },
+    { offset: 1, opacity: 1, transform: `translate3d(${END_TEXT_TRANSLATE}, ${backButtonBox.top - 46}px, 0) scale(1)` },
   ];
   const BACKWARD_TEXT_KEYFRAMES = [
     { offset: 0, opacity: 1, transform: `translate3d(${END_TEXT_TRANSLATE}, ${backButtonBox.top - 46}px, 0) scale(1)` },
     { offset: 0.6, opacity: 0 },
-    { offset: 1, opacity: 0, transform: `translate3d(${START_TEXT_TRANSLATE}, ${largeTitleBox.top - 40}px, 0) scale(2.1)` }
+    {
+      offset: 1,
+      opacity: 0,
+      transform: `translate3d(${START_TEXT_TRANSLATE}, ${largeTitleBox.top - 40}px, 0) scale(2.1)`,
+    },
   ];
-  const TEXT_KEYFRAMES = (backDirection) ? BACKWARD_TEXT_KEYFRAMES : FORWARD_TEXT_KEYFRAMES;
+  const TEXT_KEYFRAMES = backDirection ? BACKWARD_TEXT_KEYFRAMES : FORWARD_TEXT_KEYFRAMES;
   const FORWARD_ICON_KEYFRAMES = [
     { offset: 0, opacity: 0, transform: `translate3d(${ICON_TRANSLATE}, ${backButtonBox.top - 41}px, 0) scale(0.6)` },
-    { offset: 1, opacity: 1, transform: `translate3d(${ICON_TRANSLATE}, ${backButtonBox.top - 46}px, 0) scale(1)` }
+    { offset: 1, opacity: 1, transform: `translate3d(${ICON_TRANSLATE}, ${backButtonBox.top - 46}px, 0) scale(1)` },
   ];
   const BACKWARD_ICON_KEYFRAMES = [
     { offset: 0, opacity: 1, transform: `translate3d(${ICON_TRANSLATE}, ${backButtonBox.top - 46}px, 0) scale(1)` },
     { offset: 0.2, opacity: 0, transform: `translate3d(${ICON_TRANSLATE}, ${backButtonBox.top - 41}px, 0) scale(0.6)` },
-    { offset: 1, opacity: 0, transform: `translate3d(${ICON_TRANSLATE}, ${backButtonBox.top - 41}px, 0) scale(0.6)` }
+    { offset: 1, opacity: 0, transform: `translate3d(${ICON_TRANSLATE}, ${backButtonBox.top - 41}px, 0) scale(0.6)` },
   ];
-  const ICON_KEYFRAMES = (backDirection) ? BACKWARD_ICON_KEYFRAMES : FORWARD_ICON_KEYFRAMES;
+  const ICON_KEYFRAMES = backDirection ? BACKWARD_ICON_KEYFRAMES : FORWARD_ICON_KEYFRAMES;
   const enteringBackButtonTextAnimation = createAnimation();
   const enteringBackButtonIconAnimation = createAnimation();
   const clonedBackButtonEl = getClonedElement('ion-back-button');
@@ -107,7 +119,7 @@ const animateBackButton = (rootAnimation, rtl, backDirection, backButtonEl, larg
   enteringBackButtonTextAnimation.addElement(backButtonTextEl);
   enteringBackButtonTextAnimation
     .beforeStyles({
-    'transform-origin': `${TEXT_ORIGIN_X} center`
+    'transform-origin': `${TEXT_ORIGIN_X} center`,
   })
     .beforeAddWrite(() => {
     backButtonEl.style.setProperty('display', 'none');
@@ -121,26 +133,26 @@ const animateBackButton = (rootAnimation, rtl, backDirection, backButtonEl, larg
     .keyframes(TEXT_KEYFRAMES);
   enteringBackButtonIconAnimation
     .beforeStyles({
-    'transform-origin': `${ICON_ORIGIN_X} center`
+    'transform-origin': `${ICON_ORIGIN_X} center`,
   })
     .keyframes(ICON_KEYFRAMES);
   rootAnimation.addAnimation([enteringBackButtonTextAnimation, enteringBackButtonIconAnimation]);
 };
 const animateLargeTitle = (rootAnimation, rtl, backDirection, largeTitleEl, largeTitleBox, backButtonBox) => {
-  const TITLE_START_OFFSET = (rtl) ? `calc(100% - ${largeTitleBox.right}px)` : `${largeTitleBox.left}px`;
-  const START_TRANSLATE = (rtl) ? '-18px' : '18px';
-  const ORIGIN_X = (rtl) ? 'right' : 'left';
+  const TITLE_START_OFFSET = rtl ? `calc(100% - ${largeTitleBox.right}px)` : `${largeTitleBox.left}px`;
+  const START_TRANSLATE = rtl ? '-18px' : '18px';
+  const ORIGIN_X = rtl ? 'right' : 'left';
   const BACKWARDS_KEYFRAMES = [
     { offset: 0, opacity: 0, transform: `translate3d(${START_TRANSLATE}, ${backButtonBox.top - 4}px, 0) scale(0.49)` },
     { offset: 0.1, opacity: 0 },
-    { offset: 1, opacity: 1, transform: `translate3d(0, ${largeTitleBox.top - 2}px, 0) scale(1)` }
+    { offset: 1, opacity: 1, transform: `translate3d(0, ${largeTitleBox.top - 2}px, 0) scale(1)` },
   ];
   const FORWARDS_KEYFRAMES = [
     { offset: 0, opacity: 0.99, transform: `translate3d(0, ${largeTitleBox.top - 2}px, 0) scale(1)` },
     { offset: 0.6, opacity: 0 },
-    { offset: 1, opacity: 0, transform: `translate3d(${START_TRANSLATE}, ${backButtonBox.top - 4}px, 0) scale(0.5)` }
+    { offset: 1, opacity: 0, transform: `translate3d(${START_TRANSLATE}, ${backButtonBox.top - 4}px, 0) scale(0.5)` },
   ];
-  const KEYFRAMES = (backDirection) ? BACKWARDS_KEYFRAMES : FORWARDS_KEYFRAMES;
+  const KEYFRAMES = backDirection ? BACKWARDS_KEYFRAMES : FORWARDS_KEYFRAMES;
   const clonedTitleEl = getClonedElement('ion-title');
   const clonedLargeTitleAnimation = createAnimation();
   clonedTitleEl.innerText = largeTitleEl.innerText;
@@ -150,10 +162,10 @@ const animateLargeTitle = (rootAnimation, rtl, backDirection, largeTitleEl, larg
   clonedLargeTitleAnimation
     .beforeStyles({
     'transform-origin': `${ORIGIN_X} center`,
-    'height': '46px',
-    'display': '',
-    'position': 'relative',
-    [ORIGIN_X]: TITLE_START_OFFSET
+    height: '46px',
+    display: '',
+    position: 'relative',
+    [ORIGIN_X]: TITLE_START_OFFSET,
   })
     .beforeAddWrite(() => {
     largeTitleEl.style.setProperty('display', 'none');
@@ -166,6 +178,7 @@ const animateLargeTitle = (rootAnimation, rtl, backDirection, largeTitleEl, larg
   rootAnimation.addAnimation(clonedLargeTitleAnimation);
 };
 const iosTransitionAnimation = (navEl, opts) => {
+  var _a;
   try {
     const EASING = 'cubic-bezier(0.32,0.72,0,1)';
     const OPACITY = 'opacity';
@@ -177,7 +190,7 @@ const iosTransitionAnimation = (navEl, opts) => {
     const OFF_LEFT = isRTL ? '33%' : '-33%';
     const enteringEl = opts.enteringEl;
     const leavingEl = opts.leavingEl;
-    const backDirection = (opts.direction === 'back');
+    const backDirection = opts.direction === 'back';
     const contentEl = enteringEl.querySelector(':scope > ion-content');
     const headerEls = enteringEl.querySelectorAll(':scope > ion-header > *:not(ion-toolbar), :scope > ion-footer > *');
     const enteringToolBarEls = enteringEl.querySelectorAll(':scope > ion-header > ion-toolbar');
@@ -185,11 +198,11 @@ const iosTransitionAnimation = (navEl, opts) => {
     const enteringContentAnimation = createAnimation();
     rootAnimation
       .addElement(enteringEl)
-      .duration(opts.duration || DURATION)
+      .duration(((_a = opts.duration) !== null && _a !== void 0 ? _a : 0) || DURATION)
       .easing(opts.easing || EASING)
       .fill('both')
       .beforeRemoveClass('ion-page-invisible');
-    if (leavingEl && navEl) {
+    if (leavingEl && navEl !== null && navEl !== undefined) {
       const navDecorAnimation = createAnimation();
       navDecorAnimation.addElement(navEl);
       rootAnimation.addAnimation(navDecorAnimation);
@@ -233,14 +246,14 @@ const iosTransitionAnimation = (navEl, opts) => {
         enteringTransitionShadow
           .addElement(enteringTransitionShadowEl) // REVIEW
           .beforeClearStyles([OPACITY])
-          .fromTo(OPACITY, 0.03, 0.70);
+          .fromTo(OPACITY, 0.03, 0.7);
         enteringTransitionEffect.addAnimation([enteringTransitionCover, enteringTransitionShadow]);
         enteringContentAnimation.addAnimation([enteringTransitionEffect]);
       }
     }
     const enteringContentHasLargeTitle = enteringEl.querySelector('ion-header.header-collapse-condense');
     const { forward, backward } = createLargeTitleTransition(rootAnimation, isRTL, backDirection, enteringEl, leavingEl);
-    enteringToolBarEls.forEach(enteringToolBarEl => {
+    enteringToolBarEls.forEach((enteringToolBarEl) => {
       const enteringToolBar = createAnimation();
       enteringToolBar.addElement(enteringToolBarEl);
       rootAnimation.addAnimation(enteringToolBar);
@@ -249,16 +262,16 @@ const iosTransitionAnimation = (navEl, opts) => {
       const enteringToolBarButtons = createAnimation();
       const buttons = Array.from(enteringToolBarEl.querySelectorAll('ion-buttons,[menuToggle]'));
       const parentHeader = enteringToolBarEl.closest('ion-header');
-      const inactiveHeader = parentHeader && parentHeader.classList.contains('header-collapse-condense-inactive');
+      const inactiveHeader = parentHeader === null || parentHeader === void 0 ? void 0 : parentHeader.classList.contains('header-collapse-condense-inactive');
       let buttonsToAnimate;
       if (backDirection) {
-        buttonsToAnimate = buttons.filter(button => {
+        buttonsToAnimate = buttons.filter((button) => {
           const isCollapseButton = button.classList.contains('buttons-collapse');
           return (isCollapseButton && !inactiveHeader) || !isCollapseButton;
         });
       }
       else {
-        buttonsToAnimate = buttons.filter(button => !button.classList.contains('buttons-collapse'));
+        buttonsToAnimate = buttons.filter((button) => !button.classList.contains('buttons-collapse'));
       }
       enteringToolBarButtons.addElement(buttonsToAnimate);
       const enteringToolBarItems = createAnimation();
@@ -270,7 +283,13 @@ const iosTransitionAnimation = (navEl, opts) => {
       if (backButtonEl) {
         enteringBackButton.addElement(backButtonEl);
       }
-      enteringToolBar.addAnimation([enteringTitle, enteringToolBarButtons, enteringToolBarItems, enteringToolBarBg, enteringBackButton]);
+      enteringToolBar.addAnimation([
+        enteringTitle,
+        enteringToolBarButtons,
+        enteringToolBarItems,
+        enteringToolBarBg,
+        enteringBackButton,
+      ]);
       enteringToolBarButtons.fromTo(OPACITY, 0.01, 1);
       enteringToolBarItems.fromTo(OPACITY, 0.01, 1);
       if (backDirection) {
@@ -297,7 +316,7 @@ const iosTransitionAnimation = (navEl, opts) => {
           enteringToolBarBg.fromTo(OPACITY, 0.01, 'var(--opacity)');
         }
         else {
-          enteringToolBarBg.fromTo('transform', (isRTL ? 'translateX(-100%)' : 'translateX(100%)'), 'translateX(0px)');
+          enteringToolBarBg.fromTo('transform', isRTL ? 'translateX(-100%)' : 'translateX(100%)', 'translateX(0px)');
         }
         // forward direction, entering page has a back button
         if (!forward) {
@@ -307,7 +326,7 @@ const iosTransitionAnimation = (navEl, opts) => {
           const enteringBackBtnText = createAnimation();
           enteringBackBtnText
             .addElement(shadow(backButtonEl).querySelector('.button-text')) // REVIEW
-            .fromTo(`transform`, (isRTL ? 'translateX(-100px)' : 'translateX(100px)'), 'translateX(0px)');
+            .fromTo(`transform`, isRTL ? 'translateX(-100px)' : 'translateX(100px)', 'translateX(0px)');
           enteringToolBar.addAnimation(enteringBackBtnText);
         }
       }
@@ -330,7 +349,7 @@ const iosTransitionAnimation = (navEl, opts) => {
         // leaving content, back direction
         leavingContent
           .beforeClearStyles([OPACITY])
-          .fromTo('transform', `translateX(${CENTER})`, (isRTL ? 'translateX(-100%)' : 'translateX(100%)'));
+          .fromTo('transform', `translateX(${CENTER})`, isRTL ? 'translateX(-100%)' : 'translateX(100%)');
         const leavingPage = getIonPageElement(leavingEl);
         rootAnimation.afterAddWrite(() => {
           if (rootAnimation.getDirection() === 'normal') {
@@ -363,12 +382,12 @@ const iosTransitionAnimation = (navEl, opts) => {
           leavingTransitionShadow
             .addElement(leavingTransitionShadowEl) // REVIEW
             .beforeClearStyles([OPACITY])
-            .fromTo(OPACITY, 0.70, 0.03);
+            .fromTo(OPACITY, 0.7, 0.03);
           leavingTransitionEffect.addAnimation([leavingTransitionCover, leavingTransitionShadow]);
           leavingContent.addAnimation([leavingTransitionEffect]);
         }
       }
-      leavingToolBarEls.forEach(leavingToolBarEl => {
+      leavingToolBarEls.forEach((leavingToolBarEl) => {
         const leavingToolBar = createAnimation();
         leavingToolBar.addElement(leavingToolBarEl);
         const leavingTitle = createAnimation();
@@ -376,8 +395,8 @@ const iosTransitionAnimation = (navEl, opts) => {
         const leavingToolBarButtons = createAnimation();
         const buttons = leavingToolBarEl.querySelectorAll('ion-buttons,[menuToggle]');
         const parentHeader = leavingToolBarEl.closest('ion-header');
-        const inactiveHeader = parentHeader && parentHeader.classList.contains('header-collapse-condense-inactive');
-        const buttonsToAnimate = Array.from(buttons).filter(button => {
+        const inactiveHeader = parentHeader === null || parentHeader === void 0 ? void 0 : parentHeader.classList.contains('header-collapse-condense-inactive');
+        const buttonsToAnimate = Array.from(buttons).filter((button) => {
           const isCollapseButton = button.classList.contains('buttons-collapse');
           return (isCollapseButton && !inactiveHeader) || !isCollapseButton;
         });
@@ -394,7 +413,13 @@ const iosTransitionAnimation = (navEl, opts) => {
         if (backButtonEl) {
           leavingBackButton.addElement(backButtonEl);
         }
-        leavingToolBar.addAnimation([leavingTitle, leavingToolBarButtons, leavingToolBarItems, leavingBackButton, leavingToolBarBg]);
+        leavingToolBar.addAnimation([
+          leavingTitle,
+          leavingToolBarButtons,
+          leavingToolBarItems,
+          leavingBackButton,
+          leavingToolBarBg,
+        ]);
         rootAnimation.addAnimation(leavingToolBar);
         // fade out leaving toolbar items
         leavingBackButton.fromTo(OPACITY, 0.99, 0);
@@ -404,10 +429,10 @@ const iosTransitionAnimation = (navEl, opts) => {
           if (!inactiveHeader) {
             // leaving toolbar, back direction
             leavingTitle
-              .fromTo('transform', `translateX(${CENTER})`, (isRTL ? 'translateX(-100%)' : 'translateX(100%)'))
+              .fromTo('transform', `translateX(${CENTER})`, isRTL ? 'translateX(-100%)' : 'translateX(100%)')
               .fromTo(OPACITY, 0.99, 0);
           }
-          leavingToolBarItems.fromTo('transform', `translateX(${CENTER})`, (isRTL ? 'translateX(-100%)' : 'translateX(100%)'));
+          leavingToolBarItems.fromTo('transform', `translateX(${CENTER})`, isRTL ? 'translateX(-100%)' : 'translateX(100%)');
           leavingToolBarBg.beforeClearStyles([OPACITY, 'transform']);
           // leaving toolbar, back direction, and there's no entering toolbar
           // should just slide out, no fading out
@@ -416,7 +441,7 @@ const iosTransitionAnimation = (navEl, opts) => {
             leavingToolBarBg.fromTo(OPACITY, 'var(--opacity)', 0);
           }
           else {
-            leavingToolBarBg.fromTo('transform', 'translateX(0px)', (isRTL ? 'translateX(-100%)' : 'translateX(100%)'));
+            leavingToolBarBg.fromTo('transform', 'translateX(0px)', isRTL ? 'translateX(-100%)' : 'translateX(100%)');
           }
           if (backButtonEl && !backward) {
             const leavingBackBtnText = createAnimation();

package/dist/components/item-divider.js

@@ -0,0 +1,54 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { g as getIonMode } from './ionic-global.js';
+import { c as createColorClasses } from './theme.js';
+
+const itemDividerIosCss = ":host{--padding-top:0px;--padding-end:0px;--padding-bottom:0px;--padding-start:0px;--inner-padding-top:0px;--inner-padding-end:0px;--inner-padding-bottom:0px;--inner-padding-start:0px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:flex;align-items:center;justify-content:space-between;width:100%;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);overflow:hidden;z-index:100;box-sizing:border-box}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));padding-inline-start:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.item-divider-sticky){position:sticky;top:0}.item-divider-inner{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:var(--inner-padding-start);padding-right:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));padding-top:var(--inner-padding-top);padding-bottom:var(--inner-padding-bottom);display:flex;flex:1;flex-direction:inherit;align-items:inherit;align-self:stretch;min-height:inherit;border:0;overflow:hidden}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.item-divider-inner{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--inner-padding-start);padding-inline-start:var(--inner-padding-start);-webkit-padding-end:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));padding-inline-end:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end))}}.item-divider-wrapper{display:flex;flex:1;flex-direction:inherit;align-items:inherit;align-self:stretch;text-overflow:ellipsis;overflow:hidden}:host{--background:var(--ion-color-step-100, #e6e6e6);--color:var(--ion-color-step-850, #262626);--padding-start:20px;--inner-padding-end:10px;border-radius:0;position:relative;min-height:28px;font-size:17px;font-weight:600}:host([slot=start]){margin-left:0;margin-right:20px;margin-top:2px;margin-bottom:2px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host([slot=start]){margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:20px;margin-inline-end:20px}}:host([slot=end]){margin-left:10px;margin-right:10px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host([slot=end]){margin-left:unset;margin-right:unset;-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px}}::slotted(ion-icon[slot=start]),::slotted(ion-icon[slot=end]){margin-top:7px;margin-bottom:7px}::slotted(h1){margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:24px;font-weight:normal}::slotted(h2){margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:17px;font-weight:normal}::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-left:0;margin-right:0;margin-top:0;margin-bottom:3px;font-size:14px;font-weight:normal;line-height:normal}::slotted(p){margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.4);font-size:14px;line-height:normal;text-overflow:inherit;overflow:inherit}::slotted(h2:last-child) ::slotted(h3:last-child),::slotted(h4:last-child),::slotted(h5:last-child),::slotted(h6:last-child),::slotted(p:last-child){margin-bottom:0}";
+
+const itemDividerMdCss = ":host{--padding-top:0px;--padding-end:0px;--padding-bottom:0px;--padding-start:0px;--inner-padding-top:0px;--inner-padding-end:0px;--inner-padding-bottom:0px;--inner-padding-start:0px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:flex;align-items:center;justify-content:space-between;width:100%;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);overflow:hidden;z-index:100;box-sizing:border-box}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));padding-inline-start:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.item-divider-sticky){position:sticky;top:0}.item-divider-inner{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:var(--inner-padding-start);padding-right:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));padding-top:var(--inner-padding-top);padding-bottom:var(--inner-padding-bottom);display:flex;flex:1;flex-direction:inherit;align-items:inherit;align-self:stretch;min-height:inherit;border:0;overflow:hidden}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.item-divider-inner{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--inner-padding-start);padding-inline-start:var(--inner-padding-start);-webkit-padding-end:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));padding-inline-end:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end))}}.item-divider-wrapper{display:flex;flex:1;flex-direction:inherit;align-items:inherit;align-self:stretch;text-overflow:ellipsis;overflow:hidden}:host{--background:var(--ion-background-color, #fff);--color:var(--ion-color-step-400, #999999);--padding-start:16px;--inner-padding-end:0;min-height:30px;border-bottom:1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));font-size:14px}::slotted([slot=start]){margin-right:32px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted([slot=start]){margin-right:unset;-webkit-margin-end:32px;margin-inline-end:32px}}::slotted([slot=end]){margin-left:32px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted([slot=end]){margin-left:unset;-webkit-margin-start:32px;margin-inline-start:32px}}::slotted(ion-label){margin-left:0;margin-right:0;margin-top:13px;margin-bottom:10px}::slotted(ion-icon){color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);font-size:24px}:host(.ion-color) ::slotted(ion-icon){color:var(--ion-color-contrast)}::slotted(ion-icon[slot]){margin-top:12px;margin-bottom:12px}::slotted(ion-icon[slot=start]){margin-right:32px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-icon[slot=start]){margin-right:unset;-webkit-margin-end:32px;margin-inline-end:32px}}::slotted(ion-icon[slot=end]){margin-left:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-icon[slot=end]){margin-left:unset;-webkit-margin-start:16px;margin-inline-start:16px}}::slotted(ion-note){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;align-self:flex-start;font-size:11px}::slotted(ion-note[slot]){padding-left:0;padding-right:0;padding-top:18px;padding-bottom:10px}::slotted(ion-note[slot=start]){padding-right:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-note[slot=start]){padding-right:unset;-webkit-padding-end:16px;padding-inline-end:16px}}::slotted(ion-note[slot=end]){padding-left:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-note[slot=end]){padding-left:unset;-webkit-padding-start:16px;padding-inline-start:16px}}::slotted(ion-avatar){width:40px;height:40px}::slotted(ion-thumbnail){width:56px;height:56px}::slotted(ion-avatar),::slotted(ion-thumbnail){margin-top:8px;margin-bottom:8px}::slotted(ion-avatar[slot=start]),::slotted(ion-thumbnail[slot=start]){margin-right:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-avatar[slot=start]),::slotted(ion-thumbnail[slot=start]){margin-right:unset;-webkit-margin-end:16px;margin-inline-end:16px}}::slotted(ion-avatar[slot=end]),::slotted(ion-thumbnail[slot=end]){margin-left:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-avatar[slot=end]),::slotted(ion-thumbnail[slot=end]){margin-left:unset;-webkit-margin-start:16px;margin-inline-start:16px}}::slotted(h1){margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:24px;font-weight:normal}::slotted(h2){margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:16px;font-weight:normal}::slotted(h3,h4,h5,h6){margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:14px;font-weight:normal;line-height:normal}::slotted(p){margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;color:var(--ion-color-step-600, #666666);font-size:14px;line-height:normal;text-overflow:inherit;overflow:inherit}";
+
+const ItemDivider = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * When it's set to `true`, the item-divider will stay visible when it reaches the top
+     * of the viewport until the next `ion-item-divider` replaces it.
+     *
+     * This feature relies in `position:sticky`:
+     * https://caniuse.com/#feat=css-sticky
+     */
+    this.sticky = false;
+  }
+  render() {
+    const mode = getIonMode(this);
+    return (h(Host, { class: createColorClasses(this.color, {
+        [mode]: true,
+        'item-divider-sticky': this.sticky,
+        item: true,
+      }) }, h("slot", { name: "start" }), h("div", { class: "item-divider-inner" }, h("div", { class: "item-divider-wrapper" }, h("slot", null)), h("slot", { name: "end" }))));
+  }
+  get el() { return this; }
+  static get style() { return {
+    ios: itemDividerIosCss,
+    md: itemDividerMdCss
+  }; }
+}, [33, "ion-item-divider", {
+    "color": [513],
+    "sticky": [4]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ion-item-divider"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ion-item-divider":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ItemDivider);
+      }
+      break;
+  } });
+}
+
+export { ItemDivider as I, defineCustomElement as d };

package/dist/components/item-group.js

@@ -0,0 +1,41 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { g as getIonMode } from './ionic-global.js';
+
+const itemGroupIosCss = "ion-item-group{display:block}";
+
+const itemGroupMdCss = "ion-item-group{display:block}";
+
+const ItemGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  render() {
+    const mode = getIonMode(this);
+    return (h(Host, { role: "group", class: {
+        [mode]: true,
+        // Used internally for styling
+        [`item-group-${mode}`]: true,
+        item: true,
+      } }));
+  }
+  static get style() { return {
+    ios: itemGroupIosCss,
+    md: itemGroupMdCss
+  }; }
+}, [32, "ion-item-group"]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ion-item-group"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ion-item-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ItemGroup);
+      }
+      break;
+  } });
+}
+
+export { ItemGroup as I, defineCustomElement as d };