@pod-os/elements 0.25.3-rc.e7e3a1b.0 → 0.25.3-rc.e91f9f4.0

package/dist/collection/apps/pos-app-generic/pos-app-generic.css

@@ -10,6 +10,7 @@ article {
   outline: var(--pos-border-solid);
   border-radius: var(--radius-sm);
   box-shadow: var(--shadow-md);
+  background-color: var(--pos-card-background);
 
   header {
     display: flex;
@@ -34,7 +35,7 @@ article {
     padding: var(--size-2);
 
     pos-description {
-      color: var(--color-grey-800);
+      color: var(--pos-secondary-text-color);
       font-weight: var(--weight-light);
     }
   }

package/dist/collection/apps/pos-app-ldp-container/pos-app-ldp-container.css

@@ -0,0 +1,45 @@
+: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);
+}
+
+article {
+  outline: var(--pos-border-solid);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-md);
+  background-color: var(--pos-card-background);
+
+  header {
+    display: flex;
+    flex-direction: column;
+
+    h1,
+    pos-type-badges {
+      margin: var(--size-2);
+    }
+  }
+}
+
+@media (min-width: 640px) {
+  :host {
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    section:first-of-type {
+      flex: 1;
+    }
+
+    section:not(:first-of-type) {
+      flex: 0 0 30%;
+    }
+  }
+}

package/dist/collection/apps/pos-app-ldp-container/pos-app-ldp-container.js

@@ -1,8 +1,19 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 export class PosAppLdpContainer {
     render() {
-        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' })))))));
+        return (h(Host, { key: '9d1632a8c866c8c1f409c04b385b7c02b229c865' }, h("section", { key: '3b311c95480bbdf2980f8c6be4d97badd86c6539' }, h("pos-container-contents", { key: '16d877866434bdf462205a68de37a12d0ae7b944' }), h("details", { key: '16d7eb3d67ea05710cef4b8f8581332753b41a84' }, h("summary", { key: '51f0eeb1a3baa9e0e621c7a82aee6e8e5999e166' }, "All subjects"), h("pos-subjects", { key: '1b66eb562f827c16fedfca7d569a327708b558f5' }))), h("section", { key: '76c9933dc1033ce4252e2560c9e3bf29d5601af5' }, h("article", { key: '12d595d6d08e75265333631eba4357cab9377401' }, h("header", { key: '56fcaa2576a62d4e72d7ec74eb5551383641d6bc' }, h("h1", { key: '81822e425b51cbc295f619c31adefa5778307df7' }, h("pos-label", { key: 'e6e29f2aab165767c320f9bcf8e0cba3a18c459e' })), h("pos-type-badges", { key: '43fecd7720d8291302aceef2a08f3de33b39b6e6' })), h("pos-literals", { key: '808e93bcf1d43227659651d364e6c1b2fe37f2d6' })))));
     }
     static get is() { return "pos-app-ldp-container"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pos-app-ldp-container.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pos-app-ldp-container.css"]
+        };
+    }
 }
 //# sourceMappingURL=pos-app-ldp-container.js.map

package/dist/collection/apps/pos-app-ldp-container/pos-app-ldp-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"pos-app-ldp-container.js","sourceRoot":"","sources":["../../../../src/apps/pos-app-ldp-container/pos-app-ldp-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAK7C,MAAM,OAAO,kBAAkB;IAC7B,MAAM;QACJ,OAAO,CACL;YACE;gBACE,gEAAS,IAAI,EAAC,IAAI;oBAChB,gFAA0B;oBAC1B;wBACE,iFAA+B;wBAC/B,sEAAgB,CACR,CACF;gBACV,gEAAS,IAAI,EAAC,IAAI;oBAChB;wBACE,wEAAiB,KAAK,EAAE,EAAE,GAAG,EAAE,eAAe,EAAE;4BAC9C;gCACE,mEAAa,CACE;4BACjB,yEAAmB;4BACnB,sEAAgB,CACA,CACT,CACH,CACF,CACD,CACZ,CAAC;IACJ,CAAC;;CACF","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,"file":"pos-app-ldp-container.js","sourceRoot":"","sources":["../../../../src/apps/pos-app-ldp-container/pos-app-ldp-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,kBAAkB;IAC7B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH;gBACE,gFAA0B;gBAC1B;oBACE,iFAA+B;oBAC/B,sEAAgB,CACR,CACF;YACV;gBACE;oBACE;wBACE;4BACE,mEAAa,CACV;wBACL,yEAAmB,CACZ;oBACT,sEAAgB,CACR,CACF,CACL,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'pos-app-ldp-container',\n  shadow: true,\n  styleUrl: 'pos-app-ldp-container.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"]}

package/dist/collection/apps/pos-app-rdf-document/pos-app-rdf-document.css

@@ -0,0 +1,39 @@
+:host {
+  --gap-size: var(--size-1);
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-size);
+  margin: var(--gap-size);
+}
+
+article {
+  outline: var(--pos-border-solid);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-md);
+  background-color: var(--pos-card-background);
+
+  header {
+    display: flex;
+    flex-direction: column;
+
+    h1,
+    pos-type-badges {
+      margin: var(--size-2);
+    }
+  }
+}
+
+@media (min-width: 640px) {
+  :host {
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    section:first-of-type {
+      flex: 1;
+    }
+
+    section:not(:first-of-type) {
+      flex: 0 0 30%;
+    }
+  }
+}

