@pod-os/elements 0.0.1 → 0.0.2-c322656

package/dist/esm/{ion-app_32.entry.js → ion-app_34.entry.js}

@@ -1,7 +1,7 @@
-import { r as registerInstance, h, H as Host, a as getElement, c as createEvent, f as forceUpdate, d as readTask, w as writeTask, e as getAssetPath, i as getRenderingRef } from './index-82f710ea.js';
-import { g as getIonMode$1, c as config, a as isPlatform } from './ionic-global-fadc16f8.js';
-import { h as hasShadowDom, i as inheritAttributes, c as clamp, r as raf } from './helpers-dffac6f7.js';
-import { o as openURL, c as createColorClasses$1, h as hostContext } from './theme-12606872.js';
+import { r as registerInstance, h, H as Host, a as getElement, c as createEvent, f as forceUpdate, d as readTask, w as writeTask, e as getAssetPath, i as getRenderingRef } from './index-082b47ce.js';
+import { g as getIonMode$1, c as config, a as isPlatform } from './ionic-global-b8056dd2.js';
+import { h as hasShadowDom, i as inheritAriaAttributes, c as clamp, r as raf } from './helpers-af16fc18.js';
+import { o as openURL, c as createColorClasses$1, h as hostContext } from './theme-d21826a7.js';
 
 const appCss = "html.plt-mobile ion-app{user-select:none}html.plt-mobile ion-app [contenteditable]{user-select:text}ion-app.force-statusbar-padding{--ion-safe-area-top:20px}";
 
@@ -14,15 +14,15 @@ const App = class {
       rIC(async () => {
         const isHybrid = isPlatform(window, 'hybrid');
         if (!config.getBoolean('_testing')) {
-          import('./tap-click-e0215d5a.js').then(module => module.startTapClick(config));
+          import('./tap-click-faa3d392.js').then(module => module.startTapClick(config));
         }
         if (config.getBoolean('statusTap', isHybrid)) {
-          import('./status-tap-54b1c888.js').then(module => module.startStatusTap());
+          import('./status-tap-3e0a5551.js').then(module => module.startStatusTap());
         }
         if (config.getBoolean('inputShims', needInputShims())) {
-          import('./input-shims-9c0b3bc9.js').then(module => module.startInputShims(config));
+          import('./input-shims-dbfbbeff.js').then(module => module.startInputShims(config));
         }
-        const hardwareBackButtonModule = await import('./hardware-back-button-508e48cf.js');
+        const hardwareBackButtonModule = await import('./hardware-back-button-bb4c578a.js');
         if (config.getBoolean('hardwareBackButton', isHybrid)) {
           hardwareBackButtonModule.startHardwareBackButton();
         }
@@ -30,9 +30,9 @@ const App = class {
           hardwareBackButtonModule.blockHardwareBackButton();
         }
         if (typeof window !== 'undefined') {
-          import('./keyboard-06906eac.js').then(module => module.startKeyboardAssist(window));
+          import('./keyboard-e6abcb80.js').then(module => module.startKeyboardAssist(window));
         }
-        import('./focus-visible-abf04ce3.js').then(module => module.startFocusVisible());
+        import('./focus-visible-edb28f19.js').then(module => module.startFocusVisible());
       });
     }
   }
@@ -124,7 +124,7 @@ const Button = class {
     this.inToolbar = !!this.el.closest('ion-buttons');
     this.inListHeader = !!this.el.closest('ion-list-header');
     this.inItem = !!this.el.closest('ion-item') || !!this.el.closest('ion-item-divider');
-    this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
+    this.inheritedAttributes = inheritAriaAttributes(this.el);
   }
   get hasIconOnly() {
     return !!this.el.querySelector('[slot="icon-only"]');
@@ -289,27 +289,6 @@ CardHeader.style = {
   md: cardHeaderMdCss
 };
 
-const cardSubtitleIosCss = ":host{display:block;position:relative;color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-color-step-600, #666666);margin-left:0;margin-right:0;margin-top:0;margin-bottom:4px;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-size:12px;font-weight:700;letter-spacing:0.4px;text-transform:uppercase}";
-
-const cardSubtitleMdCss = ":host{display:block;position:relative;color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-color-step-550, #737373);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-size:14px;font-weight:500}";
-
-const CardSubtitle = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    const mode = getIonMode$1(this);
-    return (h(Host, { role: "heading", "aria-level": "3", class: createColorClasses$1(this.color, {
-        'ion-inherit-color': true,
-        [mode]: true
-      }) }, h("slot", null)));
-  }
-};
-CardSubtitle.style = {
-  ios: cardSubtitleIosCss,
-  md: cardSubtitleMdCss
-};
-
 const cardTitleIosCss = ":host{display:block;position:relative;color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-text-color, #000);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-size:28px;font-weight:700;line-height:1.2}";
 
 const cardTitleMdCss = ":host{display:block;position:relative;color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-color-step-850, #262626);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-size:20px;font-weight:500;line-height:1.2}";
