@pod-os/elements 0.25.3-rc.e28841a.0 → 0.25.3-rc.e9054b4.0

package/dist/components/pos-app-ldp-container.js

@@ -1,7 +1,15 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$g } from './badge.js';
-import { d as defineCustomElement$f } from './icon.js';
-import { d as defineCustomElement$e } from './progress-bar.js';
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$o } from './badge.js';
+import { d as defineCustomElement$n } from './card.js';
+import { d as defineCustomElement$m } from './card-content.js';
+import { d as defineCustomElement$l } from './card-header.js';
+import { d as defineCustomElement$k } from './card-title.js';
+import { d as defineCustomElement$j } from './col.js';
+import { d as defineCustomElement$i } from './grid.js';
+import { d as defineCustomElement$h } from './icon.js';
+import { d as defineCustomElement$g } from './progress-bar.js';
+import { d as defineCustomElement$f } from './ripple-effect.js';
+import { d as defineCustomElement$e } from './row.js';
 import { d as defineCustomElement$d } from './pos-add-literal-value2.js';
 import { d as defineCustomElement$c } from './pos-container-contents2.js';
 import { d as defineCustomElement$b } from './pos-container-item2.js';
@@ -15,28 +23,20 @@ import { d as defineCustomElement$4 } from './pos-select-term2.js';
 import { d as defineCustomElement$3 } from './pos-subjects2.js';
 import { d as defineCustomElement$2 } from './pos-type-badges2.js';
 
-const defaultAppLayoutCss = ":host{--gap-size:var(--size-4);display:flex;flex-direction:column;gap:var(--gap-size);margin:var(--gap-size)}section{display:flex;flex-direction:column;gap:var(--gap-size)}@media (min-width: 640px){:host{flex-direction:row;flex-wrap:wrap;section:first-of-type {\n      flex: 1}section:not(:first-of-type){flex:0 0 30%}}";
-const PosAppLdpContainerStyle0 = defaultAppLayoutCss;
-
-const articleCardCss = "article {\n  padding: var(--size-2);\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-2);\n  outline: var(--pos-border-solid);\n  border-radius: var(--radius-sm);\n  box-shadow: var(--shadow-md);\n  background-color: var(--pos-card-background);\n\n  header {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    h1 {\n      margin: 0;\n    }\n  }\n}\n";
-const PosAppLdpContainerStyle1 = articleCardCss;
-
 const PosAppLdpContainer$1 = /*@__PURE__*/ proxyCustomElement(class PosAppLdpContainer extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: '76b7a2ab73232cbea2a7352527fd4fc35a75c66b' }, h("section", { key: '28d455d6e4b640de624a2c684133a6d4c7de2100' }, h("pos-container-contents", { key: '8e518a1122461108b3d33d66664f67feb55527c4' }), h("details", { key: '6be9b8cf613a54213e8281c0a4bf4e8235c1b4b1' }, h("summary", { key: '541ff3bbe8ec736361ea59fef319141a743c93ee' }, "All subjects"), h("pos-subjects", { key: '4e1927ea2365c354c7d1abf2eca50d892e1ac2bc' }))), h("section", { key: 'c9156ae4584e7f5803a7427b97844c3bbeae86bf' }, h("article", { key: 'c3fdc4cf0d4dd6624c63c2c6f4cf1c852a2468fc' }, h("header", { key: '4103d4a971e51942afeff1a26aca17454a962f31' }, h("h1", { key: 'eb000f4bac564b0255e28c44c112180a4558e323' }, h("pos-label", { key: '700a53e05c33d9c5a923dd5f73ecfb4ee969bc9d' })), h("pos-type-badges", { key: '15c37fc60de0e9ff1d36280da42bf0cc42c0c27c' })), h("pos-literals", { key: '4bf833339c2bedd888248e3893633496d2f61bd0' })))));
+        return (h("ion-grid", { key: 'b5ebaf12ad80fbe1de402725fee629d6ff634d82' }, h("ion-row", { key: '97e9414cc2d702abbc51c3b8f4e894e4c47396c3' }, h("ion-col", { key: '5412d9c2a339923913a514913cc67af12451c299', size: "12", "size-sm": true }, h("pos-container-contents", { key: 'ef602f4c357d8308c5a37fe2a14b7100d6fc8737' }), h("details", { key: '1c754800523e2bc9b54323035b5e123a139fddff' }, h("summary", { key: '4ab826738cc31ed61bd888da6f110a0f9f40bfee' }, "All subjects"), h("pos-subjects", { key: '73a41bcd107c654139798d8f8e66d6794c17aa94' }))), h("ion-col", { key: '66bad3d51cdf326b7487463388869eccc21a1272', size: "12", "size-sm": true }, h("ion-card", { key: '83d11549b46d2a501f0fe7cdcaa5e2d41536f689' }, h("ion-card-header", { key: 'e1a625e1bb1771537974de79f60dceda2ff2b6c4', style: { gap: 'var(--size-1)' } }, h("ion-card-title", { key: '0571560cf780182f071c8eecf98b805ddfdf1747' }, h("pos-label", { key: 'abfb6a6a4c4cbe3cc0accd71cf13f9e3e68ad25f' })), h("pos-type-badges", { key: 'c1b6addde162ace3604805dab8446aa39b1874b1' }), h("pos-literals", { key: '04ab3ebf74e378d2c4a9c85b32b246e24ad355e0' })))))));
     }
-    static get style() { return PosAppLdpContainerStyle0 + PosAppLdpContainerStyle1; }
-}, [1, "pos-app-ldp-container"]);
+}, [0, "pos-app-ldp-container"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-app-ldp-container", "ion-badge", "ion-icon", "ion-progress-bar", "pos-add-literal-value", "pos-container-contents", "pos-container-item", "pos-description", "pos-label", "pos-literals", "pos-predicate", "pos-resource", "pos-rich-link", "pos-select-term", "pos-subjects", "pos-type-badges"];
+    const components = ["pos-app-ldp-container", "ion-badge", "ion-card", "ion-card-content", "ion-card-header", "ion-card-title", "ion-col", "ion-grid", "ion-icon", "ion-progress-bar", "ion-ripple-effect", "ion-row", "pos-add-literal-value", "pos-container-contents", "pos-container-item", "pos-description", "pos-label", "pos-literals", "pos-predicate", "pos-resource", "pos-rich-link", "pos-select-term", "pos-subjects", "pos-type-badges"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-app-ldp-container":
             if (!customElements.get(tagName)) {
@@ -45,15 +45,55 @@ function defineCustomElement$1() {
             break;
         case "ion-badge":
             if (!customElements.get(tagName)) {
-                defineCustomElement$g();
+                defineCustomElement$o();
+            }
+            break;
+        case "ion-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$n();
+            }
+            break;
+        case "ion-card-content":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$m();
+            }
+            break;
+        case "ion-card-header":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$l();
+            }
+            break;
+        case "ion-card-title":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$k();
+            }
+            break;
+        case "ion-col":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$j();
+            }
+            break;
+        case "ion-grid":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$i();
             }
             break;
         case "ion-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$f();
+                defineCustomElement$h();
             }
             break;
         case "ion-progress-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
+        case "ion-ripple-effect":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
+        case "ion-row":
             if (!customElements.get(tagName)) {
                 defineCustomElement$e();
             }

package/dist/components/pos-app-ldp-container.js.map

