@pod-os/elements 0.17.1-fef97c9.0 → 0.18.1-a971174.0

package/dist/cjs/{ion-app_32.cjs.entry.js → ion-card_26.cjs.entry.js}

@@ -3,126 +3,21 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b86da440.js');
-const hardwareBackButton = require('./hardware-back-button-7f7e29d9.js');
-const index$1 = require('./index-5fa17650.js');
-const ionicGlobal = require('./ionic-global-dcebbee3.js');
 const helpers = require('./helpers-95c22e6d.js');
 const theme = require('./theme-187bbc7d.js');
+const ionicGlobal = require('./ionic-global-dcebbee3.js');
 const dir = require('./dir-e6b438e6.js');
-const index$2 = require('./index-223c32ee.js');
-const keyboardController = require('./keyboard-controller-736f8327.js');
-const index$3 = require('./index-3129b55a.js');
+const index$1 = require('./index-3129b55a.js');
 const BrokenFile = require('./BrokenFile-426cd057.js');
-const index$4 = require('./index-480a0aeb.js');
+const index$2 = require('./index-480a0aeb.js');
 const ResourceAware = require('./ResourceAware-7b6501ae.js');
 require('./gesture-controller-85b9b0a5.js');
 const overlays = require('./overlays-a44ab21f.js');
 const PodOsAware = require('./PodOsAware-a16ddb44.js');
 require('./index-957a289d.js');
-require('./keyboard-227ae91c.js');
-require('./capacitor-5139e8a2.js');
+require('./hardware-back-button-7f7e29d9.js');
 require('./framework-delegate-a257df68.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 IonAppStyle0 = appCss;
-
-const App = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    componentDidLoad() {
-        {
-            rIC(async () => {
-                const isHybrid = ionicGlobal.isPlatform(window, 'hybrid');
-                if (!ionicGlobal.config.getBoolean('_testing')) {
-                    Promise.resolve().then(function () { return require('./index-865239c9.js'); }).then((module) => module.startTapClick(ionicGlobal.config));
-                }
-                if (ionicGlobal.config.getBoolean('statusTap', isHybrid)) {
-                    Promise.resolve().then(function () { return require('./status-tap-9a8ade8f.js'); }).then((module) => module.startStatusTap());
-                }
-                if (ionicGlobal.config.getBoolean('inputShims', needInputShims())) {
-                    /**
-                     * needInputShims() ensures that only iOS and Android
-                     * platforms proceed into this block.
-                     */
-                    const platform = ionicGlobal.isPlatform(window, 'ios') ? 'ios' : 'android';
-                    Promise.resolve().then(function () { return require('./input-shims-650ba6be.js'); }).then((module) => module.startInputShims(ionicGlobal.config, platform));
-                }
-                const hardwareBackButtonModule = await Promise.resolve().then(function () { return require('./hardware-back-button-7f7e29d9.js'); });
-                const supportsHardwareBackButtonEvents = isHybrid || hardwareBackButton.shouldUseCloseWatcher();
-                if (ionicGlobal.config.getBoolean('hardwareBackButton', supportsHardwareBackButtonEvents)) {
-                    hardwareBackButtonModule.startHardwareBackButton();
-                }
-                else {
-                    /**
-                     * If an app sets hardwareBackButton: false and experimentalCloseWatcher: true
-                     * then the close watcher will not be used.
-                     */
-                    if (hardwareBackButton.shouldUseCloseWatcher()) {
-                        index$1.printIonWarning('experimentalCloseWatcher was set to `true`, but hardwareBackButton was set to `false`. Both config options must be `true` for the Close Watcher API to be used.');
-                    }
-                    hardwareBackButtonModule.blockHardwareBackButton();
-                }
-                if (typeof window !== 'undefined') {
-                    Promise.resolve().then(function () { return require('./keyboard-172ec2d9.js'); }).then((module) => module.startKeyboardAssist(window));
-                }
-                Promise.resolve().then(function () { return require('./focus-visible-f844cf9d.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 = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: '6d7c57453b4be454690e8f1a0721f1e3da8f92aa', class: {
-                [mode]: true,
-                'ion-page': true,
-                'force-statusbar-padding': ionicGlobal.config.getBoolean('_forceStatusbarPadding'),
-            } }));
-    }
-    get el() { return index.getElement(this); }
-};
-const needInputShims = () => {
-    /**
-     * iOS always needs input shims
-     */
-    const needsShimsIOS = ionicGlobal.isPlatform(window, 'ios') && ionicGlobal.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 = ionicGlobal.isPlatform(window, 'android') && ionicGlobal.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 = IonAppStyle0;
+require('./index-5fa17650.js');
 
 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);contain:content;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)));-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:24px;margin-bottom:24px;border-radius:8px;transition:transform 500ms cubic-bezier(0.12, 0.72, 0.29, 1);font-size:0.875rem;box-shadow:0 4px 16px rgba(0, 0, 0, 0.12)}:host(.ion-activated){transform:scale3d(0.97, 0.97, 1)}";
 const IonCardIosStyle0 = cardIosCss;
@@ -233,868 +128,6 @@ CardHeader.style = {
     md: IonCardHeaderMdStyle0
 };
 
