@pod-os/elements 0.8.0 → 0.9.0

package/dist/esm/ion-app_25.entry.js

@@ -0,0 +1,3015 @@
+import { r as registerInstance, h, H as Host, c as getElement, d as createEvent, e as readTask, f as forceUpdate, w as writeTask, i as getAssetPath, j as getRenderingRef } from './index-1058e225.js';
+import { g as getIonMode$1, c as config, a as isPlatform } from './ionic-global-a2c7ad8b.js';
+import { h as hasShadowDom, i as inheritAriaAttributes, a as inheritAttributes$1, c as componentOnReady, b as clamp, d as debounceEvent, r as raf } from './helpers-aeff219b.js';
+import { p as printIonWarning } from './index-47f5cd9a.js';
+import { o as openURL, c as createColorClasses$1, h as hostContext } from './theme-7cf2cab0.js';
+import { i as isRTL$1 } from './dir-defb16c6.js';
+import { f as findIonContent, p as printIonContentErrorMsg, g as getScrollElement } from './index-38d8370e.js';
+import { c as createKeyboardController } from './keyboard-controller-33693bc2.js';
+import { a as arrowBackSharp, c as closeCircle, b as closeSharp, s as searchOutline, d as searchSharp } from './index-753825bf.js';
+import { s as store, B as BrokenFile } from './BrokenFile-e1e68cb6.js';
+import { P as PodOS } from './index-5c6f4d9d.js';
+import { s as subscribeResource } from './ResourceAware-845001bb.js';
+import './index-0dbaca1a.js';
+
+const appCss = "html.plt-mobile ion-app{user-select:none}html.plt-mobile ion-app [contenteditable]{user-select:text}ion-app.force-statusbar-padding{--ion-safe-area-top:20px}";
+
+const App = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  componentDidLoad() {
+    {
+      rIC(async () => {
+        const isHybrid = isPlatform(window, 'hybrid');
+        if (!config.getBoolean('_testing')) {
+          import('./index-b212db1c.js').then((module) => module.startTapClick(config));
+        }
+        if (config.getBoolean('statusTap', isHybrid)) {
+          import('./status-tap-ce25f9e5.js').then((module) => module.startStatusTap());
+        }
+        if (config.getBoolean('inputShims', needInputShims())) {
+          /**
+           * needInputShims() ensures that only iOS and Android
+           * platforms proceed into this block.
+           */
+          const platform = isPlatform(window, 'ios') ? 'ios' : 'android';
+          import('./input-shims-167ef062.js').then((module) => module.startInputShims(config, platform));
+        }
+        const hardwareBackButtonModule = await import('./hardware-back-button-242191a7.js');
+        if (config.getBoolean('hardwareBackButton', isHybrid)) {
+          hardwareBackButtonModule.startHardwareBackButton();
+        }
+        else {
+          hardwareBackButtonModule.blockHardwareBackButton();
+        }
+        if (typeof window !== 'undefined') {
+          import('./keyboard-413afe04.js').then((module) => module.startKeyboardAssist(window));
+        }
+        import('./focus-visible-78d55799.js').then((module) => (this.focusVisible = module.startFocusVisible()));
+      });
+    }
+  }
+  /**
+   * @internal
+   * Used to set focus on an element that uses `ion-focusable`.
+   * Do not use this if focusing the element as a result of a keyboard
+   * event as the focus utility should handle this for us. This method
+   * should be used when we want to programmatically focus an element as
+   * a result of another user action. (Ex: We focus the first element
+   * inside of a popover when the user presents it, but the popover is not always
+   * presented as a result of keyboard action.)
+   */
+  async setFocus(elements) {
+    if (this.focusVisible) {
+      this.focusVisible.setFocus(elements);
+    }
+  }
+  render() {
+    const mode = getIonMode$1(this);
+    return (h(Host, { class: {
+        [mode]: true,
+        'ion-page': true,
+        'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),
+      } }));
+  }
+  get el() { return getElement(this); }
+};
+const needInputShims = () => {
+  /**
+   * iOS always needs input shims
+   */
+  const needsShimsIOS = isPlatform(window, 'ios') && isPlatform(window, 'mobile');
+  if (needsShimsIOS) {
+    return true;
+  }
+  /**
+   * Android only needs input shims when running
+   * in the browser and only if the browser is using the
+   * new Chrome 108+ resize behavior: https://developer.chrome.com/blog/viewport-resize-behavior/
+   */
+  const isAndroidMobileWeb = isPlatform(window, 'android') && isPlatform(window, 'mobileweb');
+  if (isAndroidMobileWeb) {
+    return true;
+  }
+  return false;
+};
+const rIC = (callback) => {
+  if ('requestIdleCallback' in window) {
+    window.requestIdleCallback(callback);
+  }
+  else {
+    setTimeout(callback, 32);
+  }
+};
+App.style = appCss;
+
+const buttonIosCss = ":host{--overflow:hidden;--ripple-color:currentColor;--border-width:initial;--border-color:initial;--border-style:initial;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--box-shadow:none;display:inline-block;width:auto;color:var(--color);font-family:var(--ion-font-family, inherit);text-align:center;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;user-select:none;vertical-align:top;vertical-align:-webkit-baseline-middle;font-kerning:none}:host(.button-disabled){cursor:default;opacity:0.5;pointer-events:none}:host(.button-solid){--background:var(--ion-color-primary, #3880ff);--color:var(--ion-color-primary-contrast, #fff)}:host(.button-outline){--border-color:var(--ion-color-primary, #3880ff);--background:transparent;--color:var(--ion-color-primary, #3880ff)}:host(.button-clear){--border-width:0;--background:transparent;--color:var(--ion-color-primary, #3880ff)}:host(.button-block){display:block}:host(.button-block) .button-native{margin-left:0;margin-right:0;display:block;width:100%;clear:both;contain:content}:host(.button-block) .button-native::after{clear:both}:host(.button-full){display:block}:host(.button-full) .button-native{margin-left:0;margin-right:0;display:block;width:100%;contain:content}:host(.button-full:not(.button-round)) .button-native{border-radius:0;border-right-width:0;border-left-width:0}.button-native{border-radius:var(--border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:block;position:relative;width:100%;height:100%;transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);line-height:1;box-shadow:var(--box-shadow);contain:layout style;cursor:pointer;opacity:var(--opacity);overflow:var(--overflow);z-index:0;box-sizing:border-box;appearance:none}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.button-native{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.button-native::-moz-focus-inner{border:0}.button-inner{display:flex;position:relative;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;z-index:1}::slotted(ion-icon){font-size:1.4em;pointer-events:none}::slotted(ion-icon[slot=start]){margin-left:-0.3em;margin-right:0.3em;margin-top:0;margin-bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-icon[slot=start]){margin-left:unset;margin-right:unset;-webkit-margin-start:-0.3em;margin-inline-start:-0.3em;-webkit-margin-end:0.3em;margin-inline-end:0.3em}}::slotted(ion-icon[slot=end]){margin-left:0.3em;margin-right:-0.2em;margin-top:0;margin-bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-icon[slot=end]){margin-left:unset;margin-right:unset;-webkit-margin-start:0.3em;margin-inline-start:0.3em;-webkit-margin-end:-0.2em;margin-inline-end:-0.2em}}::slotted(ion-icon[slot=icon-only]){font-size:1.8em}ion-ripple-effect{color:var(--ripple-color)}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}:host(.ion-activated){color:var(--color-activated)}:host(.ion-activated) .button-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}:host(.ion-focused){color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}@media (any-hover: hover){:host(:hover){color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}:host(.button-solid.ion-color) .button-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.button-outline.ion-color) .button-native{border-color:var(--ion-color-base);background:transparent;color:var(--ion-color-base)}:host(.button-clear.ion-color) .button-native{background:transparent;color:var(--ion-color-base)}:host(.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{color:var(--ion-toolbar-color, var(--color))}:host(.button-outline.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{border-color:var(--ion-toolbar-color, var(--color, var(--border-color)))}:host(.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{background:var(--ion-toolbar-color, var(--background));color:var(--ion-toolbar-background, var(--color))}:host{--border-radius:10px;--padding-top:0;--padding-bottom:0;--padding-start:1em;--padding-end:1em;--transition:background-color, opacity 100ms linear;margin-left:2px;margin-right:2px;margin-top:4px;margin-bottom:4px;height:2.8em;font-size:16px;font-weight:500;letter-spacing:-0.03em}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{margin-left:unset;margin-right:unset;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px}}:host(.button-solid){--background-activated:var(--ion-color-primary-shade, #3171e0);--background-focused:var(--ion-color-primary-shade, #3171e0);--background-hover:var(--ion-color-primary-tint, #4c8dff);--background-activated-opacity:1;--background-focused-opacity:1;--background-hover-opacity:1}:host(.button-outline){--border-radius:10px;--border-width:1px;--border-style:solid;--background-activated:var(--ion-color-primary, #3880ff);--background-focused:var(--ion-color-primary, #3880ff);--background-hover:transparent;--background-focused-opacity:.1;--color-activated:var(--ion-color-primary-contrast, #fff)}:host(.button-clear){--background-activated:transparent;--background-focused:var(--ion-color-primary, #3880ff);--background-hover:transparent;--background-focused-opacity:.1;font-size:17px;font-weight:normal;letter-spacing:0}:host(.button-large){--border-radius:12px;--padding-top:0;--padding-start:1em;--padding-end:1em;--padding-bottom:0;height:2.8em;font-size:20px}:host(.button-small){--border-radius:6px;--padding-top:0;--padding-start:0.9em;--padding-end:0.9em;--padding-bottom:0;height:2.1em;font-size:13px}:host(.button-round){--border-radius:64px;--padding-top:0;--padding-start:26px;--padding-end:26px;--padding-bottom:0}:host(.button-strong){font-weight:600}:host(.button-clear.ion-activated){opacity:0.4}:host(.button-outline.ion-activated.ion-color) .button-native{color:var(--ion-color-contrast)}:host(.button-outline.ion-activated.ion-color) .button-native::after{background:var(--ion-color-base)}:host(.button-solid.ion-color.ion-activated) .button-native::after{background:var(--ion-color-shade)}:host(.button-outline.ion-focused.ion-color) .button-native,:host(.button-clear.ion-focused.ion-color) .button-native{color:var(--ion-color-base)}:host(.button-outline.ion-focused.ion-color) .button-native::after,:host(.button-clear.ion-focused.ion-color) .button-native::after{background:var(--ion-color-base)}:host(.button-solid.ion-color.ion-focused) .button-native::after{background:var(--ion-color-shade)}@media (any-hover: hover){:host(.button-clear:hover),:host(.button-outline:hover){opacity:0.6}:host(.button-clear.ion-color:hover) .button-native,:host(.button-outline.ion-color:hover) .button-native{color:var(--ion-color-base)}:host(.button-clear.ion-color:hover) .button-native::after,:host(.button-outline.ion-color:hover) .button-native::after{background:transparent}:host(.button-solid.ion-color:hover) .button-native::after{background:var(--ion-color-tint)}:host(:hover.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native::after{background:#fff;opacity:0.1}}";
+
+const buttonMdCss = ":host{--overflow:hidden;--ripple-color:currentColor;--border-width:initial;--border-color:initial;--border-style:initial;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--box-shadow:none;display:inline-block;width:auto;color:var(--color);font-family:var(--ion-font-family, inherit);text-align:center;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;user-select:none;vertical-align:top;vertical-align:-webkit-baseline-middle;font-kerning:none}:host(.button-disabled){cursor:default;opacity:0.5;pointer-events:none}:host(.button-solid){--background:var(--ion-color-primary, #3880ff);--color:var(--ion-color-primary-contrast, #fff)}:host(.button-outline){--border-color:var(--ion-color-primary, #3880ff);--background:transparent;--color:var(--ion-color-primary, #3880ff)}:host(.button-clear){--border-width:0;--background:transparent;--color:var(--ion-color-primary, #3880ff)}:host(.button-block){display:block}:host(.button-block) .button-native{margin-left:0;margin-right:0;display:block;width:100%;clear:both;contain:content}:host(.button-block) .button-native::after{clear:both}:host(.button-full){display:block}:host(.button-full) .button-native{margin-left:0;margin-right:0;display:block;width:100%;contain:content}:host(.button-full:not(.button-round)) .button-native{border-radius:0;border-right-width:0;border-left-width:0}.button-native{border-radius:var(--border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:block;position:relative;width:100%;height:100%;transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);line-height:1;box-shadow:var(--box-shadow);contain:layout style;cursor:pointer;opacity:var(--opacity);overflow:var(--overflow);z-index:0;box-sizing:border-box;appearance:none}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.button-native{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.button-native::-moz-focus-inner{border:0}.button-inner{display:flex;position:relative;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;z-index:1}::slotted(ion-icon){font-size:1.4em;pointer-events:none}::slotted(ion-icon[slot=start]){margin-left:-0.3em;margin-right:0.3em;margin-top:0;margin-bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-icon[slot=start]){margin-left:unset;margin-right:unset;-webkit-margin-start:-0.3em;margin-inline-start:-0.3em;-webkit-margin-end:0.3em;margin-inline-end:0.3em}}::slotted(ion-icon[slot=end]){margin-left:0.3em;margin-right:-0.2em;margin-top:0;margin-bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-icon[slot=end]){margin-left:unset;margin-right:unset;-webkit-margin-start:0.3em;margin-inline-start:0.3em;-webkit-margin-end:-0.2em;margin-inline-end:-0.2em}}::slotted(ion-icon[slot=icon-only]){font-size:1.8em}ion-ripple-effect{color:var(--ripple-color)}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}:host(.ion-activated){color:var(--color-activated)}:host(.ion-activated) .button-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}:host(.ion-focused){color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}@media (any-hover: hover){:host(:hover){color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}:host(.button-solid.ion-color) .button-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.button-outline.ion-color) .button-native{border-color:var(--ion-color-base);background:transparent;color:var(--ion-color-base)}:host(.button-clear.ion-color) .button-native{background:transparent;color:var(--ion-color-base)}:host(.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{color:var(--ion-toolbar-color, var(--color))}:host(.button-outline.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{border-color:var(--ion-toolbar-color, var(--color, var(--border-color)))}:host(.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{background:var(--ion-toolbar-color, var(--background));color:var(--ion-toolbar-background, var(--color))}:host{--border-radius:4px;--padding-top:0;--padding-bottom:0;--padding-start:1.1em;--padding-end:1.1em;--transition:box-shadow 280ms cubic-bezier(.4, 0, .2, 1),\n                background-color 15ms linear,\n                color 15ms linear;margin-left:2px;margin-right:2px;margin-top:4px;margin-bottom:4px;height:36px;font-size:14px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{margin-left:unset;margin-right:unset;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px}}:host(.button-solid){--background-activated:transparent;--background-hover:var(--ion-color-primary-contrast, #fff);--background-focused:var(--ion-color-primary-contrast, #fff);--background-activated-opacity:0;--background-focused-opacity:.24;--background-hover-opacity:.08;--box-shadow:0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)}:host(.button-solid.ion-activated){--box-shadow:0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12)}:host(.button-outline){--border-width:2px;--border-style:solid;--box-shadow:none;--background-activated:transparent;--background-focused:var(--ion-color-primary, #3880ff);--background-hover:var(--ion-color-primary, #3880ff);--background-activated-opacity:0;--background-focused-opacity:.12;--background-hover-opacity:.04}:host(.button-outline.ion-activated.ion-color) .button-native{background:transparent}:host(.button-clear){--background-activated:transparent;--background-focused:var(--ion-color-primary, #3880ff);--background-hover:var(--ion-color-primary, #3880ff);--background-activated-opacity:0;--background-focused-opacity:.12;--background-hover-opacity:.04}:host(.button-round){--border-radius:64px;--padding-top:0;--padding-start:26px;--padding-end:26px;--padding-bottom:0}:host(.button-large){--padding-top:0;--padding-start:1em;--padding-end:1em;--padding-bottom:0;height:2.8em;font-size:20px}:host(.button-small){--padding-top:0;--padding-start:0.9em;--padding-end:0.9em;--padding-bottom:0;height:2.1em;font-size:13px}:host(.button-strong){font-weight:bold}::slotted(ion-icon[slot=icon-only]){padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host(.button-solid.ion-color.ion-focused) .button-native::after{background:var(--ion-color-contrast)}:host(.button-clear.ion-color.ion-focused) .button-native::after,:host(.button-outline.ion-color.ion-focused) .button-native::after{background:var(--ion-color-base)}@media (any-hover: hover){:host(.button-solid.ion-color:hover) .button-native::after{background:var(--ion-color-contrast)}:host(.button-clear.ion-color:hover) .button-native::after,:host(.button-outline.ion-color:hover) .button-native::after{background:var(--ion-color-base)}}";
+
+const Button = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ionFocus = createEvent(this, "ionFocus", 7);
+    this.ionBlur = createEvent(this, "ionBlur", 7);
+    this.inItem = false;
+    this.inListHeader = false;
+    this.inToolbar = false;
+    this.inheritedAttributes = {};
+    /**
+     * The type of button.
+     */
+    this.buttonType = 'button';
+    /**
+     * If `true`, the user cannot interact with the button.
+     */
+    this.disabled = false;
+    /**
+     * When using a router, it specifies the transition direction when navigating to
+     * another page using `href`.
+     */
+    this.routerDirection = 'forward';
+    /**
+     * If `true`, activates a button with a heavier font weight.
+     */
+    this.strong = false;
+    /**
+     * The type of the button.
+     */
+    this.type = 'button';
+    this.handleClick = (ev) => {
+      const { el } = this;
+      if (this.type === 'button') {
+        openURL(this.href, ev, this.routerDirection, this.routerAnimation);
+      }
+      else if (hasShadowDom(el)) {
+        // this button wants to specifically submit a form
+        // climb up the dom to see if we're in a <form>
+        // and if so, then use JS to submit it
+        let formEl = this.findForm();
+        const { form } = this;
+        if (!formEl && form !== undefined) {
+          /**
+           * The developer specified a form selector for
+           * the button to submit, but it was not found.
+           */
+          if (typeof form === 'string') {
+            printIonWarning(`Form with selector: "#${form}" could not be found. Verify that the id is correct and the form is rendered in the DOM.`, el);
+          }
+          else {
+            printIonWarning(`The provided "form" element is invalid. Verify that the form is a HTMLFormElement and rendered in the DOM.`, el);
+          }
+          return;
+        }
+        if (!formEl) {
+          /**
+           * If the form element is not set, the button may be inside
+           * of a form element. Query the closest form element to the button.
+           */
+          formEl = el.closest('form');
+        }
+        if (formEl) {
+          ev.preventDefault();
+          const fakeButton = document.createElement('button');
+          fakeButton.type = this.type;
+          fakeButton.style.display = 'none';
+          formEl.appendChild(fakeButton);
+          fakeButton.click();
+          fakeButton.remove();
+        }
+      }
+    };
+    this.onFocus = () => {
+      this.ionFocus.emit();
+    };
+    this.onBlur = () => {
+      this.ionBlur.emit();
+    };
+  }
+  componentWillLoad() {
+    this.inToolbar = !!this.el.closest('ion-buttons');
+    this.inListHeader = !!this.el.closest('ion-list-header');
+    this.inItem = !!this.el.closest('ion-item') || !!this.el.closest('ion-item-divider');
+    this.inheritedAttributes = inheritAriaAttributes(this.el);
+  }
+  get hasIconOnly() {
+    return !!this.el.querySelector('[slot="icon-only"]');
+  }
+  get rippleType() {
+    const hasClearFill = this.fill === undefined || this.fill === 'clear';
+    // If the button is in a toolbar, has a clear fill (which is the default)
+    // and only has an icon we use the unbounded "circular" ripple effect
+    if (hasClearFill && this.hasIconOnly && this.inToolbar) {
+      return 'unbounded';
+    }
+    return 'bounded';
+  }
+  /**
+   * Finds the form element based on the provided `form` selector
+   * or element reference provided.
+   */
+  findForm() {
+    const { form } = this;
+    if (form instanceof HTMLFormElement) {
+      return form;
+    }
+    if (typeof form === 'string') {
+      const el = document.getElementById(form);
+      if (el instanceof HTMLFormElement) {
+        return el;
+      }
+    }
+    return null;
+  }
+  render() {
+    const mode = getIonMode$1(this);
+    const { buttonType, type, disabled, rel, target, size, href, color, expand, hasIconOnly, shape, strong, inheritedAttributes, } = this;
+    const finalSize = size === undefined && this.inItem ? 'small' : size;
+    const TagType = href === undefined ? 'button' : 'a';
+    const attrs = TagType === 'button'
+      ? { type }
+      : {
+        download: this.download,
+        href,
+        rel,
+        target,
+      };
+    let fill = this.fill;
+    /**
+     * We check both undefined and null to
+     * work around https://github.com/ionic-team/stencil/issues/3586.
+     */
+    if (fill == null) {
+      fill = this.inToolbar || this.inListHeader ? 'clear' : 'solid';
+    }
+    return (h(Host, { onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses$1(color, {
+        [mode]: true,
+        [buttonType]: true,
+        [`${buttonType}-${expand}`]: expand !== undefined,
+        [`${buttonType}-${finalSize}`]: finalSize !== undefined,
+        [`${buttonType}-${shape}`]: shape !== undefined,
+        [`${buttonType}-${fill}`]: true,
+        [`${buttonType}-strong`]: strong,
+        'in-toolbar': hostContext('ion-toolbar', this.el),
+        'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
+        'button-has-icon-only': hasIconOnly,
+        'button-disabled': disabled,
+        'ion-activatable': true,
+        'ion-focusable': true,
+      }) }, h(TagType, Object.assign({}, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("span", { class: "button-inner" }, h("slot", { name: "icon-only" }), h("slot", { name: "start" }), h("slot", null), h("slot", { name: "end" })), mode === 'md' && h("ion-ripple-effect", { type: this.rippleType }))));
+  }
+  get el() { return getElement(this); }
+};
+Button.style = {
+  ios: buttonIosCss,
+  md: buttonMdCss
+};
+
+const cardIosCss = ":host{--ion-safe-area-left:0px;--ion-safe-area-right:0px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);overflow:hidden}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.card-disabled){cursor:default;opacity:0.3;pointer-events:none}.card-native{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;min-height:var(--min-height);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:inherit}.card-native::-moz-focus-inner{border:0}button,a{cursor:pointer;user-select:none;-webkit-user-drag:none}ion-ripple-effect{color:var(--ripple-color)}:host{--background:var(--ion-card-background, var(--ion-item-background, var(--ion-background-color, #fff)));--color:var(--ion-card-color, var(--ion-item-color, var(--ion-color-step-600, #666666)));margin-left:16px;margin-right:16px;margin-top:24px;margin-bottom:24px;border-radius:8px;transition:transform 500ms cubic-bezier(0.12, 0.72, 0.29, 1);font-size:14px;box-shadow:0 4px 16px rgba(0, 0, 0, 0.12)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{margin-left:unset;margin-right:unset;-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px}}:host(.ion-activated){transform:scale3d(0.97, 0.97, 1)}";
+
+const cardMdCss = ":host{--ion-safe-area-left:0px;--ion-safe-area-right:0px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);overflow:hidden}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.card-disabled){cursor:default;opacity:0.3;pointer-events:none}.card-native{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;min-height:var(--min-height);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:inherit}.card-native::-moz-focus-inner{border:0}button,a{cursor:pointer;user-select:none;-webkit-user-drag:none}ion-ripple-effect{color:var(--ripple-color)}:host{--background:var(--ion-card-background, var(--ion-item-background, var(--ion-background-color, #fff)));--color:var(--ion-card-color, var(--ion-item-color, var(--ion-color-step-550, #737373)));margin-left:10px;margin-right:10px;margin-top:10px;margin-bottom:10px;border-radius:4px;font-size:14px;box-shadow:0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{margin-left:unset;margin-right:unset;-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px}}";
+
+const Card = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.inheritedAriaAttributes = {};
+    /**
+     * If `true`, a button tag will be rendered and the card will be tappable.
+     */
+    this.button = false;
+    /**
+     * The type of the button. Only used when an `onclick` or `button` property is present.
+     */
+    this.type = 'button';
+    /**
+     * If `true`, the user cannot interact with the card.
+     */
+    this.disabled = false;
+    /**
+     * When using a router, it specifies the transition direction when navigating to
+     * another page using `href`.
+     */
+    this.routerDirection = 'forward';
+  }
+  componentWillLoad() {
+    this.inheritedAriaAttributes = inheritAttributes$1(this.el, ['aria-label']);
+  }
+  isClickable() {
+    return this.href !== undefined || this.button;
+  }
+  renderCard(mode) {
+    const clickable = this.isClickable();
+    if (!clickable) {
+      return [h("slot", null)];
+    }
+    const { href, routerAnimation, routerDirection, inheritedAriaAttributes } = this;
+    const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div';
+    const attrs = TagType === 'button'
+      ? { type: this.type }
+      : {
+        download: this.download,
+        href: this.href,
+        rel: this.rel,
+        target: this.target,
+      };
+    return (h(TagType, Object.assign({}, attrs, inheritedAriaAttributes, { class: "card-native", part: "native", disabled: this.disabled, onClick: (ev) => openURL(href, ev, routerDirection, routerAnimation) }), h("slot", null), clickable && mode === 'md' && h("ion-ripple-effect", null)));
+  }
+  render() {
+    const mode = getIonMode$1(this);
+    return (h(Host, { class: createColorClasses$1(this.color, {
+        [mode]: true,
+        'card-disabled': this.disabled,
+        'ion-activatable': this.isClickable(),
+      }) }, this.renderCard(mode)));
+  }
+  get el() { return getElement(this); }
+};
+Card.style = {
+  ios: cardIosCss,
+  md: cardMdCss
+};
+
+const cardContentIosCss = "ion-card-content{display:block;position:relative}.card-content-ios{padding-left:20px;padding-right:20px;padding-top:20px;padding-bottom:20px;font-size:16px;line-height:1.4}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.card-content-ios{padding-left:unset;padding-right:unset;-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px}}.card-content-ios h1{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:24px;font-weight:normal}.card-content-ios h2{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:16px;font-weight:normal}.card-content-ios h3,.card-content-ios h4,.card-content-ios h5,.card-content-ios h6{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:14px;font-weight:normal}.card-content-ios p{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:14px}ion-card-header+.card-content-ios{padding-top:0}";
+
+const cardContentMdCss = "ion-card-content{display:block;position:relative}.card-content-md{padding-left:16px;padding-right:16px;padding-top:13px;padding-bottom:13px;font-size:14px;line-height:1.5}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.card-content-md{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}.card-content-md h1{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:24px;font-weight:normal}.card-content-md h2{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:16px;font-weight:normal}.card-content-md h3,.card-content-md h4,.card-content-md h5,.card-content-md h6{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:14px;font-weight:normal}.card-content-md p{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:14px;font-weight:normal;line-height:1.5}ion-card-header+.card-content-md{padding-top:0}";
+
+const CardContent = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    const mode = getIonMode$1(this);
+    return (h(Host, { class: {
+        [mode]: true,
+        // Used internally for styling
+        [`card-content-${mode}`]: true,
+      } }));
+  }
+};
+CardContent.style = {
+  ios: cardContentIosCss,
+  md: cardContentMdCss
+};
+
+const cardHeaderIosCss = ":host{--background:transparent;--color:inherit;display:block;position:relative;background:var(--background);color:var(--color)}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host{padding-left:20px;padding-right:20px;padding-top:20px;padding-bottom:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px}}@supports (backdrop-filter: blur(0)){:host(.card-header-translucent){background-color:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.9);backdrop-filter:saturate(180%) blur(30px)}}";
+
+const cardHeaderMdCss = ":host{--background:transparent;--color:inherit;display:block;position:relative;background:var(--background);color:var(--color)}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host{padding-left:16px;padding-right:16px;padding-top:16px;padding-bottom:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}::slotted(ion-card-title:not(:first-child)),::slotted(ion-card-subtitle:not(:first-child)){margin-top:8px}";
+
+const CardHeader = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * If `true`, the card header will be translucent.
+     * Only applies when the mode is `"ios"` and the device supports
+     * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
+     */
+    this.translucent = false;
+  }
+  render() {
+    const mode = getIonMode$1(this);
+    return (h(Host, { class: createColorClasses$1(this.color, {
+        'card-header-translucent': this.translucent,
+        'ion-inherit-color': true,
+        [mode]: true,
+      }) }, h("slot", null)));
+  }
+};
+CardHeader.style = {
+  ios: cardHeaderIosCss,
+  md: cardHeaderMdCss
+};
+
+const contentCss = ":host{--background:var(--ion-background-color, #fff);--color:var(--ion-text-color, #000);--padding-top:0px;--padding-bottom:0px;--padding-start:0px;--padding-end:0px;--keyboard-offset:0px;--offset-top:0px;--offset-bottom:0px;--overflow:auto;display:block;position:relative;flex:1;width:100%;height:100%;margin:0 !important;padding:0 !important;font-family:var(--ion-font-family, inherit);contain:size style}:host(.ion-color) .inner-scroll{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.outer-content){--background:var(--ion-color-step-50, #f2f2f2)}#background-content{left:0px;right:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);position:absolute;background:var(--background)}.inner-scroll{left:0px;right:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:calc(var(--padding-top) + var(--offset-top));padding-bottom:calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom));position:absolute;color:var(--color);box-sizing:border-box;overflow:hidden;touch-action:pan-x pan-y pinch-zoom}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.inner-scroll{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.scroll-y,.scroll-x{-webkit-overflow-scrolling:touch;z-index:0;will-change:scroll-position}.scroll-y{overflow-y:var(--overflow);overscroll-behavior-y:contain}.scroll-x{overflow-x:var(--overflow);overscroll-behavior-x:contain}.overscroll::before,.overscroll::after{position:absolute;width:1px;height:1px;content:\"\"}.overscroll::before{bottom:-1px}.overscroll::after{top:-1px}:host(.content-sizing){display:flex;flex-direction:column;min-height:0;contain:none}:host(.content-sizing) .inner-scroll{position:relative;top:0;bottom:0;margin-top:calc(var(--offset-top) * -1);margin-bottom:calc(var(--offset-bottom) * -1)}.transition-effect{display:none;position:absolute;width:100%;height:100vh;opacity:0;pointer-events:none}:host(.content-ltr) .transition-effect{left:-100%;}:host(.content-rtl) .transition-effect{right:-100%;}.transition-cover{position:absolute;right:0;width:100%;height:100%;background:black;opacity:0.1}.transition-shadow{display:block;position:absolute;width:10px;height:100%;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAgCAYAAAAIXrg4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTE3MDgzRkQ5QTkyMTFFOUEwNzQ5MkJFREE1NUY2MjQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTE3MDgzRkU5QTkyMTFFOUEwNzQ5MkJFREE1NUY2MjQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxMTcwODNGQjlBOTIxMUU5QTA3NDkyQkVEQTU1RjYyNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxMTcwODNGQzlBOTIxMUU5QTA3NDkyQkVEQTU1RjYyNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PmePEuQAAABNSURBVHjaYvz//z8DIxAwMDAwATGMhmFmPDQuOSZks0AMmoJBaQHjkPfB0Lfg/2gQjVow+HPy/yHvg9GiYjQfjMbBqAWjFgy/4hogwADYqwdzxy5BuwAAAABJRU5ErkJggg==);background-repeat:repeat-y;background-size:10px 16px}:host(.content-ltr) .transition-shadow{right:0;}:host(.content-rtl) .transition-shadow{left:0;transform:scaleX(-1)}::slotted([slot=fixed]){position:absolute;transform:translateZ(0)}";
+
+const Content = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ionScrollStart = createEvent(this, "ionScrollStart", 7);
+    this.ionScroll = createEvent(this, "ionScroll", 7);
+    this.ionScrollEnd = createEvent(this, "ionScrollEnd", 7);
+    this.isScrolling = false;
+    this.lastScroll = 0;
+    this.queued = false;
+    this.cTop = -1;
+    this.cBottom = -1;
+    this.isMainContent = true;
+    // Detail is used in a hot loop in the scroll event, by allocating it here
+    // V8 will be able to inline any read/write to it since it's a monomorphic class.
+    // https://mrale.ph/blog/2015/01/11/whats-up-with-monomorphism.html
+    this.detail = {
+      scrollTop: 0,
+      scrollLeft: 0,
+      type: 'scroll',
+      event: undefined,
+      startX: 0,
+      startY: 0,
+      startTime: 0,
+      currentX: 0,
+      currentY: 0,
+      velocityX: 0,
+      velocityY: 0,
+      deltaX: 0,
+      deltaY: 0,
+      currentTime: 0,
+      data: undefined,
+      isScrolling: true,
+    };
+    /**
+     * If `true`, the content will scroll behind the headers
+     * and footers. This effect can easily be seen by setting the toolbar
+     * to transparent.
+     */
+    this.fullscreen = false;
+    /**
+     * If you want to enable the content scrolling in the X axis, set this property to `true`.
+     */
+    this.scrollX = false;
+    /**
+     * If you want to disable the content scrolling in the Y axis, set this property to `false`.
+     */
+    this.scrollY = true;
+    /**
+     * Because of performance reasons, ionScroll events are disabled by default, in order to enable them
+     * and start listening from (ionScroll), set this property to `true`.
+     */
+    this.scrollEvents = false;
+  }
+  connectedCallback() {
+    this.isMainContent = this.el.closest('ion-menu, ion-popover, ion-modal') === null;
+  }
+  disconnectedCallback() {
+    this.onScrollEnd();
+  }
+  onAppLoad() {
+    this.resize();
+  }
+  shouldForceOverscroll() {
+    const { forceOverscroll } = this;
+    const mode = getIonMode$1(this);
+    return forceOverscroll === undefined ? mode === 'ios' && isPlatform('ios') : forceOverscroll;
+  }
+  resize() {
+    if (this.fullscreen) {
+      readTask(() => this.readDimensions());
+    }
+    else if (this.cTop !== 0 || this.cBottom !== 0) {
+      this.cTop = this.cBottom = 0;
+      forceUpdate(this);
+    }
+  }
+  readDimensions() {
+    const page = getPageElement(this.el);
+    const top = Math.max(this.el.offsetTop, 0);
+    const bottom = Math.max(page.offsetHeight - top - this.el.offsetHeight, 0);
+    const dirty = top !== this.cTop || bottom !== this.cBottom;
+    if (dirty) {
+      this.cTop = top;
+      this.cBottom = bottom;
+      forceUpdate(this);
+    }
+  }
+  onScroll(ev) {
+    const timeStamp = Date.now();
+    const shouldStart = !this.isScrolling;
+    this.lastScroll = timeStamp;
+    if (shouldStart) {
+      this.onScrollStart();
+    }
+    if (!this.queued && this.scrollEvents) {
+      this.queued = true;
+      readTask((ts) => {
+        this.queued = false;
+        this.detail.event = ev;
+        updateScrollDetail(this.detail, this.scrollEl, ts, shouldStart);
+        this.ionScroll.emit(this.detail);
+      });
+    }
+  }
+  /**
+   * Get the element where the actual scrolling takes place.
+   * This element can be used to subscribe to `scroll` events or manually modify
+   * `scrollTop`. However, it's recommended to use the API provided by `ion-content`:
+   *
+   * i.e. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events
+   * and `scrollToPoint()` to scroll the content into a certain point.
+   */
+  async getScrollElement() {
+    /**
+     * If this gets called in certain early lifecycle hooks (ex: Vue onMounted),
+     * scrollEl won't be defined yet with the custom elements build, so wait for it to load in.
+     */
+    if (!this.scrollEl) {
+      await new Promise((resolve) => componentOnReady(this.el, resolve));
+    }
+    return Promise.resolve(this.scrollEl);
+  }
+  /**
+   * Returns the background content element.
+   * @internal
+   */
+  async getBackgroundElement() {
+    if (!this.backgroundContentEl) {
+      await new Promise((resolve) => componentOnReady(this.el, resolve));
+    }
+    return Promise.resolve(this.backgroundContentEl);
+  }
+  /**
+   * Scroll to the top of the component.
+   *
+   * @param duration The amount of time to take scrolling to the top. Defaults to `0`.
+   */
+  scrollToTop(duration = 0) {
+    return this.scrollToPoint(undefined, 0, duration);
+  }
+  /**
+   * Scroll to the bottom of the component.
+   *
+   * @param duration The amount of time to take scrolling to the bottom. Defaults to `0`.
+   */
+  async scrollToBottom(duration = 0) {
+    const scrollEl = await this.getScrollElement();
+    const y = scrollEl.scrollHeight - scrollEl.clientHeight;
+    return this.scrollToPoint(undefined, y, duration);
+  }
+  /**
+   * Scroll by a specified X/Y distance in the component.
+   *
+   * @param x The amount to scroll by on the horizontal axis.
+   * @param y The amount to scroll by on the vertical axis.
+   * @param duration The amount of time to take scrolling by that amount.
+   */
+  async scrollByPoint(x, y, duration) {
+    const scrollEl = await this.getScrollElement();
+    return this.scrollToPoint(x + scrollEl.scrollLeft, y + scrollEl.scrollTop, duration);
+  }
+  /**
+   * Scroll to a specified X/Y location in the component.
+   *
+   * @param x The point to scroll to on the horizontal axis.
+   * @param y The point to scroll to on the vertical axis.
+   * @param duration The amount of time to take scrolling to that point. Defaults to `0`.
+   */
+  async scrollToPoint(x, y, duration = 0) {
+    const el = await this.getScrollElement();
+    if (duration < 32) {
+      if (y != null) {
+        el.scrollTop = y;
+      }
+      if (x != null) {
+        el.scrollLeft = x;
+      }
+      return;
+    }
+    let resolve;
+    let startTime = 0;
+    const promise = new Promise((r) => (resolve = r));
+    const fromY = el.scrollTop;
+    const fromX = el.scrollLeft;
+    const deltaY = y != null ? y - fromY : 0;
+    const deltaX = x != null ? x - fromX : 0;
+    // scroll loop
+    const step = (timeStamp) => {
+      const linearTime = Math.min(1, (timeStamp - startTime) / duration) - 1;
+      const easedT = Math.pow(linearTime, 3) + 1;
+      if (deltaY !== 0) {
+        el.scrollTop = Math.floor(easedT * deltaY + fromY);
+      }
+      if (deltaX !== 0) {
+        el.scrollLeft = Math.floor(easedT * deltaX + fromX);
+      }
+      if (easedT < 1) {
+        // do not use DomController here
+        // must use nativeRaf in order to fire in the next frame
+        requestAnimationFrame(step);
+      }
+      else {
+        resolve();
+      }
+    };
+    // chill out for a frame first
+    requestAnimationFrame((ts) => {
+      startTime = ts;
+      step(ts);
+    });
+    return promise;
+  }
+  onScrollStart() {
+    this.isScrolling = true;
+    this.ionScrollStart.emit({
+      isScrolling: true,
+    });
+    if (this.watchDog) {
+      clearInterval(this.watchDog);
+    }
+    // watchdog
+    this.watchDog = setInterval(() => {
+      if (this.lastScroll < Date.now() - 120) {
+        this.onScrollEnd();
+      }
+    }, 100);
+  }
+  onScrollEnd() {
+    clearInterval(this.watchDog);
+    this.watchDog = null;
+    if (this.isScrolling) {
+      this.isScrolling = false;
+      this.ionScrollEnd.emit({
+        isScrolling: false,
+      });
+    }
+  }
+  render() {
+    const { isMainContent, scrollX, scrollY, el } = this;
+    const rtl = isRTL$1(el) ? 'rtl' : 'ltr';
+    const mode = getIonMode$1(this);
+    const forceOverscroll = this.shouldForceOverscroll();
+    const transitionShadow = mode === 'ios';
+    const TagType = isMainContent ? 'main' : 'div';
+    this.resize();
+    return (h(Host, { class: createColorClasses$1(this.color, {
+        [mode]: true,
+        'content-sizing': hostContext('ion-popover', this.el),
+        overscroll: forceOverscroll,
+        [`content-${rtl}`]: true,
+      }), style: {
+        '--offset-top': `${this.cTop}px`,
+        '--offset-bottom': `${this.cBottom}px`,
+      } }, h("div", { ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), h(TagType, { class: {
+        'inner-scroll': true,
+        'scroll-x': scrollX,
+        'scroll-y': scrollY,
+        overscroll: (scrollX || scrollY) && forceOverscroll,
+      }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", null)), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, h("slot", { name: "fixed" })));
+  }
+  get el() { return getElement(this); }
+};
+const getParentElement = (el) => {
+  var _a;
+  if (el.parentElement) {
+    // normal element with a parent element
+    return el.parentElement;
+  }
+  if ((_a = el.parentNode) === null || _a === void 0 ? void 0 : _a.host) {
+    // shadow dom's document fragment
+    return el.parentNode.host;
+  }
+  return null;
+};
+const getPageElement = (el) => {
+  const tabs = el.closest('ion-tabs');
+  if (tabs) {
+    return tabs;
+  }
+  /**
+   * If we're in a popover, we need to use its wrapper so we can account for space
+   * between the popover and the edges of the screen. But if the popover contains
+   * its own page element, we should use that instead.
+   */
+  const page = el.closest('ion-app, ion-page, .ion-page, page-inner, .popover-content');
+  if (page) {
+    return page;
+  }
+  return getParentElement(el);
+};
+// ******** DOM READ ****************
+const updateScrollDetail = (detail, el, timestamp, shouldStart) => {
+  const prevX = detail.currentX;
+  const prevY = detail.currentY;
+  const prevT = detail.currentTime;
+  const currentX = el.scrollLeft;
+  const currentY = el.scrollTop;
+  const timeDelta = timestamp - prevT;
+  if (shouldStart) {
+    // remember the start positions
+    detail.startTime = timestamp;
+    detail.startX = currentX;
+    detail.startY = currentY;
+    detail.velocityX = detail.velocityY = 0;
+  }
+  detail.currentTime = timestamp;
+  detail.currentX = detail.scrollLeft = currentX;
+  detail.currentY = detail.scrollTop = currentY;
+  detail.deltaX = currentX - detail.startX;
+  detail.deltaY = currentY - detail.startY;
+  if (timeDelta > 0 && timeDelta < 100) {
+    const velocityX = (currentX - prevX) / timeDelta;
+    const velocityY = (currentY - prevY) / timeDelta;
+    detail.velocityX = velocityX * 0.7 + detail.velocityX * 0.3;
+    detail.velocityY = velocityY * 0.7 + detail.velocityY * 0.3;
+  }
+};
+Content.style = contentCss;
+
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+const handleFooterFade = (scrollEl, baseEl) => {
+  readTask(() => {
+    const scrollTop = scrollEl.scrollTop;
+    const maxScroll = scrollEl.scrollHeight - scrollEl.clientHeight;
+    /**
+     * Toolbar background will fade
+     * out over fadeDuration in pixels.
+     */
+    const fadeDuration = 10;
+    /**
+     * Begin fading out maxScroll - 30px
+     * from the bottom of the content.
+     * Also determine how close we are
+     * to starting the fade. If we are
+     * before the starting point, the
+     * scale value will get clamped to 0.
+     * If we are after the maxScroll (rubber
+     * band scrolling), the scale value will
+     * get clamped to 1.
+     */
+    const fadeStart = maxScroll - fadeDuration;
+    const distanceToStart = scrollTop - fadeStart;
+    const scale = clamp(0, 1 - distanceToStart / fadeDuration, 1);
+    writeTask(() => {
+      baseEl.style.setProperty('--opacity-scale', scale.toString());
+    });
+  });
+};
+
+const footerIosCss = "ion-footer{display:block;position:relative;order:1;width:100%;z-index:10}ion-footer.footer-toolbar-padding ion-toolbar:last-of-type{padding-bottom:var(--ion-safe-area-bottom, 0)}.footer-ios ion-toolbar:first-of-type{--border-width:0.55px 0 0}@supports (backdrop-filter: blur(0)){.footer-background{left:0;right:0;top:0;bottom:0;position:absolute;backdrop-filter:saturate(180%) blur(20px)}.footer-translucent-ios ion-toolbar{--opacity:.8}}.footer-ios.ion-no-border ion-toolbar:first-of-type{--border-width:0}.footer-collapse-fade ion-toolbar{--opacity-scale:inherit}";
+
+const footerMdCss = "ion-footer{display:block;position:relative;order:1;width:100%;z-index:10}ion-footer.footer-toolbar-padding ion-toolbar:last-of-type{padding-bottom:var(--ion-safe-area-bottom, 0)}.footer-md::before{left:0;top:-2px;bottom:auto;background-position:left 0 top 0;position:absolute;width:100%;height:2px;background-image:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAHBAMAAADzDtBxAAAAD1BMVEUAAAAAAAAAAAAAAAAAAABPDueNAAAABXRSTlMUCS0gBIh/TXEAAAAaSURBVAjXYxCEAgY4UIICBmMogMsgFLtAAQCNSwXZKOdPxgAAAABJRU5ErkJggg==\");background-repeat:repeat-x;content:\"\"}[dir=rtl] .footer-md::before,:host-context([dir=rtl]) .footer-md::before{left:unset;right:unset;right:0}[dir=rtl] .footer-md::before,:host-context([dir=rtl]) .footer-md::before{background-position:right 0 top 0}.footer-md.ion-no-border::before{display:none}";
+
+const Footer = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.keyboardCtrl = null;
+    this.keyboardVisible = false;
+    /**
+     * If `true`, the footer will be translucent.
+     * Only applies when the mode is `"ios"` and the device supports
+     * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
+     *
+     * Note: In order to scroll content behind the footer, the `fullscreen`
+     * attribute needs to be set on the content.
+     */
+    this.translucent = false;
+    this.checkCollapsibleFooter = () => {
+      const mode = getIonMode$1(this);
+      if (mode !== 'ios') {
+        return;
+      }
+      const { collapse } = this;
+      const hasFade = collapse === 'fade';
+      this.destroyCollapsibleFooter();
+      if (hasFade) {
+        const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
+        const contentEl = pageEl ? findIonContent(pageEl) : null;
+        if (!contentEl) {
+          printIonContentErrorMsg(this.el);
+          return;
+        }
+        this.setupFadeFooter(contentEl);
+      }
+    };
+    this.setupFadeFooter = async (contentEl) => {
+      const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
+      /**
+       * Handle fading of toolbars on scroll
+       */
+      this.contentScrollCallback = () => {
+        handleFooterFade(scrollEl, this.el);
+      };
+      scrollEl.addEventListener('scroll', this.contentScrollCallback);
+      handleFooterFade(scrollEl, this.el);
+    };
+  }
+  componentDidLoad() {
+    this.checkCollapsibleFooter();
+  }
+  componentDidUpdate() {
+    this.checkCollapsibleFooter();
+  }
+  connectedCallback() {
+    this.keyboardCtrl = createKeyboardController((keyboardOpen) => {
+      this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
+    });
+  }
+  disconnectedCallback() {
+    if (this.keyboardCtrl) {
+      this.keyboardCtrl.destroy();
+    }
+  }
+  destroyCollapsibleFooter() {
+    if (this.scrollEl && this.contentScrollCallback) {
+      this.scrollEl.removeEventListener('scroll', this.contentScrollCallback);
+      this.contentScrollCallback = undefined;
+    }
+  }
+  render() {
+    const { translucent, collapse } = this;
+    const mode = getIonMode$1(this);
+    const tabs = this.el.closest('ion-tabs');
+    const tabBar = tabs === null || tabs === void 0 ? void 0 : tabs.querySelector(':scope > ion-tab-bar');
+    return (h(Host, { role: "contentinfo", class: {
+        [mode]: true,
+        // Used internally for styling
+        [`footer-${mode}`]: true,
+        [`footer-translucent`]: translucent,
+        [`footer-translucent-${mode}`]: translucent,
+        ['footer-toolbar-padding']: !this.keyboardVisible && (!tabBar || tabBar.slot !== 'bottom'),
+        [`footer-collapse-${collapse}`]: collapse !== undefined,
+      } }, mode === 'ios' && translucent && h("div", { class: "footer-background" }), h("slot", null)));
+  }
+  get el() { return getElement(this); }
+};
+Footer.style = {
+  ios: footerIosCss,
+  md: footerMdCss
+};
+
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+const TRANSITION = 'all 0.2s ease-in-out';
+const cloneElement = (tagName) => {
+  const getCachedEl = document.querySelector(`${tagName}.ion-cloned-element`);
+  if (getCachedEl !== null) {
+    return getCachedEl;
+  }
+  const clonedEl = document.createElement(tagName);
+  clonedEl.classList.add('ion-cloned-element');
+  clonedEl.style.setProperty('display', 'none');
+  document.body.appendChild(clonedEl);
+  return clonedEl;
+};
+const createHeaderIndex = (headerEl) => {
+  if (!headerEl) {
+    return;
+  }
+  const toolbars = headerEl.querySelectorAll('ion-toolbar');
+  return {
+    el: headerEl,
+    toolbars: Array.from(toolbars).map((toolbar) => {
+      const ionTitleEl = toolbar.querySelector('ion-title');
+      return {
+        el: toolbar,
+        background: toolbar.shadowRoot.querySelector('.toolbar-background'),
+        ionTitleEl,
+        innerTitleEl: ionTitleEl ? ionTitleEl.shadowRoot.querySelector('.toolbar-title') : null,
+        ionButtonsEl: Array.from(toolbar.querySelectorAll('ion-buttons')),
+      };
+    }),
+  };
+};
+const handleContentScroll = (scrollEl, scrollHeaderIndex, contentEl) => {
+  readTask(() => {
+    const scrollTop = scrollEl.scrollTop;
+    const scale = clamp(1, 1 + -scrollTop / 500, 1.1);
+    // Native refresher should not cause titles to scale
+    const nativeRefresher = contentEl.querySelector('ion-refresher.refresher-native');
+    if (nativeRefresher === null) {
+      writeTask(() => {
+        scaleLargeTitles(scrollHeaderIndex.toolbars, scale);
+      });
+    }
+  });
+};
+const setToolbarBackgroundOpacity = (headerEl, opacity) => {
+  /**
+   * Fading in the backdrop opacity
+   * should happen after the large title
+   * has collapsed, so it is handled
+   * by handleHeaderFade()
+   */
+  if (headerEl.collapse === 'fade') {
+    return;
+  }
+  if (opacity === undefined) {
+    headerEl.style.removeProperty('--opacity-scale');
+  }
+  else {
+    headerEl.style.setProperty('--opacity-scale', opacity.toString());
+  }
+};
+const handleToolbarBorderIntersection = (ev, mainHeaderIndex, scrollTop) => {
+  if (!ev[0].isIntersecting) {
+    return;
+  }
+  /**
+   * There is a bug in Safari where overflow scrolling on a non-body element
+   * does not always reset the scrollTop position to 0 when letting go. It will
+   * set to 1 once the rubber band effect has ended. This causes the background to
+   * appear slightly on certain app setups.
+   *
+   * Additionally, we check if user is rubber banding (scrolling is negative)
+   * as this can mean they are using pull to refresh. Once the refresher starts,
+   * the content is transformed which can cause the intersection observer to erroneously
+   * fire here as well.
+   */
+  const scale = ev[0].intersectionRatio > 0.9 || scrollTop <= 0 ? 0 : ((1 - ev[0].intersectionRatio) * 100) / 75;
+  setToolbarBackgroundOpacity(mainHeaderIndex.el, scale === 1 ? undefined : scale);
+};
+/**
+ * If toolbars are intersecting, hide the scrollable toolbar content
+ * and show the primary toolbar content. If the toolbars are not intersecting,
+ * hide the primary toolbar content and show the scrollable toolbar content
+ */
+const handleToolbarIntersection = (ev, mainHeaderIndex, scrollHeaderIndex, scrollEl) => {
+  writeTask(() => {
+    const scrollTop = scrollEl.scrollTop;
+    handleToolbarBorderIntersection(ev, mainHeaderIndex, scrollTop);
+    const event = ev[0];
+    const intersection = event.intersectionRect;
+    const intersectionArea = intersection.width * intersection.height;
+    const rootArea = event.rootBounds.width * event.rootBounds.height;
+    const isPageHidden = intersectionArea === 0 && rootArea === 0;
+    const leftDiff = Math.abs(intersection.left - event.boundingClientRect.left);
+    const rightDiff = Math.abs(intersection.right - event.boundingClientRect.right);
+    const isPageTransitioning = intersectionArea > 0 && (leftDiff >= 5 || rightDiff >= 5);
+    if (isPageHidden || isPageTransitioning) {
+      return;
+    }
+    if (event.isIntersecting) {
+      setHeaderActive(mainHeaderIndex, false);
+      setHeaderActive(scrollHeaderIndex);
+    }
+    else {
+      /**
+       * There is a bug with IntersectionObserver on Safari
+       * where `event.isIntersecting === false` when cancelling
+       * a swipe to go back gesture. Checking the intersection
+       * x, y, width, and height provides a workaround. This bug
+       * does not happen when using Safari + Web Animations,
+       * only Safari + CSS Animations.
+       */
+      const hasValidIntersection = (intersection.x === 0 && intersection.y === 0) || (intersection.width !== 0 && intersection.height !== 0);
+      if (hasValidIntersection && scrollTop > 0) {
+        setHeaderActive(mainHeaderIndex);
+        setHeaderActive(scrollHeaderIndex, false);
+        setToolbarBackgroundOpacity(mainHeaderIndex.el);
+      }
+    }
+  });
+};
+const setHeaderActive = (headerIndex, active = true) => {
+  const headerEl = headerIndex.el;
+  if (active) {
+    headerEl.classList.remove('header-collapse-condense-inactive');
+    headerEl.removeAttribute('aria-hidden');
+  }
+  else {
+    headerEl.classList.add('header-collapse-condense-inactive');
+    headerEl.setAttribute('aria-hidden', 'true');
+  }
+};
+const scaleLargeTitles = (toolbars = [], scale = 1, transition = false) => {
+  toolbars.forEach((toolbar) => {
+    const ionTitle = toolbar.ionTitleEl;
+    const titleDiv = toolbar.innerTitleEl;
+    if (!ionTitle || ionTitle.size !== 'large') {
+      return;
+    }
+    titleDiv.style.transition = transition ? TRANSITION : '';
+    titleDiv.style.transform = `scale3d(${scale}, ${scale}, 1)`;
+  });
+};
+const handleHeaderFade = (scrollEl, baseEl, condenseHeader) => {
+  readTask(() => {
+    const scrollTop = scrollEl.scrollTop;
+    const baseElHeight = baseEl.clientHeight;
+    const fadeStart = condenseHeader ? condenseHeader.clientHeight : 0;
+    /**
+     * If we are using fade header with a condense
+     * header, then the toolbar backgrounds should
+     * not begin to fade in until the condense
+     * header has fully collapsed.
+     *
+     * Additionally, the main content should not
+     * overflow out of the container until the
+     * condense header has fully collapsed. When
+     * using just the condense header the content
+     * should overflow out of the container.
+     */
+    if (condenseHeader !== null && scrollTop < fadeStart) {
+      baseEl.style.setProperty('--opacity-scale', '0');
+      scrollEl.style.setProperty('clip-path', `inset(${baseElHeight}px 0px 0px 0px)`);
+      return;
+    }
+    const distanceToStart = scrollTop - fadeStart;
+    const fadeDuration = 10;
+    const scale = clamp(0, distanceToStart / fadeDuration, 1);
+    writeTask(() => {
+      scrollEl.style.removeProperty('clip-path');
+      baseEl.style.setProperty('--opacity-scale', scale.toString());
+    });
+  });
+};
+
+const headerIosCss = "ion-header{display:block;position:relative;order:-1;width:100%;z-index:10}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}.header-ios ion-toolbar:last-of-type{--border-width:0 0 0.55px}@supports (backdrop-filter: blur(0)){.header-background{left:0;right:0;top:0;bottom:0;position:absolute;backdrop-filter:saturate(180%) blur(20px)}.header-translucent-ios ion-toolbar{--opacity:.8}.header-collapse-condense-inactive .header-background{backdrop-filter:blur(20px)}}.header-ios.ion-no-border ion-toolbar:last-of-type{--border-width:0}.header-collapse-fade ion-toolbar{--opacity-scale:inherit}.header-collapse-condense{z-index:9}.header-collapse-condense ion-toolbar{position:sticky;top:0}.header-collapse-condense ion-toolbar:first-of-type{padding-top:7px;z-index:1}.header-collapse-condense ion-toolbar{--background:var(--ion-background-color, #fff);z-index:0}.header-collapse-condense ion-toolbar:last-of-type{--border-width:0px}.header-collapse-condense ion-toolbar ion-searchbar{height:48px;padding-top:0px;padding-bottom:13px}.header-collapse-main{--opacity-scale:1}.header-collapse-main ion-toolbar{--opacity-scale:inherit}.header-collapse-main ion-toolbar.in-toolbar ion-title,.header-collapse-main ion-toolbar.in-toolbar ion-buttons{transition:all 0.2s ease-in-out}.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-buttons.buttons-collapse{opacity:0;pointer-events:none}.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-buttons.buttons-collapse{visibility:hidden}";
+
+const headerMdCss = "ion-header{display:block;position:relative;order:-1;width:100%;z-index:10}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}.header-md::after{left:0;bottom:-5px;background-position:left 0 top -2px;position:absolute;width:100%;height:5px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAHBAMAAADzDtBxAAAAD1BMVEUAAAAAAAAAAAAAAAAAAABPDueNAAAABXRSTlMUCS0gBIh/TXEAAAAaSURBVAjXYxCEAgY4UIICBmMogMsgFLtAAQCNSwXZKOdPxgAAAABJRU5ErkJggg==);background-repeat:repeat-x;content:\"\"}[dir=rtl] .header-md::after,:host-context([dir=rtl]) .header-md::after{left:unset;right:unset;right:0}[dir=rtl] .header-md::after,:host-context([dir=rtl]) .header-md::after{background-position:right 0 top -2px}.header-collapse-condense{display:none}.header-md.ion-no-border::after{display:none}";
+
+const Header = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.inheritedAttributes = {};
+    /**
+     * If `true`, the header will be translucent.
+     * Only applies when the mode is `"ios"` and the device supports
+     * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
+     *
+     * Note: In order to scroll content behind the header, the `fullscreen`
+     * attribute needs to be set on the content.
+     */
+    this.translucent = false;
+    this.setupFadeHeader = async (contentEl, condenseHeader) => {
+      const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
+      /**
+       * Handle fading of toolbars on scroll
+       */
+      this.contentScrollCallback = () => {
+        handleHeaderFade(this.scrollEl, this.el, condenseHeader);
+      };
+      scrollEl.addEventListener('scroll', this.contentScrollCallback);
+      handleHeaderFade(this.scrollEl, this.el, condenseHeader);
+    };
+  }
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAriaAttributes(this.el);
+  }
+  componentDidLoad() {
+    this.checkCollapsibleHeader();
+  }
+  componentDidUpdate() {
+    this.checkCollapsibleHeader();
+  }
+  disconnectedCallback() {
+    this.destroyCollapsibleHeader();
+  }
+  async checkCollapsibleHeader() {
+    const mode = getIonMode$1(this);
+    if (mode !== 'ios') {
+      return;
+    }
+    const { collapse } = this;
+    const hasCondense = collapse === 'condense';
+    const hasFade = collapse === 'fade';
+    this.destroyCollapsibleHeader();
+    if (hasCondense) {
+      const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
+      const contentEl = pageEl ? findIonContent(pageEl) : null;
+      // Cloned elements are always needed in iOS transition
+      writeTask(() => {
+        const title = cloneElement('ion-title');
+        title.size = 'large';
+        cloneElement('ion-back-button');
+      });
+      await this.setupCondenseHeader(contentEl, pageEl);
+    }
+    else if (hasFade) {
+      const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
+      const contentEl = pageEl ? findIonContent(pageEl) : null;
+      if (!contentEl) {
+        printIonContentErrorMsg(this.el);
+        return;
+      }
+      const condenseHeader = contentEl.querySelector('ion-header[collapse="condense"]');
+      await this.setupFadeHeader(contentEl, condenseHeader);
+    }
+  }
+  destroyCollapsibleHeader() {
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect();
+      this.intersectionObserver = undefined;
+    }
+    if (this.scrollEl && this.contentScrollCallback) {
+      this.scrollEl.removeEventListener('scroll', this.contentScrollCallback);
+      this.contentScrollCallback = undefined;
+    }
+    if (this.collapsibleMainHeader) {
+      this.collapsibleMainHeader.classList.remove('header-collapse-main');
+      this.collapsibleMainHeader = undefined;
+    }
+  }
+  async setupCondenseHeader(contentEl, pageEl) {
+    if (!contentEl || !pageEl) {
+      printIonContentErrorMsg(this.el);
+      return;
+    }
+    if (typeof IntersectionObserver === 'undefined') {
+      return;
+    }
+    this.scrollEl = await getScrollElement(contentEl);
+    const headers = pageEl.querySelectorAll('ion-header');
+    this.collapsibleMainHeader = Array.from(headers).find((header) => header.collapse !== 'condense');
+    if (!this.collapsibleMainHeader) {
+      return;
+    }
+    const mainHeaderIndex = createHeaderIndex(this.collapsibleMainHeader);
+    const scrollHeaderIndex = createHeaderIndex(this.el);
+    if (!mainHeaderIndex || !scrollHeaderIndex) {
+      return;
+    }
+    setHeaderActive(mainHeaderIndex, false);
+    setToolbarBackgroundOpacity(mainHeaderIndex.el, 0);
+    /**
+     * Handle interaction between toolbar collapse and
+     * showing/hiding content in the primary ion-header
+     * as well as progressively showing/hiding the main header
+     * border as the top-most toolbar collapses or expands.
+     */
+    const toolbarIntersection = (ev) => {
+      handleToolbarIntersection(ev, mainHeaderIndex, scrollHeaderIndex, this.scrollEl);
+    };
+    this.intersectionObserver = new IntersectionObserver(toolbarIntersection, {
+      root: contentEl,
+      threshold: [0.25, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],
+    });
+    this.intersectionObserver.observe(scrollHeaderIndex.toolbars[scrollHeaderIndex.toolbars.length - 1].el);
+    /**
+     * Handle scaling of large iOS titles and
+     * showing/hiding border on last toolbar
+     * in primary header
+     */
+    this.contentScrollCallback = () => {
+      handleContentScroll(this.scrollEl, scrollHeaderIndex, contentEl);
+    };
+    this.scrollEl.addEventListener('scroll', this.contentScrollCallback);
+    writeTask(() => {
+      if (this.collapsibleMainHeader !== undefined) {
+        this.collapsibleMainHeader.classList.add('header-collapse-main');
+      }
+    });
+  }
+  render() {
+    const { translucent, inheritedAttributes } = this;
+    const mode = getIonMode$1(this);
+    const collapse = this.collapse || 'none';
+    // banner role must be at top level, so remove role if inside a menu
+    const roleType = hostContext('ion-menu', this.el) ? 'none' : 'banner';
+    return (h(Host, Object.assign({ role: roleType, class: {
+        [mode]: true,
+        // Used internally for styling
+        [`header-${mode}`]: true,
+        [`header-translucent`]: this.translucent,
+        [`header-collapse-${collapse}`]: true,
+        [`header-translucent-${mode}`]: this.translucent,
+      } }, inheritedAttributes), mode === 'ios' && translucent && h("div", { class: "header-background" }), h("slot", null)));
+  }
+  get el() { return getElement(this); }
+};
+Header.style = {
+  ios: headerIosCss,
+  md: headerMdCss
+};
+
+let CACHED_MAP;
+const getIconMap = () => {
+  if (typeof window === 'undefined') {
+    return new Map();
+  }
+  else {
+    if (!CACHED_MAP) {
+      const win = window;
+      win.Ionicons = win.Ionicons || {};
+      CACHED_MAP = win.Ionicons.map = win.Ionicons.map || new Map();
+    }
+    return CACHED_MAP;
+  }
+};
+const getUrl = (i) => {
+  let url = getSrc(i.src);
+  if (url) {
+    return url;
+  }
+  url = getName(i.name, i.icon, i.mode, i.ios, i.md);
+  if (url) {
+    return getNamedUrl(url);
+  }
+  if (i.icon) {
+    url = getSrc(i.icon);
+    if (url) {
+      return url;
+    }
+    url = getSrc(i.icon[i.mode]);
+    if (url) {
+      return url;
+    }
+  }
+  return null;
+};
+const getNamedUrl = (iconName) => {
+  const url = getIconMap().get(iconName);
+  if (url) {
+    return url;
+  }
+  return getAssetPath(`svg/${iconName}.svg`);
+};
+const getName = (iconName, icon, mode, ios, md) => {
+  // default to "md" if somehow the mode wasn't set
+  mode = (mode && toLower(mode)) === 'ios' ? 'ios' : 'md';
+  // if an icon was passed in using the ios or md attributes
+  // set the iconName to whatever was passed in
+  if (ios && mode === 'ios') {
+    iconName = toLower(ios);
+  }
+  else if (md && mode === 'md') {
+    iconName = toLower(md);
+  }
+  else {
+    if (!iconName && icon && !isSrc(icon)) {
+      iconName = icon;
+    }
+    if (isStr(iconName)) {
+      iconName = toLower(iconName);
+    }
+  }
+  if (!isStr(iconName) || iconName.trim() === '') {
+    return null;
+  }
+  // only allow alpha characters and dash
+  const invalidChars = iconName.replace(/[a-z]|-|\d/gi, '');
+  if (invalidChars !== '') {
+    return null;
+  }
+  return iconName;
+};
+const getSrc = (src) => {
+  if (isStr(src)) {
+    src = src.trim();
+    if (isSrc(src)) {
+      return src;
+    }
+  }
+  return null;
+};
+const isSrc = (str) => str.length > 0 && /(\/|\.)/.test(str);
+const isStr = (val) => typeof val === 'string';
+const toLower = (val) => val.toLowerCase();
+/**
+ * Elements inside of web components sometimes need to inherit global attributes
+ * set on the host. For example, the inner input in `ion-input` should inherit
+ * the `title` attribute that developers set directly on `ion-input`. This
+ * helper function should be called in componentWillLoad and assigned to a variable
+ * that is later used in the render function.
+ *
+ * This does not need to be reactive as changing attributes on the host element
+ * does not trigger a re-render.
+ */
+const inheritAttributes = (el, attributes = []) => {
+  const attributeObject = {};
+  attributes.forEach(attr => {
+    if (el.hasAttribute(attr)) {
+      const value = el.getAttribute(attr);
+      if (value !== null) {
+        attributeObject[attr] = el.getAttribute(attr);
+      }
+      el.removeAttribute(attr);
+    }
+  });
+  return attributeObject;
+};
+/**
+ * Returns `true` if the document or host element
+ * has a `dir` set to `rtl`. The host value will always
+ * take priority over the root document value.
+ */
+const isRTL = (hostEl) => {
+  if (hostEl) {
+    if (hostEl.dir !== '') {
+      return hostEl.dir.toLowerCase() === 'rtl';
+    }
+  }
+  return (document === null || document === void 0 ? void 0 : document.dir.toLowerCase()) === 'rtl';
+};
+
+const validateContent = (svgContent) => {
+  const div = document.createElement('div');
+  div.innerHTML = svgContent;
+  // setup this way to ensure it works on our buddy IE
+  for (let i = div.childNodes.length - 1; i >= 0; i--) {
+    if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {
+      div.removeChild(div.childNodes[i]);
+    }
+  }
+  // must only have 1 root element
+  const svgElm = div.firstElementChild;
+  if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {
+    const svgClass = svgElm.getAttribute('class') || '';
+    svgElm.setAttribute('class', (svgClass + ' s-ion-icon').trim());
+    // root element must be an svg
+    // lets double check we've got valid elements
+    // do not allow scripts
+    if (isValid(svgElm)) {
+      return div.innerHTML;
+    }
+  }
+  return '';
+};
+const isValid = (elm) => {
+  if (elm.nodeType === 1) {
+    if (elm.nodeName.toLowerCase() === 'script') {
+      return false;
+    }
+    for (let i = 0; i < elm.attributes.length; i++) {
+      const name = elm.attributes[i].name;
+      if (isStr(name) && name.toLowerCase().indexOf('on') === 0) {
+        return false;
+      }
+    }
+    for (let i = 0; i < elm.childNodes.length; i++) {
+      if (!isValid(elm.childNodes[i])) {
+        return false;
+      }
+    }
+  }
+  return true;
+};
+
+const ioniconContent = new Map();
+const requests = new Map();
+const getSvgContent = (url, sanitize) => {
+  // see if we already have a request for this url
+  let req = requests.get(url);
+  if (!req) {
+    if (typeof fetch !== 'undefined' && typeof document !== 'undefined') {
+      // we don't already have a request
+      req = fetch(url).then((rsp) => {
+        if (rsp.ok) {
+          return rsp.text().then((svgContent) => {
+            if (svgContent && sanitize !== false) {
+              svgContent = validateContent(svgContent);
+            }
+            ioniconContent.set(url, svgContent || '');
+          });
+        }
+        ioniconContent.set(url, '');
+      });
+      // cache for the same requests
+      requests.set(url, req);
+    }
+    else {
+      // set to empty for ssr scenarios and resolve promise
+      ioniconContent.set(url, '');
+      return Promise.resolve();
+    }
+  }
+  return req;
+};
+
+const iconCss = ":host{display:inline-block;width:1em;height:1em;contain:strict;fill:currentColor;box-sizing:content-box !important}:host .ionicon{stroke:currentColor}.ionicon-fill-none{fill:none}.ionicon-stroke-width{stroke-width:32px;stroke-width:var(--ionicon-stroke-width, 32px)}.icon-inner,.ionicon,svg{display:block;height:100%;width:100%}:host(.flip-rtl) .icon-inner{transform:scaleX(-1)}:host(.icon-small){font-size:18px !important}:host(.icon-large){font-size:32px !important}:host(.ion-color){color:var(--ion-color-base) !important}:host(.ion-color-primary){--ion-color-base:var(--ion-color-primary, #3880ff)}:host(.ion-color-secondary){--ion-color-base:var(--ion-color-secondary, #0cd1e8)}:host(.ion-color-tertiary){--ion-color-base:var(--ion-color-tertiary, #f4a942)}:host(.ion-color-success){--ion-color-base:var(--ion-color-success, #10dc60)}:host(.ion-color-warning){--ion-color-base:var(--ion-color-warning, #ffce00)}:host(.ion-color-danger){--ion-color-base:var(--ion-color-danger, #f14141)}:host(.ion-color-light){--ion-color-base:var(--ion-color-light, #f4f5f8)}:host(.ion-color-medium){--ion-color-base:var(--ion-color-medium, #989aa2)}:host(.ion-color-dark){--ion-color-base:var(--ion-color-dark, #222428)}";
+
+let parser;
+const Icon = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.iconName = null;
+    this.inheritedAttributes = {};
+    this.isVisible = false;
+    /**
+     * The mode determines which platform styles to use.
+     */
+    this.mode = getIonMode();
+    /**
+     * If enabled, ion-icon will be loaded lazily when it's visible in the viewport.
+     * Default, `false`.
+     */
+    this.lazy = false;
+    /**
+     * When set to `false`, SVG content that is HTTP fetched will not be checked
+     * if the response SVG content has any `<script>` elements, or any attributes
+     * that start with `on`, such as `onclick`.
+     * @default true
+     */
+    this.sanitize = true;
+    this.hasAriaHidden = () => {
+      const { el } = this;
+      return el.hasAttribute('aria-hidden') && el.getAttribute('aria-hidden') === 'true';
+    };
+  }
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
+  }
+  connectedCallback() {
+    // purposely do not return the promise here because loading
+    // the svg file should not hold up loading the app
+    // only load the svg if it's visible
+    this.waitUntilVisible(this.el, '50px', () => {
+      this.isVisible = true;
+      this.loadIcon();
+    });
+  }
+  disconnectedCallback() {
+    if (this.io) {
+      this.io.disconnect();
+      this.io = undefined;
+    }
+  }
+  waitUntilVisible(el, rootMargin, cb) {
+    if (this.lazy && typeof window !== 'undefined' && window.IntersectionObserver) {
+      const io = (this.io = new window.IntersectionObserver((data) => {
+        if (data[0].isIntersecting) {
+          io.disconnect();
+          this.io = undefined;
+          cb();
+        }
+      }, { rootMargin }));
+      io.observe(el);
+    }
+    else {
+      // browser doesn't support IntersectionObserver
+      // so just fallback to always show it
+      cb();
+    }
+  }
+  loadIcon() {
+    if (this.isVisible) {
+      if (!parser) {
+        /**
+         * Create an instance of the DOM parser. This creates a single
+         * parser instance for the entire app, which is more efficient.
+         */
+        parser = new DOMParser();
+      }
+      const url = getUrl(this);
+      if (url) {
+        if (ioniconContent.has(url)) {
+          // sync if it's already loaded
+          this.svgContent = ioniconContent.get(url);
+        }
+        else if (url.startsWith('data:')) {
+          const doc = parser.parseFromString(url, 'text/html');
+          const svgEl = doc.body.querySelector('svg');
+          if (svgEl !== null) {
+            this.svgContent = svgEl.outerHTML;
+          }
+          else {
+            this.svgContent = '';
+          }
+        }
+        else {
+          // async if it hasn't been loaded
+          getSvgContent(url, this.sanitize).then(() => (this.svgContent = ioniconContent.get(url)));
+        }
+      }
+    }
+    const label = this.iconName = getName(this.name, this.icon, this.mode, this.ios, this.md);
+    /**
+     * Come up with a default label
+     * in case user does not provide their own.
+     */
+    if (label) {
+      this.ariaLabel = label.replace(/\-/g, ' ');
+    }
+  }
+  render() {
+    const { iconName, ariaLabel, el, inheritedAttributes } = this;
+    const mode = this.mode || 'md';
+    const flipRtl = this.flipRtl ||
+      (iconName &&
+        (iconName.indexOf('arrow') > -1 || iconName.indexOf('chevron') > -1) &&
+        this.flipRtl !== false);
+    /**
+     * Only set the aria-label if a) we have generated
+     * one for the icon and if aria-hidden is not set to "true".
+     * If developer wants to set their own aria-label, then
+     * inheritedAttributes down below will override whatever
+     * default label we have set.
+     */
+    return (h(Host, Object.assign({ "aria-label": ariaLabel !== undefined && !this.hasAriaHidden() ? ariaLabel : null, role: "img", class: Object.assign(Object.assign({ [mode]: true }, createColorClasses(this.color)), { [`icon-${this.size}`]: !!this.size, 'flip-rtl': !!flipRtl && isRTL(el) }) }, inheritedAttributes), this.svgContent ? (h("div", { class: "icon-inner", innerHTML: this.svgContent })) : (h("div", { class: "icon-inner" }))));
+  }
+  static get assetsDirs() { return ["svg"]; }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "name": ["loadIcon"],
+    "src": ["loadIcon"],
+    "icon": ["loadIcon"]
+  }; }
+};
+const getIonMode = () => (typeof document !== 'undefined' && document.documentElement.getAttribute('mode')) || 'md';
+const createColorClasses = (color) => {
+  return color
+    ? {
+      'ion-color': true,
+      [`ion-color-${color}`]: true,
+    }
+    : null;
+};
+Icon.style = iconCss;
+
+const progressBarIosCss = ":host{--background:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.3);--progress-background:var(--ion-color-primary, #3880ff);--buffer-background:var(--background);display:block;position:relative;width:100%;contain:strict;direction:ltr;overflow:hidden}.progress,.progress-indeterminate,.indeterminate-bar-primary,.indeterminate-bar-secondary,.progress-buffer-bar{left:0;right:0;top:0;bottom:0;position:absolute;width:100%;height:100%}.buffer-circles-container,.buffer-circles{left:0;right:0;top:0;bottom:0;position:absolute}.buffer-circles{right:-10px;left:-10px;}.progress,.progress-buffer-bar,.buffer-circles-container{transform-origin:left top;transition:transform 150ms linear}.progress,.progress-indeterminate{background:var(--progress-background);z-index:2}.progress-buffer-bar{background:var(--buffer-background);z-index:1}.buffer-circles-container{overflow:hidden}.indeterminate-bar-primary{top:0;right:0;bottom:0;left:-145.166611%;animation:primary-indeterminate-translate 2s infinite linear}.indeterminate-bar-primary .progress-indeterminate{animation:primary-indeterminate-scale 2s infinite linear;animation-play-state:inherit}.indeterminate-bar-secondary{top:0;right:0;bottom:0;left:-54.888891%;animation:secondary-indeterminate-translate 2s infinite linear}.indeterminate-bar-secondary .progress-indeterminate{animation:secondary-indeterminate-scale 2s infinite linear;animation-play-state:inherit}.buffer-circles{background-image:radial-gradient(ellipse at center, var(--buffer-background) 0%, var(--buffer-background) 30%, transparent 30%);background-repeat:repeat-x;background-position:5px center;background-size:10px 10px;z-index:0;animation:buffering 450ms infinite linear}:host(.progress-bar-reversed){transform:scaleX(-1)}:host(.progress-paused) .indeterminate-bar-secondary,:host(.progress-paused) .indeterminate-bar-primary,:host(.progress-paused) .buffer-circles{animation-play-state:paused}:host(.ion-color) .progress-buffer-bar{background:rgba(var(--ion-color-base-rgb), 0.3)}:host(.ion-color) .buffer-circles{background-image:radial-gradient(ellipse at center, rgba(var(--ion-color-base-rgb), 0.3) 0%, rgba(var(--ion-color-base-rgb), 0.3) 30%, transparent 30%)}:host(.ion-color) .progress,:host(.ion-color) .progress-indeterminate{background:var(--ion-color-base)}@keyframes primary-indeterminate-translate{0%{transform:translateX(0)}20%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(0)}59.15%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(83.67142%)}100%{transform:translateX(200.611057%)}}@keyframes primary-indeterminate-scale{0%{transform:scaleX(0.08)}36.65%{animation-timing-function:cubic-bezier(0.334731, 0.12482, 0.785844, 1);transform:scaleX(0.08)}69.15%{animation-timing-function:cubic-bezier(0.06, 0.11, 0.6, 1);transform:scaleX(0.661479)}100%{transform:scaleX(0.08)}}@keyframes secondary-indeterminate-translate{0%{animation-timing-function:cubic-bezier(0.15, 0, 0.515058, 0.409685);transform:translateX(0)}25%{animation-timing-function:cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);transform:translateX(37.651913%)}48.35%{animation-timing-function:cubic-bezier(0.4, 0.627035, 0.6, 0.902026);transform:translateX(84.386165%)}100%{transform:translateX(160.277782%)}}@keyframes secondary-indeterminate-scale{0%{animation-timing-function:cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);transform:scaleX(0.08)}19.15%{animation-timing-function:cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315);transform:scaleX(0.457104)}44.15%{animation-timing-function:cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);transform:scaleX(0.72796)}100%{transform:scaleX(0.08)}}@keyframes buffering{to{transform:translateX(-10px)}}:host{height:3px}";
+
+const progressBarMdCss = ":host{--background:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.3);--progress-background:var(--ion-color-primary, #3880ff);--buffer-background:var(--background);display:block;position:relative;width:100%;contain:strict;direction:ltr;overflow:hidden}.progress,.progress-indeterminate,.indeterminate-bar-primary,.indeterminate-bar-secondary,.progress-buffer-bar{left:0;right:0;top:0;bottom:0;position:absolute;width:100%;height:100%}.buffer-circles-container,.buffer-circles{left:0;right:0;top:0;bottom:0;position:absolute}.buffer-circles{right:-10px;left:-10px;}.progress,.progress-buffer-bar,.buffer-circles-container{transform-origin:left top;transition:transform 150ms linear}.progress,.progress-indeterminate{background:var(--progress-background);z-index:2}.progress-buffer-bar{background:var(--buffer-background);z-index:1}.buffer-circles-container{overflow:hidden}.indeterminate-bar-primary{top:0;right:0;bottom:0;left:-145.166611%;animation:primary-indeterminate-translate 2s infinite linear}.indeterminate-bar-primary .progress-indeterminate{animation:primary-indeterminate-scale 2s infinite linear;animation-play-state:inherit}.indeterminate-bar-secondary{top:0;right:0;bottom:0;left:-54.888891%;animation:secondary-indeterminate-translate 2s infinite linear}.indeterminate-bar-secondary .progress-indeterminate{animation:secondary-indeterminate-scale 2s infinite linear;animation-play-state:inherit}.buffer-circles{background-image:radial-gradient(ellipse at center, var(--buffer-background) 0%, var(--buffer-background) 30%, transparent 30%);background-repeat:repeat-x;background-position:5px center;background-size:10px 10px;z-index:0;animation:buffering 450ms infinite linear}:host(.progress-bar-reversed){transform:scaleX(-1)}:host(.progress-paused) .indeterminate-bar-secondary,:host(.progress-paused) .indeterminate-bar-primary,:host(.progress-paused) .buffer-circles{animation-play-state:paused}:host(.ion-color) .progress-buffer-bar{background:rgba(var(--ion-color-base-rgb), 0.3)}:host(.ion-color) .buffer-circles{background-image:radial-gradient(ellipse at center, rgba(var(--ion-color-base-rgb), 0.3) 0%, rgba(var(--ion-color-base-rgb), 0.3) 30%, transparent 30%)}:host(.ion-color) .progress,:host(.ion-color) .progress-indeterminate{background:var(--ion-color-base)}@keyframes primary-indeterminate-translate{0%{transform:translateX(0)}20%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(0)}59.15%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(83.67142%)}100%{transform:translateX(200.611057%)}}@keyframes primary-indeterminate-scale{0%{transform:scaleX(0.08)}36.65%{animation-timing-function:cubic-bezier(0.334731, 0.12482, 0.785844, 1);transform:scaleX(0.08)}69.15%{animation-timing-function:cubic-bezier(0.06, 0.11, 0.6, 1);transform:scaleX(0.661479)}100%{transform:scaleX(0.08)}}@keyframes secondary-indeterminate-translate{0%{animation-timing-function:cubic-bezier(0.15, 0, 0.515058, 0.409685);transform:translateX(0)}25%{animation-timing-function:cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);transform:translateX(37.651913%)}48.35%{animation-timing-function:cubic-bezier(0.4, 0.627035, 0.6, 0.902026);transform:translateX(84.386165%)}100%{transform:translateX(160.277782%)}}@keyframes secondary-indeterminate-scale{0%{animation-timing-function:cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);transform:scaleX(0.08)}19.15%{animation-timing-function:cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315);transform:scaleX(0.457104)}44.15%{animation-timing-function:cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);transform:scaleX(0.72796)}100%{transform:scaleX(0.08)}}@keyframes buffering{to{transform:translateX(-10px)}}:host{height:4px}";
+
+const ProgressBar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * The state of the progress bar, based on if the time the process takes is known or not.
+     * Default options are: `"determinate"` (no animation), `"indeterminate"` (animate from left to right).
+     */
+    this.type = 'determinate';
+    /**
+     * If true, reverse the progress bar direction.
+     */
+    this.reversed = false;
+    /**
+     * The value determines how much of the active bar should display when the
+     * `type` is `"determinate"`.
+     * The value should be between [0, 1].
+     */
+    this.value = 0;
+    /**
+     * If the buffer and value are smaller than 1, the buffer circles will show.
+     * The buffer should be between [0, 1].
+     */
+    this.buffer = 1;
+  }
+  render() {
+    const { color, type, reversed, value, buffer } = this;
+    const paused = config.getBoolean('_testing');
+    const mode = getIonMode$1(this);
+    return (h(Host, { role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses$1(color, {
+        [mode]: true,
+        [`progress-bar-${type}`]: true,
+        'progress-paused': paused,
+        'progress-bar-reversed': document.dir === 'rtl' ? !reversed : reversed,
+      }) }, type === 'indeterminate' ? renderIndeterminate() : renderProgress(value, buffer)));
+  }
+};
+const renderIndeterminate = () => {
+  return (h("div", { part: "track", class: "progress-buffer-bar" }, h("div", { class: "indeterminate-bar-primary" }, h("span", { part: "progress", class: "progress-indeterminate" })), h("div", { class: "indeterminate-bar-secondary" }, h("span", { part: "progress", class: "progress-indeterminate" }))));
+};
+const renderProgress = (value, buffer) => {
+  const finalValue = clamp(0, value, 1);
+  const finalBuffer = clamp(0, buffer, 1);
+  return [
+    h("div", { part: "progress", class: "progress", style: { transform: `scaleX(${finalValue})` } }),
+    /**
+     * Buffer circles with two container to move
+     * the circles behind the buffer progress
+     * with respecting the animation.
+     * When finalBuffer === 1, we use display: none
+     * instead of removing the element to avoid flickering.
+     */
+    h("div", { class: { 'buffer-circles-container': true, 'ion-hide': finalBuffer === 1 }, style: { transform: `translateX(${finalBuffer * 100}%)` } }, h("div", { class: "buffer-circles-container", style: { transform: `translateX(-${finalBuffer * 100}%)` } }, h("div", { part: "stream", class: "buffer-circles" }))),
+    h("div", { part: "track", class: "progress-buffer-bar", style: { transform: `scaleX(${finalBuffer})` } }),
+  ];
+};
+ProgressBar.style = {
+  ios: progressBarIosCss,
+  md: progressBarMdCss
+};
+
+const rippleEffectCss = ":host{left:0;right:0;top:0;bottom:0;position:absolute;contain:strict;pointer-events:none}:host(.unbounded){contain:layout size style}.ripple-effect{border-radius:50%;position:absolute;background-color:currentColor;color:inherit;contain:strict;opacity:0;animation:225ms rippleAnimation forwards, 75ms fadeInAnimation forwards;will-change:transform, opacity;pointer-events:none}.fade-out{transform:translate(var(--translate-end)) scale(var(--final-scale, 1));animation:150ms fadeOutAnimation forwards}@keyframes rippleAnimation{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:scale(1)}to{transform:translate(var(--translate-end)) scale(var(--final-scale, 1))}}@keyframes fadeInAnimation{from{animation-timing-function:linear;opacity:0}to{opacity:0.16}}@keyframes fadeOutAnimation{from{animation-timing-function:linear;opacity:0.16}to{opacity:0}}";
+
+const RippleEffect = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Sets the type of ripple-effect:
+     *
+     * - `bounded`: the ripple effect expands from the user's click position
+     * - `unbounded`: the ripple effect expands from the center of the button and overflows the container.
+     *
+     * NOTE: Surfaces for bounded ripples should have the overflow property set to hidden,
+     * while surfaces for unbounded ripples should have it set to visible.
+     */
+    this.type = 'bounded';
+  }
+  /**
+   * Adds the ripple effect to the parent element.
+   *
+   * @param x The horizontal coordinate of where the ripple should start.
+   * @param y The vertical coordinate of where the ripple should start.
+   */
+  async addRipple(x, y) {
+    return new Promise((resolve) => {
+      readTask(() => {
+        const rect = this.el.getBoundingClientRect();
+        const width = rect.width;
+        const height = rect.height;
+        const hypotenuse = Math.sqrt(width * width + height * height);
+        const maxDim = Math.max(height, width);
+        const maxRadius = this.unbounded ? maxDim : hypotenuse + PADDING;
+        const initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE);
+        const finalScale = maxRadius / initialSize;
+        let posX = x - rect.left;
+        let posY = y - rect.top;
+        if (this.unbounded) {
+          posX = width * 0.5;
+          posY = height * 0.5;
+        }
+        const styleX = posX - initialSize * 0.5;
+        const styleY = posY - initialSize * 0.5;
+        const moveX = width * 0.5 - posX;
+        const moveY = height * 0.5 - posY;
+        writeTask(() => {
+          const div = document.createElement('div');
+          div.classList.add('ripple-effect');
+          const style = div.style;
+          style.top = styleY + 'px';
+          style.left = styleX + 'px';
+          style.width = style.height = initialSize + 'px';
+          style.setProperty('--final-scale', `${finalScale}`);
+          style.setProperty('--translate-end', `${moveX}px, ${moveY}px`);
+          const container = this.el.shadowRoot || this.el;
+          container.appendChild(div);
+          setTimeout(() => {
+            resolve(() => {
+              removeRipple(div);
+            });
+          }, 225 + 100);
+        });
+      });
+    });
+  }
+  get unbounded() {
+    return this.type === 'unbounded';
+  }
+  render() {
+    const mode = getIonMode$1(this);
+    return (h(Host, { role: "presentation", class: {
+        [mode]: true,
+        unbounded: this.unbounded,
+      } }));
+  }
+  get el() { return getElement(this); }
+};
+const removeRipple = (ripple) => {
+  ripple.classList.add('fade-out');
+  setTimeout(() => {
+    ripple.remove();
+  }, 200);
+};
+const PADDING = 10;
+const INITIAL_ORIGIN_SCALE = 0.5;
+RippleEffect.style = rippleEffectCss;
+
+const searchbarIosCss = ".sc-ion-searchbar-ios-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:.5;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;position:relative;align-items:center;width:100%;color:var(--color);font-family:var(--ion-font-family, inherit);box-sizing:border-box}.ion-color.sc-ion-searchbar-ios-h{color:var(--ion-color-contrast)}.ion-color.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios{background:var(--ion-color-base)}.ion-color.sc-ion-searchbar-ios-h .searchbar-clear-button.sc-ion-searchbar-ios,.ion-color.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios,.ion-color.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{color:inherit}.searchbar-search-icon.sc-ion-searchbar-ios{color:var(--icon-color);pointer-events:none}.searchbar-input-container.sc-ion-searchbar-ios{display:block;position:relative;flex-shrink:1;width:100%}.searchbar-input.sc-ion-searchbar-ios{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;border-radius:var(--border-radius);display:block;width:100%;border:0;outline:none;background:var(--background);font-family:inherit;box-shadow:var(--box-shadow);box-sizing:border-box;appearance:none}.searchbar-input.sc-ion-searchbar-ios::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-ios::-webkit-search-cancel-button,.searchbar-input.sc-ion-searchbar-ios::-ms-clear{display:none}.searchbar-cancel-button.sc-ion-searchbar-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:none;height:100%;border:0;outline:none;color:var(--cancel-button-color);cursor:pointer;appearance:none}.searchbar-cancel-button.sc-ion-searchbar-ios>div.sc-ion-searchbar-ios{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.searchbar-clear-button.sc-ion-searchbar-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:none;min-height:0;outline:none;color:var(--clear-button-color);appearance:none}.searchbar-clear-button.sc-ion-searchbar-ios:focus{opacity:0.5}.searchbar-has-value.searchbar-should-show-clear.sc-ion-searchbar-ios-h .searchbar-clear-button.sc-ion-searchbar-ios{display:block}.searchbar-disabled.sc-ion-searchbar-ios-h{cursor:default;opacity:0.4;pointer-events:none}.sc-ion-searchbar-ios-h{--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.07);--border-radius:10px;--box-shadow:none;--cancel-button-color:var(--ion-color-primary, #3880ff);--clear-button-color:var(--ion-color-step-600, #666666);--color:var(--ion-text-color, #000);--icon-color:var(--ion-color-step-600, #666666);padding-left:12px;padding-right:12px;padding-top:12px;padding-bottom:12px;height:60px;contain:strict}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.sc-ion-searchbar-ios-h{padding-left:unset;padding-right:unset;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}}.searchbar-input-container.sc-ion-searchbar-ios{height:36px}.searchbar-search-icon.sc-ion-searchbar-ios{margin-left:calc(50% - 60px);left:5px;top:0;position:absolute;width:22px;height:100%;contain:strict}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.searchbar-search-icon.sc-ion-searchbar-ios{margin-left:unset;-webkit-margin-start:calc(50% - 60px);margin-inline-start:calc(50% - 60px)}}[dir=rtl].sc-ion-searchbar-ios .searchbar-search-icon.sc-ion-searchbar-ios,[dir=rtl].sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios,[dir=rtl] .sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{left:unset;right:unset;right:5px}.searchbar-input.sc-ion-searchbar-ios{padding-left:28px;padding-right:28px;padding-top:0;padding-bottom:0;height:100%;font-size:17px;font-weight:400;contain:strict}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.searchbar-input.sc-ion-searchbar-ios{padding-left:unset;padding-right:unset;-webkit-padding-start:28px;padding-inline-start:28px;-webkit-padding-end:28px;padding-inline-end:28px}}.searchbar-clear-button.sc-ion-searchbar-ios{right:0;top:0;background-position:center;position:absolute;width:30px;height:100%;border:0;background-color:transparent}[dir=rtl].sc-ion-searchbar-ios .searchbar-clear-button.sc-ion-searchbar-ios,[dir=rtl].sc-ion-searchbar-ios-h .searchbar-clear-button.sc-ion-searchbar-ios,[dir=rtl] .sc-ion-searchbar-ios-h .searchbar-clear-button.sc-ion-searchbar-ios{left:unset;right:unset;left:0}.searchbar-clear-icon.sc-ion-searchbar-ios{width:18px;height:100%}.searchbar-cancel-button.sc-ion-searchbar-ios{padding-left:8px;padding-right:0;padding-top:0;padding-bottom:0;flex-shrink:0;background-color:transparent;font-size:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.searchbar-cancel-button.sc-ion-searchbar-ios{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:0;padding-inline-end:0}}.searchbar-left-aligned.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{margin-left:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.searchbar-left-aligned.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{margin-left:unset;-webkit-margin-start:0;margin-inline-start:0}}.searchbar-left-aligned.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios{padding-left:30px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.searchbar-left-aligned.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios{padding-left:unset;-webkit-padding-start:30px;padding-inline-start:30px}}.searchbar-has-focus.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios,.searchbar-should-show-cancel.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios,.searchbar-animated.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{display:block}.searchbar-animated.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios,.searchbar-animated.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios{transition:all 300ms ease}.searchbar-animated.searchbar-has-focus.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios,.searchbar-animated.searchbar-should-show-cancel.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{opacity:1;pointer-events:auto}.searchbar-animated.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{margin-right:-100%;transform:translate3d(0,  0,  0);transition:all 300ms ease;opacity:0;pointer-events:none}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.searchbar-animated.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{margin-right:unset;-webkit-margin-end:-100%;margin-inline-end:-100%}}.searchbar-no-animate.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios,.searchbar-no-animate.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios,.searchbar-no-animate.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{transition-duration:0ms}.ion-color.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{color:var(--ion-color-base)}@media (any-hover: hover){.ion-color.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios:hover{color:var(--ion-color-tint)}}ion-toolbar.sc-ion-searchbar-ios-h,ion-toolbar .sc-ion-searchbar-ios-h{padding-top:1px;padding-bottom:15px;height:52px}ion-toolbar.ion-color.sc-ion-searchbar-ios-h:not(.ion-color),ion-toolbar.ion-color .sc-ion-searchbar-ios-h:not(.ion-color){color:inherit}ion-toolbar.ion-color.sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-cancel-button.sc-ion-searchbar-ios,ion-toolbar.ion-color .sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-cancel-button.sc-ion-searchbar-ios{color:currentColor}ion-toolbar.ion-color.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios,ion-toolbar.ion-color .sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{color:currentColor;opacity:0.5}ion-toolbar.ion-color.sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-input.sc-ion-searchbar-ios,ion-toolbar.ion-color .sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-input.sc-ion-searchbar-ios{background:rgba(var(--ion-color-contrast-rgb), 0.07);color:currentColor}ion-toolbar.ion-color.sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-clear-button.sc-ion-searchbar-ios,ion-toolbar.ion-color .sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-clear-button.sc-ion-searchbar-ios{color:currentColor;opacity:0.5}";
+
+const searchbarMdCss = ".sc-ion-searchbar-md-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:.5;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;position:relative;align-items:center;width:100%;color:var(--color);font-family:var(--ion-font-family, inherit);box-sizing:border-box}.ion-color.sc-ion-searchbar-md-h{color:var(--ion-color-contrast)}.ion-color.sc-ion-searchbar-md-h .searchbar-input.sc-ion-searchbar-md{background:var(--ion-color-base)}.ion-color.sc-ion-searchbar-md-h .searchbar-clear-button.sc-ion-searchbar-md,.ion-color.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md,.ion-color.sc-ion-searchbar-md-h .searchbar-search-icon.sc-ion-searchbar-md{color:inherit}.searchbar-search-icon.sc-ion-searchbar-md{color:var(--icon-color);pointer-events:none}.searchbar-input-container.sc-ion-searchbar-md{display:block;position:relative;flex-shrink:1;width:100%}.searchbar-input.sc-ion-searchbar-md{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;border-radius:var(--border-radius);display:block;width:100%;border:0;outline:none;background:var(--background);font-family:inherit;box-shadow:var(--box-shadow);box-sizing:border-box;appearance:none}.searchbar-input.sc-ion-searchbar-md::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-md::-webkit-search-cancel-button,.searchbar-input.sc-ion-searchbar-md::-ms-clear{display:none}.searchbar-cancel-button.sc-ion-searchbar-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:none;height:100%;border:0;outline:none;color:var(--cancel-button-color);cursor:pointer;appearance:none}.searchbar-cancel-button.sc-ion-searchbar-md>div.sc-ion-searchbar-md{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.searchbar-clear-button.sc-ion-searchbar-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:none;min-height:0;outline:none;color:var(--clear-button-color);appearance:none}.searchbar-clear-button.sc-ion-searchbar-md:focus{opacity:0.5}.searchbar-has-value.searchbar-should-show-clear.sc-ion-searchbar-md-h .searchbar-clear-button.sc-ion-searchbar-md{display:block}.searchbar-disabled.sc-ion-searchbar-md-h{cursor:default;opacity:0.4;pointer-events:none}.sc-ion-searchbar-md-h{--background:var(--ion-background-color, #fff);--border-radius:2px;--box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);--cancel-button-color:var(--ion-color-step-900, #1a1a1a);--clear-button-color:initial;--color:var(--ion-color-step-850, #262626);--icon-color:var(--ion-color-step-600, #666666);padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px;background:inherit}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.sc-ion-searchbar-md-h{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px}}.searchbar-search-icon.sc-ion-searchbar-md{left:16px;top:11px;width:21px;height:21px}[dir=rtl].sc-ion-searchbar-md .searchbar-search-icon.sc-ion-searchbar-md,[dir=rtl].sc-ion-searchbar-md-h .searchbar-search-icon.sc-ion-searchbar-md,[dir=rtl] .sc-ion-searchbar-md-h .searchbar-search-icon.sc-ion-searchbar-md{left:unset;right:unset;right:16px}.searchbar-cancel-button.sc-ion-searchbar-md{left:5px;top:0;background-color:transparent;font-size:1.6em}[dir=rtl].sc-ion-searchbar-md .searchbar-cancel-button.sc-ion-searchbar-md,[dir=rtl].sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md,[dir=rtl] .sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md{left:unset;right:unset;right:5px}.searchbar-search-icon.sc-ion-searchbar-md,.searchbar-cancel-button.sc-ion-searchbar-md{position:absolute}.searchbar-search-icon.ion-activated.sc-ion-searchbar-md,.searchbar-cancel-button.ion-activated.sc-ion-searchbar-md{background-color:transparent}.searchbar-input.sc-ion-searchbar-md{padding-left:55px;padding-right:55px;padding-top:6px;padding-bottom:6px;background-position:left 8px center;height:auto;font-size:16px;font-weight:400;line-height:30px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.searchbar-input.sc-ion-searchbar-md{padding-left:unset;padding-right:unset;-webkit-padding-start:55px;padding-inline-start:55px;-webkit-padding-end:55px;padding-inline-end:55px}}[dir=rtl].sc-ion-searchbar-md .searchbar-input.sc-ion-searchbar-md,[dir=rtl].sc-ion-searchbar-md-h .searchbar-input.sc-ion-searchbar-md,[dir=rtl] .sc-ion-searchbar-md-h .searchbar-input.sc-ion-searchbar-md{background-position:right 8px center}.searchbar-clear-button.sc-ion-searchbar-md{right:13px;top:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;position:absolute;height:100%;border:0;background-color:transparent}[dir=rtl].sc-ion-searchbar-md .searchbar-clear-button.sc-ion-searchbar-md,[dir=rtl].sc-ion-searchbar-md-h .searchbar-clear-button.sc-ion-searchbar-md,[dir=rtl] .sc-ion-searchbar-md-h .searchbar-clear-button.sc-ion-searchbar-md{left:unset;right:unset;left:13px}.searchbar-clear-button.ion-activated.sc-ion-searchbar-md{background-color:transparent}.searchbar-clear-icon.sc-ion-searchbar-md{width:22px;height:100%}.searchbar-has-focus.sc-ion-searchbar-md-h .searchbar-search-icon.sc-ion-searchbar-md{display:block}.searchbar-has-focus.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md,.searchbar-should-show-cancel.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md{display:block}.searchbar-has-focus.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md+.searchbar-search-icon.sc-ion-searchbar-md,.searchbar-should-show-cancel.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md+.searchbar-search-icon.sc-ion-searchbar-md{display:none}ion-toolbar.sc-ion-searchbar-md-h,ion-toolbar .sc-ion-searchbar-md-h{padding-left:7px;padding-right:7px;padding-top:3px;padding-bottom:3px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){ion-toolbar.sc-ion-searchbar-md-h,ion-toolbar .sc-ion-searchbar-md-h{padding-left:unset;padding-right:unset;-webkit-padding-start:7px;padding-inline-start:7px;-webkit-padding-end:7px;padding-inline-end:7px}}";
+
+const Searchbar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ionInput = createEvent(this, "ionInput", 7);
+    this.ionChange = createEvent(this, "ionChange", 7);
+    this.ionCancel = createEvent(this, "ionCancel", 7);
+    this.ionClear = createEvent(this, "ionClear", 7);
+    this.ionBlur = createEvent(this, "ionBlur", 7);
+    this.ionFocus = createEvent(this, "ionFocus", 7);
+    this.ionStyle = createEvent(this, "ionStyle", 7);
+    this.isCancelVisible = false;
+    this.shouldAlignLeft = true;
+    this.focused = false;
+    this.noAnimate = true;
+    /**
+     * If `true`, enable searchbar animation.
+     */
+    this.animated = false;
+    /**
+     * Set the input's autocomplete property.
+     */
+    this.autocomplete = 'off';
+    /**
+     * Set the input's autocorrect property.
+     */
+    this.autocorrect = 'off';
+    /**
+     * Set the cancel button icon. Only applies to `md` mode.
+     * Defaults to `arrow-back-sharp`.
+     */
+    this.cancelButtonIcon = config.get('backButtonIcon', arrowBackSharp);
+    /**
+     * Set the the cancel button text. Only applies to `ios` mode.
+     */
+    this.cancelButtonText = 'Cancel';
+    /**
+     * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
+     */
+    this.debounce = 250;
+    /**
+     * If `true`, the user cannot interact with the input.
+     */
+    this.disabled = false;
+    /**
+     * Set the input's placeholder.
+     * `placeholder` can accept either plaintext or HTML as a string.
+     * To display characters normally reserved for HTML, they
+     * must be escaped. For example `<Ionic>` would become
+     * `&lt;Ionic&gt;`
+     *
+     * For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
+     */
+    this.placeholder = 'Search';
+    /**
+     * Sets the behavior for the cancel button. Defaults to `"never"`.
+     * Setting to `"focus"` shows the cancel button on focus.
+     * Setting to `"never"` hides the cancel button.
+     * Setting to `"always"` shows the cancel button regardless
+     * of focus state.
+     */
+    this.showCancelButton = 'never';
+    /**
+     * Sets the behavior for the clear button. Defaults to `"focus"`.
+     * Setting to `"focus"` shows the clear button on focus if the
+     * input is not empty.
+     * Setting to `"never"` hides the clear button.
+     * Setting to `"always"` shows the clear button regardless
+     * of focus state, but only if the input is not empty.
+     */
+    this.showClearButton = 'always';
+    /**
+     * If `true`, enable spellcheck on the input.
+     */
+    this.spellcheck = false;
+    /**
+     * Set the type of the input.
+     */
+    this.type = 'search';
+    /**
+     * the value of the searchbar.
+     */
+    this.value = '';
+    /**
+     * Clears the input field and triggers the control change.
+     */
+    this.onClearInput = (shouldFocus) => {
+      this.ionClear.emit();
+      // setTimeout() fixes https://github.com/ionic-team/ionic/issues/7527
+      // wait for 4 frames
+      setTimeout(() => {
+        const value = this.getValue();
+        if (value !== '') {
+          this.value = '';
+          this.ionInput.emit();
+          /**
+           * When tapping clear button
+           * ensure input is focused after
+           * clearing input so users
+           * can quickly start typing.
+           */
+          if (shouldFocus && !this.focused) {
+            this.setFocus();
+          }
+        }
+      }, 16 * 4);
+    };
+    /**
+     * Clears the input field and tells the input to blur since
+     * the clearInput function doesn't want the input to blur
+     * then calls the custom cancel function if the user passed one in.
+     */
+    this.onCancelSearchbar = (ev) => {
+      if (ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+      }
+      this.ionCancel.emit();
+      this.onClearInput();
+      if (this.nativeInput) {
+        this.nativeInput.blur();
+      }
+    };
+    /**
+     * Update the Searchbar input value when the input changes
+     */
+    this.onInput = (ev) => {
+      const input = ev.target;
+      if (input) {
+        this.value = input.value;
+      }
+      this.ionInput.emit(ev);
+    };
+    /**
+     * Sets the Searchbar to not focused and checks if it should align left
+     * based on whether there is a value in the searchbar or not.
+     */
+    this.onBlur = () => {
+      this.focused = false;
+      this.ionBlur.emit();
+      this.positionElements();
+    };
+    /**
+     * Sets the Searchbar to focused and active on input focus.
+     */
+    this.onFocus = () => {
+      this.focused = true;
+      this.ionFocus.emit();
+      this.positionElements();
+    };
+  }
+  debounceChanged() {
+    this.ionChange = debounceEvent(this.ionChange, this.debounce);
+  }
+  valueChanged() {
+    const inputEl = this.nativeInput;
+    const value = this.getValue();
+    if (inputEl && inputEl.value !== value) {
+      inputEl.value = value;
+    }
+    this.ionChange.emit({ value });
+  }
+  showCancelButtonChanged() {
+    requestAnimationFrame(() => {
+      this.positionElements();
+      forceUpdate(this);
+    });
+  }
+  connectedCallback() {
+    this.emitStyle();
+  }
+  componentDidLoad() {
+    this.positionElements();
+    this.debounceChanged();
+    setTimeout(() => {
+      this.noAnimate = false;
+    }, 300);
+  }
+  emitStyle() {
+    this.ionStyle.emit({
+      searchbar: true,
+    });
+  }
+  /**
+   * Sets focus on the specified `ion-searchbar`. Use this method instead of the global
+   * `input.focus()`.
+   */
+  async setFocus() {
+    if (this.nativeInput) {
+      this.nativeInput.focus();
+    }
+  }
+  /**
+   * Returns the native `<input>` element used under the hood.
+   */
+  getInputElement() {
+    return Promise.resolve(this.nativeInput);
+  }
+  /**
+   * Positions the input search icon, placeholder, and the cancel button
+   * based on the input value and if it is focused. (ios only)
+   */
+  positionElements() {
+    const value = this.getValue();
+    const prevAlignLeft = this.shouldAlignLeft;
+    const mode = getIonMode$1(this);
+    const shouldAlignLeft = !this.animated || value.trim() !== '' || !!this.focused;
+    this.shouldAlignLeft = shouldAlignLeft;
+    if (mode !== 'ios') {
+      return;
+    }
+    if (prevAlignLeft !== shouldAlignLeft) {
+      this.positionPlaceholder();
+    }
+    if (this.animated) {
+      this.positionCancelButton();
+    }
+  }
+  /**
+   * Positions the input placeholder
+   */
+  positionPlaceholder() {
+    const inputEl = this.nativeInput;
+    if (!inputEl) {
+      return;
+    }
+    const rtl = isRTL$1(this.el);
+    const iconEl = (this.el.shadowRoot || this.el).querySelector('.searchbar-search-icon');
+    if (this.shouldAlignLeft) {
+      inputEl.removeAttribute('style');
+      iconEl.removeAttribute('style');
+    }
+    else {
+      // Create a dummy span to get the placeholder width
+      const doc = document;
+      const tempSpan = doc.createElement('span');
+      tempSpan.innerText = this.placeholder || '';
+      doc.body.appendChild(tempSpan);
+      // Get the width of the span then remove it
+      raf(() => {
+        const textWidth = tempSpan.offsetWidth;
+        tempSpan.remove();
+        // Calculate the input padding
+        const inputLeft = 'calc(50% - ' + textWidth / 2 + 'px)';
+        // Calculate the icon margin
+        const iconLeft = 'calc(50% - ' + (textWidth / 2 + 30) + 'px)';
+        // Set the input padding start and icon margin start
+        if (rtl) {
+          inputEl.style.paddingRight = inputLeft;
+          iconEl.style.marginRight = iconLeft;
+        }
+        else {
+          inputEl.style.paddingLeft = inputLeft;
+          iconEl.style.marginLeft = iconLeft;
+        }
+      });
+    }
+  }
+  /**
+   * Show the iOS Cancel button on focus, hide it offscreen otherwise
+   */
+  positionCancelButton() {
+    const rtl = isRTL$1(this.el);
+    const cancelButton = (this.el.shadowRoot || this.el).querySelector('.searchbar-cancel-button');
+    const shouldShowCancel = this.shouldShowCancelButton();
+    if (cancelButton !== null && shouldShowCancel !== this.isCancelVisible) {
+      const cancelStyle = cancelButton.style;
+      this.isCancelVisible = shouldShowCancel;
+      if (shouldShowCancel) {
+        if (rtl) {
+          cancelStyle.marginLeft = '0';
+        }
+        else {
+          cancelStyle.marginRight = '0';
+        }
+      }
+      else {
+        const offset = cancelButton.offsetWidth;
+        if (offset > 0) {
+          if (rtl) {
+            cancelStyle.marginLeft = -offset + 'px';
+          }
+          else {
+            cancelStyle.marginRight = -offset + 'px';
+          }
+        }
+      }
+    }
+  }
+  getValue() {
+    return this.value || '';
+  }
+  hasValue() {
+    return this.getValue() !== '';
+  }
+  /**
+   * Determines whether or not the cancel button should be visible onscreen.
+   * Cancel button should be shown if one of two conditions applies:
+   * 1. `showCancelButton` is set to `always`.
+   * 2. `showCancelButton` is set to `focus`, and the searchbar has been focused.
+   */
+  shouldShowCancelButton() {
+    if (this.showCancelButton === 'never' || (this.showCancelButton === 'focus' && !this.focused)) {
+      return false;
+    }
+    return true;
+  }
+  /**
+   * Determines whether or not the clear button should be visible onscreen.
+   * Clear button should be shown if one of two conditions applies:
+   * 1. `showClearButton` is set to `always`.
+   * 2. `showClearButton` is set to `focus`, and the searchbar has been focused.
+   */
+  shouldShowClearButton() {
+    if (this.showClearButton === 'never' || (this.showClearButton === 'focus' && !this.focused)) {
+      return false;
+    }
+    return true;
+  }
+  render() {
+    const { cancelButtonText } = this;
+    const animated = this.animated && config.getBoolean('animated', true);
+    const mode = getIonMode$1(this);
+    const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
+    const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
+    const shouldShowCancelButton = this.shouldShowCancelButton();
+    const cancelButton = this.showCancelButton !== 'never' && (h("button", { "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
+    return (h(Host, { role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
+        [mode]: true,
+        'searchbar-animated': animated,
+        'searchbar-disabled': this.disabled,
+        'searchbar-no-animate': animated && this.noAnimate,
+        'searchbar-has-value': this.hasValue(),
+        'searchbar-left-aligned': this.shouldAlignLeft,
+        'searchbar-has-focus': this.focused,
+        'searchbar-should-show-clear': this.shouldShowClearButton(),
+        'searchbar-should-show-cancel': this.shouldShowCancelButton(),
+      }) }, h("div", { class: "searchbar-input-container" }, h("input", { "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }), mode === 'md' && cancelButton, h("ion-icon", { "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+        /**
+         * This prevents mobile browsers from
+         * blurring the input when the clear
+         * button is activated.
+         */
+        ev.preventDefault();
+      }, onClick: () => this.onClearInput(true) }, h("ion-icon", { "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "debounce": ["debounceChanged"],
+    "value": ["valueChanged"],
+    "showCancelButton": ["showCancelButtonChanged"]
+  }; }
+};
+Searchbar.style = {
+  ios: searchbarIosCss,
+  md: searchbarMdCss
+};
+
+const skeletonTextCss = ":host{--background:rgba(var(--background-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.065);border-radius:var(--border-radius, inherit);display:block;width:100%;height:inherit;margin-top:4px;margin-bottom:4px;background:var(--background);line-height:10px;user-select:none;pointer-events:none}span{display:inline-block}:host(.in-media){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;height:100%}:host(.skeleton-text-animated){position:relative;background:linear-gradient(to right, rgba(var(--background-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.065) 8%, rgba(var(--background-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.135) 18%, rgba(var(--background-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.065) 33%);background-size:800px 104px;animation-duration:1s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:shimmer;animation-timing-function:linear}@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}";
+
+const SkeletonText = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * If `true`, the skeleton text will animate.
+     */
+    this.animated = false;
+  }
+  render() {
+    const animated = this.animated && config.getBoolean('animated', true);
+    const inMedia = hostContext('ion-avatar', this.el) || hostContext('ion-thumbnail', this.el);
+    const mode = getIonMode$1(this);
+    return (h(Host, { class: {
+        [mode]: true,
+        'skeleton-text-animated': animated,
+        'in-media': inMedia,
+      } }, h("span", null, "\u00A0")));
+  }
+  get el() { return getElement(this); }
+};
+SkeletonText.style = skeletonTextCss;
+
+const titleIosCss = ":host{--color:initial;display:flex;flex:1;align-items:center;transform:translateZ(0);color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}.toolbar-title{display:block;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;pointer-events:auto}:host(.title-small) .toolbar-title{white-space:normal}:host{left:0;top:0;padding-left:90px;padding-right:90px;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);position:absolute;width:100%;height:100%;transform:translateZ(0);font-size:17px;font-weight:600;text-align:center;box-sizing:border-box;pointer-events:none}:host-context([dir=rtl]){left:unset;right:unset;right:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:90px;padding-inline-start:90px;-webkit-padding-end:90px;padding-inline-end:90px}}:host(.title-small){padding-left:9px;padding-right:9px;padding-top:6px;padding-bottom:16px;position:relative;font-size:13px;font-weight:normal}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.title-small){padding-left:unset;padding-right:unset;-webkit-padding-start:9px;padding-inline-start:9px;-webkit-padding-end:9px;padding-inline-end:9px}}:host(.title-large){padding-left:16px;padding-right:16px;padding-top:0;padding-bottom:0;transform-origin:left center;bottom:0;align-items:flex-end;min-width:100%;padding-bottom:6px;font-size:34px;font-weight:700;text-align:start}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.title-large){padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}:host(.title-large.title-rtl){transform-origin:right center}:host(.title-large.ion-cloned-element){--color:var(--ion-text-color, #000)}:host(.title-large) .toolbar-title{transform-origin:inherit}:host-context([dir=rtl]):host(.title-large) .toolbar-title,:host-context([dir=rtl]).title-large .toolbar-title{transform-origin:calc(100% - inherit)}";
+
+const titleMdCss = ":host{--color:initial;display:flex;flex:1;align-items:center;transform:translateZ(0);color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}.toolbar-title{display:block;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;pointer-events:auto}:host(.title-small) .toolbar-title{white-space:normal}:host{padding-left:20px;padding-right:20px;padding-top:0;padding-bottom:0;font-size:20px;font-weight:500;letter-spacing:0.0125em}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px}}:host(.title-small){width:100%;height:100%;font-size:15px;font-weight:normal}";
+
+const ToolbarTitle = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ionStyle = createEvent(this, "ionStyle", 7);
+  }
+  sizeChanged() {
+    this.emitStyle();
+  }
+  connectedCallback() {
+    this.emitStyle();
+  }
+  emitStyle() {
+    const size = this.getSize();
+    this.ionStyle.emit({
+      [`title-${size}`]: true,
+    });
+  }
+  getSize() {
+    return this.size !== undefined ? this.size : 'default';
+  }
+  render() {
+    const mode = getIonMode$1(this);
+    const size = this.getSize();
+    return (h(Host, { class: createColorClasses$1(this.color, {
+        [mode]: true,
+        [`title-${size}`]: true,
+        'title-rtl': document.dir === 'rtl',
+      }) }, h("div", { class: "toolbar-title" }, h("slot", null))));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "size": ["sizeChanged"]
+  }; }
+};
+ToolbarTitle.style = {
+  ios: titleIosCss,
+  md: titleMdCss
+};
+
+const toolbarIosCss = ":host{--border-width:0;--border-style:solid;--opacity:1;--opacity-scale:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;padding-left:var(--ion-safe-area-left);padding-right:var(--ion-safe-area-right);display:block;position:relative;width:100%;color:var(--color);font-family:var(--ion-font-family, inherit);contain:content;z-index:10;box-sizing:border-box}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--ion-safe-area-left);padding-inline-start:var(--ion-safe-area-left);-webkit-padding-end:var(--ion-safe-area-right);padding-inline-end:var(--ion-safe-area-right)}}:host(.ion-color){color:var(--ion-color-contrast)}:host(.ion-color) .toolbar-background{background:var(--ion-color-base)}.toolbar-container{padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:flex;position:relative;flex-direction:row;align-items:center;justify-content:space-between;width:100%;min-height:var(--min-height);contain:content;overflow:hidden;z-index:10;box-sizing:border-box}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toolbar-container{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.toolbar-background{left:0;right:0;top:0;bottom:0;position:absolute;transform:translateZ(0);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;opacity:calc(var(--opacity) * var(--opacity-scale));z-index:-1;pointer-events:none}::slotted(ion-progress-bar){left:0;right:0;bottom:0;position:absolute}:host{--background:var(--ion-toolbar-background, var(--ion-color-step-50, #f7f7f7));--color:var(--ion-toolbar-color, var(--ion-text-color, #000));--border-color:var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.2))));--padding-top:3px;--padding-bottom:3px;--padding-start:4px;--padding-end:4px;--min-height:44px}.toolbar-content{flex:1;order:4;min-width:0}:host(.toolbar-segment) .toolbar-content{display:inline-flex}:host(.toolbar-searchbar) .toolbar-container{padding-top:0;padding-bottom:0}:host(.toolbar-searchbar) ::slotted(*){align-self:start}:host(.toolbar-searchbar) ::slotted(ion-chip){margin-top:3px}:host(.toolbar-searchbar) ::slotted(ion-back-button){height:38px}::slotted(ion-buttons){min-height:38px}::slotted([slot=start]){order:2}::slotted([slot=secondary]){order:3}::slotted([slot=primary]){order:5;text-align:end}::slotted([slot=end]){order:6;text-align:end}:host(.toolbar-title-large) .toolbar-container{flex-wrap:wrap;align-items:flex-start}:host(.toolbar-title-large) .toolbar-content ion-title{flex:1;order:8;min-width:100%}";
+
+const toolbarMdCss = ":host{--border-width:0;--border-style:solid;--opacity:1;--opacity-scale:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;padding-left:var(--ion-safe-area-left);padding-right:var(--ion-safe-area-right);display:block;position:relative;width:100%;color:var(--color);font-family:var(--ion-font-family, inherit);contain:content;z-index:10;box-sizing:border-box}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--ion-safe-area-left);padding-inline-start:var(--ion-safe-area-left);-webkit-padding-end:var(--ion-safe-area-right);padding-inline-end:var(--ion-safe-area-right)}}:host(.ion-color){color:var(--ion-color-contrast)}:host(.ion-color) .toolbar-background{background:var(--ion-color-base)}.toolbar-container{padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:flex;position:relative;flex-direction:row;align-items:center;justify-content:space-between;width:100%;min-height:var(--min-height);contain:content;overflow:hidden;z-index:10;box-sizing:border-box}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toolbar-container{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.toolbar-background{left:0;right:0;top:0;bottom:0;position:absolute;transform:translateZ(0);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;opacity:calc(var(--opacity) * var(--opacity-scale));z-index:-1;pointer-events:none}::slotted(ion-progress-bar){left:0;right:0;bottom:0;position:absolute}:host{--background:var(--ion-toolbar-background, var(--ion-background-color, #fff));--color:var(--ion-toolbar-color, var(--ion-text-color, #424242));--border-color:var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, #c1c4cd)));--padding-top:0;--padding-bottom:0;--padding-start:0;--padding-end:0;--min-height:56px}.toolbar-content{flex:1;order:3;min-width:0;max-width:100%}::slotted(.buttons-first-slot){margin-left:4px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(.buttons-first-slot){margin-left:unset;-webkit-margin-start:4px;margin-inline-start:4px}}::slotted(.buttons-last-slot){margin-right:4px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(.buttons-last-slot){margin-right:unset;-webkit-margin-end:4px;margin-inline-end:4px}}::slotted([slot=start]){order:2}::slotted([slot=secondary]){order:4}::slotted([slot=primary]){order:5;text-align:end}::slotted([slot=end]){order:6;text-align:end}";
+
+const Toolbar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.childrenStyles = new Map();
+  }
+  componentWillLoad() {
+    const buttons = Array.from(this.el.querySelectorAll('ion-buttons'));
+    const firstButtons = buttons.find((button) => {
+      return button.slot === 'start';
+    });
+    if (firstButtons) {
+      firstButtons.classList.add('buttons-first-slot');
+    }
+    const buttonsReversed = buttons.reverse();
+    const lastButtons = buttonsReversed.find((button) => button.slot === 'end') ||
+      buttonsReversed.find((button) => button.slot === 'primary') ||
+      buttonsReversed.find((button) => button.slot === 'secondary');
+    if (lastButtons) {
+      lastButtons.classList.add('buttons-last-slot');
+    }
+  }
+  childrenStyle(ev) {
+    ev.stopPropagation();
+    const tagName = ev.target.tagName;
+    const updatedStyles = ev.detail;
+    const newStyles = {};
+    const childStyles = this.childrenStyles.get(tagName) || {};
+    let hasStyleChange = false;
+    Object.keys(updatedStyles).forEach((key) => {
+      const childKey = `toolbar-${key}`;
+      const newValue = updatedStyles[key];
+      if (newValue !== childStyles[childKey]) {
+        hasStyleChange = true;
+      }
+      if (newValue) {
+        newStyles[childKey] = true;
+      }
+    });
+    if (hasStyleChange) {
+      this.childrenStyles.set(tagName, newStyles);
+      forceUpdate(this);
+    }
+  }
+  render() {
+    const mode = getIonMode$1(this);
+    const childStyles = {};
+    this.childrenStyles.forEach((value) => {
+      Object.assign(childStyles, value);
+    });
+    return (h(Host, { class: Object.assign(Object.assign({}, childStyles), createColorClasses$1(this.color, {
+        [mode]: true,
+        'in-toolbar': hostContext('ion-toolbar', this.el),
+      })) }, h("div", { class: "toolbar-background" }), h("div", { class: "toolbar-container" }, h("slot", { name: "start" }), h("slot", { name: "secondary" }), h("div", { class: "toolbar-content" }, h("slot", null)), h("slot", { name: "primary" }), h("slot", { name: "end" }))));
+  }
+  get el() { return getElement(this); }
+};
+Toolbar.style = {
+  ios: toolbarIosCss,
+  md: toolbarMdCss
+};
+
+const createPodOS = () => {
+  return new PodOS();
+};
+
+const PosApp = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.os = undefined;
+  }
+  componentWillLoad() {
+    this.os = createPodOS();
+    this.os.handleIncomingRedirect();
+    this.os.trackSession(sessionInfo => {
+      store.state.isLoggedIn = sessionInfo.isLoggedIn;
+      store.state.webId = sessionInfo.webId;
+    });
+  }
+  async initializeOs(event) {
+    event.stopPropagation();
+    event.detail(this.os);
+  }
+  render() {
+    return (h("ion-app", null, h("slot", null)));
+  }
+};
+
+const PosAppBrowser = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h("pos-app", null, h("ion-header", null, h("ion-toolbar", null, h("ion-title", { slot: "start" }, "PodOS"), h("pos-login", null))), h("ion-content", null, h("pos-router", null)), h("ion-footer", null, h("ion-toolbar", null, h("ion-title", null, "PodOS Browser")))));
+  }
+};
+
+const posImageCss = ":host{}img,ion-skeleton-text,div.error{border-radius:var(--border-radius);width:var(--width);height:var(--height);max-width:var(--max-width);max-height:var(--max-height)}.error{display:flex;opacity:0.8;background:repeating-linear-gradient( -45deg, rgba(150, 0, 0, 0.1), rgba(150, 0, 0, 0.1) 10px, #fff 5px, #fff 25px );flex-direction:column;border:1px solid red;color:black;align-items:center;justify-content:center;word-break:break-all;padding:1rem;box-sizing:border-box}.error ion-icon{color:#282828;--ionicon-stroke-width:calc(var(--width) / 5);font-size:calc(var(--width) / 2)}a{text-decoration:none;width:var(--width);height:var(--height)}.code{font-weight:bold;font-size:calc(var(--width) / 8)}.text{font-size:calc(var(--width) / 20)}";
+
+const PosImage = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.initializeOsEmitter = createEvent(this, "pod-os:init", 7);
+    this.setOs = async (os) => {
+      this.os = os;
+    };
+    this.src = undefined;
+    this.alt = undefined;
+    this.os = undefined;
+    this.dataUri = undefined;
+    this.brokenFile = undefined;
+    this.error = undefined;
+    this.loading = true;
+  }
+  componentWillLoad() {
+    store.onChange('isLoggedIn', () => this.fetchBlob());
+    this.initializeOsEmitter.emit(this.setOs);
+  }
+  async fetchBlob() {
+    try {
+      this.loading = true;
+      const file = await this.os.fetchFile(this.src);
+      if (file.blob()) {
+        this.dataUri = URL.createObjectURL(file.blob());
+        this.error = null;
+      }
+      else {
+        this.brokenFile = file;
+      }
+    }
+    catch (err) {
+      this.error = err;
+    }
+    finally {
+      this.loading = false;
+    }
+  }
+  render() {
+    if (this.loading) {
+      return h("ion-skeleton-text", { animated: true });
+    }
+    if (this.error) {
+      return h("div", { class: "error" }, this.error.message);
+    }
+    if (this.brokenFile) {
+      return h(BrokenFile, { file: this.brokenFile });
+    }
+    return h("img", { src: this.dataUri, alt: this.alt });
+  }
+  static get watchers() { return {
+    "os": ["fetchBlob"],
+    "src": ["fetchBlob"]
+  }; }
+};
+PosImage.style = posImageCss;
+
+const PosLabel = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.subscribeResource = createEvent(this, "pod-os:resource", 7);
+    this.receiveResource = (resource) => {
+      this.resource = resource;
+    };
+    this.resource = undefined;
+  }
+  componentWillLoad() {
+    subscribeResource(this);
+  }
+  render() {
+    return this.resource ? this.resource.label() : null;
+  }
+};
+
+const posLoginCss = ":host{display:flex;gap:10px}.user-data{align-items:center;display:inline-flex;gap:10px}.user-data pos-picture{--width:40px;--height:40px;--border-radius:50%}";
+
+const PosLogin = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.initializeOsEmitter = createEvent(this, "pod-os:init", 7);
+    this.setOs = async (os) => {
+      this.os = os;
+    };
+    this.os = undefined;
+  }
+  componentWillLoad() {
+    this.initializeOsEmitter.emit(this.setOs);
+  }
+  login() {
+    const idp = store.state.getIdpUrl();
+    this.os.login(idp);
+  }
+  logout() {
+    this.os.logout();
+  }
+  render() {
+    return (h(Host, null, store.state.isLoggedIn ? (h("pos-resource", { uri: store.state.webId }, h("span", { class: "user-data" }, h("pos-picture", null), h("pos-label", null)))) : (''), !store.state.isLoggedIn && h("ion-button", { onClick: () => this.login() }, "Login"), store.state.isLoggedIn && h("ion-button", { onClick: () => this.logout() }, "Logout")));
+  }
+};
+PosLogin.style = posLoginCss;
+
+const PosNavigationBar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.linkEmitter = createEvent(this, "pod-os:link", 7);
+    this.uri = '';
+    this.value = this.uri;
+  }
+  onChange(event) {
+    this.value = event.detail.value;
+  }
+  onSubmit(event) {
+    event.preventDefault();
+    this.linkEmitter.emit(this.value);
+  }
+  render() {
+    return (h("form", { onSubmit: e => this.onSubmit(e) }, h("ion-searchbar", { enterkeyhint: "search", placeholder: "Enter URI", value: this.uri, debounce: 0, onIonChange: e => this.onChange(e) })));
+  }
+};
+
+const posPictureCss = ":host{--width:300px;--height:300px;--border-radius:var(--border-radius, 0)}";
+
+const PosPicture = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.subscribeResource = createEvent(this, "pod-os:resource", 7);
+    this.receiveResource = (resource) => {
+      this.resource = resource;
+    };
+    this.resource = undefined;
+  }
+  componentWillLoad() {
+    subscribeResource(this);
+  }
+  render() {
+    const pic = this.resource ? this.resource.picture() : null;
+    if (!pic)
+      return null;
+    return h("pos-image", { src: pic.url, alt: this.resource.label() });
+  }
+};
+PosPicture.style = posPictureCss;
+
+const PosResource = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.initializeOsEmitter = createEvent(this, "pod-os:init", 7);
+    this.setOs = async (os) => {
+      this.os = os;
+    };
+    this.os = undefined;
+    this.resource = undefined;
+    this.consumers = [];
+    this.uri = undefined;
+    this.lazy = false;
+    this.error = undefined;
+    this.loading = true;
+  }
+  componentWillLoad() {
+    store.onChange('isLoggedIn', () => this.loadResource());
+    this.initializeOsEmitter.emit(this.setOs);
+  }
+  async provideResource(event) {
+    event.stopPropagation();
+    if (this.resource) {
+      event.detail(this.resource);
+    }
+    this.consumers.push(event);
+  }
+  async loadResource() {
+    await this.getResource(!this.lazy);
+  }
+  async fetch() {
+    await this.getResource(true);
+  }
+  async getResource(fetch = false) {
+    try {
+      if (fetch) {
+        this.loading = true;
+        await this.os.fetch(this.uri);
+      }
+      this.resource = this.os.store.get(this.uri);
+      this.error = null;
+      this.consumers.forEach(consumer => {
+        consumer.detail(this.resource);
+      });
+    }
+    catch (err) {
+      this.error = err;
+    }
+    finally {
+      this.loading = false;
+    }
+  }
+  render() {
+    if (this.loading) {
+      return h("ion-progress-bar", { type: "indeterminate" });
+    }
+    if (this.error) {
+      return (h("ion-card", null, h("ion-card-header", null, h("p", null, "Sorry, something went wrong"), h("p", null, "Status:", 
+      // @ts-ignore
+      this.error.status), h("details", null, this.error.message)), h("ion-card-content", null, h("p", null, "You can try to open the link outside PodOS:"), h("a", { href: this.uri }, this.uri))));
+    }
+    return h("slot", null);
+  }
+  static get watchers() { return {
+    "os": ["loadResource"],
+    "uri": ["loadResource"]
+  }; }
+};
+
+const appendToMap = (map, propName, value) => {
+    const items = map.get(propName);
+    if (!items) {
+        map.set(propName, [value]);
+    }
+    else if (!items.includes(value)) {
+        items.push(value);
+    }
+};
+const debounce = (fn, ms) => {
+    let timeoutId;
+    return (...args) => {
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(() => {
+            timeoutId = 0;
+            fn(...args);
+        }, ms);
+    };
+};
+
+/**
+ * Check if a possible element isConnected.
+ * The property might not be there, so we check for it.
+ *
+ * We want it to return true if isConnected is not a property,
+ * otherwise we would remove these elements and would not update.
+ *
+ * Better leak in Edge than to be useless.
+ */
+const isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;
+const cleanupElements = debounce((map) => {
+    for (let key of map.keys()) {
+        map.set(key, map.get(key).filter(isConnected));
+    }
+}, 2000);
+const stencilSubscription = () => {
+    if (typeof getRenderingRef !== 'function') {
+        // If we are not in a stencil project, we do nothing.
+        // This function is not really exported by @stencil/core.
+        return {};
+    }
+    const elmsToUpdate = new Map();
+    return {
+        dispose: () => elmsToUpdate.clear(),
+        get: (propName) => {
+            const elm = getRenderingRef();
+            if (elm) {
+                appendToMap(elmsToUpdate, propName, elm);
+            }
+        },
+        set: (propName) => {
+            const elements = elmsToUpdate.get(propName);
+            if (elements) {
+                elmsToUpdate.set(propName, elements.filter(forceUpdate));
+            }
+            cleanupElements(elmsToUpdate);
+        },
+        reset: () => {
+            elmsToUpdate.forEach((elms) => elms.forEach(forceUpdate));
+            cleanupElements(elmsToUpdate);
+        },
+    };
+};
+
+const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {
+    let states = new Map(Object.entries(defaultState !== null && defaultState !== void 0 ? defaultState : {}));
+    const handlers = {
+        dispose: [],
+        get: [],
+        set: [],
+        reset: [],
+    };
+    const reset = () => {
+        states = new Map(Object.entries(defaultState !== null && defaultState !== void 0 ? defaultState : {}));
+        handlers.reset.forEach((cb) => cb());
+    };
+    const dispose = () => {
+        // Call first dispose as resetting the state would
+        // cause less updates ;)
+        handlers.dispose.forEach((cb) => cb());
+        reset();
+    };
+    const get = (propName) => {
+        handlers.get.forEach((cb) => cb(propName));
+        return states.get(propName);
+    };
+    const set = (propName, value) => {
+        const oldValue = states.get(propName);
+        if (shouldUpdate(value, oldValue, propName)) {
+            states.set(propName, value);
+            handlers.set.forEach((cb) => cb(propName, value, oldValue));
+        }
+    };
+    const state = (typeof Proxy === 'undefined'
+        ? {}
+        : new Proxy(defaultState, {
+            get(_, propName) {
+                return get(propName);
+            },
+            ownKeys(_) {
+                return Array.from(states.keys());
+            },
+            getOwnPropertyDescriptor() {
+                return {
+                    enumerable: true,
+                    configurable: true,
+                };
+            },
+            has(_, propName) {
+                return states.has(propName);
+            },
+            set(_, propName, value) {
+                set(propName, value);
+                return true;
+            },
+        }));
+    const on = (eventName, callback) => {
+        handlers[eventName].push(callback);
+        return () => {
+            removeFromArray(handlers[eventName], callback);
+        };
+    };
+    const onChange = (propName, cb) => {
+        const unSet = on('set', (key, newValue) => {
+            if (key === propName) {
+                cb(newValue);
+            }
+        });
+        const unReset = on('reset', () => cb(defaultState[propName]));
+        return () => {
+            unSet();
+            unReset();
+        };
+    };
+    const use = (...subscriptions) => {
+        const unsubs = subscriptions.reduce((unsubs, subscription) => {
+            if (subscription.set) {
+                unsubs.push(on('set', subscription.set));
+            }
+            if (subscription.get) {
+                unsubs.push(on('get', subscription.get));
+            }
+            if (subscription.reset) {
+                unsubs.push(on('reset', subscription.reset));
+            }
+            if (subscription.dispose) {
+                unsubs.push(on('dispose', subscription.dispose));
+            }
+            return unsubs;
+        }, []);
+        return () => unsubs.forEach((unsub) => unsub());
+    };
+    const forceUpdate = (key) => {
+        const oldValue = states.get(key);
+        handlers.set.forEach((cb) => cb(key, oldValue, oldValue));
+    };
+    return {
+        state,
+        get,
+        set,
+        on,
+        onChange,
+        use,
+        dispose,
+        reset,
+        forceUpdate,
+    };
+};
+const removeFromArray = (array, item) => {
+    const index = array.indexOf(item);
+    if (index >= 0) {
+        array[index] = array[array.length - 1];
+        array.length--;
+    }
+};
+
+const createStore = (defaultState, shouldUpdate) => {
+    const map = createObservableMap(defaultState, shouldUpdate);
+    map.use(stencilSubscription());
+    return map;
+};
+
+const createRouter = (opts) => {
+    var _a;
+    const win = window;
+    const url = new URL(win.location.href);
+    const parseURL = (_a = opts === null || opts === void 0 ? void 0 : opts.parseURL) !== null && _a !== void 0 ? _a : DEFAULT_PARSE_URL;
+    const { state, onChange, dispose } = createStore({
+        url,
+        activePath: parseURL(url)
+    }, (newV, oldV, prop) => {
+        if (prop === 'url') {
+            return newV.href !== oldV.href;
+        }
+        return newV !== oldV;
+    });
+    const push = (href) => {
+        history.pushState(null, null, href);
+        const url = new URL(href, document.baseURI);
+        state.url = url;
+        state.activePath = parseURL(url);
+    };
+    const match = (routes) => {
+        const { activePath } = state;
+        for (let route of routes) {
+            const params = matchPath(activePath, route.path);
+            if (params) {
+                if (route.to != null) {
+                    const to = (typeof route.to === 'string')
+                        ? route.to
+                        : route.to(activePath);
+                    push(to);
+                    return match(routes);
+                }
+                else {
+                    return { params, route };
+                }
+            }
+        }
+        return undefined;
+    };
+    const navigationChanged = () => {
+        const url = new URL(win.location.href);
+        state.url = url;
+        state.activePath = parseURL(url);
+    };
+    const Switch = (_, childrenRoutes) => {
+        const result = match(childrenRoutes);
+        if (result) {
+            if (typeof result.route.jsx === 'function') {
+                return result.route.jsx(result.params);
+            }
+            else {
+                return result.route.jsx;
+            }
+        }
+    };
+    const disposeRouter = () => {
+        win.removeEventListener('popstate', navigationChanged);
+        dispose();
+    };
+    const router = {
+        Switch,
+        get url() {
+            return state.url;
+        },
+        get activePath() {
+            return state.activePath;
+        },
+        push,
+        onChange: onChange,
+        dispose: disposeRouter,
+    };
+    // Initial update
+    navigationChanged();
+    // Listen URL changes
+    win.addEventListener('popstate', navigationChanged);
+    return router;
+};
+const Route = (props, children) => {
+    var _a;
+    if ('to' in props) {
+        return {
+            path: props.path,
+            to: props.to,
+        };
+    }
+    return {
+        path: props.path,
+        id: props.id,
+        jsx: (_a = props.render) !== null && _a !== void 0 ? _a : children,
+    };
+};
+const matchPath = (pathname, path) => {
+    if (typeof path === 'string') {
+        if (path === pathname) {
+            return {};
+        }
+    }
+    else if (typeof path === 'function') {
+        const params = path(pathname);
+        if (params) {
+            return params === true
+                ? {}
+                : { ...params };
+        }
+    }
+    else {
+        const results = path.exec(pathname);
+        if (results) {
+            path.lastIndex = 0;
+            return { ...results };
+        }
+    }
+    return undefined;
+};
+const DEFAULT_PARSE_URL = (url) => {
+    return url.pathname.toLowerCase();
+};
+
+/**
+ * TS adaption of https://github.com/pillarjs/path-to-regexp/blob/master/index.js
+ */
+/**
+ * Default configs.
+ */
+const DEFAULT_DELIMITER = '/';
+const DEFAULT_DELIMITERS = './';
+/**
+ * The main path matching regexp utility.
+ */
+const PATH_REGEXP = new RegExp([
+    // Match escaped characters that would otherwise appear in future matches.
+    // This allows the user to escape special characters that won't transform.
+    '(\\\\.)',
+    // Match Express-style parameters and un-named parameters with a prefix
+    // and optional suffixes. Matches appear as:
+    //
+    // "/:test(\\d+)?" => ["/", "test", "\d+", undefined, "?"]
+    // "/route(\\d+)"  => [undefined, undefined, undefined, "\d+", undefined]
+    '(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?'
+].join('|'), 'g');
+/**
+ * Parse a string for the raw tokens.
+ */
+const parse = (str, options) => {
+    var tokens = [];
+    var key = 0;
+    var index = 0;
+    var path = '';
+    var defaultDelimiter = (options && options.delimiter) || DEFAULT_DELIMITER;
+    var delimiters = (options && options.delimiters) || DEFAULT_DELIMITERS;
+    var pathEscaped = false;
+    var res;
+    while ((res = PATH_REGEXP.exec(str)) !== null) {
+        var m = res[0];
+        var escaped = res[1];
+        var offset = res.index;
+        path += str.slice(index, offset);
+        index = offset + m.length;
+        // Ignore already escaped sequences.
+        if (escaped) {
+            path += escaped[1];
+            pathEscaped = true;
+            continue;
+        }
+        var prev = '';
+        var next = str[index];
+        var name = res[2];
+        var capture = res[3];
+        var group = res[4];
+        var modifier = res[5];
+        if (!pathEscaped && path.length) {
+            var k = path.length - 1;
+            if (delimiters.indexOf(path[k]) > -1) {
+                prev = path[k];
+                path = path.slice(0, k);
+            }
+        }
+        // Push the current path onto the tokens.
+        if (path) {
+            tokens.push(path);
+            path = '';
+            pathEscaped = false;
+        }
+        var partial = prev !== '' && next !== undefined && next !== prev;
+        var repeat = modifier === '+' || modifier === '*';
+        var optional = modifier === '?' || modifier === '*';
+        var delimiter = prev || defaultDelimiter;
+        var pattern = capture || group;
+        tokens.push({
+            name: name || key++,
+            prefix: prev,
+            delimiter: delimiter,
+            optional: optional,
+            repeat: repeat,
+            partial: partial,
+            pattern: pattern ? escapeGroup(pattern) : '[^' + escapeString(delimiter) + ']+?'
+        });
+    }
+    // Push any remaining characters.
+    if (path || index < str.length) {
+        tokens.push(path + str.substr(index));
+    }
+    return tokens;
+};
+/**
+ * Escape a regular expression string.
+ */
+const escapeString = (str) => {
+    return str.replace(/([.+*?=^!:${}()[\]|/\\])/g, '\\$1');
+};
+/**
+ * Escape the capturing group by escaping special characters and meaning.
+ */
+const escapeGroup = (group) => {
+    return group.replace(/([=!:$/()])/g, '\\$1');
+};
+/**
+ * Get the flags for a regexp from the options.
+ */
+const flags = (options) => {
+    return options && options.sensitive ? '' : 'i';
+};
+/**
+ * Pull out keys from a regexp.
+ */
+const regexpToRegexp = (path, keys) => {
+    if (!keys)
+        return path;
+    // Use a negative lookahead to match only capturing groups.
+    var groups = path.source.match(/\((?!\?)/g);
+    if (groups) {
+        for (var i = 0; i < groups.length; i++) {
+            keys.push({
+                name: i,
+                prefix: null,
+                delimiter: null,
+                optional: false,
+                repeat: false,
+                partial: false,
+                pattern: null
+            });
+        }
+    }
+    return path;
+};
+/**
+ * Transform an array into a regexp.
+ */
+const arrayToRegexp = (path, keys, options) => {
+    var parts = [];
+    for (var i = 0; i < path.length; i++) {
+        parts.push(pathToRegexp(path[i], keys, options).source);
+    }
+    return new RegExp('(?:' + parts.join('|') + ')', flags(options));
+};
+/**
+ * Create a path regexp from string input.
+ */
+const stringToRegexp = (path, keys, options) => {
+    return tokensToRegExp(parse(path, options), keys, options);
+};
+/**
+ * Expose a function for taking tokens and returning a RegExp.
+ */
+const tokensToRegExp = (tokens, keys, options) => {
+    options = options || {};
+    var strict = options.strict;
+    var end = options.end !== false;
+    var delimiter = escapeString(options.delimiter || DEFAULT_DELIMITER);
+    var delimiters = options.delimiters || DEFAULT_DELIMITERS;
+    var endsWith = [].concat(options.endsWith || []).map(escapeString).concat('$').join('|');
+    var route = '';
+    var isEndDelimited = false;
+    // Iterate over the tokens and create our regexp string.
+    for (var i = 0; i < tokens.length; i++) {
+        var token = tokens[i];
+        if (typeof token === 'string') {
+            route += escapeString(token);
+            isEndDelimited = i === tokens.length - 1 && delimiters.indexOf(token[token.length - 1]) > -1;
+        }
+        else {
+            var prefix = escapeString(token.prefix || '');
+            var capture = token.repeat
+                ? '(?:' + token.pattern + ')(?:' + prefix + '(?:' + token.pattern + '))*'
+                : token.pattern;
+            if (keys)
+                keys.push(token);
+            if (token.optional) {
+                if (token.partial) {
+                    route += prefix + '(' + capture + ')?';
+                }
+                else {
+                    route += '(?:' + prefix + '(' + capture + '))?';
+                }
+            }
+            else {
+                route += prefix + '(' + capture + ')';
+            }
+        }
+    }
+    if (end) {
+        if (!strict)
+            route += '(?:' + delimiter + ')?';
+        route += endsWith === '$' ? '$' : '(?=' + endsWith + ')';
+    }
+    else {
+        if (!strict)
+            route += '(?:' + delimiter + '(?=' + endsWith + '))?';
+        if (!isEndDelimited)
+            route += '(?=' + delimiter + '|' + endsWith + ')';
+    }
+    return new RegExp('^' + route, flags(options));
+};
+/**
+ * Normalize the given path string, returning a regular expression.
+ *
+ * An empty array can be passed in for the keys, which will hold the
+ * placeholder key descriptions. For example, using `/user/:id`, `keys` will
+ * contain `[{ name: 'id', delimiter: '/', optional: false, repeat: false }]`.
+ */
+const pathToRegexp = (path, keys, options) => {
+    if (path instanceof RegExp) {
+        return regexpToRegexp(path, keys);
+    }
+    if (Array.isArray(path)) {
+        return arrayToRegexp(path, keys, options);
+    }
+    return stringToRegexp(path, keys, options);
+};
+
+let cacheCount = 0;
+const patternCache = {};
+const cacheLimit = 10000;
+// Memoized function for creating the path match regex
+const compilePath = (pattern, options) => {
+    const cacheKey = `${options.end}${options.strict}`;
+    const cache = patternCache[cacheKey] || (patternCache[cacheKey] = {});
+    const cachePattern = JSON.stringify(pattern);
+    if (cache[cachePattern]) {
+        return cache[cachePattern];
+    }
+    const keys = [];
+    const re = pathToRegexp(pattern, keys, options);
+    const compiledPattern = { re, keys };
+    if (cacheCount < cacheLimit) {
+        cache[cachePattern] = compiledPattern;
+        cacheCount += 1;
+    }
+    return compiledPattern;
+};
+const match = (pathname, options = {}) => {
+    const { exact = false, strict = false } = options;
+    const { re, keys } = compilePath(pathname, { end: exact, strict });
+    return (path) => {
+        const match = re.exec(path);
+        if (!match) {
+            return undefined;
+        }
+        const [url, ...values] = match;
+        const isExact = path === url;
+        if (exact && !isExact) {
+            return undefined;
+        }
+        return keys.reduce((memo, key, index) => {
+            memo[key.name] = values[index];
+            return memo;
+        }, {});
+    };
+};
+
+const Router = createRouter();
+const PosRouter = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.uri = undefined;
+  }
+  linkClicked(e) {
+    this.navigate(e.detail);
+  }
+  componentWillLoad() {
+    this.updateUri();
+    Router.onChange('url', () => {
+      this.updateUri();
+    });
+  }
+  navigate(uri) {
+    Router.push('?uri=' + encodeURIComponent(uri));
+  }
+  updateUri() {
+    this.uri = new URLSearchParams(window.location.search).get('uri') || window.location.href;
+  }
+  render() {
+    console.log('render router', this.uri);
+    return (h(Router.Switch, null, h(Route, { path: match('', { exact: false }) }, h("pos-navigation-bar", { uri: this.uri }), h("pos-resource", { key: this.uri, uri: this.uri }, h("pos-type-router", null)))));
+  }
+};
+
+var AvailableApps;
+(function (AvailableApps) {
+  AvailableApps["Generic"] = "pos-app-generic";
+  AvailableApps["RdfDocument"] = "pos-app-rdf-document";
+  AvailableApps["DocumentViewer"] = "pos-app-document-viewer";
+  AvailableApps["ImageViewer"] = "pos-app-image-viewer";
+})(AvailableApps || (AvailableApps = {}));
+function selectAppForTypes(types) {
+  if (types.some(type => type.uri === 'http://www.w3.org/2007/ont/link#RDFDocument')) {
+    return AvailableApps.RdfDocument;
+  }
+  else if (types.some(type => type.uri === 'http://www.w3.org/ns/iana/media-types/application/pdf#Resource')) {
+    return AvailableApps.DocumentViewer;
+  }
+  else if (types.some(type => type.uri === 'http://purl.org/dc/terms/Image')) {
+    return AvailableApps.ImageViewer;
+  }
+  else if (types.some(type => type.uri === 'http://www.w3.org/2007/ont/link#Document')) {
+    return AvailableApps.DocumentViewer;
+  }
+  else {
+    return AvailableApps.Generic;
+  }
+}
+
+const PosTypeRouter = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.subscribeResource = createEvent(this, "pod-os:resource", 7);
+    this.receiveResource = (resource) => {
+      this.types = resource.types();
+    };
+    this.types = undefined;
+  }
+  componentWillLoad() {
+    subscribeResource(this);
+  }
+  render() {
+    return this.types ? this.renderApp() : null;
+  }
+  renderApp() {
+    const App = selectAppForTypes(this.types);
+    return h(App, null);
+  }
+};
+
+export { App as ion_app, Button as ion_button, Card as ion_card, CardContent as ion_card_content, CardHeader as ion_card_header, Content as ion_content, Footer as ion_footer, Header as ion_header, Icon as ion_icon, ProgressBar as ion_progress_bar, RippleEffect as ion_ripple_effect, Searchbar as ion_searchbar, SkeletonText as ion_skeleton_text, ToolbarTitle as ion_title, Toolbar as ion_toolbar, PosApp as pos_app, PosAppBrowser as pos_app_browser, PosImage as pos_image, PosLabel as pos_label, PosLogin as pos_login, PosNavigationBar as pos_navigation_bar, PosPicture as pos_picture, PosResource as pos_resource, PosRouter as pos_router, PosTypeRouter as pos_type_router };