@pod-os/elements 0.21.1-5f6551f.0 → 0.21.1-aba77d3.0

package/dist/esm/pos-app-generic.entry.js

@@ -1,13 +1,17 @@
-import { r as registerInstance, h } from './index-f63198f8.js';
+import { r as registerInstance, h, H as Host } from './index-f63198f8.js';
+
+const posAppGenericCss = ":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\n.card {\n  outline: var(--pos-border-solid);\n  border-radius: var(--radius-sm);\n  box-shadow: var(--shadow-md);\n\n  header {\n    display: flex;\n    flex-direction: column;\n\n    pos-picture {\n      --object-fit: contain;\n      --width: 100%;\n      --height: auto;\n      --max-height: 300px;\n      border-radius: var(--radius-sm) var(--radius-sm) 0 0;\n      --border-radius: var(--radius-sm) var(--radius-sm) 0 0;\n    }\n\n    h1,\n    pos-type-badges {\n      margin: var(--size-2);\n    }\n  }\n\n  main {\n    padding: var(--size-2);\n\n    pos-description {\n      color: var(--color-grey-800);\n      font-weight: var(--weight-light);\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: 0 0 25%;\n    }\n\n    section:not(:first-of-type) {\n      flex: 1;\n    }\n  }\n}\n";
+const PosAppGenericStyle0 = posAppGenericCss;
 
 const PosAppGeneric = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("ion-grid", { key: 'd0b80b1dac49e6f3412371fa4cad2ae8de78f959' }, h("ion-row", { key: '2dca3cc1202f2e74bd9d33a2ba311edc111ce512' }, h("ion-col", { key: '77c6fe004de20c30bfc73a0552065aa3bcf18aa3', size: "12", "size-sm": true }, h("ion-card", { key: '0c4de80c0b307f6ffd55e6a38ebd7d20640ce405' }, h("ion-card-header", { key: 'f5f237441b5f5a178fce1d40bf57c37c879c22ca' }, h("pos-type-badges", { key: '92c8e0bb766db6d158c611e4d785263006134730' }), h("pos-picture", { key: '70d1ef02dd1b37a4a6770e40fa1fd3ddd23952b6' }), h("ion-card-title", { key: '768e74004bf1f9fc3fbd8f60d4cc5de1b3dcb4a6' }, h("pos-label", { key: '54fcf93b3991beea083027cf1070670363eb0af1' }))), h("ion-card-content", { key: 'ba810321b1cae0118e8af2e5743ce386023f1fc1' }, h("pos-description", { key: '815ee08a94228a0c35cd68da93ca110c86349d03' })))), h("ion-col", { key: 'b201d815f67b5576c58fdadb2c22b2979cb621bc', size: "12", "size-sm": true }, h("pos-literals", { key: 'b7c00d91b0ab24d745b4714af3a29e13184f47bd' })), h("ion-col", { key: '41c8e46e6a0d8543058a00ef74fd37f37fae1a15', size: "12", "size-sm": true }, h("pos-relations", { key: '2c625c5515ddb96f0ee72695f0552ef641633ca1' }), h("pos-reverse-relations", { key: 'ac8d70a70fa7fd23b016cdf7251a7cb8fa6b34a1' })))));
+        return (h(Host, { key: '8e29bb7745cec5493c102c2262b14291eb9fb62a' }, h("section", { key: '2da95db7a410290cb89f7d3bebaae29c35e05785' }, h("div", { key: '653b61788b1d17adc08620702c72db496578d075', class: "card" }, h("header", { key: '4231d891aac87ba7c4f4bebaa89a23a96784f9c1' }, h("pos-picture", { key: '04a382eec4b3c3d87ae616375162a6da8d52144e', blurredBackground: true }), h("h1", { key: '54e7aafcc30bf3df9353e82c218e56fd66d6c9ef' }, h("pos-label", { key: '8df7a754d5aca177fb1e12c45ca25fa69d933a43' })), h("pos-type-badges", { key: '43b4d9464325b084d23349cc62e0a1615c2d3a15' })), h("main", { key: 'dd3da38812b1cb40a749e914fc72cd83253220b6' }, h("pos-description", { key: '9366c219761578f4381d868ca6d94e660645ec9e' })))), h("section", { key: '4d905102110d50ca60a3e2d87c18a32e01fb7ca1' }, h("pos-literals", { key: 'c0829b4921ba110966a483a00beba4df56a0df6d' })), h("section", { key: '893ffdaffdcec188361d3ffb8afbaf6c1f55ea5b' }, h("pos-relations", { key: '23f5bd14481721439bec06eb5449a9743f87143d' }), h("pos-reverse-relations", { key: '928122999484f392c70ba3cdf7b0b2a7f67f599a' }))));
     }
 };
