@pod-os/elements 0.25.2 → 0.25.3-rc.2f9e99a.0

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

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

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

@@ -1,9 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { s as subscribeResource } from './ResourceAware.js';
-import { d as defineCustomElement$4 } from './icon.js';
-import { d as defineCustomElement$3 } from './item.js';
-import { d as defineCustomElement$2 } from './note.js';
-import { d as defineCustomElement$1 } from './ripple-effect.js';
+import { d as defineCustomElement$1 } from './icon.js';
 
 function selectIconForTypes(types) {
     if (containsType(types, 'http://www.w3.org/ns/ldp#Container')) {
@@ -21,6 +18,9 @@ function containsType(types, typeUri) {
     return types.some(type => type.uri === typeUri);
 }
 
+const posContainerItemCss = ":host {\n  display: flex;\n}\n\na {\n  display: flex;\n  text-decoration: none;\n  padding: var(--size-4);\n  width: var(--size-full);\n  gap: var(--size-2);\n  color: var(--pos-normal-text-color);\n  background-color: var(--pos-background-color);\n  &:hover {\n    background-color: var(--pos-border-color);\n  }\n}\n";
+const PosContainerItemStyle0 = posContainerItemCss;
+
 const PosContainerItem = /*@__PURE__*/ proxyCustomElement(class PosContainerItem extends HTMLElement {
     constructor() {
         super();
@@ -39,11 +39,12 @@ const PosContainerItem = /*@__PURE__*/ proxyCustomElement(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 style() { return PosContainerItemStyle0; }
 }, [1, "pos-container-item", {
         "resource": [32]
     }]);
@@ -51,7 +52,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-container-item", "ion-icon", "ion-item", "ion-note", "ion-ripple-effect"];
+    const components = ["pos-container-item", "ion-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-container-item":
             if (!customElements.get(tagName)) {
@@ -59,21 +60,6 @@ function defineCustomElement() {
             }
             break;
         case "ion-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "ion-item":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "ion-note":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "ion-ripple-effect":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }

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

@@ -1 +1 @@
-{"file":"pos-container-item2.js","mappings":";;;;;;;SAEgB,kBAAkB,CAAC,KAAgB;IACjD,IAAI,YAAY,CAAC,KAAK,EAAE,oCAAoC,CAAC,EAAE;QAC7D,OAAO,gBAAgB,CAAC;KACzB;SAAM,IAAI,YAAY,CAAC,KAAK,EAAE,mCAAmC,CAAC,EAAE;QACnE,OAAO,kBAAkB,CAAC;KAC3B;SAAM;QACL,OAAO,cAAc,CAAC;KACvB;AACH,CAAC;AAED;AACA,SAAS,YAAY,CAAC,KAAgB,EAAE,OAAe;IACrD,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,GAAG,KAAK,OAAO,CAAC,CAAC;AAClD;;MCNa,gBAAgB;IAJ7B;;;;;;QAgBE,oBAAe,GAAG,CAAC,QAAe;YAChC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;SAC1B,CAAC;KAkBH;IAxBC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;KACzB;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,QACE,gBACE,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,GAAG,EACvB,OAAO,EAAE,CAAC;gBACR,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;aAC1C,IAED,gBAAU,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,OAAO,GAAY,EAClD,eAAa,CACJ,EACX;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-container-contents/selectIconForTypes.ts","src/components/pos-container-contents/pos-container-item.tsx"],"sourcesContent":["import { RdfType } from '@pod-os/core';\n\nexport function selectIconForTypes(types: RdfType[]) {\n  if (containsType(types, 'http://www.w3.org/ns/ldp#Container')) {\n    return 'folder-outline';\n  } else if (containsType(types, 'http://www.w3.org/ns/ldp#Resource')) {\n    return 'document-outline';\n  } else {\n    return 'help-outline';\n  }\n}\n\n// TODO: remove duplication with pos-type-router/selectAppForTypes\nfunction containsType(types: RdfType[], typeUri: string) {\n  return types.some(type => type.uri === typeUri);\n}\n","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-item2.js","mappings":";;;;SAEgB,kBAAkB,CAAC,KAAgB;IACjD,IAAI,YAAY,CAAC,KAAK,EAAE,oCAAoC,CAAC,EAAE;QAC7D,OAAO,gBAAgB,CAAC;KACzB;SAAM,IAAI,YAAY,CAAC,KAAK,EAAE,mCAAmC,CAAC,EAAE;QACnE,OAAO,kBAAkB,CAAC;KAC3B;SAAM;QACL,OAAO,cAAc,CAAC;KACvB;AACH,CAAC;AAED;AACA,SAAS,YAAY,CAAC,KAAgB,EAAE,OAAe;IACrD,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,GAAG,KAAK,OAAO,CAAC,CAAC;AAClD;;ACfA,MAAM,mBAAmB,GAAG,gUAAgU,CAAC;AAC7V,+BAAe,mBAAmB;;MCSrB,gBAAgB;IAL7B;;;;;;QAiBE,oBAAe,GAAG,CAAC,QAAe;YAChC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;SAC1B,CAAC;KAkBH;IAxBC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;KACzB;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,QACE,SACE,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,GAAG,EACvB,OAAO,EAAE,CAAC;gBACR,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;aAC1C,IAED,gBAAU,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,OAAO,GAAY,EAClD,eAAa,CACX,EACJ;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-container-contents/selectIconForTypes.ts","src/components/pos-container-contents/pos-container-item.css?tag=pos-container-item&encapsulation=shadow","src/components/pos-container-contents/pos-container-item.tsx"],"sourcesContent":["import { RdfType } from '@pod-os/core';\n\nexport function selectIconForTypes(types: RdfType[]) {\n  if (containsType(types, 'http://www.w3.org/ns/ldp#Container')) {\n    return 'folder-outline';\n  } else if (containsType(types, 'http://www.w3.org/ns/ldp#Resource')) {\n    return 'document-outline';\n  } else {\n    return 'help-outline';\n  }\n}\n\n// TODO: remove duplication with pos-type-router/selectAppForTypes\nfunction containsType(types: RdfType[], typeUri: string) {\n  return types.some(type => type.uri === typeUri);\n}\n",":host {\n  display: flex;\n}\n\na {\n  display: flex;\n  text-decoration: none;\n  padding: var(--size-4);\n  width: var(--size-full);\n  gap: var(--size-2);\n  color: var(--pos-normal-text-color);\n  background-color: var(--pos-background-color);\n  &:hover {\n    background-color: var(--pos-border-color);\n  }\n}\n","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"],"version":3}

package/dist/components/pos-dialog2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$1 } from './icon.js';
 
-const posDialogCss = "dialog{background-color:var(--pos-background-color);border:none;border-radius:var(--radius-md);box-shadow:var(--shadow-md);max-width:var(--width-xs)}dialog header>:first-child{flex-grow:1;font-weight:var(--weight-light);font-size:var(--scale-2);font-family:var(--font-sans);margin:0}dialog header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:var(--scale-0);border-bottom-style:inset;padding:0 0 var(--scale-0) 0}dialog>:last-child{display:block;margin-top:var(--scale-3)}button#close{cursor:pointer;display:flex;align-items:center;justify-content:center;border:none;background:none;font-size:var(--scale-3);color:var(--color-grey-500)}button#close:hover{color:var(--color-grey-800)}";
+const posDialogCss = "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{flex-grow:1;font-weight:var(--weight-light);font-size:var(--scale-2);font-family:var(--font-sans);margin:0}dialog header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:var(--scale-0);border-bottom-style:inset;padding:0 0 var(--scale-0) 0}dialog>:last-child{display:block;margin-top:var(--scale-3)}button#close{cursor:pointer;display:flex;align-items:center;justify-content:center;border:none;background:none;font-size:var(--scale-3);color:var(--color-grey-500)}button#close:hover{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)}}";
 const PosDialogStyle0 = posDialogCss;
 
 const PosDialog = /*@__PURE__*/ proxyCustomElement(class PosDialog extends HTMLElement {
@@ -16,7 +16,7 @@ const PosDialog = /*@__PURE__*/ proxyCustomElement(class PosDialog extends HTMLE
         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: '307e23d3f92eae595a6bb9fd3e2487387d9b02c2' }, h("dialog", { key: '4c21714a0e2e84d809fe46b75d875c961ff8240c', ref: el => (this.dialog = el) }, h("header", { key: '0b9276c31a8deffa524a65b744d0ced04a753c1b' }, h("slot", { key: 'f4bcf72fcb25ea2619a0d7a40f524a10a91c0ca6', name: "title" }), h("button", { key: '8afb0911e29f8b4c81ff31f498266b398125327a', tabindex: -1, id: "close", title: "Close", onClick: () => this.close() }, h("ion-icon", { key: '464669b8a7f2aa1a1d274f933bb394a61abffc99', name: "close-outline" }))), h("slot", { key: 'f9fa43f73f8c295b6c728b4c7e7e3bf5c3be8948', name: "content" }))));
     }
     static get style() { return PosDialogStyle0; }
 }, [4, "pos-dialog", {

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

@@ -1 +1 @@
-{"file":"pos-dialog2.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,otBAAotB,CAAC;AAC1uB,wBAAe,YAAY;;MCSd,SAAS;;;;;IAIpB,MAAM,SAAS;QACb,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC;KACzB;IAGD,MAAM,KAAK;QACT,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;KACrB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,+DAAQ,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,MAAM,GAAG,EAAuB,CAAC,IACxD,iEACE,6DAAM,IAAI,EAAC,OAAO,GAAG,EACrB,+DAAQ,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE,IACxE,iEAAU,IAAI,EAAC,eAAe,GAAY,CACnC,CACF,EACT,6DAAM,IAAI,EAAC,SAAS,GAAG,CAChB,CACJ,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-dialog/pos-dialog.css?tag=pos-dialog","src/components/pos-dialog/pos-dialog.tsx"],"sourcesContent":["\n\ndialog {\n  background-color: var(--pos-background-color);\n  border: none;\n  border-radius: var(--radius-md);\n  box-shadow: var(--shadow-md);\n  max-width: var(--width-xs);\n}\n\ndialog header > :first-child {\n  /* This is the title slot*/\n  flex-grow: 1;\n  font-weight: var(--weight-light);\n  font-size: var(--scale-2);\n  font-family: var(--font-sans);\n  margin: 0;\n}\n\ndialog header {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--scale-0);\n  border-bottom-style: inset;\n  padding: 0 0 var(--scale-0) 0;\n}\n\ndialog > :last-child {\n  /* This is the content slot*/\n  display: block;\n  margin-top: var(--scale-3);\n}\n\nbutton#close {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: none;\n  font-size: var(--scale-3);\n  color: var(--color-grey-500);\n}\n\nbutton#close:hover {\n  color: var(--color-grey-800);\n}\n","import { Component, Host, h, Method } from '@stencil/core';\n\n/**\n * Styled wrapper around native dialog element, with slots `title` and `content`\n */\n@Component({\n  tag: 'pos-dialog',\n  styleUrl: 'pos-dialog.css',\n  shadow: false, // shadow dom prevents the html dialog from working normally (autofocus, close on submit)\n})\nexport class PosDialog {\n  private dialog: HTMLDialogElement;\n\n  @Method()\n  async showModal() {\n    this.dialog.showModal();\n  }\n\n  @Method()\n  async close() {\n    this.dialog.close();\n  }\n\n  render() {\n    return (\n      <Host>\n        <dialog ref={el => (this.dialog = el as HTMLDialogElement)}>\n          <header>\n            <slot name=\"title\" />\n            <button tabindex={-1} id=\"close\" title=\"Close\" onClick={() => this.close()}>\n              <ion-icon name=\"close-outline\"></ion-icon>\n            </button>\n          </header>\n          <slot name=\"content\" />\n        </dialog>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pos-dialog2.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,ipCAAipC,CAAC;AACvqC,wBAAe,YAAY;;MCSd,SAAS;;;;;IAIpB,MAAM,SAAS;QACb,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC;KACzB;IAGD,MAAM,KAAK;QACT,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;KACrB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,+DAAQ,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,MAAM,GAAG,EAAuB,CAAC,IACxD,iEACE,6DAAM,IAAI,EAAC,OAAO,GAAG,EACrB,+DAAQ,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE,IACxE,iEAAU,IAAI,EAAC,eAAe,GAAY,CACnC,CACF,EACT,6DAAM,IAAI,EAAC,SAAS,GAAG,CAChB,CACJ,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-dialog/pos-dialog.css?tag=pos-dialog","src/components/pos-dialog/pos-dialog.tsx"],"sourcesContent":["dialog {\n  background-color: var(--pos-background-color);\n  color: var(--pos-normal-text-color);\n  border: none;\n  border-radius: var(--radius-md);\n  box-shadow: var(--shadow-md);\n  max-width: var(--width-xs);\n  animation: slideIn 0.2s ease-out;\n}\n\ndialog::backdrop {\n  background: rgba(0, 0, 0, 0.5);\n  backdrop-filter: var(--blur-sm);\n  animation: fadeIn 0.2s ease-out;\n}\n\n@media (prefers-color-scheme: dark) {\n  dialog::backdrop {\n    background: rgb(100, 100, 100, 0.5);\n  }\n}\n\ndialog header > :first-child {\n  /* This is the title slot*/\n  flex-grow: 1;\n  font-weight: var(--weight-light);\n  font-size: var(--scale-2);\n  font-family: var(--font-sans);\n  margin: 0;\n}\n\ndialog header {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--scale-0);\n  border-bottom-style: inset;\n  padding: 0 0 var(--scale-0) 0;\n}\n\ndialog > :last-child {\n  /* This is the content slot*/\n  display: block;\n  margin-top: var(--scale-3);\n}\n\nbutton#close {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: none;\n  font-size: var(--scale-3);\n  color: var(--color-grey-500);\n}\n\nbutton#close:hover {\n  color: var(--pos-secondary-border-color);\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes slideIn {\n  from {\n    opacity: 0;\n    transform: translateY(-20px) scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n","import { Component, Host, h, Method } from '@stencil/core';\n\n/**\n * Styled wrapper around native dialog element, with slots `title` and `content`\n */\n@Component({\n  tag: 'pos-dialog',\n  styleUrl: 'pos-dialog.css',\n  shadow: false, // shadow dom prevents the html dialog from working normally (autofocus, close on submit)\n})\nexport class PosDialog {\n  private dialog: HTMLDialogElement;\n\n  @Method()\n  async showModal() {\n    this.dialog.showModal();\n  }\n\n  @Method()\n  async close() {\n    this.dialog.close();\n  }\n\n  render() {\n    return (\n      <Host>\n        <dialog ref={el => (this.dialog = el as HTMLDialogElement)}>\n          <header>\n            <slot name=\"title\" />\n            <button tabindex={-1} id=\"close\" title=\"Close\" onClick={() => this.close()}>\n              <ion-icon name=\"close-outline\"></ion-icon>\n            </button>\n          </header>\n          <slot name=\"content\" />\n        </dialog>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/pos-document2.js

@@ -4,7 +4,7 @@ import { B as BrokenFile } from './BrokenFile.js';
 import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './skeleton-text.js';
 
-const posDocumentCss = "iframe{width:100%;height:100vh}.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 );flex-direction:column;border:1px solid red;color:black;align-items:center;justify-content:center;word-break:break-all;padding:1rem;box-sizing:border-box}.error ion-icon{color:#282828;--ionicon-stroke-width:calc(var(--width) / 5);font-size:calc(var(--width) / 2)}a{text-decoration:none;width:var(--width);height:var(--height)}.code{font-weight:bold;font-size:calc(var(--width) / 8)}.text{font-size:calc(var(--width) / 20)}";
+const posDocumentCss = "iframe{background-color:white;width:100%;height:100vh}.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);flex-direction:column;border:1px solid red;color:black;align-items:center;justify-content:center;word-break:break-all;padding:1rem;box-sizing:border-box}.error ion-icon{color:#282828;--ionicon-stroke-width:calc(var(--width) / 5);font-size:calc(var(--width) / 2)}a{text-decoration:none;width:var(--width);height:var(--height)}.code{font-weight:bold;font-size:calc(var(--width) / 8)}.text{font-size:calc(var(--width) / 20)}";
 const PosDocumentStyle0 = posDocumentCss;
 
 const PosDocument = /*@__PURE__*/ proxyCustomElement(class PosDocument extends HTMLElement {

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

@@ -1 +1 @@
-{"file":"pos-document2.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,2lBAA2lB,CAAC;AACnnB,0BAAe,cAAc;;MCShB,WAAW;IALxB;;;;;;QAsBU,YAAO,GAAY,IAAI,CAAC;QAchC,UAAK,GAAG,OAAO,EAAS;YACtB,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;SACd,CAAC;KAkCH;IAzCC,iBAAiB;QACfA,KAAO,CAAC,QAAQ,CAAC,YAAY,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;QACvD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC3C;IAQD,MAAM,SAAS;QACb,IAAI;YACF,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC/C,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC1C,IAAI,IAAI,CAAC,IAAI,EAAE,EAAE;gBACf,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;gBAChD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;aACnB;iBAAM;gBACL,IAAI,CAAC,UAAU,GAAG,IAAsB,CAAC;aAC1C;SACF;QAAC,OAAO,GAAG,EAAE;YACZ,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;SAClB;gBAAS;YACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;SACtB;KACF;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,OAAO,yBAAmB,QAAQ,EAAE,IAAI,GAAsB,CAAC;SAChE;QACD,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,OAAO,WAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAO,CAAC;SACtD;QACD,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,OAAO,EAAC,UAAU,IAAC,IAAI,EAAE,IAAI,CAAC,UAAU,GAAI,CAAC;SAC9C;QACD,OAAO,cAAQ,GAAG,EAAE,IAAI,CAAC,OAAO,GAAW,CAAC;KAC7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["session"],"sources":["src/components/pos-document/pos-document.css?tag=pos-document&encapsulation=shadow","src/components/pos-document/pos-document.tsx"],"sourcesContent":["\n:host {\n}\n\niframe {\n  width: 100%;\n  height: 100vh;\n}\n\n/* consolidate with styles from pos-image */\n.error {\n  display: flex;\n  opacity: 0.8;\n  background: repeating-linear-gradient( -45deg, rgba(150, 0, 0, 0.1), rgba(150, 0, 0, 0.1) 10px, #fff 5px, #fff 25px );\n  flex-direction: column;\n  border: 1px solid red;\n  color: black;\n  align-items: center;\n  justify-content: center;\n  word-break: break-all;\n  padding: 1rem;\n  box-sizing: border-box;\n}\n\n.error ion-icon {\n  color: #282828;\n  --ionicon-stroke-width: calc(var(--width) / 5) ;\n  font-size: calc(var(--width) / 2)\n}\n\na {\n  text-decoration: none;\n  width: var(--width);\n  height: var(--height);\n}\n\n.code {\n  font-weight: bold;\n  font-size: calc(var(--width) / 8);\n}\n\n.text {\n  font-size: calc(var(--width) / 20)\n}\n","import { PodOS, BrokenFile as BrokenFileData } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport session from '../../store/session';\nimport { BrokenFile } from '../broken-file/BrokenFile';\n\n@Component({\n  tag: 'pos-document',\n  styleUrl: 'pos-document.css',\n  shadow: true,\n})\nexport class PosDocument {\n  @Prop() src: string;\n\n  @Prop() alt: string;\n\n  @State() os: PodOS;\n\n  @State()\n  private dataUri: string;\n\n  @State()\n  private brokenFile: BrokenFileData;\n\n  @State()\n  private error: Error;\n\n  @State()\n  private loading: boolean = true;\n\n  @Event({ eventName: 'pod-os:init' }) initializeOsEmitter: EventEmitter;\n\n  /**\n   * Indicates that the resource given in `src` property has been loaded.\n   */\n  @Event({ eventName: 'pod-os:resource-loaded' }) resourceLoadedEmitter: EventEmitter<string>;\n\n  componentWillLoad() {\n    session.onChange('isLoggedIn', () => this.fetchBlob());\n    this.initializeOsEmitter.emit(this.setOs);\n  }\n\n  setOs = async (os: PodOS) => {\n    this.os = os;\n  };\n\n  @Watch('os')\n  @Watch('src')\n  async fetchBlob() {\n    try {\n      this.loading = true;\n      const file = await this.os.fetchFile(this.src);\n      this.resourceLoadedEmitter.emit(this.src);\n      if (file.blob()) {\n        this.dataUri = URL.createObjectURL(file.blob());\n        this.error = null;\n      } else {\n        this.brokenFile = file as BrokenFileData;\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-skeleton-text animated={true}></ion-skeleton-text>;\n    }\n    if (this.error) {\n      return <div class=\"error\">{this.error.message}</div>;\n    }\n    if (this.brokenFile) {\n      return <BrokenFile file={this.brokenFile} />;\n    }\n    return <iframe src={this.dataUri}></iframe>;\n  }\n}\n"],"version":3}
+{"file":"pos-document2.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,gnBAAgnB,CAAC;AACxoB,0BAAe,cAAc;;MCShB,WAAW;IALxB;;;;;;QAsBU,YAAO,GAAY,IAAI,CAAC;QAchC,UAAK,GAAG,OAAO,EAAS;YACtB,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;SACd,CAAC;KAkCH;IAzCC,iBAAiB;QACfA,KAAO,CAAC,QAAQ,CAAC,YAAY,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;QACvD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC3C;IAQD,MAAM,SAAS;QACb,IAAI;YACF,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC/C,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC1C,IAAI,IAAI,CAAC,IAAI,EAAE,EAAE;gBACf,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;gBAChD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;aACnB;iBAAM;gBACL,IAAI,CAAC,UAAU,GAAG,IAAsB,CAAC;aAC1C;SACF;QAAC,OAAO,GAAG,EAAE;YACZ,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;SAClB;gBAAS;YACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;SACtB;KACF;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,OAAO,yBAAmB,QAAQ,EAAE,IAAI,GAAsB,CAAC;SAChE;QACD,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,OAAO,WAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAO,CAAC;SACtD;QACD,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,OAAO,EAAC,UAAU,IAAC,IAAI,EAAE,IAAI,CAAC,UAAU,GAAI,CAAC;SAC9C;QACD,OAAO,cAAQ,GAAG,EAAE,IAAI,CAAC,OAAO,GAAW,CAAC;KAC7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["session"],"sources":["src/components/pos-document/pos-document.css?tag=pos-document&encapsulation=shadow","src/components/pos-document/pos-document.tsx"],"sourcesContent":["iframe {\n  background-color: white;\n  width: 100%;\n  height: 100vh;\n}\n\n/* consolidate with styles from pos-image */\n.error {\n  display: flex;\n  opacity: 0.8;\n  background: repeating-linear-gradient(-45deg, rgba(150, 0, 0, 0.1), rgba(150, 0, 0, 0.1) 10px, #fff 5px, #fff 25px);\n  flex-direction: column;\n  border: 1px solid red;\n  color: black;\n  align-items: center;\n  justify-content: center;\n  word-break: break-all;\n  padding: 1rem;\n  box-sizing: border-box;\n}\n\n.error ion-icon {\n  color: #282828;\n  --ionicon-stroke-width: calc(var(--width) / 5);\n  font-size: calc(var(--width) / 2);\n}\n\na {\n  text-decoration: none;\n  width: var(--width);\n  height: var(--height);\n}\n\n.code {\n  font-weight: bold;\n  font-size: calc(var(--width) / 8);\n}\n\n.text {\n  font-size: calc(var(--width) / 20);\n}\n","import { PodOS, BrokenFile as BrokenFileData } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport session from '../../store/session';\nimport { BrokenFile } from '../broken-file/BrokenFile';\n\n@Component({\n  tag: 'pos-document',\n  styleUrl: 'pos-document.css',\n  shadow: true,\n})\nexport class PosDocument {\n  @Prop() src: string;\n\n  @Prop() alt: string;\n\n  @State() os: PodOS;\n\n  @State()\n  private dataUri: string;\n\n  @State()\n  private brokenFile: BrokenFileData;\n\n  @State()\n  private error: Error;\n\n  @State()\n  private loading: boolean = true;\n\n  @Event({ eventName: 'pod-os:init' }) initializeOsEmitter: EventEmitter;\n\n  /**\n   * Indicates that the resource given in `src` property has been loaded.\n   */\n  @Event({ eventName: 'pod-os:resource-loaded' }) resourceLoadedEmitter: EventEmitter<string>;\n\n  componentWillLoad() {\n    session.onChange('isLoggedIn', () => this.fetchBlob());\n    this.initializeOsEmitter.emit(this.setOs);\n  }\n\n  setOs = async (os: PodOS) => {\n    this.os = os;\n  };\n\n  @Watch('os')\n  @Watch('src')\n  async fetchBlob() {\n    try {\n      this.loading = true;\n      const file = await this.os.fetchFile(this.src);\n      this.resourceLoadedEmitter.emit(this.src);\n      if (file.blob()) {\n        this.dataUri = URL.createObjectURL(file.blob());\n        this.error = null;\n      } else {\n        this.brokenFile = file as BrokenFileData;\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-skeleton-text animated={true}></ion-skeleton-text>;\n    }\n    if (this.error) {\n      return <div class=\"error\">{this.error.message}</div>;\n    }\n    if (this.brokenFile) {\n      return <BrokenFile file={this.brokenFile} />;\n    }\n    return <iframe src={this.dataUri}></iframe>;\n  }\n}\n"],"version":3}

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

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

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

@@ -9,7 +9,7 @@ import { d as defineCustomElement$3 } from './pos-label2.js';
 import { d as defineCustomElement$2 } from './pos-resource2.js';
 import { d as defineCustomElement$1 } from './pos-rich-link2.js';
 
-const posExampleResourcesCss = ":host{border:var(--size-px) solid var(--color-grey-100);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--size-8);max-width:var(--size-96);background:var(--color-white)}.links{display:flex;flex-direction:column;gap:var(--size-3);max-width:80vw}";
+const posExampleResourcesCss = ":host{border:var(--size-px) solid var(--pos-border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--size-8);max-width:var(--size-96);background:var(--pos-card-background)}.links{display:flex;flex-direction:column;gap:var(--size-3);max-width:80vw}";
 const PosExampleResourcesStyle0 = posExampleResourcesCss;
 
 const PosExampleResources = /*@__PURE__*/ proxyCustomElement(class PosExampleResources extends HTMLElement {

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

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

package/dist/components/pos-getting-started2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const posGettingStartedCss = ":host{border:var(--size-px) solid var(--color-grey-100);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--size-8);max-width:var(--size-96);background:var(--color-white)}.question{font-weight:var(--weight-semibold);color:var(--color-grey-900)}a{font-weight:var(--weight-bold);color:var(--pos-primary-color)}";
+const posGettingStartedCss = ":host{border:var(--size-px) solid var(--pos-border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--size-8);max-width:var(--size-96);background:var(--pos-card-background)}.question{font-weight:var(--weight-semibold)}a{font-weight:var(--weight-bold);color:var(--pos-primary-color)}";
 const PosGettingStartedStyle0 = posGettingStartedCss;
 
 const PosGettingStarted = /*@__PURE__*/ proxyCustomElement(class PosGettingStarted extends HTMLElement {

package/dist/components/pos-getting-started2.js.map

@@ -1 +1 @@
-{"file":"pos-getting-started2.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,2UAA2U,CAAC;AACzW,gCAAe,oBAAoB;;MCMtB,iBAAiB;;;;;;IAC5B,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DACE,4FAA2B,EAC3B,yJAAuF,EACvF,wKAAsG,CAClG,EACN,8DACE,0DAAG,KAAK,EAAC,UAAU,oBAAkB,EACrC,4DACE,0DAAG,IAAI,EAAC,6DAA6D,uBAAqB,CACxF,CACA,EACN,8DACE,0DAAG,KAAK,EAAC,UAAU,qCAAmC,EACtD,4DACE,0DAAG,IAAI,EAAC,mBAAmB,wBAAsB,CAC/C,CACA,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/apps/pos-app-dashboard/pos-getting-started/pos-getting-started.css?tag=pos-getting-started&encapsulation=shadow","src/apps/pos-app-dashboard/pos-getting-started/pos-getting-started.tsx"],"sourcesContent":[":host {\n  border: var(--size-px) solid var(--color-grey-100);\n  border-radius: var(--radius-lg);\n  box-shadow: var(--shadow-md);\n  padding: var(--size-8);\n  max-width: var(--size-96);\n  background: var(--color-white);\n}\n\n.question {\n  font-weight: var(--weight-semibold);\n  color: var(--color-grey-900);\n}\n\na {\n  font-weight: var(--weight-bold);\n  color: var(--pos-primary-color);\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'pos-getting-started',\n  styleUrl: 'pos-getting-started.css',\n  shadow: true,\n})\nexport class PosGettingStarted {\n  render() {\n    return (\n      <Host>\n        <div>\n          <h2>Getting started 🚀</h2>\n          <p>🔎 Enter a URL into the above navigation bar to browse through the web of data. </p>\n          <p>🔐 Sign in to access private resources on your Solid Pod or those of your friends or coworkers.</p>\n        </div>\n        <div>\n          <p class=\"question\">New to Solid?</p>\n          <p>\n            <a href=\"https://solidproject.org/for-developers#hosted-pod-services\">Get a Pod &rarr;</a>\n          </p>\n        </div>\n        <div>\n          <p class=\"question\">Want to dig deeper into PodOS?</p>\n          <p>\n            <a href=\"http://pod-os.org\">Learn more &rarr;</a>\n          </p>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pos-getting-started2.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,yTAAyT,CAAC;AACvV,gCAAe,oBAAoB;;MCMtB,iBAAiB;;;;;;IAC5B,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DACE,4FAA2B,EAC3B,yJAAuF,EACvF,wKAAsG,CAClG,EACN,8DACE,0DAAG,KAAK,EAAC,UAAU,oBAAkB,EACrC,4DACE,0DAAG,IAAI,EAAC,6DAA6D,uBAAqB,CACxF,CACA,EACN,8DACE,0DAAG,KAAK,EAAC,UAAU,qCAAmC,EACtD,4DACE,0DAAG,IAAI,EAAC,mBAAmB,wBAAsB,CAC/C,CACA,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/apps/pos-app-dashboard/pos-getting-started/pos-getting-started.css?tag=pos-getting-started&encapsulation=shadow","src/apps/pos-app-dashboard/pos-getting-started/pos-getting-started.tsx"],"sourcesContent":[":host {\n  border: var(--size-px) solid var(--pos-border-color);\n  border-radius: var(--radius-lg);\n  box-shadow: var(--shadow-md);\n  padding: var(--size-8);\n  max-width: var(--size-96);\n  background: var(--pos-card-background);\n}\n\n.question {\n  font-weight: var(--weight-semibold);\n}\n\na {\n  font-weight: var(--weight-bold);\n  color: var(--pos-primary-color);\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'pos-getting-started',\n  styleUrl: 'pos-getting-started.css',\n  shadow: true,\n})\nexport class PosGettingStarted {\n  render() {\n    return (\n      <Host>\n        <div>\n          <h2>Getting started 🚀</h2>\n          <p>🔎 Enter a URL into the above navigation bar to browse through the web of data. </p>\n          <p>🔐 Sign in to access private resources on your Solid Pod or those of your friends or coworkers.</p>\n        </div>\n        <div>\n          <p class=\"question\">New to Solid?</p>\n          <p>\n            <a href=\"https://solidproject.org/for-developers#hosted-pod-services\">Get a Pod &rarr;</a>\n          </p>\n        </div>\n        <div>\n          <p class=\"question\">Want to dig deeper into PodOS?</p>\n          <p>\n            <a href=\"http://pod-os.org\">Learn more &rarr;</a>\n          </p>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/pos-literals2.js

@@ -1,12 +1,11 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { s as subscribeResource } from './ResourceAware.js';
-import { d as defineCustomElement$5 } from './icon.js';
-import { d as defineCustomElement$4 } from './input.js';
+import { d as defineCustomElement$4 } from './icon.js';
 import { d as defineCustomElement$3 } from './pos-add-literal-value2.js';
 import { d as defineCustomElement$2 } from './pos-predicate2.js';
 import { d as defineCustomElement$1 } from './pos-select-term2.js';
 
-const posLiteralsCss = ":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  padding: 0;\n  margin: 0;\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-2);\n  }\n}\n";
+const posLiteralsCss = ":host {\n  --background-base-color: color-mix(in srgb, var(--pos-background-color), var(--color-grey-800) 10%);\n  --background-color-even: hsl(from var(--background-base-color) h s calc(l + 7));\n  --background-color-odd: hsl(from var(--background-base-color) h s calc(l + 10));\n  --border-color: var(--background-base-color);\n}\n\ndd {\n  padding: 0;\n  margin: 0;\n}\n\ndl {\n  padding: 0;\n  margin: 0;\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-2);\n  }\n}\n";
 const PosLiteralsStyle0 = posLiteralsCss;
 
 const PosLiterals = /*@__PURE__*/ proxyCustomElement(class PosLiterals extends HTMLElement {
@@ -41,7 +40,7 @@ const PosLiterals = /*@__PURE__*/ proxyCustomElement(class PosLiterals extends H
         }
     }
     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: '571f571381d9a9c4bcf0188a782c46485266a3d8' }, this.data.length > 0 ? (h("dl", null, this.data.map(it => (h("div", { class: "predicate-values" }, h("dt", null, h("pos-predicate", { uri: it.predicate, label: it.label })), h("div", { class: "values" }, it.values.map(value => (h("dd", null, value))))))))) : null, h("pos-add-literal-value", { key: 'e1b58aba48a56e60ec8bb1087f054972bb2c437c', "onPod-os:added-literal-value": event => this.literalValueAdded(event.detail) })));
     }
     static get style() { return PosLiteralsStyle0; }
 }, [1, "pos-literals", {
@@ -51,7 +50,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-literals", "ion-icon", "ion-input", "pos-add-literal-value", "pos-predicate", "pos-select-term"];
+    const components = ["pos-literals", "ion-icon", "pos-add-literal-value", "pos-predicate", "pos-select-term"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-literals":
             if (!customElements.get(tagName)) {
@@ -59,11 +58,6 @@ function defineCustomElement() {
             }
             break;
         case "ion-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "ion-input":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }

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

@@ -1 +1 @@
-{"file":"pos-literals2.js","mappings":";;;;;;;;AAAA,MAAM,cAAc,GAAG,85BAA85B,CAAC;AACt7B,0BAAe,cAAc;;MCQhB,WAAW;IALxB;;;;;QAMW,SAAI,GAAc,EAAE,CAAC;QAS9B,oBAAe,GAAG,CAAC,QAAe;YAChC,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,QAAQ,EAAE,CAAC;SACjC,CAAC;KA2CH;IAjDC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;KACzB;IAMD,iBAAiB,CAAC,UAAmB;QACnC,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,SAAS,KAAK,UAAU,CAAC,SAAS,CAAC,CAAC;QAE7E,IAAI,CAAC,QAAQ,EAAE;YACb,IAAI,CAAC,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;SACxC;aAAM;YACL,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE;gBAC1B,OAAO,EAAE,CAAC,SAAS,KAAK,QAAQ,CAAC,SAAS;sBACtC;wBACE,SAAS,EAAE,QAAQ,CAAC,SAAS;wBAC7B,KAAK,EAAE,QAAQ,CAAC,KAAK;wBACrB,MAAM,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,GAAG,UAAU,CAAC,MAAM,CAAC;qBACnD;sBACD,EAAE,CAAC;aACR,CAAC,CAAC;SACJ;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACF,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,IACnB,cACG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,KACf,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,MAAM,CAAC,GAAG,CAAC,KAAK,KAClB,cAAK,KAAK,CAAM,CACjB,CAAC,CACE,CACF,CACP,CAAC,CACC,IACH,IAAI,EACR,8GAAqD,KAAK,IAAI,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,MAAM,CAAC,GAAI,CACjG,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-literals/pos-literals.css?tag=pos-literals&encapsulation=shadow","src/components/pos-literals/pos-literals.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  padding: 0;\n  margin: 0;\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-2);\n  }\n}\n","import { Literal, Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Host, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../events/ResourceAware';\n\n@Component({\n  tag: 'pos-literals',\n  styleUrl: './pos-literals.css',\n  shadow: true,\n})\nexport class PosLiterals implements ResourceAware {\n  @State() data: Literal[] = [];\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.literals();\n  };\n\n  literalValueAdded(newLiteral: Literal) {\n    const existing = this.data.find(it => it.predicate === newLiteral.predicate);\n\n    if (!existing) {\n      this.data = [...this.data, newLiteral];\n    } else {\n      this.data = this.data.map(it => {\n        return it.predicate === existing.predicate\n          ? {\n              predicate: existing.predicate,\n              label: existing.label,\n              values: [...existing.values, ...newLiteral.values],\n            }\n          : it;\n      });\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.data.length > 0 ? (\n          <dl>\n            {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.values.map(value => (\n                    <dd>{value}</dd>\n                  ))}\n                </div>\n              </div>\n            ))}\n          </dl>\n        ) : null}\n        <pos-add-literal-value onPod-os:added-literal-value={event => this.literalValueAdded(event.detail)} />\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pos-literals2.js","mappings":";;;;;;;AAAA,MAAM,cAAc,GAAG,m9BAAm9B,CAAC;AAC3+B,0BAAe,cAAc;;MCQhB,WAAW;IALxB;;;;;QAMW,SAAI,GAAc,EAAE,CAAC;QAS9B,oBAAe,GAAG,CAAC,QAAe;YAChC,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,QAAQ,EAAE,CAAC;SACjC,CAAC;KA2CH;IAjDC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;KACzB;IAMD,iBAAiB,CAAC,UAAmB;QACnC,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,SAAS,KAAK,UAAU,CAAC,SAAS,CAAC,CAAC;QAE7E,IAAI,CAAC,QAAQ,EAAE;YACb,IAAI,CAAC,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;SACxC;aAAM;YACL,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE;gBAC1B,OAAO,EAAE,CAAC,SAAS,KAAK,QAAQ,CAAC,SAAS;sBACtC;wBACE,SAAS,EAAE,QAAQ,CAAC,SAAS;wBAC7B,KAAK,EAAE,QAAQ,CAAC,KAAK;wBACrB,MAAM,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,GAAG,UAAU,CAAC,MAAM,CAAC;qBACnD;sBACD,EAAE,CAAC;aACR,CAAC,CAAC;SACJ;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACF,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,IACnB,cACG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,KACf,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,MAAM,CAAC,GAAG,CAAC,KAAK,KAClB,cAAK,KAAK,CAAM,CACjB,CAAC,CACE,CACF,CACP,CAAC,CACC,IACH,IAAI,EACR,8GAAqD,KAAK,IAAI,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,MAAM,CAAC,GAAI,CACjG,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-literals/pos-literals.css?tag=pos-literals&encapsulation=shadow","src/components/pos-literals/pos-literals.tsx"],"sourcesContent":[":host {\n  --background-base-color: color-mix(in srgb, var(--pos-background-color), var(--color-grey-800) 10%);\n  --background-color-even: hsl(from var(--background-base-color) h s calc(l + 7));\n  --background-color-odd: hsl(from var(--background-base-color) h s calc(l + 10));\n  --border-color: var(--background-base-color);\n}\n\ndd {\n  padding: 0;\n  margin: 0;\n}\n\ndl {\n  padding: 0;\n  margin: 0;\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-2);\n  }\n}\n","import { Literal, Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Host, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../events/ResourceAware';\n\n@Component({\n  tag: 'pos-literals',\n  styleUrl: './pos-literals.css',\n  shadow: true,\n})\nexport class PosLiterals implements ResourceAware {\n  @State() data: Literal[] = [];\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.literals();\n  };\n\n  literalValueAdded(newLiteral: Literal) {\n    const existing = this.data.find(it => it.predicate === newLiteral.predicate);\n\n    if (!existing) {\n      this.data = [...this.data, newLiteral];\n    } else {\n      this.data = this.data.map(it => {\n        return it.predicate === existing.predicate\n          ? {\n              predicate: existing.predicate,\n              label: existing.label,\n              values: [...existing.values, ...newLiteral.values],\n            }\n          : it;\n      });\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.data.length > 0 ? (\n          <dl>\n            {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.values.map(value => (\n                    <dd>{value}</dd>\n                  ))}\n                </div>\n              </div>\n            ))}\n          </dl>\n        ) : null}\n        <pos-add-literal-value onPod-os:added-literal-value={event => this.literalValueAdded(event.detail)} />\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 
-const posLoginFormCss = ":host{display:block;margin:0}form{display:flex;flex-direction:column;gap:var(--size-4)}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}input:focus-within{outline:var(--pos-input-focus-outline)}input#login{outline:none;box-shadow:var(--shadow-sm);cursor:pointer;color:var(--pos-primary-text-color);background-color:var(--pos-primary-color)}input#login:disabled{cursor:default;color:var(--pos-disabled-text-color);background-color:var(--pos-disabled-color);box-shadow:none}input#login:hover:not(:disabled),input#login:focus{filter:brightness(110%);box-shadow:var(--shadow-md)}";
+const posLoginFormCss = ":host{display:block;margin:0}form{display:flex;flex-direction:column;gap:var(--size-4)}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{outline:var(--pos-input-focus-outline)}input#login{outline:none;box-shadow:var(--shadow-sm);cursor:pointer;color:var(--pos-primary-text-color);background-color:var(--pos-primary-color)}input#login:disabled{cursor:default;color:var(--pos-disabled-text-color);background-color:var(--pos-disabled-color);box-shadow:none}input#login:hover:not(:disabled),input#login:focus{filter:brightness(110%);box-shadow:var(--shadow-md)}";
 const PosLoginFormStyle0 = posLoginFormCss;
 
 const PosLoginForm = /*@__PURE__*/ proxyCustomElement(class PosLoginForm extends HTMLElement {
@@ -16,7 +16,7 @@ const PosLoginForm = /*@__PURE__*/ proxyCustomElement(class PosLoginForm extends
         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: '6c54aa03972bf5af3779c1e3f874b99574232821', method: "dialog", onSubmit: () => this.handleSubmit() }, h("label", { key: 'a5def7569abeb0a2591886d48fa0deb2c7f6039c', htmlFor: "idpUrl" }, "Please enter your Identity Provider"), h("input", { key: '1da8575dccea9a777f00cb8a7f96435654a582bc', id: "idpUrl", type: "url", value: this.idpUrl, required: true, onInput: e => this.handleChange(e), list: "suggestedIssuers", placeholder: "Type to search..." }), h("datalist", { key: '1818988df2f8a825194eb3503979d6c6adac3619', id: "suggestedIssuers" }, h("option", { key: '25e1b3fd84610e0664c25c3ca9cd535bf7558357', value: "https://solidcommunity.net" }, "solidcommunity.net"), h("option", { key: '5635e434dc4bf406a3664cf5cb28489b5b9218fc', value: "https://solidweb.org" }, "solidweb.org"), h("option", { key: 'd4d301023b40f84b5f445d14290ef3bc589cff56', value: "https://solidweb.me" }, "solidweb.me"), h("option", { key: '39f968af206347c83e4271724e9090543fcec43e', value: "https://inrupt.net" }, "inrupt.net"), h("option", { key: '381767d06a60e16b9323cb15b4298db2eac71d82', value: "https://login.inrupt.com" }, "Inrupt PodSpaces"), h("option", { key: 'd4461d0bb2bfba0ec97f276951b6534dee1ffd51', value: "https://trinpod.us" }, "trinpod.us"), h("option", { key: '80aa0ef7de3ec8dd53d06402c116a6c97747a24f', value: "https://use.id" }, "use.id"), h("option", { key: '794bee3c5a2b29738f25bb67bfb918754fe016ef', value: "https://solid.redpencil.io" }, "redpencil.io"), h("option", { key: '88e27225e7252c90bfb24f21a72bd70c9e3408f4', value: "https://datapod.grant.io" }, "Data Pod (grant.io)"), h("option", { key: '033b75773e898b4fed2507c5064686fb0ad56e03', value: "https://teamid.live" }, "teamid.live")), h("input", { key: 'c8dc41c5d6a892e623d42f5b1839af2728929abd', id: "login", type: "submit", value: "Login", disabled: !this.canSubmit })));
     }
     handleChange(event) {
         this.validate();

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

@@ -1 +1 @@
-{"file":"pos-login-form2.js","mappings":";;AAAA,MAAM,eAAe,GAAG,wqBAAwqB,CAAC;AACjsB,2BAAe,eAAe;;MCQjB,YAAY;IAPzB;;;;;QAQW,WAAM,GAAW,EAAE,CAAC;QAEpB,cAAS,GAAY,KAAK,CAAC;KAkDrC;IA1CC,QAAQ;QACN,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACvC;IAED,MAAM;QACJ,QACE,6DAAM,MAAM,EAAC,QAAQ,EAAC,QAAQ,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,IACvD,8DAAO,OAAO,EAAC,QAAQ,0CAA4C,EACnE,8DACE,EAAE,EAAC,QAAQ,EACX,IAAI,EAAC,KAAK,EACV,KAAK,EAAE,IAAI,CAAC,MAAM,EAClB,QAAQ,EAAE,IAAI,EACd,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAClC,IAAI,EAAC,kBAAkB,EACvB,WAAW,EAAC,mBAAmB,GAC/B,EACF,iEAAU,EAAE,EAAC,kBAAkB,IAC7B,+DAAQ,KAAK,EAAC,4BAA4B,yBAA4B,EACtE,+DAAQ,KAAK,EAAC,sBAAsB,mBAAsB,EAC1D,+DAAQ,KAAK,EAAC,qBAAqB,kBAAqB,EACxD,+DAAQ,KAAK,EAAC,oBAAoB,iBAAoB,EACtD,+DAAQ,KAAK,EAAC,0BAA0B,uBAA0B,EAClE,+DAAQ,KAAK,EAAC,oBAAoB,iBAAoB,EACtD,+DAAQ,KAAK,EAAC,gBAAgB,aAAgB,EAC9C,+DAAQ,KAAK,EAAC,4BAA4B,mBAAsB,EAChE,+DAAQ,KAAK,EAAC,0BAA0B,0BAA6B,EACrE,+DAAQ,KAAK,EAAC,qBAAqB,kBAAqB,CAC/C,EACX,8DAAO,EAAE,EAAC,OAAO,EAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,OAAO,EAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,SAAS,GAAI,CACtE,EACP;KACH;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;KAClC;IAED,MAAM,YAAY;QAChB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-login-form/pos-login-form.css?tag=pos-login-form&encapsulation=shadow","src/components/pos-login-form/pos-login-form.tsx"],"sourcesContent":[":host {\n  display: block;\n  margin: 0\n}\n\nform {\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-4);\n}\n\ninput {\n  outline: var(--pos-input-outline);\n  padding: var(--scale-000);\n  border: none;\n  border-radius: var(--radius-xs);\n  width: var(--size-full);\n  box-sizing: border-box;\n}\n\ninput:focus-within {\n  outline: var(--pos-input-focus-outline);\n}\n\ninput#login {\n  outline: none;\n  box-shadow: var(--shadow-sm);\n  cursor: pointer;\n  color: var(--pos-primary-text-color);\n  background-color: var(--pos-primary-color);\n}\n\ninput#login:disabled {\n  cursor: default;\n  color: var(--pos-disabled-text-color);\n  background-color: var(--pos-disabled-color);\n  box-shadow: none\n}\n\ninput#login:hover:not(:disabled), input#login:focus {\n  filter: brightness(110%);\n  box-shadow: var(--shadow-md);\n}\n","import { Component, Event, EventEmitter, h, State, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'pos-login-form',\n  shadow: {\n    delegatesFocus: true,\n  },\n  styleUrl: 'pos-login-form.css',\n})\nexport class PosLoginForm {\n  @State() idpUrl: string = '';\n\n  @State() canSubmit: boolean = false;\n\n  /**\n   * Emits the selected IDP URL to use for login\n   */\n  @Event({ eventName: 'pod-os:idp-url-selected' }) idpUrlSelected: EventEmitter;\n\n  @Watch('idpUrl')\n  validate() {\n    this.canSubmit = Boolean(this.idpUrl);\n  }\n\n  render(): any {\n    return (\n      <form method=\"dialog\" onSubmit={() => this.handleSubmit()}>\n        <label htmlFor=\"idpUrl\">Please enter your Identity Provider</label>\n        <input\n          id=\"idpUrl\"\n          type=\"url\"\n          value={this.idpUrl}\n          required={true}\n          onInput={e => this.handleChange(e)}\n          list=\"suggestedIssuers\"\n          placeholder=\"Type to search...\"\n        />\n        <datalist id=\"suggestedIssuers\">\n          <option value=\"https://solidcommunity.net\">solidcommunity.net</option>\n          <option value=\"https://solidweb.org\">solidweb.org</option>\n          <option value=\"https://solidweb.me\">solidweb.me</option>\n          <option value=\"https://inrupt.net\">inrupt.net</option>\n          <option value=\"https://login.inrupt.com\">Inrupt PodSpaces</option>\n          <option value=\"https://trinpod.us\">trinpod.us</option>\n          <option value=\"https://use.id\">use.id</option>\n          <option value=\"https://solid.redpencil.io\">redpencil.io</option>\n          <option value=\"https://datapod.grant.io\">Data Pod (grant.io)</option>\n          <option value=\"https://teamid.live\">teamid.live</option>\n        </datalist>\n        <input id=\"login\" type=\"submit\" value=\"Login\" disabled={!this.canSubmit} />\n      </form>\n    );\n  }\n\n  handleChange(event) {\n    this.validate();\n    this.idpUrl = event.target.value;\n  }\n\n  async handleSubmit() {\n    this.idpUrlSelected.emit(this.idpUrl);\n  }\n}\n"],"version":3}
+{"file":"pos-login-form2.js","mappings":";;AAAA,MAAM,eAAe,GAAG,wvBAAwvB,CAAC;AACjxB,2BAAe,eAAe;;MCQjB,YAAY;IAPzB;;;;;QAQW,WAAM,GAAW,EAAE,CAAC;QAEpB,cAAS,GAAY,KAAK,CAAC;KAkDrC;IA1CC,QAAQ;QACN,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACvC;IAED,MAAM;QACJ,QACE,6DAAM,MAAM,EAAC,QAAQ,EAAC,QAAQ,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,IACvD,8DAAO,OAAO,EAAC,QAAQ,0CAA4C,EACnE,8DACE,EAAE,EAAC,QAAQ,EACX,IAAI,EAAC,KAAK,EACV,KAAK,EAAE,IAAI,CAAC,MAAM,EAClB,QAAQ,EAAE,IAAI,EACd,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAClC,IAAI,EAAC,kBAAkB,EACvB,WAAW,EAAC,mBAAmB,GAC/B,EACF,iEAAU,EAAE,EAAC,kBAAkB,IAC7B,+DAAQ,KAAK,EAAC,4BAA4B,yBAA4B,EACtE,+DAAQ,KAAK,EAAC,sBAAsB,mBAAsB,EAC1D,+DAAQ,KAAK,EAAC,qBAAqB,kBAAqB,EACxD,+DAAQ,KAAK,EAAC,oBAAoB,iBAAoB,EACtD,+DAAQ,KAAK,EAAC,0BAA0B,uBAA0B,EAClE,+DAAQ,KAAK,EAAC,oBAAoB,iBAAoB,EACtD,+DAAQ,KAAK,EAAC,gBAAgB,aAAgB,EAC9C,+DAAQ,KAAK,EAAC,4BAA4B,mBAAsB,EAChE,+DAAQ,KAAK,EAAC,0BAA0B,0BAA6B,EACrE,+DAAQ,KAAK,EAAC,qBAAqB,kBAAqB,CAC/C,EACX,8DAAO,EAAE,EAAC,OAAO,EAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,OAAO,EAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,SAAS,GAAI,CACtE,EACP;KACH;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;KAClC;IAED,MAAM,YAAY;QAChB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-login-form/pos-login-form.css?tag=pos-login-form&encapsulation=shadow","src/components/pos-login-form/pos-login-form.tsx"],"sourcesContent":[":host {\n  display: block;\n  margin: 0;\n}\n\nform {\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-4);\n}\n\ninput {\n  outline: var(--pos-input-outline);\n  padding: var(--scale-000);\n  border: none;\n  border-radius: var(--radius-xs);\n  width: var(--size-full);\n  box-sizing: border-box;\n  background: var(--pos-input-background-color);\n  color: var(--pos-normal-text-color);\n}\n\ninput:focus-within {\n  outline: var(--pos-input-focus-outline);\n}\n\ninput#login {\n  outline: none;\n  box-shadow: var(--shadow-sm);\n  cursor: pointer;\n  color: var(--pos-primary-text-color);\n  background-color: var(--pos-primary-color);\n}\n\ninput#login:disabled {\n  cursor: default;\n  color: var(--pos-disabled-text-color);\n  background-color: var(--pos-disabled-color);\n  box-shadow: none;\n}\n\ninput#login:hover:not(:disabled),\ninput#login:focus {\n  filter: brightness(110%);\n  box-shadow: var(--shadow-md);\n}\n","import { Component, Event, EventEmitter, h, State, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'pos-login-form',\n  shadow: {\n    delegatesFocus: true,\n  },\n  styleUrl: 'pos-login-form.css',\n})\nexport class PosLoginForm {\n  @State() idpUrl: string = '';\n\n  @State() canSubmit: boolean = false;\n\n  /**\n   * Emits the selected IDP URL to use for login\n   */\n  @Event({ eventName: 'pod-os:idp-url-selected' }) idpUrlSelected: EventEmitter;\n\n  @Watch('idpUrl')\n  validate() {\n    this.canSubmit = Boolean(this.idpUrl);\n  }\n\n  render(): any {\n    return (\n      <form method=\"dialog\" onSubmit={() => this.handleSubmit()}>\n        <label htmlFor=\"idpUrl\">Please enter your Identity Provider</label>\n        <input\n          id=\"idpUrl\"\n          type=\"url\"\n          value={this.idpUrl}\n          required={true}\n          onInput={e => this.handleChange(e)}\n          list=\"suggestedIssuers\"\n          placeholder=\"Type to search...\"\n        />\n        <datalist id=\"suggestedIssuers\">\n          <option value=\"https://solidcommunity.net\">solidcommunity.net</option>\n          <option value=\"https://solidweb.org\">solidweb.org</option>\n          <option value=\"https://solidweb.me\">solidweb.me</option>\n          <option value=\"https://inrupt.net\">inrupt.net</option>\n          <option value=\"https://login.inrupt.com\">Inrupt PodSpaces</option>\n          <option value=\"https://trinpod.us\">trinpod.us</option>\n          <option value=\"https://use.id\">use.id</option>\n          <option value=\"https://solid.redpencil.io\">redpencil.io</option>\n          <option value=\"https://datapod.grant.io\">Data Pod (grant.io)</option>\n          <option value=\"https://teamid.live\">teamid.live</option>\n        </datalist>\n        <input id=\"login\" type=\"submit\" value=\"Login\" disabled={!this.canSubmit} />\n      </form>\n    );\n  }\n\n  handleChange(event) {\n    this.validate();\n    this.idpUrl = event.target.value;\n  }\n\n  async handleSubmit() {\n    this.idpUrlSelected.emit(this.idpUrl);\n  }\n}\n"],"version":3}

package/dist/components/pos-login2.js

@@ -41,7 +41,7 @@ const PosLogin = /*@__PURE__*/ proxyCustomElement(class PosLogin extends HTMLEle
         this.dialog.showModal();
     }
     render() {
-        return (h(Host, { key: '246bea632b952b0a004e1237697a86bd0ebfeea4' }, h("div", { key: 'cdcb1905deb0d27f79adc4ed1eeae0adb47b37f6', class: "container" }, store.state.isLoggedIn ? (h("pos-resource", { uri: store.state.webId }, h("span", { class: "user-data" }, h("pos-picture", null), h("pos-label", null)))) : (''), !store.state.isLoggedIn && (h("button", { key: 'dc3a1072af920e9495a2e003c1e2edf8d282de29', id: "login", onClick: () => this.openDialog() }, "Login")), store.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: 'a4fffd431e401c0acba29cd336715b24fa2bed67' }, h("div", { key: '31aaebc9eeacbf274d72bb42f9bca15691bf1590', class: "container" }, store.state.isLoggedIn ? (h("pos-resource", { uri: store.state.webId }, h("span", { class: "user-data" }, h("pos-picture", null), h("pos-label", null)))) : (''), !store.state.isLoggedIn && (h("button", { key: '8680aa6b62740fea847d85e12e05573ba44e37ce', id: "login", onClick: () => this.openDialog() }, "Login")), store.state.isLoggedIn && (h("button", { key: '3f1af02cd8e77910d4469c1ab83a4fc844c3bae2', id: "logout", onClick: () => this.logout() }, "Logout"))), h("pos-dialog", { key: '732816c365ae37b144fd56c0146dd9970336dc2a', ref: el => (this.dialog = el) }, h("span", { key: '7598a5abff7af257779111cac31ee879eb47dfd4', slot: "title" }, "Sign in to your Pod"), h("pos-login-form", { key: 'cb1297076cf78aafad0dba1b5c111bf9c68e717b', "onPod-os:idp-url-selected": ev => this.login(ev), slot: "content" }))));
     }
     static get style() { return PosLoginStyle0; }
 }, [1, "pos-login", {

package/dist/components/pos-navigation-bar2.js

@@ -14,7 +14,7 @@ import { d as defineCustomElement$3 } from './pos-make-findable2.js';
 import { d as defineCustomElement$2 } from './pos-resource2.js';
 import { d as defineCustomElement$1 } from './pos-rich-link2.js';
 
-const posNavigationBarCss = ":host {\n}\n\n.suggestions ol {\n  border: 1px solid var(--color-grey-200);\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  margin: 0;\n  padding: 0;\n  z-index: var(--layer-top);\n  list-style-type: none;\n  box-shadow: var(--shadow-xl);\n}\n\n.suggestions {\n  position: relative;\n  li {\n    padding: 1rem;\n    background-color: white;\n    pos-rich-link {\n      --background-color: inherit;\n    }\n    &.selected {\n      background-color: var(--color-blue);\n      &:hover {\n        background-color: var(--color-blue-700);\n      }\n    }\n    &:hover {\n      background-color: var(--color-grey-200);\n    }\n  }\n}\n\n.suggestions li.selected pos-rich-link {\n  --label-color: white;\n  --description-color: var(--color-grey-200);\n  --uri-color: var(--color-grey-200);\n}\n\nion-searchbar {\n  width: 100%;\n}\n\nform {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.bar {\n  flex-grow: 1;\n}\n";
+const posNavigationBarCss = ".suggestions ol {\n  border: 1px solid var(--pos-border-color);\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  margin: 0;\n  padding: 0;\n  z-index: var(--layer-top);\n  list-style-type: none;\n  box-shadow: var(--shadow-xl);\n}\n\n.suggestions {\n  position: relative;\n  li {\n    padding: 1rem;\n    background-color: var(--pos-background-color);\n    pos-rich-link {\n      --background-color: inherit;\n    }\n    &.selected {\n      background-color: var(--pos-primary-color);\n      &:hover {\n        background-color: var(--pos-primary-color);\n      }\n    }\n    &:hover {\n      background-color: var(--pos-border-color);\n    }\n  }\n}\n\n.suggestions li.selected pos-rich-link {\n  --label-color: white;\n  --description-color: var(--pos-border-color);\n  --uri-color: var(--pos-subtle-text-color);\n}\n\nion-searchbar {\n  width: 100%;\n}\n\nform {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.bar {\n  flex-grow: 1;\n}\n";
 const PosNavigationBarStyle0 = posNavigationBarCss;
 
 const PosNavigationBar = /*@__PURE__*/ proxyCustomElement(class PosNavigationBar extends HTMLElement {
@@ -93,7 +93,7 @@ const PosNavigationBar = /*@__PURE__*/ proxyCustomElement(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: 'cafd872d1cd6a9a0493b6c05ad51ab080d59a4f4', onSubmit: e => this.onSubmit(e) }, this.searchIndex && this.uri ? h("pos-make-findable", { uri: this.uri }) : '', h("div", { key: '8c090ab0ed8b6cb579be0baf7c8129e41b1a5732', class: "bar" }, h("ion-searchbar", { key: '2b1070406dcf0548a5df9c9b226c933789bb1aa5', 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 style() { return PosNavigationBarStyle0; }
 }, [1, "pos-navigation-bar", {

package/dist/components/pos-navigation-bar2.js.map

@@ -1 +1 @@
-{"file":"pos-navigation-bar2.js","mappings":"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","names":["session"],"sources":["src/components/pos-navigation-bar/pos-navigation-bar.css?tag=pos-navigation-bar&encapsulation=shadow","src/components/pos-navigation-bar/pos-navigation-bar.tsx"],"sourcesContent":[":host {\n}\n\n.suggestions ol {\n  border: 1px solid var(--color-grey-200);\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  margin: 0;\n  padding: 0;\n  z-index: var(--layer-top);\n  list-style-type: none;\n  box-shadow: var(--shadow-xl);\n}\n\n.suggestions {\n  position: relative;\n  li {\n    padding: 1rem;\n    background-color: white;\n    pos-rich-link {\n      --background-color: inherit;\n    }\n    &.selected {\n      background-color: var(--color-blue);\n      &:hover {\n        background-color: var(--color-blue-700);\n      }\n    }\n    &:hover {\n      background-color: var(--color-grey-200);\n    }\n  }\n}\n\n.suggestions li.selected pos-rich-link {\n  --label-color: white;\n  --description-color: var(--color-grey-200);\n  --uri-color: var(--color-grey-200);\n}\n\nion-searchbar {\n  width: 100%;\n}\n\nform {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.bar {\n  flex-grow: 1;\n}\n","import { PodOS, SearchIndex } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Listen, Prop, State } from '@stencil/core';\n\nimport session from '../../store/session';\nimport { PodOsAware, PodOsEventEmitter, subscribePodOs } from '../events/PodOsAware';\n\n@Component({\n  tag: 'pos-navigation-bar',\n  shadow: true,\n  styleUrl: 'pos-navigation-bar.css',\n})\nexport class PosNavigationBar implements PodOsAware {\n  @State() os: PodOS;\n\n  @Event({ eventName: 'pod-os:init' }) subscribePodOs: PodOsEventEmitter;\n  @Prop() uri: string = '';\n\n  @State() value: string = this.uri;\n\n  @Event({ eventName: 'pod-os:link' }) linkEmitter: EventEmitter;\n\n  @State() searchIndex?: SearchIndex = undefined;\n\n  @State() suggestions = [];\n\n  @State() selectedIndex = -1;\n\n  componentWillLoad() {\n    subscribePodOs(this);\n    session.onChange('isLoggedIn', async isLoggedIn => {\n      if (isLoggedIn) {\n        await this.buildSearchIndex();\n      } else {\n        this.clearSearchIndex();\n      }\n    });\n  }\n\n  @Listen('pod-os:search:index-created')\n  private async buildSearchIndex() {\n    this.searchIndex = await this.os.buildSearchIndex(session.state.profile);\n  }\n\n  @Listen('pod-os:search:index-updated')\n  rebuildSearchIndex() {\n    this.searchIndex.rebuild();\n  }\n\n  private clearSearchIndex() {\n    this.searchIndex?.clear();\n  }\n\n  receivePodOs = async (os: PodOS) => {\n    this.os = os;\n  };\n\n  private onChange(event) {\n    this.value = event.detail.value;\n    this.search();\n  }\n\n  @Listen('click', { target: 'document' })\n  @Listen('pod-os:link')\n  clearSuggestions() {\n    this.suggestions = [];\n    this.selectedIndex = -1;\n  }\n\n  @Listen('click')\n  onClickSelf(event) {\n    event.stopPropagation();\n  }\n\n  @Listen('keydown')\n  handleKeyDown(ev: KeyboardEvent) {\n    if (ev.key === 'Escape') {\n      this.clearSuggestions();\n    } else if (ev.key === 'ArrowDown') {\n      ev.preventDefault();\n      this.selectedIndex = Math.min(this.selectedIndex + 1, this.suggestions.length - 1);\n    } else if (ev.key === 'ArrowUp') {\n      ev.preventDefault();\n      this.selectedIndex = Math.max(this.selectedIndex - 1, 0);\n    }\n  }\n\n  private search() {\n    if (this.searchIndex) {\n      this.suggestions = this.value ? this.searchIndex.search(this.value) : [];\n    }\n  }\n\n  private onSubmit(event) {\n    event.preventDefault();\n    if (this.suggestions && this.selectedIndex > -1) {\n      this.linkEmitter.emit(this.suggestions[this.selectedIndex].ref);\n    } else {\n      this.linkEmitter.emit(this.value);\n    }\n  }\n\n  render() {\n    return (\n      <form onSubmit={e => this.onSubmit(e)}>\n        {this.searchIndex && this.uri ? <pos-make-findable uri={this.uri}></pos-make-findable> : ''}\n        <div class=\"bar\">\n          <ion-searchbar\n            enterkeyhint=\"search\"\n            placeholder=\"Search or enter URI\"\n            value={this.uri}\n            debounce={300}\n            onIonChange={e => this.onChange(e)}\n            onIonInput={e => this.onChange(e)}\n          />\n          {this.suggestions.length > 0 ? (\n            <div class=\"suggestions\">\n              <ol>\n                {this.suggestions.map((it, index) => (\n                  <li class={index === this.selectedIndex ? 'selected' : ''}>\n                    <pos-rich-link uri={it.ref}></pos-rich-link>\n                  </li>\n                ))}\n              </ol>\n            </div>\n          ) : null}\n        </div>\n      </form>\n    );\n  }\n}\n"],"version":3}
+{"file":"pos-navigation-bar2.js","mappings":"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","names":["session"],"sources":["src/components/pos-navigation-bar/pos-navigation-bar.css?tag=pos-navigation-bar&encapsulation=shadow","src/components/pos-navigation-bar/pos-navigation-bar.tsx"],"sourcesContent":[".suggestions ol {\n  border: 1px solid var(--pos-border-color);\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  margin: 0;\n  padding: 0;\n  z-index: var(--layer-top);\n  list-style-type: none;\n  box-shadow: var(--shadow-xl);\n}\n\n.suggestions {\n  position: relative;\n  li {\n    padding: 1rem;\n    background-color: var(--pos-background-color);\n    pos-rich-link {\n      --background-color: inherit;\n    }\n    &.selected {\n      background-color: var(--pos-primary-color);\n      &:hover {\n        background-color: var(--pos-primary-color);\n      }\n    }\n    &:hover {\n      background-color: var(--pos-border-color);\n    }\n  }\n}\n\n.suggestions li.selected pos-rich-link {\n  --label-color: white;\n  --description-color: var(--pos-border-color);\n  --uri-color: var(--pos-subtle-text-color);\n}\n\nion-searchbar {\n  width: 100%;\n}\n\nform {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.bar {\n  flex-grow: 1;\n}\n","import { PodOS, SearchIndex } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Listen, Prop, State } from '@stencil/core';\n\nimport session from '../../store/session';\nimport { PodOsAware, PodOsEventEmitter, subscribePodOs } from '../events/PodOsAware';\n\n@Component({\n  tag: 'pos-navigation-bar',\n  shadow: true,\n  styleUrl: 'pos-navigation-bar.css',\n})\nexport class PosNavigationBar implements PodOsAware {\n  @State() os: PodOS;\n\n  @Event({ eventName: 'pod-os:init' }) subscribePodOs: PodOsEventEmitter;\n  @Prop() uri: string = '';\n\n  @State() value: string = this.uri;\n\n  @Event({ eventName: 'pod-os:link' }) linkEmitter: EventEmitter;\n\n  @State() searchIndex?: SearchIndex = undefined;\n\n  @State() suggestions = [];\n\n  @State() selectedIndex = -1;\n\n  componentWillLoad() {\n    subscribePodOs(this);\n    session.onChange('isLoggedIn', async isLoggedIn => {\n      if (isLoggedIn) {\n        await this.buildSearchIndex();\n      } else {\n        this.clearSearchIndex();\n      }\n    });\n  }\n\n  @Listen('pod-os:search:index-created')\n  private async buildSearchIndex() {\n    this.searchIndex = await this.os.buildSearchIndex(session.state.profile);\n  }\n\n  @Listen('pod-os:search:index-updated')\n  rebuildSearchIndex() {\n    this.searchIndex.rebuild();\n  }\n\n  private clearSearchIndex() {\n    this.searchIndex?.clear();\n  }\n\n  receivePodOs = async (os: PodOS) => {\n    this.os = os;\n  };\n\n  private onChange(event) {\n    this.value = event.detail.value;\n    this.search();\n  }\n\n  @Listen('click', { target: 'document' })\n  @Listen('pod-os:link')\n  clearSuggestions() {\n    this.suggestions = [];\n    this.selectedIndex = -1;\n  }\n\n  @Listen('click')\n  onClickSelf(event) {\n    event.stopPropagation();\n  }\n\n  @Listen('keydown')\n  handleKeyDown(ev: KeyboardEvent) {\n    if (ev.key === 'Escape') {\n      this.clearSuggestions();\n    } else if (ev.key === 'ArrowDown') {\n      ev.preventDefault();\n      this.selectedIndex = Math.min(this.selectedIndex + 1, this.suggestions.length - 1);\n    } else if (ev.key === 'ArrowUp') {\n      ev.preventDefault();\n      this.selectedIndex = Math.max(this.selectedIndex - 1, 0);\n    }\n  }\n\n  private search() {\n    if (this.searchIndex) {\n      this.suggestions = this.value ? this.searchIndex.search(this.value) : [];\n    }\n  }\n\n  private onSubmit(event) {\n    event.preventDefault();\n    if (this.suggestions && this.selectedIndex > -1) {\n      this.linkEmitter.emit(this.suggestions[this.selectedIndex].ref);\n    } else {\n      this.linkEmitter.emit(this.value);\n    }\n  }\n\n  render() {\n    return (\n      <form onSubmit={e => this.onSubmit(e)}>\n        {this.searchIndex && this.uri ? <pos-make-findable uri={this.uri}></pos-make-findable> : ''}\n        <div class=\"bar\">\n          <ion-searchbar\n            enterkeyhint=\"search\"\n            placeholder=\"Search or enter URI\"\n            value={this.uri}\n            debounce={300}\n            onIonChange={e => this.onChange(e)}\n            onIonInput={e => this.onChange(e)}\n          />\n          {this.suggestions.length > 0 ? (\n            <div class=\"suggestions\">\n              <ol>\n                {this.suggestions.map((it, index) => (\n                  <li class={index === this.selectedIndex ? 'selected' : ''}>\n                    <pos-rich-link uri={it.ref}></pos-rich-link>\n                  </li>\n                ))}\n              </ol>\n            </div>\n          ) : null}\n        </div>\n      </form>\n    );\n  }\n}\n"],"version":3}

package/dist/components/pos-new-thing-form2.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { s as subscribePodOs } from './PodOsAware.js';
 import { d as defineCustomElement$1 } from './pos-select-term2.js';
 
-const posNewThingFormCss = ":host{display:block}form{display:grid;grid-template-columns:var(--size-16) 1fr;grid-gap:var(--scale-0)}label{grid-column:1 / 2;display:flex;align-items:center;justify-content:flex-end}input,pos-select-term,button{grid-column:2 / 3}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}input:focus-within,pos-select-term::part(input):focus-within{outline:var(--pos-input-focus-outline)}#new-uri{grid-column:1/3;cursor:default;word-break:break-all;color:var(--color-grey-800);font-weight:var(--weight-light);background:var(--color-grey-100);padding:var(--scale-000);border-radius:var(--radius-xs)}input#create{outline:none;box-shadow:var(--shadow-sm);cursor:pointer;color:var(--pos-primary-text-color);background-color:var(--pos-primary-color)}input#create:disabled{cursor:default;color:var(--pos-disabled-text-color);background-color:var(--pos-disabled-color);box-shadow:none}input#create:hover:not(:disabled),input#create:focus{filter:brightness(110%);box-shadow:var(--shadow-md)}";
+const posNewThingFormCss = ":host{display:block}form{display:grid;grid-template-columns:var(--size-16) 1fr;grid-gap:var(--scale-0)}label{grid-column:1 / 2;display:flex;align-items:center;justify-content:flex-end}input,pos-select-term,button{grid-column:2 / 3}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{outline:var(--pos-input-focus-outline)}#new-uri{grid-column:1/3;cursor:default;word-break:break-all;color:var(--pos-normal-text-color);font-weight:var(--weight-light);background:var(--pos-disabled-color);padding:var(--scale-000);border-radius:var(--radius-xs)}input#create{outline:none;box-shadow:var(--shadow-sm);cursor:pointer;color:var(--pos-primary-text-color);background-color:var(--pos-primary-color)}input#create:disabled{cursor:default;color:var(--pos-disabled-text-color);background-color:var(--pos-disabled-color);box-shadow:none}input#create:hover:not(:disabled),input#create:focus{filter:brightness(110%);box-shadow:var(--shadow-md)}";
 const PosNewThingFormStyle0 = posNewThingFormCss;
 
 const PosNewThingForm = /*@__PURE__*/ proxyCustomElement(class PosNewThingForm extends HTMLElement {
@@ -25,7 +25,7 @@ const PosNewThingForm = /*@__PURE__*/ proxyCustomElement(class PosNewThingForm e
         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: '0d52a6b85338d0353876f0fde0a7ef45e5ebe104', method: "dialog", onSubmit: e => this.handleSubmit(e) }, h("label", { key: '6765ada99850150a6a1dc9135a6ec0c575e3066d', htmlFor: "type" }, "Type"), h("pos-select-term", { key: '375ca79b6ffa3d363954578cf83d2eab10b0e486', id: "type", placeholder: "", value: this.selectedTypeUri, "onPod-os:term-selected": e => this.onTermSelected(e) }), h("label", { key: '9da148cb532d236a5dc9ad73fc75e1bd2d277d17', htmlFor: "name" }, "Name"), h("input", { key: '81b5a4bf51eb403bfebfa0c9e023935ddde48194', 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: '5f4ff09818262ad875f80bce3a0f942b0428335f', id: "create", type: "submit", value: "Create", disabled: !this.canSubmit })));
     }
     handleChange(event) {
         this.name = event.target.value;

package/dist/components/pos-new-thing-form2.js.map

@@ -1 +1 @@
-{"file":"pos-new-thing-form2.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,qlCAAqlC,CAAC;AACjnC,8BAAe,kBAAkB;;MCUpB,eAAe;IAP5B;;;;;;;QAeW,cAAS,GAAY,KAAK,CAAC;QAcpC,iBAAY,GAAG,OAAO,EAAS;YAC7B,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;SACd,CAAC;KAmDH;IA5DC,QAAQ;QACN,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,eAAe,CAAC,CAAC;KAC7D;IAED,iBAAiB;QACf,cAAc,CAAC,IAAI,CAAC,CAAC;KACtB;IAOD,MAAM;QACJ,QACE,6DAAM,MAAM,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IACvD,8DAAO,OAAO,EAAC,MAAM,WAAa,EAClC,wEACE,EAAE,EAAC,MAAM,EACT,WAAW,EAAC,EAAE,EACd,KAAK,EAAE,IAAI,CAAC,eAAe,4BACH,CAAC,IAAI,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,GACnD,EACF,8DAAO,OAAO,EAAC,MAAM,WAAa,EAClC,8DAAO,EAAE,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAI,EACpF,IAAI,CAAC,MAAM,IACV,WAAK,EAAE,EAAC,SAAS,EAAC,KAAK,EAAC,uCAAuC,IAC5D,IAAI,CAAC,MAAM,CACR,IACJ,IAAI,EACR,8DAAO,EAAE,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,SAAS,GAAI,CACxE,EACP;KACH;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QAC/B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,qBAAqB,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;KAC3E;IAED,cAAc,CAAC,KAAK;QAClB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC;KACzC;IAED,MAAM,YAAY,CAAC,KAAK;QACtB,IAAI;YACF,MAAM,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;YACxE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YACnC,IAAI,CAAC,KAAK,EAAE,CAAC;SACd;QAAC,OAAO,KAAK,EAAE;YACd,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAC/B;KACF;IAEO,KAAK;QACX,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;QACf,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;QACjB,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC;KAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-new-thing-form/pos-new-thing-form.css?tag=pos-new-thing-form&encapsulation=shadow","src/components/pos-new-thing-form/pos-new-thing-form.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\nform {\n  display: grid;\n  grid-template-columns: var(--size-16) 1fr;\n  grid-gap: var(--scale-0);\n}\n\nlabel {\n  grid-column: 1 / 2;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n}\n\ninput,\npos-select-term,\nbutton {\n  grid-column: 2 / 3;\n}\n\ninput, pos-select-term::part(input) {\n  outline: var(--pos-input-outline);\n  padding: var(--scale-000);\n  border: none;\n  border-radius: var(--radius-xs);\n  width: var(--size-full);\n  box-sizing: border-box;\n}\n\ninput:focus-within, pos-select-term::part(input):focus-within {\n  outline: var(--pos-input-focus-outline);\n}\n\n#new-uri {\n  grid-column: 1/3;\n  cursor: default;\n  word-break: break-all;\n  color: var(--color-grey-800);\n  font-weight: var(--weight-light);\n  background: var(--color-grey-100);\n  padding: var(--scale-000);\n  border-radius: var(--radius-xs);\n}\n\ninput#create {\n  outline: none;\n  box-shadow: var(--shadow-sm);\n  cursor: pointer;\n  color: var(--pos-primary-text-color);\n  background-color: var(--pos-primary-color);\n}\n\ninput#create:disabled {\n  cursor: default;\n  color: var(--pos-disabled-text-color);\n  background-color: var(--pos-disabled-color);\n  box-shadow: none\n}\n\ninput#create:hover:not(:disabled), input#create:focus {\n  filter: brightness(110%);\n  box-shadow: var(--shadow-md);\n}\n","import { PodOS } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { PodOsAware, PodOsEventEmitter, subscribePodOs } from '../events/PodOsAware';\n\n@Component({\n  tag: 'pos-new-thing-form',\n  styleUrl: 'pos-new-thing-form.css',\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class PosNewThingForm implements PodOsAware {\n  @Prop() referenceUri!: string;\n  @State() os: PodOS;\n\n  @State() newUri: string;\n  @State() name: string;\n  @State() selectedTypeUri: string;\n\n  @State() canSubmit: boolean = false;\n\n  @Event({ eventName: 'pod-os:link' }) linkEmitter: EventEmitter;\n  @Event({ eventName: 'pod-os:error' }) errorEmitter: EventEmitter;\n\n  @Watch('name')\n  @Watch('selectedTypeUri')\n  validate() {\n    this.canSubmit = Boolean(this.name && this.selectedTypeUri);\n  }\n\n  componentWillLoad() {\n    subscribePodOs(this);\n  }\n  receivePodOs = async (os: PodOS) => {\n    this.os = os;\n  };\n\n  @Event({ eventName: 'pod-os:init' }) subscribePodOs: PodOsEventEmitter;\n\n  render() {\n    return (\n      <form method=\"dialog\" onSubmit={e => this.handleSubmit(e)}>\n        <label htmlFor=\"type\">Type</label>\n        <pos-select-term\n          id=\"type\"\n          placeholder=\"\"\n          value={this.selectedTypeUri}\n          onPod-os:term-selected={e => this.onTermSelected(e)}\n        />\n        <label htmlFor=\"name\">Name</label>\n        <input id=\"name\" type=\"text\" value={this.name} onInput={e => this.handleChange(e)} />\n        {this.newUri ? (\n          <div id=\"new-uri\" title=\"This will be the URI of the new thing\">\n            {this.newUri}\n          </div>\n        ) : null}\n        <input id=\"create\" type=\"submit\" value=\"Create\" disabled={!this.canSubmit} />\n      </form>\n    );\n  }\n\n  handleChange(event) {\n    this.name = event.target.value;\n    this.newUri = this.os.proposeUriForNewThing(this.referenceUri, this.name);\n  }\n\n  onTermSelected(event) {\n    this.selectedTypeUri = event.detail.uri;\n  }\n\n  async handleSubmit(event) {\n    try {\n      await this.os.addNewThing(this.newUri, this.name, this.selectedTypeUri);\n      this.linkEmitter.emit(this.newUri);\n      this.reset();\n    } catch (error) {\n      event.preventDefault();\n      this.errorEmitter.emit(error);\n    }\n  }\n\n  private reset() {\n    this.name = '';\n    this.newUri = '';\n    this.selectedTypeUri = '';\n  }\n}\n"],"version":3}
+{"file":"pos-new-thing-form2.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,grCAAgrC,CAAC;AAC5sC,8BAAe,kBAAkB;;MCUpB,eAAe;IAP5B;;;;;;;QAeW,cAAS,GAAY,KAAK,CAAC;QAcpC,iBAAY,GAAG,OAAO,EAAS;YAC7B,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;SACd,CAAC;KAmDH;IA5DC,QAAQ;QACN,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,eAAe,CAAC,CAAC;KAC7D;IAED,iBAAiB;QACf,cAAc,CAAC,IAAI,CAAC,CAAC;KACtB;IAOD,MAAM;QACJ,QACE,6DAAM,MAAM,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IACvD,8DAAO,OAAO,EAAC,MAAM,WAAa,EAClC,wEACE,EAAE,EAAC,MAAM,EACT,WAAW,EAAC,EAAE,EACd,KAAK,EAAE,IAAI,CAAC,eAAe,4BACH,CAAC,IAAI,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,GACnD,EACF,8DAAO,OAAO,EAAC,MAAM,WAAa,EAClC,8DAAO,EAAE,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAI,EACpF,IAAI,CAAC,MAAM,IACV,WAAK,EAAE,EAAC,SAAS,EAAC,KAAK,EAAC,uCAAuC,IAC5D,IAAI,CAAC,MAAM,CACR,IACJ,IAAI,EACR,8DAAO,EAAE,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,SAAS,GAAI,CACxE,EACP;KACH;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QAC/B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,qBAAqB,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;KAC3E;IAED,cAAc,CAAC,KAAK;QAClB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC;KACzC;IAED,MAAM,YAAY,CAAC,KAAK;QACtB,IAAI;YACF,MAAM,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;YACxE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YACnC,IAAI,CAAC,KAAK,EAAE,CAAC;SACd;QAAC,OAAO,KAAK,EAAE;YACd,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAC/B;KACF;IAEO,KAAK;QACX,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;QACf,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;QACjB,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC;KAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-new-thing-form/pos-new-thing-form.css?tag=pos-new-thing-form&encapsulation=shadow","src/components/pos-new-thing-form/pos-new-thing-form.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\nform {\n  display: grid;\n  grid-template-columns: var(--size-16) 1fr;\n  grid-gap: var(--scale-0);\n}\n\nlabel {\n  grid-column: 1 / 2;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n}\n\ninput,\npos-select-term,\nbutton {\n  grid-column: 2 / 3;\n}\n\ninput,\npos-select-term::part(input) {\n  outline: var(--pos-input-outline);\n  padding: var(--scale-000);\n  border: none;\n  border-radius: var(--radius-xs);\n  width: var(--size-full);\n  box-sizing: border-box;\n  background: var(--pos-input-background-color);\n  color: var(--pos-normal-text-color);\n}\n\ninput:focus-within,\npos-select-term::part(input):focus-within {\n  outline: var(--pos-input-focus-outline);\n}\n\n#new-uri {\n  grid-column: 1/3;\n  cursor: default;\n  word-break: break-all;\n  color: var(--pos-normal-text-color);\n  font-weight: var(--weight-light);\n  background: var(--pos-disabled-color);\n  padding: var(--scale-000);\n  border-radius: var(--radius-xs);\n}\n\ninput#create {\n  outline: none;\n  box-shadow: var(--shadow-sm);\n  cursor: pointer;\n  color: var(--pos-primary-text-color);\n  background-color: var(--pos-primary-color);\n}\n\ninput#create:disabled {\n  cursor: default;\n  color: var(--pos-disabled-text-color);\n  background-color: var(--pos-disabled-color);\n  box-shadow: none;\n}\n\ninput#create:hover:not(:disabled),\ninput#create:focus {\n  filter: brightness(110%);\n  box-shadow: var(--shadow-md);\n}\n","import { PodOS } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { PodOsAware, PodOsEventEmitter, subscribePodOs } from '../events/PodOsAware';\n\n@Component({\n  tag: 'pos-new-thing-form',\n  styleUrl: 'pos-new-thing-form.css',\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class PosNewThingForm implements PodOsAware {\n  @Prop() referenceUri!: string;\n  @State() os: PodOS;\n\n  @State() newUri: string;\n  @State() name: string;\n  @State() selectedTypeUri: string;\n\n  @State() canSubmit: boolean = false;\n\n  @Event({ eventName: 'pod-os:link' }) linkEmitter: EventEmitter;\n  @Event({ eventName: 'pod-os:error' }) errorEmitter: EventEmitter;\n\n  @Watch('name')\n  @Watch('selectedTypeUri')\n  validate() {\n    this.canSubmit = Boolean(this.name && this.selectedTypeUri);\n  }\n\n  componentWillLoad() {\n    subscribePodOs(this);\n  }\n  receivePodOs = async (os: PodOS) => {\n    this.os = os;\n  };\n\n  @Event({ eventName: 'pod-os:init' }) subscribePodOs: PodOsEventEmitter;\n\n  render() {\n    return (\n      <form method=\"dialog\" onSubmit={e => this.handleSubmit(e)}>\n        <label htmlFor=\"type\">Type</label>\n        <pos-select-term\n          id=\"type\"\n          placeholder=\"\"\n          value={this.selectedTypeUri}\n          onPod-os:term-selected={e => this.onTermSelected(e)}\n        />\n        <label htmlFor=\"name\">Name</label>\n        <input id=\"name\" type=\"text\" value={this.name} onInput={e => this.handleChange(e)} />\n        {this.newUri ? (\n          <div id=\"new-uri\" title=\"This will be the URI of the new thing\">\n            {this.newUri}\n          </div>\n        ) : null}\n        <input id=\"create\" type=\"submit\" value=\"Create\" disabled={!this.canSubmit} />\n      </form>\n    );\n  }\n\n  handleChange(event) {\n    this.name = event.target.value;\n    this.newUri = this.os.proposeUriForNewThing(this.referenceUri, this.name);\n  }\n\n  onTermSelected(event) {\n    this.selectedTypeUri = event.detail.uri;\n  }\n\n  async handleSubmit(event) {\n    try {\n      await this.os.addNewThing(this.newUri, this.name, this.selectedTypeUri);\n      this.linkEmitter.emit(this.newUri);\n      this.reset();\n    } catch (error) {\n      event.preventDefault();\n      this.errorEmitter.emit(error);\n    }\n  }\n\n  private reset() {\n    this.name = '';\n    this.newUri = '';\n    this.selectedTypeUri = '';\n  }\n}\n"],"version":3}

package/dist/components/pos-relations2.js

@@ -12,7 +12,7 @@ import { d as defineCustomElement$3 } from './pos-predicate2.js';
 import { d as defineCustomElement$2 } from './pos-resource2.js';
 import { d as defineCustomElement$1 } from './pos-rich-link2.js';
 
-const 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 posRelationsCss = ":host {\n  --background-base-color: color-mix(in srgb, var(--pos-background-color), var(--color-grey-800) 10%);\n  --background-color-even: hsl(from var(--background-base-color) h s calc(l + 7));\n  --background-color-odd: hsl(from var(--background-base-color) h s calc(l + 10));\n  --border-color: var(--background-base-color);\n}\n\ndd {\n  padding: 0;\n  margin: 0;\n}\n\ndl {\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-1);\n  padding: 0;\n  margin: 0;\n}\n\ndt {\n  margin-bottom: var(--size-1);\n}\n\n.predicate-values:nth-child(odd) {\n  background-color: var(--background-color-odd);\n}\n\n.predicate-values:nth-child(even) {\n  background-color: var(--background-color-even);\n}\n\n.predicate-values {\n  display: flex;\n  flex-direction: column;\n  border: var(--size-px) solid var(--border-color);\n  padding: var(--size-2);\n  gap: var(--size-1);\n\n  .values {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-3);\n  }\n}\n\npos-rich-link {\n  --background-color: inherit;\n}\n";
 const PosRelationsStyle0 = posRelationsCss;
 
 const PosRelations = /*@__PURE__*/ proxyCustomElement(class PosRelations extends HTMLElement {

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

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

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

@@ -12,7 +12,7 @@ import { d as defineCustomElement$3 } from './pos-predicate2.js';
 import { d as defineCustomElement$2 } from './pos-resource2.js';
 import { d as defineCustomElement$1 } from './pos-rich-link2.js';
 
-const posReverseRelationsCss = ":host {\n  --background-base-color: var(--color-grey-200);\n  --background-color-even: hsl(from var(--background-base-color) h s calc(l + 7));\n  --background-color-odd: hsl(from var(--background-base-color) h s calc(l + 10));\n  --border-color: var(--background-base-color);\n}\n\ndd {\n  padding: 0;\n  margin: 0;\n}\n\ndl {\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-1);\n  padding: 0;\n  margin: 0;\n}\n\ndt {\n  margin-bottom: var(--size-1);\n}\n\n.predicate-values:nth-child(odd) {\n  background-color: var(--background-color-odd);\n}\n\n.predicate-values:nth-child(even) {\n  background-color: var(--background-color-even);\n}\n\n.predicate-values {\n  display: flex;\n  flex-direction: column;\n  border: var(--size-px) solid var(--border-color);\n  padding: var(--size-2);\n  gap: var(--size-1);\n  .values {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-3);\n  }\n}\n\npos-rich-link {\n  --background-color: inherit;\n}\n";
+const posReverseRelationsCss = ":host {\n  --background-base-color: color-mix(in srgb, var(--pos-background-color), var(--color-grey-800) 10%);\n  --background-color-even: hsl(from var(--background-base-color) h s calc(l + 7));\n  --background-color-odd: hsl(from var(--background-base-color) h s calc(l + 10));\n  --border-color: var(--background-base-color);\n}\n\ndd {\n  padding: 0;\n  margin: 0;\n}\n\ndl {\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-1);\n  padding: 0;\n  margin: 0;\n}\n\ndt {\n  margin-bottom: var(--size-1);\n}\n\n.predicate-values:nth-child(odd) {\n  background-color: var(--background-color-odd);\n}\n\n.predicate-values:nth-child(even) {\n  background-color: var(--background-color-even);\n}\n\n.predicate-values {\n  display: flex;\n  flex-direction: column;\n  border: var(--size-px) solid var(--border-color);\n  padding: var(--size-2);\n  gap: var(--size-1);\n  .values {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-3);\n  }\n}\n\npos-rich-link {\n  --background-color: inherit;\n}\n";
 const PosReverseRelationsStyle0 = posReverseRelationsCss;
 
 const PosReverseRelations = /*@__PURE__*/ proxyCustomElement(class PosReverseRelations extends HTMLElement {