@@ -1 +1 @@
-{"file":"pos-app-ldp-container.js","mappings":";;;;;;;;;;;;;;;;;AAAA,MAAM,mBAAmB,GAAG,iUAAiU,CAAC;AAC9V,iCAAe,mBAAmB;;ACDlC,MAAM,cAAc,GAAG,0YAA0Y,CAAC;AACla,iCAAe,cAAc;;MCMhBA,oBAAkB;;;;;;IAC7B,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,kEACE,gFAA0B,EAC1B,kEACE,iFAA+B,EAC/B,sEAAgB,CACR,CACF,EACV,kEACE,kEACE,iEACE,6DACE,mEAAa,CACV,EACL,yEAAmB,CACZ,EACT,sEAAgB,CACR,CACF,CACL,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PosAppLdpContainer"],"sources":["src/apps/styles/default-app-layout.css?tag=pos-app-ldp-container&encapsulation=shadow","src/apps/styles/article-card.css?tag=pos-app-ldp-container&encapsulation=shadow","src/apps/pos-app-ldp-container/pos-app-ldp-container.tsx"],"sourcesContent":[":host {\n  --gap-size: var(--size-4);\n  display: flex;\n  flex-direction: column;\n  gap: var(--gap-size);\n  margin: var(--gap-size);\n}\n\nsection {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gap-size);\n}\n\n@media (min-width: 640px) {\n  :host {\n    flex-direction: row;\n    flex-wrap: wrap;\n\n    section:first-of-type {\n      flex: 1;\n    }\n\n    section:not(:first-of-type) {\n      flex: 0 0 30%;\n    }\n  }\n}\n","article {\n  padding: var(--size-2);\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-2);\n  outline: var(--pos-border-solid);\n  border-radius: var(--radius-sm);\n  box-shadow: var(--shadow-md);\n  background-color: var(--pos-card-background);\n\n  header {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    h1 {\n      margin: 0;\n    }\n  }\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'pos-app-ldp-container',\n  shadow: true,\n  styleUrls: ['../styles/default-app-layout.css', '../styles/article-card.css'],\n})\nexport class PosAppLdpContainer {\n  render() {\n    return (\n      <Host>\n        <section>\n          <pos-container-contents />\n          <details>\n            <summary>All subjects</summary>\n            <pos-subjects />\n          </details>\n        </section>\n        <section>\n          <article>\n            <header>\n              <h1>\n                <pos-label />\n              </h1>\n              <pos-type-badges />\n            </header>\n            <pos-literals />\n          </article>\n        </section>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pos-app-ldp-container.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;MAKaA,oBAAkB;;;;;IAC7B,MAAM;QACJ,QACE,mEACE,kEACE,gEAAS,IAAI,EAAC,IAAI,qBAChB,gFAA0B,EAC1B,kEACE,iFAA+B,EAC/B,sEAAgB,CACR,CACF,EACV,gEAAS,IAAI,EAAC,IAAI,qBAChB,mEACE,wEAAiB,KAAK,EAAE,EAAE,GAAG,EAAE,eAAe,EAAE,IAC9C,yEACE,mEAAa,CACE,EACjB,yEAAmB,EACnB,sEAAgB,CACA,CACT,CACH,CACF,CACD,EACX;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PosAppLdpContainer"],"sources":["src/apps/pos-app-ldp-container/pos-app-ldp-container.tsx"],"sourcesContent":["import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'pos-app-ldp-container',\n})\nexport class PosAppLdpContainer {\n  render() {\n    return (\n      <ion-grid>\n        <ion-row>\n          <ion-col size=\"12\" size-sm>\n            <pos-container-contents />\n            <details>\n              <summary>All subjects</summary>\n              <pos-subjects />\n            </details>\n          </ion-col>\n          <ion-col size=\"12\" size-sm>\n            <ion-card>\n              <ion-card-header style={{ gap: 'var(--size-1)' }}>\n                <ion-card-title>\n                  <pos-label />\n                </ion-card-title>\n                <pos-type-badges />\n                <pos-literals />\n              </ion-card-header>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    );\n  }\n}\n"],"version":3}

package/dist/components/pos-app-rdf-document.js

@@ -1,7 +1,11 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$e } from './badge.js';
-import { d as defineCustomElement$d } from './icon.js';
-import { d as defineCustomElement$c } from './progress-bar.js';
+import { d as defineCustomElement$i } from './badge.js';
+import { d as defineCustomElement$h } from './card.js';
+import { d as defineCustomElement$g } from './card-content.js';
+import { d as defineCustomElement$f } from './card-header.js';
+import { d as defineCustomElement$e } from './icon.js';
+import { d as defineCustomElement$d } from './progress-bar.js';
+import { d as defineCustomElement$c } from './ripple-effect.js';
 import { d as defineCustomElement$b } from './pos-add-literal-value2.js';
 import { d as defineCustomElement$a } from './pos-description2.js';
 import { d as defineCustomElement$9 } from './pos-label2.js';
@@ -13,11 +17,8 @@ import { d as defineCustomElement$4 } from './pos-select-term2.js';
 import { d as defineCustomElement$3 } from './pos-subjects2.js';
 import { d as defineCustomElement$2 } from './pos-type-badges2.js';
 
-const defaultAppLayoutCss = ":host{--gap-size:var(--size-4);display:flex;flex-direction:column;gap:var(--gap-size);margin:var(--gap-size)}section{display:flex;flex-direction:column;gap:var(--gap-size)}@media (min-width: 640px){:host{flex-direction:row;flex-wrap:wrap;section:first-of-type {\n      flex: 1}section:not(:first-of-type){flex:0 0 30%}}";
-const PosAppRdfDocumentStyle0 = defaultAppLayoutCss;
-
-const articleCardCss = "article {\n  padding: var(--size-2);\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-2);\n  outline: var(--pos-border-solid);\n  border-radius: var(--radius-sm);\n  box-shadow: var(--shadow-md);\n  background-color: var(--pos-card-background);\n\n  header {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    h1 {\n      margin: 0;\n    }\n  }\n}\n";
-const PosAppRdfDocumentStyle1 = articleCardCss;
+const posAppRdfDocumentCss = ":host {\n  --gap-size: var(--size-1);\n  display: flex;\n  flex-direction: column;\n  gap: var(--gap-size);\n  margin: var(--gap-size);\n}\n\narticle {\n  outline: var(--pos-border-solid);\n  border-radius: var(--radius-sm);\n  box-shadow: var(--shadow-md);\n  background-color: var(--pos-card-background);\n\n  header {\n    display: flex;\n    flex-direction: column;\n\n    h1,\n    pos-type-badges {\n      margin: var(--size-2);\n    }\n  }\n}\n\n@media (min-width: 640px) {\n  :host {\n    flex-direction: row;\n    flex-wrap: wrap;\n\n    section:first-of-type {\n      flex: 1;\n    }\n\n    section:not(:first-of-type) {\n      flex: 0 0 30%;\n    }\n  }\n}\n";
+const PosAppRdfDocumentStyle0 = posAppRdfDocumentCss;
 
 const PosAppRdfDocument$1 = /*@__PURE__*/ proxyCustomElement(class PosAppRdfDocument extends HTMLElement {
     constructor() {
@@ -26,15 +27,15 @@ const PosAppRdfDocument$1 = /*@__PURE__*/ proxyCustomElement(class PosAppRdfDocu
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: '9dd4b79cd54b3d2d61eea562b41a397cc1841279' }, h("section", { key: 'ec97b4983b9c45a5420b8e15b1b5d13a2b78f505' }, h("pos-subjects", { key: '7ca852dee46a4f1bb64cebccb397e2df7045be82' })), h("section", { key: '9aaf18c750b9847234ebb6d92c3c4ab605ff306e' }, h("article", { key: 'd794f6f83cfa49a37a759f0b8fa16b28038ec10b', "aria-labelledby": "doc-title" }, h("header", { key: 'bebbe27160a15351a1eabaa8c1ebb449beaa1005' }, h("h1", { key: 'cf5ba1875f2e22f162d2878789106738aac3d97c', id: "doc-title" }, h("pos-label", { key: 'fcb1a84e354ab5e2842077a6417c5b77ac9d87ed' })), h("pos-type-badges", { key: '370688f50c2906e069686d35a177c88b68de0a98' })), h("pos-literals", { key: '56bc40269a0269301603f3e9f101ad52738fca6a' })))));
+        return (h(Host, { key: 'b209eeeee94d4d4caadd3f71eef05a18857e197f' }, h("section", { key: '58cbf98180072b5d72526edf6dbc2b6e25a992ed' }, h("pos-subjects", { key: '161239375b473091d4f5e2289fb6c463092b1754' })), h("section", { key: '7ac570ed89331f02c53a41ad06f8ee55ccaf91ee' }, h("article", { key: 'dc6846858e34c43aec3686df475f321d4d8cfd40', "aria-labelledby": "doc-title" }, h("header", { key: 'b3ac8e6361a42d73db4227cb815c4b02db463106' }, h("h1", { key: 'cb2adb0b71cd5c48d4d190b1b8655feb5e056284', id: "doc-title" }, h("pos-label", { key: '7b334cc5608520302636ebb4594f38e0211a7f4b' })), h("pos-type-badges", { key: '21335056a5d76258d24d5f5c4123d77c85a8a798' })), h("pos-literals", { key: '843e3be07e42010eef901a721b69c6f1f8356c00' })))));
     }