package/dist/collection/apps/pos-app-rdf-document/pos-app-rdf-document.js

@@ -1,8 +1,19 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 export class PosAppRdfDocument {
     render() {
-        return (h("ion-grid", { key: '84ff2964b293d6f0549f7d80d40929d4649f6fa7' }, h("ion-row", { key: '938bbb5b0abb409cb2db0eac0e5a5cf44a6b3ec5' }, h("ion-col", { key: '4a131b3ecf8caf92d872d05beaee96ac72bf9ff5', size: "12", "size-sm": true }, h("pos-subjects", { key: 'b2710e968d205934e74455940ec9d989f8dd6a85' })), h("ion-col", { key: '85fe9c8bf0d12839a21c6629f2512d2e4336586e', size: "12", "size-sm": true }, h("ion-card", { key: 'b0e0c64af5e9f07ee3e4329ca59eda09bc5e9c9c' }, h("ion-card-header", { key: 'aa1a4102e987aa9790617419be04ef6928abc6a2', style: { gap: 'var(--size-1)' } }, h("ion-card-title", { key: 'd07a9fe987dab982ae9d354912b3eea35817b59f' }, h("pos-label", { key: '468c63bec31273ff8536518a806fd6811484e53e' })), h("pos-type-badges", { key: '2da876ae6a2f14ce84f5e65d83d720cd972af5b8' }), h("pos-literals", { key: '5db1c14427cfe4a39de592901580c033082e6a48' })))))));
+        return (h(Host, { key: 'ac56ed7d1ae9c345ebc8e91da9d56100f28836ff' }, h("section", { key: '31148fd9af763dffd90a050feff0addef3249018' }, h("pos-subjects", { key: '25a29f4d1b5007ab05744ff25520a20d17ddd0cb' })), h("section", { key: '99813ae7973a4c6af4d676fa90ffba83795b042e' }, h("article", { key: 'f8f667a88df5f962e10e69b29491e76c898d38fe', "aria-labelledby": "doc-title" }, h("header", { key: 'a05d9c1a22058452b211fd88846e8ae7cc970716' }, h("h1", { key: 'a75a65b5b8b8e7b7b382bb226823cf4ceb0013a6', id: "doc-title" }, h("pos-label", { key: 'cc81f9eb1df59bd833f052705bb126b57f9b60a9' })), h("pos-type-badges", { key: '92f79797bb343ab3fab7c39c55772b31e86729a8' })), h("pos-literals", { key: '402483d7a6295569afd41af00055ae47e6355117' })))));
     }
     static get is() { return "pos-app-rdf-document"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pos-app-rdf-document.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pos-app-rdf-document.css"]
+        };
+    }
 }
 //# sourceMappingURL=pos-app-rdf-document.js.map

package/dist/collection/apps/pos-app-rdf-document/pos-app-rdf-document.js.map

