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

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();

package/dist/collection/components/pos-make-findable/pos-make-findable.css

@@ -13,9 +13,9 @@ button.main {
   align-items: center;
   justify-content: center;
   border-radius: var(--radius-xs);
-  color: var(--color-grey-500);
-  border: var(--size-px) dashed var(--color-grey-500);
-  background: none;
+  color: var(--pos-subtle-text-color);
+  border: var(--size-px) dashed var(--pos-subtle-text-color);
+  background-color: var(--pos-background-color);
 
   p {
     padding: 0;
@@ -51,6 +51,7 @@ button.main {
     backdrop-filter: var(--blur-md);
     border-radius: var(--radius-xs);
     overflow: hidden;
+    color: var(--color-grey-900);
     background-color: var(--color-grey-200);
     padding: 0;
     margin: 0;
@@ -96,8 +97,8 @@ button.open {
   }
   width: var(--size-full);
   height: var(--size-8);
-  background: var(--color-grey-200);
-  color: var(--color-grey-700);
+  background: var(--pos-background-color);
+  color: var(--pos-normal-text-color);
 
   p {
     display: inline-block;

package/dist/collection/components/pos-navigation-bar/pos-navigation-bar.css

@@ -1,8 +1,5 @@
-:host {
-}
-
 .suggestions ol {
-  border: 1px solid var(--color-grey-200);
+  border: 1px solid var(--pos-border-color);
   display: flex;
   flex-direction: column;
   position: absolute;
@@ -17,26 +14,26 @@
   position: relative;
   li {
     padding: 1rem;
-    background-color: white;
+    background-color: var(--pos-background-color);
     pos-rich-link {
       --background-color: inherit;
     }
     &.selected {
-      background-color: var(--color-blue);
+      background-color: var(--pos-primary-color);
       &:hover {
-        background-color: var(--color-blue-700);
+        background-color: var(--pos-primary-color);
       }
     }
     &:hover {
-      background-color: var(--color-grey-200);
+      background-color: var(--pos-border-color);
     }
   }
 }
 
 .suggestions li.selected pos-rich-link {
   --label-color: white;
-  --description-color: var(--color-grey-200);
-  --uri-color: var(--color-grey-200);
+  --description-color: var(--pos-border-color);
+  --uri-color: var(--pos-subtle-text-color);
 }
 
 ion-searchbar {

package/dist/collection/components/pos-navigation-bar/pos-navigation-bar.js

@@ -72,7 +72,7 @@ export class PosNavigationBar {
         }
     }
     render() {
-        return (h("form", { key: 'dadf35124fd0908c3623ef2e358f1e751a0b7242', onSubmit: e => this.onSubmit(e) }, this.searchIndex && this.uri ? h("pos-make-findable", { uri: this.uri }) : '', h("div", { key: '64d85b0b51298e2d1b3d6ff32f36db3f80fa1796', class: "bar" }, h("ion-searchbar", { key: 'cd51737238ab42315ace5bebdcc0b4c561b02c38', enterkeyhint: "search", placeholder: "Search or enter URI", value: this.uri, debounce: 300, onIonChange: e => this.onChange(e), onIonInput: e => this.onChange(e) }), this.suggestions.length > 0 ? (h("div", { class: "suggestions" }, h("ol", null, this.suggestions.map((it, index) => (h("li", { class: index === this.selectedIndex ? 'selected' : '' }, h("pos-rich-link", { uri: it.ref }))))))) : null)));
+        return (h("form", { key: 'e92382c2024642ea5c0b5abb00f1759003f74c78', onSubmit: e => this.onSubmit(e) }, this.searchIndex && this.uri ? h("pos-make-findable", { uri: this.uri }) : '', h("div", { key: 'c32607860e8aa1fe6d6d182c0e2a056f40b6f1b7', class: "bar" }, h("ion-searchbar", { key: '6f281c307640200da6c57a0660e27901f55d375d', enterkeyhint: "search", placeholder: "Search or enter URI", value: this.uri, debounce: 300, onIonChange: e => this.onChange(e), onIonInput: e => this.onChange(e) }), this.suggestions.length > 0 ? (h("div", { class: "suggestions" }, h("ol", null, this.suggestions.map((it, index) => (h("li", { class: index === this.selectedIndex ? 'selected' : '' }, h("pos-rich-link", { uri: it.ref }))))))) : null)));
     }
     static get is() { return "pos-navigation-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pos-new-thing-form/pos-new-thing-form.css

@@ -21,16 +21,20 @@ button {
   grid-column: 2 / 3;
 }
 
-input, pos-select-term::part(input) {
+input,
+pos-select-term::part(input) {
   outline: var(--pos-input-outline);
   padding: var(--scale-000);
   border: none;
   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, pos-select-term::part(input):focus-within {
+input:focus-within,
+pos-select-term::part(input):focus-within {
   outline: var(--pos-input-focus-outline);
 }
 
@@ -38,9 +42,9 @@ input:focus-within, pos-select-term::part(input):focus-within {
   grid-column: 1/3;
   cursor: default;
   word-break: break-all;
-  color: var(--color-grey-800);
+  color: var(--pos-normal-text-color);
   font-weight: var(--weight-light);
-  background: var(--color-grey-100);
+  background: var(--pos-disabled-color);
   padding: var(--scale-000);
   border-radius: var(--radius-xs);
 }
@@ -57,10 +61,11 @@ input#create:disabled {
   cursor: default;
   color: var(--pos-disabled-text-color);
   background-color: var(--pos-disabled-color);
-  box-shadow: none
+  box-shadow: none;
 }
 
-input#create:hover:not(:disabled), input#create:focus {
+input#create:hover:not(:disabled),
+input#create:focus {
   filter: brightness(110%);
   box-shadow: var(--shadow-md);
 }

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

@@ -14,7 +14,7 @@ export class PosNewThingForm {
         subscribePodOs(this);
     }
     render() {
-        return (h("form", { key: 'd231729bb8d01ffa9e1f88d9488fa92041f33460', method: "dialog", onSubmit: e => this.handleSubmit(e) }, h("label", { key: '739f893b508ffe8baa0b575594af48f6f690425c', htmlFor: "type" }, "Type"), h("pos-select-term", { key: '9973af04355cf8dec838a4217f711e4c8669dab4', id: "type", placeholder: "", value: this.selectedTypeUri, "onPod-os:term-selected": e => this.onTermSelected(e) }), h("label", { key: '4fac8ecca95c2e16c98c35ae92ea9b7f6bd6a94a', htmlFor: "name" }, "Name"), h("input", { key: 'c922c03e656d194c3235fb374ef90fce205f7ee7', id: "name", type: "text", value: this.name, onInput: e => this.handleChange(e) }), this.newUri ? (h("div", { id: "new-uri", title: "This will be the URI of the new thing" }, this.newUri)) : null, h("input", { key: 'fb39eb6c09e67315326f13e184aab93a4ed786c6', id: "create", type: "submit", value: "Create", disabled: !this.canSubmit })));
+        return (h("form", { key: '9ee9d0ab4f31bfc55865ef697d410b37977b1051', method: "dialog", onSubmit: e => this.handleSubmit(e) }, h("label", { key: 'a6f807d2034d55e5218c01375c4ff36564924bfb', htmlFor: "type" }, "Type"), h("pos-select-term", { key: 'f6001d6801bee97c03121d57742a595c8d5d5bd7', id: "type", placeholder: "", value: this.selectedTypeUri, "onPod-os:term-selected": e => this.onTermSelected(e) }), h("label", { key: '9365561d47d72e0153bb743f4fdf5ca7a1b5dcc0', htmlFor: "name" }, "Name"), h("input", { key: 'c93de873370a1123441a33d27c53c954bcc5f5ce', id: "name", type: "text", value: this.name, onInput: e => this.handleChange(e) }), this.newUri ? (h("div", { id: "new-uri", title: "This will be the URI of the new thing" }, this.newUri)) : null, h("input", { key: '9fc1fb39f7c582a069876642cc17678303c7d72b', id: "create", type: "submit", value: "Create", disabled: !this.canSubmit })));
     }
     handleChange(event) {
         this.name = event.target.value;

package/dist/collection/components/pos-relations/pos-relations.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-resource/pos-resource.css

@@ -0,0 +1,11 @@
+details.error {
+  margin: var(--size-2);
+  background-color: var(--pos-error-background-color);
+  border: var(--size-px) solid var(--pos-error-border-color);
+  padding: var(--size-2);
+  border-radius: var(--radius-md);
+
+  a {
+    color: var(--pos-normal-text-color);
+  }
+}

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

@@ -52,14 +52,24 @@ export class PosResource {
             return h("ion-progress-bar", { type: "indeterminate" });
         }
         if (this.error) {
-            return (h("ion-card", null, h("ion-card-header", null, h("p", null, "Sorry, something went wrong"), h("p", null, "Status:", 
+            return (h("details", { class: "error" }, h("summary", { title: "Click to expand" }, "\u26A0 Sorry, something went wrong"), h("p", null, "Status:", 
             // @ts-ignore
-            this.error.status), h("details", null, this.error.message)), h("ion-card-content", null, h("p", null, "You can try to open the link outside PodOS:"), h("a", { href: this.uri }, this.uri))));
+            this.error.status), h("p", null, this.error.message), h("p", null, "You can try to open the link outside PodOS: ", h("a", { href: this.uri }, this.uri))));
         }
         return h("slot", null);
     }
     static get is() { return "pos-resource"; }
     static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pos-resource.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pos-resource.css"]
+        };
+    }
     static get properties() {
         return {
             "uri": {

package/dist/collection/components/pos-resource/pos-resource.js.map

@@ -1 +1 @@
-{"version":3,"file":"pos-resource.js","sourceRoot":"","sources":["../../../../src/components/pos-resource/pos-resource.tsx"],"names":[],"mappings":"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","sourcesContent":["import { PodOS, Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport session from '../../store/session';\nimport { PodOsAware, PodOsEventEmitter, subscribePodOs } from '../events/PodOsAware';\nimport { ResourceReceiver } from '../events/ResourceAware';\n\ninterface SubscribeResourceEvent extends CustomEvent {\n  detail: ResourceReceiver;\n}\n\n@Component({\n  tag: 'pos-resource',\n  shadow: true,\n})\nexport class PosResource implements PodOsAware {\n  @State() os: PodOS;\n\n  @State() resource: Thing;\n  @State() consumers: SubscribeResourceEvent[] = [];\n\n  @Prop() uri: string;\n\n  @Prop() lazy: boolean = false;\n\n  @Event({ eventName: 'pod-os:init' }) subscribePodOs: PodOsEventEmitter;\n\n  /**\n   * Indicates that the resource given in `uri` property has been loaded.\n   */\n  @Event({ eventName: 'pod-os:resource-loaded' }) resourceLoadedEmitter: EventEmitter;\n\n  @State()\n  private error: Error;\n\n  @State()\n  private loading: boolean = true;\n\n  componentWillLoad() {\n    session.onChange('isLoggedIn', () => this.loadResource());\n    subscribePodOs(this);\n  }\n\n  receivePodOs = async (os: PodOS) => {\n    this.os = os;\n  };\n\n  @Listen('pod-os:resource')\n  async provideResource(event: SubscribeResourceEvent) {\n    event.stopPropagation();\n    if (this.resource) {\n      event.detail(this.resource);\n    }\n    this.consumers.push(event);\n  }\n\n  @Watch('os')\n  @Watch('uri')\n  async loadResource() {\n    await this.getResource(!this.lazy);\n  }\n\n  @Method()\n  async fetch() {\n    await this.getResource(true);\n  }\n\n  private async getResource(fetch: boolean = false) {\n    try {\n      if (fetch) {\n        this.loading = true;\n        await this.os.fetch(this.uri);\n        this.resourceLoadedEmitter.emit(this.uri);\n      }\n      this.resource = this.os.store.get(this.uri);\n      this.error = null;\n      this.consumers.forEach(consumer => {\n        consumer.detail(this.resource);\n      });\n    } catch (err) {\n      this.error = err;\n    } finally {\n      this.loading = false;\n    }\n  }\n\n  render() {\n    if (this.loading) {\n      return <ion-progress-bar type=\"indeterminate\" />;\n    }\n    if (this.error) {\n      return (\n        <ion-card>\n          <ion-card-header>\n            <p>Sorry, something went wrong</p>\n            <p>\n              Status:\n              {\n                // @ts-ignore\n                this.error.status\n              }\n            </p>\n            <details>{this.error.message}</details>\n          </ion-card-header>\n          <ion-card-content>\n            <p>You can try to open the link outside PodOS:</p>\n            <a href={this.uri}>{this.uri}</a>\n          </ion-card-content>\n        </ion-card>\n      );\n    }\n    return <slot />;\n  }\n}\n"]}
+{"version":3,"file":"pos-resource.js","sourceRoot":"","sources":["../../../../src/components/pos-resource/pos-resource.tsx"],"names":[],"mappings":"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","sourcesContent":["import { PodOS, Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport session from '../../store/session';\nimport { PodOsAware, PodOsEventEmitter, subscribePodOs } from '../events/PodOsAware';\nimport { ResourceReceiver } from '../events/ResourceAware';\n\ninterface SubscribeResourceEvent extends CustomEvent {\n  detail: ResourceReceiver;\n}\n\n@Component({\n  tag: 'pos-resource',\n  shadow: true,\n  styleUrl: 'pos-resource.css',\n})\nexport class PosResource implements PodOsAware {\n  @State() os: PodOS;\n\n  @State() resource: Thing;\n  @State() consumers: SubscribeResourceEvent[] = [];\n\n  @Prop() uri: string;\n\n  @Prop() lazy: boolean = false;\n\n  @Event({ eventName: 'pod-os:init' }) subscribePodOs: PodOsEventEmitter;\n\n  /**\n   * Indicates that the resource given in `uri` property has been loaded.\n   */\n  @Event({ eventName: 'pod-os:resource-loaded' }) resourceLoadedEmitter: EventEmitter;\n\n  @State()\n  private error: Error;\n\n  @State()\n  private loading: boolean = true;\n\n  componentWillLoad() {\n    session.onChange('isLoggedIn', () => this.loadResource());\n    subscribePodOs(this);\n  }\n\n  receivePodOs = async (os: PodOS) => {\n    this.os = os;\n  };\n\n  @Listen('pod-os:resource')\n  async provideResource(event: SubscribeResourceEvent) {\n    event.stopPropagation();\n    if (this.resource) {\n      event.detail(this.resource);\n    }\n    this.consumers.push(event);\n  }\n\n  @Watch('os')\n  @Watch('uri')\n  async loadResource() {\n    await this.getResource(!this.lazy);\n  }\n\n  @Method()\n  async fetch() {\n    await this.getResource(true);\n  }\n\n  private async getResource(fetch: boolean = false) {\n    try {\n      if (fetch) {\n        this.loading = true;\n        await this.os.fetch(this.uri);\n        this.resourceLoadedEmitter.emit(this.uri);\n      }\n      this.resource = this.os.store.get(this.uri);\n      this.error = null;\n      this.consumers.forEach(consumer => {\n        consumer.detail(this.resource);\n      });\n    } catch (err) {\n      this.error = err;\n    } finally {\n      this.loading = false;\n    }\n  }\n\n  render() {\n    if (this.loading) {\n      return <ion-progress-bar type=\"indeterminate\" />;\n    }\n    if (this.error) {\n      return (\n        <details class=\"error\">\n          <summary title=\"Click to expand\">⚠ Sorry, something went wrong</summary>\n          <p>\n            Status:\n            {\n              // @ts-ignore\n              this.error.status\n            }\n          </p>\n          <p>{this.error.message}</p>\n          <p>\n            You can try to open the link outside PodOS: <a href={this.uri}>{this.uri}</a>\n          </p>\n        </details>\n      );\n    }\n    return <slot />;\n  }\n}\n"]}

package/dist/collection/components/pos-reverse-relations/pos-reverse-relations.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-rich-link/pos-rich-link.css

@@ -1,8 +1,8 @@
 :host {
   --background-color: inherit;
-  --label-color: var(--color-grey-900);
-  --description-color: var(--color-grey-900);
-  --uri-color: var(--color-grey-600);
+  --label-color: var(--pos-normal-text-color);
+  --description-color: var(--pos-normal-text-color);
+  --uri-color: var(--pos-subtle-text-color);
   --font-family: var(--font-sans);
 }
 
@@ -17,7 +17,7 @@ p.content {
 
   .url {
     font-size: var(--scale-fluid-1);
-    color: var(--color-grey-500);
+    color: var(--pos-subtle-text-color);
   }
 }
 

package/dist/collection/components/pos-rich-link/pos-rich-link.js

@@ -1,10 +1,10 @@
 import { h } from "@stencil/core";
 export class PosRichLink {
     render() {
-        return (h("pos-resource", { key: 'e9f1c8b7ca9ded161eebf1b4886b21ec2a23e042', lazy: true, uri: this.uri }, h("p", { key: '022cebbb522c3a04f1f6b83e9aeb8ad890642bdd', class: "content" }, h("a", { key: '105415deeb645e99e36d34f1750da0fa444c6ba8', href: this.uri, onClick: e => {
+        return (h("pos-resource", { key: '0a794cc8287b13f163a813dc6a4f87b2f00e028b', lazy: true, uri: this.uri }, h("p", { key: 'b7a44482a82cd69228f144b04e9ec20b84410339', class: "content" }, h("a", { key: '0d218d4d5c1991c767b66f0d37c5476038e7a0fb', href: this.uri, onClick: e => {
                 e.preventDefault();
                 this.linkEmitter.emit(this.uri);
-            } }, h("pos-label", { key: '4530f9511b81d37229f7c4f57915da035002bdfb' })), h("span", { key: '341e91a6167d36881d2bb5e96365aa7f2f7f2f9b', class: "url" }, new URL(this.uri).host), h("pos-description", { key: 'c8e3875a219a76fa401a558d9c4eaa6813206a19' }))));
+            } }, h("pos-label", { key: 'd04048986a7a4da138608f187a2f27e6313d9a6e' })), h("span", { key: '53a05023aa2fec4725e1d7e59acee9888476ecac', class: "url" }, new URL(this.uri).host), h("pos-description", { key: 'a73de2d208b684a9f555cda312e94df4282afba0' }))));
     }
     static get is() { return "pos-rich-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,7 +38,7 @@ export class PosRouter {
         this.routeChanged.emit(this.uri);
     }
     render() {
-        return h("slot", { key: '4c9986b609d72550130ca76675dee260ca1cf373' });
+        return h("slot", { key: '221db70a52ce7ebc7e9c171142dcf94f252fa985' });
     }
     static get is() { return "pos-router"; }
     static get originalStyleUrls() {

package/dist/collection/components/pos-select-term/pos-select-term.css

@@ -3,6 +3,8 @@
 }
 
 input {
+  background-color: transparent;
+  color: var(--pos-normal-text-color);
   border: none;
   padding-top: 1rem;
   padding-bottom: 1rem;

package/dist/collection/components/pos-select-term/pos-select-term.js

@@ -19,7 +19,7 @@ export class PosSelectTerm {
         this.termSelected.emit({ uri: event.target.value });
     }
     render() {
-        return (h(Host, { key: '0c84c241534e981ac22797ca058622c79aa2c661' }, h("input", { key: '0dd0c1d3ed228a3e2c333e440eb5044e99110252', part: "input", list: "terms", placeholder: this.placeholder, value: this.value, onChange: ev => this.handleChange(ev) }), h("datalist", { key: 'b792a879f92d1b95b094cef9cab81738205a503b', part: "terms", id: "terms" }, this.terms.map(term => (h("option", { value: term.uri }, term.shorthand))))));
+        return (h(Host, { key: '7a548735e2a0478fa1e63e2a880ca61f0f43d91c' }, h("input", { key: '9549691026f4bf42a3048f2af3a78bd71536b160', part: "input", list: "terms", placeholder: this.placeholder, value: this.value, onChange: ev => this.handleChange(ev) }), h("datalist", { key: 'adfd77a001389d6cc092e3b054ef12e45d562d54', part: "terms", id: "terms" }, this.terms.map(term => (h("option", { value: term.uri }, term.shorthand))))));
     }
     static get is() { return "pos-select-term"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pos-subjects/pos-subjects.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/components/ion-card-content.js

@@ -1,4 +1,43 @@
-import { C as CardContent, d as defineCustomElement$1 } from './card-content.js';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { g as getIonMode } from './ionic-global.js';
+
+const cardContentIosCss = "ion-card-content{display:block;position:relative}.card-content-ios{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px;padding-top:20px;padding-bottom:20px;font-size:1rem;line-height:1.4}.card-content-ios h1{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:1.5rem;font-weight:normal}.card-content-ios h2{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:1rem;font-weight:normal}.card-content-ios h3,.card-content-ios h4,.card-content-ios h5,.card-content-ios h6{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:0.875rem;font-weight:normal}.card-content-ios p{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:0.875rem}ion-card-header+.card-content-ios{padding-top:0}";
+const IonCardContentIosStyle0 = cardContentIosCss;
+
+const cardContentMdCss = "ion-card-content{display:block;position:relative}.card-content-md{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:13px;padding-bottom:13px;font-size:0.875rem;line-height:1.5}.card-content-md h1{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:1.5rem;font-weight:normal}.card-content-md h2{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:1rem;font-weight:normal}.card-content-md h3,.card-content-md h4,.card-content-md h5,.card-content-md h6{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:0.875rem;font-weight:normal}.card-content-md p{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:0.875rem;font-weight:normal;line-height:1.5}ion-card-header+.card-content-md{padding-top:0}";
+const IonCardContentMdStyle0 = cardContentMdCss;
+
+const CardContent = /*@__PURE__*/ proxyCustomElement(class CardContent extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    render() {
+        const mode = getIonMode(this);
+        return (h(Host, { key: 'dd95806f042fcd124b18126679f671be6e32a021', class: {
+                [mode]: true,
+                // Used internally for styling
+                [`card-content-${mode}`]: true,
+            } }));
+    }
+    static get style() { return {
+        ios: IonCardContentIosStyle0,
+        md: IonCardContentMdStyle0
+    }; }
+}, [32, "ion-card-content"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ion-card-content"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ion-card-content":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CardContent);
+            }
+            break;
+    } });
+}
 
 const IonCardContent = CardContent;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ion-card-content.js.map

@@ -1 +1 @@
-{"file":"ion-card-content.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
+{"file":"ion-card-content.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,oyBAAoyB,CAAC;AAC/zB,gCAAe,iBAAiB;;ACDhC,MAAM,gBAAgB,GAAG,k0BAAk0B,CAAC;AAC51B,+BAAe,gBAAgB;;MCOlB,WAAW;;;;;IACpB,MAAM;QACF,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;QAC9B,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE;gBAClE,CAAC,IAAI,GAAG,IAAI;;gBAEZ,CAAC,gBAAgB,IAAI,EAAE,GAAG,IAAI;aACjC,EAAE,CAAC,EAAE;KACb;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["../node_modules/@ionic/core/dist/collection/components/card-content/card-content.ios.css?tag=ion-card-content&mode=ios","../node_modules/@ionic/core/dist/collection/components/card-content/card-content.md.css?tag=ion-card-content&mode=md","../node_modules/@ionic/core/dist/collection/components/card-content/card-content.js"],"sourcesContent":["/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\nion-card-content {\n  display: block;\n  position: relative;\n}\n\n/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n.card-content-ios {\n  -webkit-padding-start: 20px;\n  padding-inline-start: 20px;\n  -webkit-padding-end: 20px;\n  padding-inline-end: 20px;\n  padding-top: 20px;\n  padding-bottom: 20px;\n  font-size: 1rem;\n  line-height: 1.4;\n}\n.card-content-ios h1 {\n  margin-left: 0;\n  margin-right: 0;\n  margin-top: 0;\n  margin-bottom: 2px;\n  font-size: 1.5rem;\n  font-weight: normal;\n}\n.card-content-ios h2 {\n  margin-left: 0;\n  margin-right: 0;\n  margin-top: 2px;\n  margin-bottom: 2px;\n  font-size: 1rem;\n  font-weight: normal;\n}\n.card-content-ios h3,\n.card-content-ios h4,\n.card-content-ios h5,\n.card-content-ios h6 {\n  margin-left: 0;\n  margin-right: 0;\n  margin-top: 2px;\n  margin-bottom: 2px;\n  font-size: 0.875rem;\n  font-weight: normal;\n}\n.card-content-ios p {\n  margin-left: 0;\n  margin-right: 0;\n  margin-top: 0;\n  margin-bottom: 2px;\n  font-size: 0.875rem;\n}\n\nion-card-header + .card-content-ios {\n  padding-top: 0;\n}","/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\nion-card-content {\n  display: block;\n  position: relative;\n}\n\n/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n.card-content-md {\n  -webkit-padding-start: 16px;\n  padding-inline-start: 16px;\n  -webkit-padding-end: 16px;\n  padding-inline-end: 16px;\n  padding-top: 13px;\n  padding-bottom: 13px;\n  font-size: 0.875rem;\n  line-height: 1.5;\n}\n.card-content-md h1 {\n  margin-left: 0;\n  margin-right: 0;\n  margin-top: 0;\n  margin-bottom: 2px;\n  font-size: 1.5rem;\n  font-weight: normal;\n}\n.card-content-md h2 {\n  margin-left: 0;\n  margin-right: 0;\n  margin-top: 2px;\n  margin-bottom: 2px;\n  font-size: 1rem;\n  font-weight: normal;\n}\n.card-content-md h3,\n.card-content-md h4,\n.card-content-md h5,\n.card-content-md h6 {\n  margin-left: 0;\n  margin-right: 0;\n  margin-top: 2px;\n  margin-bottom: 2px;\n  font-size: 0.875rem;\n  font-weight: normal;\n}\n.card-content-md p {\n  margin-left: 0;\n  margin-right: 0;\n  margin-top: 0;\n  margin-bottom: 2px;\n  font-size: 0.875rem;\n  font-weight: normal;\n  line-height: 1.5;\n}\n\nion-card-header + .card-content-md {\n  padding-top: 0;\n}","/*!\n * (C) Ionic http://ionicframework.com - MIT License\n */\nimport { Host, h } from \"@stencil/core\";\nimport { getIonMode } from \"../../global/ionic-global\";\n/**\n * @virtualProp {\"ios\" | \"md\"} mode - The mode determines which platform styles to use.\n */\nexport class CardContent {\n    render() {\n        const mode = getIonMode(this);\n        return (h(Host, { key: 'dd95806f042fcd124b18126679f671be6e32a021', class: {\n                [mode]: true,\n                // Used internally for styling\n                [`card-content-${mode}`]: true,\n            } }));\n    }\n    static get is() { return \"ion-card-content\"; }\n    static get originalStyleUrls() {\n        return {\n            \"ios\": [\"card-content.ios.scss\"],\n            \"md\": [\"card-content.md.scss\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"ios\": [\"card-content.ios.css\"],\n            \"md\": [\"card-content.md.css\"]\n        };\n    }\n}\n"],"version":3}