-    static get style() { return PosAppRdfDocumentStyle0 + PosAppRdfDocumentStyle1; }
+    static get style() { return PosAppRdfDocumentStyle0; }
 }, [1, "pos-app-rdf-document"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-app-rdf-document", "ion-badge", "ion-icon", "ion-progress-bar", "pos-add-literal-value", "pos-description", "pos-label", "pos-literals", "pos-predicate", "pos-resource", "pos-rich-link", "pos-select-term", "pos-subjects", "pos-type-badges"];
+    const components = ["pos-app-rdf-document", "ion-badge", "ion-card", "ion-card-content", "ion-card-header", "ion-icon", "ion-progress-bar", "ion-ripple-effect", "pos-add-literal-value", "pos-description", "pos-label", "pos-literals", "pos-predicate", "pos-resource", "pos-rich-link", "pos-select-term", "pos-subjects", "pos-type-badges"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-app-rdf-document":
             if (!customElements.get(tagName)) {
@@ -43,15 +44,35 @@ function defineCustomElement$1() {
             break;
         case "ion-badge":
             if (!customElements.get(tagName)) {
-                defineCustomElement$e();
+                defineCustomElement$i();
+            }
+            break;
+        case "ion-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$h();
+            }
+            break;
+        case "ion-card-content":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
+        case "ion-card-header":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
             }
             break;
         case "ion-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$d();
+                defineCustomElement$e();
             }
             break;
         case "ion-progress-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "ion-ripple-effect":
             if (!customElements.get(tagName)) {
                 defineCustomElement$c();
             }

package/dist/components/pos-app-rdf-document.js.map

@@ -1 +1 @@
-{"file":"pos-app-rdf-document.js","mappings":";;;;;;;;;;;;;;;AAAA,MAAM,mBAAmB,GAAG,iUAAiU,CAAC;AAC9V,gCAAe,mBAAmB;;ACDlC,MAAM,cAAc,GAAG,0YAA0Y,CAAC;AACla,gCAAe,cAAc;;MCMhBA,mBAAiB;;;;;;IAC5B,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,kEACE,sEAAgB,CACR,EACV,kEACE,mFAAyB,WAAW,IAClC,iEACE,2DAAI,EAAE,EAAC,WAAW,IAChB,mEAAa,CACV,EACL,yEAAmB,CACZ,EACT,sEAAgB,CACR,CACF,CACL,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PosAppRdfDocument"],"sources":["src/apps/styles/default-app-layout.css?tag=pos-app-rdf-document&encapsulation=shadow","src/apps/styles/article-card.css?tag=pos-app-rdf-document&encapsulation=shadow","src/apps/pos-app-rdf-document/pos-app-rdf-document.tsx"],"sourcesContent":[":host {\n  --gap-size: var(--size-4);\n  display: flex;\n  flex-direction: column;\n  gap: var(--gap-size);\n  margin: var(--gap-size);\n}\n\nsection {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gap-size);\n}\n\n@media (min-width: 640px) {\n  :host {\n    flex-direction: row;\n    flex-wrap: wrap;\n\n    section:first-of-type {\n      flex: 1;\n    }\n\n    section:not(:first-of-type) {\n      flex: 0 0 30%;\n    }\n  }\n}\n","article {\n  padding: var(--size-2);\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-2);\n  outline: var(--pos-border-solid);\n  border-radius: var(--radius-sm);\n  box-shadow: var(--shadow-md);\n  background-color: var(--pos-card-background);\n\n  header {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    h1 {\n      margin: 0;\n    }\n  }\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'pos-app-rdf-document',\n  styleUrls: ['../styles/default-app-layout.css', '../styles/article-card.css'],\n  shadow: true,\n})\nexport class PosAppRdfDocument {\n  render() {\n    return (\n      <Host>\n        <section>\n          <pos-subjects />\n        </section>\n        <section>\n          <article aria-labelledby=\"doc-title\">\n            <header>\n              <h1 id=\"doc-title\">\n                <pos-label />\n              </h1>\n              <pos-type-badges />\n            </header>\n            <pos-literals />\n          </article>\n        </section>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pos-app-rdf-document.js","mappings":";;;;;;;;;;;;;;;;;;;AAAA,MAAM,oBAAoB,GAAG,8pBAA8pB,CAAC;AAC5rB,gCAAe,oBAAoB;;MCMtBA,mBAAiB;;;;;;IAC5B,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,kEACE,sEAAgB,CACR,EACV,kEACE,mFAAyB,WAAW,IAClC,iEACE,2DAAI,EAAE,EAAC,WAAW,IAChB,mEAAa,CACV,EACL,yEAAmB,CACZ,EACT,sEAAgB,CACR,CACF,CACL,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PosAppRdfDocument"],"sources":["src/apps/pos-app-rdf-document/pos-app-rdf-document.css?tag=pos-app-rdf-document&encapsulation=shadow","src/apps/pos-app-rdf-document/pos-app-rdf-document.tsx"],"sourcesContent":[":host {\n  --gap-size: var(--size-1);\n  display: flex;\n  flex-direction: column;\n  gap: var(--gap-size);\n  margin: var(--gap-size);\n}\n\narticle {\n  outline: var(--pos-border-solid);\n  border-radius: var(--radius-sm);\n  box-shadow: var(--shadow-md);\n  background-color: var(--pos-card-background);\n\n  header {\n    display: flex;\n    flex-direction: column;\n\n    h1,\n    pos-type-badges {\n      margin: var(--size-2);\n    }\n  }\n}\n\n@media (min-width: 640px) {\n  :host {\n    flex-direction: row;\n    flex-wrap: wrap;\n\n    section:first-of-type {\n      flex: 1;\n    }\n\n    section:not(:first-of-type) {\n      flex: 0 0 30%;\n    }\n  }\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'pos-app-rdf-document',\n  styleUrl: 'pos-app-rdf-document.css',\n  shadow: true,\n})\nexport class PosAppRdfDocument {\n  render() {\n    return (\n      <Host>\n        <section>\n          <pos-subjects />\n        </section>\n        <section>\n          <article aria-labelledby=\"doc-title\">\n            <header>\n              <h1 id=\"doc-title\">\n                <pos-label />\n              </h1>\n              <pos-type-badges />\n            </header>\n            <pos-literals />\n          </article>\n        </section>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/pos-app-settings2.js

@@ -11,7 +11,7 @@ const PosAppSettings = /*@__PURE__*/ proxyCustomElement(class PosAppSettings ext
         this.__attachShadow();
     }
     render() {
-        return h("pos-setting-offline-cache", { key: 'f065206f6291089773a19045243f04b6ce35eeb9' });
+        return h("pos-setting-offline-cache", { key: '0da588136a4c7c4238e0387bfe0649464ccd1c7d' });
     }
     static get style() { return PosAppSettingsStyle0; }
 }, [1, "pos-app-settings"]);

