@pod-os/elements 0.26.0 → 0.26.1-rc.2988a4e.0

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

@@ -1,23 +1,21 @@
-import { d as getAssetPath, r as registerInstance, h, H as Host, e as getElement, f as readTask, w as writeTask, i as createEvent, j as forceUpdate, k as getRenderingRef } from './index-9725d917.js';
-import { c as clamp, d as debounceEvent, i as inheritAttributes$1, a as componentOnReady, r as raf, g as getElementRoot } from './helpers-c51da066.js';
+import { d as getAssetPath, r as registerInstance, h, H as Host, e as getElement, f as readTask, w as writeTask, i as createEvent, j as getRenderingRef, k as forceUpdate } from './index-46d8987d.js';
+import { c as clamp, g as getElementRoot, r as raf } from './helpers-bc137989.js';
 import { c as createColorClasses$1, h as hostContext, g as getClassMap } from './theme-d75c68ae.js';
-import { c as config$1, g as getIonMode$1 } from './ionic-global-07f989af.js';
-import { i as isRTL$1 } from './dir-f50ace98.js';
-import { a as arrowBackSharp, c as closeCircle, b as closeSharp, s as searchOutline, d as searchSharp } from './index-9edae53a.js';
+import { c as config$1, g as getIonMode$1 } from './ionic-global-dc58df6a.js';
 import { E as ENABLE_HTML_CONTENT_DEFAULT, s as sanitizeDOMString } from './index-ce4e7029.js';
 import { c as createLockController } from './lock-controller-10217ff6.js';
 import { p as printIonWarning } from './index-f7ac0403.js';
-import { O as OVERLAY_GESTURE_PRIORITY, c as createDelegateController, a as createTriggerController, i as isCancel, p as prepareOverlay, s as setOverlayId, b as present, d as dismiss, e as eventMethod, f as safeCall, G as GESTURE, t as toastController } from './overlays-ef03d5bd.js';
-import { c as createAnimation } from './animation-43b39c85.js';
+import { O as OVERLAY_GESTURE_PRIORITY, c as createDelegateController, a as createTriggerController, i as isCancel, p as prepareOverlay, s as setOverlayId, b as present, d as dismiss, e as eventMethod, f as safeCall, G as GESTURE, t as toastController } from './overlays-d7fc4ce2.js';
+import { c as createAnimation } from './animation-756697b9.js';
 import { w as win } from './index-6b94f340.js';
 import { createGesture } from './index-38fe935b.js';
-import { c as createStore$1, s as store, B as BrokenFile } from './BrokenFile-d387a173.js';
+import { c as createStore$1, s as store, B as BrokenFile } from './BrokenFile-0b9882ef.js';
 import { P as PodOS, N as NoOfflineCache, L as LabelIndex } from './index-f3176f87.js';
 import { s as subscribeResource } from './ResourceAware-5f237305.js';
 import './gesture-controller-958242a2.js';
 import { s as subscribePodOs } from './PodOsAware-132573cd.js';
