@pod-os/elements 0.25.3-rc.ba1a8fa.0 → 0.25.3-rc.def4131.0

package/dist/components/pos-navigation-bar2.js

@@ -1,8 +1,12 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { s as store } from './session.js';
 import { s as subscribePodOs } from './PodOsAware.js';
-import { d as defineCustomElement$8 } from './icon.js';
-import { d as defineCustomElement$7 } from './progress-bar.js';
+import { d as defineCustomElement$c } from './card.js';
+import { d as defineCustomElement$b } from './card-content.js';
+import { d as defineCustomElement$a } from './card-header.js';
+import { d as defineCustomElement$9 } from './icon.js';
+import { d as defineCustomElement$8 } from './progress-bar.js';
+import { d as defineCustomElement$7 } from './ripple-effect.js';
 import { d as defineCustomElement$6 } from './searchbar.js';
 import { d as defineCustomElement$5 } from './pos-description2.js';
 import { d as defineCustomElement$4 } from './pos-label2.js';
@@ -89,7 +93,7 @@ const PosNavigationBar = /*@__PURE__*/ proxyCustomElement(class PosNavigationBar
         }
     }
     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("form", { key: 'cafd872d1cd6a9a0493b6c05ad51ab080d59a4f4', onSubmit: e => this.onSubmit(e) }, this.searchIndex && this.uri ? h("pos-make-findable", { uri: this.uri }) : '', h("div", { key: '8c090ab0ed8b6cb579be0baf7c8129e41b1a5732', class: "bar" }, h("ion-searchbar", { key: '2b1070406dcf0548a5df9c9b226c933789bb1aa5', 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)));
     }
     static get style() { return PosNavigationBarStyle0; }
 }, [1, "pos-navigation-bar", {
@@ -104,19 +108,39 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-navigation-bar", "ion-icon", "ion-progress-bar", "ion-searchbar", "pos-description", "pos-label", "pos-make-findable", "pos-resource", "pos-rich-link"];
+    const components = ["pos-navigation-bar", "ion-card", "ion-card-content", "ion-card-header", "ion-icon", "ion-progress-bar", "ion-ripple-effect", "ion-searchbar", "pos-description", "pos-label", "pos-make-findable", "pos-resource", "pos-rich-link"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-navigation-bar":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PosNavigationBar);
             }
             break;
+        case "ion-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "ion-card-content":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "ion-card-header":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
         case "ion-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$9();
             }
             break;
         case "ion-progress-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "ion-ripple-effect":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }

package/dist/components/pos-navigation-bar2.js.map

@@ -1 +1 @@
-{"file":"pos-navigation-bar2.js","mappings":"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","names":["session"],"sources":["src/components/pos-navigation-bar/pos-navigation-bar.css?tag=pos-navigation-bar&encapsulation=shadow","src/components/pos-navigation-bar/pos-navigation-bar.tsx"],"sourcesContent":[".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","import { PodOS, SearchIndex } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Listen, Prop, State } from '@stencil/core';\n\nimport session from '../../store/session';\nimport { PodOsAware, PodOsEventEmitter, subscribePodOs } from '../events/PodOsAware';\n\n@Component({\n  tag: 'pos-navigation-bar',\n  shadow: true,\n  styleUrl: 'pos-navigation-bar.css',\n})\nexport class PosNavigationBar implements PodOsAware {\n  @State() os: PodOS;\n\n  @Event({ eventName: 'pod-os:init' }) subscribePodOs: PodOsEventEmitter;\n  @Prop() uri: string = '';\n\n  @State() value: string = this.uri;\n\n  @Event({ eventName: 'pod-os:link' }) linkEmitter: EventEmitter;\n\n  @State() searchIndex?: SearchIndex = undefined;\n\n  @State() suggestions = [];\n\n  @State() selectedIndex = -1;\n\n  componentWillLoad() {\n    subscribePodOs(this);\n    session.onChange('isLoggedIn', async isLoggedIn => {\n      if (isLoggedIn) {\n        await this.buildSearchIndex();\n      } else {\n        this.clearSearchIndex();\n      }\n    });\n  }\n\n  @Listen('pod-os:search:index-created')\n  private async buildSearchIndex() {\n    this.searchIndex = await this.os.buildSearchIndex(session.state.profile);\n  }\n\n  @Listen('pod-os:search:index-updated')\n  rebuildSearchIndex() {\n    this.searchIndex.rebuild();\n  }\n\n  private clearSearchIndex() {\n    this.searchIndex?.clear();\n  }\n\n  receivePodOs = async (os: PodOS) => {\n    this.os = os;\n  };\n\n  private onChange(event) {\n    this.value = event.detail.value;\n    this.search();\n  }\n\n  @Listen('click', { target: 'document' })\n  @Listen('pod-os:link')\n  clearSuggestions() {\n    this.suggestions = [];\n    this.selectedIndex = -1;\n  }\n\n  @Listen('click')\n  onClickSelf(event) {\n    event.stopPropagation();\n  }\n\n  @Listen('keydown')\n  handleKeyDown(ev: KeyboardEvent) {\n    if (ev.key === 'Escape') {\n      this.clearSuggestions();\n    } else if (ev.key === 'ArrowDown') {\n      ev.preventDefault();\n      this.selectedIndex = Math.min(this.selectedIndex + 1, this.suggestions.length - 1);\n    } else if (ev.key === 'ArrowUp') {\n      ev.preventDefault();\n      this.selectedIndex = Math.max(this.selectedIndex - 1, 0);\n    }\n  }\n\n  private search() {\n    if (this.searchIndex) {\n      this.suggestions = this.value ? this.searchIndex.search(this.value) : [];\n    }\n  }\n\n  private onSubmit(event) {\n    event.preventDefault();\n    if (this.suggestions && this.selectedIndex > -1) {\n      this.linkEmitter.emit(this.suggestions[this.selectedIndex].ref);\n    } else {\n      this.linkEmitter.emit(this.value);\n    }\n  }\n\n  render() {\n    return (\n      <form onSubmit={e => this.onSubmit(e)}>\n        {this.searchIndex && this.uri ? <pos-make-findable uri={this.uri}></pos-make-findable> : ''}\n        <div class=\"bar\">\n          <ion-searchbar\n            enterkeyhint=\"search\"\n            placeholder=\"Search or enter URI\"\n            value={this.uri}\n            debounce={300}\n            onIonChange={e => this.onChange(e)}\n            onIonInput={e => this.onChange(e)}\n          />\n          {this.suggestions.length > 0 ? (\n            <div class=\"suggestions\">\n              <ol>\n                {this.suggestions.map((it, index) => (\n                  <li class={index === this.selectedIndex ? 'selected' : ''}>\n                    <pos-rich-link uri={it.ref}></pos-rich-link>\n                  </li>\n                ))}\n              </ol>\n            </div>\n          ) : null}\n        </div>\n      </form>\n    );\n  }\n}\n"],"version":3}
+{"file":"pos-navigation-bar2.js","mappings":"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","names":["session"],"sources":["src/components/pos-navigation-bar/pos-navigation-bar.css?tag=pos-navigation-bar&encapsulation=shadow","src/components/pos-navigation-bar/pos-navigation-bar.tsx"],"sourcesContent":[".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","import { PodOS, SearchIndex } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Listen, Prop, State } from '@stencil/core';\n\nimport session from '../../store/session';\nimport { PodOsAware, PodOsEventEmitter, subscribePodOs } from '../events/PodOsAware';\n\n@Component({\n  tag: 'pos-navigation-bar',\n  shadow: true,\n  styleUrl: 'pos-navigation-bar.css',\n})\nexport class PosNavigationBar implements PodOsAware {\n  @State() os: PodOS;\n\n  @Event({ eventName: 'pod-os:init' }) subscribePodOs: PodOsEventEmitter;\n  @Prop() uri: string = '';\n\n  @State() value: string = this.uri;\n\n  @Event({ eventName: 'pod-os:link' }) linkEmitter: EventEmitter;\n\n  @State() searchIndex?: SearchIndex = undefined;\n\n  @State() suggestions = [];\n\n  @State() selectedIndex = -1;\n\n  componentWillLoad() {\n    subscribePodOs(this);\n    session.onChange('isLoggedIn', async isLoggedIn => {\n      if (isLoggedIn) {\n        await this.buildSearchIndex();\n      } else {\n        this.clearSearchIndex();\n      }\n    });\n  }\n\n  @Listen('pod-os:search:index-created')\n  private async buildSearchIndex() {\n    this.searchIndex = await this.os.buildSearchIndex(session.state.profile);\n  }\n\n  @Listen('pod-os:search:index-updated')\n  rebuildSearchIndex() {\n    this.searchIndex.rebuild();\n  }\n\n  private clearSearchIndex() {\n    this.searchIndex?.clear();\n  }\n\n  receivePodOs = async (os: PodOS) => {\n    this.os = os;\n  };\n\n  private onChange(event) {\n    this.value = event.detail.value;\n    this.search();\n  }\n\n  @Listen('click', { target: 'document' })\n  @Listen('pod-os:link')\n  clearSuggestions() {\n    this.suggestions = [];\n    this.selectedIndex = -1;\n  }\n\n  @Listen('click')\n  onClickSelf(event) {\n    event.stopPropagation();\n  }\n\n  @Listen('keydown')\n  handleKeyDown(ev: KeyboardEvent) {\n    if (ev.key === 'Escape') {\n      this.clearSuggestions();\n    } else if (ev.key === 'ArrowDown') {\n      ev.preventDefault();\n      this.selectedIndex = Math.min(this.selectedIndex + 1, this.suggestions.length - 1);\n    } else if (ev.key === 'ArrowUp') {\n      ev.preventDefault();\n      this.selectedIndex = Math.max(this.selectedIndex - 1, 0);\n    }\n  }\n\n  private search() {\n    if (this.searchIndex) {\n      this.suggestions = this.value ? this.searchIndex.search(this.value) : [];\n    }\n  }\n\n  private onSubmit(event) {\n    event.preventDefault();\n    if (this.suggestions && this.selectedIndex > -1) {\n      this.linkEmitter.emit(this.suggestions[this.selectedIndex].ref);\n    } else {\n      this.linkEmitter.emit(this.value);\n    }\n  }\n\n  render() {\n    return (\n      <form onSubmit={e => this.onSubmit(e)}>\n        {this.searchIndex && this.uri ? <pos-make-findable uri={this.uri}></pos-make-findable> : ''}\n        <div class=\"bar\">\n          <ion-searchbar\n            enterkeyhint=\"search\"\n            placeholder=\"Search or enter URI\"\n            value={this.uri}\n            debounce={300}\n            onIonChange={e => this.onChange(e)}\n            onIonInput={e => this.onChange(e)}\n          />\n          {this.suggestions.length > 0 ? (\n            <div class=\"suggestions\">\n              <ol>\n                {this.suggestions.map((it, index) => (\n                  <li class={index === this.selectedIndex ? 'selected' : ''}>\n                    <pos-rich-link uri={it.ref}></pos-rich-link>\n                  </li>\n                ))}\n              </ol>\n            </div>\n          ) : null}\n        </div>\n      </form>\n    );\n  }\n}\n"],"version":3}

package/dist/components/pos-new-thing-form2.js

@@ -25,7 +25,7 @@ const PosNewThingForm = /*@__PURE__*/ proxyCustomElement(class PosNewThingForm e
         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: '0d52a6b85338d0353876f0fde0a7ef45e5ebe104', method: "dialog", onSubmit: e => this.handleSubmit(e) }, h("label", { key: '6765ada99850150a6a1dc9135a6ec0c575e3066d', htmlFor: "type" }, "Type"), h("pos-select-term", { key: '375ca79b6ffa3d363954578cf83d2eab10b0e486', id: "type", placeholder: "", value: this.selectedTypeUri, "onPod-os:term-selected": e => this.onTermSelected(e) }), h("label", { key: '9da148cb532d236a5dc9ad73fc75e1bd2d277d17', htmlFor: "name" }, "Name"), h("input", { key: '81b5a4bf51eb403bfebfa0c9e023935ddde48194', 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: '5f4ff09818262ad875f80bce3a0f942b0428335f', id: "create", type: "submit", value: "Create", disabled: !this.canSubmit })));
     }
     handleChange(event) {
         this.name = event.target.value;

package/dist/components/pos-relations2.js

@@ -1,7 +1,11 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { s as subscribeResource } from './ResourceAware.js';
-import { d as defineCustomElement$7 } from './icon.js';
-import { d as defineCustomElement$6 } from './progress-bar.js';
+import { d as defineCustomElement$b } from './card.js';
+import { d as defineCustomElement$a } from './card-content.js';
+import { d as defineCustomElement$9 } from './card-header.js';
+import { d as defineCustomElement$8 } from './icon.js';
+import { d as defineCustomElement$7 } from './progress-bar.js';
+import { d as defineCustomElement$6 } from './ripple-effect.js';
 import { d as defineCustomElement$5 } from './pos-description2.js';
 import { d as defineCustomElement$4 } from './pos-label2.js';
 import { d as defineCustomElement$3 } from './pos-predicate2.js';
@@ -37,19 +41,39 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-relations", "ion-icon", "ion-progress-bar", "pos-description", "pos-label", "pos-predicate", "pos-resource", "pos-rich-link"];
+    const components = ["pos-relations", "ion-card", "ion-card-content", "ion-card-header", "ion-icon", "ion-progress-bar", "ion-ripple-effect", "pos-description", "pos-label", "pos-predicate", "pos-resource", "pos-rich-link"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-relations":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PosRelations);
             }
             break;
+        case "ion-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "ion-card-content":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "ion-card-header":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
         case "ion-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$8();
             }
             break;
         case "ion-progress-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "ion-ripple-effect":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }

package/dist/components/pos-relations2.js.map

@@ -1 +1 @@
-{"file":"pos-relations2.js","mappings":";;;;;;;;;;AAAA,MAAM,eAAe,GAAG,ygCAAygC,CAAC;AACliC,2BAAe,eAAe;;MCQjB,YAAY;IALzB;;;;;QAMW,SAAI,GAAe,EAAE,CAAC;QAS/B,oBAAe,GAAG,CAAC,QAAe;YAChC,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,SAAS,EAAE,CAAC;SAClC,CAAC;KAmBH;IAzBC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;KACzB;IAMD,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,KAC5B,WAAK,KAAK,EAAC,kBAAkB,IAC3B,cACE,qBAAe,GAAG,EAAE,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,GAAI,CAClD,EACL,WAAK,KAAK,EAAC,QAAQ,IAChB,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,KACd,cACE,qBAAe,GAAG,EAAE,GAAG,GAAI,CACxB,CACN,CAAC,CACE,CACF,CACP,CAAC,CAAC;QACH,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,cAAK,KAAK,CAAM,GAAG,IAAI,CAAC;KACvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-relations/pos-relations.css?tag=pos-relations&encapsulation=shadow","src/components/pos-relations/pos-relations.tsx"],"sourcesContent":[":host {\n  --background-base-color: color-mix(in srgb, var(--pos-background-color), var(--color-grey-800) 10%);\n  --background-color-even: hsl(from var(--background-base-color) h s calc(l + 7));\n  --background-color-odd: hsl(from var(--background-base-color) h s calc(l + 10));\n  --border-color: var(--background-base-color);\n}\n\ndd {\n  padding: 0;\n  margin: 0;\n}\n\ndl {\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-1);\n  padding: 0;\n  margin: 0;\n}\n\ndt {\n  margin-bottom: var(--size-1);\n}\n\n.predicate-values:nth-child(odd) {\n  background-color: var(--background-color-odd);\n}\n\n.predicate-values:nth-child(even) {\n  background-color: var(--background-color-even);\n}\n\n.predicate-values {\n  display: flex;\n  flex-direction: column;\n  border: var(--size-px) solid var(--border-color);\n  padding: var(--size-2);\n  gap: var(--size-1);\n\n  .values {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-3);\n  }\n}\n\npos-rich-link {\n  --background-color: inherit;\n}\n","import { Relation, Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../events/ResourceAware';\n\n@Component({\n  tag: 'pos-relations',\n  shadow: true,\n  styleUrl: 'pos-relations.css',\n})\nexport class PosRelations implements ResourceAware {\n  @State() data: Relation[] = [];\n\n  @Event({ eventName: 'pod-os:resource' })\n  subscribeResource: EventEmitter;\n\n  componentWillLoad() {\n    subscribeResource(this);\n  }\n\n  receiveResource = (resource: Thing) => {\n    this.data = resource.relations();\n  };\n\n  render() {\n    const items = this.data.map(it => (\n      <div class=\"predicate-values\">\n        <dt>\n          <pos-predicate uri={it.predicate} label={it.label} />\n        </dt>\n        <div class=\"values\">\n          {it.uris.map(uri => (\n            <dd>\n              <pos-rich-link uri={uri} />\n            </dd>\n          ))}\n        </div>\n      </div>\n    ));\n    return this.data.length > 0 ? <dl>{items}</dl> : null;\n  }\n}\n"],"version":3}
+{"file":"pos-relations2.js","mappings":";;;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,ygCAAygC,CAAC;AACliC,2BAAe,eAAe;;MCQjB,YAAY;IALzB;;;;;QAMW,SAAI,GAAe,EAAE,CAAC;QAS/B,oBAAe,GAAG,CAAC,QAAe;YAChC,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,SAAS,EAAE,CAAC;SAClC,CAAC;KAmBH;IAzBC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;KACzB;IAMD,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,KAC5B,WAAK,KAAK,EAAC,kBAAkB,IAC3B,cACE,qBAAe,GAAG,EAAE,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,GAAI,CAClD,EACL,WAAK,KAAK,EAAC,QAAQ,IAChB,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,KACd,cACE,qBAAe,GAAG,EAAE,GAAG,GAAI,CACxB,CACN,CAAC,CACE,CACF,CACP,CAAC,CAAC;QACH,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,cAAK,KAAK,CAAM,GAAG,IAAI,CAAC;KACvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-relations/pos-relations.css?tag=pos-relations&encapsulation=shadow","src/components/pos-relations/pos-relations.tsx"],"sourcesContent":[":host {\n  --background-base-color: color-mix(in srgb, var(--pos-background-color), var(--color-grey-800) 10%);\n  --background-color-even: hsl(from var(--background-base-color) h s calc(l + 7));\n  --background-color-odd: hsl(from var(--background-base-color) h s calc(l + 10));\n  --border-color: var(--background-base-color);\n}\n\ndd {\n  padding: 0;\n  margin: 0;\n}\n\ndl {\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-1);\n  padding: 0;\n  margin: 0;\n}\n\ndt {\n  margin-bottom: var(--size-1);\n}\n\n.predicate-values:nth-child(odd) {\n  background-color: var(--background-color-odd);\n}\n\n.predicate-values:nth-child(even) {\n  background-color: var(--background-color-even);\n}\n\n.predicate-values {\n  display: flex;\n  flex-direction: column;\n  border: var(--size-px) solid var(--border-color);\n  padding: var(--size-2);\n  gap: var(--size-1);\n\n  .values {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-3);\n  }\n}\n\npos-rich-link {\n  --background-color: inherit;\n}\n","import { Relation, Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../events/ResourceAware';\n\n@Component({\n  tag: 'pos-relations',\n  shadow: true,\n  styleUrl: 'pos-relations.css',\n})\nexport class PosRelations implements ResourceAware {\n  @State() data: Relation[] = [];\n\n  @Event({ eventName: 'pod-os:resource' })\n  subscribeResource: EventEmitter;\n\n  componentWillLoad() {\n    subscribeResource(this);\n  }\n\n  receiveResource = (resource: Thing) => {\n    this.data = resource.relations();\n  };\n\n  render() {\n    const items = this.data.map(it => (\n      <div class=\"predicate-values\">\n        <dt>\n          <pos-predicate uri={it.predicate} label={it.label} />\n        </dt>\n        <div class=\"values\">\n          {it.uris.map(uri => (\n            <dd>\n              <pos-rich-link uri={uri} />\n            </dd>\n          ))}\n        </div>\n      </div>\n    ));\n    return this.data.length > 0 ? <dl>{items}</dl> : null;\n  }\n}\n"],"version":3}

