@pod-os/elements 0.25.2 → 0.25.3-rc.3de9abd.0

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

@@ -1 +1 @@
-{"file":"pos-relations2.js","mappings":";;;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,o9BAAo9B,CAAC;AAC7+B,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: var(--color-grey-200);\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,11 +1,10 @@
 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$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';
+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;
 
 const PosResource = /*@__PURE__*/ proxyCustomElement(class PosResource extends HTMLElement {
     constructor() {
@@ -63,9 +62,9 @@ const PosResource = /*@__PURE__*/ proxyCustomElement(class PosResource extends H
             return h("ion-progress-bar", { type: "indeterminate" });
         }
         if (this.error) {
-            return (h("ion-card", null, h("ion-card-header", null, h("p", null, "Sorry, something went wrong"), h("p", null, "Status:", 
+            return (h("details", { class: "error" }, h("summary", { title: "Click to expand" }, "\u26A0 Sorry, something went wrong"), h("p", null, "Status:", 
             // @ts-ignore
-            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))));
+            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))));
         }
         return h("slot", null);
     }
@@ -73,6 +72,7 @@ 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,34 +90,14 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-resource", "ion-card", "ion-card-content", "ion-card-header", "ion-progress-bar", "ion-ripple-effect"];
+    const components = ["pos-resource", "ion-progress-bar"];
     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":";;;;;;;;;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}
+{"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}

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

@@ -1,18 +1,14 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { s as subscribeResource } from './ResourceAware.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$7 } from './icon.js';
+import { d as defineCustomElement$6 } from './progress-bar.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';
 import { d as defineCustomElement$2 } from './pos-resource2.js';
 import { d as defineCustomElement$1 } from './pos-rich-link2.js';
 
-const posReverseRelationsCss = ":host {\n  --background-base-color: var(--color-grey-200);\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";
+const posReverseRelationsCss = ":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";
 const PosReverseRelationsStyle0 = posReverseRelationsCss;
 
 const PosReverseRelations = /*@__PURE__*/ proxyCustomElement(class PosReverseRelations extends HTMLElement {
@@ -41,39 +37,19 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    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"];
+    const components = ["pos-reverse-relations", "ion-icon", "ion-progress-bar", "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$8();
-            }
-            break;
-        case "ion-progress-bar":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "ion-ripple-effect":
+        case "ion-progress-bar":
             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,k9BAAk9B,CAAC;AACl/B,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: var(--color-grey-200);\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,14 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-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$4 } from './progress-bar.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';
 
-const posRichLinkCss = ":host {\n  --background-color: inherit;\n  --label-color: var(--color-grey-900);\n  --description-color: var(--color-grey-900);\n  --uri-color: var(--color-grey-600);\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";
+const posRichLinkCss = ":host {\n  --background-color: inherit;\n  --label-color: var(--pos-normal-text-color);\n  --description-color: var(--pos-normal-text-color);\n  --uri-color: var(--pos-subtle-text-color);\n  --font-family: var(--font-sans);\n}\n\np.content {\n  background-color: var(--background-color);\n  line-height: var(--line-xs);\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: baseline;\n  gap: var(--size-1);\n\n  .url {\n    font-size: var(--scale-fluid-1);\n    color: var(--pos-subtle-text-color);\n  }\n}\n\na {\n  color: var(--label-color);\n  max-width: var(--prose-lg);\n  text-decoration: underline;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  text-decoration-thickness: var(--size-px);\n}\n\npos-label {\n  color: var(--label-color);\n  font-size: var(--scale-fluid-2);\n  margin-bottom: var(--size-1);\n}\n\npos-description {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  font-weight: var(--weight-light);\n  color: var(--description-color);\n  font-size: var(--scale-fluid-2);\n}\n\n@media (min-width: 640px) {\n  pos-label {\n    font-size: var(--scale-fluid-0);\n  }\n  pos-description {\n    font-size: var(--scale-fluid-1);\n  }\n\n  p.content {\n    .url {\n      font-size: var(--scale-fluid-000);\n    }\n  }\n}\n";
 const PosRichLinkStyle0 = posRichLinkCss;
 
 const PosRichLink = /*@__PURE__*/ proxyCustomElement(class PosRichLink extends HTMLElement {
@@ -19,10 +15,10 @@ const PosRichLink = /*@__PURE__*/ proxyCustomElement(class PosRichLink extends H
         this.linkEmitter = createEvent(this, "pod-os:link", 7);
     }
     render() {
-        return (h("pos-resource", { key: 'e9f1c8b7ca9ded161eebf1b4886b21ec2a23e042', lazy: true, uri: this.uri }, h("p", { key: '022cebbb522c3a04f1f6b83e9aeb8ad890642bdd', class: "content" }, h("a", { key: '105415deeb645e99e36d34f1750da0fa444c6ba8', href: this.uri, onClick: e => {
+        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 => {
                 e.preventDefault();
                 this.linkEmitter.emit(this.uri);
-            } }, h("pos-label", { key: '4530f9511b81d37229f7c4f57915da035002bdfb' })), h("span", { key: '341e91a6167d36881d2bb5e96365aa7f2f7f2f9b', class: "url" }, new URL(this.uri).host), h("pos-description", { key: 'c8e3875a219a76fa401a558d9c4eaa6813206a19' }))));
+            } }, h("pos-label", { key: 'd04048986a7a4da138608f187a2f27e6313d9a6e' })), h("span", { key: '53a05023aa2fec4725e1d7e59acee9888476ecac', class: "url" }, new URL(this.uri).host), h("pos-description", { key: 'a73de2d208b684a9f555cda312e94df4282afba0' }))));
     }
     static get style() { return PosRichLinkStyle0; }
 }, [1, "pos-rich-link", {
@@ -32,34 +28,14 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    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"];
+    const components = ["pos-rich-link", "ion-progress-bar", "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,k0CAAk0C,CAAC;AAC11C,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(--color-grey-900);\n  --description-color: var(--color-grey-900);\n  --uri-color: var(--color-grey-600);\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,81CAA81C,CAAC;AACt3C,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(--pos-subtle-text-color);\n  }\n}\n\na {\n  color: var(--label-color);\n  max-width: var(--prose-lg);\n  text-decoration: underline;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  text-decoration-thickness: var(--size-px);\n}\n\npos-label {\n  color: var(--label-color);\n  font-size: var(--scale-fluid-2);\n  margin-bottom: var(--size-1);\n}\n\npos-description {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  font-weight: var(--weight-light);\n  color: var(--description-color);\n  font-size: var(--scale-fluid-2);\n}\n\n@media (min-width: 640px) {\n  pos-label {\n    font-size: var(--scale-fluid-0);\n  }\n  pos-description {\n    font-size: var(--scale-fluid-1);\n  }\n\n  p.content {\n    .url {\n      font-size: var(--scale-fluid-000);\n    }\n  }\n}\n","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: '4c9986b609d72550130ca76675dee260ca1cf373' });
+        return h("slot", { key: '221db70a52ce7ebc7e9c171142dcf94f252fa985' });
     }
     static get style() { return PosRouterStyle0; }
 }, [4, "pos-router", {

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

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { s as subscribePodOs } from './PodOsAware.js';
 
-const posSelectTermCss = ":host{display:block}input{border:none;padding-top:1rem;padding-bottom:1rem}input:focus{outline:none}";
+const posSelectTermCss = ":host{display:block}input{background-color:transparent;color:var(--pos-normal-text-color);border:none;padding-top:1rem;padding-bottom:1rem}input:focus{outline:none}";
 const PosSelectTermStyle0 = posSelectTermCss;
 
 const PosSelectTerm = /*@__PURE__*/ proxyCustomElement(class PosSelectTerm extends HTMLElement {
@@ -28,7 +28,7 @@ const PosSelectTerm = /*@__PURE__*/ proxyCustomElement(class PosSelectTerm exten
         this.termSelected.emit({ uri: event.target.value });
     }
     render() {
-        return (h(Host, { key: '0c84c241534e981ac22797ca058622c79aa2c661' }, h("input", { key: '0dd0c1d3ed228a3e2c333e440eb5044e99110252', part: "input", list: "terms", placeholder: this.placeholder, value: this.value, onChange: ev => this.handleChange(ev) }), h("datalist", { key: 'b792a879f92d1b95b094cef9cab81738205a503b', part: "terms", id: "terms" }, this.terms.map(term => (h("option", { value: term.uri }, term.shorthand))))));
+        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))))));
     }
     static get delegatesFocus() { return true; }
     static get watchers() { return {

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

@@ -1 +1 @@
-{"file":"pos-select-term2.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,sGAAsG,CAAC;AAChI,4BAAe,gBAAgB;;MCWlB,aAAa;IAP1B;;;;;;QAUU,gBAAW,GAAW,mBAAmB,CAAC;QAE1C,UAAK,GAAW,EAAE,CAAC;QAElB,UAAK,GAAW,EAAE,CAAC;QAa5B,iBAAY,GAAG,OAAO,EAAS;YAC7B,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;SACd,CAAC;KA6BH;IAnCC,iBAAiB;QACf,cAAc,CAAC,IAAI,CAAC,CAAC;KACtB;IAOD,QAAQ;QACN,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,cAAc,EAAE,CAAC;KACvC;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;KACrD;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,OAAO,EACZ,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,EAAE,IAAI,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,GAC9B,EACT,iEAAU,IAAI,EAAC,OAAO,EAAC,EAAE,EAAC,OAAO,IAC9B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,KAClB,cAAQ,KAAK,EAAE,IAAI,CAAC,GAAG,IAAG,IAAI,CAAC,SAAS,CAAU,CACnD,CAAC,CACO,CACN,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-select-term/pos-select-term.css?tag=pos-select-term&encapsulation=shadow","src/components/pos-select-term/pos-select-term.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\ninput {\n  border: none;\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n\ninput:focus {\n  outline: none;\n}\n","import { PodOS } from '@pod-os/core';\nimport { Term } from '@pod-os/core/types/terms';\nimport { Component, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { PodOsAware, PodOsEventEmitter, subscribePodOs } from '../events/PodOsAware';\n\n@Component({\n  tag: 'pos-select-term',\n  styleUrl: 'pos-select-term.css',\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class PosSelectTerm implements PodOsAware {\n  @State() os: PodOS;\n\n  @Prop() placeholder: string = 'Type to search...';\n\n  @Prop() value: string = '';\n\n  @State() terms: Term[] = [];\n\n  @Event({ eventName: 'pod-os:init' }) subscribePodOs: PodOsEventEmitter;\n\n  /**\n   * Fires when a term is entered or selected\n   */\n  @Event({ eventName: 'pod-os:term-selected' }) termSelected: EventEmitter;\n\n  componentWillLoad() {\n    subscribePodOs(this);\n  }\n\n  receivePodOs = async (os: PodOS) => {\n    this.os = os;\n  };\n\n  @Watch('os')\n  setTerms() {\n    this.terms = this.os.listKnownTerms();\n  }\n\n  handleChange(event) {\n    this.termSelected.emit({ uri: event.target.value });\n  }\n\n  render() {\n    return (\n      <Host>\n        <input\n          part=\"input\"\n          list=\"terms\"\n          placeholder={this.placeholder}\n          value={this.value}\n          onChange={ev => this.handleChange(ev)}\n        ></input>\n        <datalist part=\"terms\" id=\"terms\">\n          {this.terms.map(term => (\n            <option value={term.uri}>{term.shorthand}</option>\n          ))}\n        </datalist>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pos-select-term2.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,sKAAsK,CAAC;AAChM,4BAAe,gBAAgB;;MCWlB,aAAa;IAP1B;;;;;;QAUU,gBAAW,GAAW,mBAAmB,CAAC;QAE1C,UAAK,GAAW,EAAE,CAAC;QAElB,UAAK,GAAW,EAAE,CAAC;QAa5B,iBAAY,GAAG,OAAO,EAAS;YAC7B,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;SACd,CAAC;KA6BH;IAnCC,iBAAiB;QACf,cAAc,CAAC,IAAI,CAAC,CAAC;KACtB;IAOD,QAAQ;QACN,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,cAAc,EAAE,CAAC;KACvC;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;KACrD;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,OAAO,EACZ,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,EAAE,IAAI,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,GAC9B,EACT,iEAAU,IAAI,EAAC,OAAO,EAAC,EAAE,EAAC,OAAO,IAC9B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,KAClB,cAAQ,KAAK,EAAE,IAAI,CAAC,GAAG,IAAG,IAAI,CAAC,SAAS,CAAU,CACnD,CAAC,CACO,CACN,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-select-term/pos-select-term.css?tag=pos-select-term&encapsulation=shadow","src/components/pos-select-term/pos-select-term.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\ninput {\n  background-color: transparent;\n  color: var(--pos-normal-text-color);\n  border: none;\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n\ninput:focus {\n  outline: none;\n}\n","import { PodOS } from '@pod-os/core';\nimport { Term } from '@pod-os/core/types/terms';\nimport { Component, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { PodOsAware, PodOsEventEmitter, subscribePodOs } from '../events/PodOsAware';\n\n@Component({\n  tag: 'pos-select-term',\n  styleUrl: 'pos-select-term.css',\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class PosSelectTerm implements PodOsAware {\n  @State() os: PodOS;\n\n  @Prop() placeholder: string = 'Type to search...';\n\n  @Prop() value: string = '';\n\n  @State() terms: Term[] = [];\n\n  @Event({ eventName: 'pod-os:init' }) subscribePodOs: PodOsEventEmitter;\n\n  /**\n   * Fires when a term is entered or selected\n   */\n  @Event({ eventName: 'pod-os:term-selected' }) termSelected: EventEmitter;\n\n  componentWillLoad() {\n    subscribePodOs(this);\n  }\n\n  receivePodOs = async (os: PodOS) => {\n    this.os = os;\n  };\n\n  @Watch('os')\n  setTerms() {\n    this.terms = this.os.listKnownTerms();\n  }\n\n  handleChange(event) {\n    this.termSelected.emit({ uri: event.target.value });\n  }\n\n  render() {\n    return (\n      <Host>\n        <input\n          part=\"input\"\n          list=\"terms\"\n          placeholder={this.placeholder}\n          value={this.value}\n          onChange={ev => this.handleChange(ev)}\n        ></input>\n        <datalist part=\"terms\" id=\"terms\">\n          {this.terms.map(term => (\n            <option value={term.uri}>{term.shorthand}</option>\n          ))}\n        </datalist>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { l as localSettings } from './settings.js';
 
-const posSettingOfflineCacheCss = ":host{border:var(--size-px) solid var(--color-grey-100);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--size-8);max-width:var(--size-96);background:var(--color-white)}svg{width:var(--size-8)}h2{display:flex;align-items:center}p{padding:var(--size-2)}.info{background-color:var(--color-blue-200)}.warn{background-color:var(--color-yellow-200)}";
+const posSettingOfflineCacheCss = ":host{border:var(--size-px) solid var(--pos-border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--size-8);max-width:var(--size-96);background:var(--pos-card-background)}svg{width:var(--size-8)}h2{display:flex;align-items:center}p{padding:var(--size-2)}.info{color:var(--color-grey-900);background-color:var(--color-blue-200)}.warn{color:var(--color-grey-900);background-color:var(--color-yellow-200)}";
 const PosSettingOfflineCacheStyle0 = posSettingOfflineCacheCss;
 
 const PosSettingOfflineCache = /*@__PURE__*/ proxyCustomElement(class PosSettingOfflineCache extends HTMLElement {
@@ -11,7 +11,7 @@ const PosSettingOfflineCache = /*@__PURE__*/ proxyCustomElement(class PosSetting
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: 'a98de97ba1e0930b485a4a3610102deb02d927a7' }, h("div", { key: '5cf196a71b95fdfed7e5d990b272e12d2b9dd3ff' }, h("h2", { key: '99ddd9827f3ccc5a5277cc64e3952a3f5170f7bc' }, h("svg", { key: 'd9ce3722957428524cc9b264265320119f2e5c88', xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" }, h("path", { key: '8e4e7af37df231e3141ba30b17a02517737cbe85', "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: '7175929cd9327bc705db305294afa362cb2f648c', class: "info" }, "\u2139 Enable offline cache to be able to access previously loaded data while offline."), h("p", { key: '784fd9141b339165fdab6a98c084430299ff7ed5', class: "warn" }, "\u26A0 Private data may be stored on this device. Only enable it, if you trust this device."), h("label", { key: 'dac2cddf6b6c374d1a2ef3c4d9bad63a9cb7b8d9' }, h("input", { key: 'e39adb18d03ce622a85dd48a28c6d3c0dc2ce7f4', type: "checkbox", checked: localSettings.state.offlineCache, onChange: ev => (localSettings.state.offlineCache = ev.target.checked) }), "Enable offline cache"))));
+        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"))));
     }
     static get style() { return PosSettingOfflineCacheStyle0; }
 }, [1, "pos-setting-offline-cache"]);

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

@@ -1 +1 @@
-{"file":"pos-setting-offline-cache2.js","mappings":";;;AAAA,MAAM,yBAAyB,GAAG,iXAAiX,CAAC;AACpZ,qCAAe,yBAAyB;;MCO3B,sBAAsB;;;;;;IACjC,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DACE,6DACE,4DACE,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW,kBACN,KAAK,EAClB,MAAM,EAAC,cAAc,IAErB,+EACiB,OAAO,qBACN,OAAO,EACvB,CAAC,EAAC,uWAAuW,GACzW,CACE,mBAEH,EACL,0DAAG,KAAK,EAAC,MAAM,6FAAsF,EACrG,0DAAG,KAAK,EAAC,MAAM,kGAA2F,EAC1G,gEACE,8DACE,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,aAAa,CAAC,KAAK,CAAC,YAAY,EACzC,QAAQ,EAAE,EAAE,KAAK,aAAa,CAAC,KAAK,CAAC,YAAY,GAAI,EAAE,CAAC,MAA2B,CAAC,OAAO,CAAC,GACrF,yBAEH,CACJ,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/apps/pos-app-settings/pos-setting-offline-cache/pos-setting-offline-cache.css?tag=pos-setting-offline-cache&encapsulation=shadow","src/apps/pos-app-settings/pos-setting-offline-cache/pos-setting-offline-cache.tsx"],"sourcesContent":[":host {\n  border: var(--size-px) solid var(--color-grey-100);\n  border-radius: var(--radius-lg);\n  box-shadow: var(--shadow-md);\n  padding: var(--size-8);\n  max-width: var(--size-96);\n  background: var(--color-white);\n}\n\nsvg {\n  width: var(--size-8);\n}\n\nh2 {\n  display: flex;\n  align-items: center;\n}\n\np {\n  padding: var(--size-2);\n}\n\n.info {\n  background-color: var(--color-blue-200);\n}\n.warn {\n  background-color: var(--color-yellow-200);\n}\n","import { Component, h, Host } from '@stencil/core';\nimport { localSettings } from '../../../store/settings';\n\n@Component({\n  tag: 'pos-setting-offline-cache',\n  styleUrl: 'pos-setting-offline-cache.css',\n  shadow: true,\n})\nexport class PosSettingOfflineCache {\n  render() {\n    return (\n      <Host>\n        <div>\n          <h2>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                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\"\n              />\n            </svg>\n            Cache Settings\n          </h2>\n          <p class=\"info\">ℹ Enable offline cache to be able to access previously loaded data while offline.</p>\n          <p class=\"warn\">⚠ Private data may be stored on this device. Only enable it, if you trust this device.</p>\n          <label>\n            <input\n              type=\"checkbox\"\n              checked={localSettings.state.offlineCache}\n              onChange={ev => (localSettings.state.offlineCache = (ev.target as HTMLInputElement).checked)}\n            ></input>\n            Enable offline cache\n          </label>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pos-setting-offline-cache2.js","mappings":";;;AAAA,MAAM,yBAAyB,GAAG,mbAAmb,CAAC;AACtd,qCAAe,yBAAyB;;MCO3B,sBAAsB;;;;;;IACjC,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DACE,6DACE,4DACE,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW,kBACN,KAAK,EAClB,MAAM,EAAC,cAAc,IAErB,+EACiB,OAAO,qBACN,OAAO,EACvB,CAAC,EAAC,uWAAuW,GACzW,CACE,mBAEH,EACL,0DAAG,KAAK,EAAC,MAAM,6FAAsF,EACrG,0DAAG,KAAK,EAAC,MAAM,kGAA2F,EAC1G,gEACE,8DACE,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,aAAa,CAAC,KAAK,CAAC,YAAY,EACzC,QAAQ,EAAE,EAAE,KAAK,aAAa,CAAC,KAAK,CAAC,YAAY,GAAI,EAAE,CAAC,MAA2B,CAAC,OAAO,CAAC,GACrF,yBAEH,CACJ,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/apps/pos-app-settings/pos-setting-offline-cache/pos-setting-offline-cache.css?tag=pos-setting-offline-cache&encapsulation=shadow","src/apps/pos-app-settings/pos-setting-offline-cache/pos-setting-offline-cache.tsx"],"sourcesContent":[":host {\n  border: var(--size-px) solid var(--pos-border-color);\n  border-radius: var(--radius-lg);\n  box-shadow: var(--shadow-md);\n  padding: var(--size-8);\n  max-width: var(--size-96);\n  background: var(--pos-card-background);\n}\n\nsvg {\n  width: var(--size-8);\n}\n\nh2 {\n  display: flex;\n  align-items: center;\n}\n\np {\n  padding: var(--size-2);\n}\n\n.info {\n  color: var(--color-grey-900);\n  background-color: var(--color-blue-200);\n}\n.warn {\n  color: var(--color-grey-900);\n  background-color: var(--color-yellow-200);\n}\n","import { Component, h, Host } from '@stencil/core';\nimport { localSettings } from '../../../store/settings';\n\n@Component({\n  tag: 'pos-setting-offline-cache',\n  styleUrl: 'pos-setting-offline-cache.css',\n  shadow: true,\n})\nexport class PosSettingOfflineCache {\n  render() {\n    return (\n      <Host>\n        <div>\n          <h2>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                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\"\n              />\n            </svg>\n            Cache Settings\n          </h2>\n          <p class=\"info\">ℹ Enable offline cache to be able to access previously loaded data while offline.</p>\n          <p class=\"warn\">⚠ Private data may be stored on this device. Only enable it, if you trust this device.</p>\n          <label>\n            <input\n              type=\"checkbox\"\n              checked={localSettings.state.offlineCache}\n              onChange={ev => (localSettings.state.offlineCache = (ev.target as HTMLInputElement).checked)}\n            ></input>\n            Enable offline cache\n          </label>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/pos-subjects2.js

@@ -1,17 +1,13 @@
 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$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$5 } from './progress-bar.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';
 import { d as defineCustomElement$1 } from './pos-rich-link2.js';
 
-const posSubjectsCss = ":host {\n  --background-base-color: var(--color-grey-200);\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";
+const posSubjectsCss = ":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";
 const PosSubjectsStyle0 = posSubjectsCss;
 
 const PosSubjects = /*@__PURE__*/ proxyCustomElement(class PosSubjects extends HTMLElement {
@@ -41,34 +37,14 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    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"];
+    const components = ["pos-subjects", "ion-progress-bar", "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,mrBAAmrB,CAAC;AAC3sB,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: var(--color-grey-200);\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/elements/elements.css

@@ -4,4 +4,24 @@ html.ios{--ion-default-font:-apple-system,BlinkMacSystemFont,"Helvetica Neue","R
     0 2px 4px -2px rgba(0, 0, 0, 0.06);--shadow-md:0 12px 16px -4px rgba(0, 0, 0, 0.1),
     0 4px 6px -2px rgba(0, 0, 0, 0.05);--shadow-lg:0 20px 24px -4px rgba(0, 0, 0, 0.1),
     0 8px 8px -4px rgba(0, 0, 0, 0.04);--shadow-xl:0 24px 48px -12px rgba(0, 0, 0, 0.25);--ease-in-sine:cubic-bezier(0.47, 0, 0.745, 0.715);--ease-out-sine:cubic-bezier(0.39, 0.575, 0.565, 1);--ease-in-out-sine:cubic-bezier(0.445, 0.05, 0.55, 0.95);--ease-in-quad:cubic-bezier(0.55, 0.085, 0.68, 0.53);--ease-out-quad:cubic-bezier(0.25, 0.46, 0.45, 0.94);--ease-in-out-quad:cubic-bezier(0.455, 0.03, 0.515, 0.955);--ease-in-cubic:cubic-bezier(0.55, 0.055, 0.675, 0.19);--ease-out-cubic:cubic-bezier(0.215, 0.61, 0.355, 1);--ease-in-out-cubic:cubic-bezier(0.645, 0.045, 0.355, 1);--ease-in-quart:cubic-bezier(0.895, 0.03, 0.685, 0.22);--ease-out-quart:cubic-bezier(0.165, 0.84, 0.44, 1);--ease-in-out-quart:cubic-bezier(0.77, 0, 0.175, 1);--ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--ease-in-out-quint:cubic-bezier(0.86, 0, 0.07, 1);--ease-in-expo:cubic-bezier(0.95, 0.05, 0.795, 0.035);--ease-out-expo:cubic-bezier(0.19, 1, 0.22, 1);--ease-in-out-expo:cubic-bezier(1, 0, 0, 1);--ease-in-circ:cubic-bezier(0.6, 0.04, 0.98, 0.335);--ease-out-circ:cubic-bezier(0.075, 0.82, 0.165, 1);--ease-in-out-circ:cubic-bezier(0.785, 0.135, 0.15, 0.86);--ease-in-back:cubic-bezier(0.6, -0.28, 0.735, 0.045);--ease-out-back:cubic-bezier(0.175, 0.885, 0.32, 1.275);--ease-in-out-back:cubic-bezier(0.68, -0.55, 0.265, 1.55);--color-black:#000;--color-white:#fff;--color-grey-50:#f9fafb;--color-grey-100:#f3f4f6;--color-grey-200:#e5e7eb;--color-grey-300:#d1d5db;--color-grey-400:#9ca3af;--color-grey-500:#6b7280;--color-grey-600:#4b5563;--color-grey-700:#374151;--color-grey-800:#1f2937;--color-grey-900:#111827;--color-grey-950:#030712;--color-grey:var(--color-gray-500);--color-slate-50:#f8fafc;--color-slate-100:#f1f5f9;--color-slate-200:#e2e8f0;--color-slate-300:#cbd5e1;--color-slate-400:#94a3b8;--color-slate-500:#64748b;--color-slate-600:#475569;--color-slate-700:#334155;--color-slate-800:#1e293b;--color-slate-900:#0f172a;--color-slate-950:#020617;--color-slate:var(--color-slate-500);--color-zinc-50:#fafafa;--color-zinc-100:#f4f4f5;--color-zinc-200:#e4e4e7;--color-zinc-300:#d4d4d8;--color-zinc-400:#a1a1aa;--color-zinc-500:#71717a;--color-zinc-600:#52525b;--color-zinc-700:#3f3f46;--color-zinc-800:#27272a;--color-zinc-900:#18181b;--color-zinc-950:#09090b;--color-zinc:var(--color-zinc-500);--color-stone-50:#fafaf9;--color-stone-100:#f5f5f4;--color-stone-200:#e7e5e4;--color-stone-300:#d6d3d1;--color-stone-400:#a8a29e;--color-stone-500:#78716c;--color-stone-600:#57534e;--color-stone-700:#44403c;--color-stone-800:#292524;--color-stone-900:#1c1917;--color-stone-950:#0c0a09;--color-stone:var(--color-stone-500);--color-red-50:#fef2f2;--color-red-100:#fee2e2;--color-red-200:#fecaca;--color-red-300:#fca5a5;--color-red-400:#f87171;--color-red-500:#ef4444;--color-red-600:#dc2626;--color-red-700:#b91c1c;--color-red-800:#991b1b;--color-red-900:#7f1d1d;--color-red-950:#450a0a;--color-red:var(--color-red-500);--color-orange-50:#fff7ed;--color-orange-100:#ffedd5;--color-orange-200:#fed7aa;--color-orange-300:#fdba74;--color-orange-400:#fb923c;--color-orange-500:#f97316;--color-orange-600:#ea580c;--color-orange-700:#c2410c;--color-orange-800:#9a3412;--color-orange-900:#7c2d12;--color-orange-950:#431407;--color-orange:var(--color-orange-500);--color-amber-50:#fffbeb;--color-amber-100:#fef3c7;--color-amber-200:#fde68a;--color-amber-300:#fcd34d;--color-amber-400:#fbbf24;--color-amber-500:#f59e0b;--color-amber-600:#d97706;--color-amber-700:#b45309;--color-amber-800:#92400e;--color-amber-900:#78350f;--color-amber-950:#451a03;--color-amber:var(--color-amber-500);--color-yellow-50:#fefce8;--color-yellow-100:#fef9c3;--color-yellow-200:#fef08a;--color-yellow-300:#fde047;--color-yellow-400:#facc15;--color-yellow-500:#eab308;--color-yellow-600:#ca8a04;--color-yellow-700:#a16207;--color-yellow-800:#854d0e;--color-yellow-900:#713f12;--color-yellow-950:#422006;--color-yellow:var(--color-yellow-500);--color-lime-50:#f7fee7;--color-lime-100:#ecfccb;--color-lime-200:#d9f99d;--color-lime-300:#bef264;--color-lime-400:#a3e635;--color-lime-500:#84cc16;--color-lime-600:#65a30d;--color-lime-700:#4d7c0f;--color-lime-800:#3f6212;--color-lime-900:#365314;--color-lime-950:#1a2e05;--color-lime:var(--color-lime-500);--color-green-50:#f0fdf4;--color-green-100:#dcfce7;--color-green-200:#bbf7d0;--color-green-300:#86efac;--color-green-400:#4ade80;--color-green-500:#22c55e;--color-green-600:#16a34a;--color-green-700:#15803d;--color-green-800:#166534;--color-green-900:#14532d;--color-green-950:#052e16;--color-green:var(--color-green-500);--color-teal-50:#f0fdfa;--color-teal-100:#ccfbf1;--color-teal-200:#99f6e4;--color-teal-300:#5eead4;--color-teal-400:#2dd4bf;--color-teal-500:#14b8a6;--color-teal-600:#0d9488;--color-teal-700:#0f766e;--color-teal-800:#115e59;--color-teal-900:#134e4a;--color-teal-950:#042f2e;--color-teal:var(--color-teal-500);--color-cyan-50:#ecfeff;--color-cyan-100:#cffafe;--color-cyan-200:#a5f3fc;--color-cyan-300:#67e8f9;--color-cyan-400:#22d3ee;--color-cyan-500:#06b6d4;--color-cyan-600:#0891b2;--color-cyan-700:#0e7490;--color-cyan-800:#155e75;--color-cyan-900:#164e63;--color-cyan-950:#083344;--color-cyan:var(--color-cyan-500);--color-sky-50:#f0f9ff;--color-sky-100:#e0f2fe;--color-sky-200:#bae6fd;--color-sky-300:#7dd3fc;--color-sky-400:#38bdf8;--color-sky-500:#0ea5e9;--color-sky-600:#0284c7;--color-sky-700:#0369a1;--color-sky-800:#075985;--color-sky-900:#0c4a6e;--color-sky-950:#082f49;--color-sky:var(--color-sky-500);--color-blue-50:#eff6ff;--color-blue-100:#dbeafe;--color-blue-200:#bfdbfe;--color-blue-300:#93c5fd;--color-blue-400:#60a5fa;--color-blue-500:#3b82f6;--color-blue-600:#2563eb;--color-blue-700:#1d4ed8;--color-blue-800:#1e40af;--color-blue-900:#1e3a8a;--color-blue-950:#172554;--color-blue:var(--color-blue-500);--color-indigo-50:#eef2ff;--color-indigo-100:#e0e7ff;--color-indigo-200:#c7d2fe;--color-indigo-300:#a5b4fc;--color-indigo-400:#818cf8;--color-indigo-500:#6366f1;--color-indigo-600:#4f46e5;--color-indigo-700:#4338ca;--color-indigo-800:#3730a3;--color-indigo-900:#312e81;--color-indigo-950:#1e1b4b;--color-indigo:var(--color-indigo-500);--color-violet-50:#f5f3ff;--color-violet-100:#ede9fe;--color-violet-200:#ddd6fe;--color-violet-300:#c4b5fd;--color-violet-400:#a78bfa;--color-violet-500:#8b5cf6;--color-violet-600:#7c3aed;--color-violet-700:#6d28d9;--color-violet-800:#5b21b6;--color-violet-900:#4c1d95;--color-violet-950:#2e1065;--color-violet:var(--color-violet-500);--color-purple-50:#faf5ff;--color-purple-100:#f3e8ff;--color-purple-200:#e9d5ff;--color-purple-300:#d8b4fe;--color-purple-400:#c084fc;--color-purple-500:#a855f7;--color-purple-600:#9333ea;--color-purple-700:#7e22ce;--color-purple-800:#6b21a8;--color-purple-900:#581c87;--color-purple-950:#3b0764;--color-purple:var(--color-purple-500);--color-fuchsia-50:#fdf4ff;--color-fuchsia-100:#fae8ff;--color-fuchsia-200:#f5d0fe;--color-fuchsia-300:#f0abfc;--color-fuchsia-400:#e879f9;--color-fuchsia-500:#d946ef;--color-fuchsia-600:#c026d3;--color-fuchsia-700:#a21caf;--color-fuchsia-800:#86198f;--color-fuchsia-900:#701a75;--color-fuchsia-950:#4a044e;--color-fuchsia:var(--color-fuchsia-500);--color-pink-50:#fdf2f8;--color-pink-100:#fce7f3;--color-pink-200:#fbcfe8;--color-pink-300:#f9a8d4;--color-pink-400:#f472b6;--color-pink-500:#ec4899;--color-pink-600:#db2777;--color-pink-700:#be185d;--color-pink-800:#9d174d;--color-pink-900:#831843;--color-pink-950:#500724;--color-pink:var(--color-pink-500);--color-rose-50:#fff1f2;--color-rose-100:#ffe4e6;--color-rose-200:#fecdd3;--color-rose-300:#fda4af;--color-rose-400:#fb7185;--color-rose-500:#f43f5e;--color-rose-600:#e11d48;--color-rose-700:#be123c;--color-rose-800:#9f1239;--color-rose-900:#881337;--color-rose-950:#4c0519;--color-rose:var(--color-rose-500);--grid-2:repeat(2, minmax(0, 1fr));--grid-3:repeat(3, minmax(0, 1fr));--grid-4:repeat(4, minmax(0, 1fr));--grid-5:repeat(5, minmax(0, 1fr));--grid-6:repeat(6, minmax(0, 1fr));--grid-7:repeat(7, minmax(0, 1fr));--grid-8:repeat(8, minmax(0, 1fr));--grid-9:repeat(9, minmax(0, 1fr));--grid-10:repeat(10, minmax(0, 1fr));--grid-11:repeat(11, minmax(0, 1fr));--grid-12:repeat(12, minmax(0, 1fr));--grid-page-width:var(--width-xl);--grid-page-gutter:5vw;--grid-page-main:2 / 3;--grid-page:minmax(var(--grid-page-gutter), 1fr)
-    minmax(0, var(--grid-page-width)) minmax(var(--grid-page-gutter), 1fr)}body{height:100dvh;margin:0;padding:0;font-family:sans-serif}:root{--pos-primary-text-color:var(--color-grey-50);--pos-normal-text-color:var(--color-grey-900);--pos-disabled-text-color:var(--color-grey-600);--pos-primary-color:var(--color-blue-500);--pos-disabled-color:var(--color-grey-100);--pos-background-color:var(--color-grey-50);--pos-border-color:var(--color-grey-200);--pos-input-outline:var(--size-px) solid var(--color-grey-700);--pos-input-focus-outline:var(--size-px) solid var(--pos-primary-color);--pos-border-solid:var(--size-px) solid var(--pos-border-color)}
+    minmax(0, var(--grid-page-width)) minmax(var(--grid-page-gutter), 1fr)}body{height:100dvh;margin:0;padding:0;font-family:sans-serif;background:var(--pos-app-background)}:root{--pos-primary-text-color:var(--color-grey-50);--pos-normal-text-color:var(--color-grey-900);--pos-secondary-text-color:var(--color-grey-800);--pos-subtle-text-color:var(--color-grey-600);--pos-disabled-text-color:var(--pos-subtle-text-color);--pos-primary-color:var(--color-blue-800);--pos-disabled-color:var(--color-grey-100);--pos-background-color:var(--color-grey-50);--pos-input-background-color:var(--color-white);--pos-border-color:var(--color-grey-200);--pos-secondary-border-color:var(--color-grey-800);--pos-input-outline:var(--size-px) solid var(--color-grey-700);--pos-input-focus-outline:var(--size-px) solid var(--pos-primary-color);--pos-border-solid:var(--size-px) solid var(--pos-border-color);--pos-app-background:linear-gradient(230deg, rgb(251, 251, 255) 0%, rgb(215, 223, 252) 100%);--pos-app-background:radial-gradient(ellipse 800px 600px at 25% 20%, var(--color-slate-300), transparent 60%),
+    radial-gradient(ellipse 600px 400px at 80% 70%, var(--color-slate-200), transparent 50%),
+    radial-gradient(circle 400px at 60% 40%, var(--color-slate-100), transparent 70%),
+    linear-gradient(
+      135deg,
+      var(--color-slate-50) 0%,
+      var(--color-slate-100) 40%,
+      var(--color-slate-200) 70%,
+      var(--color-slate-300) 100%
+    ),
+    radial-gradient(ellipse 1000px 300px at 50% 100%, var(--color-slate-200), transparent 80%);--pos-card-background:var(--color-white);color:var(--pos-normal-text-color);--pos-error-background-color:var(--color-red-50);--pos-error-border-color:var(--color-red-600)}@media (prefers-color-scheme: dark){:root{--pos-primary-text-color:var(--color-grey-950);--pos-normal-text-color:var(--color-grey-100);--pos-secondary-text-color:var(--color-grey-200);--pos-subtle-text-color:var(--color-grey-400);--pos-disabled-text-color:var(--color-grey-700);--pos-primary-color:var(--color-blue-400);--pos-disabled-color:var(--color-slate-800);--pos-background-color:var(--color-grey-900);--pos-input-background-color:var(--color-slate-700);--pos-border-color:var(--color-grey-800);--pos-secondary-border-color:var(--color-grey-200);--pos-input-outline:var(--size-px) solid var(--color-grey-300);--pos-input-focus-outline:var(--size-px) solid var(--pos-primary-color);--pos-border-solid:var(--size-px) solid var(--pos-border-color);--pos-app-background:radial-gradient(ellipse 800px 600px at 25% 20%, var(--color-grey-700), transparent 60%),
+      radial-gradient(ellipse 600px 400px at 80% 70%, var(--color-grey-800), transparent 50%),
+      radial-gradient(circle 400px at 60% 40%, var(--color-grey-900), transparent 70%),
+      linear-gradient(
+        135deg,
+        var(--color-grey-950) 0%,
+        var(--color-grey-900) 40%,
+        var(--color-grey-800) 70%,
+        var(--color-grey-700) 100%
+      ),
+      radial-gradient(ellipse 1000px 300px at 50% 100%, var(--color-grey-800), transparent 80%);--pos-card-background:var(--color-grey-900);--pos-error-background-color:var(--color-red-950);--pos-error-border-color:var(--color-red-400)}}