npm - @pod-os/elements - Versions diffs - 0.26.0 → 0.26.1-rc.52f6cf9.0 - Mend

@pod-os/elements 0.26.0 → 0.26.1-rc.52f6cf9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (453) hide show

package/dist/cjs/ion-icon_31.cjs.entry.js CHANGED Viewed

@@ -6,17 +6,15 @@ const index = require('./index-45dd971c.js');
 const helpers = require('./helpers-95c22e6d.js');
 const theme = require('./theme-187bbc7d.js');
 const ionicGlobal = require('./ionic-global-c7ac1ce0.js');
-const dir = require('./dir-e6b438e6.js');
-const index$1 = require('./index-3129b55a.js');
-const index$5 = require('./index-60f1e8e6.js');
+const index$4 = require('./index-60f1e8e6.js');
 const lockController = require('./lock-controller-63fc03ed.js');
-const index$3 = require('./index-5fa17650.js');
+const index$2 = require('./index-5fa17650.js');
 const overlays = require('./overlays-b8b12de8.js');
 const animation = require('./animation-7c90c75b.js');
-const index$2 = require('./index-957a289d.js');
-const index$4 = require('./index-f0c9b0af.js');
+const index$1 = require('./index-957a289d.js');
+const index$3 = require('./index-f0c9b0af.js');
 const BrokenFile = require('./BrokenFile-26f83028.js');
-const index$6 = require('./index-f7ca7362.js');
+const index$5 = require('./index-f7ca7362.js');
 const ResourceAware = require('./ResourceAware-7b6501ae.js');
 require('./gesture-controller-85b9b0a5.js');
 const PodOsAware = require('./PodOsAware-a16ddb44.js');
@@ -499,422 +497,6 @@ const PADDING = 10;
 const INITIAL_ORIGIN_SCALE = 0.5;
 RippleEffect.style = IonRippleEffectStyle0;