@@ -441,7 +420,7 @@ const Col = class {
 };
 Col.style = colCss;
 
-const contentCss = ":host{--background:var(--ion-background-color, #fff);--color:var(--ion-text-color, #000);--padding-top:0px;--padding-bottom:0px;--padding-start:0px;--padding-end:0px;--keyboard-offset:0px;--offset-top:0px;--offset-bottom:0px;--overflow:auto;display:block;position:relative;flex:1;width:100%;height:100%;margin:0 !important;padding:0 !important;font-family:var(--ion-font-family, inherit);contain:size style}:host(.ion-color) .inner-scroll{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.outer-content){--background:var(--ion-color-step-50, #f2f2f2)}#background-content{left:0px;right:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);position:absolute;background:var(--background)}.inner-scroll{left:0px;right:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:calc(var(--padding-top) + var(--offset-top));padding-bottom:calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom));position:absolute;color:var(--color);box-sizing:border-box;overflow:hidden}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.inner-scroll{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.scroll-y,.scroll-x{-webkit-overflow-scrolling:touch;z-index:0;will-change:scroll-position}.scroll-y{touch-action:pan-y;overflow-y:var(--overflow);overscroll-behavior-y:contain}.scroll-x{touch-action:pan-x;overflow-x:var(--overflow);overscroll-behavior-x:contain}.scroll-x.scroll-y{touch-action:auto}.overscroll::before,.overscroll::after{position:absolute;width:1px;height:1px;content:\"\"}.overscroll::before{bottom:-1px}.overscroll::after{top:-1px}:host(.content-sizing){contain:none}:host(.content-sizing) .inner-scroll{position:relative}.transition-effect{display:none;position:absolute;left:-100%;width:100%;height:100vh;opacity:0;pointer-events:none}.transition-cover{position:absolute;right:0;width:100%;height:100%;background:black;opacity:0.1}.transition-shadow{display:block;position:absolute;right:0;width:10px;height:100%;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAgCAYAAAAIXrg4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTE3MDgzRkQ5QTkyMTFFOUEwNzQ5MkJFREE1NUY2MjQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTE3MDgzRkU5QTkyMTFFOUEwNzQ5MkJFREE1NUY2MjQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxMTcwODNGQjlBOTIxMUU5QTA3NDkyQkVEQTU1RjYyNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxMTcwODNGQzlBOTIxMUU5QTA3NDkyQkVEQTU1RjYyNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PmePEuQAAABNSURBVHjaYvz//z8DIxAwMDAwATGMhmFmPDQuOSZks0AMmoJBaQHjkPfB0Lfg/2gQjVow+HPy/yHvg9GiYjQfjMbBqAWjFgy/4hogwADYqwdzxy5BuwAAAABJRU5ErkJggg==);background-repeat:repeat-y;background-size:10px 16px}::slotted([slot=fixed]){position:absolute}";
+const contentCss = ":host{--background:var(--ion-background-color, #fff);--color:var(--ion-text-color, #000);--padding-top:0px;--padding-bottom:0px;--padding-start:0px;--padding-end:0px;--keyboard-offset:0px;--offset-top:0px;--offset-bottom:0px;--overflow:auto;display:block;position:relative;flex:1;width:100%;height:100%;margin:0 !important;padding:0 !important;font-family:var(--ion-font-family, inherit);contain:size style}:host(.ion-color) .inner-scroll{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.outer-content){--background:var(--ion-color-step-50, #f2f2f2)}#background-content{left:0px;right:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);position:absolute;background:var(--background)}.inner-scroll{left:0px;right:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:calc(var(--padding-top) + var(--offset-top));padding-bottom:calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom));position:absolute;color:var(--color);box-sizing:border-box;overflow:hidden}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.inner-scroll{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.scroll-y,.scroll-x{-webkit-overflow-scrolling:touch;z-index:0;will-change:scroll-position}.scroll-y{touch-action:pan-y;overflow-y:var(--overflow);overscroll-behavior-y:contain}.scroll-x{touch-action:pan-x;overflow-x:var(--overflow);overscroll-behavior-x:contain}.scroll-x.scroll-y{touch-action:auto}.overscroll::before,.overscroll::after{position:absolute;width:1px;height:1px;content:\"\"}.overscroll::before{bottom:-1px}.overscroll::after{top:-1px}:host(.content-sizing){display:flex;flex-direction:column;min-height:0;contain:none}:host(.content-sizing) .inner-scroll{position:relative;top:0;bottom:0;margin-top:calc(var(--offset-top) * -1);margin-bottom:calc(var(--offset-bottom) * -1)}.transition-effect{display:none;position:absolute;left:-100%;width:100%;height:100vh;opacity:0;pointer-events:none}.transition-cover{position:absolute;right:0;width:100%;height:100%;background:black;opacity:0.1}.transition-shadow{display:block;position:absolute;right:0;width:10px;height:100%;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAgCAYAAAAIXrg4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTE3MDgzRkQ5QTkyMTFFOUEwNzQ5MkJFREE1NUY2MjQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTE3MDgzRkU5QTkyMTFFOUEwNzQ5MkJFREE1NUY2MjQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxMTcwODNGQjlBOTIxMUU5QTA3NDkyQkVEQTU1RjYyNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxMTcwODNGQzlBOTIxMUU5QTA3NDkyQkVEQTU1RjYyNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PmePEuQAAABNSURBVHjaYvz//z8DIxAwMDAwATGMhmFmPDQuOSZks0AMmoJBaQHjkPfB0Lfg/2gQjVow+HPy/yHvg9GiYjQfjMbBqAWjFgy/4hogwADYqwdzxy5BuwAAAABJRU5ErkJggg==);background-repeat:repeat-y;background-size:10px 16px}::slotted([slot=fixed]){position:absolute;transform:translateZ(0)}";
 
 const Content = class {
   constructor(hostRef) {
@@ -505,12 +484,6 @@ const Content = class {
   onAppLoad() {
     this.resize();
   }
-  onClick(ev) {
-    if (this.isScrolling) {
-      ev.preventDefault();
-      ev.stopPropagation();
-    }
-  }
   shouldForceOverscroll() {
     const { forceOverscroll } = this;
     const mode = getIonMode$1(this);
@@ -709,7 +682,12 @@ const getPageElement = (el) => {
   if (tabs) {
     return tabs;
   }
-  const page = el.closest('ion-app,ion-page,.ion-page,page-inner');
+  /**
+   * If we're in a popover, we need to use its wrapper so we can account for space
+   * between the popover and the edges of the screen. But if the popover contains
+   * its own page element, we should use that instead.
+   */
+  const page = el.closest('ion-app, ion-page, .ion-page, page-inner, .popover-content');
   if (page) {
     return page;
   }
@@ -953,7 +931,7 @@ const Header = class {
     this.translucent = false;
   }
   componentWillLoad() {
-    this.inheritedAttributes = inheritAttributes(this.el, ['role']);
+    this.inheritedAttributes = inheritAriaAttributes(this.el);
   }
   async componentDidLoad() {
     await this.checkCollapsibleHeader();
@@ -1047,7 +1025,9 @@ const Header = class {
     const { translucent, inheritedAttributes } = this;
     const mode = getIonMode$1(this);
     const collapse = this.collapse || 'none';
-    return (h(Host, Object.assign({ role: "banner", class: {
+    // banner role must be at top level, so remove role if inside a menu
+    const roleType = hostContext('ion-menu', this.el) ? 'none' : 'banner';
+    return (h(Host, Object.assign({ role: roleType, class: {
         [mode]: true,
         // Used internally for styling
         [`header-${mode}`]: true,
@@ -1339,6 +1319,7 @@ const Item = class {
     this.labelColorStyles = {};
     this.itemStyles = new Map();
     this.multipleInputs = false;
+    this.focusable = true;
     /**
      * If `true`, a button tag will be rendered and the item will be tappable.
      */
@@ -1412,7 +1393,10 @@ const Item = class {
     }
   }
   componentDidLoad() {
-    raf(() => this.setMultipleInputs());
+    raf(() => {
+      this.setMultipleInputs();
+      this.focusable = this.isFocusable();
+    });
   }
   // If the item contains multiple clickable elements and/or inputs, then the item
   // should not have a clickable input cover over the entire item to prevent
@@ -1448,6 +1432,10 @@ const Item = class {
   canActivate() {
     return (this.isClickable() || this.hasCover());
   }
+  isFocusable() {
+    const focusableChild = this.el.querySelector('.ion-focusable');
+    return (this.canActivate() || focusableChild !== null);
+  }
   getFirstInput() {
     const inputs = this.el.querySelectorAll('ion-input, ion-textarea');
     return inputs[0];
@@ -1509,7 +1497,7 @@ const Item = class {
         'in-list': hostContext('ion-list', this.el),
         'item-multiple-inputs': this.multipleInputs,
         'ion-activatable': canActivate,
-        'ion-focusable': true,
+        'ion-focusable': this.focusable
       })) }, h(TagType, Object.assign({}, attrs, { class: "item-native", part: "native", disabled: disabled }, clickFn), h("slot", { name: "start" }), h("div", { class: "item-inner" }, h("div", { class: "input-wrapper" }, h("slot", null)), h("slot", { name: "end" }), showDetail && h("ion-icon", { icon: detailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true" }), h("div", { class: "item-inner-highlight" })), canActivate && mode === 'md' && h("ion-ripple-effect", null)), h("div", { class: "item-highlight" })));
   }
   static get delegatesFocus() { return true; }
@@ -2146,7 +2134,7 @@ const createStore = (defaultState, shouldUpdate) => {
 
 const getIdpUrl = () => prompt('Please enter your Identity Provider URL', 'http://localhost:3000');
 
-const { state } = createStore({
+const store = createStore({
   getIdpUrl,
   isLoggedIn: false,
   webId: '',
@@ -2165,11 +2153,11 @@ const PosApp = class {
     this.os = createPodOS();
     this.os.handleIncomingRedirect();
     this.os.trackSession(sessionInfo => {
-      state.isLoggedIn = sessionInfo.isLoggedIn;
-      state.webId = sessionInfo.webId;
+      store.state.isLoggedIn = sessionInfo.isLoggedIn;
+      store.state.webId = sessionInfo.webId;
     });
   }
-  async consumeOs(event) {
+  async initializeOs(event) {
     event.stopPropagation();
     event.detail(this.os);
   }
@@ -2178,16 +2166,21 @@ const PosApp = class {
   }
 };
 
-const PosDemoApp = class {
+const PosAppGeneric = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.url = 'http://localhost:3000/alice/games/minecraft#it';
   }
-  linkClicked(e) {
-    this.url = e.detail;
+  render() {
+    return (h("ion-grid", null, h("ion-row", null, h("ion-col", { size: "12", "size-sm": true }, h("ion-card", null, h("ion-card-header", null, h("img", { src: "https://dummyimage.com/250/ffffff/000000" }), h("ion-card-title", null, h("pos-label", null))), h("ion-card-content", null, h("pos-description", null)))), h("ion-col", { size: "12", "size-sm": true }, h("pos-literals", null)), h("ion-col", { size: "12", "size-sm": true }, h("pos-relations", null), h("pos-reverse-relations", null)))));
+  }
+};
+
+const PosDemoApp = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
   }
   render() {
-    return (h("pos-app", null, h("ion-header", null, h("ion-toolbar", null, h("ion-title", { slot: "start" }, "pod os"), h("pos-login", null))), h("ion-content", { class: "ion-padding" }, h("pos-resource", { uri: this.url }, h("ion-grid", null, h("ion-row", null, h("ion-col", { size: "12", "size-sm": true }, h("ion-card", null, h("ion-card-header", null, h("img", { src: "https://upload.wikimedia.org/wikipedia/de/5/57/Minecraft_logo-SVG.svg" }), h("ion-card-subtitle", null, "VideoGame"), h("ion-card-title", null, h("pos-label", null))), h("ion-card-content", null, h("pos-description", null)))), h("ion-col", { size: "12", "size-sm": true }, h("pos-literals", null)), h("ion-col", { size: "12", "size-sm": true }, h("pos-relations", null)))))), h("ion-footer", null, h("ion-toolbar", null, h("ion-title", null, "Footer")))));
+    return (h("pos-app", null, h("ion-header", null, h("ion-toolbar", null, h("ion-title", { slot: "start" }, "pod os"), h("pos-login", null))), h("ion-content", null, h("pos-router", null)), h("ion-footer", null, h("ion-toolbar", null, h("ion-title", null, "Footer")))));
   }
 };
 
@@ -2207,7 +2200,7 @@ const PosDescription = class {
   }
 };
 
-const PosLabel$1 = class {
+const PosLabel = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.getResource = createEvent(this, "pod-os:resource", 7);
@@ -2244,23 +2237,23 @@ const PosLiterals = class {
 const PosLogin = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.consumeOsEmitter = createEvent(this, "consumeOs", 7);
+    this.initializeOsEmitter = createEvent(this, "pod-os:init", 7);
     this.setOs = async (os) => {
       this.os = os;
     };
   }
   componentWillLoad() {
-    this.consumeOsEmitter.emit(this.setOs);
+    this.initializeOsEmitter.emit(this.setOs);
   }
   login() {
-    const idp = state.getIdpUrl();
+    const idp = store.state.getIdpUrl();
     this.os.login(idp);
   }
   logout() {
     this.os.logout();
   }
   render() {
-    return (h(Host, null, state.isLoggedIn ? (h("pos-resource", { uri: state.webId }, h("pos-label", null))) : (''), !state.isLoggedIn && h("ion-button", { onClick: () => this.login() }, "Login"), state.isLoggedIn && h("ion-button", { onClick: () => this.logout() }, "Logout")));
+    return (h(Host, null, store.state.isLoggedIn ? (h("pos-resource", { uri: store.state.webId }, h("pos-label", null))) : (''), !store.state.isLoggedIn && h("ion-button", { onClick: () => this.login() }, "Login"), store.state.isLoggedIn && h("ion-button", { onClick: () => this.logout() }, "Logout")));
   }
 };
 
@@ -2285,7 +2278,7 @@ const PosRelations = class {
 const PosResource = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.consumeOsEmitter = createEvent(this, "consumeOs", 7);
+    this.initializeOsEmitter = createEvent(this, "pod-os:init", 7);
     this.consumers = [];
     this.lazy = false;
     this.loading = true;
@@ -2294,7 +2287,8 @@ const PosResource = class {
     };
   }
   componentWillLoad() {
-    this.consumeOsEmitter.emit(this.setOs);
+    store.onChange('isLoggedIn', () => this.loadResource());
+    this.initializeOsEmitter.emit(this.setOs);
   }
   async provideResource(event) {
     event.stopPropagation();
@@ -2316,6 +2310,7 @@ const PosResource = class {
         await this.os.fetch(this.uri);
       }
       this.resource = this.os.store.get(this.uri);
+      this.error = null;
       this.consumers.forEach(consumer => {
         consumer.detail(this.resource);
       });
@@ -2342,7 +2337,25 @@ const PosResource = class {
   }; }
 };
 
-const PosLabel = class {
+const PosReverseRelations = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.getResource = createEvent(this, "pod-os:resource", 7);
+    this.data = [];
+    this.setResource = async (resource) => {
+      this.data = resource.reverseRelations();
+    };
+  }
+  componentWillLoad() {
+    this.getResource.emit(this.setResource);
+  }
+  render() {
+    const items = this.data.map(it => (h("ion-item-group", null, h("ion-item-divider", null, h("ion-label", null, "is ", it.predicate, " of")), it.uris.map(uri => (h("pos-rich-link", { uri: uri }))))));
+    return this.data.length > 0 ? h("ion-list", null, items) : null;
+  }
+};
+
+const PosRichLink = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.linkEmitter = createEvent(this, "pod-os:link", 7);
@@ -2355,4 +2368,400 @@ const PosLabel = class {
   }
 };
 
-export { App as ion_app, Button as ion_button, Card as ion_card, CardContent as ion_card_content, CardHeader as ion_card_header, CardSubtitle as ion_card_subtitle, CardTitle as ion_card_title, Col as ion_col, Content as ion_content, Footer as ion_footer, Grid as ion_grid, Header as ion_header, Icon as ion_icon, Item as ion_item, ItemDivider as ion_item_divider, ItemGroup as ion_item_group, Label as ion_label, List as ion_list, ProgressBar as ion_progress_bar, RippleEffect as ion_ripple_effect, Row as ion_row, ToolbarTitle as ion_title, Toolbar as ion_toolbar, PosApp as pos_app, PosDemoApp as pos_demo_app, PosDescription as pos_description, PosLabel$1 as pos_label, PosLiterals as pos_literals, PosLogin as pos_login, PosRelations as pos_relations, PosResource as pos_resource, PosLabel as pos_rich_link };
+const createRouter = (opts) => {
+    var _a;
+    const win = window;
+    const url = new URL(win.location.href);
+    const parseURL = (_a = opts === null || opts === void 0 ? void 0 : opts.parseURL) !== null && _a !== void 0 ? _a : DEFAULT_PARSE_URL;
+    const { state, onChange, dispose } = createStore({
+        url,
+        activePath: parseURL(url)
+    }, (newV, oldV, prop) => {
+        if (prop === 'url') {
+            return newV.href !== oldV.href;
+        }
+        return newV !== oldV;
+    });
+    const push = (href) => {
+        history.pushState(null, null, href);
+        const url = new URL(href, document.baseURI);
+        state.url = url;
+        state.activePath = parseURL(url);
+    };
+    const match = (routes) => {
+        const { activePath } = state;
+        for (let route of routes) {
+            const params = matchPath(activePath, route.path);
+            if (params) {
+                if (route.to != null) {
+                    const to = (typeof route.to === 'string')
+                        ? route.to
+                        : route.to(activePath);
+                    push(to);
+                    return match(routes);
+                }
+                else {
+                    return { params, route };
+                }
+            }
+        }
+        return undefined;
+    };
+    const navigationChanged = () => {
+        const url = new URL(win.location.href);
+        state.url = url;
+        state.activePath = parseURL(url);
+    };
+    const Switch = (_, childrenRoutes) => {
+        const result = match(childrenRoutes);
+        if (result) {
+            if (typeof result.route.jsx === 'function') {
+                return result.route.jsx(result.params);
+            }
+            else {
+                return result.route.jsx;
+            }
+        }
+    };
+    const disposeRouter = () => {
+        win.removeEventListener('popstate', navigationChanged);
+        dispose();
+    };
+    const router = {
+        Switch,
+        get url() {
+            return state.url;
+        },
+        get activePath() {
+            return state.activePath;
+        },
+        push,
+        onChange: onChange,
+        dispose: disposeRouter,
+    };
+    // Initial update
+    navigationChanged();
+    // Listen URL changes
+    win.addEventListener('popstate', navigationChanged);
+    return router;
+};
+const Route = (props, children) => {
+    var _a;
+    if ('to' in props) {
+        return {
+            path: props.path,
+            to: props.to,
+        };
+    }
+    return {
+        path: props.path,
+        id: props.id,
+        jsx: (_a = props.render) !== null && _a !== void 0 ? _a : children,
+    };
+};
+const matchPath = (pathname, path) => {
+    if (typeof path === 'string') {
+        if (path === pathname) {
+            return {};
+        }
+    }
+    else if (typeof path === 'function') {
+        const params = path(pathname);
+        if (params) {
+            return params === true
+                ? {}
+                : { ...params };
+        }
+    }
+    else {
+        const results = path.exec(pathname);
+        if (results) {
+            path.lastIndex = 0;
+            return { ...results };
+        }
+    }
+    return undefined;
+};
+const DEFAULT_PARSE_URL = (url) => {
+    return url.pathname.toLowerCase();
+};
+
+/**
+ * TS adaption of https://github.com/pillarjs/path-to-regexp/blob/master/index.js
+ */
+/**
+ * Default configs.
+ */
+const DEFAULT_DELIMITER = '/';
+const DEFAULT_DELIMITERS = './';
+/**
+ * The main path matching regexp utility.
+ */
+const PATH_REGEXP = new RegExp([
+    // Match escaped characters that would otherwise appear in future matches.
+    // This allows the user to escape special characters that won't transform.
+    '(\\\\.)',
+    // Match Express-style parameters and un-named parameters with a prefix
+    // and optional suffixes. Matches appear as:
+    //
+    // "/:test(\\d+)?" => ["/", "test", "\d+", undefined, "?"]
+    // "/route(\\d+)"  => [undefined, undefined, undefined, "\d+", undefined]
+    '(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?'
+].join('|'), 'g');
+/**
+ * Parse a string for the raw tokens.
+ */
+const parse = (str, options) => {
+    var tokens = [];
+    var key = 0;
+    var index = 0;
+    var path = '';
+    var defaultDelimiter = (options && options.delimiter) || DEFAULT_DELIMITER;
+    var delimiters = (options && options.delimiters) || DEFAULT_DELIMITERS;
+    var pathEscaped = false;
+    var res;
+    while ((res = PATH_REGEXP.exec(str)) !== null) {
+        var m = res[0];
+        var escaped = res[1];
+        var offset = res.index;
+        path += str.slice(index, offset);
+        index = offset + m.length;
+        // Ignore already escaped sequences.
+        if (escaped) {
+            path += escaped[1];
+            pathEscaped = true;
+            continue;
+        }
+        var prev = '';
+        var next = str[index];
+        var name = res[2];
+        var capture = res[3];
+        var group = res[4];
+        var modifier = res[5];
+        if (!pathEscaped && path.length) {
+            var k = path.length - 1;
+            if (delimiters.indexOf(path[k]) > -1) {
+                prev = path[k];
+                path = path.slice(0, k);
+            }
+        }
+        // Push the current path onto the tokens.
+        if (path) {
+            tokens.push(path);
+            path = '';
+            pathEscaped = false;
+        }
+        var partial = prev !== '' && next !== undefined && next !== prev;
+        var repeat = modifier === '+' || modifier === '*';
+        var optional = modifier === '?' || modifier === '*';
+        var delimiter = prev || defaultDelimiter;
+        var pattern = capture || group;
+        tokens.push({
+            name: name || key++,
+            prefix: prev,
+            delimiter: delimiter,
+            optional: optional,
+            repeat: repeat,
+            partial: partial,
+            pattern: pattern ? escapeGroup(pattern) : '[^' + escapeString(delimiter) + ']+?'
+        });
+    }
+    // Push any remaining characters.
+    if (path || index < str.length) {
+        tokens.push(path + str.substr(index));
+    }
+    return tokens;
+};
+/**
+ * Escape a regular expression string.
+ */
+const escapeString = (str) => {
+    return str.replace(/([.+*?=^!:${}()[\]|/\\])/g, '\\$1');
+};
+/**
+ * Escape the capturing group by escaping special characters and meaning.
+ */
+const escapeGroup = (group) => {
+    return group.replace(/([=!:$/()])/g, '\\$1');
+};
+/**
+ * Get the flags for a regexp from the options.
+ */
+const flags = (options) => {
+    return options && options.sensitive ? '' : 'i';
+};
+/**
+ * Pull out keys from a regexp.
+ */
+const regexpToRegexp = (path, keys) => {
+    if (!keys)
+        return path;
+    // Use a negative lookahead to match only capturing groups.
+    var groups = path.source.match(/\((?!\?)/g);
+    if (groups) {
+        for (var i = 0; i < groups.length; i++) {
+            keys.push({
+                name: i,
+                prefix: null,
+                delimiter: null,
+                optional: false,
+                repeat: false,
+                partial: false,
+                pattern: null
+            });
+        }
+    }
+    return path;
+};
+/**
+ * Transform an array into a regexp.
+ */
+const arrayToRegexp = (path, keys, options) => {
+    var parts = [];
+    for (var i = 0; i < path.length; i++) {
+        parts.push(pathToRegexp(path[i], keys, options).source);
+    }
+    return new RegExp('(?:' + parts.join('|') + ')', flags(options));
+};
+/**
+ * Create a path regexp from string input.
+ */
+const stringToRegexp = (path, keys, options) => {
+    return tokensToRegExp(parse(path, options), keys, options);
+};
+/**
+ * Expose a function for taking tokens and returning a RegExp.
+ */
+const tokensToRegExp = (tokens, keys, options) => {
+    options = options || {};
+    var strict = options.strict;
+    var end = options.end !== false;
+    var delimiter = escapeString(options.delimiter || DEFAULT_DELIMITER);
+    var delimiters = options.delimiters || DEFAULT_DELIMITERS;
+    var endsWith = [].concat(options.endsWith || []).map(escapeString).concat('$').join('|');
+    var route = '';
+    var isEndDelimited = false;
+    // Iterate over the tokens and create our regexp string.
+    for (var i = 0; i < tokens.length; i++) {
+        var token = tokens[i];
+        if (typeof token === 'string') {
+            route += escapeString(token);
+            isEndDelimited = i === tokens.length - 1 && delimiters.indexOf(token[token.length - 1]) > -1;
+        }
+        else {
+            var prefix = escapeString(token.prefix || '');
+            var capture = token.repeat
+                ? '(?:' + token.pattern + ')(?:' + prefix + '(?:' + token.pattern + '))*'
+                : token.pattern;
+            if (keys)
+                keys.push(token);
+            if (token.optional) {
+                if (token.partial) {
+                    route += prefix + '(' + capture + ')?';
+                }
+                else {
+                    route += '(?:' + prefix + '(' + capture + '))?';
+                }
+            }
+            else {
+                route += prefix + '(' + capture + ')';
+            }
+        }
+    }
+    if (end) {
+        if (!strict)
+            route += '(?:' + delimiter + ')?';
+        route += endsWith === '$' ? '$' : '(?=' + endsWith + ')';
+    }
+    else {
+        if (!strict)
+            route += '(?:' + delimiter + '(?=' + endsWith + '))?';
+        if (!isEndDelimited)
+            route += '(?=' + delimiter + '|' + endsWith + ')';
+    }
+    return new RegExp('^' + route, flags(options));
+};
+/**
+ * Normalize the given path string, returning a regular expression.
+ *
+ * An empty array can be passed in for the keys, which will hold the
+ * placeholder key descriptions. For example, using `/user/:id`, `keys` will
+ * contain `[{ name: 'id', delimiter: '/', optional: false, repeat: false }]`.
+ */
+const pathToRegexp = (path, keys, options) => {
+    if (path instanceof RegExp) {
+        return regexpToRegexp(path, keys);
+    }
+    if (Array.isArray(path)) {
+        return arrayToRegexp(path, keys, options);
+    }
+    return stringToRegexp(path, keys, options);
+};
+
+let cacheCount = 0;
+const patternCache = {};
+const cacheLimit = 10000;
+// Memoized function for creating the path match regex
+const compilePath = (pattern, options) => {
+    const cacheKey = `${options.end}${options.strict}`;
+    const cache = patternCache[cacheKey] || (patternCache[cacheKey] = {});
+    const cachePattern = JSON.stringify(pattern);
+    if (cache[cachePattern]) {
+        return cache[cachePattern];
+    }
+    const keys = [];
+    const re = pathToRegexp(pattern, keys, options);
+    const compiledPattern = { re, keys };
+    if (cacheCount < cacheLimit) {
+        cache[cachePattern] = compiledPattern;
+        cacheCount += 1;
+    }
+    return compiledPattern;
+};
+const match = (pathname, options = {}) => {
+    const { exact = false, strict = false } = options;
+    const { re, keys } = compilePath(pathname, { end: exact, strict });
+    return (path) => {
+        const match = re.exec(path);
+        if (!match) {
+            return undefined;
+        }
+        const [url, ...values] = match;
+        const isExact = path === url;
+        if (exact && !isExact) {
+            return undefined;
+        }
+        return keys.reduce((memo, key, index) => {
+            memo[key.name] = values[index];
+            return memo;
+        }, {});
+    };
+};
+
+const Router = createRouter();
+const PosRouter = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  linkClicked(e) {
+    this.navigate(e.detail);
+  }
+  componentWillLoad() {
+    this.updateUri();
+    Router.onChange('url', () => {
+      this.updateUri();
+    });
+  }
+  navigate(uri) {
+    Router.push('?uri=' + encodeURIComponent(uri));
+  }
+  updateUri() {
+    this.uri = new URLSearchParams(window.location.search).get('uri') || window.location.href;
+  }
+  render() {
+    console.log('render router', this.uri);
+    return (h(Router.Switch, null, h(Route, { path: match('', { exact: false }) }, h("pos-resource", { key: this.uri, uri: this.uri }, h("pos-app-generic", null)))));
+  }
+};
+
+export { App as ion_app, Button as ion_button, Card as ion_card, CardContent as ion_card_content, CardHeader as ion_card_header, CardTitle as ion_card_title, Col as ion_col, Content as ion_content, Footer as ion_footer, Grid as ion_grid, Header as ion_header, Icon as ion_icon, Item as ion_item, ItemDivider as ion_item_divider, ItemGroup as ion_item_group, Label as ion_label, List as ion_list, ProgressBar as ion_progress_bar, RippleEffect as ion_ripple_effect, Row as ion_row, ToolbarTitle as ion_title, Toolbar as ion_toolbar, PosApp as pos_app, PosAppGeneric as pos_app_generic, PosDemoApp as pos_demo_app, PosDescription as pos_description, PosLabel as pos_label, PosLiterals as pos_literals, PosLogin as pos_login, PosRelations as pos_relations, PosResource as pos_resource, PosReverseRelations as pos_reverse_relations, PosRichLink as pos_rich_link, PosRouter as pos_router };