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

package/dist/components/session.js

@@ -0,0 +1,202 @@
+import { getRenderingRef, forceUpdate } from '@stencil/core/internal/client';
+
+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 unwrap = (val) => (typeof val === 'function' ? val() : val);
+const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {
+    const unwrappedState = unwrap(defaultState);
+    let states = new Map(Object.entries(unwrappedState !== null && unwrappedState !== void 0 ? unwrappedState : {}));
+    const handlers = {
+        dispose: [],
+        get: [],
+        set: [],
+        reset: [],
+    };
+    const reset = () => {
+        var _a;
+        // When resetting the state, the default state may be a function - unwrap it to invoke it.
+        // otherwise, the state won't be properly reset
+        states = new Map(Object.entries((_a = unwrap(defaultState)) !== null && _a !== void 0 ? _a : {}));
+        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(unwrappedState, {
+            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);
+            }
+        });
+        // We need to unwrap the defaultState because it might be a function.
+        // Otherwise we might not be sending the right reset value.
+        const unReset = on('reset', () => cb(unwrap(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 getIdpUrl = () => prompt('Please enter your Identity Provider URL', 'http://localhost:3000');
+
+const store = createStore({
+  getIdpUrl,
+  isLoggedIn: false,
+  webId: '',
+});
+
+export { store as s };

package/dist/components/skeleton-text.js

@@ -0,0 +1,46 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as config, g as getIonMode } from './ionic-global.js';
+import { h as hostContext } from './theme.js';
+
+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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * 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(this);
+    return (h(Host, { class: {
+        [mode]: true,
+        'skeleton-text-animated': animated,
+        'in-media': inMedia,
+      } }, h("span", null, "\u00A0")));
+  }
+  get el() { return this; }
+  static get style() { return skeletonTextCss; }
+}, [1, "ion-skeleton-text", {
+    "animated": [4]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ion-skeleton-text"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ion-skeleton-text":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SkeletonText);
+      }
+      break;
+  } });
+}
+
+export { SkeletonText as S, defineCustomElement as d };

package/dist/components/spinner.js