-const searchbarIosCss = ".sc-ion-searchbar-ios-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:0.6;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;position:relative;align-items:center;width:100%;color:var(--color);font-family:var(--ion-font-family, inherit);box-sizing:border-box}.ion-color.sc-ion-searchbar-ios-h{color:var(--ion-color-contrast)}.ion-color.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios{background:var(--ion-color-base)}.ion-color.sc-ion-searchbar-ios-h .searchbar-clear-button.sc-ion-searchbar-ios,.ion-color.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios,.ion-color.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{color:inherit}.searchbar-search-icon.sc-ion-searchbar-ios{color:var(--icon-color);pointer-events:none}.searchbar-input-container.sc-ion-searchbar-ios{display:block;position:relative;flex-shrink:1;width:100%}.searchbar-input.sc-ion-searchbar-ios{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;border-radius:var(--border-radius);display:block;width:100%;min-height:inherit;border:0;outline:none;background:var(--background);font-family:inherit;box-shadow:var(--box-shadow);box-sizing:border-box;appearance:none}.searchbar-input.sc-ion-searchbar-ios::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-ios::-webkit-search-cancel-button,.searchbar-input.sc-ion-searchbar-ios::-ms-clear{display:none}.searchbar-cancel-button.sc-ion-searchbar-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:none;height:100%;border:0;outline:none;color:var(--cancel-button-color);cursor:pointer;appearance:none}.searchbar-cancel-button.sc-ion-searchbar-ios>div.sc-ion-searchbar-ios{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.searchbar-clear-button.sc-ion-searchbar-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:none;min-height:0;outline:none;color:var(--clear-button-color);appearance:none}.searchbar-clear-button.sc-ion-searchbar-ios:focus{opacity:0.5}.searchbar-has-value.searchbar-should-show-clear.sc-ion-searchbar-ios-h .searchbar-clear-button.sc-ion-searchbar-ios{display:block}.searchbar-disabled.sc-ion-searchbar-ios-h{cursor:default;opacity:0.4;pointer-events:none}.sc-ion-searchbar-ios-h{--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.07);--border-radius:10px;--box-shadow:none;--cancel-button-color:var(--ion-color-primary, #3880ff);--clear-button-color:var(--ion-color-step-600, #666666);--color:var(--ion-text-color, #000);--icon-color:var(--ion-color-step-600, #666666);-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:12px;padding-bottom:12px;min-height:60px;contain:content}.searchbar-input-container.sc-ion-searchbar-ios{min-height:36px}.searchbar-search-icon.sc-ion-searchbar-ios{-webkit-margin-start:calc(50% - 60px);margin-inline-start:calc(50% - 60px);top:0;position:absolute;width:1.375rem;height:100%;contain:strict}@supports (inset-inline-start: 0){.searchbar-search-icon.sc-ion-searchbar-ios{inset-inline-start:5px}}@supports not (inset-inline-start: 0){.searchbar-search-icon.sc-ion-searchbar-ios{left:5px}[dir=rtl].sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios,[dir=rtl] .sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{left:unset;right:unset;right:5px}[dir=rtl].sc-ion-searchbar-ios .searchbar-search-icon.sc-ion-searchbar-ios{left:unset;right:unset;right:5px}@supports selector(:dir(rtl)){.searchbar-search-icon.sc-ion-searchbar-ios:dir(rtl){left:unset;right:unset;right:5px}}}.searchbar-input.sc-ion-searchbar-ios{-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:6px;padding-bottom:6px;height:100%;font-size:1.0625rem;font-weight:400;contain:strict}.searchbar-has-value.searchbar-should-show-clear.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios{-webkit-padding-start:1.75rem;padding-inline-start:1.75rem;-webkit-padding-end:1.75rem;padding-inline-end:1.75rem}.searchbar-clear-button.sc-ion-searchbar-ios{top:0;background-position:center;position:absolute;width:1.875rem;height:100%;border:0;background-color:transparent}@supports (inset-inline-start: 0){.searchbar-clear-button.sc-ion-searchbar-ios{inset-inline-end:0}}@supports not (inset-inline-start: 0){.searchbar-clear-button.sc-ion-searchbar-ios{right:0}[dir=rtl].sc-ion-searchbar-ios-h .searchbar-clear-button.sc-ion-searchbar-ios,[dir=rtl] .sc-ion-searchbar-ios-h .searchbar-clear-button.sc-ion-searchbar-ios{left:unset;right:unset;left:0}[dir=rtl].sc-ion-searchbar-ios .searchbar-clear-button.sc-ion-searchbar-ios{left:unset;right:unset;left:0}@supports selector(:dir(rtl)){.searchbar-clear-button.sc-ion-searchbar-ios:dir(rtl){left:unset;right:unset;left:0}}}.searchbar-clear-icon.sc-ion-searchbar-ios{width:1.125rem;height:100%}.searchbar-cancel-button.sc-ion-searchbar-ios{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0;flex-shrink:0;background-color:transparent;font-size:16px}.searchbar-left-aligned.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{-webkit-margin-start:0;margin-inline-start:0}.searchbar-left-aligned.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios{-webkit-padding-start:1.875rem;padding-inline-start:1.875rem}.searchbar-has-focus.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios,.searchbar-should-show-cancel.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios,.searchbar-animated.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{display:block}.searchbar-animated.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios,.searchbar-animated.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios{transition:all 300ms ease}.searchbar-animated.searchbar-has-focus.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios,.searchbar-animated.searchbar-should-show-cancel.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{opacity:1;pointer-events:auto}.searchbar-animated.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{-webkit-margin-end:-100%;margin-inline-end:-100%;transform:translate3d(0,  0,  0);transition:all 300ms ease;opacity:0;pointer-events:none}.searchbar-no-animate.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios,.searchbar-no-animate.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios,.searchbar-no-animate.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{transition-duration:0ms}.ion-color.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{color:var(--ion-color-base)}@media (any-hover: hover){.ion-color.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios:hover{color:var(--ion-color-tint)}}ion-toolbar.sc-ion-searchbar-ios-h,ion-toolbar .sc-ion-searchbar-ios-h{padding-top:1px;padding-bottom:15px;min-height:52px}ion-toolbar.ion-color.sc-ion-searchbar-ios-h:not(.ion-color),ion-toolbar.ion-color .sc-ion-searchbar-ios-h:not(.ion-color){color:inherit}ion-toolbar.ion-color.sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-cancel-button.sc-ion-searchbar-ios,ion-toolbar.ion-color .sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-cancel-button.sc-ion-searchbar-ios{color:currentColor}ion-toolbar.ion-color.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios,ion-toolbar.ion-color .sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{color:currentColor;opacity:0.5}ion-toolbar.ion-color.sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-input.sc-ion-searchbar-ios,ion-toolbar.ion-color .sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-input.sc-ion-searchbar-ios{background:rgba(var(--ion-color-contrast-rgb), 0.07);color:currentColor}ion-toolbar.ion-color.sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-clear-button.sc-ion-searchbar-ios,ion-toolbar.ion-color .sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-clear-button.sc-ion-searchbar-ios{color:currentColor;opacity:0.5}";
-const IonSearchbarIosStyle0 = searchbarIosCss;
-const searchbarMdCss = ".sc-ion-searchbar-md-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:0.6;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;position:relative;align-items:center;width:100%;color:var(--color);font-family:var(--ion-font-family, inherit);box-sizing:border-box}.ion-color.sc-ion-searchbar-md-h{color:var(--ion-color-contrast)}.ion-color.sc-ion-searchbar-md-h .searchbar-input.sc-ion-searchbar-md{background:var(--ion-color-base)}.ion-color.sc-ion-searchbar-md-h .searchbar-clear-button.sc-ion-searchbar-md,.ion-color.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md,.ion-color.sc-ion-searchbar-md-h .searchbar-search-icon.sc-ion-searchbar-md{color:inherit}.searchbar-search-icon.sc-ion-searchbar-md{color:var(--icon-color);pointer-events:none}.searchbar-input-container.sc-ion-searchbar-md{display:block;position:relative;flex-shrink:1;width:100%}.searchbar-input.sc-ion-searchbar-md{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;border-radius:var(--border-radius);display:block;width:100%;min-height:inherit;border:0;outline:none;background:var(--background);font-family:inherit;box-shadow:var(--box-shadow);box-sizing:border-box;appearance:none}.searchbar-input.sc-ion-searchbar-md::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-md::-webkit-search-cancel-button,.searchbar-input.sc-ion-searchbar-md::-ms-clear{display:none}.searchbar-cancel-button.sc-ion-searchbar-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:none;height:100%;border:0;outline:none;color:var(--cancel-button-color);cursor:pointer;appearance:none}.searchbar-cancel-button.sc-ion-searchbar-md>div.sc-ion-searchbar-md{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.searchbar-clear-button.sc-ion-searchbar-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:none;min-height:0;outline:none;color:var(--clear-button-color);appearance:none}.searchbar-clear-button.sc-ion-searchbar-md:focus{opacity:0.5}.searchbar-has-value.searchbar-should-show-clear.sc-ion-searchbar-md-h .searchbar-clear-button.sc-ion-searchbar-md{display:block}.searchbar-disabled.sc-ion-searchbar-md-h{cursor:default;opacity:0.4;pointer-events:none}.sc-ion-searchbar-md-h{--background:var(--ion-background-color, #fff);--border-radius:2px;--box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);--cancel-button-color:var(--ion-color-step-900, #1a1a1a);--clear-button-color:initial;--color:var(--ion-color-step-850, #262626);--icon-color:var(--ion-color-step-600, #666666);-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;background:inherit}.searchbar-search-icon.sc-ion-searchbar-md{top:11px;width:1.3125rem;height:1.3125rem}@supports (inset-inline-start: 0){.searchbar-search-icon.sc-ion-searchbar-md{inset-inline-start:16px}}@supports not (inset-inline-start: 0){.searchbar-search-icon.sc-ion-searchbar-md{left:16px}[dir=rtl].sc-ion-searchbar-md-h .searchbar-search-icon.sc-ion-searchbar-md,[dir=rtl] .sc-ion-searchbar-md-h .searchbar-search-icon.sc-ion-searchbar-md{left:unset;right:unset;right:16px}[dir=rtl].sc-ion-searchbar-md .searchbar-search-icon.sc-ion-searchbar-md{left:unset;right:unset;right:16px}@supports selector(:dir(rtl)){.searchbar-search-icon.sc-ion-searchbar-md:dir(rtl){left:unset;right:unset;right:16px}}}.searchbar-cancel-button.sc-ion-searchbar-md{top:0;background-color:transparent;font-size:1.5em}@supports (inset-inline-start: 0){.searchbar-cancel-button.sc-ion-searchbar-md{inset-inline-start:9px}}@supports not (inset-inline-start: 0){.searchbar-cancel-button.sc-ion-searchbar-md{left:9px}[dir=rtl].sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md,[dir=rtl] .sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md{left:unset;right:unset;right:9px}[dir=rtl].sc-ion-searchbar-md .searchbar-cancel-button.sc-ion-searchbar-md{left:unset;right:unset;right:9px}@supports selector(:dir(rtl)){.searchbar-cancel-button.sc-ion-searchbar-md:dir(rtl){left:unset;right:unset;right:9px}}}.searchbar-search-icon.sc-ion-searchbar-md,.searchbar-cancel-button.sc-ion-searchbar-md{position:absolute}.searchbar-search-icon.ion-activated.sc-ion-searchbar-md,.searchbar-cancel-button.ion-activated.sc-ion-searchbar-md{background-color:transparent}.searchbar-input.sc-ion-searchbar-md{-webkit-padding-start:3.4375rem;padding-inline-start:3.4375rem;-webkit-padding-end:3.4375rem;padding-inline-end:3.4375rem;padding-top:0.375rem;padding-bottom:0.375rem;background-position:left 8px center;height:auto;font-size:1rem;font-weight:400;line-height:30px}[dir=rtl].sc-ion-searchbar-md-h .searchbar-input.sc-ion-searchbar-md,[dir=rtl] .sc-ion-searchbar-md-h .searchbar-input.sc-ion-searchbar-md{background-position:right 8px center}[dir=rtl].sc-ion-searchbar-md .searchbar-input.sc-ion-searchbar-md{background-position:right 8px center}@supports selector(:dir(rtl)){.searchbar-input.sc-ion-searchbar-md:dir(rtl){background-position:right 8px center}}.searchbar-clear-button.sc-ion-searchbar-md{top:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;position:absolute;height:100%;border:0;background-color:transparent}@supports (inset-inline-start: 0){.searchbar-clear-button.sc-ion-searchbar-md{inset-inline-end:13px}}@supports not (inset-inline-start: 0){.searchbar-clear-button.sc-ion-searchbar-md{right:13px}[dir=rtl].sc-ion-searchbar-md-h .searchbar-clear-button.sc-ion-searchbar-md,[dir=rtl] .sc-ion-searchbar-md-h .searchbar-clear-button.sc-ion-searchbar-md{left:unset;right:unset;left:13px}[dir=rtl].sc-ion-searchbar-md .searchbar-clear-button.sc-ion-searchbar-md{left:unset;right:unset;left:13px}@supports selector(:dir(rtl)){.searchbar-clear-button.sc-ion-searchbar-md:dir(rtl){left:unset;right:unset;left:13px}}}.searchbar-clear-button.ion-activated.sc-ion-searchbar-md{background-color:transparent}.searchbar-clear-icon.sc-ion-searchbar-md{width:1.375rem;height:100%}.searchbar-has-focus.sc-ion-searchbar-md-h .searchbar-search-icon.sc-ion-searchbar-md{display:block}.searchbar-has-focus.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md,.searchbar-should-show-cancel.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md{display:block}.searchbar-has-focus.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md+.searchbar-search-icon.sc-ion-searchbar-md,.searchbar-should-show-cancel.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md+.searchbar-search-icon.sc-ion-searchbar-md{display:none}ion-toolbar.sc-ion-searchbar-md-h,ion-toolbar .sc-ion-searchbar-md-h{-webkit-padding-start:7px;padding-inline-start:7px;-webkit-padding-end:7px;padding-inline-end:7px;padding-top:3px;padding-bottom:3px}";
-const IonSearchbarMdStyle0 = searchbarMdCss;
-const Searchbar = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.ionInput = index.createEvent(this, "ionInput", 7);
-        this.ionChange = index.createEvent(this, "ionChange", 7);
-        this.ionCancel = index.createEvent(this, "ionCancel", 7);
-        this.ionClear = index.createEvent(this, "ionClear", 7);
-        this.ionBlur = index.createEvent(this, "ionBlur", 7);
-        this.ionFocus = index.createEvent(this, "ionFocus", 7);
-        this.ionStyle = index.createEvent(this, "ionStyle", 7);
-        this.isCancelVisible = false;
-        this.shouldAlignLeft = true;
-        this.inputId = `ion-searchbar-${searchbarIds++}`;
-        this.inheritedAttributes = {};
-        /**
-         * Clears the input field and triggers the control change.
-         */
-        this.onClearInput = async (shouldFocus) => {
-            this.ionClear.emit();
-            return new Promise((resolve) => {
-                // setTimeout() fixes https://github.com/ionic-team/ionic/issues/7527
-                // wait for 4 frames
-                setTimeout(() => {
-                    const value = this.getValue();
-                    if (value !== '') {
-                        this.value = '';
-                        this.emitInputChange();
-                        /**
-                         * When tapping clear button
-                         * ensure input is focused after
-                         * clearing input so users
-                         * can quickly start typing.
-                         */
-                        if (shouldFocus && !this.focused) {
-                            this.setFocus();
-                            /**
-                             * The setFocus call above will clear focusedValue,
-                             * but ionChange will never have gotten a chance to
-                             * fire. Manually revert focusedValue so onBlur can
-                             * compare against what was in the box before the clear.
-                             */
-                            this.focusedValue = value;
-                        }
-                    }
-                    resolve();
-                }, 16 * 4);
-            });
-        };
-        /**
-         * Clears the input field and tells the input to blur since
-         * the clearInput function doesn't want the input to blur
-         * then calls the custom cancel function if the user passed one in.
-         */
-        this.onCancelSearchbar = async (ev) => {
-            if (ev) {
-                ev.preventDefault();
-                ev.stopPropagation();
-            }
-            this.ionCancel.emit();
-            // get cached values before clearing the input
-            const value = this.getValue();
-            const focused = this.focused;
-            await this.onClearInput();
-            /**
-             * If there used to be something in the box, and we weren't focused
-             * beforehand (meaning no blur fired that would already handle this),
-             * manually fire ionChange.
-             */
-            if (value && !focused) {
-                this.emitValueChange(ev);
-            }
-            if (this.nativeInput) {
-                this.nativeInput.blur();
-            }
-        };
-        /**
-         * Update the Searchbar input value when the input changes
-         */
-        this.onInput = (ev) => {
-            const input = ev.target;
-            if (input) {
-                this.value = input.value;
-            }
-            this.emitInputChange(ev);
-        };
-        this.onChange = (ev) => {
-            this.emitValueChange(ev);
-        };
-        /**
-         * Sets the Searchbar to not focused and checks if it should align left
-         * based on whether there is a value in the searchbar or not.
-         */
-        this.onBlur = (ev) => {
-            this.focused = false;
-            this.ionBlur.emit();
-            this.positionElements();
-            if (this.focusedValue !== this.value) {
-                this.emitValueChange(ev);
-            }
-            this.focusedValue = undefined;
-        };
-        /**
-         * Sets the Searchbar to focused and active on input focus.
-         */
-        this.onFocus = () => {
-            this.focused = true;
-            this.focusedValue = this.value;
-            this.ionFocus.emit();
-            this.positionElements();
-        };
-        this.focused = false;
-        this.noAnimate = true;
-        this.color = undefined;
-        this.animated = false;
-        this.autocapitalize = 'default';
-        this.autocomplete = 'off';
-        this.autocorrect = 'off';
-        this.cancelButtonIcon = ionicGlobal.config.get('backButtonIcon', index$1.arrowBackSharp);
-        this.cancelButtonText = 'Cancel';
-        this.clearIcon = undefined;
-        this.debounce = undefined;
-        this.disabled = false;
-        this.inputmode = undefined;
-        this.enterkeyhint = undefined;
-        this.maxlength = undefined;
-        this.minlength = undefined;
-        this.name = this.inputId;
-        this.placeholder = 'Search';
-        this.searchIcon = undefined;
-        this.showCancelButton = 'never';
-        this.showClearButton = 'always';
-        this.spellcheck = false;
-        this.type = 'search';
-        this.value = '';
-    }
-    /**
-     * lang and dir are globally enumerated attributes.
-     * As a result, creating these as properties
-     * can have unintended side effects. Instead, we
-     * listen for attribute changes and inherit them
-     * to the inner `<input>` element.
-     */
-    onLangChanged(newValue) {
-        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { lang: newValue });
-        index.forceUpdate(this);
-    }
-    onDirChanged(newValue) {
-        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { dir: newValue });
-        index.forceUpdate(this);
-    }
-    debounceChanged() {
-        const { ionInput, debounce, originalIonInput } = this;
-        /**
-         * If debounce is undefined, we have to manually revert the ionInput emitter in case
-         * debounce used to be set to a number. Otherwise, the event would stay debounced.
-         */
-        this.ionInput = debounce === undefined ? originalIonInput !== null && originalIonInput !== void 0 ? originalIonInput : ionInput : helpers.debounceEvent(ionInput, debounce);
-    }
-    valueChanged() {
-        const inputEl = this.nativeInput;
-        const value = this.getValue();
-        if (inputEl && inputEl.value !== value) {
-            inputEl.value = value;
-        }
-    }
-    showCancelButtonChanged() {
-        requestAnimationFrame(() => {
-            this.positionElements();
-            index.forceUpdate(this);
-        });
-    }
-    connectedCallback() {
-        this.emitStyle();
-    }
-    componentWillLoad() {
-        this.inheritedAttributes = Object.assign({}, helpers.inheritAttributes(this.el, ['lang', 'dir']));
-    }
-    componentDidLoad() {
-        this.originalIonInput = this.ionInput;
-        this.positionElements();
-        this.debounceChanged();
-        setTimeout(() => {
-            this.noAnimate = false;
-        }, 300);
-    }
-    emitStyle() {
-        this.ionStyle.emit({
-            searchbar: true,
-        });
-    }
-    /**
-     * Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global
-     * `input.focus()`.
-     *
-     * Developers who wish to focus an input when a page enters
-     * should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.
-     *
-     * Developers who wish to focus an input when an overlay is presented
-     * should call `setFocus` after `didPresent` has resolved.
-     *
-     * See [managing focus](/docs/developing/managing-focus) for more information.
-     */
-    async setFocus() {
-        if (this.nativeInput) {
-            this.nativeInput.focus();
-        }
-    }
-    /**
-     * Returns the native `<input>` element used under the hood.
-     */
-    async getInputElement() {
-        /**
-         * If this gets called in certain early lifecycle hooks (ex: Vue onMounted),
-         * nativeInput won't be defined yet with the custom elements build, so wait for it to load in.
-         */
-        if (!this.nativeInput) {
-            await new Promise((resolve) => helpers.componentOnReady(this.el, resolve));
-        }
-        return Promise.resolve(this.nativeInput);
-    }
-    /**
-     * Emits an `ionChange` event.
-     *
-     * This API should be called for user committed changes.
-     * This API should not be used for external value changes.
-     */
-    emitValueChange(event) {
-        const { value } = this;
-        // Checks for both null and undefined values
-        const newValue = value == null ? value : value.toString();
-        // Emitting a value change should update the internal state for tracking the focused value
-        this.focusedValue = newValue;
-        this.ionChange.emit({ value: newValue, event });
-    }
-    /**
-     * Emits an `ionInput` event.
-     */
-    emitInputChange(event) {
-        const { value } = this;
-        this.ionInput.emit({ value, event });
-    }
-    /**
-     * Positions the input search icon, placeholder, and the cancel button
-     * based on the input value and if it is focused. (ios only)
-     */
-    positionElements() {
-        const value = this.getValue();
-        const prevAlignLeft = this.shouldAlignLeft;
-        const mode = ionicGlobal.getIonMode(this);
-        const shouldAlignLeft = !this.animated || value.trim() !== '' || !!this.focused;
-        this.shouldAlignLeft = shouldAlignLeft;
-        if (mode !== 'ios') {
-            return;
-        }
-        if (prevAlignLeft !== shouldAlignLeft) {
-            this.positionPlaceholder();
-        }
-        if (this.animated) {
-            this.positionCancelButton();
-        }
-    }
-    /**
-     * Positions the input placeholder
-     */
-    positionPlaceholder() {
-        const inputEl = this.nativeInput;
-        if (!inputEl) {
-            return;
-        }
-        const rtl = dir.isRTL(this.el);
-        const iconEl = (this.el.shadowRoot || this.el).querySelector('.searchbar-search-icon');
-        if (this.shouldAlignLeft) {
-            inputEl.removeAttribute('style');
-            iconEl.removeAttribute('style');
-        }
-        else {
-            // Create a dummy span to get the placeholder width
-            const doc = document;
-            const tempSpan = doc.createElement('span');
-            tempSpan.innerText = this.placeholder || '';
-            doc.body.appendChild(tempSpan);
-            // Get the width of the span then remove it
-            helpers.raf(() => {
-                const textWidth = tempSpan.offsetWidth;
-                tempSpan.remove();
-                // Calculate the input padding
-                const inputLeft = 'calc(50% - ' + textWidth / 2 + 'px)';
-                // Calculate the icon margin
-                /**
-                 * We take the icon width to account
-                 * for any text scales applied to the icon
-                 * such as Dynamic Type on iOS as well as 8px
-                 * of padding.
-                 */
-                const iconLeft = 'calc(50% - ' + (textWidth / 2 + iconEl.clientWidth + 8) + 'px)';
-                // Set the input padding start and icon margin start
-                if (rtl) {
-                    inputEl.style.paddingRight = inputLeft;
-                    iconEl.style.marginRight = iconLeft;
-                }
-                else {
-                    inputEl.style.paddingLeft = inputLeft;
-                    iconEl.style.marginLeft = iconLeft;
-                }
-            });
-        }
-    }
-    /**
-     * Show the iOS Cancel button on focus, hide it offscreen otherwise
-     */
-    positionCancelButton() {
-        const rtl = dir.isRTL(this.el);
-        const cancelButton = (this.el.shadowRoot || this.el).querySelector('.searchbar-cancel-button');
-        const shouldShowCancel = this.shouldShowCancelButton();
-        if (cancelButton !== null && shouldShowCancel !== this.isCancelVisible) {
-            const cancelStyle = cancelButton.style;
-            this.isCancelVisible = shouldShowCancel;
-            if (shouldShowCancel) {
-                if (rtl) {
-                    cancelStyle.marginLeft = '0';
-                }
-                else {
-                    cancelStyle.marginRight = '0';
-                }
-            }
-            else {
-                const offset = cancelButton.offsetWidth;
-                if (offset > 0) {
-                    if (rtl) {
-                        cancelStyle.marginLeft = -offset + 'px';
-                    }
-                    else {
-                        cancelStyle.marginRight = -offset + 'px';
-                    }
-                }
-            }
-        }
-    }
-    getValue() {
-        return this.value || '';
-    }
-    hasValue() {
-        return this.getValue() !== '';
-    }
-    /**
-     * Determines whether or not the cancel button should be visible onscreen.
-     * Cancel button should be shown if one of two conditions applies:
-     * 1. `showCancelButton` is set to `always`.
-     * 2. `showCancelButton` is set to `focus`, and the searchbar has been focused.
-     */
-    shouldShowCancelButton() {
-        if (this.showCancelButton === 'never' || (this.showCancelButton === 'focus' && !this.focused)) {
-            return false;
-        }
-        return true;
-    }
-    /**
-     * Determines whether or not the clear button should be visible onscreen.
-     * Clear button should be shown if one of two conditions applies:
-     * 1. `showClearButton` is set to `always`.
-     * 2. `showClearButton` is set to `focus`, and the searchbar has been focused.
-     */
-    shouldShowClearButton() {
-        if (this.showClearButton === 'never' || (this.showClearButton === 'focus' && !this.focused)) {
-            return false;
-        }
-        return true;
-    }
-    render() {
-        const { cancelButtonText, autocapitalize } = this;
-        const animated = this.animated && ionicGlobal.config.getBoolean('animated', true);
-        const mode = ionicGlobal.getIonMode(this);
-        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, {
-                [mode]: true,
-                'searchbar-animated': animated,
-                'searchbar-disabled': this.disabled,
-                'searchbar-no-animate': animated && this.noAnimate,
-                'searchbar-has-value': this.hasValue(),
-                'searchbar-left-aligned': this.shouldAlignLeft,
-                'searchbar-has-focus': this.focused,
-                'searchbar-should-show-clear': this.shouldShowClearButton(),
-                'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-            }) }, index.h("div", { key: '92e3925dc0de468e5665705902153837105dfa57', class: "searchbar-input-container" }, index.h("input", Object.assign({ key: 'fb74faf81b347a62338ccdac981525df1c52b322', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, index.h("ion-icon", { key: 'd58c3636dac1d2e4135989f4c07dc95c51492e60', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), index.h("button", { key: '1cece7c63ca5ca4b8799e15ee6d2bac100ef0d5e', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
-                /**
-                 * This prevents mobile browsers from
-                 * blurring the input when the clear
-                 * button is activated.
-                 */
-                ev.preventDefault();
-            }, onClick: () => this.onClearInput(true) }, index.h("ion-icon", { key: 'fe3c2b9cac29002f69e95a89b554c7504e2df050', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
-    }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "lang": ["onLangChanged"],
-        "dir": ["onDirChanged"],
-        "debounce": ["debounceChanged"],
-        "value": ["valueChanged"],
-        "showCancelButton": ["showCancelButtonChanged"]
-    }; }
-};
-let searchbarIds = 0;
-Searchbar.style = {
-    ios: IonSearchbarIosStyle0,
-    md: IonSearchbarMdStyle0
-};
 const skeletonTextCss = ":host{--background:rgba(var(--background-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.065);border-radius:var(--border-radius, inherit);display:block;width:100%;height:inherit;margin-top:4px;margin-bottom:4px;background:var(--background);line-height:10px;user-select:none;pointer-events:none}span{display:inline-block}:host(.in-media){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;height:100%}:host(.skeleton-text-animated){position:relative;background:linear-gradient(to right, rgba(var(--background-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.065) 8%, rgba(var(--background-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.135) 18%, rgba(var(--background-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.065) 33%);background-size:800px 104px;animation-duration:1s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:shimmer;animation-timing-function:linear}@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}";
 const IonSkeletonTextStyle0 = skeletonTextCss;