-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);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end: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}.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:100%;height:100%;box-shadow:inset -9px 0 9px 0 rgba(0, 0, 100, 0.03)}: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 IonContentStyle0 = contentCss;
-
-const Content = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.ionScrollStart = index.createEvent(this, "ionScrollStart", 7);
-        this.ionScroll = index.createEvent(this, "ionScroll", 7);
-        this.ionScrollEnd = index.createEvent(this, "ionScrollEnd", 7);
-        this.watchDog = null;
-        this.isScrolling = false;
-        this.lastScroll = 0;
-        this.queued = false;
-        this.cTop = -1;
-        this.cBottom = -1;
-        this.isMainContent = true;
-        this.resizeTimeout = null;
-        this.tabsElement = null;
-        // 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,
-        };
-        this.color = undefined;
-        this.fullscreen = false;
-        this.forceOverscroll = undefined;
-        this.scrollX = false;
-        this.scrollY = true;
-        this.scrollEvents = false;
-    }
-    connectedCallback() {
-        this.isMainContent = this.el.closest('ion-menu, ion-popover, ion-modal') === null;
-        /**
-         * The fullscreen content offsets need to be
-         * computed after the tab bar has loaded. Since
-         * lazy evaluation means components are not hydrated
-         * at the same time, we need to wait for the ionTabBarLoaded
-         * event to fire. This does not impact dist-custom-elements
-         * because there is no hydration there.
-         */
-        if (helpers.hasLazyBuild(this.el)) {
-            /**
-             * We need to cache the reference to the tabs.
-             * If just the content is unmounted then we won't
-             * be able to query for the closest tabs on disconnectedCallback
-             * since the content has been removed from the DOM tree.
-             */
-            const closestTabs = (this.tabsElement = this.el.closest('ion-tabs'));
-            if (closestTabs !== null) {
-                /**
-                 * When adding and removing the event listener
-                 * we need to make sure we pass the same function reference
-                 * otherwise the event listener will not be removed properly.
-                 * We can't only pass `this.resize` because "this" in the function
-                 * context becomes a reference to IonTabs instead of IonContent.
-                 *
-                 * Additionally, we listen for ionTabBarLoaded on the IonTabs
-                 * instance rather than the IonTabBar instance. It's possible for
-                 * a tab bar to be conditionally rendered/mounted. Since ionTabBarLoaded
-                 * bubbles, we can catch any instances of child tab bars loading by listening
-                 * on IonTabs.
-                 */
-                this.tabsLoadCallback = () => this.resize();
-                closestTabs.addEventListener('ionTabBarLoaded', this.tabsLoadCallback);
-            }
-        }
-    }
-    disconnectedCallback() {
-        this.onScrollEnd();
-        if (helpers.hasLazyBuild(this.el)) {
-            /**
-             * The event listener and tabs caches need to
-             * be cleared otherwise this will create a memory
-             * leak where the IonTabs instance can never be
-             * garbage collected.
-             */
-            const { tabsElement, tabsLoadCallback } = this;
-            if (tabsElement !== null && tabsLoadCallback !== undefined) {
-                tabsElement.removeEventListener('ionTabBarLoaded', tabsLoadCallback);
-            }
-            this.tabsElement = null;
-            this.tabsLoadCallback = undefined;
-        }
-    }
-    /**
-     * Rotating certain devices can update
-     * the safe area insets. As a result,
-     * the fullscreen feature on ion-content
-     * needs to be recalculated.
-     *
-     * We listen for "resize" because we
-     * do not care what the orientation of
-     * the device is. Other APIs
-     * such as ScreenOrientation or
-     * the deviceorientation event must have
-     * permission from the user first whereas
-     * the "resize" event does not.
-     *
-     * We also throttle the callback to minimize
-     * thrashing when quickly resizing a window.
-     */
-    onResize() {
-        if (this.resizeTimeout) {
-            clearTimeout(this.resizeTimeout);
-            this.resizeTimeout = null;
-        }
-        this.resizeTimeout = setTimeout(() => {
-            /**
-             * Resize should only happen
-             * if the content is visible.
-             * When the content is hidden
-             * then offsetParent will be null.
-             */
-            if (this.el.offsetParent === null) {
-                return;
-            }
-            this.resize();
-        }, 100);
-    }
-    shouldForceOverscroll() {
-        const { forceOverscroll } = this;
-        const mode = ionicGlobal.getIonMode(this);
-        return forceOverscroll === undefined ? mode === 'ios' && ionicGlobal.isPlatform('ios') : forceOverscroll;
-    }
-    resize() {
-        /**
-         * Only force update if the component is rendered in a browser context.
-         * Using `forceUpdate` in a server context with pre-rendering can lead to an infinite loop.
-         * The `hydrateDocument` function in `@stencil/core` will render the `ion-content`, but
-         * `forceUpdate` will trigger another render, locking up the server.
-         *
-         * TODO: Remove if STENCIL-834 determines Stencil will account for this.
-         */
-        {
-            if (this.fullscreen) {
-                index.readTask(() => this.readDimensions());
-            }
-            else if (this.cTop !== 0 || this.cBottom !== 0) {
-                this.cTop = this.cBottom = 0;
-                index.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;
-            index.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;
-            index.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) => helpers.componentOnReady(this.el, resolve));
-        }
-        return Promise.resolve(this.scrollEl);
-    }
-    /**
-     * Returns the background content element.
-     * @internal
-     */
-    async getBackgroundElement() {
-        if (!this.backgroundContentEl) {
-            await new Promise((resolve) => helpers.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() {
-        if (this.watchDog)
-            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 = dir.isRTL(el) ? 'rtl' : 'ltr';
-        const mode = ionicGlobal.getIonMode(this);
-        const forceOverscroll = this.shouldForceOverscroll();
-        const transitionShadow = mode === 'ios';
-        const TagType = isMainContent ? 'main' : 'div';
-        this.resize();
-        return (index.h(index.Host, { key: 'e13815c0e6f6095150b112d3a1aaf2f509aa0d0b', class: theme.createColorClasses(this.color, {
-                [mode]: true,
-                'content-sizing': theme.hostContext('ion-popover', this.el),
-                overscroll: forceOverscroll,
-                [`content-${rtl}`]: true,
-            }), style: {
-                '--offset-top': `${this.cTop}px`,
-                '--offset-bottom': `${this.cBottom}px`,
-            } }, index.h("div", { key: '8006c4a10d8f7dc83c646246961d018a8097236e', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), index.h(TagType, { key: '4dd2f58421493f7a4ca42f8f5d7b85cda8e320ea', 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" }, index.h("slot", { key: '37904f8f1d8319156cd901feb21930ef674fe0f7' })), transitionShadow ? (index.h("div", { class: "transition-effect" }, index.h("div", { class: "transition-cover" }), index.h("div", { class: "transition-shadow" }))) : null, index.h("slot", { key: '8f696583903af0548d064dca1a6bae060e127485', name: "fixed" })));
-    }
-    get el() { return index.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 = IonContentStyle0;
-
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-const handleFooterFade = (scrollEl, baseEl) => {
-    index.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 = helpers.clamp(0, 1 - distanceToStart / fadeDuration, 1);
-        index.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 IonFooterIosStyle0 = footerIosCss;
-
-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{box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)}.footer-md.ion-no-border{box-shadow:none}";
-const IonFooterMdStyle0 = footerMdCss;
-
-const Footer = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.keyboardCtrl = null;
-        this.checkCollapsibleFooter = () => {
-            const mode = ionicGlobal.getIonMode(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 ? index$2.findIonContent(pageEl) : null;
-                if (!contentEl) {
-                    index$2.printIonContentErrorMsg(this.el);
-                    return;
-                }
-                this.setupFadeFooter(contentEl);
-            }
-        };
-        this.setupFadeFooter = async (contentEl) => {
-            const scrollEl = (this.scrollEl = await index$2.getScrollElement(contentEl));
-            /**
-             * Handle fading of toolbars on scroll
-             */
-            this.contentScrollCallback = () => {
-                handleFooterFade(scrollEl, this.el);
-            };
-            scrollEl.addEventListener('scroll', this.contentScrollCallback);
-            handleFooterFade(scrollEl, this.el);
-        };
-        this.keyboardVisible = false;
-        this.collapse = undefined;
-        this.translucent = false;
-    }
-    componentDidLoad() {
-        this.checkCollapsibleFooter();
-    }
-    componentDidUpdate() {
-        this.checkCollapsibleFooter();
-    }
-    async connectedCallback() {
-        this.keyboardCtrl = await keyboardController.createKeyboardController(async (keyboardOpen, waitForResize) => {
-            /**
-             * If the keyboard is hiding, then we need to wait
-             * for the webview to resize. Otherwise, the footer
-             * will flicker before the webview resizes.
-             */
-            if (keyboardOpen === false && waitForResize !== undefined) {
-                await waitForResize;
-            }
-            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 = ionicGlobal.getIonMode(this);
-        const tabs = this.el.closest('ion-tabs');
-        const tabBar = tabs === null || tabs === void 0 ? void 0 : tabs.querySelector(':scope > ion-tab-bar');
-        return (index.h(index.Host, { key: 'dd8fa96901e8a09759a9621b6513f0492b3a6197', 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 && index.h("div", { key: '0fbb4ebf8e3951ff399f843dc11aab37fc48f8b7', class: "footer-background" }), index.h("slot", { key: 'ecb14a65e3b6960670446c4428e3095b3231a3b0' })));
-    }
-    get el() { return index.getElement(this); }
-};
-Footer.style = {
-    ios: IonFooterIosStyle0,
-    md: IonFooterMdStyle0
-};
-
-/*!
- * (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) => {
-    index.readTask(() => {
-        const scrollTop = scrollEl.scrollTop;
-        const scale = helpers.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) {
-            index.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, // TODO(FW-2832): type (IntersectionObserverEntry[] triggers errors which should be sorted)
-mainHeaderIndex, scrollHeaderIndex, scrollEl) => {
-    index.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) => {
-    index.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 = helpers.clamp(0, distanceToStart / fadeDuration, 1);
-        index.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:0px;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{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}ion-header.header-ios:not(.header-collapse-main):has(~ion-content ion-header.header-ios[collapse=condense],~ion-content ion-header.header-ios.header-collapse-condense){opacity:0}";
-const IonHeaderIosStyle0 = headerIosCss;
-
-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{box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)}.header-collapse-condense{display:none}.header-md.ion-no-border{box-shadow:none}";
-const IonHeaderMdStyle0 = headerMdCss;
-
-const Header = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.inheritedAttributes = {};
-        this.setupFadeHeader = async (contentEl, condenseHeader) => {
-            const scrollEl = (this.scrollEl = await index$2.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);
-        };
-        this.collapse = undefined;
-        this.translucent = false;
-    }
-    componentWillLoad() {
-        this.inheritedAttributes = helpers.inheritAriaAttributes(this.el);
-    }
-    componentDidLoad() {
-        this.checkCollapsibleHeader();
-    }
-    componentDidUpdate() {
-        this.checkCollapsibleHeader();
-    }
-    disconnectedCallback() {
-        this.destroyCollapsibleHeader();
-    }
-    async checkCollapsibleHeader() {
-        const mode = ionicGlobal.getIonMode(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 ? index$2.findIonContent(pageEl) : null;
-            // Cloned elements are always needed in iOS transition
-            index.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 ? index$2.findIonContent(pageEl) : null;
-            if (!contentEl) {
-                index$2.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) {
-            index$2.printIonContentErrorMsg(this.el);
-            return;
-        }
-        if (typeof IntersectionObserver === 'undefined') {
-            return;
-        }
-        this.scrollEl = await index$2.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);
-        index.writeTask(() => {
-            if (this.collapsibleMainHeader !== undefined) {
-                this.collapsibleMainHeader.classList.add('header-collapse-main');
-            }
-        });
-    }
-    render() {
-        const { translucent, inheritedAttributes } = this;
-        const mode = ionicGlobal.getIonMode(this);
-        const collapse = this.collapse || 'none';
-        // banner role must be at top level, so remove role if inside a menu
-        const roleType = theme.hostContext('ion-menu', this.el) ? 'none' : 'banner';
-        return (index.h(index.Host, Object.assign({ key: '9fa0af97b605f9fe98b13361bc3d1289745c549f', 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 && index.h("div", { key: '1a780d2625302f2465718e304bdd3794c89c9845', class: "header-background" }), index.h("slot", { key: 'b2b8557b44be40c590bfcc362ac4350f9f8b889e' })));
-    }
-    get el() { return index.getElement(this); }
-};
-Header.style = {
-    ios: IonHeaderIosStyle0,
-    md: IonHeaderMdStyle0
-};
-
 let CACHED_MAP;
 const getIconMap = () => {
   if (typeof window === 'undefined') {
@@ -1694,7 +727,7 @@ const Searchbar = class {
         this.autocapitalize = 'default';
         this.autocomplete = 'off';
         this.autocorrect = 'off';
-        this.cancelButtonIcon = ionicGlobal.config.get('backButtonIcon', index$3.arrowBackSharp);
+        this.cancelButtonIcon = ionicGlobal.config.get('backButtonIcon', index$1.arrowBackSharp);
         this.cancelButtonText = 'Cancel';
         this.clearIcon = undefined;
         this.debounce = undefined;
@@ -1949,8 +982,8 @@ const Searchbar = class {
         const { cancelButtonText, autocapitalize } = this;
         const animated = this.animated && ionicGlobal.config.getBoolean('animated', true);
         const mode = ionicGlobal.getIonMode(this);
-        const clearIcon = this.clearIcon || (mode === 'ios' ? index$3.closeCircle : index$3.closeSharp);
-        const searchIcon = this.searchIcon || (mode === 'ios' ? index$3.searchOutline : index$3.searchSharp);
+        const clearIcon = this.clearIcon || (mode === 'ios' ? index$1.closeCircle : index$1.closeSharp);
+        const searchIcon = this.searchIcon || (mode === 'ios' ? index$1.searchOutline : index$1.searchSharp);
         const shouldShowCancelButton = this.shouldShowCancelButton();
         const cancelButton = this.showCancelButton !== 'never' && (index.h("button", { key: '9c7b4d2e86d9bcd12e57c9a96723d3da598a3773', "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" }, index.h("div", { key: '1c25268a776134cccd29eb752898cb8ac0eed30f', "aria-hidden": "true" }, mode === 'md' ? (index.h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
         return (index.h(index.Host, { key: 'feef9fc7e405656e134a76dc037aaaa1a4ce36b4', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: theme.createColorClasses(this.color, {
@@ -2022,121 +1055,6 @@ const SkeletonText = class {
 };
 SkeletonText.style = IonSkeletonTextStyle0;
 
-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{top:0;-webkit-padding-start:90px;padding-inline-start:90px;-webkit-padding-end:90px;padding-inline-end:90px;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);position:absolute;width:100%;height:100%;transform:translateZ(0);font-size:min(1.0625rem, 20.4px);font-weight:600;text-align:center;box-sizing:border-box;pointer-events:none}@supports (inset-inline-start: 0){:host{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host{left:0}:host-context([dir=rtl]){left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)){left:unset;right:unset;right:0}}}:host(.title-small){-webkit-padding-start:9px;padding-inline-start:9px;-webkit-padding-end:9px;padding-inline-end:9px;padding-top:6px;padding-bottom:16px;position:relative;font-size:min(0.8125rem, 23.4px);font-weight:normal}:host(.title-large){-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:2px;padding-bottom:4px;transform-origin:left center;position:static;align-items:flex-end;min-width:100%;font-size:min(2.125rem, 61.2px);font-weight:700;text-align:start}:host(.title-large.title-rtl){transform-origin:right center}:host(.title-large.ion-cloned-element){--color:var(--ion-text-color, #000);font-family:var(--ion-font-family)}:host(.title-large) .toolbar-title{transform-origin:inherit;width:auto}:host-context([dir=rtl]):host(.title-large) .toolbar-title,:host-context([dir=rtl]).title-large .toolbar-title{transform-origin:calc(100% - inherit)}@supports selector(:dir(rtl)){:host(.title-large:dir(rtl)) .toolbar-title{transform-origin:calc(100% - inherit)}}";
-const IonTitleIosStyle0 = titleIosCss;
-
-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{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px;padding-top:0;padding-bottom:0;font-size:1.25rem;font-weight:500;letter-spacing:0.0125em}:host(.title-small){width:100%;height:100%;font-size:0.9375rem;font-weight:normal}";
-const IonTitleMdStyle0 = titleMdCss;
-
-const ToolbarTitle = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.ionStyle = index.createEvent(this, "ionStyle", 7);
-        this.color = undefined;
-        this.size = undefined;
-    }
-    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 = ionicGlobal.getIonMode(this);
-        const size = this.getSize();
-        return (index.h(index.Host, { key: '6f43362b782ef7d340c241bb66f1469663c03cc1', class: theme.createColorClasses(this.color, {
-                [mode]: true,
-                [`title-${size}`]: true,
-                'title-rtl': document.dir === 'rtl',
-            }) }, index.h("div", { key: '9c3ff1a289e533ee3426b71ab5560fbea3529502', class: "toolbar-title" }, index.h("slot", { key: '50d5cc5a1519ad58f1994d2f8c8f08f62baac1fe' }))));
-    }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "size": ["sizeChanged"]
-    }; }
-};
-ToolbarTitle.style = {
-    ios: IonTitleIosStyle0,
-    md: IonTitleMdStyle0
-};
-
-const toolbarIosCss = ":host{--border-width:0;--border-style:solid;--opacity:1;--opacity-scale:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;width:100%;padding-right:var(--ion-safe-area-right);padding-left:var(--ion-safe-area-left);color:var(--color);font-family:var(--ion-font-family, inherit);contain:content;z-index:10;box-sizing:border-box}:host(.ion-color){color:var(--ion-color-contrast)}:host(.ion-color) .toolbar-background{background:var(--ion-color-base)}.toolbar-container{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end: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}.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}::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 IonToolbarIosStyle0 = toolbarIosCss;
-
-const toolbarMdCss = ":host{--border-width:0;--border-style:solid;--opacity:1;--opacity-scale:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;width:100%;padding-right:var(--ion-safe-area-right);padding-left:var(--ion-safe-area-left);color:var(--color);font-family:var(--ion-font-family, inherit);contain:content;z-index:10;box-sizing:border-box}:host(.ion-color){color:var(--ion-color-contrast)}:host(.ion-color) .toolbar-background{background:var(--ion-color-base)}.toolbar-container{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end: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}.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){-webkit-margin-start:4px;margin-inline-start:4px}::slotted(.buttons-last-slot){-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 IonToolbarMdStyle0 = toolbarMdCss;
-
-const Toolbar = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.childrenStyles = new Map();
-        this.color = undefined;
-    }
-    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);
-            index.forceUpdate(this);
-        }
-    }
-    render() {
-        const mode = ionicGlobal.getIonMode(this);
-        const childStyles = {};
-        this.childrenStyles.forEach((value) => {
-            Object.assign(childStyles, value);
-        });
-        return (index.h(index.Host, { key: '8907ed75fbb2b1dced55c481bba6363f1dca815b', class: Object.assign(Object.assign({}, childStyles), theme.createColorClasses(this.color, {
-                [mode]: true,
-                'in-toolbar': theme.hostContext('ion-toolbar', this.el),
-            })) }, index.h("div", { key: '6bfa09b08d6517f0d680f53b739854cecd631bc9', class: "toolbar-background" }), index.h("div", { key: '1531bd6dd9e0a5843309bba854b744c453037ad0', class: "toolbar-container" }, index.h("slot", { key: '881b41697d386eae651b019128573f0fa432cd33', name: "start" }), index.h("slot", { key: '64a284e6eae5311ac3125dfadb4bb32bdba9d089', name: "secondary" }), index.h("div", { key: 'c1f47503563b38084b27d7ba54f17ec478482b94', class: "toolbar-content" }, index.h("slot", { key: '9a85acfba72252705619ae32acae9c14f81aa57d' })), index.h("slot", { key: '89e08bd761dc6940dbebc5d06f5f080af204aa72', name: "primary" }), index.h("slot", { key: 'a1cb7d95627f8a3d24dd4b9c11718fc164f53674', name: "end" }))));
-    }
-    get el() { return index.getElement(this); }
-};
-Toolbar.style = {
-    ios: IonToolbarIosStyle0,
-    md: IonToolbarMdStyle0
-};
-
 const posAddNewThingCss = ":host{font-family:var(--font-sans);display:block}button#new{cursor:pointer;display:flex;align-items:center;justify-content:center;border:none;width:var(--scale-5);height:var(--scale-5);background-color:var(--pos-primary-color);color:var(--color-grey-50);font-size:var(--scale-6);border-radius:var(--radius-xs)}button#new:hover,button#new:focus{outline:none;filter:brightness(110%);box-shadow:var(--shadow-sm)}pos-new-thing-form{margin:var(--scale-3)}";
 const PosAddNewThingStyle0 = posAddNewThingCss;
 
@@ -2149,13 +1067,13 @@ const PosAddNewThing = class {
         this.dialog.showModal();
     }
     render() {
-        return (index.h(index.Host, { key: 'f68aeded06adc5372957f9a75438cfb630d305e9' }, index.h("button", { key: '21216bb0fcbf47fbaafa2435b7f9e41df9412be4', id: "new", title: "Add a new thing", onClick: () => this.openDialog() }, index.h("ion-icon", { key: '58d0dc9ac04ee40cdccc23ce46cc8736767a6bde', name: "add-circle-outline" })), index.h("pos-dialog", { key: 'dde1ef9d4f75860173868088c47f252e98f00288', ref: el => (this.dialog = el) }, index.h("span", { key: 'fb12cccee3d5514cb6db2e329aede9e05183f3c5', slot: "title" }, "Add a new thing"), index.h("pos-new-thing-form", { key: '01949fa90383f62cbe987dd206f837ebfa8d4e55', slot: "content", referenceUri: this.referenceUri }))));
+        return (index.h(index.Host, { key: '2e632aa0d1699b39fd52f178c93bb510ac2d6e91' }, index.h("button", { key: '3830a37cc82868ed6bcbb4b88049da5de1a932c4', id: "new", title: "Add a new thing", onClick: () => this.openDialog() }, index.h("ion-icon", { key: 'efd48bfa658f4d58792e442ede0c22527ac1fb34', name: "add-circle-outline" })), index.h("pos-dialog", { key: '69be02ce0bf6a01ba7c919de67c87acc4a550983', ref: el => (this.dialog = el) }, index.h("span", { key: '8cfc152b49103ed239238af52f7c7de3f18df1b1', slot: "title" }, "Add a new thing"), index.h("pos-new-thing-form", { key: '4780a2a0c7254a577d38deac1d5078e8d5c7f82e', slot: "content", referenceUri: this.referenceUri }))));
     }
 };
 PosAddNewThing.style = PosAddNewThingStyle0;
 
 const createPodOS = () => {
-    return new index$4.PodOS();
+    return new index$2.PodOS();
 };
 
 function isFunction(value) {
@@ -3122,19 +2040,39 @@ const PosApp = class {
         }
     }
     render() {
-        return index.h("slot", { key: 'd44bd56f5036b319e90964aa8cb2c0ab60046f46' });
+        return index.h("slot", { key: '0c1dd123a984543004e73308e33bab0afca708c7' });
     }
 };
 
+const posAppBrowserCss = "pos-router{margin:0;padding:0;display:flex;flex-direction:column;height:100vh}pos-navigation-bar{max-width:var(--width-lg);margin:0}pos-add-new-thing,pos-login{flex:0 1 auto;}header,footer{display:flex;gap:var(--size-1);height:auto;justify-content:center;align-items:center;padding:var(--size-1)}footer svg{width:var(--size-5);height:var(--size-5)}footer{font-size:var(--scale-fluid-000)}header{flex-wrap:wrap;padding:0 var(--size-8)}main{flex:1;max-height:100vh;overflow:auto}@media (max-width: 640px){header{padding:0 var(--size-1) var(--size-1);justify-content:space-between}pos-navigation-bar{flex-basis:100%;order:0}pos-add-new-thing,pos-login{order:1}}";
+const PosAppBrowserStyle0 = posAppBrowserCss;
+
 const PosAppBrowser = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.restorePreviousSession = false;
+        this.uri = '';
     }
     render() {
-        return (index.h("pos-app", { key: 'b0cd0b818fdf4b747828e45722a2e5e2beca3fed', restorePreviousSession: this.restorePreviousSession }, index.h("pos-error-toast", { key: '48840fd1401920e5e925097c5e0fdbc84b0683a0' }, index.h("ion-app", { key: '739484cc781ab72aca520c8254ed0514b58c3ba3' }, index.h("ion-header", { key: 'e2f4cb34edc538c7e698fc0ed8e6a330ece3cfdc' }, index.h("ion-toolbar", { key: '25e12849dce08731864de78b9daa85c807a8d332' }, index.h("ion-title", { key: '1fb14f21d28e12bc3fe405fec7344bfd0987031e', slot: "start" }, "PodOS"), index.h("pos-login", { key: 'ffa9bb4105b5151d69ec8b2b2dbbe7038efc3612' }))), index.h("ion-content", { key: 'bbd8454b8b3cc65c650816112d2d43261335186b' }, index.h("pos-router", { key: 'e1c94f5dda22557fa417113a9168b5acef4cddfd' })), index.h("ion-footer", { key: '40623fc943a0a89c1a3ef23e23daebc653b5c5dc' }, index.h("ion-toolbar", { key: 'b3b6d497a9a19c0c0756b89c152ea2dc2ad25c41' }, index.h("ion-title", { key: '982679383f343e6f7a1a42d9110c1a53493c3b71' }, "PodOS Browser")))))));
-    }
-};
+        return (index.h(index.Host, { key: 'b154b596b7c172de223da89c4f6e113607111ff4' }, index.h("pos-app", { key: '057c6ea517b358513a292ee1b22a4ab3f847acb4', restorePreviousSession: this.restorePreviousSession }, index.h("pos-error-toast", { key: '818712bc4dfbba08a5091412931fba60529f1ce1' }, index.h("pos-router", { key: '58b23715dd4a0c4c981b92c43da41df4fde0bfe5', "onPod-os:route-changed": e => (this.uri = e.detail) }, index.h("header", { key: 'e83dcbaff0f013747922a62734856663e0d8e095' }, index.h("pos-add-new-thing", { key: 'e74961384b4c145bdf7d771fbae0547f83b95b78', referenceUri: this.uri }), index.h("pos-navigation-bar", { key: 'e3cb7e3e137f2615fdda8980444fd03bf009bbd3', uri: this.uri }), index.h("pos-login", { key: 'fe07f4cedb465911c76fc0c4520c6084090c9fed' })), index.h("main", { key: '993531497ec2d6ec8a9828519c1405568f2ab86b' }, index.h("pos-resource", { key: this.uri, uri: this.uri }, index.h("pos-type-router", { key: '0b4faa6fac3426438744c224d5966cf1b8312e4a' }))), index.h("footer", { key: 'cff5a02d8a14b478a4484ce105e53443b9b753ae' }, index.h(Logo, { key: 'd6a67415ba15c8b0a72517dd011b622564d9d8d2' }), index.h("span", { key: '5cfb56d1da679a022826b72082fe47cad150f055' }, "PodOS Browser")))))));
+    }
+};
+const Logo = () => {
+    return (index.h("svg", { viewBox: "0 0 400 400", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M50 350 L50 100 L200 50 L350 100 L350 350 Z", style: {
+            'fill': '#008BF8',
+            'stroke': '#008BF8',
+            'stroke-width': '70',
+        }, "stroke-linejoin": "round" }), index.h("path", { d: "M100 300 L100 150 L200 120 L300 150 L300 300 L130 300 L130 370 L100 370Z", style: {
+            'fill': 'white',
+            'stroke': 'white',
+            'stroke-width': '45',
+        }, "stroke-linejoin": "round" }), index.h("path", { d: "M150 250 L150 200 L200 180 L250 200 L250 250 Z", style: {
+            'fill': '#DC0073',
+            'stroke': '#DC0073',
+            'stroke-width': '20',
+        }, "stroke-linejoin": "round" })));
+};
+PosAppBrowser.style = PosAppBrowserStyle0;
 
 const PosDescription = class {
     constructor(hostRef) {
@@ -3167,7 +2105,7 @@ const PosDialog = class {
         this.dialog.close();
     }
     render() {
-        return (index.h(index.Host, { key: '0bc83e22253fd17e9f8ffc1c81b80682050a0883' }, index.h("dialog", { key: '2a5d5ba49cfde551389d11f2f5ffb0dd065b26e1', ref: el => (this.dialog = el) }, index.h("header", { key: '09f35e49e79e9cb067926213d9e715048d57e0f4' }, index.h("slot", { key: '3f16be3db881b8f93aa1bcb0cf1cb2a19bade573', name: "title" }), index.h("button", { key: 'd4a566a54d6d5db752a1ae9c1c0eda34954103d9', tabindex: -1, id: "close", title: "Close", onClick: () => this.close() }, index.h("ion-icon", { key: '262f5f7233764471ab4dcd61808e65e6468bcffa', name: "close-outline" }))), index.h("slot", { key: 'de6782ef358e852a6d4d34d3bd37c222fbf64527', name: "content" }))));
+        return (index.h(index.Host, { key: '2afede6b81d08df86698897989cf60ddd0924725' }, index.h("dialog", { key: '437b2817f0cf0a24d2c23705754666db08d86d7b', ref: el => (this.dialog = el) }, index.h("header", { key: 'b117318680cf8afd336ecb0a1833e527c0ab9b12' }, index.h("slot", { key: 'bfb23dd0fcd65c92dce927ddff6656e97a6a4b58', name: "title" }), index.h("button", { key: '954d0e64de334a658a96927921f213cba1e30715', tabindex: -1, id: "close", title: "Close", onClick: () => this.close() }, index.h("ion-icon", { key: 'c7b70eda40f3c087eadfb6cfeb6107cbe7747c21', name: "close-outline" }))), index.h("slot", { key: '9fc63ff77963a2564b18598c97bee19a73655c1a', name: "content" }))));
     }
 };
 PosDialog.style = PosDialogStyle0;
@@ -3200,7 +2138,7 @@ const PosErrorToast = class {
         await toast.present();
     }
     render() {
-        return index.h("slot", { key: '93ac613ea6c25c6533fbca6ee06201a97c39d87d' });
+        return index.h("slot", { key: '8c5c8f5197184686f81602136672f35a62b2ea78' });
     }
 };
 
@@ -3296,7 +2234,7 @@ const PosLabel = class {
     }
 };
 
-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%}pos-login-form{margin:var(--size-2)}dialog{margin-top:var(--size-10)}button#login,button#logout{outline:none;text-transform:uppercase;font-weight:var(--weight-bold);letter-spacing:var(--letter-xl);border:none;box-sizing:border-box;border-radius:var(--radius-xs);padding:var(--scale-000);box-shadow:var(--shadow-sm);cursor:pointer;color:var(--pos-primary-text-color);background-color:var(--pos-primary-color)}button#login:focus-within,button#logout:focus-within{outline:var(--pos-input-focus-outline)}button#login:focus,button#login:hover,button#logout:focus,button#logout:hover{filter:brightness(110%);box-shadow:var(--shadow-md)}";
+const posLoginCss = ".container{display:flex;align-items:center;gap:var(--size-2)}.user-data{align-items:center;display:inline-flex;gap:10px}.user-data pos-picture{--width:40px;--height:40px;--border-radius:50%}pos-login-form{margin:var(--size-2)}dialog{margin-top:var(--size-10)}button#login,button#logout{outline:none;font-weight:var(--weight-bold);letter-spacing:var(--letter-xl);border:none;box-sizing:border-box;border-radius:var(--radius-xs);padding:var(--size-2);box-shadow:var(--shadow-sm);color:var(--pos-primary-text-color);background-color:var(--pos-primary-color)}button#login:focus-within,button#logout:focus-within{outline:var(--pos-input-focus-outline)}button#login:focus,button#login:hover,button#logout:focus,button#logout:hover{filter:brightness(110%);box-shadow:var(--shadow-md)}";
 const PosLoginStyle0 = posLoginCss;
 
 const PosLogin = class {
@@ -3322,7 +2260,7 @@ const PosLogin = class {
         this.dialog.showModal();
     }
     render() {
-        return (index.h(index.Host, { key: '4d80604bf01d45172f793cc3a66ff9bfd853d6e8' }, BrokenFile.store.state.isLoggedIn ? (index.h("pos-resource", { uri: BrokenFile.store.state.webId }, index.h("span", { class: "user-data" }, index.h("pos-picture", null), index.h("pos-label", null)))) : (''), !BrokenFile.store.state.isLoggedIn && (index.h("button", { key: 'c8d7cc5dfff6c6fd061876a295acb094cf13e620', id: "login", onClick: () => this.openDialog() }, "Login")), BrokenFile.store.state.isLoggedIn && (index.h("button", { key: '7ee336f2d00cf71c36f5d2c87853e9eabe04366a', id: "logout", onClick: () => this.logout() }, "Logout")), index.h("pos-dialog", { key: '20b349d711044d71a876c4993577fd942e809bdb', ref: el => (this.dialog = el) }, index.h("span", { key: 'e7dc7cd69e392c7872a18f5129a7ab2545d74a57', slot: "title" }, "Sign in to your Pod"), index.h("pos-login-form", { key: 'bb17fa8b1632b286dd0a9d6ff68879730b276d82', "onPod-os:idp-url-selected": ev => this.login(ev), slot: "content" }))));
+        return (index.h(index.Host, { key: '780beb7c8a3be6f4f834c0d165c264fc4ca57f9b' }, index.h("div", { key: '66d54e274fab1e72590338ebb3a3aae3ab1275d5', class: "container" }, BrokenFile.store.state.isLoggedIn ? (index.h("pos-resource", { uri: BrokenFile.store.state.webId }, index.h("span", { class: "user-data" }, index.h("pos-picture", null), index.h("pos-label", null)))) : (''), !BrokenFile.store.state.isLoggedIn && (index.h("button", { key: '86196036b1ca3cfa505f3c1efbc2ceeb65843a91', id: "login", onClick: () => this.openDialog() }, "Login")), BrokenFile.store.state.isLoggedIn && (index.h("button", { key: 'ae2d4298dc2300ea9b9812b162bc7c14573a1606', id: "logout", onClick: () => this.logout() }, "Logout"))), index.h("pos-dialog", { key: 'c4cd26d24bdb7a4fa12ed589843da5cc90253c6c', ref: el => (this.dialog = el) }, index.h("span", { key: '5e59b0cde7cc110262edc1c2cf21cca9704970c6', slot: "title" }, "Sign in to your Pod"), index.h("pos-login-form", { key: '32c76681860a47a7a6f56fcd1d54757923891967', "onPod-os:idp-url-selected": ev => this.login(ev), slot: "content" }))));
     }
 };
 PosLogin.style = PosLoginStyle0;
@@ -3341,7 +2279,7 @@ const PosLoginForm = class {
         this.canSubmit = Boolean(this.idpUrl);
     }
     render() {
-        return (index.h("form", { key: '7fde1bbc5d3047550052bca7319edb79c7f99977', method: "dialog", onSubmit: () => this.handleSubmit() }, index.h("label", { key: '251439f51b85a4cb510f6e3848231b709cc8e510', htmlFor: "idpUrl" }, "Please enter your Identity Provider"), index.h("input", { key: '9f552e4b8dd06dedf0a64307778607d0c910b386', id: "idpUrl", type: "url", value: this.idpUrl, required: true, onInput: e => this.handleChange(e), list: "suggestedIssuers", placeholder: "Type to search..." }), index.h("datalist", { key: '3db05059ada1e7e9444015de2017c4dc9278ed7b', id: "suggestedIssuers" }, index.h("option", { key: 'aa1e61b1e72368c34b367e1788d8628a8e295821', value: "https://solidcommunity.net" }, "solidcommunity.net"), index.h("option", { key: '6320ad809ca912e94c20e18bcee7ed17a348f3f1', value: "https://solidweb.org" }, "solidweb.org"), index.h("option", { key: 'b1c2ec5d91e0078db5f12128f44f95c99adb6b4e', value: "https://solidweb.me" }, "solidweb.me"), index.h("option", { key: 'eeb13ac45c75177601a91ff6a5205a7f549055e6', value: "https://inrupt.net" }, "inrupt.net"), index.h("option", { key: '11f5ad9045b9d6707562922f4179d25fa6917583', value: "https://login.inrupt.com" }, "Inrupt PodSpaces"), index.h("option", { key: '75057cfb45adec0016f23506f2a93712e497aaf4', value: "https://trinpod.us" }, "trinpod.us"), index.h("option", { key: 'b0963e48242377be16275eb4f69b7cceb30e6be8', value: "https://use.id" }, "use.id"), index.h("option", { key: '211ef60f11d5c5d2ac5777645ad20548bc73d874', value: "https://solid.redpencil.io" }, "redpencil.io"), index.h("option", { key: '5879da4e80fd09f049e4c2ba8819a6d17ff9b028', value: "https://datapod.grant.io" }, "Data Pod (grant.io)"), index.h("option", { key: 'f35cb3113271a67f154b04559d18cc6be3f362b1', value: "https://teamid.live" }, "teamid.live")), index.h("input", { key: 'f33a4cf13b5ddb46b0c019122a6ae71e7e701bb6', id: "login", type: "submit", value: "Login", disabled: !this.canSubmit })));
+        return (index.h("form", { key: '92f9f517c1f20206c03c4a0ba0fa36cf44d03a4e', method: "dialog", onSubmit: () => this.handleSubmit() }, index.h("label", { key: '545072b27374d328f177cc7cd29a869f94084199', htmlFor: "idpUrl" }, "Please enter your Identity Provider"), index.h("input", { key: '702a8478a60f238aa571206709179735a6c4e94c', id: "idpUrl", type: "url", value: this.idpUrl, required: true, onInput: e => this.handleChange(e), list: "suggestedIssuers", placeholder: "Type to search..." }), index.h("datalist", { key: '1998a954b5b5af5f0db4134d5c5936a86ca3d938', id: "suggestedIssuers" }, index.h("option", { key: '10162042cea7e1080ae6dc1b22d417ea2c8bcdf1', value: "https://solidcommunity.net" }, "solidcommunity.net"), index.h("option", { key: 'd6fc9acff784dbf07ecd8370b8a864975c99b34c', value: "https://solidweb.org" }, "solidweb.org"), index.h("option", { key: 'd3980f1bbd66a092a3a8f26994d2e24c786bd311', value: "https://solidweb.me" }, "solidweb.me"), index.h("option", { key: 'c6e71652acbac29140c40f255b9f26cb50334bc9', value: "https://inrupt.net" }, "inrupt.net"), index.h("option", { key: 'c9b5cc8768bee481a34b95d6c993e4c75e63ecfd', value: "https://login.inrupt.com" }, "Inrupt PodSpaces"), index.h("option", { key: '97bb6676127f80f67337a1b0daa4dd367da21482', value: "https://trinpod.us" }, "trinpod.us"), index.h("option", { key: 'c8def1b84548f10bc2e7961139405ab5679e0dcc', value: "https://use.id" }, "use.id"), index.h("option", { key: 'e796fec0814bcafb4b3b48f9aff5efe9868243ba', value: "https://solid.redpencil.io" }, "redpencil.io"), index.h("option", { key: 'fd6632816dbad59dd8ebf3b2ab18d63b74bfd6ca', value: "https://datapod.grant.io" }, "Data Pod (grant.io)"), index.h("option", { key: 'c64c01e649cba6d8ff93b603e582369fd1bd5bd5', value: "https://teamid.live" }, "teamid.live")), index.h("input", { key: '2fe45bcb27fdb9f00680474b7e1cdfc989b0b0f2', id: "login", type: "submit", value: "Login", disabled: !this.canSubmit })));
     }
     handleChange(event) {
         this.validate();
@@ -3429,7 +2367,7 @@ const PosNavigationBar = class {
         }
     }
     render() {
-        return (index.h("form", { key: '2accd6147dcc87fcf5c2dd68b54296297150b75c', onSubmit: e => this.onSubmit(e) }, index.h("ion-searchbar", { key: 'a10e7d4af946c8676d5568c0756af7b86ce0fc57', enterkeyhint: "search", placeholder: "Search or enter URI", value: this.uri, debounce: 300, onIonChange: e => this.onChange(e), onIonInput: e => this.onChange(e) }), this.suggestions.length > 0 ? (index.h("div", { class: "suggestions" }, index.h("ol", null, this.suggestions.map((it, index$1) => (index.h("li", { class: index$1 === this.selectedIndex ? 'selected' : '' }, index.h("pos-rich-link", { uri: it.ref }))))))) : null));
+        return (index.h("form", { key: '0338ecb2fc05df87b7b1b9b46a3fe60dacf66a3a', onSubmit: e => this.onSubmit(e) }, index.h("ion-searchbar", { key: '691b8574fb64227895f521d501edd1d670b2cc6a', enterkeyhint: "search", placeholder: "Search or enter URI", value: this.uri, debounce: 300, onIonChange: e => this.onChange(e), onIonInput: e => this.onChange(e) }), this.suggestions.length > 0 ? (index.h("div", { class: "suggestions" }, index.h("ol", null, this.suggestions.map((it, index$1) => (index.h("li", { class: index$1 === this.selectedIndex ? 'selected' : '' }, index.h("pos-rich-link", { uri: it.ref }))))))) : null));
     }
 };
 PosNavigationBar.style = PosNavigationBarStyle0;
@@ -3460,7 +2398,7 @@ const PosNewThingForm = class {
         PodOsAware.subscribePodOs(this);
     }
     render() {
-        return (index.h("form", { key: '05e374959459dd5b51a8b34625301f3e355aba9a', method: "dialog", onSubmit: e => this.handleSubmit(e) }, index.h("label", { key: 'f18a7ac3b1d4dcdc28da5761c27405f7302e8f45', htmlFor: "type" }, "Type"), index.h("pos-select-term", { key: 'fad6874533d45e2539ebc25d6e2ed3aa925477b5', id: "type", placeholder: "", value: this.selectedTypeUri, "onPod-os:term-selected": e => this.onTermSelected(e) }), index.h("label", { key: 'a0fc71d7a8096ea789a35d61b389a7b96283f5bc', htmlFor: "name" }, "Name"), index.h("input", { key: 'f405b91039d011e9625495bc7ecaeab98d1da487', id: "name", type: "text", value: this.name, onInput: e => this.handleChange(e) }), this.newUri ? (index.h("div", { id: "new-uri", title: "This will be the URI of the new thing" }, this.newUri)) : null, index.h("input", { key: '82204f0a888beca696f5cecececcf2dea64a2eb2', id: "create", type: "submit", value: "Create", disabled: !this.canSubmit })));
+        return (index.h("form", { key: 'd2e96a0788fc188f5d565a9f7cfd091cac2a50f9', method: "dialog", onSubmit: e => this.handleSubmit(e) }, index.h("label", { key: '06926ce3e0f9ed415559e05551e12d919fcfb355', htmlFor: "type" }, "Type"), index.h("pos-select-term", { key: '163341916328a9f18265125c9083afde595c617c', id: "type", placeholder: "", value: this.selectedTypeUri, "onPod-os:term-selected": e => this.onTermSelected(e) }), index.h("label", { key: 'f80187e539434d239649451da75f7b03a7735c6f', htmlFor: "name" }, "Name"), index.h("input", { key: '505d645e314a614300ac9e181cf0e9ece5ba564d', id: "name", type: "text", value: this.name, onInput: e => this.handleChange(e) }), this.newUri ? (index.h("div", { id: "new-uri", title: "This will be the URI of the new thing" }, this.newUri)) : null, index.h("input", { key: '5dc303fa9b68d363b417c4c6572bf5ff7afbea14', id: "create", type: "submit", value: "Create", disabled: !this.canSubmit })));
     }
     handleChange(event) {
         this.name = event.target.value;
@@ -3597,10 +2535,10 @@ const PosRichLink = class {
         this.uri = undefined;
     }
     render() {
-        return (index.h("a", { key: 'a5e376305dc74372b48c127d8df8d8c6d6c76974', class: "container", href: this.uri, onClick: e => {
+        return (index.h("a", { key: '478e3fbeac417934283500edff87459f3ad155c9', class: "container", href: this.uri, onClick: e => {
                 e.preventDefault();
                 this.linkEmitter.emit(this.uri);
-            } }, index.h("pos-resource", { key: 'b9c6c0740fdb6708f386f68cd2506fccf6f1319e', lazy: true, uri: this.uri }, index.h("p", { key: '2b5e733ac4947ba896cd9aa2d770963067f075b7', class: "content" }, index.h("pos-label", { key: 'f5b57fbfea27e2b5dd06de89997b300f2788b0f8' }), index.h("pos-description", { key: '14c379c13217b0a4d96cb6645b24e4eda27cfce1' }), index.h("a", { key: 'cf29b9c0e4f1e1cc003b9471326c81ba8dee5eec', class: "uri", href: this.uri }, this.uri)))));
+            } }, index.h("pos-resource", { key: 'c28c929cc2df484cbdf4a071aa2636246eedf6f1', lazy: true, uri: this.uri }, index.h("p", { key: 'fb9f9211aacfb0d2550ba52d76f32632c7a99a38', class: "content" }, index.h("pos-label", { key: 'b44b9b7ed43aa889f4c3f706399a9e5de1509fb2' }), index.h("pos-description", { key: '9db29a285402b80fa18a895bd58996d91d7ea71e' }), index.h("a", { key: 'd5c7d15883f1b65dc2b6557121ad9439a56ddbd6', class: "uri", href: this.uri }, this.uri)))));
     }
 };
 PosRichLink.style = PosRichLinkStyle0;
@@ -3866,20 +2804,6 @@ const createRouter = (opts) => {
     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) {
@@ -3907,258 +2831,6 @@ 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 posRouterCss = ".toolbar{display:flex;flex-direction:row;gap:0;align-items:center;margin-left:0.5rem}pos-navigation-bar{flex-grow:1}";
 const PosRouterStyle0 = posRouterCss;
 
@@ -4166,6 +2838,7 @@ const Router = createRouter();
 const PosRouter = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.routeChanged = index.createEvent(this, "pod-os:route-changed", 7);
         this.uri = undefined;
     }
     linkClicked(e) {
@@ -4185,9 +2858,10 @@ const PosRouter = class {
     }
     updateUri() {
         this.uri = new URLSearchParams(window.location.search).get('uri') || window.location.href;
+        this.routeChanged.emit(this.uri);
     }
     render() {
-        return (index.h(Router.Switch, { key: '57f9081e368822ff79d98945592959d019e578b9' }, index.h(Route, { key: '9d92bd00f9594c3ecd54ab53ae2bbe68c74894f6', path: match('', { exact: false }) }, index.h("div", { key: 'a977487e785d053e4599704308fa5baac783c47d', class: "toolbar" }, index.h("pos-add-new-thing", { key: 'da79e7a8c6c5427437f5b8e4ce386ece5d89c0b8', referenceUri: this.uri }), index.h("pos-navigation-bar", { key: '9266285b028945079eb3411c00d958a56021dd7e', uri: this.uri })), index.h("pos-resource", { key: this.uri, uri: this.uri }, index.h("pos-type-router", { key: '82657153a1d34b49c4e711b348cece4191ad363b' })))));
+        return index.h("slot", { key: '90cdd039ec5d00643bab4449814cce75e6aef855' });
     }
 };
 PosRouter.style = PosRouterStyle0;
@@ -4218,7 +2892,7 @@ const PosSelectTerm = class {
         this.termSelected.emit({ uri: event.target.value });
     }
     render() {
-        return (index.h(index.Host, { key: '3e62d57949e8598cb000c62a684d624c0dc44739' }, index.h("input", { key: '2c09ff6c88c48105ebd6f146b9e724fb113f7523', part: "input", list: "terms", placeholder: this.placeholder, value: this.value, onChange: ev => this.handleChange(ev) }), index.h("datalist", { key: '1f3e596be54d4e0f055dac00c99742945adee3b1', part: "terms", id: "terms" }, this.terms.map(term => (index.h("option", { value: term.uri }, term.shorthand))))));
+        return (index.h(index.Host, { key: 'e73b3d7cb4dd291555b035c82959978ca0f665f3' }, index.h("input", { key: '9900762d64d4f7fcb31552e926bf71229e9b8ea4', part: "input", list: "terms", placeholder: this.placeholder, value: this.value, onChange: ev => this.handleChange(ev) }), index.h("datalist", { key: '71aca3b0d13973ea7e666e04ba09ff0f2d1483b0', part: "terms", id: "terms" }, this.terms.map(term => (index.h("option", { value: term.uri }, term.shorthand))))));
     }
     static get delegatesFocus() { return true; }
     static get watchers() { return {
@@ -4281,20 +2955,14 @@ const PosTypeRouter = class {
     }
 };
 
-exports.ion_app = App;
 exports.ion_card = Card;
 exports.ion_card_content = CardContent;
 exports.ion_card_header = CardHeader;
-exports.ion_content = Content;
-exports.ion_footer = Footer;
-exports.ion_header = Header;
 exports.ion_icon = Icon;
 exports.ion_progress_bar = ProgressBar;
 exports.ion_ripple_effect = RippleEffect;
 exports.ion_searchbar = Searchbar;
 exports.ion_skeleton_text = SkeletonText;
-exports.ion_title = ToolbarTitle;
-exports.ion_toolbar = Toolbar;
 exports.pos_add_new_thing = PosAddNewThing;
 exports.pos_app = PosApp;
 exports.pos_app_browser = PosAppBrowser;
@@ -4314,4 +2982,4 @@ exports.pos_router = PosRouter;
 exports.pos_select_term = PosSelectTerm;
 exports.pos_type_router = PosTypeRouter;
 
-//# sourceMappingURL=ion-app_32.cjs.entry.js.map
+//# sourceMappingURL=ion-card_26.cjs.entry.js.map