@@ -0,0 +1,224 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as config, g as getIonMode } from './ionic-global.js';
+import { c as createColorClasses } from './theme.js';
+
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+const spinners = {
+  bubbles: {
+    dur: 1000,
+    circles: 9,
+    fn: (dur, index, total) => {
+      const animationDelay = `${(dur * index) / total - dur}ms`;
+      const angle = (2 * Math.PI * index) / total;
+      return {
+        r: 5,
+        style: {
+          top: `${9 * Math.sin(angle)}px`,
+          left: `${9 * Math.cos(angle)}px`,
+          'animation-delay': animationDelay,
+        },
+      };
+    },
+  },
+  circles: {
+    dur: 1000,
+    circles: 8,
+    fn: (dur, index, total) => {
+      const step = index / total;
+      const animationDelay = `${dur * step - dur}ms`;
+      const angle = 2 * Math.PI * step;
+      return {
+        r: 5,
+        style: {
+          top: `${9 * Math.sin(angle)}px`,
+          left: `${9 * Math.cos(angle)}px`,
+          'animation-delay': animationDelay,
+        },
+      };
+    },
+  },
+  circular: {
+    dur: 1400,
+    elmDuration: true,
+    circles: 1,
+    fn: () => {
+      return {
+        r: 20,
+        cx: 48,
+        cy: 48,
+        fill: 'none',
+        viewBox: '24 24 48 48',
+        transform: 'translate(0,0)',
+        style: {},
+      };
+    },
+  },
+  crescent: {
+    dur: 750,
+    circles: 1,
+    fn: () => {
+      return {
+        r: 26,
+        style: {},
+      };
+    },
+  },
+  dots: {
+    dur: 750,
+    circles: 3,
+    fn: (_, index) => {
+      const animationDelay = -(110 * index) + 'ms';
+      return {
+        r: 6,
+        style: {
+          left: `${9 - 9 * index}px`,
+          'animation-delay': animationDelay,
+        },
+      };
+    },
+  },
+  lines: {
+    dur: 1000,
+    lines: 8,
+    fn: (dur, index, total) => {
+      const transform = `rotate(${(360 / total) * index + (index < total / 2 ? 180 : -180)}deg)`;
+      const animationDelay = `${(dur * index) / total - dur}ms`;
+      return {
+        y1: 14,
+        y2: 26,
+        style: {
+          transform: transform,
+          'animation-delay': animationDelay,
+        },
+      };
+    },
+  },
+  'lines-small': {
+    dur: 1000,
+    lines: 8,
+    fn: (dur, index, total) => {
+      const transform = `rotate(${(360 / total) * index + (index < total / 2 ? 180 : -180)}deg)`;
+      const animationDelay = `${(dur * index) / total - dur}ms`;
+      return {
+        y1: 12,
+        y2: 20,
+        style: {
+          transform: transform,
+          'animation-delay': animationDelay,
+        },
+      };
+    },
+  },
+  'lines-sharp': {
+    dur: 1000,
+    lines: 12,
+    fn: (dur, index, total) => {
+      const transform = `rotate(${30 * index + (index < 6 ? 180 : -180)}deg)`;
+      const animationDelay = `${(dur * index) / total - dur}ms`;
+      return {
+        y1: 17,
+        y2: 29,
+        style: {
+          transform: transform,
+          'animation-delay': animationDelay,
+        },
+      };
+    },
+  },
+  'lines-sharp-small': {
+    dur: 1000,
+    lines: 12,
+    fn: (dur, index, total) => {
+      const transform = `rotate(${30 * index + (index < 6 ? 180 : -180)}deg)`;
+      const animationDelay = `${(dur * index) / total - dur}ms`;
+      return {
+        y1: 12,
+        y2: 20,
+        style: {
+          transform: transform,
+          'animation-delay': animationDelay,
+        },
+      };
+    },
+  },
+};
+const SPINNERS = spinners;
+
+const spinnerCss = ":host{display:inline-block;position:relative;width:28px;height:28px;color:var(--color);user-select:none}:host(.ion-color){color:var(--ion-color-base)}svg{transform-origin:center;position:absolute;top:0;left:0;width:100%;height:100%;transform:translateZ(0)}[dir=rtl] svg,:host-context([dir=rtl]) svg{transform-origin:calc(100% - center)}:host(.spinner-lines) line,:host(.spinner-lines-small) line{stroke-width:7px}:host(.spinner-lines-sharp) line,:host(.spinner-lines-sharp-small) line{stroke-width:4px}:host(.spinner-lines) line,:host(.spinner-lines-small) line,:host(.spinner-lines-sharp) line,:host(.spinner-lines-sharp-small) line{stroke-linecap:round;stroke:currentColor}:host(.spinner-lines) svg,:host(.spinner-lines-small) svg,:host(.spinner-lines-sharp) svg,:host(.spinner-lines-sharp-small) svg{animation:spinner-fade-out 1s linear infinite}:host(.spinner-bubbles) svg{animation:spinner-scale-out 1s linear infinite;fill:currentColor}:host(.spinner-circles) svg{animation:spinner-fade-out 1s linear infinite;fill:currentColor}:host(.spinner-crescent) circle{fill:transparent;stroke-width:4px;stroke-dasharray:128px;stroke-dashoffset:82px;stroke:currentColor}:host(.spinner-crescent) svg{animation:spinner-rotate 1s linear infinite}:host(.spinner-dots) circle{stroke-width:0;fill:currentColor}:host(.spinner-dots) svg{animation:spinner-dots 1s linear infinite}:host(.spinner-circular) svg{animation:spinner-circular linear infinite}:host(.spinner-circular) circle{animation:spinner-circular-inner ease-in-out infinite;stroke:currentColor;stroke-dasharray:80px, 200px;stroke-dashoffset:0px;stroke-width:5.6;fill:none}:host(.spinner-paused),:host(.spinner-paused) svg,:host(.spinner-paused) circle{animation-play-state:paused}@keyframes spinner-fade-out{0%{opacity:1}100%{opacity:0}}@keyframes spinner-scale-out{0%{transform:scale(1, 1)}100%{transform:scale(0, 0)}}@keyframes spinner-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes spinner-dots{0%{transform:scale(1, 1);opacity:0.9}50%{transform:scale(0.4, 0.4);opacity:0.3}100%{transform:scale(1, 1);opacity:0.9}}@keyframes spinner-circular{100%{transform:rotate(360deg)}}@keyframes spinner-circular-inner{0%{stroke-dasharray:1px, 200px;stroke-dashoffset:0px}50%{stroke-dasharray:100px, 200px;stroke-dashoffset:-15px}100%{stroke-dasharray:100px, 200px;stroke-dashoffset:-125px}}";
+
+const Spinner = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * If `true`, the spinner's animation will be paused.
+     */
+    this.paused = false;
+  }
+  getName() {
+    const spinnerName = this.name || config.get('spinner');
+    const mode = getIonMode(this);
+    if (spinnerName) {
+      return spinnerName;
+    }
+    return mode === 'ios' ? 'lines' : 'circular';
+  }
+  render() {
+    var _a;
+    const self = this;
+    const mode = getIonMode(self);
+    const spinnerName = self.getName();
+    const spinner = (_a = SPINNERS[spinnerName]) !== null && _a !== void 0 ? _a : SPINNERS['lines'];
+    const duration = typeof self.duration === 'number' && self.duration > 10 ? self.duration : spinner.dur;
+    const svgs = [];
+    if (spinner.circles !== undefined) {
+      for (let i = 0; i < spinner.circles; i++) {
+        svgs.push(buildCircle(spinner, duration, i, spinner.circles));
+      }
+    }
+    else if (spinner.lines !== undefined) {
+      for (let i = 0; i < spinner.lines; i++) {
+        svgs.push(buildLine(spinner, duration, i, spinner.lines));
+      }
+    }
+    return (h(Host, { class: createColorClasses(self.color, {
+        [mode]: true,
+        [`spinner-${spinnerName}`]: true,
+        'spinner-paused': self.paused || config.getBoolean('_testing'),
+      }), role: "progressbar", style: spinner.elmDuration ? { animationDuration: duration + 'ms' } : {} }, svgs));
+  }
+  static get style() { return spinnerCss; }
+}, [1, "ion-spinner", {
+    "color": [513],
+    "duration": [2],
+    "name": [1],
+    "paused": [4]
+  }]);
+const buildCircle = (spinner, duration, index, total) => {
+  const data = spinner.fn(duration, index, total);
+  data.style['animation-duration'] = duration + 'ms';
+  return (h("svg", { viewBox: data.viewBox || '0 0 64 64', style: data.style }, h("circle", { transform: data.transform || 'translate(32,32)', cx: data.cx, cy: data.cy, r: data.r, style: spinner.elmDuration ? { animationDuration: duration + 'ms' } : {} })));
+};
+const buildLine = (spinner, duration, index, total) => {
+  const data = spinner.fn(duration, index, total);
+  data.style['animation-duration'] = duration + 'ms';
+  return (h("svg", { viewBox: data.viewBox || '0 0 64 64', style: data.style }, h("line", { transform: "translate(32,32)", y1: data.y1, y2: data.y2 })));
+};
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ion-spinner"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ion-spinner":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Spinner);
+      }
+      break;
+  } });
+}
+
+export { SPINNERS as S, Spinner as a, defineCustomElement as d };