package/dist/components/pos-resource2.js

@@ -1,10 +1,11 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { s as store } from './session.js';
 import { s as subscribePodOs } from './PodOsAware.js';
-import { d as defineCustomElement$1 } from './progress-bar.js';
-
-const posResourceCss = "details.error {\n  margin: var(--size-2);\n  background-color: var(--pos-error-background-color);\n  border: var(--size-px) solid var(--pos-error-border-color);\n  padding: var(--size-2);\n  border-radius: var(--radius-md);\n\n  a {\n    color: var(--pos-normal-text-color);\n  }\n}\n";
-const PosResourceStyle0 = posResourceCss;
+import { d as defineCustomElement$5 } from './card.js';
+import { d as defineCustomElement$4 } from './card-content.js';
+import { d as defineCustomElement$3 } from './card-header.js';
+import { d as defineCustomElement$2 } from './progress-bar.js';
+import { d as defineCustomElement$1 } from './ripple-effect.js';
 
 const PosResource = /*@__PURE__*/ proxyCustomElement(class PosResource extends HTMLElement {
     constructor() {
@@ -62,9 +63,9 @@ const PosResource = /*@__PURE__*/ proxyCustomElement(class PosResource extends H
             return h("ion-progress-bar", { type: "indeterminate" });
         }
         if (this.error) {
-            return (h("details", { class: "error" }, h("summary", { title: "Click to expand" }, "\u26A0 Sorry, something went wrong"), h("p", null, "Status:", 
+            return (h("ion-card", null, h("ion-card-header", null, h("p", null, "Sorry, something went wrong"), h("p", null, "Status:", 
             // @ts-ignore
-            this.error.status), h("p", null, this.error.message), h("p", null, "You can try to open the link outside PodOS: ", h("a", { href: this.uri }, this.uri))));
+            this.error.status), h("details", null, this.error.message)), h("ion-card-content", null, h("p", null, "You can try to open the link outside PodOS:"), h("a", { href: this.uri }, this.uri))));
         }
         return h("slot", null);
     }
@@ -72,7 +73,6 @@ const PosResource = /*@__PURE__*/ proxyCustomElement(class PosResource extends H
         "os": ["loadResource"],
         "uri": ["loadResource"]
     }; }
-    static get style() { return PosResourceStyle0; }
 }, [1, "pos-resource", {
         "uri": [1],
         "lazy": [4],
@@ -90,14 +90,34 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-resource", "ion-progress-bar"];
+    const components = ["pos-resource", "ion-card", "ion-card-content", "ion-card-header", "ion-progress-bar", "ion-ripple-effect"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-resource":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PosResource);
             }
             break;
+        case "ion-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ion-card-content":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ion-card-header":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
         case "ion-progress-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ion-ripple-effect":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }

package/dist/components/pos-resource2.js.map

@@ -1 +1 @@
-{"file":"pos-resource2.js","mappings":";;;;;AAAA,MAAM,cAAc,GAAG,8RAA8R,CAAC;AACtT,0BAAe,cAAc;;MCehB,WAAW;IALxB;;;;;;QASW,cAAS,GAA6B,EAAE,CAAC;QAI1C,SAAI,GAAY,KAAK,CAAC;QAatB,YAAO,GAAY,IAAI,CAAC;QAOhC,iBAAY,GAAG,OAAO,EAAS;YAC7B,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;SACd,CAAC;KAiEH;IAxEC,iBAAiB;QACfA,KAAO,CAAC,QAAQ,CAAC,YAAY,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;QAC1D,cAAc,CAAC,IAAI,CAAC,CAAC;KACtB;IAOD,MAAM,eAAe,CAAC,KAA6B;QACjD,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SAC7B;QACD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC5B;IAID,MAAM,YAAY;QAChB,MAAM,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACpC;IAGD,MAAM,KAAK;QACT,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;KAC9B;IAEO,MAAM,WAAW,CAAC,QAAiB,KAAK;QAC9C,IAAI;YACF,IAAI,KAAK,EAAE;gBACT,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;gBACpB,MAAM,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;gBAC9B,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;aAC3C;YACD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC5C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YAClB,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ;gBAC7B,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;aAChC,CAAC,CAAC;SACJ;QAAC,OAAO,GAAG,EAAE;YACZ,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;SAClB;gBAAS;YACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;SACtB;KACF;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,OAAO,wBAAkB,IAAI,EAAC,eAAe,GAAG,CAAC;SAClD;QACD,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,QACE,eAAS,KAAK,EAAC,OAAO,IACpB,eAAS,KAAK,EAAC,iBAAiB,yCAAwC,EACxE;;YAII,IAAI,CAAC,KAAK,CAAC,MAAM,CAEjB,EACJ,aAAI,IAAI,CAAC,KAAK,CAAC,OAAO,CAAK,EAC3B,6DAC8C,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,IAAG,IAAI,CAAC,GAAG,CAAK,CAC3E,CACI,EACV;SACH;QACD,OAAO,eAAQ,CAAC;KACjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["session"],"sources":["src/components/pos-resource/pos-resource.css?tag=pos-resource&encapsulation=shadow","src/components/pos-resource/pos-resource.tsx"],"sourcesContent":["details.error {\n  margin: var(--size-2);\n  background-color: var(--pos-error-background-color);\n  border: var(--size-px) solid var(--pos-error-border-color);\n  padding: var(--size-2);\n  border-radius: var(--radius-md);\n\n  a {\n    color: var(--pos-normal-text-color);\n  }\n}\n","import { PodOS, Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport session from '../../store/session';\nimport { PodOsAware, PodOsEventEmitter, subscribePodOs } from '../events/PodOsAware';\nimport { ResourceReceiver } from '../events/ResourceAware';\n\ninterface SubscribeResourceEvent extends CustomEvent {\n  detail: ResourceReceiver;\n}\n\n@Component({\n  tag: 'pos-resource',\n  shadow: true,\n  styleUrl: 'pos-resource.css',\n})\nexport class PosResource implements PodOsAware {\n  @State() os: PodOS;\n\n  @State() resource: Thing;\n  @State() consumers: SubscribeResourceEvent[] = [];\n\n  @Prop() uri: string;\n\n  @Prop() lazy: boolean = false;\n\n  @Event({ eventName: 'pod-os:init' }) subscribePodOs: PodOsEventEmitter;\n\n  /**\n   * Indicates that the resource given in `uri` property has been loaded.\n   */\n  @Event({ eventName: 'pod-os:resource-loaded' }) resourceLoadedEmitter: EventEmitter;\n\n  @State()\n  private error: Error;\n\n  @State()\n  private loading: boolean = true;\n\n  componentWillLoad() {\n    session.onChange('isLoggedIn', () => this.loadResource());\n    subscribePodOs(this);\n  }\n\n  receivePodOs = async (os: PodOS) => {\n    this.os = os;\n  };\n\n  @Listen('pod-os:resource')\n  async provideResource(event: SubscribeResourceEvent) {\n    event.stopPropagation();\n    if (this.resource) {\n      event.detail(this.resource);\n    }\n    this.consumers.push(event);\n  }\n\n  @Watch('os')\n  @Watch('uri')\n  async loadResource() {\n    await this.getResource(!this.lazy);\n  }\n\n  @Method()\n  async fetch() {\n    await this.getResource(true);\n  }\n\n  private async getResource(fetch: boolean = false) {\n    try {\n      if (fetch) {\n        this.loading = true;\n        await this.os.fetch(this.uri);\n        this.resourceLoadedEmitter.emit(this.uri);\n      }\n      this.resource = this.os.store.get(this.uri);\n      this.error = null;\n      this.consumers.forEach(consumer => {\n        consumer.detail(this.resource);\n      });\n    } catch (err) {\n      this.error = err;\n    } finally {\n      this.loading = false;\n    }\n  }\n\n  render() {\n    if (this.loading) {\n      return <ion-progress-bar type=\"indeterminate\" />;\n    }\n    if (this.error) {\n      return (\n        <details class=\"error\">\n          <summary title=\"Click to expand\">⚠ Sorry, something went wrong</summary>\n          <p>\n            Status:\n            {\n              // @ts-ignore\n              this.error.status\n            }\n          </p>\n          <p>{this.error.message}</p>\n          <p>\n            You can try to open the link outside PodOS: <a href={this.uri}>{this.uri}</a>\n          </p>\n        </details>\n      );\n    }\n    return <slot />;\n  }\n}\n"],"version":3}
+{"file":"pos-resource2.js","mappings":";;;;;;;;;MAea,WAAW;IAJxB;;;;;;QAQW,cAAS,GAA6B,EAAE,CAAC;QAI1C,SAAI,GAAY,KAAK,CAAC;QAatB,YAAO,GAAY,IAAI,CAAC;QAOhC,iBAAY,GAAG,OAAO,EAAS;YAC7B,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;SACd,CAAC;KAoEH;IA3EC,iBAAiB;QACfA,KAAO,CAAC,QAAQ,CAAC,YAAY,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;QAC1D,cAAc,CAAC,IAAI,CAAC,CAAC;KACtB;IAOD,MAAM,eAAe,CAAC,KAA6B;QACjD,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SAC7B;QACD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC5B;IAID,MAAM,YAAY;QAChB,MAAM,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACpC;IAGD,MAAM,KAAK;QACT,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;KAC9B;IAEO,MAAM,WAAW,CAAC,QAAiB,KAAK;QAC9C,IAAI;YACF,IAAI,KAAK,EAAE;gBACT,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;gBACpB,MAAM,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;gBAC9B,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;aAC3C;YACD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC5C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YAClB,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ;gBAC7B,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;aAChC,CAAC,CAAC;SACJ;QAAC,OAAO,GAAG,EAAE;YACZ,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;SAClB;gBAAS;YACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;SACtB;KACF;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,OAAO,wBAAkB,IAAI,EAAC,eAAe,GAAG,CAAC;SAClD;QACD,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,QACE,oBACE,2BACE,2CAAkC,EAClC;;YAII,IAAI,CAAC,KAAK,CAAC,MAAM,CAEjB,EACJ,mBAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAW,CACvB,EAClB,4BACE,2DAAkD,EAClD,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,IAAG,IAAI,CAAC,GAAG,CAAK,CAChB,CACV,EACX;SACH;QACD,OAAO,eAAQ,CAAC;KACjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["session"],"sources":["src/components/pos-resource/pos-resource.tsx"],"sourcesContent":["import { PodOS, Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport session from '../../store/session';\nimport { PodOsAware, PodOsEventEmitter, subscribePodOs } from '../events/PodOsAware';\nimport { ResourceReceiver } from '../events/ResourceAware';\n\ninterface SubscribeResourceEvent extends CustomEvent {\n  detail: ResourceReceiver;\n}\n\n@Component({\n  tag: 'pos-resource',\n  shadow: true,\n})\nexport class PosResource implements PodOsAware {\n  @State() os: PodOS;\n\n  @State() resource: Thing;\n  @State() consumers: SubscribeResourceEvent[] = [];\n\n  @Prop() uri: string;\n\n  @Prop() lazy: boolean = false;\n\n  @Event({ eventName: 'pod-os:init' }) subscribePodOs: PodOsEventEmitter;\n\n  /**\n   * Indicates that the resource given in `uri` property has been loaded.\n   */\n  @Event({ eventName: 'pod-os:resource-loaded' }) resourceLoadedEmitter: EventEmitter;\n\n  @State()\n  private error: Error;\n\n  @State()\n  private loading: boolean = true;\n\n  componentWillLoad() {\n    session.onChange('isLoggedIn', () => this.loadResource());\n    subscribePodOs(this);\n  }\n\n  receivePodOs = async (os: PodOS) => {\n    this.os = os;\n  };\n\n  @Listen('pod-os:resource')\n  async provideResource(event: SubscribeResourceEvent) {\n    event.stopPropagation();\n    if (this.resource) {\n      event.detail(this.resource);\n    }\n    this.consumers.push(event);\n  }\n\n  @Watch('os')\n  @Watch('uri')\n  async loadResource() {\n    await this.getResource(!this.lazy);\n  }\n\n  @Method()\n  async fetch() {\n    await this.getResource(true);\n  }\n\n  private async getResource(fetch: boolean = false) {\n    try {\n      if (fetch) {\n        this.loading = true;\n        await this.os.fetch(this.uri);\n        this.resourceLoadedEmitter.emit(this.uri);\n      }\n      this.resource = this.os.store.get(this.uri);\n      this.error = null;\n      this.consumers.forEach(consumer => {\n        consumer.detail(this.resource);\n      });\n    } catch (err) {\n      this.error = err;\n    } finally {\n      this.loading = false;\n    }\n  }\n\n  render() {\n    if (this.loading) {\n      return <ion-progress-bar type=\"indeterminate\" />;\n    }\n    if (this.error) {\n      return (\n        <ion-card>\n          <ion-card-header>\n            <p>Sorry, something went wrong</p>\n            <p>\n              Status:\n              {\n                // @ts-ignore\n                this.error.status\n              }\n            </p>\n            <details>{this.error.message}</details>\n          </ion-card-header>\n          <ion-card-content>\n            <p>You can try to open the link outside PodOS:</p>\n            <a href={this.uri}>{this.uri}</a>\n          </ion-card-content>\n        </ion-card>\n      );\n    }\n    return <slot />;\n  }\n}\n"],"version":3}

package/dist/components/pos-reverse-relations2.js

@@ -1,7 +1,11 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { s as subscribeResource } from './ResourceAware.js';
-import { d as defineCustomElement$7 } from './icon.js';
-import { d as defineCustomElement$6 } from './progress-bar.js';
+import { d as defineCustomElement$b } from './card.js';
+import { d as defineCustomElement$a } from './card-content.js';
+import { d as defineCustomElement$9 } from './card-header.js';
+import { d as defineCustomElement$8 } from './icon.js';
+import { d as defineCustomElement$7 } from './progress-bar.js';
+import { d as defineCustomElement$6 } from './ripple-effect.js';
 import { d as defineCustomElement$5 } from './pos-description2.js';
 import { d as defineCustomElement$4 } from './pos-label2.js';
 import { d as defineCustomElement$3 } from './pos-predicate2.js';
@@ -37,19 +41,39 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-reverse-relations", "ion-icon", "ion-progress-bar", "pos-description", "pos-label", "pos-predicate", "pos-resource", "pos-rich-link"];
+    const components = ["pos-reverse-relations", "ion-card", "ion-card-content", "ion-card-header", "ion-icon", "ion-progress-bar", "ion-ripple-effect", "pos-description", "pos-label", "pos-predicate", "pos-resource", "pos-rich-link"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-reverse-relations":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PosReverseRelations);
             }
             break;
+        case "ion-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "ion-card-content":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "ion-card-header":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
         case "ion-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$8();
             }
             break;
         case "ion-progress-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "ion-ripple-effect":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }

package/dist/components/pos-reverse-relations2.js.map

@@ -1 +1 @@
-{"file":"pos-reverse-relations2.js","mappings":";;;;;;;;;;AAAA,MAAM,sBAAsB,GAAG,ugCAAugC,CAAC;AACviC,kCAAe,sBAAsB;;MCQxB,mBAAmB;IALhC;;;;;QAMW,SAAI,GAAe,EAAE,CAAC;QAQ/B,oBAAe,GAAG,CAAC,QAAe;YAChC,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,gBAAgB,EAAE,CAAC;SACzC,CAAC;KAmBH;IAzBC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;KACzB;IAMD,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,KAC5B,WAAK,KAAK,EAAC,kBAAkB,IAC3B,cACE,qBAAe,GAAG,EAAE,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,KAAK,KAAK,GAAI,CAC7D,EACL,WAAK,KAAK,EAAC,QAAQ,IAChB,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,KACd,cACE,qBAAe,GAAG,EAAE,GAAG,GAAI,CACxB,CACN,CAAC,CACE,CACF,CACP,CAAC,CAAC;QACH,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,cAAK,KAAK,CAAM,GAAG,IAAI,CAAC;KACvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-reverse-relations/pos-reverse-relations.css?tag=pos-reverse-relations&encapsulation=shadow","src/components/pos-reverse-relations/pos-reverse-relations.tsx"],"sourcesContent":[":host {\n  --background-base-color: color-mix(in srgb, var(--pos-background-color), var(--color-grey-800) 10%);\n  --background-color-even: hsl(from var(--background-base-color) h s calc(l + 7));\n  --background-color-odd: hsl(from var(--background-base-color) h s calc(l + 10));\n  --border-color: var(--background-base-color);\n}\n\ndd {\n  padding: 0;\n  margin: 0;\n}\n\ndl {\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-1);\n  padding: 0;\n  margin: 0;\n}\n\ndt {\n  margin-bottom: var(--size-1);\n}\n\n.predicate-values:nth-child(odd) {\n  background-color: var(--background-color-odd);\n}\n\n.predicate-values:nth-child(even) {\n  background-color: var(--background-color-even);\n}\n\n.predicate-values {\n  display: flex;\n  flex-direction: column;\n  border: var(--size-px) solid var(--border-color);\n  padding: var(--size-2);\n  gap: var(--size-1);\n  .values {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-3);\n  }\n}\n\npos-rich-link {\n  --background-color: inherit;\n}\n","import { Relation, Thing } from '@pod-os/core';\nimport { Component, h, Event, EventEmitter, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../events/ResourceAware';\n\n@Component({\n  tag: 'pos-reverse-relations',\n  shadow: true,\n  styleUrl: 'pos-reverse-relations.css',\n})\nexport class PosReverseRelations implements ResourceAware {\n  @State() data: Relation[] = [];\n\n  @Event({ eventName: 'pod-os:resource' }) subscribeResource: EventEmitter;\n\n  componentWillLoad() {\n    subscribeResource(this);\n  }\n\n  receiveResource = (resource: Thing) => {\n    this.data = resource.reverseRelations();\n  };\n\n  render() {\n    const items = this.data.map(it => (\n      <div class=\"predicate-values\">\n        <dt>\n          <pos-predicate uri={it.predicate} label={`is ${it.label} of`} />\n        </dt>\n        <div class=\"values\">\n          {it.uris.map(uri => (\n            <dd>\n              <pos-rich-link uri={uri} />\n            </dd>\n          ))}\n        </div>\n      </div>\n    ));\n    return this.data.length > 0 ? <dl>{items}</dl> : null;\n  }\n}\n"],"version":3}
+{"file":"pos-reverse-relations2.js","mappings":";;;;;;;;;;;;;;AAAA,MAAM,sBAAsB,GAAG,ugCAAugC,CAAC;AACviC,kCAAe,sBAAsB;;MCQxB,mBAAmB;IALhC;;;;;QAMW,SAAI,GAAe,EAAE,CAAC;QAQ/B,oBAAe,GAAG,CAAC,QAAe;YAChC,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,gBAAgB,EAAE,CAAC;SACzC,CAAC;KAmBH;IAzBC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;KACzB;IAMD,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,KAC5B,WAAK,KAAK,EAAC,kBAAkB,IAC3B,cACE,qBAAe,GAAG,EAAE,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,KAAK,KAAK,GAAI,CAC7D,EACL,WAAK,KAAK,EAAC,QAAQ,IAChB,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,KACd,cACE,qBAAe,GAAG,EAAE,GAAG,GAAI,CACxB,CACN,CAAC,CACE,CACF,CACP,CAAC,CAAC;QACH,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,cAAK,KAAK,CAAM,GAAG,IAAI,CAAC;KACvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-reverse-relations/pos-reverse-relations.css?tag=pos-reverse-relations&encapsulation=shadow","src/components/pos-reverse-relations/pos-reverse-relations.tsx"],"sourcesContent":[":host {\n  --background-base-color: color-mix(in srgb, var(--pos-background-color), var(--color-grey-800) 10%);\n  --background-color-even: hsl(from var(--background-base-color) h s calc(l + 7));\n  --background-color-odd: hsl(from var(--background-base-color) h s calc(l + 10));\n  --border-color: var(--background-base-color);\n}\n\ndd {\n  padding: 0;\n  margin: 0;\n}\n\ndl {\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-1);\n  padding: 0;\n  margin: 0;\n}\n\ndt {\n  margin-bottom: var(--size-1);\n}\n\n.predicate-values:nth-child(odd) {\n  background-color: var(--background-color-odd);\n}\n\n.predicate-values:nth-child(even) {\n  background-color: var(--background-color-even);\n}\n\n.predicate-values {\n  display: flex;\n  flex-direction: column;\n  border: var(--size-px) solid var(--border-color);\n  padding: var(--size-2);\n  gap: var(--size-1);\n  .values {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-3);\n  }\n}\n\npos-rich-link {\n  --background-color: inherit;\n}\n","import { Relation, Thing } from '@pod-os/core';\nimport { Component, h, Event, EventEmitter, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../events/ResourceAware';\n\n@Component({\n  tag: 'pos-reverse-relations',\n  shadow: true,\n  styleUrl: 'pos-reverse-relations.css',\n})\nexport class PosReverseRelations implements ResourceAware {\n  @State() data: Relation[] = [];\n\n  @Event({ eventName: 'pod-os:resource' }) subscribeResource: EventEmitter;\n\n  componentWillLoad() {\n    subscribeResource(this);\n  }\n\n  receiveResource = (resource: Thing) => {\n    this.data = resource.reverseRelations();\n  };\n\n  render() {\n    const items = this.data.map(it => (\n      <div class=\"predicate-values\">\n        <dt>\n          <pos-predicate uri={it.predicate} label={`is ${it.label} of`} />\n        </dt>\n        <div class=\"values\">\n          {it.uris.map(uri => (\n            <dd>\n              <pos-rich-link uri={uri} />\n            </dd>\n          ))}\n        </div>\n      </div>\n    ));\n    return this.data.length > 0 ? <dl>{items}</dl> : null;\n  }\n}\n"],"version":3}

package/dist/components/pos-rich-link2.js

@@ -1,5 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$4 } from './progress-bar.js';
+import { d as defineCustomElement$8 } from './card.js';
+import { d as defineCustomElement$7 } from './card-content.js';
+import { d as defineCustomElement$6 } from './card-header.js';
+import { d as defineCustomElement$5 } from './progress-bar.js';
+import { d as defineCustomElement$4 } from './ripple-effect.js';
 import { d as defineCustomElement$3 } from './pos-description2.js';
 import { d as defineCustomElement$2 } from './pos-label2.js';
 import { d as defineCustomElement$1 } from './pos-resource2.js';
@@ -15,10 +19,10 @@ const PosRichLink = /*@__PURE__*/ proxyCustomElement(class PosRichLink extends H
         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: '3b236e4b091933214cdedb460d916d8d09d5dca8', lazy: true, uri: this.uri }, h("p", { key: '988ccbc7283df323fe9a3230fcb8761bc44ef71f', class: "content" }, h("a", { key: '48054e89ea97d8a5b974811dfbfeab2dbc49a7da', 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: '9c1cb23e622d7130d37bfa17106e345949f44d9e' })), h("span", { key: 'c4f1532dffb691838947d2e9e79d4f8a51ef1eeb', class: "url" }, new URL(this.uri).host), h("pos-description", { key: 'c9a4b76eb86af15f908b820f06c4631a22f0c34f' }))));
     }
     static get style() { return PosRichLinkStyle0; }
 }, [1, "pos-rich-link", {
@@ -28,14 +32,34 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-rich-link", "ion-progress-bar", "pos-description", "pos-label", "pos-resource"];
+    const components = ["pos-rich-link", "ion-card", "ion-card-content", "ion-card-header", "ion-progress-bar", "ion-ripple-effect", "pos-description", "pos-label", "pos-resource"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-rich-link":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PosRichLink);
             }
             break;
+        case "ion-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "ion-card-content":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "ion-card-header":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
         case "ion-progress-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ion-ripple-effect":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }

package/dist/components/pos-rich-link2.js.map

@@ -1 +1 @@
-{"file":"pos-rich-link2.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,u1CAAu1C,CAAC;AAC/2C,0BAAe,cAAc;;MCMhB,WAAW;;;;;;;IAKtB,MAAM;QACJ,QACE,qEAAc,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,IACrC,0DAAG,KAAK,EAAC,SAAS,IAChB,0DACE,IAAI,EAAE,IAAI,CAAC,GAAG,EACd,OAAO,EAAE,CAAC;gBACR,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;aACjC,IAED,mEAAa,CACX,EACJ,6DAAM,KAAK,EAAC,KAAK,IAAE,IAAI,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAQ,EACjD,yEAAmB,CACjB,CACS,EACf;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-rich-link/pos-rich-link.css?tag=pos-rich-link&encapsulation=shadow","src/components/pos-rich-link/pos-rich-link.tsx"],"sourcesContent":[":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(--color-grey-500);\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","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pos-rich-link',\n  shadow: true,\n  styleUrl: 'pos-rich-link.css',\n})\nexport class PosRichLink {\n  @Prop() uri: string;\n\n  @Event({ eventName: 'pod-os:link' }) linkEmitter: EventEmitter;\n\n  render() {\n    return (\n      <pos-resource lazy={true} uri={this.uri}>\n        <p class=\"content\">\n          <a\n            href={this.uri}\n            onClick={e => {\n              e.preventDefault();\n              this.linkEmitter.emit(this.uri);\n            }}\n          >\n            <pos-label />\n          </a>\n          <span class=\"url\">{new URL(this.uri).host}</span>\n          <pos-description />\n        </p>\n      </pos-resource>\n    );\n  }\n}\n"],"version":3}
+{"file":"pos-rich-link2.js","mappings":";;;;;;;;;;AAAA,MAAM,cAAc,GAAG,u1CAAu1C,CAAC;AAC/2C,0BAAe,cAAc;;MCMhB,WAAW;;;;;;;IAKtB,MAAM;QACJ,QACE,qEAAc,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,IACrC,0DAAG,KAAK,EAAC,SAAS,IAChB,0DACE,IAAI,EAAE,IAAI,CAAC,GAAG,EACd,OAAO,EAAE,CAAC;gBACR,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;aACjC,IAED,mEAAa,CACX,EACJ,6DAAM,KAAK,EAAC,KAAK,IAAE,IAAI,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAQ,EACjD,yEAAmB,CACjB,CACS,EACf;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-rich-link/pos-rich-link.css?tag=pos-rich-link&encapsulation=shadow","src/components/pos-rich-link/pos-rich-link.tsx"],"sourcesContent":[":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(--color-grey-500);\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","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pos-rich-link',\n  shadow: true,\n  styleUrl: 'pos-rich-link.css',\n})\nexport class PosRichLink {\n  @Prop() uri: string;\n\n  @Event({ eventName: 'pod-os:link' }) linkEmitter: EventEmitter;\n\n  render() {\n    return (\n      <pos-resource lazy={true} uri={this.uri}>\n        <p class=\"content\">\n          <a\n            href={this.uri}\n            onClick={e => {\n              e.preventDefault();\n              this.linkEmitter.emit(this.uri);\n            }}\n          >\n            <pos-label />\n          </a>\n          <span class=\"url\">{new URL(this.uri).host}</span>\n          <pos-description />\n        </p>\n      </pos-resource>\n    );\n  }\n}\n"],"version":3}