package/dist/components/pos-app2.js

@@ -1306,7 +1306,7 @@ const PosApp = /*@__PURE__*/ proxyCustomElement(class PosApp extends HTMLElement
         }
     }
     render() {
-        return h("slot", { key: '988c393af75e8bd0f4ff2b4c04fe33b1ed686fa7' });
+        return h("slot", { key: '402887f3383b6053da157df211c28977720db8e2' });
     }
 }, [4, "pos-app", {
         "restorePreviousSession": [4, "restore-previous-session"],

package/dist/components/pos-container-contents2.js

@@ -1,8 +1,12 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { a as LdpContainer } from './index10.js';
 import { s as subscribeResource } from './ResourceAware.js';
-import { d as defineCustomElement$4 } from './icon.js';
-import { d as defineCustomElement$3 } 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 './icon.js';
+import { d as defineCustomElement$4 } from './progress-bar.js';
+import { d as defineCustomElement$3 } from './ripple-effect.js';
 import { d as defineCustomElement$2 } from './pos-container-item2.js';
 import { d as defineCustomElement$1 } from './pos-resource2.js';
 
@@ -41,19 +45,39 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-container-contents", "ion-icon", "ion-progress-bar", "pos-container-item", "pos-resource"];
+    const components = ["pos-container-contents", "ion-card", "ion-card-content", "ion-card-header", "ion-icon", "ion-progress-bar", "ion-ripple-effect", "pos-container-item", "pos-resource"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-container-contents":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PosContainerContents);
             }
             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-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$5();
             }
             break;
         case "ion-progress-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ion-ripple-effect":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }

package/dist/components/pos-container-contents2.js.map

@@ -1 +1 @@
-{"file":"pos-container-contents2.js","mappings":";;;;;;;;AAAA,MAAM,uBAAuB,GAAG,8DAA8D,CAAC;AAC/F,mCAAe,uBAAuB;;MCQzB,oBAAoB;IALjC;;;;;QAMW,aAAQ,GAAuB,EAAE,CAAC;QAElC,YAAO,GAAG,IAAI,CAAC;QASxB,oBAAe,GAAG,CAAC,QAAe;YAChC,MAAM,GAAG,GAAG,QAAQ,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;YAC1C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACrB,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;SAC7E,CAAC;KAaH;IArBC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;KACzB;IAQD,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO;YAAE,OAAO,IAAI,CAAC;QAC9B,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,KAChC,cACE,oBAAc,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,GAAG,IACnC,8BAAqB,EAAE,CAAC,IAAI,CAAsB,CACrC,CACZ,CACN,CAAC,CAAC;QACH,OAAO,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,GAAG,cAAK,KAAK,CAAM,GAAG,sCAA6B,CAAC;KACpF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-container-contents/pos-container-contents.css?tag=pos-container-contents&encapsulation=shadow","src/components/pos-container-contents/pos-container-contents.tsx"],"sourcesContent":["ul {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\nli {\n  padding: 0;\n  margin: 0;\n}\n","import { Thing, ContainerContent, LdpContainer } 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-container-contents',\n  shadow: true,\n  styleUrl: 'pos-container-contents.css',\n})\nexport class PosContainerContents implements ResourceAware {\n  @State() contents: ContainerContent[] = [];\n\n  @State() loading = true;\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(LdpContainer);\n    this.loading = false;\n    this.contents = doc.contains().sort((a, b) => a.name.localeCompare(b.name));\n  };\n\n  render() {\n    if (this.loading) return null;\n    const items = this.contents.map(it => (\n      <li>\n        <pos-resource lazy={true} uri={it.uri}>\n          <pos-container-item>{it.name}</pos-container-item>\n        </pos-resource>\n      </li>\n    ));\n    return this.contents.length > 0 ? <ul>{items}</ul> : <p>The container is empty</p>;\n  }\n}\n"],"version":3}
+{"file":"pos-container-contents2.js","mappings":";;;;;;;;;;;;AAAA,MAAM,uBAAuB,GAAG,8DAA8D,CAAC;AAC/F,mCAAe,uBAAuB;;MCQzB,oBAAoB;IALjC;;;;;QAMW,aAAQ,GAAuB,EAAE,CAAC;QAElC,YAAO,GAAG,IAAI,CAAC;QASxB,oBAAe,GAAG,CAAC,QAAe;YAChC,MAAM,GAAG,GAAG,QAAQ,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;YAC1C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACrB,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;SAC7E,CAAC;KAaH;IArBC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;KACzB;IAQD,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO;YAAE,OAAO,IAAI,CAAC;QAC9B,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,KAChC,cACE,oBAAc,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,GAAG,IACnC,8BAAqB,EAAE,CAAC,IAAI,CAAsB,CACrC,CACZ,CACN,CAAC,CAAC;QACH,OAAO,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,GAAG,cAAK,KAAK,CAAM,GAAG,sCAA6B,CAAC;KACpF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-container-contents/pos-container-contents.css?tag=pos-container-contents&encapsulation=shadow","src/components/pos-container-contents/pos-container-contents.tsx"],"sourcesContent":["ul {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\nli {\n  padding: 0;\n  margin: 0;\n}\n","import { Thing, ContainerContent, LdpContainer } 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-container-contents',\n  shadow: true,\n  styleUrl: 'pos-container-contents.css',\n})\nexport class PosContainerContents implements ResourceAware {\n  @State() contents: ContainerContent[] = [];\n\n  @State() loading = true;\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(LdpContainer);\n    this.loading = false;\n    this.contents = doc.contains().sort((a, b) => a.name.localeCompare(b.name));\n  };\n\n  render() {\n    if (this.loading) return null;\n    const items = this.contents.map(it => (\n      <li>\n        <pos-resource lazy={true} uri={it.uri}>\n          <pos-container-item>{it.name}</pos-container-item>\n        </pos-resource>\n      </li>\n    ));\n    return this.contents.length > 0 ? <ul>{items}</ul> : <p>The container is empty</p>;\n  }\n}\n"],"version":3}

package/dist/components/pos-dialog2.js