+PosAppGeneric.style = PosAppGenericStyle0;
 
 export { PosAppGeneric as pos_app_generic };
 

package/dist/esm/pos-app-generic.entry.js.map

@@ -1 +1 @@
-{"file":"pos-app-generic.entry.js","mappings":";;MAKa,aAAa;;;;IACxB,MAAM;QACJ,QACE,mEACE,kEACE,gEAAS,IAAI,EAAC,IAAI,qBAChB,mEACE,0EACE,yEAAmB,EACnB,qEAAe,EACf,yEACE,mEAAa,CACE,CACD,EAClB,2EACE,yEAAmB,CACF,CACV,CACH,EACV,gEAAS,IAAI,EAAC,IAAI,qBAChB,sEAAgB,CACR,EACV,gEAAS,IAAI,EAAC,IAAI,qBAChB,uEAAiB,EACjB,+EAAyB,CACjB,CACF,CACD,EACX;KACH;;;;;","names":[],"sources":["src/apps/pos-app-generic/pos-app-generic.tsx"],"sourcesContent":["import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'pos-app-generic',\n})\nexport class PosAppGeneric {\n  render() {\n    return (\n      <ion-grid>\n        <ion-row>\n          <ion-col size=\"12\" size-sm>\n            <ion-card>\n              <ion-card-header>\n                <pos-type-badges />\n                <pos-picture />\n                <ion-card-title>\n                  <pos-label />\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <pos-description />\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"12\" size-sm>\n            <pos-literals />\n          </ion-col>\n          <ion-col size=\"12\" size-sm>\n            <pos-relations />\n            <pos-reverse-relations />\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    );\n  }\n}\n"],"version":3}
+{"file":"pos-app-generic.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,sgCAAsgC,CAAC;AAChiC,4BAAe,gBAAgB;;MCMlB,aAAa;;;;IACxB,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,kEACE,4DAAK,KAAK,EAAC,MAAM,IACf,iEACE,oEAAa,iBAAiB,EAAE,IAAI,GAAI,EACxC,6DACE,mEAAa,CACV,EACL,yEAAmB,CACZ,EACT,+DACE,yEAAmB,CACd,CACH,CACE,EACV,kEACE,sEAAgB,CACR,EACV,kEACE,uEAAiB,EACjB,+EAAyB,CACjB,CACL,EACP;KACH;;;;;;","names":[],"sources":["src/apps/pos-app-generic/pos-app-generic.css?tag=pos-app-generic&encapsulation=shadow","src/apps/pos-app-generic/pos-app-generic.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\n.card {\n  outline: var(--pos-border-solid);\n  border-radius: var(--radius-sm);\n  box-shadow: var(--shadow-md);\n\n  header {\n    display: flex;\n    flex-direction: column;\n\n    pos-picture {\n      --object-fit: contain;\n      --width: 100%;\n      --height: auto;\n      --max-height: 300px;\n      border-radius: var(--radius-sm) var(--radius-sm) 0 0;\n      --border-radius: var(--radius-sm) var(--radius-sm) 0 0;\n    }\n\n    h1,\n    pos-type-badges {\n      margin: var(--size-2);\n    }\n  }\n\n  main {\n    padding: var(--size-2);\n\n    pos-description {\n      color: var(--color-grey-800);\n      font-weight: var(--weight-light);\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: 0 0 25%;\n    }\n\n    section:not(:first-of-type) {\n      flex: 1;\n    }\n  }\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'pos-app-generic',\n  styleUrls: ['./pos-app-generic.css'],\n  shadow: true,\n})\nexport class PosAppGeneric {\n  render() {\n    return (\n      <Host>\n        <section>\n          <div class=\"card\">\n            <header>\n              <pos-picture blurredBackground={true} />\n              <h1>\n                <pos-label />\n              </h1>\n              <pos-type-badges />\n            </header>\n            <main>\n              <pos-description />\n            </main>\n          </div>\n        </section>\n        <section>\n          <pos-literals />\n        </section>\n        <section>\n          <pos-relations />\n          <pos-reverse-relations />\n        </section>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/pos-app-ldp-container.entry.js

@@ -5,7 +5,7 @@ const PosAppLdpContainer = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("ion-grid", { key: '785f4fa7813691a20262ed5f552332fda3fb72a3' }, h("ion-row", { key: '6f381bff626cea2ed58700ec5ed6f9586930ac47' }, h("ion-col", { key: '9e3e83c257c6a8efb22ce6f83fb451d337e709c7', size: "12", "size-sm": true }, h("pos-container-contents", { key: '7467a0167d1120d5e2b5fb8a49a5f66388a13cee' }), h("details", { key: 'df8f64dc59c93eba8948dea5f0c71731046f6806' }, h("summary", { key: '8ffa0486425561e1ce0924e2f8f8082e6af53c55' }, "All subjects"), h("pos-subjects", { key: '09d959809f7a590934adc4c32efe019d62c61c7d' }))), h("ion-col", { key: '89416e19e86472ae01ed48a9b9c5db4e9190ef22', size: "12", "size-sm": true }, h("ion-card", { key: 'e1efc990e8fbf43b24e21e10501de935ba368e3b' }, h("ion-card-header", { key: '41993a1573194e11f28a67ec5af9c19b3d951736' }, h("ion-card-title", { key: 'd57ff830cb6adf7d41fede1c5dbac3538ffdd5d0' }, h("pos-label", { key: 'df93bba787f3fea0887ccdb2dcf441d6a5962fc2' })), h("pos-type-badges", { key: 'f224c0ecb5491cf791a7a9d7efa1024f13cb6655' }), h("pos-literals", { key: '6690fee8a6cde845fddd145f4da642002fbdc97a' })))))));
+        return (h("ion-grid", { key: '25d3c6836ab626ce1fc2c9ca5b01b963b1068943' }, h("ion-row", { key: 'e040e5f41cba292ee7eaa77b7a7886f9d1d8ca99' }, h("ion-col", { key: 'c16769e7747bd035a4b13545c452ca11766b7054', size: "12", "size-sm": true }, h("pos-container-contents", { key: '9a28b62c6c824e069176a9dab781a6edd6582a81' }), h("details", { key: '288eaceb2e30282f9018c6bf6759586df637cfaf' }, h("summary", { key: '554f9bd02907d914ac0074c31e31b8800aeb7722' }, "All subjects"), h("pos-subjects", { key: '9bd7980dd958296a4006e5b2ce02d70759c4418c' }))), h("ion-col", { key: 'ef03fe6c49255c65b195fe900742d54cb323d4b1', size: "12", "size-sm": true }, h("ion-card", { key: 'fadc374858fe564b20504196b70b2946af3d7402' }, h("ion-card-header", { key: '2283119004b8a38b1adc2b8f1cb56309a9923aea' }, h("ion-card-title", { key: '634152799d6abddb5a9ca8bfb70104998c2888f5' }, h("pos-label", { key: '3677ba9818ac14cb8478eca888431cf225fd9d2e' })), h("pos-type-badges", { key: '45d803cc33ca2642f7b677df6ca387f10019baa1' }), h("pos-literals", { key: '2a9ffea31fb034b3ed876eeb528a00b0a0d8577a' })))))));
     }
 };
 