@@ -988,7 +570,7 @@ function getAnimationPosition(position, positionAnchor, mode, toast) {
      * bottom anchor edge is targeted. For position="bottom", the top
      * anchor edge is targeted.
      */
-    if (positionAnchor && index$2.win) {
+    if (positionAnchor && index$1.win) {
         warnIfAnchorIsHidden(positionAnchor, toast);
         const box = positionAnchor.getBoundingClientRect();
         if (position === 'top') {
@@ -1000,7 +582,7 @@ function getAnimationPosition(position, positionAnchor, mode, toast) {
              * to the top edge of the anchor. We want to calculate from the
              * bottom edge of the screen instead.
              */
-            offset -= index$2.win.innerHeight - box.top;
+            offset -= index$1.win.innerHeight - box.top;
         }
         /**
          * We don't include safe area here because that should already be
@@ -1025,7 +607,7 @@ function getAnimationPosition(position, positionAnchor, mode, toast) {
  */
 function warnIfAnchorIsHidden(positionAnchor, toast) {
     if (positionAnchor.offsetParent === null) {
-        index$3.printIonWarning('The positionAnchor element for ion-toast was found in the DOM, but appears to be hidden. This may lead to unexpected positioning of the toast.', toast);
+        index$2.printIonWarning('The positionAnchor element for ion-toast was found in the DOM, but appears to be hidden. This may lead to unexpected positioning of the toast.', toast);
     }
 }
 /**
@@ -1386,7 +968,7 @@ const createSwipeToDismissGesture = (el, toastPosition, onDismiss) => {
         }, { oneTimeCallback: true })
             .progressEnd(playTo, step, duration);
     };
-    const gesture = index$4.createGesture({
+    const gesture = index$3.createGesture({
         el: wrapperEl,
         gestureName: 'toast-swipe-to-dismiss',
         gesturePriority: overlays.OVERLAY_GESTURE_PRIORITY,
@@ -1422,7 +1004,7 @@ const Toast = class {
         this.delegateController = overlays.createDelegateController(this);
         this.lockController = lockController.createLockController();
         this.triggerController = overlays.createTriggerController();
-        this.customHTMLEnabled = ionicGlobal.config.get('innerHTMLTemplatesEnabled', index$5.ENABLE_HTML_CONTENT_DEFAULT);
+        this.customHTMLEnabled = ionicGlobal.config.get('innerHTMLTemplatesEnabled', index$4.ENABLE_HTML_CONTENT_DEFAULT);
         this.presented = false;
         this.dispatchCancelHandler = (ev) => {
             const role = ev.detail.role;
@@ -1677,7 +1259,7 @@ const Toast = class {
             return;
         }
         if (position === 'middle' && positionAnchor !== undefined) {
-            index$3.printIonWarning('The positionAnchor property is ignored when using position="middle".', this.el);
+            index$2.printIonWarning('The positionAnchor property is ignored when using position="middle".', this.el);
             return undefined;
         }
         if (typeof positionAnchor === 'string') {
@@ -1689,7 +1271,7 @@ const Toast = class {
              */
             const foundEl = document.getElementById(positionAnchor);
             if (foundEl === null) {
-                index$3.printIonWarning(`An anchor element with an ID of "${positionAnchor}" was not found in the DOM.`, el);
+                index$2.printIonWarning(`An anchor element with an ID of "${positionAnchor}" was not found in the DOM.`, el);
                 return undefined;
             }
             return foundEl;
@@ -1697,7 +1279,7 @@ const Toast = class {
         if (positionAnchor instanceof HTMLElement) {
             return positionAnchor;
         }
-        index$3.printIonWarning('Invalid positionAnchor value:', positionAnchor, el);
+        index$2.printIonWarning('Invalid positionAnchor value:', positionAnchor, el);
         return undefined;
     }
     async buttonClick(button) {
@@ -1747,7 +1329,7 @@ const Toast = class {
     renderToastMessage(key, ariaHidden = null) {
         const { customHTMLEnabled, message } = this;
         if (customHTMLEnabled) {
-            return (index.h("div", { key: key, "aria-hidden": ariaHidden, class: "toast-message", part: "message", innerHTML: index$5.sanitizeDOMString(message) }));
+            return (index.h("div", { key: key, "aria-hidden": ariaHidden, class: "toast-message", part: "message", innerHTML: index$4.sanitizeDOMString(message) }));
         }
         return (index.h("div", { key: key, "aria-hidden": ariaHidden, class: "toast-message", part: "message" }, message));
     }
@@ -1775,7 +1357,7 @@ const Toast = class {
          *  used with one type of button.
          */
         if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
-            index$3.printIonWarning('This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
+            index$2.printIonWarning('This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
         }
         return (index.h(index.Host, Object.assign({ key: '23803334fb668f6ce7044d3a321cb84bc753bd16', tabindex: "-1" }, this.htmlAttributes, { style: {
                 zIndex: `${60000 + this.overlayIndex}`,
@@ -1799,7 +1381,7 @@ Toast.style = {
     md: IonToastMdStyle0
 };
-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(--pos-primary-text-color);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 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(--size-10);height:var(--size-10);background-color:var(--pos-primary-color);color:var(--pos-primary-text-color);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;
 const PosAddNewThing = class {
@@ -2168,8 +1750,8 @@ class NavigatorOnlineStatus {
 }
 const createPodOS = (settings) => {
-    return new index$6.PodOS({
-        offlineCache: settings.offlineCache ? new IndexedDbOfflineCache() : new index$6.NoOfflineCache(),
+    return new index$5.PodOS({
+        offlineCache: settings.offlineCache ? new IndexedDbOfflineCache() : new index$5.NoOfflineCache(),
         onlineStatus: new NavigatorOnlineStatus(),
     });
 };
@@ -2871,6 +2453,158 @@ class AnonymousSubject extends Subject {
     }
 }
+const dateTimestampProvider = {
+    now() {
+        return (dateTimestampProvider.delegate || Date).now();
+    },
+    delegate: undefined,
+};
+class Action extends Subscription {
+    constructor(scheduler, work) {
+        super();
+    }
+    schedule(state, delay = 0) {
+        return this;
+    }
+}
+const intervalProvider = {
+    setInterval(handler, timeout, ...args) {
+        const { delegate } = intervalProvider;
+        if (delegate === null || delegate === void 0 ? void 0 : delegate.setInterval) {
+            return delegate.setInterval(handler, timeout, ...args);
+        }
+        return setInterval(handler, timeout, ...args);
+    },
+    clearInterval(handle) {
+        const { delegate } = intervalProvider;
+        return ((delegate === null || delegate === void 0 ? void 0 : delegate.clearInterval) || clearInterval)(handle);
+    },
+    delegate: undefined,
+};
+class AsyncAction extends Action {
+    constructor(scheduler, work) {
+        super(scheduler, work);
+        this.scheduler = scheduler;
+        this.work = work;
+        this.pending = false;
+    }
+    schedule(state, delay = 0) {
+        var _a;
+        if (this.closed) {
+            return this;
+        }
+        this.state = state;
+        const id = this.id;
+        const scheduler = this.scheduler;
+        if (id != null) {
+            this.id = this.recycleAsyncId(scheduler, id, delay);
+        }
+        this.pending = true;
+        this.delay = delay;
+        this.id = (_a = this.id) !== null && _a !== void 0 ? _a : this.requestAsyncId(scheduler, this.id, delay);
+        return this;
+    }
+    requestAsyncId(scheduler, _id, delay = 0) {
+        return intervalProvider.setInterval(scheduler.flush.bind(scheduler, this), delay);
+    }
+    recycleAsyncId(_scheduler, id, delay = 0) {
+        if (delay != null && this.delay === delay && this.pending === false) {
+            return id;
+        }
+        if (id != null) {
+            intervalProvider.clearInterval(id);
+        }
+        return undefined;
+    }
+    execute(state, delay) {
+        if (this.closed) {
+            return new Error('executing a cancelled action');
+        }
+        this.pending = false;
+        const error = this._execute(state, delay);
+        if (error) {
+            return error;
+        }
+        else if (this.pending === false && this.id != null) {
+            this.id = this.recycleAsyncId(this.scheduler, this.id, null);
+        }
+    }
+    _execute(state, _delay) {
+        let errored = false;
+        let errorValue;
+        try {
+            this.work(state);
+        }
+        catch (e) {
+            errored = true;
+            errorValue = e ? e : new Error('Scheduled action threw falsy error');
+        }
+        if (errored) {
+            this.unsubscribe();
+            return errorValue;
+        }
+    }
+    unsubscribe() {
+        if (!this.closed) {
+            const { id, scheduler } = this;
+            const { actions } = scheduler;
+            this.work = this.state = this.scheduler = null;
+            this.pending = false;
+            arrRemove(actions, this);
+            if (id != null) {
+                this.id = this.recycleAsyncId(scheduler, id, null);
+            }
+            this.delay = null;
+            super.unsubscribe();
+        }
+    }
+}
+class Scheduler {
+    constructor(schedulerActionCtor, now = Scheduler.now) {
+        this.schedulerActionCtor = schedulerActionCtor;
+        this.now = now;
+    }
+    schedule(work, delay = 0, state) {
+        return new this.schedulerActionCtor(this, work).schedule(state, delay);
+    }
+}
+Scheduler.now = dateTimestampProvider.now;
+class AsyncScheduler extends Scheduler {
+    constructor(SchedulerAction, now = Scheduler.now) {
+        super(SchedulerAction, now);
+        this.actions = [];
+        this._active = false;
+    }
+    flush(action) {
+        const { actions } = this;
+        if (this._active) {
+            actions.push(action);
+            return;
+        }
+        let error;
+        this._active = true;
+        do {
+            if ((error = action.execute(action.state, action.delay))) {
+                break;
+            }
+        } while ((action = actions.shift()));
+        this._active = false;
+        if (error) {
+            while ((action = actions.shift())) {
+                action.unsubscribe();
+            }
+            throw error;
+        }
+    }
+}
+const asyncScheduler = new AsyncScheduler(AsyncAction);
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -3086,6 +2820,46 @@ function process(asyncIterable, subscriber) {
     });
 }
+function debounceTime(dueTime, scheduler = asyncScheduler) {
+    return operate((source, subscriber) => {
+        let activeTask = null;
+        let lastValue = null;
+        let lastTime = null;
+        const emit = () => {
+            if (activeTask) {
+                activeTask.unsubscribe();
+                activeTask = null;
+                const value = lastValue;
+                lastValue = null;
+                subscriber.next(value);
+            }
+        };
+        function emitWhenIdle() {
+            const targetTime = lastTime + dueTime;
+            const now = scheduler.now();
+            if (now < targetTime) {
+                activeTask = this.schedule(undefined, targetTime - now);
+                subscriber.add(activeTask);
+                return;
+            }
+            emit();
+        }
+        source.subscribe(createOperatorSubscriber(subscriber, (value) => {
+            lastValue = value;
+            lastTime = scheduler.now();
+            if (!activeTask) {
+                activeTask = scheduler.schedule(emitWhenIdle, dueTime);
+                subscriber.add(activeTask);
+            }
+        }, () => {
+            emit();
+            subscriber.complete();
+        }, undefined, () => {
+            lastValue = activeTask = null;
+        }));
+    });
+}
 function takeUntil(notifier) {
     return operate((source, subscriber) => {
         innerFrom(notifier).subscribe(createOperatorSubscriber(subscriber, () => subscriber.complete(), noop));
@@ -3145,7 +2919,7 @@ const PosApp = class {
     }
 };
-const posAppBrowserCss = "pos-router {\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\npos-navigation-bar {\n  max-width: var(--width-lg);\n  margin: 0;\n}\n\npos-add-new-thing,\npos-login {\n  flex: 0 1 auto; /* Behält die Breite des Inhalts bei */\n}\n\nheader,\nfooter {\n  display: flex;\n  gap: var(--size-1);\n  height: auto;\n  justify-content: center;\n  align-items: center;\n  padding: var(--size-1);\n}\n\nfooter svg {\n  width: var(--size-5);\n  height: var(--size-5);\n}\n\nfooter {\n  font-size: var(--scale-fluid-000);\n\n  .settings {\n    padding: 0 var(--size-1);\n    text-decoration: none;\n    background-color: var(--pos-background-color);\n    border: 1px solid var(--pos-secondary-border-color);\n    color: var(--pos-secondary-border-color);\n    border-radius: var(--radius-xs);\n\n    &:hover {\n      background-color: var(--pos-secondary-border-color);\n      color: var(--pos-background-color);\n    }\n  }\n}\n\nheader {\n  flex-wrap: wrap;\n  padding: 0 var(--size-8);\n}\n\nmain {\n  flex: 1;\n  max-height: 100vh;\n  overflow: auto;\n}\n\n@media (max-width: 640px) {\n  header {\n    padding: 0 var(--size-1) var(--size-1);\n    justify-content: space-between;\n  }\n\n  pos-navigation-bar {\n    flex-basis: 100%;\n    order: 0;\n  }\n\n  pos-add-new-thing,\n  pos-login {\n    order: 1;\n  }\n}\n";
+const posAppBrowserCss = "pos-router {\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\npos-navigation {\n  max-width: var(--width-lg);\n  margin: 0;\n  min-width: var(--size-32);\n  flex-shrink: 1; /* Ensure navigation can shrink */\n}\n\npos-add-new-thing,\npos-login {\n  flex: 0 1 auto;\n  flex-shrink: 0; /* Ensure those items don't shrink */\n}\n\nheader,\nfooter {\n  display: flex;\n  gap: var(--size-1);\n  height: auto;\n  justify-content: center;\n  align-items: center;\n  padding: var(--size-1);\n}\n\nfooter svg {\n  width: var(--size-5);\n  height: var(--size-5);\n}\n\nfooter {\n  font-size: var(--scale-fluid-000);\n\n  .settings {\n    padding: 0 var(--size-1);\n    text-decoration: none;\n    background-color: var(--pos-background-color);\n    border: 1px solid var(--pos-secondary-border-color);\n    color: var(--pos-secondary-border-color);\n    border-radius: var(--radius-xs);\n\n    &:hover {\n      background-color: var(--pos-secondary-border-color);\n      color: var(--pos-background-color);\n    }\n  }\n}\n\nheader {\n  flex-wrap: nowrap;\n  padding: var(--size-1) var(--size-8);\n}\n\nmain {\n  flex: 1;\n  max-height: 100vh;\n  overflow: auto;\n}\n\n@media (max-width: 640px) {\n  header {\n    padding: var(--size-1);\n    justify-content: space-between;\n  }\n}\n";
 const PosAppBrowserStyle0 = posAppBrowserCss;
 const PosAppBrowser = class {
@@ -3155,14 +2929,23 @@ const PosAppBrowser = class {
         /**
          * The mode the app is running in:
          *
-         * - standalone:  use this when you deploy it as a standalone web application
+         * - standalone: use this when you deploy it as a standalone web application
          * - pod: use this when you host this app as a default interface for you pod
          */
         this.mode = 'standalone';
         this.uri = '';
     }
     render() {
-        return (index.h(index.Host, { key: '50b6e91f4e98be29cfa37552eb799883aeb49c9e' }, index.h("pos-app", { key: '652617d5eaf3653caeb58b9e93dff09810a587a3', restorePreviousSession: this.restorePreviousSession }, index.h("pos-error-toast", { key: 'f4a29b30c2a4caece50c0da046426bc50a3b402e' }, index.h("pos-router", { key: 'd3f2307db47406c4d84c9b27ac767d263ae81c32', mode: this.mode, "onPod-os:route-changed": e => (this.uri = e.detail) }, index.h("header", { key: '521c8469dae209a27780d62a5922f8a15d393e07' }, index.h("pos-add-new-thing", { key: '2fdd9716da4b3590fb0983a4b50f8c63eca26dce', referenceUri: this.uri }), index.h("pos-navigation-bar", { key: '6add9651de9ff5ca8496470c0df1341927683001', uri: this.uri === 'pod-os:dashboard' ? '' : this.uri }), index.h("pos-login", { key: '87a60cc03fc63a2ca68b294726e7e44a09bdc835' })), index.h("main", { key: 'dd2b3de09ca7f8957b240b030cafeeac37e76c1b' }, this.uri.startsWith('pod-os:') ? (index.h("pos-internal-router", { uri: this.uri })) : (index.h("pos-resource", { key: this.uri, uri: this.uri }, index.h("pos-type-router", null)))), index.h("footer", { key: 'ea1444713656c8740d81c5ac777b72bb6e287729' }, index.h(Logo, { key: '1bba3eec9e30c30f9132a6524e00ec212169f402' }), index.h("span", { key: '3b38a5e1704559f271075b60a27d8334f41a09dc' }, "PodOS Browser"), index.h("span", { key: '848dd110da12d70ec7798bfcf042638af8f7b121' }, "|"), index.h("a", { key: '8b748b91e4ae5351d0b2081dcb2af09867a00aee', class: "settings", href: "?uri=pod-os%3Asettings" }, "\u2699 Settings")))))));
+        return (index.h(index.Host, { key: 'd2c863f8abf790352cdf9c830a1baa8d7aee95a8' }, index.h("pos-app", { key: '163415bea00a0a18f5e97f5cb7f3e5b9f5910f61', restorePreviousSession: this.restorePreviousSession }, index.h("pos-error-toast", { key: '799735b00aff86946259013132079814520ced7e' }, index.h("pos-router", { key: 'bdb89d03d93937399ec38b0b2c1d695feea248b9', mode: this.mode, "onPod-os:route-changed": e => (this.uri = e.detail) }, index.h("header", { key: 'e828af57fa2d8842c058197a826ac488cbb2a968' }, index.h("pos-add-new-thing", { key: '28eed0a89a4e554e88ea4fce13b2dd59c5ce0149', referenceUri: this.uri }), index.h("pos-navigation", { key: '16a06ae6aea6ac316cacc4ffa52442b3ada62d62', uri: this.uri === 'pod-os:dashboard' ? '' : this.uri }), index.h("pos-login", { key: '9577c4aa8a18af341715b6e51946dbb4481ef963' })), index.h("main", { key: '73dc7ba162440c5198a31f5a4b060dc2c2d1c70a' }, this.mainContent()), index.h("footer", { key: 'cb18c8eb3abc1ee62426db39a61e650df2906241' }, index.h(Logo, { key: 'e9205f06faa7153310a17470f55b97a423cf6691' }), index.h("span", { key: '7be0a255d0ca50d961f122fdfc9fd3bb3fdfd624' }, "PodOS Browser"), index.h("span", { key: '3ed17bc88faffbcfa973278c76f63a2a199ec026' }, "|"), index.h("a", { key: 'ab88d3e93e59b918dd21b8cd42b70522dc532730', class: "settings", href: "?uri=pod-os%3Asettings" }, "\u2699 Settings")))))));
+    }
+    mainContent() {
+        if (this.uri === '') {
+            return null;
+        }
+        if (this.uri.startsWith('pod-os:')) {
+            return index.h("pos-internal-router", { uri: this.uri });
+        }
+        return (index.h("pos-resource", { key: this.uri, uri: this.uri }, index.h("pos-type-router", null)));
     }
 };
 const Logo = () => {
@@ -3463,7 +3246,7 @@ const PosLoginForm = class {
 };
 PosLoginForm.style = PosLoginFormStyle0;
-const posMakeFindableCss = "button.main {\n  display: flex;\n  transition:\n    width 200ms,\n    background-color 500ms,\n    color 500ms,\n    border-color 500ms;\n  max-width: var(--size-40);\n  flex-direction: row;\n  overflow: hidden;\n  height: var(--size-8);\n  width: var(--size-8);\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-xs);\n  color: var(--pos-subtle-text-color);\n  border: var(--size-px) dashed var(--pos-subtle-text-color);\n  background-color: var(--pos-background-color);\n\n  p {\n    padding: 0;\n    margin: 0;\n    display: none;\n    white-space: nowrap;\n  }\n\n  &.success {\n    color: var(--color-green-700);\n    border-color: var(--color-green-700);\n    border-style: solid;\n    background-color: var(--color-green-100);\n  }\n\n  &:active {\n    transform: scale(0.99);\n    filter: brightness(90%);\n  }\n}\n\n.options {\n  position: absolute;\n  animation: fadeIn 300ms;\n  padding: 0;\n  margin-top: var(--size-1);\n  z-index: var(--layer-top);\n\n  ol {\n    display: flex;\n    flex-direction: column;\n    box-shadow: var(--shadow-md);\n    backdrop-filter: var(--blur-md);\n    border-radius: var(--radius-xs);\n    overflow: hidden;\n    color: var(--color-grey-900);\n    background-color: var(--color-grey-200);\n    padding: 0;\n    margin: 0;\n    list-style: none;\n    label {\n      display: flex;\n      justify-content: flex-start;\n      align-items: center;\n      transition: all 300ms var(--ease-in-out-sine);\n      margin: 0;\n      border: none;\n      outline: none;\n      padding: var(--size-2);\n      width: var(--size-full);\n\n      &:hover,\n      &:focus {\n        filter: brightness(80%);\n      }\n\n      &:active {\n        filter: brightness(90%);\n      }\n    }\n  }\n  label:has(input:checked) {\n    background-color: var(--color-green-100);\n  }\n}\n\nsvg {\n  display: inline-block;\n  height: var(--size-6);\n  flex-shrink: 0;\n  flex-grow: 0;\n  width: var(--size-6);\n}\n\nbutton.main:hover,\nbutton.open {\n  &.success {\n    background: var(--color-green-200);\n  }\n  width: var(--size-full);\n  height: var(--size-8);\n  background: var(--pos-background-color);\n  color: var(--pos-normal-text-color);\n\n  p {\n    display: inline-block;\n  }\n}\n\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n";
+const posMakeFindableCss = "button.main {\n  display: flex;\n  transition:\n    width 200ms,\n    background-color 500ms,\n    color 500ms,\n    border-color 500ms;\n  max-width: var(--size-40);\n  flex-direction: row;\n  overflow: hidden;\n  height: var(--pos-navigation-bar-height);\n  width: var(--pos-navigation-bar-height);\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-md);\n  color: var(--pos-subtle-text-color);\n  border: var(--size-px) dashed var(--pos-subtle-text-color);\n  background-color: var(--pos-background-color);\n\n  p {\n    padding: 0;\n    margin: 0;\n    display: none;\n    white-space: nowrap;\n  }\n\n  &.success {\n    color: var(--color-green-700);\n    border-color: var(--color-green-700);\n    border-style: solid;\n    background-color: var(--color-green-100);\n  }\n\n  &:active {\n    transform: scale(0.99);\n    filter: brightness(90%);\n  }\n  &:focus {\n    outline: var(--pos-input-focus-outline);\n  }\n}\n\n.options {\n  position: absolute;\n  animation: fadeIn 300ms;\n  padding: 0;\n  margin-top: var(--size-1);\n  z-index: var(--layer-top);\n\n  ol {\n    display: flex;\n    flex-direction: column;\n    box-shadow: var(--shadow-md);\n    backdrop-filter: var(--blur-md);\n    border-radius: var(--radius-xs);\n    overflow: hidden;\n    color: var(--color-grey-900);\n    background-color: var(--color-grey-200);\n    padding: 0;\n    margin: 0;\n    list-style: none;\n    label {\n      display: flex;\n      justify-content: flex-start;\n      align-items: center;\n      transition: all 300ms var(--ease-in-out-sine);\n      margin: 0;\n      border: none;\n      outline: none;\n      padding: var(--size-2);\n      width: var(--size-full);\n\n      &:hover,\n      &:focus {\n        filter: brightness(80%);\n      }\n\n      &:active {\n        filter: brightness(90%);\n      }\n    }\n  }\n  label:has(input:checked) {\n    background-color: var(--color-green-100);\n  }\n}\n\nsvg {\n  display: inline-block;\n  height: var(--size-6);\n  flex-shrink: 0;\n  flex-grow: 0;\n  width: var(--size-6);\n}\n\nbutton.main:hover,\nbutton.open {\n  &.success {\n    background: var(--color-green-200);\n  }\n  width: var(--size-full);\n  height: var(--pos-navigation-bar-height);\n  background: var(--pos-background-color);\n  color: var(--pos-normal-text-color);\n\n  p {\n    display: inline-block;\n  }\n}\n\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n";
 const PosMakeFindableStyle0 = posMakeFindableCss;
 const PosMakeFindable = class {
@@ -3511,7 +3294,7 @@ const PosMakeFindable = class {
     }
     getLabelIndexes(profile) {
         if (profile) {
-            this.indexes = profile.getPrivateLabelIndexes().map(it => this.os.store.get(it).assume(index$6.LabelIndex));
+            this.indexes = profile.getPrivateLabelIndexes().map(it => this.os.store.get(it).assume(index$5.LabelIndex));
             this.isIndexed = this.checkIfIndexed(this.uri);
         }
     }
@@ -3570,25 +3353,44 @@ const IconMakeFindable = () => (index.h("svg", { role: "presentation", xmlns: "h
 const IconSuccess = () => (index.h("svg", { role: "presentation", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" }, index.h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M10.125 2.25h-4.5c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125v-9M10.125 2.25h.375a9 9 0 0 1 9 9v.375M10.125 2.25A3.375 3.375 0 0 1 13.5 5.625v1.5c0 .621.504 1.125 1.125 1.125h1.5a3.375 3.375 0 0 1 3.375 3.375M9 15l2.25 2.25L15 12" })));
 PosMakeFindable.style = PosMakeFindableStyle0;
-const posNavigationBarCss = ".suggestions ol {\n  border: 1px solid var(--pos-border-color);\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  margin: 0;\n  padding: 0;\n  z-index: var(--layer-top);\n  list-style-type: none;\n  box-shadow: var(--shadow-xl);\n}\n\n.suggestions {\n  position: relative;\n  li {\n    padding: 1rem;\n    background-color: var(--pos-background-color);\n    pos-rich-link {\n      --background-color: inherit;\n    }\n    &.selected {\n      background-color: var(--pos-primary-color);\n      &:hover {\n        background-color: var(--pos-primary-color);\n      }\n    }\n    &:hover {\n      background-color: var(--pos-border-color);\n    }\n  }\n}\n\n.suggestions li.selected pos-rich-link {\n  --label-color: white;\n  --description-color: var(--pos-border-color);\n  --uri-color: var(--pos-subtle-text-color);\n}\n\nion-searchbar {\n  width: 100%;\n}\n\nform {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.bar {\n  flex-grow: 1;\n}\n";
-const PosNavigationBarStyle0 = posNavigationBarCss;
+const posNavigationCss = ":host {\n  --pos-navigation-bar-height: var(--size-10);\n}\n\nsearch {\n  position: relative;\n}\n\n.suggestions ol {\n  border: 1px solid var(--pos-border-color);\n  display: flex;\n  flex-direction: column;\n  margin: 0;\n  padding: 0;\n  list-style-type: none;\n}\n\n.suggestions {\n  width: 100%;\n  overflow-y: auto;\n  max-height: 90dvh;\n  li {\n    padding: 1rem;\n    background-color: var(--pos-background-color);\n    pos-rich-link {\n      --background-color: inherit;\n    }\n    &.selected {\n      background-color: var(--pos-primary-color);\n      &:hover {\n        background-color: var(--pos-primary-color);\n      }\n    }\n    &:hover {\n      background-color: var(--pos-border-color);\n    }\n  }\n}\n\n.suggestions li.selected pos-rich-link {\n  --label-color: white;\n  --description-color: var(--pos-border-color);\n  --uri-color: var(--pos-subtle-text-color);\n}\n\ndialog {\n  position: absolute;\n  margin-top: calc(-1 * var(--pos-navigation-bar-height));\n  padding: 0;\n  width: 100%;\n  max-width: 100%;\n  min-width: 100%;\n  overflow: hidden;\n  max-height: 100dvh;\n  background-color: var(--pos-background-color);\n  color: var(--pos-normal-text-color);\n  border: var(--pos-border-color);\n  border-radius: var(--radius-md);\n  box-shadow: var(--shadow-md);\n  form {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    width: 100%;\n    align-items: center;\n    input {\n      display: flex;\n      font-size: var(--scale-1);\n      height: var(--pos-navigation-bar-height);\n      border-top-left-radius: var(--radius-md);\n      border-top-right-radius: var(--radius-md);\n      padding-left: var(--size-2);\n      width: 100%;\n      border: none;\n      outline: none;\n      color: var(--pos-normal-text-color);\n      background-color: var(--pos-input-background-color);\n      box-sizing: border-box;\n    }\n  }\n}\n\ndialog[open] {\n  display: flex;\n  z-index: var(--layer-top);\n  animation: slideIn 100ms ease-out;\n}\n\n@media (max-width: 640px) {\n  search {\n    position: unset;\n  }\n  dialog {\n    margin-top: var(--size-1);\n    top: 0;\n    width: 95dvw;\n    max-width: unset;\n    min-width: unset;\n    form {\n      input {\n        height: var(--size-12);\n        font-size: var(--scale-fluid-3);\n      }\n    }\n  }\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n";
+const PosNavigationStyle0 = posNavigationCss;
-const PosNavigationBar = class {
+const PosNavigation = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.subscribePodOs = index.createEvent(this, "pod-os:init", 7);
         this.linkEmitter = index.createEvent(this, "pod-os:link", 7);
+        /**
+         * Initial value of the navigation bar
+         */
         this.uri = '';
-        this.value = this.uri;
+        /**
+         * Current value of the input field
+         */
+        this.inputValue = this.uri;
         this.searchIndex = undefined;
         this.suggestions = [];
         this.selectedIndex = -1;
+        this.resource = null;
+        this.changeEvents = new Subject();
+        this.debouncedSearch = null;
         this.receivePodOs = async (os) => {
             this.os = os;
         };
     }
+    updateResource() {
+        var _a;
+        try {
+            this.resource = this.uri ? (_a = this.os) === null || _a === void 0 ? void 0 : _a.store.get(this.uri) : null;
+        }
+        catch (_b) {
+            this.resource = null;
+        }
+    }
     componentWillLoad() {
         PodOsAware.subscribePodOs(this);
+        this.updateResource();
         BrokenFile.store.onChange('isLoggedIn', async (isLoggedIn) => {
             if (isLoggedIn) {
                 await this.buildSearchIndex();
@@ -3597,6 +3399,11 @@ const PosNavigationBar = class {
                 this.clearSearchIndex();
             }
         });
+        this.debouncedSearch = this.changeEvents.pipe(debounceTime(300)).subscribe(() => this.search());
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.debouncedSearch) === null || _a === void 0 ? void 0 : _a.unsubscribe();
     }
     async buildSearchIndex() {
         this.searchIndex = await this.os.buildSearchIndex(BrokenFile.store.state.profile);
@@ -3604,16 +3411,33 @@ const PosNavigationBar = class {
     rebuildSearchIndex() {
         this.searchIndex.rebuild();
     }
+    openNavigationDialog(e) {
+        var _a, _b;
+        this.resource = e.detail;
+        if (e.detail) {
+            this.inputValue = e.detail.uri;
+            this.search();
+        }
+        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.select();
+        (_b = this.dialogRef) === null || _b === void 0 ? void 0 : _b.show();
+    }
     clearSearchIndex() {
         var _a;
         (_a = this.searchIndex) === null || _a === void 0 ? void 0 : _a.clear();
     }
     onChange(event) {
-        this.value = event.detail.value;
-        this.search();
+        this.inputValue = event.target.value;
+        this.changeEvents.next();
+    }
+    closeDialog() {
+        var _a;
+        (_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.close();
+        this.selectedIndex = -1;
     }
     clearSuggestions() {
+        var _a;
         this.suggestions = [];
+        (_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.close();
         this.selectedIndex = -1;
     }
     onClickSelf(event) {
@@ -3621,7 +3445,7 @@ const PosNavigationBar = class {
     }
     handleKeyDown(ev) {
         if (ev.key === 'Escape') {
-            this.clearSuggestions();
+            this.closeDialog();
         }
         else if (ev.key === 'ArrowDown') {
             ev.preventDefault();
@@ -3634,20 +3458,41 @@ const PosNavigationBar = class {
     }
     search() {
         if (this.searchIndex) {
-            this.suggestions = this.value ? this.searchIndex.search(this.value) : [];
+            this.suggestions = this.inputValue ? this.searchIndex.search(this.inputValue) : [];
         }
     }
-    onSubmit(event) {
-        event.preventDefault();
+    onSubmit() {
         if (this.suggestions && this.selectedIndex > -1) {
             this.linkEmitter.emit(this.suggestions[this.selectedIndex].ref);
         }
         else {
-            this.linkEmitter.emit(this.value);
+            this.linkEmitter.emit(this.inputValue);
         }
     }
     render() {
-        return (index.h("form", { key: 'e92382c2024642ea5c0b5abb00f1759003f74c78', onSubmit: e => this.onSubmit(e) }, this.searchIndex && this.uri ? index.h("pos-make-findable", { uri: this.uri }) : '', index.h("div", { key: 'c32607860e8aa1fe6d6d182c0e2a056f40b6f1b7', class: "bar" }, index.h("ion-searchbar", { key: '6f281c307640200da6c57a0660e27901f55d375d', 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("nav", { key: 'f09437fdd0bdfc5912af62658f1f32ab54c439c8' }, index.h("search", { key: 'fa09fec64bacfe1460a1fad256e509a480dd6a01' }, index.h("pos-navigation-bar", { key: '8dcd35cad5858da049ae942152f3cebe884aa761', searchIndexReady: this.searchIndex !== undefined, current: this.resource }), index.h("dialog", { key: '3ad61d48a6c5fcd0b010950c702e9488a9fd5160', ref: el => (this.dialogRef = el) }, index.h("form", { key: '1c23af28daf15f635d4c36002ca6fe153e33b48e', method: "dialog", onSubmit: () => this.onSubmit() }, index.h("input", { key: 'f11ff492c9333e5f6110630b9b6b3f3b5c127660', ref: el => (this.inputRef = el), enterkeyhint: "search", placeholder: "Search or enter URI", value: this.uri, onChange: e => this.onChange(e), onInput: 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)))));
+    }
+    static get watchers() { return {
+        "uri": ["updateResource"],
+        "os": ["updateResource"]
+    }; }
+};
+PosNavigation.style = PosNavigationStyle0;
+const posNavigationBarCss = "section.current {\n  display: flex;\n  height: var(--pos-navigation-bar-height);\n  flex-grow: 1;\n  gap: 0;\n  background-color: var(--pos-input-background-color);\n  border-radius: var(--radius-md);\n  width: 100%;\n  &:focus-within {\n    outline: var(--pos-input-focus-outline);\n  }\n}\n\nsection.current button {\n  cursor: pointer;\n  font-size: var(--scale-1);\n  flex-grow: 1;\n  background: none;\n  color: var(--pos-normal-text-color);\n  outline: none;\n  border: none;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  &:focus {\n    text-decoration: underline;\n  }\n}\n";
+const PosNavigationBarStyle0 = posNavigationBarCss;
+const PosNavigationBar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.navigate = index.createEvent(this, "pod-os:navigate", 7);
+    }
+    onClick() {
+        this.navigate.emit(this.current);
+    }
+    render() {
+        const ariaLabel = this.current ? `${this.current.label()} (Click to search or enter URI)` : 'Search or enter URI';
+        return (index.h("section", { key: '86e206e0b8f0e5b75cf291fd18174dc01d825cf5', class: "current" }, this.current && this.searchIndexReady && index.h("pos-make-findable", { key: 'cf9952ce503150224911abcb7ffe592dc6bb2f90', uri: this.current.uri }), index.h("button", { key: '2f70fe39855f4e1e28113c019bb8f071127743d0', "aria-label": ariaLabel, onClick: () => this.onClick() }, this.current ? this.current.label() : 'Search or enter URI')));
     }
 };
 PosNavigationBar.style = PosNavigationBarStyle0;
@@ -3673,7 +3518,7 @@ const PosNewThingForm = class {
         PodOsAware.subscribePodOs(this);
     }
     render() {
-        return (index.h("form", { key: '9ee9d0ab4f31bfc55865ef697d410b37977b1051', method: "dialog", onSubmit: e => this.handleSubmit(e) }, index.h("label", { key: 'a6f807d2034d55e5218c01375c4ff36564924bfb', htmlFor: "type" }, "Type"), index.h("pos-select-term", { key: 'f6001d6801bee97c03121d57742a595c8d5d5bd7', id: "type", placeholder: "", value: this.selectedTypeUri, "onPod-os:term-selected": e => this.onTermSelected(e) }), index.h("label", { key: '9365561d47d72e0153bb743f4fdf5ca7a1b5dcc0', htmlFor: "name" }, "Name"), index.h("input", { key: 'c93de873370a1123441a33d27c53c954bcc5f5ce', 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: '9fc1fb39f7c582a069876642cc17678303c7d72b', id: "create", type: "submit", value: "Create", disabled: !this.canSubmit })));
+        return (index.h("form", { key: '6d8a76b95abc98ab382b425b2dd8894983bb9522', method: "dialog", onSubmit: e => this.handleSubmit(e) }, index.h("label", { key: '6fe391ac186c0b0a8e6bb3265e66469dac3ab187', htmlFor: "type" }, "Type"), index.h("pos-select-term", { key: '33b50596c8cd22d8ce2b1af114277fa9bfd80355', id: "type", placeholder: "", value: this.selectedTypeUri, "onPod-os:term-selected": e => this.onTermSelected(e) }), index.h("label", { key: '8681f29f0c20d59c2be10a1f49cc38dea6abd19d', htmlFor: "name" }, "Name"), index.h("input", { key: 'f5905d871b55821f7019134d972e1f156c55f49e', 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: 'dade4834abecd9bf2fc8eb5bca0b1f60784287a4', id: "create", type: "submit", value: "Create", disabled: !this.canSubmit })));
     }
     handleChange(event) {
         this.name = event.target.value;
@@ -3803,7 +3648,7 @@ const PosResource = class {
 };
 PosResource.style = PosResourceStyle0;
-const posRichLinkCss = ":host {\n  --background-color: inherit;\n  --label-color: var(--pos-normal-text-color);\n  --description-color: var(--pos-normal-text-color);\n  --uri-color: var(--pos-subtle-text-color);\n  --font-family: var(--font-sans);\n}\n\np.content {\n  background-color: var(--background-color);\n  line-height: var(--line-xs);\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: baseline;\n  gap: var(--size-1);\n\n  .url {\n    font-size: var(--scale-fluid-1);\n    color: var(--pos-subtle-text-color);\n  }\n}\n\na {\n  color: var(--label-color);\n  max-width: var(--prose-lg);\n  text-decoration: underline;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  text-decoration-thickness: var(--size-px);\n}\n\npos-label {\n  color: var(--label-color);\n  font-size: var(--scale-fluid-2);\n  margin-bottom: var(--size-1);\n}\n\npos-description {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  font-weight: var(--weight-light);\n  color: var(--description-color);\n  font-size: var(--scale-fluid-2);\n}\n\n@media (min-width: 640px) {\n  pos-label {\n    font-size: var(--scale-fluid-0);\n  }\n  pos-description {\n    font-size: var(--scale-fluid-1);\n  }\n\n  p.content {\n    .url {\n      font-size: var(--scale-fluid-000);\n    }\n  }\n}\n";
+const posRichLinkCss = ":host {\n  --background-color: inherit;\n  --label-color: var(--pos-normal-text-color);\n  --description-color: var(--pos-normal-text-color);\n  --uri-color: var(--pos-subtle-text-color);\n  --font-family: var(--font-sans);\n}\n\np.content {\n  background-color: var(--background-color);\n  line-height: var(--line-xs);\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: baseline;\n  gap: var(--size-1);\n\n  .url {\n    font-size: var(--scale-fluid-1);\n    color: var(--pos-subtle-text-color);\n  }\n}\n\na {\n  color: var(--label-color);\n  max-width: min(100%, var(--prose-lg));\n  text-decoration: underline;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  text-decoration-thickness: var(--size-px);\n}\n\npos-label {\n  color: var(--label-color);\n  font-size: var(--scale-fluid-2);\n  margin-bottom: var(--size-1);\n}\n\npos-description {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  font-weight: var(--weight-light);\n  color: var(--description-color);\n  font-size: var(--scale-fluid-2);\n}\n\n@media (min-width: 640px) {\n  pos-label {\n    font-size: var(--scale-fluid-0);\n  }\n  pos-description {\n    font-size: var(--scale-fluid-1);\n  }\n\n  p.content {\n    .url {\n      font-size: var(--scale-fluid-000);\n    }\n  }\n}\n";
 const PosRichLinkStyle0 = posRichLinkCss;
 const PosRichLink = class {
@@ -3812,10 +3657,10 @@ const PosRichLink = class {
         this.linkEmitter = index.createEvent(this, "pod-os:link", 7);
     }
     render() {
-        return (index.h("pos-resource", { key: '0a794cc8287b13f163a813dc6a4f87b2f00e028b', lazy: true, uri: this.uri }, index.h("p", { key: 'b7a44482a82cd69228f144b04e9ec20b84410339', class: "content" }, index.h("a", { key: '0d218d4d5c1991c767b66f0d37c5476038e7a0fb', href: this.uri, onClick: e => {
+        return (index.h("pos-resource", { key: '389fb8817f5a7ff77965a8bb9924f48af15c528c', lazy: true, uri: this.uri }, index.h("p", { key: '1946deeff38a510800ef1558fd6374f65d72cd7f', class: "content" }, index.h("a", { key: '776c99ca32c7cd7fac30ab1f18b1c024b234d85f', href: this.uri, onClick: e => {
                 e.preventDefault();
                 this.linkEmitter.emit(this.uri);
-            } }, index.h("pos-label", { key: 'd04048986a7a4da138608f187a2f27e6313d9a6e' })), index.h("span", { key: '53a05023aa2fec4725e1d7e59acee9888476ecac', class: "url" }, new URL(this.uri).host), index.h("pos-description", { key: 'a73de2d208b684a9f555cda312e94df4282afba0' }))));
+            } }, index.h("pos-label", { key: '0ddb22c414f2e4d61cf1beabb301b723b78235e1' })), index.h("span", { key: 'd2730c1fcc1c1521a7527bdb7a63c091ff49746c', class: "url" }, new URL(this.uri).host), index.h("pos-description", { key: '53867e57b7403aed46e94a5f3df0b8389bc68244' }))));
     }
 };
 PosRichLink.style = PosRichLinkStyle0;
@@ -4108,7 +3953,7 @@ const DEFAULT_PARSE_URL = (url) => {
     return url.pathname.toLowerCase();
 };
-const posRouterCss = ".toolbar{display:flex;flex-direction:row;gap:0;align-items:center;margin-left:0.5rem}pos-navigation-bar{flex-grow:1}";
+const posRouterCss = ".toolbar{display:flex;flex-direction:row;gap:0;align-items:center;margin-left:0.5rem}pos-navigation{flex-grow:1}";
 const PosRouterStyle0 = posRouterCss;
 const Router = createRouter();
@@ -4146,7 +3991,7 @@ const PosRouter = class {
         this.routeChanged.emit(this.uri);
     }
     render() {
-        return index.h("slot", { key: '221db70a52ce7ebc7e9c171142dcf94f252fa985' });
+        return index.h("slot", { key: 'a5a451a8ddf4a30c6e5cbb2faf61d44f5a286df9' });
     }
 };
 PosRouter.style = PosRouterStyle0;
@@ -4176,7 +4021,7 @@ const PosSelectTerm = class {
         this.termSelected.emit({ uri: event.target.value });
     }
     render() {
-        return (index.h(index.Host, { key: '7a548735e2a0478fa1e63e2a880ca61f0f43d91c' }, index.h("input", { key: '9549691026f4bf42a3048f2af3a78bd71536b160', part: "input", list: "terms", placeholder: this.placeholder, value: this.value, onChange: ev => this.handleChange(ev) }), index.h("datalist", { key: 'adfd77a001389d6cc092e3b054ef12e45d562d54', part: "terms", id: "terms" }, this.terms.map(term => (index.h("option", { value: term.uri }, term.shorthand))))));
+        return (index.h(index.Host, { key: '7f7d48443893800bb818e67865fccdbe1d10d44a' }, index.h("input", { key: 'ee24690418d5a4d6e357154e12685fa9975754f9', part: "input", list: "terms", placeholder: this.placeholder, value: this.value, onChange: ev => this.handleChange(ev) }), index.h("datalist", { key: '78fde7ccb4e0750e902da139b02810c15c21db3e', 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 {
@@ -4254,7 +4099,6 @@ const PosTypeRouter = class {
 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_toast = Toast;
 exports.pos_add_new_thing = PosAddNewThing;
@@ -4273,6 +4117,7 @@ exports.pos_label = PosLabel;
 exports.pos_login = PosLogin;
 exports.pos_login_form = PosLoginForm;
 exports.pos_make_findable = PosMakeFindable;
+exports.pos_navigation = PosNavigation;
 exports.pos_navigation_bar = PosNavigationBar;
 exports.pos_new_thing_form = PosNewThingForm;
 exports.pos_picture = PosPicture;