@@ -16,7 +16,7 @@ const PosDialog = /*@__PURE__*/ proxyCustomElement(class PosDialog extends HTMLE
         this.dialog.close();
     }
     render() {
-        return (h(Host, { key: '168dc7d1cf3feabd5f9b2b3f9add6b04467b36ef' }, h("dialog", { key: '8bbfb245d9ff066d111c116c1715be25b0907403', ref: el => (this.dialog = el) }, h("header", { key: '94e28eb2b8147cb6b2aedda0d8e6a5158117788e' }, h("slot", { key: 'a40c2d397b9f54056d4fd8089fdfcc1e446b6d61', name: "title" }), h("button", { key: 'f0f64f5aaafc331f9e3d0fb6201c453600157db1', tabindex: -1, id: "close", title: "Close", onClick: () => this.close() }, h("ion-icon", { key: 'd94a0cf3d19d7caa3717690004101e3ff4748760', name: "close-outline" }))), h("slot", { key: '3181fafe55869add4a587bf4726226055e98588d', name: "content" }))));
+        return (h(Host, { key: '307e23d3f92eae595a6bb9fd3e2487387d9b02c2' }, h("dialog", { key: '4c21714a0e2e84d809fe46b75d875c961ff8240c', ref: el => (this.dialog = el) }, h("header", { key: '0b9276c31a8deffa524a65b744d0ced04a753c1b' }, h("slot", { key: 'f4bcf72fcb25ea2619a0d7a40f524a10a91c0ca6', name: "title" }), h("button", { key: '8afb0911e29f8b4c81ff31f498266b398125327a', tabindex: -1, id: "close", title: "Close", onClick: () => this.close() }, h("ion-icon", { key: '464669b8a7f2aa1a1d274f933bb394a61abffc99', name: "close-outline" }))), h("slot", { key: 'f9fa43f73f8c295b6c728b4c7e7e3bf5c3be8948', name: "content" }))));
     }
     static get style() { return PosDialogStyle0; }
 }, [4, "pos-dialog", {

package/dist/components/pos-error-toast2.js

@@ -37,7 +37,7 @@ const PosErrorToast = /*@__PURE__*/ proxyCustomElement(class PosErrorToast exten
         await toast.present();
     }
     render() {
-        return (h(Host, { key: 'c1ee5f8a19177c79a3fe377fa27e4a32ffa9db9f' }, h("ion-toast", { key: '8759a3436a5caa16a11a2900a5f67d0dd205d097', trigger: "never", message: "Workarround to preload ion-toast and ion-ripple-effect to be able to show errors while offline", duration: 0 }, h("ion-ripple-effect", { key: '990aa24f2a18750ec5307498acda539b784c86c4' })), h("slot", { key: 'bea0650cc211dc2a161e7c634825adc045647d84' })));
+        return (h(Host, { key: '0dce513e04101d3b9011c635f5aab8897a246385' }, h("ion-toast", { key: '956224c61589fca317f8143055344c857aa894cf', trigger: "never", message: "Workarround to preload ion-toast and ion-ripple-effect to be able to show errors while offline", duration: 0 }, h("ion-ripple-effect", { key: 'e96e65e2f06b61970e241639e7c429a90404517e' })), h("slot", { key: '8869125c64fb97f9736e30df0a748c9ce6aec1da' })));
     }
 }, [1, "pos-error-toast", undefined, [[8, "unhandledrejection", "unhandledRejection"], [0, "pod-os:error", "catchError"]]]);
 function defineCustomElement() {

package/dist/components/pos-example-resources2.js

@@ -1,5 +1,9 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-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';
@@ -23,14 +27,34 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-example-resources", "ion-progress-bar", "pos-description", "pos-label", "pos-resource", "pos-rich-link"];
+    const components = ["pos-example-resources", "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-example-resources":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PosExampleResources);
             }
             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-example-resources2.js.map

@@ -1 +1 @@
-{"file":"pos-example-resources2.js","mappings":";;;;;;;AAAA,MAAM,sBAAsB,GAAG,uRAAuR,CAAC;AACvT,kCAAe,sBAAsB;;MCMxB,mBAAmB;;;;;;IAC9B,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DACE,yFAAwB,EACxB,qJAAmF,EACnF,4DAAK,KAAK,EAAC,OAAO,IAChB,sEAAe,GAAG,EAAC,mDAAmD,GAAG,EACzE,sEAAe,GAAG,EAAC,4CAA4C,GAAG,EAClE,sEAAe,GAAG,EAAC,6CAA6C,GAAG,EACnE,sEAAe,GAAG,EAAC,oDAAoD,GAAG,CACtE,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/apps/pos-app-dashboard/pos-example-resources/pos-example-resources.css?tag=pos-example-resources&encapsulation=shadow","src/apps/pos-app-dashboard/pos-example-resources/pos-example-resources.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\n.links {\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-3);\n  max-width: 80vw;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'pos-example-resources',\n  styleUrl: 'pos-example-resources.css',\n  shadow: true,\n})\nexport class PosExampleResources {\n  render() {\n    return (\n      <Host>\n        <div>\n          <h2>Try these... 💡</h2>\n          <p>No idea where to start? Try these example resources, and follow your nose 👃</p>\n          <div class=\"links\">\n            <pos-rich-link uri=\"https://pod-os.solidcommunity.net/profile/card#me\" />\n            <pos-rich-link uri=\"https://angelo.veltens.org/profile/card#me\" />\n            <pos-rich-link uri=\"https://angelo.veltens.org/public/bookmarks\" />\n            <pos-rich-link uri=\"https://solidos.solidcommunity.net/profile/card#me\" />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pos-example-resources2.js","mappings":";;;;;;;;;;;AAAA,MAAM,sBAAsB,GAAG,uRAAuR,CAAC;AACvT,kCAAe,sBAAsB;;MCMxB,mBAAmB;;;;;;IAC9B,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DACE,yFAAwB,EACxB,qJAAmF,EACnF,4DAAK,KAAK,EAAC,OAAO,IAChB,sEAAe,GAAG,EAAC,mDAAmD,GAAG,EACzE,sEAAe,GAAG,EAAC,4CAA4C,GAAG,EAClE,sEAAe,GAAG,EAAC,6CAA6C,GAAG,EACnE,sEAAe,GAAG,EAAC,oDAAoD,GAAG,CACtE,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/apps/pos-app-dashboard/pos-example-resources/pos-example-resources.css?tag=pos-example-resources&encapsulation=shadow","src/apps/pos-app-dashboard/pos-example-resources/pos-example-resources.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\n.links {\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-3);\n  max-width: 80vw;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'pos-example-resources',\n  styleUrl: 'pos-example-resources.css',\n  shadow: true,\n})\nexport class PosExampleResources {\n  render() {\n    return (\n      <Host>\n        <div>\n          <h2>Try these... 💡</h2>\n          <p>No idea where to start? Try these example resources, and follow your nose 👃</p>\n          <div class=\"links\">\n            <pos-rich-link uri=\"https://pod-os.solidcommunity.net/profile/card#me\" />\n            <pos-rich-link uri=\"https://angelo.veltens.org/profile/card#me\" />\n            <pos-rich-link uri=\"https://angelo.veltens.org/public/bookmarks\" />\n            <pos-rich-link uri=\"https://solidos.solidcommunity.net/profile/card#me\" />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/pos-internal-router2.js

@@ -1,5 +1,9 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$a } from './progress-bar.js';
+import { d as defineCustomElement$e } from './card.js';
+import { d as defineCustomElement$d } from './card-content.js';
+import { d as defineCustomElement$c } from './card-header.js';
+import { d as defineCustomElement$b } from './progress-bar.js';
+import { d as defineCustomElement$a } from './ripple-effect.js';
 import { d as defineCustomElement$9 } from './pos-app-dashboard2.js';
 import { d as defineCustomElement$8 } from './pos-app-settings2.js';
 import { d as defineCustomElement$7 } from './pos-description2.js';