-import './hardware-back-button-12e771ad.js';
-import './framework-delegate-c5179013.js';
+import './hardware-back-button-87b1549b.js';
+import './framework-delegate-65b5c396.js';
 
 let CACHED_MAP;
 const getIconMap = () => {
@@ -495,422 +493,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) {
-        registerInstance(this, hostRef);
-        this.ionInput = createEvent(this, "ionInput", 7);
-        this.ionChange = createEvent(this, "ionChange", 7);
-        this.ionCancel = createEvent(this, "ionCancel", 7);
-        this.ionClear = createEvent(this, "ionClear", 7);
-        this.ionBlur = createEvent(this, "ionBlur", 7);
-        this.ionFocus = createEvent(this, "ionFocus", 7);
-        this.ionStyle = createEvent(this, "ionStyle", 7);
-        this.isCancelVisible = false;
-        this.shouldAlignLeft = true;
-        this.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 = config$1.get('backButtonIcon', 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 });
-        forceUpdate(this);
-    }
-    onDirChanged(newValue) {
-        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { dir: newValue });
-        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 : debounceEvent(ionInput, debounce);
-    }
-    valueChanged() {
-        const inputEl = this.nativeInput;
-        const value = this.getValue();
-        if (inputEl && inputEl.value !== value) {
-            inputEl.value = value;
-        }
-    }
-    showCancelButtonChanged() {
-        requestAnimationFrame(() => {
-            this.positionElements();
-            forceUpdate(this);
-        });
-    }
-    connectedCallback() {
-        this.emitStyle();
-    }
-    componentWillLoad() {
-        this.inheritedAttributes = Object.assign({}, inheritAttributes$1(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) => 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 = getIonMode$1(this);
-        const shouldAlignLeft = !this.animated || value.trim() !== '' || !!this.focused;
-        this.shouldAlignLeft = shouldAlignLeft;
-        if (mode !== 'ios') {
-            return;
-        }
-        if (prevAlignLeft !== shouldAlignLeft) {
-            this.positionPlaceholder();
-        }
-        if (this.animated) {
-            this.positionCancelButton();
-        }
-    }
-    /**
-     * Positions the input placeholder
-     */
-    positionPlaceholder() {
-        const inputEl = this.nativeInput;
-        if (!inputEl) {
-            return;
-        }
-        const rtl = isRTL$1(this.el);
-        const iconEl = (this.el.shadowRoot || this.el).querySelector('.searchbar-search-icon');
-        if (this.shouldAlignLeft) {
-            inputEl.removeAttribute('style');
-            iconEl.removeAttribute('style');
-        }
-        else {
-            // Create a dummy span to get the placeholder width
-            const doc = document;
-            const tempSpan = doc.createElement('span');
-            tempSpan.innerText = this.placeholder || '';
-            doc.body.appendChild(tempSpan);
-            // Get the width of the span then remove it
-            raf(() => {
-                const textWidth = tempSpan.offsetWidth;
-                tempSpan.remove();
-                // Calculate the input padding
-                const inputLeft = 'calc(50% - ' + textWidth / 2 + 'px)';
-                // Calculate the icon margin
-                /**
-                 * 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 = isRTL$1(this.el);
-        const cancelButton = (this.el.shadowRoot || this.el).querySelector('.searchbar-cancel-button');
-        const shouldShowCancel = this.shouldShowCancelButton();
-        if (cancelButton !== null && shouldShowCancel !== this.isCancelVisible) {
-            const cancelStyle = cancelButton.style;
-            this.isCancelVisible = shouldShowCancel;
-            if (shouldShowCancel) {
-                if (rtl) {
-                    cancelStyle.marginLeft = '0';
-                }
-                else {
-                    cancelStyle.marginRight = '0';
-                }
-            }
-            else {
-                const offset = cancelButton.offsetWidth;
-                if (offset > 0) {
-                    if (rtl) {
-                        cancelStyle.marginLeft = -offset + 'px';
-                    }
-                    else {
-                        cancelStyle.marginRight = -offset + 'px';
-                    }
-                }
-            }
-        }
-    }
-    getValue() {
-        return this.value || '';
-    }
-    hasValue() {
-        return this.getValue() !== '';
-    }
-    /**
-     * Determines whether or not the cancel button should be visible onscreen.
-     * Cancel button should be shown if one of two conditions applies:
-     * 1. `showCancelButton` is set to `always`.
-     * 2. `showCancelButton` is set to `focus`, and the searchbar has been focused.
-     */
-    shouldShowCancelButton() {
-        if (this.showCancelButton === 'never' || (this.showCancelButton === 'focus' && !this.focused)) {
-            return false;
-        }
-        return true;
-    }
-    /**
-     * Determines whether or not the clear button should be visible onscreen.
-     * Clear button should be shown if one of two conditions applies:
-     * 1. `showClearButton` is set to `always`.
-     * 2. `showClearButton` is set to `focus`, and the searchbar has been focused.
-     */
-    shouldShowClearButton() {
-        if (this.showClearButton === 'never' || (this.showClearButton === 'focus' && !this.focused)) {
-            return false;
-        }
-        return true;
-    }
-    render() {
-        const { cancelButtonText, autocapitalize } = this;
-        const animated = this.animated && config$1.getBoolean('animated', true);
-        const mode = getIonMode$1(this);
-        const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
-        const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
-        const shouldShowCancelButton = this.shouldShowCancelButton();
-        const cancelButton = this.showCancelButton !== 'never' && (h("button", { 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" }, h("div", { key: '1c25268a776134cccd29eb752898cb8ac0eed30f', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
-        return (h(Host, { key: 'feef9fc7e405656e134a76dc037aaaa1a4ce36b4', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
-                [mode]: true,
-                'searchbar-animated': animated,
-                'searchbar-disabled': this.disabled,
-                'searchbar-no-animate': animated && this.noAnimate,
-                'searchbar-has-value': this.hasValue(),
-                'searchbar-left-aligned': this.shouldAlignLeft,
-                'searchbar-has-focus': this.focused,
-                'searchbar-should-show-clear': this.shouldShowClearButton(),
-                'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-            }) }, h("div", { key: '92e3925dc0de468e5665705902153837105dfa57', class: "searchbar-input-container" }, 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, h("ion-icon", { key: 'd58c3636dac1d2e4135989f4c07dc95c51492e60', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), 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) }, h("ion-icon", { key: 'fe3c2b9cac29002f69e95a89b554c7504e2df050', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "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;
 
@@ -1795,7 +1377,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 {
@@ -1806,7 +1388,7 @@ const PosAddNewThing = class {
         this.dialog.showModal();
     }
     render() {
-        return (h(Host, { key: '6142a141ef03ca93a362a6b00ebe8d515c3a677a' }, h("button", { key: '72ecf353cd3a7d2d68f9ef28eb1bbe7fdb88b700', id: "new", title: "Add a new thing", onClick: () => this.openDialog() }, h("ion-icon", { key: 'bd05d75c42c10de6df519575787fc66eafb22930', name: "add-circle-outline" })), h("pos-dialog", { key: '23cf0118149704dfca16758970e4f4658e87e946', ref: el => (this.dialog = el) }, h("span", { key: '5af7b7f618cc20684c39134b5ea295400e651cb6', slot: "title" }, "Add a new thing"), h("pos-new-thing-form", { key: '895496c2f6ede3c8677d9d918e0b13582090baed', slot: "content", referenceUri: this.referenceUri }))));
+        return (h(Host, { key: '5ed3ba3982467778ed2b9b02090c230acb6b1762' }, h("button", { key: '96ff5dbd0ba4ca4d8c1d25045efa06fea062e9cf', id: "new", title: "Add a new thing", onClick: () => this.openDialog() }, h("ion-icon", { key: '201a19c8ecb39e0e913d3fb8cf1ebee06bc41df5', name: "add-circle-outline" })), h("pos-dialog", { key: '421da81e6faf52119fe600cc388663299eab67ec', ref: el => (this.dialog = el) }, h("span", { key: '454e6e05dc478e9c1b378cb3308f006fab4d8738', slot: "title" }, "Add a new thing"), h("pos-new-thing-form", { key: 'a469379848776a4c7e9f8e3f94da76ba048d7fab', slot: "content", referenceUri: this.referenceUri }))));
     }
 };
 PosAddNewThing.style = PosAddNewThingStyle0;
@@ -2867,6 +2449,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.
 
@@ -3082,6 +2816,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));
@@ -3137,11 +2911,11 @@ const PosApp = class {
         }
     }
     render() {
-        return h("slot", { key: '988c393af75e8bd0f4ff2b4c04fe33b1ed686fa7' });
+        return h("slot", { key: '402887f3383b6053da157df211c28977720db8e2' });
     }
 };
 
-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 {
@@ -3151,14 +2925,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 (h(Host, { key: '50b6e91f4e98be29cfa37552eb799883aeb49c9e' }, h("pos-app", { key: '652617d5eaf3653caeb58b9e93dff09810a587a3', restorePreviousSession: this.restorePreviousSession }, h("pos-error-toast", { key: 'f4a29b30c2a4caece50c0da046426bc50a3b402e' }, h("pos-router", { key: 'd3f2307db47406c4d84c9b27ac767d263ae81c32', mode: this.mode, "onPod-os:route-changed": e => (this.uri = e.detail) }, h("header", { key: '521c8469dae209a27780d62a5922f8a15d393e07' }, h("pos-add-new-thing", { key: '2fdd9716da4b3590fb0983a4b50f8c63eca26dce', referenceUri: this.uri }), h("pos-navigation-bar", { key: '6add9651de9ff5ca8496470c0df1341927683001', uri: this.uri === 'pod-os:dashboard' ? '' : this.uri }), h("pos-login", { key: '87a60cc03fc63a2ca68b294726e7e44a09bdc835' })), h("main", { key: 'dd2b3de09ca7f8957b240b030cafeeac37e76c1b' }, this.uri.startsWith('pod-os:') ? (h("pos-internal-router", { uri: this.uri })) : (h("pos-resource", { key: this.uri, uri: this.uri }, h("pos-type-router", null)))), h("footer", { key: 'ea1444713656c8740d81c5ac777b72bb6e287729' }, h(Logo, { key: '1bba3eec9e30c30f9132a6524e00ec212169f402' }), h("span", { key: '3b38a5e1704559f271075b60a27d8334f41a09dc' }, "PodOS Browser"), h("span", { key: '848dd110da12d70ec7798bfcf042638af8f7b121' }, "|"), h("a", { key: '8b748b91e4ae5351d0b2081dcb2af09867a00aee', class: "settings", href: "?uri=pod-os%3Asettings" }, "\u2699 Settings")))))));
+        return (h(Host, { key: 'd2c863f8abf790352cdf9c830a1baa8d7aee95a8' }, h("pos-app", { key: '163415bea00a0a18f5e97f5cb7f3e5b9f5910f61', restorePreviousSession: this.restorePreviousSession }, h("pos-error-toast", { key: '799735b00aff86946259013132079814520ced7e' }, h("pos-router", { key: 'bdb89d03d93937399ec38b0b2c1d695feea248b9', mode: this.mode, "onPod-os:route-changed": e => (this.uri = e.detail) }, h("header", { key: 'e828af57fa2d8842c058197a826ac488cbb2a968' }, h("pos-add-new-thing", { key: '28eed0a89a4e554e88ea4fce13b2dd59c5ce0149', referenceUri: this.uri }), h("pos-navigation", { key: '16a06ae6aea6ac316cacc4ffa52442b3ada62d62', uri: this.uri === 'pod-os:dashboard' ? '' : this.uri }), h("pos-login", { key: '9577c4aa8a18af341715b6e51946dbb4481ef963' })), h("main", { key: '73dc7ba162440c5198a31f5a4b060dc2c2d1c70a' }, this.mainContent()), h("footer", { key: 'cb18c8eb3abc1ee62426db39a61e650df2906241' }, h(Logo, { key: 'e9205f06faa7153310a17470f55b97a423cf6691' }), h("span", { key: '7be0a255d0ca50d961f122fdfc9fd3bb3fdfd624' }, "PodOS Browser"), h("span", { key: '3ed17bc88faffbcfa973278c76f63a2a199ec026' }, "|"), 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 h("pos-internal-router", { uri: this.uri });
+        }
+        return (h("pos-resource", { key: this.uri, uri: this.uri }, h("pos-type-router", null)));
     }
 };
 const Logo = () => {
@@ -3199,7 +2982,7 @@ const PosAppSettings = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return h("pos-setting-offline-cache", { key: 'f065206f6291089773a19045243f04b6ce35eeb9' });
+        return h("pos-setting-offline-cache", { key: '0da588136a4c7c4238e0387bfe0649464ccd1c7d' });
     }
 };
 PosAppSettings.style = PosAppSettingsStyle0;
@@ -3234,7 +3017,7 @@ const PosDialog = class {
         this.dialog.close();
     }
     render() {
-        return (h(Host, { key: '168dc7d1cf3feabd5f9b2b3f9add6b04467b36ef' }, h("dialog", { key: '8bbfb245d9ff066d111c116c1715be25b0907403', ref: el => (this.dialog = el) }, h("header", { key: '94e28eb2b8147cb6b2aedda0d8e6a5158117788e' }, h("slot", { key: 'a40c2d397b9f54056d4fd8089fdfcc1e446b6d61', name: "title" }), h("button", { key: 'f0f64f5aaafc331f9e3d0fb6201c453600157db1', tabindex: -1, id: "close", title: "Close", onClick: () => this.close() }, h("ion-icon", { key: 'd94a0cf3d19d7caa3717690004101e3ff4748760', name: "close-outline" }))), h("slot", { key: '3181fafe55869add4a587bf4726226055e98588d', name: "content" }))));
+        return (h(Host, { key: '307e23d3f92eae595a6bb9fd3e2487387d9b02c2' }, h("dialog", { key: '4c21714a0e2e84d809fe46b75d875c961ff8240c', ref: el => (this.dialog = el) }, h("header", { key: '0b9276c31a8deffa524a65b744d0ced04a753c1b' }, h("slot", { key: 'f4bcf72fcb25ea2619a0d7a40f524a10a91c0ca6', name: "title" }), h("button", { key: '8afb0911e29f8b4c81ff31f498266b398125327a', tabindex: -1, id: "close", title: "Close", onClick: () => this.close() }, h("ion-icon", { key: '464669b8a7f2aa1a1d274f933bb394a61abffc99', name: "close-outline" }))), h("slot", { key: 'f9fa43f73f8c295b6c728b4c7e7e3bf5c3be8948', name: "content" }))));
     }
 };
 PosDialog.style = PosDialogStyle0;
@@ -3269,7 +3052,7 @@ const PosErrorToast = class {
         await toast.present();
     }
     render() {
-        return (h(Host, { key: 'c1ee5f8a19177c79a3fe377fa27e4a32ffa9db9f' }, h("ion-toast", { key: '8759a3436a5caa16a11a2900a5f67d0dd205d097', trigger: "never", message: "Workarround to preload ion-toast and ion-ripple-effect to be able to show errors while offline", duration: 0 }, h("ion-ripple-effect", { key: '990aa24f2a18750ec5307498acda539b784c86c4' })), h("slot", { key: 'bea0650cc211dc2a161e7c634825adc045647d84' })));
+        return (h(Host, { key: '0dce513e04101d3b9011c635f5aab8897a246385' }, h("ion-toast", { key: '956224c61589fca317f8143055344c857aa894cf', trigger: "never", message: "Workarround to preload ion-toast and ion-ripple-effect to be able to show errors while offline", duration: 0 }, h("ion-ripple-effect", { key: 'e96e65e2f06b61970e241639e7c429a90404517e' })), h("slot", { key: '8869125c64fb97f9736e30df0a748c9ce6aec1da' })));
     }
 };
 
@@ -3286,15 +3069,16 @@ const PosExampleResources = class {
 };
 PosExampleResources.style = PosExampleResourcesStyle0;
 
-const posGettingStartedCss = ":host{border:var(--size-px) solid var(--pos-border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--size-8);max-width:var(--size-96);background:var(--pos-card-background)}.question{font-weight:var(--weight-semibold)}a{font-weight:var(--weight-bold);color:var(--pos-primary-color)}";
+const posGettingStartedCss = ":host{border:var(--size-px) solid var(--pos-border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--size-8);max-width:var(--size-96);background:var(--pos-card-background)}.question{font-weight:var(--weight-semibold)}a{font-weight:var(--weight-bold);color:var(--pos-primary-color)}button.login{background:none;color:var(--pos-primary-color);display:inline;text-decoration:underline;border:none;padding:0;margin:0;cursor:pointer;font-size:unset}";
 const PosGettingStartedStyle0 = posGettingStartedCss;
 
 const PosGettingStarted = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.login = createEvent(this, "pod-os:login", 7);
     }
     render() {
-        return (h(Host, { key: 'a31a64545a5960ce8e34f0c612d2755e465c1131' }, h("div", { key: '29ec2c449fd5334e47199dece7c01c2a71ab6d98' }, h("h2", { key: 'e680003831826c8cd4615de083f9f9c305513c29' }, "Getting started \uD83D\uDE80"), h("p", { key: '8e80305087bee4c8ec05ac7cb16096caf0c61ad0' }, "\uD83D\uDD0E Enter a URL into the above navigation bar to browse through the web of data. "), h("p", { key: '4d7ba95047694e636934cb7a03c291adb0678bb6' }, "\uD83D\uDD10 Sign in to access private resources on your Solid Pod or those of your friends or coworkers.")), h("div", { key: '167ac903fa88b9be6cf00f2f5bfea23d8dfd14c9' }, h("p", { key: 'a0b06f944e534b889502a96c935686a3b7f349d0', class: "question" }, "New to Solid?"), h("p", { key: '8c26c4d20d0fcdb075ad4c0ea5ff012d22dee081' }, h("a", { key: 'd9bc5b7bfd213012078729e25e42b4ea8b970573', href: "https://solidproject.org/for-developers#hosted-pod-services" }, "Get a Pod \u2192"))), h("div", { key: '223f171699e3acf5f1c5c4819621bddc49db41f1' }, h("p", { key: 'e83cfd2b01c5abaf30f0053ef261c68ae0919f0a', class: "question" }, "Want to dig deeper into PodOS?"), h("p", { key: '8ccdbd60a250850c4105e99545f09755109ced86' }, h("a", { key: 'f72a83533b846bd8e8e798b0dd71cfc585a8d104', href: "http://pod-os.org" }, "Learn more \u2192")))));
+        return (h(Host, { key: '963476081378811bc5623921ca7f4dc5ac18b9f7' }, h("div", { key: 'df6a7a5bab3c026d1960c03a4d008f8bff0b1c9d' }, h("h2", { key: '9e7a1e2c081f87275641fe99afb72c1f8ef65115' }, "Getting started \uD83D\uDE80"), h("p", { key: 'dac8ca58a733d66ab80fa79ef59d62a254b3b83f' }, "\uD83D\uDD0E Enter a URL into the above navigation bar to browse through the web of data. "), h("p", { key: 'c90fbc4f7c09893f6ded65befe4c77f673df6db2' }, "\uD83D\uDD10", ' ', h("button", { key: '2688b10503c6d518a7a48601f35e1f20741d71c7', class: "login", onClick: () => this.login.emit() }, "Sign in"), ' ', "to access private resources on your Solid Pod or those of your friends or coworkers.")), h("div", { key: '5990c65adc978df16ec7b73c3be2b6b4b3a48ce3' }, h("p", { key: '8fd4cb0941da30c3b438338a557a6d4fb9d7ff33', class: "question" }, "New to Solid?"), h("p", { key: 'd6b06063acaac1d55dc0aea86c3d80f4e7c8ca6f' }, h("a", { key: 'b0a49b4e170c89f736cf9bd2dd567cfafbcec31c', href: "https://solidproject.org/for-developers#hosted-pod-services" }, "Get a Pod \u2192"))), h("div", { key: '7c88ea4bb3982346343cf10e6196d2d07057a24e' }, h("p", { key: '22cfb601fada05ca7b5f274f0b6a81d360344764', class: "question" }, "Want to dig deeper into PodOS?"), h("p", { key: 'fb03d0f84714feb53b1b053390a5e7b9686e610e' }, h("a", { key: '1681d6d1c860589ca1624abc3c05121ccde3f951', href: "http://pod-os.org" }, "Learn more \u2192")))));
     }
 };
 PosGettingStarted.style = PosGettingStartedStyle0;
@@ -3406,11 +3190,13 @@ const PosLogin = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.initializeOsEmitter = createEvent(this, "pod-os:init", 7);
+        this.customLoggedInComponent = false;
         this.setOs = async (os) => {
             this.os = os;
         };
     }
     componentWillLoad() {
+        this.customLoggedInComponent = !!this.host.querySelector('[slot="if-logged-in"]');
         this.initializeOsEmitter.emit(this.setOs);
     }
     login(event) {
@@ -3420,12 +3206,25 @@ const PosLogin = class {
     logout() {
         this.os.logout();
     }
+    onLogin() {
+        this.openDialog();
+    }
     openDialog() {
         this.dialog.showModal();
     }
     render() {
-        return (h(Host, { key: '6349e0939fb22cddc9a6e47d424ce2badd518dcd' }, h("div", { key: '940d720ae5a7b951fe4a1bf411e463add43d93d0', class: "container" }, store.state.isLoggedIn ? (h("pos-resource", { uri: store.state.webId }, h("span", { class: "user-data" }, h("pos-picture", null), h("pos-label", null)))) : (''), !store.state.isLoggedIn && (h("button", { key: '40aeea2f9686c9792c3952f8b899f9e819895bae', id: "login", onClick: () => this.openDialog() }, "Login")), store.state.isLoggedIn && (h("button", { key: 'dd8129f4ae6b590231c33d072f4094b7bfc99da5', id: "logout", onClick: () => this.logout() }, "Logout"))), h("pos-dialog", { key: '33278d394f830f5c6040c3c22dc720440dd9d75c', ref: el => (this.dialog = el) }, h("span", { key: '96d3c645cacb1b38bd9adca8562ae4068eeabe11', slot: "title" }, "Sign in to your Pod"), h("pos-login-form", { key: '0c296b68774e4e2c1ed6091c305348b36e80178f', "onPod-os:idp-url-selected": ev => this.login(ev), slot: "content" }))));
+        return (h(Host, { key: '5919c664924fc9020d2003b286178bbaadcbc749' }, h("div", { key: '7a4dbc59b515c9e7834a506795c51aaba1a95d4c', class: "container" }, !store.state.isLoggedIn ? (h("button", { id: "login", onClick: () => this.openDialog() }, "Login")) : (this.loggedInComponents())), h("pos-dialog", { key: 'fb0a021cc751223a3bd3bf3b7ef4efd8e14e24af', ref: el => (this.dialog = el) }, h("span", { key: '0b652f2575bb2d037e05dbdbbaade37c3229e4f9', slot: "title" }, "Sign in to your Pod"), h("pos-login-form", { key: '4927ad17b14afd59509126ae5620fc34a381829e', "onPod-os:idp-url-selected": ev => this.login(ev), slot: "content" }))));
     }
+    loggedInComponents() {
+        return this.customLoggedInComponent ? h("slot", { name: "if-logged-in" }) : this.defaultLoggedInComponents();
+    }
+    defaultLoggedInComponents() {
+        return [
+            h("pos-resource", { uri: store.state.webId }, h("span", { class: "user-data" }, h("pos-picture", null), h("pos-label", null))),
+            h("button", { id: "logout", onClick: () => this.logout() }, "Logout"),
+        ];
+    }
+    get host() { return getElement(this); }
 };
 PosLogin.style = PosLoginStyle0;
 
@@ -3443,7 +3242,7 @@ const PosLoginForm = class {
         this.canSubmit = Boolean(this.idpUrl);
     }
     render() {
-        return (h("form", { key: '193d3790329d1480fd6b14fd55a0d8cee8ce61dd', method: "dialog", onSubmit: () => this.handleSubmit() }, h("label", { key: 'd85ea6b508c9f229e1125f8cc97092335458b94a', htmlFor: "idpUrl" }, "Please enter your Identity Provider"), h("input", { key: 'a2f5e9955b27a8c1fab14c8f087fab167a19dc9a', id: "idpUrl", type: "url", value: this.idpUrl, required: true, onInput: e => this.handleChange(e), list: "suggestedIssuers", placeholder: "Type to search..." }), h("datalist", { key: 'fa0924b31e1a4fcdc794931dd2073022ab4ce95b', id: "suggestedIssuers" }, h("option", { key: 'c3495be7c2a98494ac3ca7fe504edd4b1b232394', value: "https://solidcommunity.net" }, "solidcommunity.net"), h("option", { key: '7fd17434388ed31468df8682dcfc2b4263c27ccb', value: "https://solidweb.org" }, "solidweb.org"), h("option", { key: '4c2a5854fc2499198b289181136cbd0a2fd9c1e1', value: "https://solidweb.me" }, "solidweb.me"), h("option", { key: '02a81104db23c62e0d42b8b45b95eccbd16fc108', value: "https://inrupt.net" }, "inrupt.net"), h("option", { key: 'd7c15dca86800cafc5a974920e40bd117fa50194', value: "https://login.inrupt.com" }, "Inrupt PodSpaces"), h("option", { key: '93ff71136f1775098fda80db5d437f37b51c496f', value: "https://trinpod.us" }, "trinpod.us"), h("option", { key: '481f1630526e324cb24b38c0077b1aeb496b4690', value: "https://use.id" }, "use.id"), h("option", { key: 'abd85ffba7532ba488bf0a4c18a2da2f3dc481ee', value: "https://solid.redpencil.io" }, "redpencil.io"), h("option", { key: '339562d277c4af2e10344f385d00aa4cc37375fa', value: "https://datapod.grant.io" }, "Data Pod (grant.io)"), h("option", { key: '918224ac5af806666a7b77bc8049dcf79800ab8c', value: "https://teamid.live" }, "teamid.live")), h("input", { key: '1ad3ef7998237d30c5eaf5bc9eebe55ede09d0a8', id: "login", type: "submit", value: "Login", disabled: !this.canSubmit })));
+        return (h("form", { key: 'ddd05b4f905b65b2b5da556b3e9562bbff1812b0', method: "dialog", onSubmit: () => this.handleSubmit() }, h("label", { key: 'a23f430387db8339efe42d680d0659122b4503c2', htmlFor: "idpUrl" }, "Please enter your Identity Provider"), h("input", { key: '23c7209c3a4ecd79f305dc23961508f41ede85d3', id: "idpUrl", type: "url", value: this.idpUrl, required: true, onInput: e => this.handleChange(e), list: "suggestedIssuers", placeholder: "Type to search..." }), h("datalist", { key: '663730bddeb65eb5c58116ea329e00eee4b64a0f', id: "suggestedIssuers" }, h("option", { key: '71f0b94980ae6b38732f5f4319e1a5d4dad36f77', value: "https://solidcommunity.net" }, "solidcommunity.net"), h("option", { key: 'a18600e5fd7c6892f64b1b8e70480d564e9c39f6', value: "https://solidweb.org" }, "solidweb.org"), h("option", { key: '5528ee847f979c29d8d9725a13d51f7ae88cb82c', value: "https://solidweb.me" }, "solidweb.me"), h("option", { key: '9f1b85fbc78dc9870112053c61ece17d20dd89ec', value: "https://inrupt.net" }, "inrupt.net"), h("option", { key: '6bdaac53eae2b6830a2146e980542565dead33b7', value: "https://login.inrupt.com" }, "Inrupt PodSpaces"), h("option", { key: 'd5f243d1e7656bbca35b1c9920d4e2b867abed68', value: "https://trinpod.us" }, "trinpod.us"), h("option", { key: '1a9f2aab20d25a09b31ae47858c638e065ac27b5', value: "https://use.id" }, "use.id"), h("option", { key: 'f275d341b26be71158d6e5bd44ed138f54da823e', value: "https://solid.redpencil.io" }, "redpencil.io"), h("option", { key: '0945f4829972e9bdb37deb406d24d63e5bf30e8f', value: "https://datapod.grant.io" }, "Data Pod (grant.io)"), h("option", { key: '4cce12430b365c241a126ece63865c8dfa6e195e', value: "https://teamid.live" }, "teamid.live")), h("input", { key: 'd46215b8314e845b4ba6df750537ec6c8a14f8ed', id: "login", type: "submit", value: "Login", disabled: !this.canSubmit })));
     }
     handleChange(event) {
         this.validate();
@@ -3459,7 +3258,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 {
@@ -3566,25 +3365,44 @@ const IconMakeFindable = () => (h("svg", { role: "presentation", xmlns: "http://
 const IconSuccess = () => (h("svg", { role: "presentation", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" }, 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    &[aria-selected='true'] {\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) {
         registerInstance(this, hostRef);
         this.subscribePodOs = createEvent(this, "pod-os:init", 7);
         this.linkEmitter = 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() {
         subscribePodOs(this);
+        this.updateResource();
         store.onChange('isLoggedIn', async (isLoggedIn) => {
             if (isLoggedIn) {
                 await this.buildSearchIndex();
@@ -3593,6 +3411,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(store.state.profile);
@@ -3600,16 +3423,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) {
@@ -3617,7 +3457,7 @@ const PosNavigationBar = class {
     }
     handleKeyDown(ev) {
         if (ev.key === 'Escape') {
-            this.clearSuggestions();
+            this.closeDialog();
         }
         else if (ev.key === 'ArrowDown') {
             ev.preventDefault();
@@ -3630,20 +3470,50 @@ 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 (h("form", { key: 'e92382c2024642ea5c0b5abb00f1759003f74c78', onSubmit: e => this.onSubmit(e) }, this.searchIndex && this.uri ? h("pos-make-findable", { uri: this.uri }) : '', h("div", { key: 'c32607860e8aa1fe6d6d182c0e2a056f40b6f1b7', class: "bar" }, 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 ? (h("div", { class: "suggestions" }, h("ol", null, this.suggestions.map((it, index) => (h("li", { class: index === this.selectedIndex ? 'selected' : '' }, h("pos-rich-link", { uri: it.ref }))))))) : null)));
+        return (h("nav", { key: '5c6c07b6b2f9ccb0e45bd59b5e477d8ed3d52c2d' }, h("search", { key: '19997ad34212d679547ad5e1bb2f5ea53e576361' }, h("pos-navigation-bar", { key: '2d1c073b2c53ba8cd5afbb595cc95015e5a50e5b', searchIndexReady: this.searchIndex !== undefined, current: this.resource }), h("dialog", { key: '55de5a58604feaf54426b643b434560dbc55a9a1', ref: el => (this.dialogRef = el) }, h("form", { key: '50c064938ec275b53bde81d9bb6c86e0c708a625', method: "dialog", onSubmit: () => this.onSubmit() }, h("input", { key: 'ca06fd69e8346cb8bb0868560f39987b4545c8f5', ref: el => (this.inputRef = el), enterkeyhint: "search", "aria-label": "Search or enter URI", placeholder: "Search or enter URI", value: this.uri, onChange: e => this.onChange(e), onInput: e => this.onChange(e), role: "combobox", "aria-autocomplete": "list", "aria-expanded": this.suggestions.length > 0, "aria-controls": "suggestions-list", "aria-activedescendant": this.selectedIndex >= 0 ? `option-${this.selectedIndex}` : null }), this.suggestions.length > 0 ? (h("div", { class: "suggestions" }, h("ol", { id: "suggestions-list", role: "listbox", "aria-label": "Search results" }, this.suggestions.map((it, index) => (h("li", { id: `option-${index}`, role: "option", "aria-selected": index === this.selectedIndex ? 'true' : 'false' }, 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  display: flex;\n  align-items: center;\n  justify-content: center;\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  :first-child {\n    flex-grow: 1;\n  }\n  svg {\n    width: var(--size-6);\n    color: var(--pos-subtle-text-color);\n  }\n}\n";
+const PosNavigationBarStyle0 = posNavigationBarCss;
+
+const PosNavigationBar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.navigate = createEvent(this, "pod-os:navigate", 7);
+    }
+    onClick() {
+        this.navigate.emit(this.current);
+    }
+    activate(e) {
+        if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+            e.preventDefault();
+            this.navigate.emit(this.current);
+        }
+    }
+    render() {
+        const ariaLabel = this.current ? `${this.current.label()} (Click to search or enter URI)` : 'Search or enter URI';
+        return (h("section", { key: '1b507d50bd24f257023fe980f1ffdb3abe903577', class: "current" }, this.current && this.searchIndexReady && h("pos-make-findable", { key: 'e96559f40418154a26350705ae6e3dbf8057a424', uri: this.current.uri }), h("button", { key: '2ac476bd89918e71ca10cc945952f8c9905865df', "aria-label": ariaLabel, onClick: () => this.onClick() }, h("div", { key: 'd34b73e2090f08cab8533d03a7b206d420bfa8c2' }, this.current ? this.current.label() : 'Search or enter URI'), this.icon())));
+    }
+    icon() {
+        return (h("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" })));
     }
 };
 PosNavigationBar.style = PosNavigationBarStyle0;
@@ -3669,7 +3539,7 @@ const PosNewThingForm = class {
         subscribePodOs(this);
     }
     render() {
-        return (h("form", { key: '9ee9d0ab4f31bfc55865ef697d410b37977b1051', method: "dialog", onSubmit: e => this.handleSubmit(e) }, h("label", { key: 'a6f807d2034d55e5218c01375c4ff36564924bfb', htmlFor: "type" }, "Type"), h("pos-select-term", { key: 'f6001d6801bee97c03121d57742a595c8d5d5bd7', id: "type", placeholder: "", value: this.selectedTypeUri, "onPod-os:term-selected": e => this.onTermSelected(e) }), h("label", { key: '9365561d47d72e0153bb743f4fdf5ca7a1b5dcc0', htmlFor: "name" }, "Name"), h("input", { key: 'c93de873370a1123441a33d27c53c954bcc5f5ce', id: "name", type: "text", value: this.name, onInput: e => this.handleChange(e) }), this.newUri ? (h("div", { id: "new-uri", title: "This will be the URI of the new thing" }, this.newUri)) : null, h("input", { key: '9fc1fb39f7c582a069876642cc17678303c7d72b', id: "create", type: "submit", value: "Create", disabled: !this.canSubmit })));
+        return (h("form", { key: '6d8a76b95abc98ab382b425b2dd8894983bb9522', method: "dialog", onSubmit: e => this.handleSubmit(e) }, h("label", { key: '6fe391ac186c0b0a8e6bb3265e66469dac3ab187', htmlFor: "type" }, "Type"), h("pos-select-term", { key: '33b50596c8cd22d8ce2b1af114277fa9bfd80355', id: "type", placeholder: "", value: this.selectedTypeUri, "onPod-os:term-selected": e => this.onTermSelected(e) }), h("label", { key: '8681f29f0c20d59c2be10a1f49cc38dea6abd19d', htmlFor: "name" }, "Name"), h("input", { key: 'f5905d871b55821f7019134d972e1f156c55f49e', id: "name", type: "text", value: this.name, onInput: e => this.handleChange(e) }), this.newUri ? (h("div", { id: "new-uri", title: "This will be the URI of the new thing" }, this.newUri)) : null, h("input", { key: 'dade4834abecd9bf2fc8eb5bca0b1f60784287a4', id: "create", type: "submit", value: "Create", disabled: !this.canSubmit })));
     }
     handleChange(event) {
         this.name = event.target.value;
@@ -3799,7 +3669,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 {
@@ -3808,10 +3678,10 @@ const PosRichLink = class {
         this.linkEmitter = createEvent(this, "pod-os:link", 7);
     }
     render() {
-        return (h("pos-resource", { key: '0a794cc8287b13f163a813dc6a4f87b2f00e028b', lazy: true, uri: this.uri }, h("p", { key: 'b7a44482a82cd69228f144b04e9ec20b84410339', class: "content" }, h("a", { key: '0d218d4d5c1991c767b66f0d37c5476038e7a0fb', href: this.uri, onClick: e => {
+        return (h("pos-resource", { key: '389fb8817f5a7ff77965a8bb9924f48af15c528c', lazy: true, uri: this.uri }, h("p", { key: '1946deeff38a510800ef1558fd6374f65d72cd7f', class: "content" }, h("a", { key: '776c99ca32c7cd7fac30ab1f18b1c024b234d85f', href: this.uri, onClick: e => {
                 e.preventDefault();
                 this.linkEmitter.emit(this.uri);
-            } }, h("pos-label", { key: 'd04048986a7a4da138608f187a2f27e6313d9a6e' })), h("span", { key: '53a05023aa2fec4725e1d7e59acee9888476ecac', class: "url" }, new URL(this.uri).host), h("pos-description", { key: 'a73de2d208b684a9f555cda312e94df4282afba0' }))));
+            } }, h("pos-label", { key: '0ddb22c414f2e4d61cf1beabb301b723b78235e1' })), h("span", { key: 'd2730c1fcc1c1521a7527bdb7a63c091ff49746c', class: "url" }, new URL(this.uri).host), h("pos-description", { key: '53867e57b7403aed46e94a5f3df0b8389bc68244' }))));
     }
 };
 PosRichLink.style = PosRichLinkStyle0;
@@ -4104,7 +3974,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();
@@ -4142,7 +4012,7 @@ const PosRouter = class {
         this.routeChanged.emit(this.uri);
     }
     render() {
-        return h("slot", { key: '221db70a52ce7ebc7e9c171142dcf94f252fa985' });
+        return h("slot", { key: 'a5a451a8ddf4a30c6e5cbb2faf61d44f5a286df9' });
     }
 };
 PosRouter.style = PosRouterStyle0;
@@ -4172,7 +4042,7 @@ const PosSelectTerm = class {
         this.termSelected.emit({ uri: event.target.value });
     }
     render() {
-        return (h(Host, { key: '7a548735e2a0478fa1e63e2a880ca61f0f43d91c' }, h("input", { key: '9549691026f4bf42a3048f2af3a78bd71536b160', part: "input", list: "terms", placeholder: this.placeholder, value: this.value, onChange: ev => this.handleChange(ev) }), h("datalist", { key: 'adfd77a001389d6cc092e3b054ef12e45d562d54', part: "terms", id: "terms" }, this.terms.map(term => (h("option", { value: term.uri }, term.shorthand))))));
+        return (h(Host, { key: '7f7d48443893800bb818e67865fccdbe1d10d44a' }, h("input", { key: 'ee24690418d5a4d6e357154e12685fa9975754f9', part: "input", list: "terms", placeholder: this.placeholder, value: this.value, onChange: ev => this.handleChange(ev) }), h("datalist", { key: '78fde7ccb4e0750e902da139b02810c15c21db3e', part: "terms", id: "terms" }, this.terms.map(term => (h("option", { value: term.uri }, term.shorthand))))));
     }
     static get delegatesFocus() { return true; }
     static get watchers() { return {
@@ -4189,7 +4059,7 @@ const PosSettingOfflineCache = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'f024e7d542cfc87a4dc0a1f22694b664086ebd60' }, h("div", { key: 'e88e694cefa4a2361ca8c67f1bd023fda1b70f2a' }, h("h2", { key: 'c4b2e6270f26a2eb7f62e5076b40834903fc10e4' }, h("svg", { key: 'd63643c1ed908c6fe9ab4ff6c47b13848c714c32', xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" }, h("path", { key: '78f055556bb175ea17d0db1ccf78c16343d67d3f', "stroke-linecap": "round", "stroke-linejoin": "round", d: "M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" })), "Cache Settings"), h("p", { key: '3045ae3214b9e91feb34857ce45a3db6529f2959', class: "info" }, "\u2139 Enable offline cache to be able to access previously loaded data while offline."), h("p", { key: '9987c1cb59b62e1eb06c67a9c646a9a2f125529a', class: "warn" }, "\u26A0 Private data may be stored on this device. Only enable it, if you trust this device."), h("label", { key: '55dd3c0fa7ece9a59437e7818d6cfa9b0e9eb5bf' }, h("input", { key: '22874f8a39b5016b71818fa1d6226bf66ff969c3', type: "checkbox", checked: localSettings.state.offlineCache, onChange: ev => (localSettings.state.offlineCache = ev.target.checked) }), "Enable offline cache"))));
+        return (h(Host, { key: 'b598a0dbe21fe9e7f1aa0f51f0b53c270feb8add' }, h("div", { key: '5cec10cc63203c8421bbb627643f1365899cc850' }, h("h2", { key: '094528da7d8567e8a2ba6e82fb1c05b2f4dc7b22' }, h("svg", { key: '3d3e8b17420ba7352877eb1c6bca17d3791b1bd6', xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" }, h("path", { key: '065bc78382b03bd2bcc3c812a71e9f27c4e3251c', "stroke-linecap": "round", "stroke-linejoin": "round", d: "M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" })), "Cache Settings"), h("p", { key: '5e5d2ec497039791f82a857a709157e6b97efdfe', class: "info" }, "\u2139 Enable offline cache to be able to access previously loaded data while offline."), h("p", { key: 'd4ff4a3a17df1e5ed7ce076abbf98def4ebdac7d', class: "warn" }, "\u26A0 Private data may be stored on this device. Only enable it, if you trust this device."), h("label", { key: '1d1aa4f7b4b5fa53080cc5635a20ccee3faee29d' }, h("input", { key: '4223888802ea51dec26a3d23abdd9c28098de5aa', type: "checkbox", checked: localSettings.state.offlineCache, onChange: ev => (localSettings.state.offlineCache = ev.target.checked) }), "Enable offline cache"))));
     }
 };
 PosSettingOfflineCache.style = PosSettingOfflineCacheStyle0;
@@ -4247,6 +4117,6 @@ const PosTypeRouter = class {
     }
 };
 
-export { Icon as ion_icon, ProgressBar as ion_progress_bar, RippleEffect as ion_ripple_effect, Searchbar as ion_searchbar, SkeletonText as ion_skeleton_text, Toast as ion_toast, PosAddNewThing as pos_add_new_thing, PosApp as pos_app, PosAppBrowser as pos_app_browser, PosAppDashboard as pos_app_dashboard, PosAppSettings as pos_app_settings, PosDescription as pos_description, PosDialog as pos_dialog, PosErrorToast as pos_error_toast, PosExampleResources as pos_example_resources, PosGettingStarted as pos_getting_started, PosImage as pos_image, PosInternalRouter as pos_internal_router, PosLabel as pos_label, PosLogin as pos_login, PosLoginForm as pos_login_form, PosMakeFindable as pos_make_findable, PosNavigationBar as pos_navigation_bar, PosNewThingForm as pos_new_thing_form, PosPicture as pos_picture, PosResource as pos_resource, PosRichLink as pos_rich_link, PosRouter as pos_router, PosSelectTerm as pos_select_term, PosSettingOfflineCache as pos_setting_offline_cache, PosTypeRouter as pos_type_router };
+export { Icon as ion_icon, ProgressBar as ion_progress_bar, RippleEffect as ion_ripple_effect, SkeletonText as ion_skeleton_text, Toast as ion_toast, PosAddNewThing as pos_add_new_thing, PosApp as pos_app, PosAppBrowser as pos_app_browser, PosAppDashboard as pos_app_dashboard, PosAppSettings as pos_app_settings, PosDescription as pos_description, PosDialog as pos_dialog, PosErrorToast as pos_error_toast, PosExampleResources as pos_example_resources, PosGettingStarted as pos_getting_started, PosImage as pos_image, PosInternalRouter as pos_internal_router, PosLabel as pos_label, PosLogin as pos_login, PosLoginForm as pos_login_form, PosMakeFindable as pos_make_findable, PosNavigation as pos_navigation, PosNavigationBar as pos_navigation_bar, PosNewThingForm as pos_new_thing_form, PosPicture as pos_picture, PosResource as pos_resource, PosRichLink as pos_rich_link, PosRouter as pos_router, PosSelectTerm as pos_select_term, PosSettingOfflineCache as pos_setting_offline_cache, PosTypeRouter as pos_type_router };
 
 //# sourceMappingURL=ion-icon_31.entry.js.map