package/dist/components/pos-router2.js

@@ -327,7 +327,7 @@ const PosRouter = /*@__PURE__*/ proxyCustomElement(class PosRouter extends HTMLE
         this.routeChanged.emit(this.uri);
     }
     render() {
-        return h("slot", { key: '221db70a52ce7ebc7e9c171142dcf94f252fa985' });
+        return h("slot", { key: '5c111993377abe4ad03de3c8678c0a5a9529085a' });
     }
     static get style() { return PosRouterStyle0; }
 }, [4, "pos-router", {

package/dist/components/pos-select-term2.js

@@ -28,7 +28,7 @@ const PosSelectTerm = /*@__PURE__*/ proxyCustomElement(class PosSelectTerm exten
         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: 'd8316308e089f89fdbb16dbdf799caa308713a14' }, h("input", { key: 'aab9ef56274dd2608c346673fd9be2420b0f6dbf', part: "input", list: "terms", placeholder: this.placeholder, value: this.value, onChange: ev => this.handleChange(ev) }), h("datalist", { key: '5b54e6c44cd926b9b40fe79de1afb12326f919bc', part: "terms", id: "terms" }, this.terms.map(term => (h("option", { value: term.uri }, term.shorthand))))));
     }
     static get delegatesFocus() { return true; }
     static get watchers() { return {

package/dist/components/pos-setting-offline-cache2.js

@@ -11,7 +11,7 @@ const PosSettingOfflineCache = /*@__PURE__*/ proxyCustomElement(class PosSetting
         this.__attachShadow();
     }
     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"))));
     }
     static get style() { return PosSettingOfflineCacheStyle0; }
 }, [1, "pos-setting-offline-cache"]);