package/dist/{custom-elements → components}/status-tap.js

@@ -1,6 +1,10 @@
 import { readTask, writeTask } from '@stencil/core/internal/client';
-import { c as componentOnReady } from './index.js';
+import { f as findClosestIonContent, s as scrollToTop } from './index5.js';
+import { d as componentOnReady } from './helpers.js';
 
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 const startStatusTap = () => {
   const win = window;
   win.addEventListener('statusTap', () => {
@@ -11,9 +15,9 @@ const startStatusTap = () => {
       if (!el) {
         return;
       }
-      const contentEl = el.closest('ion-content');
+      const contentEl = findClosestIonContent(el);
       if (contentEl) {
-        new Promise(resolve => componentOnReady(contentEl, resolve)).then(() => {
+        new Promise((resolve) => componentOnReady(contentEl, resolve)).then(() => {
           writeTask(async () => {
             /**
              * If scrolling and user taps status bar,
@@ -23,7 +27,7 @@ const startStatusTap = () => {
              * any in-progress momentum scrolling.
              */
             contentEl.style.setProperty('--overflow', 'hidden');
-            await contentEl.scrollToTop(300);
+            await scrollToTop(contentEl, 300);
             contentEl.style.removeProperty('--overflow');
           });
         });

package/dist/{custom-elements → components}/swipe-back.js

@@ -1,24 +1,49 @@
-import { d as createGesture, e as clamp } from './index.js';
+import { l as clamp } from './helpers.js';
+import { i as isRTL } from './dir.js';
+import { createGesture } from './index9.js';
 
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 const createSwipeBackGesture = (el, canStartHandler, onStartHandler, onMoveHandler, onEndHandler) => {
   const win = el.ownerDocument.defaultView;
+  const rtl = isRTL(el);
+  /**
+   * Determine if a gesture is near the edge
+   * of the screen. If true, then the swipe
+   * to go back gesture should proceed.
+   */
+  const isAtEdge = (detail) => {
+    const threshold = 50;
+    const { startX } = detail;
+    if (rtl) {
+      return startX >= win.innerWidth - threshold;
+    }
+    return startX <= threshold;
+  };
+  const getDeltaX = (detail) => {
+    return rtl ? -detail.deltaX : detail.deltaX;
+  };
+  const getVelocityX = (detail) => {
+    return rtl ? -detail.velocityX : detail.velocityX;
+  };
   const canStart = (detail) => {
-    return detail.startX <= 50 && canStartHandler();
+    return isAtEdge(detail) && canStartHandler();
   };
   const onMove = (detail) => {
     // set the transition animation's progress
-    const delta = detail.deltaX;
+    const delta = getDeltaX(detail);
     const stepValue = delta / win.innerWidth;
     onMoveHandler(stepValue);
   };
   const onEnd = (detail) => {
     // the swipe back gesture has ended
-    const delta = detail.deltaX;
+    const delta = getDeltaX(detail);
     const width = win.innerWidth;
     const stepValue = delta / width;
-    const velocity = detail.velocityX;
+    const velocity = getVelocityX(detail);
     const z = width / 2.0;
-    const shouldComplete = velocity >= 0 && (velocity > 0.2 || detail.deltaX > z);
+    const shouldComplete = velocity >= 0 && (velocity > 0.2 || delta > z);
     const missing = shouldComplete ? 1 - stepValue : stepValue;
     const missingDistance = missing * width;
     let realDur = 0;
@@ -26,12 +51,7 @@ const createSwipeBackGesture = (el, canStartHandler, onStartHandler, onMoveHandl
       const dur = missingDistance / Math.abs(velocity);
       realDur = Math.min(dur, 540);
     }
-    /**
-     * TODO: stepValue can sometimes return negative values
-     * or values greater than 1 which should not be possible.
-     * Need to investigate more to find where the issue is.
-     */
-    onEndHandler(shouldComplete, (stepValue <= 0) ? 0.01 : clamp(0, stepValue, 0.9999), realDur);
+    onEndHandler(shouldComplete, stepValue <= 0 ? 0.01 : clamp(0, stepValue, 0.9999), realDur);
   };
   return createGesture({
     el,
@@ -41,7 +61,7 @@ const createSwipeBackGesture = (el, canStartHandler, onStartHandler, onMoveHandl
     canStart,
     onStart: onStartHandler,
     onMove,
-    onEnd
+    onEnd,
   });
 };
 

package/dist/{esm/theme-d21826a7.js → components/theme.js}

@@ -1,3 +1,6 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 const hostContext = (selector, el) => {
   return el.closest(selector) !== null;
 };
@@ -5,21 +8,22 @@ const hostContext = (selector, el) => {
  * Create the mode and color classes for the component based on the classes passed in
  */
 const createColorClasses = (color, cssClassMap) => {
-  return (typeof color === 'string' && color.length > 0) ? Object.assign({ 'ion-color': true, [`ion-color-${color}`]: true }, cssClassMap) : cssClassMap;
+  return typeof color === 'string' && color.length > 0
+    ? Object.assign({ 'ion-color': true, [`ion-color-${color}`]: true }, cssClassMap) : cssClassMap;
 };
 const getClassList = (classes) => {
   if (classes !== undefined) {
     const array = Array.isArray(classes) ? classes : classes.split(' ');
     return array
-      .filter(c => c != null)
-      .map(c => c.trim())
-      .filter(c => c !== '');
+      .filter((c) => c != null)
+      .map((c) => c.trim())
+      .filter((c) => c !== '');
   }
   return [];
 };
 const getClassMap = (classes) => {
   const map = {};
-  getClassList(classes).forEach(c => map[c] = true);
+  getClassList(classes).forEach((c) => (map[c] = true));
   return map;
 };
 const SCHEME = /^[a-z][a-z0-9+\-.]*:/;

package/dist/components/title.js

@@ -0,0 +1,66 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { g as getIonMode } from './ionic-global.js';
+import { c as createColorClasses } from './theme.js';
+
+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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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(this);
+    const size = this.getSize();
+    return (h(Host, { class: createColorClasses(this.color, {
+        [mode]: true,
+        [`title-${size}`]: true,
+        'title-rtl': document.dir === 'rtl',
+      }) }, h("div", { class: "toolbar-title" }, h("slot", null))));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "size": ["sizeChanged"]
+  }; }
+  static get style() { return {
+    ios: titleIosCss,
+    md: titleMdCss
+  }; }
+}, [33, "ion-title", {
+    "color": [513],
+    "size": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ion-title"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ion-title":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ToolbarTitle);
+      }
+      break;
+  } });
+}
+
+export { ToolbarTitle as T, defineCustomElement as d };