package/dist/esm/pos-app-rdf-document.entry.js

@@ -5,7 +5,7 @@ const PosAppRdfDocument = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("ion-grid", { key: '79d54a7df8f06a8f264b9035e2d8b399e6cfcce9' }, h("ion-row", { key: '525e6991420c39d427c3bd9bb77b45c660187d91' }, h("ion-col", { key: '85324626961b36214605fe80c4d74f79b2b768a7', size: "12", "size-sm": true }, h("pos-subjects", { key: '6817ef3413a8c7141046431bd7dd18aeaca2a67d' })), h("ion-col", { key: 'aff36764414823123a3b0cc4b0b03ffe9e9e3789', size: "12", "size-sm": true }, h("ion-card", { key: '68291d664e5a12e9164ad874ad810a66afca9c86' }, h("ion-card-header", { key: 'e9a27454426b8018388590912d5a9e8d244b2108' }, h("ion-card-title", { key: '5609079dc2c0fc1ff374f038e90fa683e236bcca' }, h("pos-label", { key: 'f7b81a6e7786ba712c69d4105deb5d80d892d843' })), h("pos-type-badges", { key: '3ea29c7fd93a974c4960e4b834805ed84335f02d' }), h("pos-literals", { key: '4b68e050c7611b00ddbacff832a61f832419eaab' })))))));
+        return (h("ion-grid", { key: '491c329c7b6083129acc0b04d6097d7361b2c2d4' }, h("ion-row", { key: '88dbc219423b1ff94e6a5c6f67e74e6b496eaca8' }, h("ion-col", { key: 'e3329294ca16e707c9ac0f4ede51e801f11524d2', size: "12", "size-sm": true }, h("pos-subjects", { key: '45af152a3cce35a2be01bef1b5ac3072e9bddcd8' })), h("ion-col", { key: 'd376dbf8d4a3d8113dd018a3d3d1d84b9027339d', size: "12", "size-sm": true }, h("ion-card", { key: '958ad15df45ca16960faca66a98e6938faafaf0d' }, h("ion-card-header", { key: '8f0d87ecc1ef413d767b00c906ba36af212a3e25' }, h("ion-card-title", { key: 'a7010a87e619c0d2200b5f0076a6096405821d8a' }, h("pos-label", { key: '462dd3461b1fd5658ae9c0f497f7e5164ff30621' })), h("pos-type-badges", { key: '4b7f8b9e4204a9310e186f10ca3b57d5b245ac5f' }), h("pos-literals", { key: 'cdb9f3b2b088e2852f9116dae10c425e3329c9a4' })))))));
     }
 };
 