@@ -26,14 +30,34 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-internal-router", "ion-progress-bar", "pos-app-dashboard", "pos-app-settings", "pos-description", "pos-example-resources", "pos-getting-started", "pos-label", "pos-resource", "pos-rich-link", "pos-setting-offline-cache"];
+    const components = ["pos-internal-router", "ion-card", "ion-card-content", "ion-card-header", "ion-progress-bar", "ion-ripple-effect", "pos-app-dashboard", "pos-app-settings", "pos-description", "pos-example-resources", "pos-getting-started", "pos-label", "pos-resource", "pos-rich-link", "pos-setting-offline-cache"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-internal-router":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PosInternalRouter);
             }
             break;
+        case "ion-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "ion-card-content":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "ion-card-header":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
         case "ion-progress-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "ion-ripple-effect":
             if (!customElements.get(tagName)) {
                 defineCustomElement$a();
             }

package/dist/components/pos-internal-router2.js.map

@@ -1 +1 @@
-{"file":"pos-internal-router2.js","mappings":";;;;;;;;;;;;MAKa,iBAAiB;IAH9B;;;QAKE,QAAG,GAAW,kBAAkB,CAAC;KASlC;IAPC,MAAM;QACJ,OAAO,IAAI,CAAC,GAAG,KAAK,iBAAiB,IACnC,2BAAqC,KAErC,4BAAuC,CACxC,CAAC;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-internal-router/pos-internal-router.tsx"],"sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pos-internal-router',\n})\nexport class PosInternalRouter {\n  @Prop()\n  uri: string = 'pod-os:dashboard';\n\n  render() {\n    return this.uri === 'pod-os:settings' ? (\n      <pos-app-settings></pos-app-settings>\n    ) : (\n      <pos-app-dashboard></pos-app-dashboard>\n    );\n  }\n}\n"],"version":3}
+{"file":"pos-internal-router2.js","mappings":";;;;;;;;;;;;;;;;MAKa,iBAAiB;IAH9B;;;QAKE,QAAG,GAAW,kBAAkB,CAAC;KASlC;IAPC,MAAM;QACJ,OAAO,IAAI,CAAC,GAAG,KAAK,iBAAiB,IACnC,2BAAqC,KAErC,4BAAuC,CACxC,CAAC;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-internal-router/pos-internal-router.tsx"],"sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pos-internal-router',\n})\nexport class PosInternalRouter {\n  @Prop()\n  uri: string = 'pod-os:dashboard';\n\n  render() {\n    return this.uri === 'pod-os:settings' ? (\n      <pos-app-settings></pos-app-settings>\n    ) : (\n      <pos-app-dashboard></pos-app-dashboard>\n    );\n  }\n}\n"],"version":3}

package/dist/components/pos-literals2.js