@@ -1 +1 @@
-{"version":3,"file":"pos-app-rdf-document.js","sourceRoot":"","sources":["../../../../src/apps/pos-app-rdf-document/pos-app-rdf-document.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAK7C,MAAM,OAAO,iBAAiB;IAC5B,MAAM;QACJ,OAAO,CACL;YACE;gBACE,gEAAS,IAAI,EAAC,IAAI;oBAChB,sEAAgB,CACR;gBACV,gEAAS,IAAI,EAAC,IAAI;oBAChB;wBACE,wEAAiB,KAAK,EAAE,EAAE,GAAG,EAAE,eAAe,EAAE;4BAC9C;gCACE,mEAAa,CACE;4BACjB,yEAAmB;4BACnB,sEAAgB,CACA,CACT,CACH,CACF,CACD,CACZ,CAAC;IACJ,CAAC;;CACF","sourcesContent":["import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'pos-app-rdf-document',\n})\nexport class PosAppRdfDocument {\n  render() {\n    return (\n      <ion-grid>\n        <ion-row>\n          <ion-col size=\"12\" size-sm>\n            <pos-subjects />\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,"file":"pos-app-rdf-document.js","sourceRoot":"","sources":["../../../../src/apps/pos-app-rdf-document/pos-app-rdf-document.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,iBAAiB;IAC5B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH;gBACE,sEAAgB,CACR;YACV;gBACE,mFAAyB,WAAW;oBAClC;wBACE,2DAAI,EAAE,EAAC,WAAW;4BAChB,mEAAa,CACV;wBACL,yEAAmB,CACZ;oBACT,sEAAgB,CACR,CACF,CACL,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/apps/pos-app-settings/pos-app-settings.css

@@ -6,6 +6,4 @@
   justify-content: center;
   align-items: start;
   justify-items: stretch;
-  height: 100%;
-  background: linear-gradient(230deg, rgb(251, 251, 255) 0%, rgb(215, 223, 252) 100%);
 }

package/dist/collection/apps/pos-app-settings/pos-app-settings.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class PosAppSettings {
     render() {
-        return h("pos-setting-offline-cache", { key: '83d824c60d1eb9e2d60b0d7255dda841ad9c6164' });
+        return h("pos-setting-offline-cache", { key: 'f065206f6291089773a19045243f04b6ce35eeb9' });
     }
     static get is() { return "pos-app-settings"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/apps/pos-app-settings/pos-setting-offline-cache/pos-setting-offline-cache.css

@@ -1,10 +1,10 @@
 :host {
-  border: var(--size-px) solid var(--color-grey-100);
+  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(--color-white);
+  background: var(--pos-card-background);
 }
 
 svg {
@@ -21,8 +21,10 @@ p {
 }
 
 .info {
+  color: var(--color-grey-900);
   background-color: var(--color-blue-200);
 }
 .warn {
+  color: var(--color-grey-900);
   background-color: var(--color-yellow-200);
 }

package/dist/collection/apps/pos-app-settings/pos-setting-offline-cache/pos-setting-offline-cache.js

@@ -2,7 +2,7 @@ import { h, Host } from "@stencil/core";
 import { localSettings } from "../../../store/settings";
 export class PosSettingOfflineCache {
     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 is() { return "pos-setting-offline-cache"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pos-add-literal-value/pos-add-literal-value.css

@@ -3,3 +3,18 @@
   align-items: center;
   gap: 0.2rem;
 }
+
+input {
+  padding: var(--size-2);
+  background-color: transparent;
+  color: var(--pos-normal-text-color);
+  border: none;
+}
+
+input:focus {
+  outline: 2px solid var(--pos-primary-color);
+  background-color: var(--pos-input-background-color);
+  transition:
+    outline 0.1s,
+    background-color 0.1s;
+}

package/dist/collection/components/pos-add-literal-value/pos-add-literal-value.js

@@ -33,14 +33,14 @@ export class PosAddLiteralValue {
     }
     onTermSelected(event) {
         this.selectedTermUri = event.detail.uri;
-        this.valueInput.setFocus();
+        this.valueInput.focus();
     }
     render() {
         var _a;
         if (!((_a = this.resource) === null || _a === void 0 ? void 0 : _a.editable)) {
             return;
         }
-        return (h(Host, null, h("ion-icon", { name: "add-circle-outline" }), h("pos-select-term", { placeholder: "Add literal", "onPod-os:term-selected": ev => this.onTermSelected(ev) }), h("ion-input", { ref: el => (this.valueInput = el), value: this.currentValue, placeholder: "", onIonChange: ev => (this.currentValue = ev.detail.value.toString()), onChange: () => this.save() })));
+        return (h(Host, null, h("ion-icon", { name: "add-circle-outline" }), h("pos-select-term", { placeholder: "Add literal", "onPod-os:term-selected": ev => this.onTermSelected(ev) }), h("input", { ref: el => (this.valueInput = el), value: this.currentValue, placeholder: "", onInput: ev => (this.currentValue = ev.target.value), onChange: () => this.save() })));
     }
     static get is() { return "pos-add-literal-value"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pos-add-literal-value/pos-add-literal-value.js.map

@@ -1 +1 @@
-{"version":3,"file":"pos-add-literal-value.js","sourceRoot":"","sources":["../../../../src/components/pos-add-literal-value/pos-add-literal-value.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,YAAY,EAAE,MAAM,cAAc,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AACtF,OAAO,EAAiC,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACrF,OAAO,EAAuC,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAOjG,MAAM,OAAO,kBAAkB;IAL/B;QAoCE,oBAAe,GAAG,CAAC,QAAe,EAAE,EAAE;YACpC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAC3B,CAAC,CAAC;QAEF,iBAAY,GAAG,KAAK,EAAE,EAAS,EAAE,EAAE;YACjC,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QACf,CAAC,CAAC;KAwCH;IAvDC,OAAO,KAAI,CAAC;IAIZ,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;QACxB,cAAc,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC;IAUD,KAAK,CAAC,IAAI;QACR,IAAI,CAAC;YACH,MAAM,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;YACvF,MAAM,OAAO,GAAY;gBACvB,SAAS,EAAE,IAAI,CAAC,eAAe;gBAC/B,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC;gBACzC,MAAM,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC;aAC5B,CAAC;YACF,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACrC,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;QACzB,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACb,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACvB,CAAC;IACH,CAAC;IAED,cAAc,CAAC,KAAK;QAClB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC;QACxC,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,CAAC;IAC7B,CAAC;IAED,MAAM;;QACJ,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,QAAQ,CAAA,EAAE,CAAC;YAC7B,OAAO;QACT,CAAC;QACD,OAAO,CACL,EAAC,IAAI;YACH,gBAAU,IAAI,EAAC,oBAAoB,GAAY;YAC/C,uBAAiB,WAAW,EAAC,aAAa,4BAAyB,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC,GAAI;YACpG,iBACE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,EACjC,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,WAAW,EAAC,EAAE,EACd,WAAW,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,EACnE,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,GAChB,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Literal, PodOS, Thing, labelFromUri } from '@pod-os/core';\nimport { Component, Host, h, State, Event, Watch, EventEmitter } from '@stencil/core';\nimport { PodOsAware, PodOsEventEmitter, subscribePodOs } from '../events/PodOsAware';\nimport { ResourceAware, ResourceEventEmitter, subscribeResource } from '../events/ResourceAware';\n\n@Component({\n  tag: 'pos-add-literal-value',\n  styleUrl: 'pos-add-literal-value.css',\n  shadow: true,\n})\nexport class PosAddLiteralValue implements ResourceAware, PodOsAware {\n  @State() os: PodOS;\n  @State() resource: Thing;\n\n  @State() currentValue: string;\n  @State() selectedTermUri: string;\n\n  @Event({ eventName: 'pod-os:init' }) subscribePodOs: PodOsEventEmitter;\n\n  @Event({ eventName: 'pod-os:resource' }) subscribeResource: ResourceEventEmitter;\n\n  /**\n   * The entered literal value has been added to the resource and successfully stored to the Pod.\n   */\n  @Event({ eventName: 'pod-os:added-literal-value' }) addedLiteralValue: EventEmitter;\n\n  /**\n   * Something went wrong while adding the literal value.\n   */\n  @Event({ eventName: 'pod-os:error' }) error: EventEmitter;\n\n  @Watch('os')\n  setName() {}\n\n  private valueInput: HTMLIonInputElement;\n\n  componentWillLoad() {\n    subscribeResource(this);\n    subscribePodOs(this);\n  }\n\n  receiveResource = (resource: Thing) => {\n    this.resource = resource;\n  };\n\n  receivePodOs = async (os: PodOS) => {\n    this.os = os;\n  };\n\n  async save() {\n    try {\n      await this.os.addPropertyValue(this.resource, this.selectedTermUri, this.currentValue);\n      const literal: Literal = {\n        predicate: this.selectedTermUri,\n        label: labelFromUri(this.selectedTermUri),\n        values: [this.currentValue],\n      };\n      this.addedLiteralValue.emit(literal);\n      this.currentValue = '';\n    } catch (err) {\n      this.error.emit(err);\n    }\n  }\n\n  onTermSelected(event) {\n    this.selectedTermUri = event.detail.uri;\n    this.valueInput.setFocus();\n  }\n\n  render() {\n    if (!this.resource?.editable) {\n      return;\n    }\n    return (\n      <Host>\n        <ion-icon name=\"add-circle-outline\"></ion-icon>\n        <pos-select-term placeholder=\"Add literal\" onPod-os:term-selected={ev => this.onTermSelected(ev)} />\n        <ion-input\n          ref={el => (this.valueInput = el)}\n          value={this.currentValue}\n          placeholder=\"\"\n          onIonChange={ev => (this.currentValue = ev.detail.value.toString())}\n          onChange={() => this.save()}\n        ></ion-input>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pos-add-literal-value.js","sourceRoot":"","sources":["../../../../src/components/pos-add-literal-value/pos-add-literal-value.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,YAAY,EAAE,MAAM,cAAc,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AACtF,OAAO,EAAiC,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACrF,OAAO,EAAuC,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAOjG,MAAM,OAAO,kBAAkB;IAL/B;QAoCE,oBAAe,GAAG,CAAC,QAAe,EAAE,EAAE;YACpC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAC3B,CAAC,CAAC;QAEF,iBAAY,GAAG,KAAK,EAAE,EAAS,EAAE,EAAE;YACjC,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QACf,CAAC,CAAC;KAwCH;IAvDC,OAAO,KAAI,CAAC;IAIZ,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;QACxB,cAAc,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC;IAUD,KAAK,CAAC,IAAI;QACR,IAAI,CAAC;YACH,MAAM,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;YACvF,MAAM,OAAO,GAAY;gBACvB,SAAS,EAAE,IAAI,CAAC,eAAe;gBAC/B,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC;gBACzC,MAAM,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC;aAC5B,CAAC;YACF,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACrC,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;QACzB,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACb,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACvB,CAAC;IACH,CAAC;IAED,cAAc,CAAC,KAAK;QAClB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC;QACxC,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;IAC1B,CAAC;IAED,MAAM;;QACJ,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,QAAQ,CAAA,EAAE,CAAC;YAC7B,OAAO;QACT,CAAC;QACD,OAAO,CACL,EAAC,IAAI;YACH,gBAAU,IAAI,EAAC,oBAAoB,GAAY;YAC/C,uBAAiB,WAAW,EAAC,aAAa,4BAAyB,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC,GAAI;YACpG,aACE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,EACjC,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,WAAW,EAAC,EAAE,EACd,OAAO,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAI,EAAE,CAAC,MAA2B,CAAC,KAAK,CAAC,EAC1E,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,GACpB,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Literal, PodOS, Thing, labelFromUri } from '@pod-os/core';\nimport { Component, Host, h, State, Event, Watch, EventEmitter } from '@stencil/core';\nimport { PodOsAware, PodOsEventEmitter, subscribePodOs } from '../events/PodOsAware';\nimport { ResourceAware, ResourceEventEmitter, subscribeResource } from '../events/ResourceAware';\n\n@Component({\n  tag: 'pos-add-literal-value',\n  styleUrl: 'pos-add-literal-value.css',\n  shadow: true,\n})\nexport class PosAddLiteralValue implements ResourceAware, PodOsAware {\n  @State() os: PodOS;\n  @State() resource: Thing;\n\n  @State() currentValue: string;\n  @State() selectedTermUri: string;\n\n  @Event({ eventName: 'pod-os:init' }) subscribePodOs: PodOsEventEmitter;\n\n  @Event({ eventName: 'pod-os:resource' }) subscribeResource: ResourceEventEmitter;\n\n  /**\n   * The entered literal value has been added to the resource and successfully stored to the Pod.\n   */\n  @Event({ eventName: 'pod-os:added-literal-value' }) addedLiteralValue: EventEmitter;\n\n  /**\n   * Something went wrong while adding the literal value.\n   */\n  @Event({ eventName: 'pod-os:error' }) error: EventEmitter;\n\n  @Watch('os')\n  setName() {}\n\n  private valueInput: HTMLInputElement;\n\n  componentWillLoad() {\n    subscribeResource(this);\n    subscribePodOs(this);\n  }\n\n  receiveResource = (resource: Thing) => {\n    this.resource = resource;\n  };\n\n  receivePodOs = async (os: PodOS) => {\n    this.os = os;\n  };\n\n  async save() {\n    try {\n      await this.os.addPropertyValue(this.resource, this.selectedTermUri, this.currentValue);\n      const literal: Literal = {\n        predicate: this.selectedTermUri,\n        label: labelFromUri(this.selectedTermUri),\n        values: [this.currentValue],\n      };\n      this.addedLiteralValue.emit(literal);\n      this.currentValue = '';\n    } catch (err) {\n      this.error.emit(err);\n    }\n  }\n\n  onTermSelected(event) {\n    this.selectedTermUri = event.detail.uri;\n    this.valueInput.focus();\n  }\n\n  render() {\n    if (!this.resource?.editable) {\n      return;\n    }\n    return (\n      <Host>\n        <ion-icon name=\"add-circle-outline\"></ion-icon>\n        <pos-select-term placeholder=\"Add literal\" onPod-os:term-selected={ev => this.onTermSelected(ev)} />\n        <input\n          ref={el => (this.valueInput = el)}\n          value={this.currentValue}\n          placeholder=\"\"\n          onInput={ev => (this.currentValue = (ev.target as HTMLInputElement).value)}\n          onChange={() => this.save()}\n        ></input>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pos-add-new-thing/pos-add-new-thing.js

@@ -4,7 +4,7 @@ export class PosAddNewThing {
         this.dialog.showModal();
     }
     render() {
-        return (h(Host, { key: '4adcc80d1a0d810279a85be26c8ec6717d91c8a2' }, h("button", { key: '9a3cdd12719c4d3e4ae1e0eff60ccd6101395d92', id: "new", title: "Add a new thing", onClick: () => this.openDialog() }, h("ion-icon", { key: 'efb2723db05962c02293931d0a334ba55908f596', name: "add-circle-outline" })), h("pos-dialog", { key: '954a947b2dc4082519c50cb71a4b6f0f3550c0fb', ref: el => (this.dialog = el) }, h("span", { key: '0a7e91bab3d8740bc8228782d70a980779db7ca1', slot: "title" }, "Add a new thing"), h("pos-new-thing-form", { key: '66ac9bcf72a71b58f4dbbc5cfd214b3609c78cbf', slot: "content", referenceUri: this.referenceUri }))));
+        return (h(Host, { key: '6142a141ef03ca93a362a6b00ebe8d515c3a677a' }, h("button", { key: '72ecf353cd3a7d2d68f9ef28eb1bbe7fdb88b700', id: "new", title: "Add a new thing", onClick: () => this.openDialog() }, h("ion-icon", { key: 'bd05d75c42c10de6df519575787fc66eafb22930', name: "add-circle-outline" })), h("pos-dialog", { key: '23cf0118149704dfca16758970e4f4658e87e946', ref: el => (this.dialog = el) }, h("span", { key: '5af7b7f618cc20684c39134b5ea295400e651cb6', slot: "title" }, "Add a new thing"), h("pos-new-thing-form", { key: '895496c2f6ede3c8677d9d918e0b13582090baed', slot: "content", referenceUri: this.referenceUri }))));
     }
     static get is() { return "pos-add-new-thing"; }
     static get encapsulation() { return "shadow"; }

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

@@ -49,7 +49,7 @@ export class PosApp {
         }
     }
     render() {
-        return h("slot", { key: 'eb7dfaa67c538b3e3e33f42556c1b604fc964729' });
+        return h("slot", { key: '988c393af75e8bd0f4ff2b4c04fe33b1ed686fa7' });
     }
     static get is() { return "pos-app"; }
     static get properties() {

package/dist/collection/components/pos-container-contents/pos-container-contents.css

@@ -7,4 +7,4 @@ ul {
 li {
   padding: 0;
   margin: 0;
-} 
+}

package/dist/collection/components/pos-container-contents/pos-container-contents.js.map

@@ -1 +1 @@
-{"version":3,"file":"pos-container-contents.js","sourceRoot":"","sources":["../../../../src/components/pos-container-contents/pos-container-contents.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2B,YAAY,EAAE,MAAM,cAAc,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAiB,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAO3E,MAAM,OAAO,oBAAoB;IALjC;QAMW,aAAQ,GAAuB,EAAE,CAAC;QAElC,YAAO,GAAG,IAAI,CAAC;QASxB,oBAAe,GAAG,CAAC,QAAe,EAAE,EAAE;YACpC,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,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;QAC9E,CAAC,CAAC;KAeH;IAvBC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAQD,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO;YAAE,OAAO,IAAI,CAAC;QAC9B,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,CACpC;YACE,oBAAc,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,GAAG;gBACnC,8BACG,EAAE,CAAC,IAAI,CACW,CACR,CACZ,CACN,CAAC,CAAC;QACH,OAAO,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,cAAK,KAAK,CAAM,CAAC,CAAC,CAAC,sCAA6B,CAAC;IACrF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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>\n            {it.name}\n          </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-contents.js","sourceRoot":"","sources":["../../../../src/components/pos-container-contents/pos-container-contents.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2B,YAAY,EAAE,MAAM,cAAc,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAiB,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAO3E,MAAM,OAAO,oBAAoB;IALjC;QAMW,aAAQ,GAAuB,EAAE,CAAC;QAElC,YAAO,GAAG,IAAI,CAAC;QASxB,oBAAe,GAAG,CAAC,QAAe,EAAE,EAAE;YACpC,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,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;QAC9E,CAAC,CAAC;KAaH;IArBC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAQD,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO;YAAE,OAAO,IAAI,CAAC;QAC9B,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,CACpC;YACE,oBAAc,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,GAAG;gBACnC,8BAAqB,EAAE,CAAC,IAAI,CAAsB,CACrC,CACZ,CACN,CAAC,CAAC;QACH,OAAO,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,cAAK,KAAK,CAAM,CAAC,CAAC,CAAC,sCAA6B,CAAC;IACrF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/pos-container-contents/pos-container-item.css

@@ -0,0 +1,16 @@
+:host {
+  display: flex;
+}
+
+a {
+  display: flex;
+  text-decoration: none;
+  padding: var(--size-4);
+  width: var(--size-full);
+  gap: var(--size-2);
+  color: var(--pos-normal-text-color);
+  background-color: var(--pos-background-color);
+  &:hover {
+    background-color: var(--pos-border-color);
+  }
+}

package/dist/collection/components/pos-container-contents/pos-container-item.js

@@ -14,13 +14,23 @@ export class PosContainerItem {
         if (!this.resource)
             return null;
         const iconName = selectIconForTypes(this.resource.types());
-        return (h("ion-item", { href: this.resource.uri, onClick: e => {
+        return (h("a", { href: this.resource.uri, onClick: e => {
                 e.preventDefault();
                 this.linkEmitter.emit(this.resource.uri);
             } }, h("ion-icon", { name: iconName, slot: "start" }), h("slot", null)));
     }
     static get is() { return "pos-container-item"; }
     static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pos-container-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pos-container-item.css"]
+        };
+    }
     static get states() {
         return {
             "resource": {}

package/dist/collection/components/pos-container-contents/pos-container-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"pos-container-item.js","sourceRoot":"","sources":["../../../../src/components/pos-container-contents/pos-container-item.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAiB,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAM1D,MAAM,OAAO,gBAAgB;IAJ7B;QAgBE,oBAAe,GAAG,CAAC,QAAe,EAAE,EAAE;YACpC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAC3B,CAAC,CAAC;KAkBH;IAxBC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAMD,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO,IAAI,CAAC;QAChC,MAAM,QAAQ,GAAG,kBAAkB,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC;QAC3D,OAAO,CACL,gBACE,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,GAAG,EACvB,OAAO,EAAE,CAAC,CAAC,EAAE;gBACX,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;YAC3C,CAAC;YAED,gBAAU,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,OAAO,GAAY;YAClD,eAAa,CACJ,CACZ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../events/ResourceAware';\nimport { selectIconForTypes } from './selectIconForTypes';\n\n@Component({\n  tag: 'pos-container-item',\n  shadow: true,\n})\nexport class PosContainerItem implements ResourceAware {\n  @State() resource: Thing;\n\n  @Event({ eventName: 'pod-os:link' }) linkEmitter: EventEmitter;\n\n  @Event({ eventName: 'pod-os:resource' })\n  subscribeResource: EventEmitter;\n\n  componentWillLoad() {\n    subscribeResource(this);\n  }\n\n  receiveResource = (resource: Thing) => {\n    this.resource = resource;\n  };\n\n  render() {\n    if (!this.resource) return null;\n    const iconName = selectIconForTypes(this.resource.types());\n    return (\n      <ion-item\n        href={this.resource.uri}\n        onClick={e => {\n          e.preventDefault();\n          this.linkEmitter.emit(this.resource.uri);\n        }}\n      >\n        <ion-icon name={iconName} slot=\"start\"></ion-icon>\n        <slot></slot>\n      </ion-item>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pos-container-item.js","sourceRoot":"","sources":["../../../../src/components/pos-container-contents/pos-container-item.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAiB,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAO1D,MAAM,OAAO,gBAAgB;IAL7B;QAiBE,oBAAe,GAAG,CAAC,QAAe,EAAE,EAAE;YACpC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAC3B,CAAC,CAAC;KAkBH;IAxBC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAMD,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO,IAAI,CAAC;QAChC,MAAM,QAAQ,GAAG,kBAAkB,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC;QAC3D,OAAO,CACL,SACE,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,GAAG,EACvB,OAAO,EAAE,CAAC,CAAC,EAAE;gBACX,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;YAC3C,CAAC;YAED,gBAAU,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,OAAO,GAAY;YAClD,eAAa,CACX,CACL,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../events/ResourceAware';\nimport { selectIconForTypes } from './selectIconForTypes';\n\n@Component({\n  tag: 'pos-container-item',\n  shadow: true,\n  styleUrl: 'pos-container-item.css',\n})\nexport class PosContainerItem implements ResourceAware {\n  @State() resource: Thing;\n\n  @Event({ eventName: 'pod-os:link' }) linkEmitter: EventEmitter;\n\n  @Event({ eventName: 'pod-os:resource' })\n  subscribeResource: EventEmitter;\n\n  componentWillLoad() {\n    subscribeResource(this);\n  }\n\n  receiveResource = (resource: Thing) => {\n    this.resource = resource;\n  };\n\n  render() {\n    if (!this.resource) return null;\n    const iconName = selectIconForTypes(this.resource.types());\n    return (\n      <a\n        href={this.resource.uri}\n        onClick={e => {\n          e.preventDefault();\n          this.linkEmitter.emit(this.resource.uri);\n        }}\n      >\n        <ion-icon name={iconName} slot=\"start\"></ion-icon>\n        <slot></slot>\n      </a>\n    );\n  }\n}\n"]}

package/dist/collection/components/pos-dialog/pos-dialog.css

@@ -1,11 +1,23 @@
-
-
 dialog {
   background-color: var(--pos-background-color);
+  color: var(--pos-normal-text-color);
   border: none;
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-md);
   max-width: var(--width-xs);
+  animation: slideIn 0.2s ease-out;
+}
+
+dialog::backdrop {
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: var(--blur-sm);
+  animation: fadeIn 0.2s ease-out;
+}
+
+@media (prefers-color-scheme: dark) {
+  dialog::backdrop {
+    background: rgb(100, 100, 100, 0.5);
+  }
 }
 
 dialog header > :first-child {
@@ -45,5 +57,25 @@ button#close {
 }
 
 button#close:hover {
-  color: var(--color-grey-800);
+  color: var(--pos-secondary-border-color);
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
 }

package/dist/collection/components/pos-dialog/pos-dialog.js

@@ -10,7 +10,7 @@ export class PosDialog {
         this.dialog.close();
     }
     render() {
-        return (h(Host, { key: '097959e50499628b0b3e9be024cd415d25182303' }, h("dialog", { key: '0ac068acd6392cfc57f9e3bff866a6c865dcafe3', ref: el => (this.dialog = el) }, h("header", { key: '0cf470448e42f04c8a839eb67eec5a0708e306cb' }, h("slot", { key: '3f3f457ff9130c66ac31e21da74f9ffa9cc42a06', name: "title" }), h("button", { key: 'd420ee61dc91d4f193048f6c89351121c0337446', tabindex: -1, id: "close", title: "Close", onClick: () => this.close() }, h("ion-icon", { key: '9a775752b1678654b3446b964fe83ca15d8722ca', name: "close-outline" }))), h("slot", { key: '464e9fefd0dc8c32b52399358ff250e1982bdf36', name: "content" }))));
+        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" }))));
     }
     static get is() { return "pos-dialog"; }
     static get originalStyleUrls() {

package/dist/collection/components/pos-document/pos-document.css

@@ -1,8 +1,5 @@
-
-:host {
-}
-
 iframe {
+  background-color: white;
   width: 100%;
   height: 100vh;
 }
@@ -11,7 +8,7 @@ iframe {
 .error {
   display: flex;
   opacity: 0.8;
-  background: repeating-linear-gradient( -45deg, rgba(150, 0, 0, 0.1), rgba(150, 0, 0, 0.1) 10px, #fff 5px, #fff 25px );
+  background: repeating-linear-gradient(-45deg, rgba(150, 0, 0, 0.1), rgba(150, 0, 0, 0.1) 10px, #fff 5px, #fff 25px);
   flex-direction: column;
   border: 1px solid red;
   color: black;
@@ -24,8 +21,8 @@ iframe {
 
 .error ion-icon {
   color: #282828;
-  --ionicon-stroke-width: calc(var(--width) / 5) ;
-  font-size: calc(var(--width) / 2)
+  --ionicon-stroke-width: calc(var(--width) / 5);
+  font-size: calc(var(--width) / 2);
 }
 
 a {
@@ -40,5 +37,5 @@ a {
 }
 
 .text {
-  font-size: calc(var(--width) / 20)
+  font-size: calc(var(--width) / 20);
 }

package/dist/collection/components/pos-error-toast/pos-error-toast.js

@@ -27,7 +27,7 @@ export class PosErrorToast {
         await toast.present();
     }
     render() {
-        return (h(Host, { key: 'ca253ac051cc38f56c8db1224fea075293f796b4' }, h("ion-toast", { key: '060b78fd54963782be40abca4592c5871fc84d82', 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: '45f799c8d1f36ad3f11a62485677fc38eb01857b' })), h("slot", { key: '02c6e3ad7cce764de694579056fc1fe1d97dfa32' })));
+        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' })));
     }
     static get is() { return "pos-error-toast"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pos-literals/pos-literals.css

@@ -1,5 +1,5 @@
 :host {
-  --background-base-color: var(--color-grey-200);
+  --background-base-color: color-mix(in srgb, var(--pos-background-color), var(--color-grey-800) 10%);
   --background-color-even: hsl(from var(--background-base-color) h s calc(l + 7));
   --background-color-odd: hsl(from var(--background-base-color) h s calc(l + 10));
   --border-color: var(--background-base-color);

package/dist/collection/components/pos-literals/pos-literals.js

@@ -28,7 +28,7 @@ export class PosLiterals {
         }
     }
     render() {
-        return (h(Host, { key: 'fbfc96a94c8a225a94cbf8d230b9ec36b935523b' }, 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: 'f0b7dda5edb7d590301a8c04a6309a774c074ccb', "onPod-os:added-literal-value": event => this.literalValueAdded(event.detail) })));
+        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) })));
     }
     static get is() { return "pos-literals"; }
     static get encapsulation() { return "shadow"; }

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

@@ -20,7 +20,7 @@ export class PosLogin {
         this.dialog.showModal();
     }
     render() {
-        return (h(Host, { key: '246bea632b952b0a004e1237697a86bd0ebfeea4' }, h("div", { key: 'cdcb1905deb0d27f79adc4ed1eeae0adb47b37f6', class: "container" }, session.state.isLoggedIn ? (h("pos-resource", { uri: session.state.webId }, h("span", { class: "user-data" }, h("pos-picture", null), h("pos-label", null)))) : (''), !session.state.isLoggedIn && (h("button", { key: 'dc3a1072af920e9495a2e003c1e2edf8d282de29', id: "login", onClick: () => this.openDialog() }, "Login")), session.state.isLoggedIn && (h("button", { key: 'ca04ffb1126cd26d1c80060673c036048b403c82', id: "logout", onClick: () => this.logout() }, "Logout"))), h("pos-dialog", { key: 'f832ac8272a695e1bcf826d5aa5d62843bfb4de5', ref: el => (this.dialog = el) }, h("span", { key: 'd2dd84554a068af4a044cba963aa4417b8232d93', slot: "title" }, "Sign in to your Pod"), h("pos-login-form", { key: '98b542c2ddc6828fe99857632ee90a0dae6fdf96', "onPod-os:idp-url-selected": ev => this.login(ev), slot: "content" }))));
+        return (h(Host, { key: '6349e0939fb22cddc9a6e47d424ce2badd518dcd' }, h("div", { key: '940d720ae5a7b951fe4a1bf411e463add43d93d0', class: "container" }, session.state.isLoggedIn ? (h("pos-resource", { uri: session.state.webId }, h("span", { class: "user-data" }, h("pos-picture", null), h("pos-label", null)))) : (''), !session.state.isLoggedIn && (h("button", { key: '40aeea2f9686c9792c3952f8b899f9e819895bae', id: "login", onClick: () => this.openDialog() }, "Login")), session.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" }))));
     }
     static get is() { return "pos-login"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pos-login-form/pos-login-form.css

@@ -1,6 +1,6 @@
 :host {
   display: block;
-  margin: 0
+  margin: 0;
 }
 
 form {
@@ -16,6 +16,8 @@ input {
   border-radius: var(--radius-xs);
   width: var(--size-full);
   box-sizing: border-box;
+  background: var(--pos-input-background-color);
+  color: var(--pos-normal-text-color);
 }
 
 input:focus-within {
@@ -34,10 +36,11 @@ input#login:disabled {
   cursor: default;
   color: var(--pos-disabled-text-color);
   background-color: var(--pos-disabled-color);
-  box-shadow: none
+  box-shadow: none;
 }
 
-input#login:hover:not(:disabled), input#login:focus {
+input#login:hover:not(:disabled),
+input#login:focus {
   filter: brightness(110%);
   box-shadow: var(--shadow-md);
 }

package/dist/collection/components/pos-login-form/pos-login-form.js

@@ -8,7 +8,7 @@ export class PosLoginForm {
         this.canSubmit = Boolean(this.idpUrl);
     }
     render() {
-        return (h("form", { key: 'ad94a827203fead2cc5976e65d5dd11b76929a37', method: "dialog", onSubmit: () => this.handleSubmit() }, h("label", { key: '042115e98ac3dc97aa941b9a086a930c532bab19', htmlFor: "idpUrl" }, "Please enter your Identity Provider"), h("input", { key: '45a4621d9a21a5b21ec82f81025b2be68d5505ae', id: "idpUrl", type: "url", value: this.idpUrl, required: true, onInput: e => this.handleChange(e), list: "suggestedIssuers", placeholder: "Type to search..." }), h("datalist", { key: '1f4dd4962470e796d1a175ea2ec2d03663390a0d', id: "suggestedIssuers" }, h("option", { key: 'f00f189f9f7babbda5c109a57d380d4d44d68f79', value: "https://solidcommunity.net" }, "solidcommunity.net"), h("option", { key: 'a0a1e4171ef87cd219cb8f0c68b68d0901d3fa55', value: "https://solidweb.org" }, "solidweb.org"), h("option", { key: '4361294b71ba9b7b123dd5d1deb2692b2edfa59e', value: "https://solidweb.me" }, "solidweb.me"), h("option", { key: '0fcee23d732415ef206d8c9a4d18c31f2bcd8eca', value: "https://inrupt.net" }, "inrupt.net"), h("option", { key: '267b177e9765e09ee2aa592c8a4d4c152ad7fb0b', value: "https://login.inrupt.com" }, "Inrupt PodSpaces"), h("option", { key: '302a4d517fedeafb146d9f8a3938383c57e24f7e', value: "https://trinpod.us" }, "trinpod.us"), h("option", { key: '83fd1b92688b24f575d3ee17a9cb394c8ab16eab', value: "https://use.id" }, "use.id"), h("option", { key: '007f814795f747d9b74f7b16db986502a9b746af', value: "https://solid.redpencil.io" }, "redpencil.io"), h("option", { key: '5477d60737d194bce4c50f24a75930427b6dc9bb', value: "https://datapod.grant.io" }, "Data Pod (grant.io)"), h("option", { key: 'e289736fcc31902f783efae443f17dfda532ba9f', value: "https://teamid.live" }, "teamid.live")), h("input", { key: '69a61d727a4e2c88a7f3594b98cca42f934b649a', id: "login", type: "submit", value: "Login", disabled: !this.canSubmit })));
+        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 })));
     }
     handleChange(event) {
         this.validate();