package/dist/esm/pos-relations_2.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, i as createEvent, h } from './index-f63198f8.js';
 import { s as subscribeResource } from './ResourceAware-5f237305.js';
 
-const posRelationsCss = ":host {\n  --background-base-color: var(--color-grey-200);\n  --background-color-even: hsl(from var(--background-base-color) h s calc(l + 7));\n  --background-color-odd: hsl(from var(--background-base-color) h s calc(l + 10));\n  --border-color: var(--background-base-color);\n}\n\ndd {\n  padding: 0;\n  margin: 0;\n}\n\ndl {\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-1);\n}\n\ndt {\n  margin-bottom: var(--size-1);\n}\n\n.predicate-values:nth-child(odd) {\n  background-color: var(--background-color-odd);\n}\n\n.predicate-values:nth-child(even) {\n  background-color: var(--background-color-even);\n}\n\n.predicate-values {\n  display: flex;\n  flex-direction: column;\n  border: var(--size-px) solid var(--border-color);\n  padding: var(--size-2);\n  gap: var(--size-1);\n\n  .values {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-3);\n  }\n}\n\npos-rich-link {\n  --background-color: inherit;\n}\n";
+const posRelationsCss = ":host {\n  --background-base-color: var(--color-grey-200);\n  --background-color-even: hsl(from var(--background-base-color) h s calc(l + 7));\n  --background-color-odd: hsl(from var(--background-base-color) h s calc(l + 10));\n  --border-color: var(--background-base-color);\n}\n\ndd {\n  padding: 0;\n  margin: 0;\n}\n\ndl {\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-1);\n  padding: 0;\n  margin: 0;\n}\n\ndt {\n  margin-bottom: var(--size-1);\n}\n\n.predicate-values:nth-child(odd) {\n  background-color: var(--background-color-odd);\n}\n\n.predicate-values:nth-child(even) {\n  background-color: var(--background-color-even);\n}\n\n.predicate-values {\n  display: flex;\n  flex-direction: column;\n  border: var(--size-px) solid var(--border-color);\n  padding: var(--size-2);\n  gap: var(--size-1);\n\n  .values {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-3);\n  }\n}\n\npos-rich-link {\n  --background-color: inherit;\n}\n";
 const PosRelationsStyle0 = posRelationsCss;
 
 const PosRelations = class {
@@ -23,7 +23,7 @@ const PosRelations = class {
 };
 PosRelations.style = PosRelationsStyle0;
 
-const posReverseRelationsCss = ":host {\n  --background-base-color: var(--color-grey-200);\n  --background-color-even: hsl(from var(--background-base-color) h s calc(l + 7));\n  --background-color-odd: hsl(from var(--background-base-color) h s calc(l + 10));\n  --border-color: var(--background-base-color);\n}\n\ndd {\n  padding: 0;\n  margin: 0;\n}\n\ndl {\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-1);\n}\n\ndt {\n  margin-bottom: var(--size-1);\n}\n\n.predicate-values:nth-child(odd) {\n  background-color: var(--background-color-odd);\n}\n\n.predicate-values:nth-child(even) {\n  background-color: var(--background-color-even);\n}\n\n.predicate-values {\n  display: flex;\n  flex-direction: column;\n  border: var(--size-px) solid var(--border-color);\n  padding: var(--size-2);\n  gap: var(--size-1);\n  .values {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-3);\n  }\n}\n\npos-rich-link {\n  --background-color: inherit;\n}\n";
+const posReverseRelationsCss = ":host {\n  --background-base-color: var(--color-grey-200);\n  --background-color-even: hsl(from var(--background-base-color) h s calc(l + 7));\n  --background-color-odd: hsl(from var(--background-base-color) h s calc(l + 10));\n  --border-color: var(--background-base-color);\n}\n\ndd {\n  padding: 0;\n  margin: 0;\n}\n\ndl {\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-1);\n  padding: 0;\n  margin: 0;\n}\n\ndt {\n  margin-bottom: var(--size-1);\n}\n\n.predicate-values:nth-child(odd) {\n  background-color: var(--background-color-odd);\n}\n\n.predicate-values:nth-child(even) {\n  background-color: var(--background-color-even);\n}\n\n.predicate-values {\n  display: flex;\n  flex-direction: column;\n  border: var(--size-px) solid var(--border-color);\n  padding: var(--size-2);\n  gap: var(--size-1);\n  .values {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-3);\n  }\n}\n\npos-rich-link {\n  --background-color: inherit;\n}\n";
 const PosReverseRelationsStyle0 = posReverseRelationsCss;
 
 const PosReverseRelations = class {

package/dist/esm/pos-relations_2.entry.js.map

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

package/dist/types/components/pos-image/pos-image.d.ts

@@ -8,6 +8,10 @@ import { EventEmitter } from '../../stencil-public-runtime';
 export declare class PosImage {
     src: string;
     alt: string;
+    /**
+     * Use a blurred version of the image as its own background, if the image is scaled down to fit into the container.
+     */
+    blurredBackground: boolean;
     os: PodOS;
     private dataUri;
     private brokenFile;

package/dist/types/components/pos-picture/pos-picture.d.ts

@@ -2,6 +2,10 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import { Thing } from '@pod-os/core';
 import { ResourceAware } from '../events/ResourceAware';
 export declare class PosPicture implements ResourceAware {
+    /**
+     * Use a blurred version of the image as its own background, if the image is scaled down to fit into the container.
+     */
+    blurredBackground: boolean;
     resource: Thing;
     subscribeResource: EventEmitter;
     componentWillLoad(): void;

package/dist/types/components.d.ts

@@ -63,6 +63,10 @@ export namespace Components {
      */
     interface PosImage {
         "alt": string;
+        /**
+          * Use a blurred version of the image as its own background, if the image is scaled down to fit into the container.
+         */
+        "blurredBackground": boolean;
         "src": string;
     }
     interface PosInternalRouter {
@@ -83,6 +87,10 @@ export namespace Components {
         "referenceUri": string;
     }
     interface PosPicture {
+        /**
+          * Use a blurred version of the image as its own background, if the image is scaled down to fit into the container.
+         */
+        "blurredBackground": boolean;
     }
     interface PosPredicate {
         "label": string;
@@ -893,6 +901,10 @@ declare namespace LocalJSX {
      */
     interface PosImage {
         "alt"?: string;
+        /**
+          * Use a blurred version of the image as its own background, if the image is scaled down to fit into the container.
+         */
+        "blurredBackground"?: boolean;
         "onPod-os:init"?: (event: PosImageCustomEvent<any>) => void;
         /**
           * Indicates that the resource given in `src` property has been loaded.
@@ -930,6 +942,10 @@ declare namespace LocalJSX {
         "referenceUri": string;
     }
     interface PosPicture {
+        /**
+          * Use a blurred version of the image as its own background, if the image is scaled down to fit into the container.
+         */
+        "blurredBackground"?: boolean;
         "onPod-os:resource"?: (event: PosPictureCustomEvent<any>) => void;
     }
     interface PosPredicate {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pod-os/elements",
-  "version": "0.21.1-5f6551f.0",
+  "version": "0.21.1-aba77d3.0",
   "description": "Custom elements for usage with Solid Pods",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",