package/dist/components/pos-subjects2.js

@@ -1,7 +1,11 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { R as RdfDocument } from './index10.js';
 import { s as subscribeResource } from './ResourceAware.js';
-import { d as defineCustomElement$5 } from './progress-bar.js';
+import { d as defineCustomElement$9 } from './card.js';
+import { d as defineCustomElement$8 } from './card-content.js';
+import { d as defineCustomElement$7 } from './card-header.js';
+import { d as defineCustomElement$6 } from './progress-bar.js';
+import { d as defineCustomElement$5 } from './ripple-effect.js';
 import { d as defineCustomElement$4 } from './pos-description2.js';
 import { d as defineCustomElement$3 } from './pos-label2.js';
 import { d as defineCustomElement$2 } from './pos-resource2.js';
@@ -37,14 +41,34 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-subjects", "ion-progress-bar", "pos-description", "pos-label", "pos-resource", "pos-rich-link"];
+    const components = ["pos-subjects", "ion-card", "ion-card-content", "ion-card-header", "ion-progress-bar", "ion-ripple-effect", "pos-description", "pos-label", "pos-resource", "pos-rich-link"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-subjects":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PosSubjects);
             }
             break;
+        case "ion-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "ion-card-content":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "ion-card-header":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
         case "ion-progress-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "ion-ripple-effect":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }

package/dist/components/pos-subjects2.js.map

@@ -1 +1 @@
-{"file":"pos-subjects2.js","mappings":";;;;;;;;;AAAA,MAAM,cAAc,GAAG,wuBAAwuB,CAAC;AAChwB,0BAAe,cAAc;;MCQhB,WAAW;IALxB;;;;;QAMW,SAAI,GAAc,EAAE,CAAC;QAS9B,oBAAe,GAAG,CAAC,QAAe;YAChC,MAAM,GAAG,GAAG,QAAQ,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;YACzC,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC;SAC5B,CAAC;KAUH;IAjBC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;KACzB;IAOD,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,KAC5B,cACE,qBAAe,GAAG,EAAE,EAAE,CAAC,GAAG,GAAI,CAC3B,CACN,CAAC,CAAC;QACH,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,cAAK,KAAK,CAAM,GAAG,IAAI,CAAC;KACvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-subjects/pos-subjects.css?tag=pos-subjects&encapsulation=shadow","src/components/pos-subjects/pos-subjects.tsx"],"sourcesContent":[":host {\n  --background-base-color: color-mix(in srgb, var(--pos-background-color), var(--color-grey-800) 10%);\n  --background-color-even: hsl(from var(--background-base-color) h s calc(l + 7));\n  --background-color-odd: hsl(from var(--background-base-color) h s calc(l + 10));\n  --border-color: var(--background-base-color);\n}\n\nul {\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-2);\n\n  margin: 0;\n  padding: 0;\n\n  li {\n    border: var(--size-px) solid var(--border-color);\n    &:nth-child(even) {\n      background-color: var(--background-color-even);\n    }\n    &:nth-child(odd) {\n      background-color: var(--background-color-odd);\n    }\n    padding: var(--size-4);\n    list-style-type: none;\n  }\n}\n","import { RdfDocument, Subject, Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../events/ResourceAware';\n\n@Component({\n  tag: 'pos-subjects',\n  shadow: true,\n  styleUrl: 'pos-subjects.css',\n})\nexport class PosSubjects implements ResourceAware {\n  @State() data: Subject[] = [];\n\n  @Event({ eventName: 'pod-os:resource' })\n  subscribeResource: EventEmitter;\n\n  componentWillLoad() {\n    subscribeResource(this);\n  }\n\n  receiveResource = (resource: Thing) => {\n    const doc = resource.assume(RdfDocument);\n    this.data = doc.subjects();\n  };\n\n  render() {\n    const items = this.data.map(it => (\n      <li>\n        <pos-rich-link uri={it.uri} />\n      </li>\n    ));\n    return this.data.length > 0 ? <ul>{items}</ul> : null;\n  }\n}\n"],"version":3}
+{"file":"pos-subjects2.js","mappings":";;;;;;;;;;;;;AAAA,MAAM,cAAc,GAAG,wuBAAwuB,CAAC;AAChwB,0BAAe,cAAc;;MCQhB,WAAW;IALxB;;;;;QAMW,SAAI,GAAc,EAAE,CAAC;QAS9B,oBAAe,GAAG,CAAC,QAAe;YAChC,MAAM,GAAG,GAAG,QAAQ,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;YACzC,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC;SAC5B,CAAC;KAUH;IAjBC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;KACzB;IAOD,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,KAC5B,cACE,qBAAe,GAAG,EAAE,EAAE,CAAC,GAAG,GAAI,CAC3B,CACN,CAAC,CAAC;QACH,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,cAAK,KAAK,CAAM,GAAG,IAAI,CAAC;KACvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-subjects/pos-subjects.css?tag=pos-subjects&encapsulation=shadow","src/components/pos-subjects/pos-subjects.tsx"],"sourcesContent":[":host {\n  --background-base-color: color-mix(in srgb, var(--pos-background-color), var(--color-grey-800) 10%);\n  --background-color-even: hsl(from var(--background-base-color) h s calc(l + 7));\n  --background-color-odd: hsl(from var(--background-base-color) h s calc(l + 10));\n  --border-color: var(--background-base-color);\n}\n\nul {\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-2);\n\n  margin: 0;\n  padding: 0;\n\n  li {\n    border: var(--size-px) solid var(--border-color);\n    &:nth-child(even) {\n      background-color: var(--background-color-even);\n    }\n    &:nth-child(odd) {\n      background-color: var(--background-color-odd);\n    }\n    padding: var(--size-4);\n    list-style-type: none;\n  }\n}\n","import { RdfDocument, Subject, Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../events/ResourceAware';\n\n@Component({\n  tag: 'pos-subjects',\n  shadow: true,\n  styleUrl: 'pos-subjects.css',\n})\nexport class PosSubjects implements ResourceAware {\n  @State() data: Subject[] = [];\n\n  @Event({ eventName: 'pod-os:resource' })\n  subscribeResource: EventEmitter;\n\n  componentWillLoad() {\n    subscribeResource(this);\n  }\n\n  receiveResource = (resource: Thing) => {\n    const doc = resource.assume(RdfDocument);\n    this.data = doc.subjects();\n  };\n\n  render() {\n    const items = this.data.map(it => (\n      <li>\n        <pos-rich-link uri={it.uri} />\n      </li>\n    ));\n    return this.data.length > 0 ? <ul>{items}</ul> : null;\n  }\n}\n"],"version":3}