@@ -40,7 +40,7 @@ const PosLiterals = /*@__PURE__*/ proxyCustomElement(class PosLiterals extends H
         }
     }
     render() {
-        return (h(Host, { key: '26dd446e53e4157e6b635b5d711abf9ddf50b821' }, this.data.length > 0 ? (h("dl", null, this.data.map(it => (h("div", { class: "predicate-values" }, h("dt", null, h("pos-predicate", { uri: it.predicate, label: it.label })), h("div", { class: "values" }, it.values.map(value => (h("dd", null, value))))))))) : null, h("pos-add-literal-value", { key: '756003351bba9399d1a53242c0153b18fc0b4b19', "onPod-os:added-literal-value": event => this.literalValueAdded(event.detail) })));
+        return (h(Host, { key: '571f571381d9a9c4bcf0188a782c46485266a3d8' }, this.data.length > 0 ? (h("dl", null, this.data.map(it => (h("div", { class: "predicate-values" }, h("dt", null, h("pos-predicate", { uri: it.predicate, label: it.label })), h("div", { class: "values" }, it.values.map(value => (h("dd", null, value))))))))) : null, h("pos-add-literal-value", { key: 'e1b58aba48a56e60ec8bb1087f054972bb2c437c', "onPod-os:added-literal-value": event => this.literalValueAdded(event.detail) })));
     }
     static get style() { return PosLiteralsStyle0; }
 }, [1, "pos-literals", {

package/dist/components/pos-login-form2.js

@@ -16,7 +16,7 @@ const PosLoginForm = /*@__PURE__*/ proxyCustomElement(class PosLoginForm extends
         this.canSubmit = Boolean(this.idpUrl);
     }
     render() {
-        return (h("form", { key: '193d3790329d1480fd6b14fd55a0d8cee8ce61dd', method: "dialog", onSubmit: () => this.handleSubmit() }, h("label", { key: 'd85ea6b508c9f229e1125f8cc97092335458b94a', htmlFor: "idpUrl" }, "Please enter your Identity Provider"), h("input", { key: 'a2f5e9955b27a8c1fab14c8f087fab167a19dc9a', id: "idpUrl", type: "url", value: this.idpUrl, required: true, onInput: e => this.handleChange(e), list: "suggestedIssuers", placeholder: "Type to search..." }), h("datalist", { key: 'fa0924b31e1a4fcdc794931dd2073022ab4ce95b', id: "suggestedIssuers" }, h("option", { key: 'c3495be7c2a98494ac3ca7fe504edd4b1b232394', value: "https://solidcommunity.net" }, "solidcommunity.net"), h("option", { key: '7fd17434388ed31468df8682dcfc2b4263c27ccb', value: "https://solidweb.org" }, "solidweb.org"), h("option", { key: '4c2a5854fc2499198b289181136cbd0a2fd9c1e1', value: "https://solidweb.me" }, "solidweb.me"), h("option", { key: '02a81104db23c62e0d42b8b45b95eccbd16fc108', value: "https://inrupt.net" }, "inrupt.net"), h("option", { key: 'd7c15dca86800cafc5a974920e40bd117fa50194', value: "https://login.inrupt.com" }, "Inrupt PodSpaces"), h("option", { key: '93ff71136f1775098fda80db5d437f37b51c496f', value: "https://trinpod.us" }, "trinpod.us"), h("option", { key: '481f1630526e324cb24b38c0077b1aeb496b4690', value: "https://use.id" }, "use.id"), h("option", { key: 'abd85ffba7532ba488bf0a4c18a2da2f3dc481ee', value: "https://solid.redpencil.io" }, "redpencil.io"), h("option", { key: '339562d277c4af2e10344f385d00aa4cc37375fa', value: "https://datapod.grant.io" }, "Data Pod (grant.io)"), h("option", { key: '918224ac5af806666a7b77bc8049dcf79800ab8c', value: "https://teamid.live" }, "teamid.live")), h("input", { key: '1ad3ef7998237d30c5eaf5bc9eebe55ede09d0a8', id: "login", type: "submit", value: "Login", disabled: !this.canSubmit })));
+        return (h("form", { key: '6c54aa03972bf5af3779c1e3f874b99574232821', method: "dialog", onSubmit: () => this.handleSubmit() }, h("label", { key: 'a5def7569abeb0a2591886d48fa0deb2c7f6039c', htmlFor: "idpUrl" }, "Please enter your Identity Provider"), h("input", { key: '1da8575dccea9a777f00cb8a7f96435654a582bc', id: "idpUrl", type: "url", value: this.idpUrl, required: true, onInput: e => this.handleChange(e), list: "suggestedIssuers", placeholder: "Type to search..." }), h("datalist", { key: '1818988df2f8a825194eb3503979d6c6adac3619', id: "suggestedIssuers" }, h("option", { key: '25e1b3fd84610e0664c25c3ca9cd535bf7558357', value: "https://solidcommunity.net" }, "solidcommunity.net"), h("option", { key: '5635e434dc4bf406a3664cf5cb28489b5b9218fc', value: "https://solidweb.org" }, "solidweb.org"), h("option", { key: 'd4d301023b40f84b5f445d14290ef3bc589cff56', value: "https://solidweb.me" }, "solidweb.me"), h("option", { key: '39f968af206347c83e4271724e9090543fcec43e', value: "https://inrupt.net" }, "inrupt.net"), h("option", { key: '381767d06a60e16b9323cb15b4298db2eac71d82', value: "https://login.inrupt.com" }, "Inrupt PodSpaces"), h("option", { key: 'd4461d0bb2bfba0ec97f276951b6534dee1ffd51', value: "https://trinpod.us" }, "trinpod.us"), h("option", { key: '80aa0ef7de3ec8dd53d06402c116a6c97747a24f', value: "https://use.id" }, "use.id"), h("option", { key: '794bee3c5a2b29738f25bb67bfb918754fe016ef', value: "https://solid.redpencil.io" }, "redpencil.io"), h("option", { key: '88e27225e7252c90bfb24f21a72bd70c9e3408f4', value: "https://datapod.grant.io" }, "Data Pod (grant.io)"), h("option", { key: '033b75773e898b4fed2507c5064686fb0ad56e03', value: "https://teamid.live" }, "teamid.live")), h("input", { key: 'c8dc41c5d6a892e623d42f5b1839af2728929abd', id: "login", type: "submit", value: "Login", disabled: !this.canSubmit })));
     }
     handleChange(event) {
         this.validate();

package/dist/components/pos-login2.js

@@ -1,7 +1,11 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { s as store } from './session.js';
-import { d as defineCustomElement$9 } from './icon.js';
-import { d as defineCustomElement$8 } from './progress-bar.js';
+import { d as defineCustomElement$d } from './card.js';
+import { d as defineCustomElement$c } from './card-content.js';
+import { d as defineCustomElement$b } from './card-header.js';
+import { d as defineCustomElement$a } from './icon.js';
+import { d as defineCustomElement$9 } from './progress-bar.js';
+import { d as defineCustomElement$8 } from './ripple-effect.js';
 import { d as defineCustomElement$7 } from './skeleton-text.js';
 import { d as defineCustomElement$6 } from './pos-dialog2.js';
 import { d as defineCustomElement$5 } from './pos-image2.js';
@@ -37,7 +41,7 @@ const PosLogin = /*@__PURE__*/ proxyCustomElement(class PosLogin extends HTMLEle
         this.dialog.showModal();
     }
     render() {
-        return (h(Host, { key: '6349e0939fb22cddc9a6e47d424ce2badd518dcd' }, h("div", { key: '940d720ae5a7b951fe4a1bf411e463add43d93d0', class: "container" }, store.state.isLoggedIn ? (h("pos-resource", { uri: store.state.webId }, h("span", { class: "user-data" }, h("pos-picture", null), h("pos-label", null)))) : (''), !store.state.isLoggedIn && (h("button", { key: '40aeea2f9686c9792c3952f8b899f9e819895bae', id: "login", onClick: () => this.openDialog() }, "Login")), store.state.isLoggedIn && (h("button", { key: 'dd8129f4ae6b590231c33d072f4094b7bfc99da5', id: "logout", onClick: () => this.logout() }, "Logout"))), h("pos-dialog", { key: '33278d394f830f5c6040c3c22dc720440dd9d75c', ref: el => (this.dialog = el) }, h("span", { key: '96d3c645cacb1b38bd9adca8562ae4068eeabe11', slot: "title" }, "Sign in to your Pod"), h("pos-login-form", { key: '0c296b68774e4e2c1ed6091c305348b36e80178f', "onPod-os:idp-url-selected": ev => this.login(ev), slot: "content" }))));
+        return (h(Host, { key: 'a4fffd431e401c0acba29cd336715b24fa2bed67' }, h("div", { key: '31aaebc9eeacbf274d72bb42f9bca15691bf1590', class: "container" }, store.state.isLoggedIn ? (h("pos-resource", { uri: store.state.webId }, h("span", { class: "user-data" }, h("pos-picture", null), h("pos-label", null)))) : (''), !store.state.isLoggedIn && (h("button", { key: '8680aa6b62740fea847d85e12e05573ba44e37ce', id: "login", onClick: () => this.openDialog() }, "Login")), store.state.isLoggedIn && (h("button", { key: '3f1af02cd8e77910d4469c1ab83a4fc844c3bae2', id: "logout", onClick: () => this.logout() }, "Logout"))), h("pos-dialog", { key: '732816c365ae37b144fd56c0146dd9970336dc2a', ref: el => (this.dialog = el) }, h("span", { key: '7598a5abff7af257779111cac31ee879eb47dfd4', slot: "title" }, "Sign in to your Pod"), h("pos-login-form", { key: 'cb1297076cf78aafad0dba1b5c111bf9c68e717b', "onPod-os:idp-url-selected": ev => this.login(ev), slot: "content" }))));
     }
     static get style() { return PosLoginStyle0; }
 }, [1, "pos-login", {
@@ -47,19 +51,39 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-login", "ion-icon", "ion-progress-bar", "ion-skeleton-text", "pos-dialog", "pos-image", "pos-label", "pos-login-form", "pos-picture", "pos-resource"];
+    const components = ["pos-login", "ion-card", "ion-card-content", "ion-card-header", "ion-icon", "ion-progress-bar", "ion-ripple-effect", "ion-skeleton-text", "pos-dialog", "pos-image", "pos-label", "pos-login-form", "pos-picture", "pos-resource"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-login":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PosLogin);
             }
             break;
+        case "ion-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "ion-card-content":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "ion-card-header":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
         case "ion-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$a();
             }
             break;
         case "ion-progress-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "ion-ripple-effect":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }

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

@@ -1 +1 @@
-{"file":"pos-login2.js","mappings":";;;;;;;;;;;;AAAA,MAAM,WAAW,GAAG,2wBAA2wB,CAAC;AAChyB,uBAAe,WAAW;;MCSb,QAAQ;IALrB;;;;;QAcE,UAAK,GAAG,OAAO,EAAS;YACtB,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;SACd,CAAC;KAiDH;IAvDC,iBAAiB;QACf,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC3C;IAMD,KAAK,CAAC,KAA0B;QAC9B,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;QAC5B,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KACvB;IAED,MAAM;QACJ,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC;KAClB;IAID,UAAU;QACR,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC;KACzB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,WAAW,IACnBA,KAAO,CAAC,KAAK,CAAC,UAAU,IACvB,oBAAc,GAAG,EAAEA,KAAO,CAAC,KAAK,CAAC,KAAK,IACpC,YAAM,KAAK,EAAC,WAAW,IACrB,sBAAe,EACf,oBAAa,CACR,CACM,KAEf,EAAE,CACH,EACA,CAACA,KAAO,CAAC,KAAK,CAAC,UAAU,KACxB,+DAAQ,EAAE,EAAC,OAAO,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,YAE1C,CACV,EACAA,KAAO,CAAC,KAAK,CAAC,UAAU,KACvB,+DAAQ,EAAE,EAAC,QAAQ,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,aAEvC,CACV,CACG,EACN,mEAAY,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,MAAM,GAAG,EAA0B,CAAC,IAC/D,6DAAM,IAAI,EAAC,OAAO,0BAA2B,EAC7C,oGAA2C,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,IAAI,EAAC,SAAS,GAAG,CACvE,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["session"],"sources":["src/components/pos-login/pos-login.css?tag=pos-login&encapsulation=shadow","src/components/pos-login/pos-login.tsx"],"sourcesContent":[".container {\n  display: flex;\n  align-items: center;\n  gap: var(--size-2);\n}\n.user-data {\n  align-items: center;\n  display: inline-flex;\n  gap: 10px;\n}\n.user-data pos-picture {\n  --width: 40px;\n  --height: 40px;\n  --border-radius: 50%;\n}\n\npos-login-form {\n  margin: var(--size-2);\n}\n\ndialog {\n  margin-top: var(--size-10);\n}\n\nbutton#login,\nbutton#logout {\n  outline: none;\n  font-weight: var(--weight-bold);\n  letter-spacing: var(--letter-xl);\n  border: none;\n  box-sizing: border-box;\n  border-radius: var(--radius-xs);\n  padding: var(--size-2);\n  box-shadow: var(--shadow-sm);\n  color: var(--pos-primary-text-color);\n  background-color: var(--pos-primary-color);\n}\n\nbutton#login:focus-within,\nbutton#logout:focus-within {\n  outline: var(--pos-input-focus-outline);\n}\n\nbutton#login:focus,\nbutton#login:hover,\nbutton#logout:focus,\nbutton#logout:hover {\n  filter: brightness(110%);\n  box-shadow: var(--shadow-md);\n}\n","import { PodOS } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Host, State } from '@stencil/core';\n\nimport session from '../../store/session';\n\n@Component({\n  tag: 'pos-login',\n  shadow: true,\n  styleUrl: 'pos-login.css',\n})\nexport class PosLogin {\n  @Event({ eventName: 'pod-os:init' }) initializeOsEmitter: EventEmitter;\n\n  @State() os: PodOS;\n\n  componentWillLoad() {\n    this.initializeOsEmitter.emit(this.setOs);\n  }\n\n  setOs = async (os: PodOS) => {\n    this.os = os;\n  };\n\n  login(event: CustomEvent<string>) {\n    const idpUrl = event.detail;\n    this.os.login(idpUrl);\n  }\n\n  logout() {\n    this.os.logout();\n  }\n\n  private dialog: HTMLPosDialogElement;\n\n  openDialog() {\n    this.dialog.showModal();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"container\">\n          {session.state.isLoggedIn ? (\n            <pos-resource uri={session.state.webId}>\n              <span class=\"user-data\">\n                <pos-picture />\n                <pos-label />\n              </span>\n            </pos-resource>\n          ) : (\n            ''\n          )}\n          {!session.state.isLoggedIn && (\n            <button id=\"login\" onClick={() => this.openDialog()}>\n              Login\n            </button>\n          )}\n          {session.state.isLoggedIn && (\n            <button id=\"logout\" onClick={() => this.logout()}>\n              Logout\n            </button>\n          )}\n        </div>\n        <pos-dialog ref={el => (this.dialog = el as HTMLPosDialogElement)}>\n          <span slot=\"title\">Sign in to your Pod</span>\n          <pos-login-form onPod-os:idp-url-selected={ev => this.login(ev)} slot=\"content\" />\n        </pos-dialog>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pos-login2.js","mappings":";;;;;;;;;;;;;;;;AAAA,MAAM,WAAW,GAAG,2wBAA2wB,CAAC;AAChyB,uBAAe,WAAW;;MCSb,QAAQ;IALrB;;;;;QAcE,UAAK,GAAG,OAAO,EAAS;YACtB,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;SACd,CAAC;KAiDH;IAvDC,iBAAiB;QACf,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC3C;IAMD,KAAK,CAAC,KAA0B;QAC9B,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;QAC5B,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KACvB;IAED,MAAM;QACJ,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC;KAClB;IAID,UAAU;QACR,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC;KACzB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,WAAW,IACnBA,KAAO,CAAC,KAAK,CAAC,UAAU,IACvB,oBAAc,GAAG,EAAEA,KAAO,CAAC,KAAK,CAAC,KAAK,IACpC,YAAM,KAAK,EAAC,WAAW,IACrB,sBAAe,EACf,oBAAa,CACR,CACM,KAEf,EAAE,CACH,EACA,CAACA,KAAO,CAAC,KAAK,CAAC,UAAU,KACxB,+DAAQ,EAAE,EAAC,OAAO,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,YAE1C,CACV,EACAA,KAAO,CAAC,KAAK,CAAC,UAAU,KACvB,+DAAQ,EAAE,EAAC,QAAQ,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,aAEvC,CACV,CACG,EACN,mEAAY,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,MAAM,GAAG,EAA0B,CAAC,IAC/D,6DAAM,IAAI,EAAC,OAAO,0BAA2B,EAC7C,oGAA2C,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,IAAI,EAAC,SAAS,GAAG,CACvE,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["session"],"sources":["src/components/pos-login/pos-login.css?tag=pos-login&encapsulation=shadow","src/components/pos-login/pos-login.tsx"],"sourcesContent":[".container {\n  display: flex;\n  align-items: center;\n  gap: var(--size-2);\n}\n.user-data {\n  align-items: center;\n  display: inline-flex;\n  gap: 10px;\n}\n.user-data pos-picture {\n  --width: 40px;\n  --height: 40px;\n  --border-radius: 50%;\n}\n\npos-login-form {\n  margin: var(--size-2);\n}\n\ndialog {\n  margin-top: var(--size-10);\n}\n\nbutton#login,\nbutton#logout {\n  outline: none;\n  font-weight: var(--weight-bold);\n  letter-spacing: var(--letter-xl);\n  border: none;\n  box-sizing: border-box;\n  border-radius: var(--radius-xs);\n  padding: var(--size-2);\n  box-shadow: var(--shadow-sm);\n  color: var(--pos-primary-text-color);\n  background-color: var(--pos-primary-color);\n}\n\nbutton#login:focus-within,\nbutton#logout:focus-within {\n  outline: var(--pos-input-focus-outline);\n}\n\nbutton#login:focus,\nbutton#login:hover,\nbutton#logout:focus,\nbutton#logout:hover {\n  filter: brightness(110%);\n  box-shadow: var(--shadow-md);\n}\n","import { PodOS } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Host, State } from '@stencil/core';\n\nimport session from '../../store/session';\n\n@Component({\n  tag: 'pos-login',\n  shadow: true,\n  styleUrl: 'pos-login.css',\n})\nexport class PosLogin {\n  @Event({ eventName: 'pod-os:init' }) initializeOsEmitter: EventEmitter;\n\n  @State() os: PodOS;\n\n  componentWillLoad() {\n    this.initializeOsEmitter.emit(this.setOs);\n  }\n\n  setOs = async (os: PodOS) => {\n    this.os = os;\n  };\n\n  login(event: CustomEvent<string>) {\n    const idpUrl = event.detail;\n    this.os.login(idpUrl);\n  }\n\n  logout() {\n    this.os.logout();\n  }\n\n  private dialog: HTMLPosDialogElement;\n\n  openDialog() {\n    this.dialog.showModal();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"container\">\n          {session.state.isLoggedIn ? (\n            <pos-resource uri={session.state.webId}>\n              <span class=\"user-data\">\n                <pos-picture />\n                <pos-label />\n              </span>\n            </pos-resource>\n          ) : (\n            ''\n          )}\n          {!session.state.isLoggedIn && (\n            <button id=\"login\" onClick={() => this.openDialog()}>\n              Login\n            </button>\n          )}\n          {session.state.isLoggedIn && (\n            <button id=\"logout\" onClick={() => this.logout()}>\n              Logout\n            </button>\n          )}\n        </div>\n        <pos-dialog ref={el => (this.dialog = el as HTMLPosDialogElement)}>\n          <span slot=\"title\">Sign in to your Pod</span>\n          <pos-login-form onPod-os:idp-url-selected={ev => this.login(ev)} slot=\"content\" />\n        </pos-dialog>\n      </Host>\n    );\n  }\n}\n"],"version":3}