package/dist/components/row.js

@@ -0,0 +1,34 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { g as getIonMode } from './ionic-global.js';
+
+const rowCss = ":host{display:flex;flex-wrap:wrap}";
+const IonRowStyle0 = rowCss;
+
+const Row = /*@__PURE__*/ proxyCustomElement(class Row extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    render() {
+        return (h(Host, { key: '242c9a45b0bb39af2aebf412fdfa9a176babc834', class: getIonMode(this) }, h("slot", { key: 'd9015d663d631bbf20bd3e0821fed874cd6c5156' })));
+    }
+    static get style() { return IonRowStyle0; }
+}, [1, "ion-row"]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ion-row"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ion-row":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Row);
+            }
+            break;
+    } });
+}
+
+export { Row as R, defineCustomElement as d };
+
+//# sourceMappingURL=row.js.map

package/dist/components/row.js.map

@@ -0,0 +1 @@
+{"file":"row.js","mappings":";;;AAAA,MAAM,MAAM,GAAG,oCAAoC,CAAC;AACpD,qBAAe,MAAM;;MCIR,GAAG;;;;;;IACZ,MAAM;QACF,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,CAAC,CAAC,EAAE;KAClK;;;;;;;;;;;;;;;;;;;","names":[],"sources":["../node_modules/@ionic/core/dist/collection/components/row/row.css?tag=ion-row&encapsulation=shadow","../node_modules/@ionic/core/dist/collection/components/row/row.js"],"sourcesContent":["/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n:host {\n  display: flex;\n  flex-wrap: wrap;\n}","/*!\n * (C) Ionic http://ionicframework.com - MIT License\n */\nimport { Host, h } from \"@stencil/core\";\nimport { getIonMode } from \"../../global/ionic-global\";\nexport class Row {\n    render() {\n        return (h(Host, { key: '242c9a45b0bb39af2aebf412fdfa9a176babc834', class: getIonMode(this) }, h(\"slot\", { key: 'd9015d663d631bbf20bd3e0821fed874cd6c5156' })));\n    }\n    static get is() { return \"ion-row\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"row.scss\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"row.css\"]\n        };\n    }\n}\n"],"version":3}