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

package/dist/components/pos-make-findable2.js

@@ -2,15 +2,11 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { L as LabelIndex } from './index10.js';
 import { s as subscribePodOs } from './PodOsAware.js';
 import { s as store } from './session.js';
-import { d as defineCustomElement$7 } from './card.js';
-import { d as defineCustomElement$6 } from './card-content.js';
-import { d as defineCustomElement$5 } from './card-header.js';
-import { d as defineCustomElement$4 } from './progress-bar.js';
-import { d as defineCustomElement$3 } from './ripple-effect.js';
+import { d as defineCustomElement$3 } from './progress-bar.js';
 import { d as defineCustomElement$2 } from './pos-label2.js';
 import { d as defineCustomElement$1 } from './pos-resource2.js';
 
-const posMakeFindableCss = "button.main {\n  display: flex;\n  transition:\n    width 200ms,\n    background-color 500ms,\n    color 500ms,\n    border-color 500ms;\n  max-width: var(--size-40);\n  flex-direction: row;\n  overflow: hidden;\n  height: var(--size-8);\n  width: var(--size-8);\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-xs);\n  color: var(--color-grey-500);\n  border: var(--size-px) dashed var(--color-grey-500);\n  background: none;\n\n  p {\n    padding: 0;\n    margin: 0;\n    display: none;\n    white-space: nowrap;\n  }\n\n  &.success {\n    color: var(--color-green-700);\n    border-color: var(--color-green-700);\n    border-style: solid;\n    background-color: var(--color-green-100);\n  }\n\n  &:active {\n    transform: scale(0.99);\n    filter: brightness(90%);\n  }\n}\n\n.options {\n  position: absolute;\n  animation: fadeIn 300ms;\n  padding: 0;\n  margin-top: var(--size-1);\n  z-index: var(--layer-top);\n\n  ol {\n    display: flex;\n    flex-direction: column;\n    box-shadow: var(--shadow-md);\n    backdrop-filter: var(--blur-md);\n    border-radius: var(--radius-xs);\n    overflow: hidden;\n    background-color: var(--color-grey-200);\n    padding: 0;\n    margin: 0;\n    list-style: none;\n    label {\n      display: flex;\n      justify-content: flex-start;\n      align-items: center;\n      transition: all 300ms var(--ease-in-out-sine);\n      margin: 0;\n      border: none;\n      outline: none;\n      padding: var(--size-2);\n      width: var(--size-full);\n\n      &:hover,\n      &:focus {\n        filter: brightness(80%);\n      }\n\n      &:active {\n        filter: brightness(90%);\n      }\n    }\n  }\n  label:has(input:checked) {\n    background-color: var(--color-green-100);\n  }\n}\n\nsvg {\n  display: inline-block;\n  height: var(--size-6);\n  flex-shrink: 0;\n  flex-grow: 0;\n  width: var(--size-6);\n}\n\nbutton.main:hover,\nbutton.open {\n  &.success {\n    background: var(--color-green-200);\n  }\n  width: var(--size-full);\n  height: var(--size-8);\n  background: var(--color-grey-200);\n  color: var(--color-grey-700);\n\n  p {\n    display: inline-block;\n  }\n}\n\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n";
+const posMakeFindableCss = "button.main {\n  display: flex;\n  transition:\n    width 200ms,\n    background-color 500ms,\n    color 500ms,\n    border-color 500ms;\n  max-width: var(--size-40);\n  flex-direction: row;\n  overflow: hidden;\n  height: var(--size-8);\n  width: var(--size-8);\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-xs);\n  color: var(--pos-subtle-text-color);\n  border: var(--size-px) dashed var(--pos-subtle-text-color);\n  background-color: var(--pos-background-color);\n\n  p {\n    padding: 0;\n    margin: 0;\n    display: none;\n    white-space: nowrap;\n  }\n\n  &.success {\n    color: var(--color-green-700);\n    border-color: var(--color-green-700);\n    border-style: solid;\n    background-color: var(--color-green-100);\n  }\n\n  &:active {\n    transform: scale(0.99);\n    filter: brightness(90%);\n  }\n}\n\n.options {\n  position: absolute;\n  animation: fadeIn 300ms;\n  padding: 0;\n  margin-top: var(--size-1);\n  z-index: var(--layer-top);\n\n  ol {\n    display: flex;\n    flex-direction: column;\n    box-shadow: var(--shadow-md);\n    backdrop-filter: var(--blur-md);\n    border-radius: var(--radius-xs);\n    overflow: hidden;\n    color: var(--color-grey-900);\n    background-color: var(--color-grey-200);\n    padding: 0;\n    margin: 0;\n    list-style: none;\n    label {\n      display: flex;\n      justify-content: flex-start;\n      align-items: center;\n      transition: all 300ms var(--ease-in-out-sine);\n      margin: 0;\n      border: none;\n      outline: none;\n      padding: var(--size-2);\n      width: var(--size-full);\n\n      &:hover,\n      &:focus {\n        filter: brightness(80%);\n      }\n\n      &:active {\n        filter: brightness(90%);\n      }\n    }\n  }\n  label:has(input:checked) {\n    background-color: var(--color-green-100);\n  }\n}\n\nsvg {\n  display: inline-block;\n  height: var(--size-6);\n  flex-shrink: 0;\n  flex-grow: 0;\n  width: var(--size-6);\n}\n\nbutton.main:hover,\nbutton.open {\n  &.success {\n    background: var(--color-green-200);\n  }\n  width: var(--size-full);\n  height: var(--size-8);\n  background: var(--pos-background-color);\n  color: var(--pos-normal-text-color);\n\n  p {\n    display: inline-block;\n  }\n}\n\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n";
 const PosMakeFindableStyle0 = posMakeFindableCss;
 
 const PosMakeFindable = /*@__PURE__*/ proxyCustomElement(class PosMakeFindable extends HTMLElement {
@@ -131,34 +127,14 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-make-findable", "ion-card", "ion-card-content", "ion-card-header", "ion-progress-bar", "ion-ripple-effect", "pos-label", "pos-resource"];
+    const components = ["pos-make-findable", "ion-progress-bar", "pos-label", "pos-resource"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-make-findable":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PosMakeFindable);
             }
             break;
-        case "ion-card":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "ion-card-content":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "ion-card-header":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
         case "ion-progress-bar":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "ion-ripple-effect":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }

package/dist/components/pos-make-findable2.js.map

@@ -1 +1 @@
-{"file":"pos-make-findable2.js","mappings":"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","names":["session"],"sources":["src/components/pos-make-findable/pos-make-findable.css?tag=pos-make-findable","src/components/pos-make-findable/pos-make-findable.tsx"],"sourcesContent":["button.main {\n  display: flex;\n  transition:\n    width 200ms,\n    background-color 500ms,\n    color 500ms,\n    border-color 500ms;\n  max-width: var(--size-40);\n  flex-direction: row;\n  overflow: hidden;\n  height: var(--size-8);\n  width: var(--size-8);\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-xs);\n  color: var(--color-grey-500);\n  border: var(--size-px) dashed var(--color-grey-500);\n  background: none;\n\n  p {\n    padding: 0;\n    margin: 0;\n    display: none;\n    white-space: nowrap;\n  }\n\n  &.success {\n    color: var(--color-green-700);\n    border-color: var(--color-green-700);\n    border-style: solid;\n    background-color: var(--color-green-100);\n  }\n\n  &:active {\n    transform: scale(0.99);\n    filter: brightness(90%);\n  }\n}\n\n.options {\n  position: absolute;\n  animation: fadeIn 300ms;\n  padding: 0;\n  margin-top: var(--size-1);\n  z-index: var(--layer-top);\n\n  ol {\n    display: flex;\n    flex-direction: column;\n    box-shadow: var(--shadow-md);\n    backdrop-filter: var(--blur-md);\n    border-radius: var(--radius-xs);\n    overflow: hidden;\n    background-color: var(--color-grey-200);\n    padding: 0;\n    margin: 0;\n    list-style: none;\n    label {\n      display: flex;\n      justify-content: flex-start;\n      align-items: center;\n      transition: all 300ms var(--ease-in-out-sine);\n      margin: 0;\n      border: none;\n      outline: none;\n      padding: var(--size-2);\n      width: var(--size-full);\n\n      &:hover,\n      &:focus {\n        filter: brightness(80%);\n      }\n\n      &:active {\n        filter: brightness(90%);\n      }\n    }\n  }\n  label:has(input:checked) {\n    background-color: var(--color-green-100);\n  }\n}\n\nsvg {\n  display: inline-block;\n  height: var(--size-6);\n  flex-shrink: 0;\n  flex-grow: 0;\n  width: var(--size-6);\n}\n\nbutton.main:hover,\nbutton.open {\n  &.success {\n    background: var(--color-green-200);\n  }\n  width: var(--size-full);\n  height: var(--size-8);\n  background: var(--color-grey-200);\n  color: var(--color-grey-700);\n\n  p {\n    display: inline-block;\n  }\n}\n\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\nimport { LabelIndex, PodOS, Thing, WebIdProfile } from '@pod-os/core';\nimport { PodOsAware, PodOsEventEmitter, subscribePodOs } from '../events/PodOsAware';\nimport session from '../../store/session';\n\n@Component({\n  tag: 'pos-make-findable',\n  styleUrl: 'pos-make-findable.css',\n})\nexport class PosMakeFindable implements PodOsAware {\n  @Prop() uri!: string;\n\n  @State() os: PodOS;\n  @State() thing: Thing;\n  @State() indexes: LabelIndex[] = [];\n\n  @Event({ eventName: 'pod-os:init' }) subscribePodOs: PodOsEventEmitter;\n\n  @State() unsubscribeSessionChange: undefined | (() => void);\n\n  @State() showOptions = false;\n  @State() isIndexed = false;\n\n  @Event({ eventName: 'pod-os:error' }) errorEmitter: EventEmitter;\n  @Event({ eventName: 'pod-os:search:index-updated' }) indexUpdatedEmitter: EventEmitter;\n  @Event({ eventName: 'pod-os:search:index-created' }) indexCreatedEmitter: EventEmitter;\n\n  @Element() el: HTMLElement;\n\n  componentWillLoad() {\n    subscribePodOs(this);\n  }\n\n  disconnectedCallback() {\n    this.unsubscribeSessionChange && this.unsubscribeSessionChange();\n  }\n\n  @Listen('click', { target: 'document' })\n  hideOptions(event: MouseEvent) {\n    // @ts-ignore\n    if (!this.el.contains(event.target)) {\n      this.showOptions = false;\n    }\n  }\n\n  @Listen('keydown')\n  handleKeyDown(ev: KeyboardEvent) {\n    if (ev.key === 'Escape') {\n      this.showOptions = false;\n    }\n  }\n\n  @Watch('uri')\n  updateUri(uri: string) {\n    this.thing = this.os.store.get(uri);\n    this.isIndexed = this.checkIfIndexed(uri);\n  }\n\n  private checkIfIndexed(uri: string) {\n    return this.indexes.some(it => it.contains(uri));\n  }\n\n  receivePodOs = async (os: PodOS) => {\n    this.os = os;\n    this.thing = this.os.store.get(this.uri);\n    this.getLabelIndexes(session.state.profile);\n    this.unsubscribeSessionChange = session.onChange('profile', profile => {\n      this.getLabelIndexes(profile);\n    });\n  };\n\n  private getLabelIndexes(profile: WebIdProfile) {\n    if (profile) {\n      this.indexes = profile.getPrivateLabelIndexes().map(it => this.os.store.get(it).assume(LabelIndex));\n      this.isIndexed = this.checkIfIndexed(this.uri);\n    }\n  }\n\n  private async onClick(e: MouseEvent) {\n    e.preventDefault();\n    if (this.indexes.length === 1) {\n      const index = this.indexes[0];\n      await this.addToLabelIndex(index);\n      this.indexUpdatedEmitter.emit(index);\n    } else if (this.indexes.length > 1) {\n      this.showOptions = !this.showOptions;\n    } else {\n      const index = await this.createDefaultLabelIndex();\n      await this.addToLabelIndex(index);\n      this.indexCreatedEmitter.emit(index);\n    }\n  }\n\n  private async addToLabelIndex(index: LabelIndex) {\n    try {\n      await this.os.addToLabelIndex(this.thing, index);\n      this.isIndexed = true;\n    } catch (e) {\n      this.errorEmitter.emit(e);\n    }\n\n    this.showOptions = false;\n  }\n\n  private async createDefaultLabelIndex(): Promise<LabelIndex> {\n    try {\n      return await this.os.createDefaultLabelIndex(session.state.profile);\n    } catch (e) {\n      this.errorEmitter.emit(e);\n    }\n  }\n\n  render() {\n    if (!session.state.isLoggedIn || !this.uri) {\n      return null;\n    }\n\n    const label = 'Make this findable';\n    return (\n      <Host>\n        <button\n          type=\"button\"\n          aria-label={label}\n          class={{ main: true, open: this.showOptions, success: this.isIndexed }}\n          onClick={e => this.onClick(e)}\n          title=\"\"\n        >\n          {this.isIndexed ? <IconSuccess /> : <IconMakeFindable />}\n          <p>{label}</p>\n        </button>\n        {this.showOptions && (\n          <div class=\"options\">\n            <ol role=\"listbox\">\n              {this.indexes.map((index: LabelIndex) => (\n                <li role=\"option\">\n                  <label>\n                    <input\n                      type=\"checkbox\"\n                      checked={index.contains(this.uri)}\n                      onChange={e => this.chooseOption(e, index)}\n                    />\n                    <pos-resource uri={index.uri} lazy={true}>\n                      <pos-label></pos-label>\n                    </pos-resource>\n                  </label>\n                </li>\n              ))}\n            </ol>\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  private async chooseOption(e: Event, index: LabelIndex) {\n    e.preventDefault();\n    await this.addToLabelIndex(index);\n    this.indexUpdatedEmitter.emit(index);\n  }\n}\n\nconst IconMakeFindable = () => (\n  <svg\n    role=\"presentation\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke-width=\"1.5\"\n    stroke=\"currentColor\"\n  >\n    <path\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      d=\"M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v16.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Zm3.75 11.625a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z\"\n    />\n  </svg>\n);\n\nconst IconSuccess = () => (\n  <svg\n    role=\"presentation\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke-width=\"1.5\"\n    stroke=\"currentColor\"\n  >\n    <path\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      d=\"M10.125 2.25h-4.5c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125v-9M10.125 2.25h.375a9 9 0 0 1 9 9v.375M10.125 2.25A3.375 3.375 0 0 1 13.5 5.625v1.5c0 .621.504 1.125 1.125 1.125h1.5a3.375 3.375 0 0 1 3.375 3.375M9 15l2.25 2.25L15 12\"\n    />\n  </svg>\n);\n"],"version":3}
+{"file":"pos-make-findable2.js","mappings":"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","names":["session"],"sources":["src/components/pos-make-findable/pos-make-findable.css?tag=pos-make-findable","src/components/pos-make-findable/pos-make-findable.tsx"],"sourcesContent":["button.main {\n  display: flex;\n  transition:\n    width 200ms,\n    background-color 500ms,\n    color 500ms,\n    border-color 500ms;\n  max-width: var(--size-40);\n  flex-direction: row;\n  overflow: hidden;\n  height: var(--size-8);\n  width: var(--size-8);\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-xs);\n  color: var(--pos-subtle-text-color);\n  border: var(--size-px) dashed var(--pos-subtle-text-color);\n  background-color: var(--pos-background-color);\n\n  p {\n    padding: 0;\n    margin: 0;\n    display: none;\n    white-space: nowrap;\n  }\n\n  &.success {\n    color: var(--color-green-700);\n    border-color: var(--color-green-700);\n    border-style: solid;\n    background-color: var(--color-green-100);\n  }\n\n  &:active {\n    transform: scale(0.99);\n    filter: brightness(90%);\n  }\n}\n\n.options {\n  position: absolute;\n  animation: fadeIn 300ms;\n  padding: 0;\n  margin-top: var(--size-1);\n  z-index: var(--layer-top);\n\n  ol {\n    display: flex;\n    flex-direction: column;\n    box-shadow: var(--shadow-md);\n    backdrop-filter: var(--blur-md);\n    border-radius: var(--radius-xs);\n    overflow: hidden;\n    color: var(--color-grey-900);\n    background-color: var(--color-grey-200);\n    padding: 0;\n    margin: 0;\n    list-style: none;\n    label {\n      display: flex;\n      justify-content: flex-start;\n      align-items: center;\n      transition: all 300ms var(--ease-in-out-sine);\n      margin: 0;\n      border: none;\n      outline: none;\n      padding: var(--size-2);\n      width: var(--size-full);\n\n      &:hover,\n      &:focus {\n        filter: brightness(80%);\n      }\n\n      &:active {\n        filter: brightness(90%);\n      }\n    }\n  }\n  label:has(input:checked) {\n    background-color: var(--color-green-100);\n  }\n}\n\nsvg {\n  display: inline-block;\n  height: var(--size-6);\n  flex-shrink: 0;\n  flex-grow: 0;\n  width: var(--size-6);\n}\n\nbutton.main:hover,\nbutton.open {\n  &.success {\n    background: var(--color-green-200);\n  }\n  width: var(--size-full);\n  height: var(--size-8);\n  background: var(--pos-background-color);\n  color: var(--pos-normal-text-color);\n\n  p {\n    display: inline-block;\n  }\n}\n\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\nimport { LabelIndex, PodOS, Thing, WebIdProfile } from '@pod-os/core';\nimport { PodOsAware, PodOsEventEmitter, subscribePodOs } from '../events/PodOsAware';\nimport session from '../../store/session';\n\n@Component({\n  tag: 'pos-make-findable',\n  styleUrl: 'pos-make-findable.css',\n})\nexport class PosMakeFindable implements PodOsAware {\n  @Prop() uri!: string;\n\n  @State() os: PodOS;\n  @State() thing: Thing;\n  @State() indexes: LabelIndex[] = [];\n\n  @Event({ eventName: 'pod-os:init' }) subscribePodOs: PodOsEventEmitter;\n\n  @State() unsubscribeSessionChange: undefined | (() => void);\n\n  @State() showOptions = false;\n  @State() isIndexed = false;\n\n  @Event({ eventName: 'pod-os:error' }) errorEmitter: EventEmitter;\n  @Event({ eventName: 'pod-os:search:index-updated' }) indexUpdatedEmitter: EventEmitter;\n  @Event({ eventName: 'pod-os:search:index-created' }) indexCreatedEmitter: EventEmitter;\n\n  @Element() el: HTMLElement;\n\n  componentWillLoad() {\n    subscribePodOs(this);\n  }\n\n  disconnectedCallback() {\n    this.unsubscribeSessionChange && this.unsubscribeSessionChange();\n  }\n\n  @Listen('click', { target: 'document' })\n  hideOptions(event: MouseEvent) {\n    // @ts-ignore\n    if (!this.el.contains(event.target)) {\n      this.showOptions = false;\n    }\n  }\n\n  @Listen('keydown')\n  handleKeyDown(ev: KeyboardEvent) {\n    if (ev.key === 'Escape') {\n      this.showOptions = false;\n    }\n  }\n\n  @Watch('uri')\n  updateUri(uri: string) {\n    this.thing = this.os.store.get(uri);\n    this.isIndexed = this.checkIfIndexed(uri);\n  }\n\n  private checkIfIndexed(uri: string) {\n    return this.indexes.some(it => it.contains(uri));\n  }\n\n  receivePodOs = async (os: PodOS) => {\n    this.os = os;\n    this.thing = this.os.store.get(this.uri);\n    this.getLabelIndexes(session.state.profile);\n    this.unsubscribeSessionChange = session.onChange('profile', profile => {\n      this.getLabelIndexes(profile);\n    });\n  };\n\n  private getLabelIndexes(profile: WebIdProfile) {\n    if (profile) {\n      this.indexes = profile.getPrivateLabelIndexes().map(it => this.os.store.get(it).assume(LabelIndex));\n      this.isIndexed = this.checkIfIndexed(this.uri);\n    }\n  }\n\n  private async onClick(e: MouseEvent) {\n    e.preventDefault();\n    if (this.indexes.length === 1) {\n      const index = this.indexes[0];\n      await this.addToLabelIndex(index);\n      this.indexUpdatedEmitter.emit(index);\n    } else if (this.indexes.length > 1) {\n      this.showOptions = !this.showOptions;\n    } else {\n      const index = await this.createDefaultLabelIndex();\n      await this.addToLabelIndex(index);\n      this.indexCreatedEmitter.emit(index);\n    }\n  }\n\n  private async addToLabelIndex(index: LabelIndex) {\n    try {\n      await this.os.addToLabelIndex(this.thing, index);\n      this.isIndexed = true;\n    } catch (e) {\n      this.errorEmitter.emit(e);\n    }\n\n    this.showOptions = false;\n  }\n\n  private async createDefaultLabelIndex(): Promise<LabelIndex> {\n    try {\n      return await this.os.createDefaultLabelIndex(session.state.profile);\n    } catch (e) {\n      this.errorEmitter.emit(e);\n    }\n  }\n\n  render() {\n    if (!session.state.isLoggedIn || !this.uri) {\n      return null;\n    }\n\n    const label = 'Make this findable';\n    return (\n      <Host>\n        <button\n          type=\"button\"\n          aria-label={label}\n          class={{ main: true, open: this.showOptions, success: this.isIndexed }}\n          onClick={e => this.onClick(e)}\n          title=\"\"\n        >\n          {this.isIndexed ? <IconSuccess /> : <IconMakeFindable />}\n          <p>{label}</p>\n        </button>\n        {this.showOptions && (\n          <div class=\"options\">\n            <ol role=\"listbox\">\n              {this.indexes.map((index: LabelIndex) => (\n                <li role=\"option\">\n                  <label>\n                    <input\n                      type=\"checkbox\"\n                      checked={index.contains(this.uri)}\n                      onChange={e => this.chooseOption(e, index)}\n                    />\n                    <pos-resource uri={index.uri} lazy={true}>\n                      <pos-label></pos-label>\n                    </pos-resource>\n                  </label>\n                </li>\n              ))}\n            </ol>\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  private async chooseOption(e: Event, index: LabelIndex) {\n    e.preventDefault();\n    await this.addToLabelIndex(index);\n    this.indexUpdatedEmitter.emit(index);\n  }\n}\n\nconst IconMakeFindable = () => (\n  <svg\n    role=\"presentation\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke-width=\"1.5\"\n    stroke=\"currentColor\"\n  >\n    <path\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      d=\"M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v16.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Zm3.75 11.625a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z\"\n    />\n  </svg>\n);\n\nconst IconSuccess = () => (\n  <svg\n    role=\"presentation\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke-width=\"1.5\"\n    stroke=\"currentColor\"\n  >\n    <path\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      d=\"M10.125 2.25h-4.5c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125v-9M10.125 2.25h.375a9 9 0 0 1 9 9v.375M10.125 2.25A3.375 3.375 0 0 1 13.5 5.625v1.5c0 .621.504 1.125 1.125 1.125h1.5a3.375 3.375 0 0 1 3.375 3.375M9 15l2.25 2.25L15 12\"\n    />\n  </svg>\n);\n"],"version":3}

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

@@ -1,12 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { s as store } from './session.js';
 import { s as subscribePodOs } from './PodOsAware.js';
-import { d as defineCustomElement$c } from './card.js';
-import { d as defineCustomElement$b } from './card-content.js';
-import { d as defineCustomElement$a } from './card-header.js';
-import { d as defineCustomElement$9 } from './icon.js';
-import { d as defineCustomElement$8 } from './progress-bar.js';
-import { d as defineCustomElement$7 } from './ripple-effect.js';
+import { d as defineCustomElement$8 } from './icon.js';
+import { d as defineCustomElement$7 } from './progress-bar.js';
 import { d as defineCustomElement$6 } from './searchbar.js';
 import { d as defineCustomElement$5 } from './pos-description2.js';
 import { d as defineCustomElement$4 } from './pos-label2.js';
@@ -93,7 +89,7 @@ const PosNavigationBar = /*@__PURE__*/ proxyCustomElement(class PosNavigationBar
         }
     }
     render() {
-        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)));
+        return (h("form", { key: 'e92382c2024642ea5c0b5abb00f1759003f74c78', onSubmit: e => this.onSubmit(e) }, this.searchIndex && this.uri ? h("pos-make-findable", { uri: this.uri }) : '', h("div", { key: 'c32607860e8aa1fe6d6d182c0e2a056f40b6f1b7', class: "bar" }, h("ion-searchbar", { key: '6f281c307640200da6c57a0660e27901f55d375d', enterkeyhint: "search", placeholder: "Search or enter URI", value: this.uri, debounce: 300, onIonChange: e => this.onChange(e), onIonInput: e => this.onChange(e) }), this.suggestions.length > 0 ? (h("div", { class: "suggestions" }, h("ol", null, this.suggestions.map((it, index) => (h("li", { class: index === this.selectedIndex ? 'selected' : '' }, h("pos-rich-link", { uri: it.ref }))))))) : null)));
     }
     static get style() { return PosNavigationBarStyle0; }
 }, [1, "pos-navigation-bar", {
@@ -108,39 +104,19 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-navigation-bar", "ion-card", "ion-card-content", "ion-card-header", "ion-icon", "ion-progress-bar", "ion-ripple-effect", "ion-searchbar", "pos-description", "pos-label", "pos-make-findable", "pos-resource", "pos-rich-link"];
+    const components = ["pos-navigation-bar", "ion-icon", "ion-progress-bar", "ion-searchbar", "pos-description", "pos-label", "pos-make-findable", "pos-resource", "pos-rich-link"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-navigation-bar":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PosNavigationBar);
             }
             break;
-        case "ion-card":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$c();
-            }
-            break;
-        case "ion-card-content":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$b();
-            }
-            break;
-        case "ion-card-header":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
         case "ion-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "ion-progress-bar":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }
             break;
-        case "ion-ripple-effect":
+        case "ion-progress-bar":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }

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":[".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}
+{"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

@@ -25,7 +25,7 @@ const PosNewThingForm = /*@__PURE__*/ proxyCustomElement(class PosNewThingForm e
         subscribePodOs(this);
     }
     render() {
-        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 })));
+        return (h("form", { key: '9ee9d0ab4f31bfc55865ef697d410b37977b1051', method: "dialog", onSubmit: e => this.handleSubmit(e) }, h("label", { key: 'a6f807d2034d55e5218c01375c4ff36564924bfb', htmlFor: "type" }, "Type"), h("pos-select-term", { key: 'f6001d6801bee97c03121d57742a595c8d5d5bd7', id: "type", placeholder: "", value: this.selectedTypeUri, "onPod-os:term-selected": e => this.onTermSelected(e) }), h("label", { key: '9365561d47d72e0153bb743f4fdf5ca7a1b5dcc0', htmlFor: "name" }, "Name"), h("input", { key: 'c93de873370a1123441a33d27c53c954bcc5f5ce', id: "name", type: "text", value: this.name, onInput: e => this.handleChange(e) }), this.newUri ? (h("div", { id: "new-uri", title: "This will be the URI of the new thing" }, this.newUri)) : null, h("input", { key: '9fc1fb39f7c582a069876642cc17678303c7d72b', id: "create", type: "submit", value: "Create", disabled: !this.canSubmit })));
     }
     handleChange(event) {
         this.name = event.target.value;

package/dist/components/pos-relations2.js

@@ -1,11 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { s as subscribeResource } from './ResourceAware.js';
-import { d as defineCustomElement$b } from './card.js';
-import { d as defineCustomElement$a } from './card-content.js';
-import { d as defineCustomElement$9 } from './card-header.js';
-import { d as defineCustomElement$8 } from './icon.js';
-import { d as defineCustomElement$7 } from './progress-bar.js';
-import { d as defineCustomElement$6 } from './ripple-effect.js';
+import { d as defineCustomElement$7 } from './icon.js';
+import { d as defineCustomElement$6 } from './progress-bar.js';
 import { d as defineCustomElement$5 } from './pos-description2.js';
 import { d as defineCustomElement$4 } from './pos-label2.js';
 import { d as defineCustomElement$3 } from './pos-predicate2.js';
@@ -41,39 +37,19 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-relations", "ion-card", "ion-card-content", "ion-card-header", "ion-icon", "ion-progress-bar", "ion-ripple-effect", "pos-description", "pos-label", "pos-predicate", "pos-resource", "pos-rich-link"];
+    const components = ["pos-relations", "ion-icon", "ion-progress-bar", "pos-description", "pos-label", "pos-predicate", "pos-resource", "pos-rich-link"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-relations":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PosRelations);
             }
             break;
-        case "ion-card":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$b();
-            }
-            break;
-        case "ion-card-content":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "ion-card-header":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
         case "ion-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "ion-progress-bar":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "ion-ripple-effect":
+        case "ion-progress-bar":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }

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

@@ -1 +1 @@
-{"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}
+{"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-resource2.js

@@ -1,11 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { s as store } from './session.js';
 import { s as subscribePodOs } from './PodOsAware.js';
-import { d as defineCustomElement$5 } from './card.js';
-import { d as defineCustomElement$4 } from './card-content.js';
-import { d as defineCustomElement$3 } from './card-header.js';
-import { d as defineCustomElement$2 } from './progress-bar.js';
-import { d as defineCustomElement$1 } from './ripple-effect.js';
+import { d as defineCustomElement$1 } from './progress-bar.js';
+
+const posResourceCss = "details.error {\n  margin: var(--size-2);\n  background-color: var(--pos-error-background-color);\n  border: var(--size-px) solid var(--pos-error-border-color);\n  padding: var(--size-2);\n  border-radius: var(--radius-md);\n\n  a {\n    color: var(--pos-normal-text-color);\n  }\n}\n";
+const PosResourceStyle0 = posResourceCss;
 
 const PosResource = /*@__PURE__*/ proxyCustomElement(class PosResource extends HTMLElement {
     constructor() {
@@ -63,9 +62,9 @@ const PosResource = /*@__PURE__*/ proxyCustomElement(class PosResource extends H
             return h("ion-progress-bar", { type: "indeterminate" });
         }
         if (this.error) {
-            return (h("ion-card", null, h("ion-card-header", null, h("p", null, "Sorry, something went wrong"), h("p", null, "Status:", 
+            return (h("details", { class: "error" }, h("summary", { title: "Click to expand" }, "\u26A0 Sorry, something went wrong"), h("p", null, "Status:", 
             // @ts-ignore
-            this.error.status), h("details", null, this.error.message)), h("ion-card-content", null, h("p", null, "You can try to open the link outside PodOS:"), h("a", { href: this.uri }, this.uri))));
+            this.error.status), h("p", null, this.error.message), h("p", null, "You can try to open the link outside PodOS: ", h("a", { href: this.uri }, this.uri))));
         }
         return h("slot", null);
     }
@@ -73,6 +72,7 @@ const PosResource = /*@__PURE__*/ proxyCustomElement(class PosResource extends H
         "os": ["loadResource"],
         "uri": ["loadResource"]
     }; }
+    static get style() { return PosResourceStyle0; }
 }, [1, "pos-resource", {
         "uri": [1],
         "lazy": [4],
@@ -90,34 +90,14 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-resource", "ion-card", "ion-card-content", "ion-card-header", "ion-progress-bar", "ion-ripple-effect"];
+    const components = ["pos-resource", "ion-progress-bar"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-resource":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PosResource);
             }
             break;
-        case "ion-card":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "ion-card-content":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "ion-card-header":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
         case "ion-progress-bar":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "ion-ripple-effect":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }

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

@@ -1 +1 @@
-{"file":"pos-resource2.js","mappings":";;;;;;;;;MAea,WAAW;IAJxB;;;;;;QAQW,cAAS,GAA6B,EAAE,CAAC;QAI1C,SAAI,GAAY,KAAK,CAAC;QAatB,YAAO,GAAY,IAAI,CAAC;QAOhC,iBAAY,GAAG,OAAO,EAAS;YAC7B,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;SACd,CAAC;KAoEH;IA3EC,iBAAiB;QACfA,KAAO,CAAC,QAAQ,CAAC,YAAY,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;QAC1D,cAAc,CAAC,IAAI,CAAC,CAAC;KACtB;IAOD,MAAM,eAAe,CAAC,KAA6B;QACjD,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SAC7B;QACD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC5B;IAID,MAAM,YAAY;QAChB,MAAM,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACpC;IAGD,MAAM,KAAK;QACT,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;KAC9B;IAEO,MAAM,WAAW,CAAC,QAAiB,KAAK;QAC9C,IAAI;YACF,IAAI,KAAK,EAAE;gBACT,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;gBACpB,MAAM,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;gBAC9B,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;aAC3C;YACD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC5C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YAClB,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ;gBAC7B,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;aAChC,CAAC,CAAC;SACJ;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,wBAAkB,IAAI,EAAC,eAAe,GAAG,CAAC;SAClD;QACD,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,QACE,oBACE,2BACE,2CAAkC,EAClC;;YAII,IAAI,CAAC,KAAK,CAAC,MAAM,CAEjB,EACJ,mBAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAW,CACvB,EAClB,4BACE,2DAAkD,EAClD,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,IAAG,IAAI,CAAC,GAAG,CAAK,CAChB,CACV,EACX;SACH;QACD,OAAO,eAAQ,CAAC;KACjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["session"],"sources":["src/components/pos-resource/pos-resource.tsx"],"sourcesContent":["import { PodOS, Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport session from '../../store/session';\nimport { PodOsAware, PodOsEventEmitter, subscribePodOs } from '../events/PodOsAware';\nimport { ResourceReceiver } from '../events/ResourceAware';\n\ninterface SubscribeResourceEvent extends CustomEvent {\n  detail: ResourceReceiver;\n}\n\n@Component({\n  tag: 'pos-resource',\n  shadow: true,\n})\nexport class PosResource implements PodOsAware {\n  @State() os: PodOS;\n\n  @State() resource: Thing;\n  @State() consumers: SubscribeResourceEvent[] = [];\n\n  @Prop() uri: string;\n\n  @Prop() lazy: boolean = false;\n\n  @Event({ eventName: 'pod-os:init' }) subscribePodOs: PodOsEventEmitter;\n\n  /**\n   * Indicates that the resource given in `uri` property has been loaded.\n   */\n  @Event({ eventName: 'pod-os:resource-loaded' }) resourceLoadedEmitter: EventEmitter;\n\n  @State()\n  private error: Error;\n\n  @State()\n  private loading: boolean = true;\n\n  componentWillLoad() {\n    session.onChange('isLoggedIn', () => this.loadResource());\n    subscribePodOs(this);\n  }\n\n  receivePodOs = async (os: PodOS) => {\n    this.os = os;\n  };\n\n  @Listen('pod-os:resource')\n  async provideResource(event: SubscribeResourceEvent) {\n    event.stopPropagation();\n    if (this.resource) {\n      event.detail(this.resource);\n    }\n    this.consumers.push(event);\n  }\n\n  @Watch('os')\n  @Watch('uri')\n  async loadResource() {\n    await this.getResource(!this.lazy);\n  }\n\n  @Method()\n  async fetch() {\n    await this.getResource(true);\n  }\n\n  private async getResource(fetch: boolean = false) {\n    try {\n      if (fetch) {\n        this.loading = true;\n        await this.os.fetch(this.uri);\n        this.resourceLoadedEmitter.emit(this.uri);\n      }\n      this.resource = this.os.store.get(this.uri);\n      this.error = null;\n      this.consumers.forEach(consumer => {\n        consumer.detail(this.resource);\n      });\n    } catch (err) {\n      this.error = err;\n    } finally {\n      this.loading = false;\n    }\n  }\n\n  render() {\n    if (this.loading) {\n      return <ion-progress-bar type=\"indeterminate\" />;\n    }\n    if (this.error) {\n      return (\n        <ion-card>\n          <ion-card-header>\n            <p>Sorry, something went wrong</p>\n            <p>\n              Status:\n              {\n                // @ts-ignore\n                this.error.status\n              }\n            </p>\n            <details>{this.error.message}</details>\n          </ion-card-header>\n          <ion-card-content>\n            <p>You can try to open the link outside PodOS:</p>\n            <a href={this.uri}>{this.uri}</a>\n          </ion-card-content>\n        </ion-card>\n      );\n    }\n    return <slot />;\n  }\n}\n"],"version":3}
+{"file":"pos-resource2.js","mappings":";;;;;AAAA,MAAM,cAAc,GAAG,8RAA8R,CAAC;AACtT,0BAAe,cAAc;;MCehB,WAAW;IALxB;;;;;;QASW,cAAS,GAA6B,EAAE,CAAC;QAI1C,SAAI,GAAY,KAAK,CAAC;QAatB,YAAO,GAAY,IAAI,CAAC;QAOhC,iBAAY,GAAG,OAAO,EAAS;YAC7B,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;SACd,CAAC;KAiEH;IAxEC,iBAAiB;QACfA,KAAO,CAAC,QAAQ,CAAC,YAAY,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;QAC1D,cAAc,CAAC,IAAI,CAAC,CAAC;KACtB;IAOD,MAAM,eAAe,CAAC,KAA6B;QACjD,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SAC7B;QACD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC5B;IAID,MAAM,YAAY;QAChB,MAAM,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACpC;IAGD,MAAM,KAAK;QACT,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;KAC9B;IAEO,MAAM,WAAW,CAAC,QAAiB,KAAK;QAC9C,IAAI;YACF,IAAI,KAAK,EAAE;gBACT,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;gBACpB,MAAM,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;gBAC9B,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;aAC3C;YACD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC5C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YAClB,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ;gBAC7B,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;aAChC,CAAC,CAAC;SACJ;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,wBAAkB,IAAI,EAAC,eAAe,GAAG,CAAC;SAClD;QACD,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,QACE,eAAS,KAAK,EAAC,OAAO,IACpB,eAAS,KAAK,EAAC,iBAAiB,yCAAwC,EACxE;;YAII,IAAI,CAAC,KAAK,CAAC,MAAM,CAEjB,EACJ,aAAI,IAAI,CAAC,KAAK,CAAC,OAAO,CAAK,EAC3B,6DAC8C,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,IAAG,IAAI,CAAC,GAAG,CAAK,CAC3E,CACI,EACV;SACH;QACD,OAAO,eAAQ,CAAC;KACjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["session"],"sources":["src/components/pos-resource/pos-resource.css?tag=pos-resource&encapsulation=shadow","src/components/pos-resource/pos-resource.tsx"],"sourcesContent":["details.error {\n  margin: var(--size-2);\n  background-color: var(--pos-error-background-color);\n  border: var(--size-px) solid var(--pos-error-border-color);\n  padding: var(--size-2);\n  border-radius: var(--radius-md);\n\n  a {\n    color: var(--pos-normal-text-color);\n  }\n}\n","import { PodOS, Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport session from '../../store/session';\nimport { PodOsAware, PodOsEventEmitter, subscribePodOs } from '../events/PodOsAware';\nimport { ResourceReceiver } from '../events/ResourceAware';\n\ninterface SubscribeResourceEvent extends CustomEvent {\n  detail: ResourceReceiver;\n}\n\n@Component({\n  tag: 'pos-resource',\n  shadow: true,\n  styleUrl: 'pos-resource.css',\n})\nexport class PosResource implements PodOsAware {\n  @State() os: PodOS;\n\n  @State() resource: Thing;\n  @State() consumers: SubscribeResourceEvent[] = [];\n\n  @Prop() uri: string;\n\n  @Prop() lazy: boolean = false;\n\n  @Event({ eventName: 'pod-os:init' }) subscribePodOs: PodOsEventEmitter;\n\n  /**\n   * Indicates that the resource given in `uri` property has been loaded.\n   */\n  @Event({ eventName: 'pod-os:resource-loaded' }) resourceLoadedEmitter: EventEmitter;\n\n  @State()\n  private error: Error;\n\n  @State()\n  private loading: boolean = true;\n\n  componentWillLoad() {\n    session.onChange('isLoggedIn', () => this.loadResource());\n    subscribePodOs(this);\n  }\n\n  receivePodOs = async (os: PodOS) => {\n    this.os = os;\n  };\n\n  @Listen('pod-os:resource')\n  async provideResource(event: SubscribeResourceEvent) {\n    event.stopPropagation();\n    if (this.resource) {\n      event.detail(this.resource);\n    }\n    this.consumers.push(event);\n  }\n\n  @Watch('os')\n  @Watch('uri')\n  async loadResource() {\n    await this.getResource(!this.lazy);\n  }\n\n  @Method()\n  async fetch() {\n    await this.getResource(true);\n  }\n\n  private async getResource(fetch: boolean = false) {\n    try {\n      if (fetch) {\n        this.loading = true;\n        await this.os.fetch(this.uri);\n        this.resourceLoadedEmitter.emit(this.uri);\n      }\n      this.resource = this.os.store.get(this.uri);\n      this.error = null;\n      this.consumers.forEach(consumer => {\n        consumer.detail(this.resource);\n      });\n    } catch (err) {\n      this.error = err;\n    } finally {\n      this.loading = false;\n    }\n  }\n\n  render() {\n    if (this.loading) {\n      return <ion-progress-bar type=\"indeterminate\" />;\n    }\n    if (this.error) {\n      return (\n        <details class=\"error\">\n          <summary title=\"Click to expand\">⚠ Sorry, something went wrong</summary>\n          <p>\n            Status:\n            {\n              // @ts-ignore\n              this.error.status\n            }\n          </p>\n          <p>{this.error.message}</p>\n          <p>\n            You can try to open the link outside PodOS: <a href={this.uri}>{this.uri}</a>\n          </p>\n        </details>\n      );\n    }\n    return <slot />;\n  }\n}\n"],"version":3}

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

@@ -1,11 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { s as subscribeResource } from './ResourceAware.js';
-import { d as defineCustomElement$b } from './card.js';
-import { d as defineCustomElement$a } from './card-content.js';
-import { d as defineCustomElement$9 } from './card-header.js';
-import { d as defineCustomElement$8 } from './icon.js';
-import { d as defineCustomElement$7 } from './progress-bar.js';
-import { d as defineCustomElement$6 } from './ripple-effect.js';
+import { d as defineCustomElement$7 } from './icon.js';
+import { d as defineCustomElement$6 } from './progress-bar.js';
 import { d as defineCustomElement$5 } from './pos-description2.js';
 import { d as defineCustomElement$4 } from './pos-label2.js';
 import { d as defineCustomElement$3 } from './pos-predicate2.js';
@@ -41,39 +37,19 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-reverse-relations", "ion-card", "ion-card-content", "ion-card-header", "ion-icon", "ion-progress-bar", "ion-ripple-effect", "pos-description", "pos-label", "pos-predicate", "pos-resource", "pos-rich-link"];
+    const components = ["pos-reverse-relations", "ion-icon", "ion-progress-bar", "pos-description", "pos-label", "pos-predicate", "pos-resource", "pos-rich-link"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-reverse-relations":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PosReverseRelations);
             }
             break;
-        case "ion-card":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$b();
-            }
-            break;
-        case "ion-card-content":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "ion-card-header":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
         case "ion-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "ion-progress-bar":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "ion-ripple-effect":
+        case "ion-progress-bar":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }

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

@@ -1 +1 @@
-{"file":"pos-reverse-relations2.js","mappings":";;;;;;;;;;;;;;AAAA,MAAM,sBAAsB,GAAG,ugCAAugC,CAAC;AACviC,kCAAe,sBAAsB;;MCQxB,mBAAmB;IALhC;;;;;QAMW,SAAI,GAAe,EAAE,CAAC;QAQ/B,oBAAe,GAAG,CAAC,QAAe;YAChC,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,gBAAgB,EAAE,CAAC;SACzC,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,MAAM,EAAE,CAAC,KAAK,KAAK,GAAI,CAC7D,EACL,WAAK,KAAK,EAAC,QAAQ,IAChB,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,KACd,cACE,qBAAe,GAAG,EAAE,GAAG,GAAI,CACxB,CACN,CAAC,CACE,CACF,CACP,CAAC,CAAC;QACH,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,cAAK,KAAK,CAAM,GAAG,IAAI,CAAC;KACvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-reverse-relations/pos-reverse-relations.css?tag=pos-reverse-relations&encapsulation=shadow","src/components/pos-reverse-relations/pos-reverse-relations.tsx"],"sourcesContent":[":host {\n  --background-base-color: 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","import { Relation, Thing } from '@pod-os/core';\nimport { Component, h, Event, EventEmitter, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../events/ResourceAware';\n\n@Component({\n  tag: 'pos-reverse-relations',\n  shadow: true,\n  styleUrl: 'pos-reverse-relations.css',\n})\nexport class PosReverseRelations implements ResourceAware {\n  @State() data: Relation[] = [];\n\n  @Event({ eventName: 'pod-os:resource' }) subscribeResource: EventEmitter;\n\n  componentWillLoad() {\n    subscribeResource(this);\n  }\n\n  receiveResource = (resource: Thing) => {\n    this.data = resource.reverseRelations();\n  };\n\n  render() {\n    const items = this.data.map(it => (\n      <div class=\"predicate-values\">\n        <dt>\n          <pos-predicate uri={it.predicate} label={`is ${it.label} of`} />\n        </dt>\n        <div class=\"values\">\n          {it.uris.map(uri => (\n            <dd>\n              <pos-rich-link uri={uri} />\n            </dd>\n          ))}\n        </div>\n      </div>\n    ));\n    return this.data.length > 0 ? <dl>{items}</dl> : null;\n  }\n}\n"],"version":3}
+{"file":"pos-reverse-relations2.js","mappings":";;;;;;;;;;AAAA,MAAM,sBAAsB,GAAG,ugCAAugC,CAAC;AACviC,kCAAe,sBAAsB;;MCQxB,mBAAmB;IALhC;;;;;QAMW,SAAI,GAAe,EAAE,CAAC;QAQ/B,oBAAe,GAAG,CAAC,QAAe;YAChC,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,gBAAgB,EAAE,CAAC;SACzC,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,MAAM,EAAE,CAAC,KAAK,KAAK,GAAI,CAC7D,EACL,WAAK,KAAK,EAAC,QAAQ,IAChB,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,KACd,cACE,qBAAe,GAAG,EAAE,GAAG,GAAI,CACxB,CACN,CAAC,CACE,CACF,CACP,CAAC,CAAC;QACH,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,cAAK,KAAK,CAAM,GAAG,IAAI,CAAC;KACvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-reverse-relations/pos-reverse-relations.css?tag=pos-reverse-relations&encapsulation=shadow","src/components/pos-reverse-relations/pos-reverse-relations.tsx"],"sourcesContent":[":host {\n  --background-base-color: 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","import { Relation, Thing } from '@pod-os/core';\nimport { Component, h, Event, EventEmitter, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../events/ResourceAware';\n\n@Component({\n  tag: 'pos-reverse-relations',\n  shadow: true,\n  styleUrl: 'pos-reverse-relations.css',\n})\nexport class PosReverseRelations implements ResourceAware {\n  @State() data: Relation[] = [];\n\n  @Event({ eventName: 'pod-os:resource' }) subscribeResource: EventEmitter;\n\n  componentWillLoad() {\n    subscribeResource(this);\n  }\n\n  receiveResource = (resource: Thing) => {\n    this.data = resource.reverseRelations();\n  };\n\n  render() {\n    const items = this.data.map(it => (\n      <div class=\"predicate-values\">\n        <dt>\n          <pos-predicate uri={it.predicate} label={`is ${it.label} of`} />\n        </dt>\n        <div class=\"values\">\n          {it.uris.map(uri => (\n            <dd>\n              <pos-rich-link uri={uri} />\n            </dd>\n          ))}\n        </div>\n      </div>\n    ));\n    return this.data.length > 0 ? <dl>{items}</dl> : null;\n  }\n}\n"],"version":3}

package/dist/components/pos-rich-link2.js

@@ -1,14 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$8 } from './card.js';
-import { d as defineCustomElement$7 } from './card-content.js';
-import { d as defineCustomElement$6 } from './card-header.js';
-import { d as defineCustomElement$5 } from './progress-bar.js';
-import { d as defineCustomElement$4 } from './ripple-effect.js';
+import { d as defineCustomElement$4 } from './progress-bar.js';
 import { d as defineCustomElement$3 } from './pos-description2.js';
 import { d as defineCustomElement$2 } from './pos-label2.js';
 import { d as defineCustomElement$1 } from './pos-resource2.js';
 
-const posRichLinkCss = ":host {\n  --background-color: inherit;\n  --label-color: var(--pos-normal-text-color);\n  --description-color: var(--pos-normal-text-color);\n  --uri-color: var(--pos-subtle-text-color);\n  --font-family: var(--font-sans);\n}\n\np.content {\n  background-color: var(--background-color);\n  line-height: var(--line-xs);\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: baseline;\n  gap: var(--size-1);\n\n  .url {\n    font-size: var(--scale-fluid-1);\n    color: var(--color-grey-500);\n  }\n}\n\na {\n  color: var(--label-color);\n  max-width: var(--prose-lg);\n  text-decoration: underline;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  text-decoration-thickness: var(--size-px);\n}\n\npos-label {\n  color: var(--label-color);\n  font-size: var(--scale-fluid-2);\n  margin-bottom: var(--size-1);\n}\n\npos-description {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  font-weight: var(--weight-light);\n  color: var(--description-color);\n  font-size: var(--scale-fluid-2);\n}\n\n@media (min-width: 640px) {\n  pos-label {\n    font-size: var(--scale-fluid-0);\n  }\n  pos-description {\n    font-size: var(--scale-fluid-1);\n  }\n\n  p.content {\n    .url {\n      font-size: var(--scale-fluid-000);\n    }\n  }\n}\n";
+const posRichLinkCss = ":host {\n  --background-color: inherit;\n  --label-color: var(--pos-normal-text-color);\n  --description-color: var(--pos-normal-text-color);\n  --uri-color: var(--pos-subtle-text-color);\n  --font-family: var(--font-sans);\n}\n\np.content {\n  background-color: var(--background-color);\n  line-height: var(--line-xs);\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: baseline;\n  gap: var(--size-1);\n\n  .url {\n    font-size: var(--scale-fluid-1);\n    color: var(--pos-subtle-text-color);\n  }\n}\n\na {\n  color: var(--label-color);\n  max-width: var(--prose-lg);\n  text-decoration: underline;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  text-decoration-thickness: var(--size-px);\n}\n\npos-label {\n  color: var(--label-color);\n  font-size: var(--scale-fluid-2);\n  margin-bottom: var(--size-1);\n}\n\npos-description {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  font-weight: var(--weight-light);\n  color: var(--description-color);\n  font-size: var(--scale-fluid-2);\n}\n\n@media (min-width: 640px) {\n  pos-label {\n    font-size: var(--scale-fluid-0);\n  }\n  pos-description {\n    font-size: var(--scale-fluid-1);\n  }\n\n  p.content {\n    .url {\n      font-size: var(--scale-fluid-000);\n    }\n  }\n}\n";
 const PosRichLinkStyle0 = posRichLinkCss;
 
 const PosRichLink = /*@__PURE__*/ proxyCustomElement(class PosRichLink extends HTMLElement {
@@ -19,10 +15,10 @@ const PosRichLink = /*@__PURE__*/ proxyCustomElement(class PosRichLink extends H
         this.linkEmitter = createEvent(this, "pod-os:link", 7);
     }
     render() {
-        return (h("pos-resource", { key: '3b236e4b091933214cdedb460d916d8d09d5dca8', lazy: true, uri: this.uri }, h("p", { key: '988ccbc7283df323fe9a3230fcb8761bc44ef71f', class: "content" }, h("a", { key: '48054e89ea97d8a5b974811dfbfeab2dbc49a7da', href: this.uri, onClick: e => {
+        return (h("pos-resource", { key: '0a794cc8287b13f163a813dc6a4f87b2f00e028b', lazy: true, uri: this.uri }, h("p", { key: 'b7a44482a82cd69228f144b04e9ec20b84410339', class: "content" }, h("a", { key: '0d218d4d5c1991c767b66f0d37c5476038e7a0fb', href: this.uri, onClick: e => {
                 e.preventDefault();
                 this.linkEmitter.emit(this.uri);
-            } }, h("pos-label", { key: '9c1cb23e622d7130d37bfa17106e345949f44d9e' })), h("span", { key: 'c4f1532dffb691838947d2e9e79d4f8a51ef1eeb', class: "url" }, new URL(this.uri).host), h("pos-description", { key: 'c9a4b76eb86af15f908b820f06c4631a22f0c34f' }))));
+            } }, h("pos-label", { key: 'd04048986a7a4da138608f187a2f27e6313d9a6e' })), h("span", { key: '53a05023aa2fec4725e1d7e59acee9888476ecac', class: "url" }, new URL(this.uri).host), h("pos-description", { key: 'a73de2d208b684a9f555cda312e94df4282afba0' }))));
     }
     static get style() { return PosRichLinkStyle0; }
 }, [1, "pos-rich-link", {
@@ -32,34 +28,14 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-rich-link", "ion-card", "ion-card-content", "ion-card-header", "ion-progress-bar", "ion-ripple-effect", "pos-description", "pos-label", "pos-resource"];
+    const components = ["pos-rich-link", "ion-progress-bar", "pos-description", "pos-label", "pos-resource"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-rich-link":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PosRichLink);
             }
             break;
-        case "ion-card":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "ion-card-content":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "ion-card-header":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
         case "ion-progress-bar":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "ion-ripple-effect":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }

package/dist/components/pos-rich-link2.js.map

@@ -1 +1 @@
-{"file":"pos-rich-link2.js","mappings":";;;;;;;;;;AAAA,MAAM,cAAc,GAAG,u1CAAu1C,CAAC;AAC/2C,0BAAe,cAAc;;MCMhB,WAAW;;;;;;;IAKtB,MAAM;QACJ,QACE,qEAAc,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,IACrC,0DAAG,KAAK,EAAC,SAAS,IAChB,0DACE,IAAI,EAAE,IAAI,CAAC,GAAG,EACd,OAAO,EAAE,CAAC;gBACR,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;aACjC,IAED,mEAAa,CACX,EACJ,6DAAM,KAAK,EAAC,KAAK,IAAE,IAAI,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAQ,EACjD,yEAAmB,CACjB,CACS,EACf;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-rich-link/pos-rich-link.css?tag=pos-rich-link&encapsulation=shadow","src/components/pos-rich-link/pos-rich-link.tsx"],"sourcesContent":[":host {\n  --background-color: inherit;\n  --label-color: var(--pos-normal-text-color);\n  --description-color: var(--pos-normal-text-color);\n  --uri-color: var(--pos-subtle-text-color);\n  --font-family: var(--font-sans);\n}\n\np.content {\n  background-color: var(--background-color);\n  line-height: var(--line-xs);\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: baseline;\n  gap: var(--size-1);\n\n  .url {\n    font-size: var(--scale-fluid-1);\n    color: var(--color-grey-500);\n  }\n}\n\na {\n  color: var(--label-color);\n  max-width: var(--prose-lg);\n  text-decoration: underline;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  text-decoration-thickness: var(--size-px);\n}\n\npos-label {\n  color: var(--label-color);\n  font-size: var(--scale-fluid-2);\n  margin-bottom: var(--size-1);\n}\n\npos-description {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  font-weight: var(--weight-light);\n  color: var(--description-color);\n  font-size: var(--scale-fluid-2);\n}\n\n@media (min-width: 640px) {\n  pos-label {\n    font-size: var(--scale-fluid-0);\n  }\n  pos-description {\n    font-size: var(--scale-fluid-1);\n  }\n\n  p.content {\n    .url {\n      font-size: var(--scale-fluid-000);\n    }\n  }\n}\n","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pos-rich-link',\n  shadow: true,\n  styleUrl: 'pos-rich-link.css',\n})\nexport class PosRichLink {\n  @Prop() uri: string;\n\n  @Event({ eventName: 'pod-os:link' }) linkEmitter: EventEmitter;\n\n  render() {\n    return (\n      <pos-resource lazy={true} uri={this.uri}>\n        <p class=\"content\">\n          <a\n            href={this.uri}\n            onClick={e => {\n              e.preventDefault();\n              this.linkEmitter.emit(this.uri);\n            }}\n          >\n            <pos-label />\n          </a>\n          <span class=\"url\">{new URL(this.uri).host}</span>\n          <pos-description />\n        </p>\n      </pos-resource>\n    );\n  }\n}\n"],"version":3}
+{"file":"pos-rich-link2.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,81CAA81C,CAAC;AACt3C,0BAAe,cAAc;;MCMhB,WAAW;;;;;;;IAKtB,MAAM;QACJ,QACE,qEAAc,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,IACrC,0DAAG,KAAK,EAAC,SAAS,IAChB,0DACE,IAAI,EAAE,IAAI,CAAC,GAAG,EACd,OAAO,EAAE,CAAC;gBACR,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;aACjC,IAED,mEAAa,CACX,EACJ,6DAAM,KAAK,EAAC,KAAK,IAAE,IAAI,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAQ,EACjD,yEAAmB,CACjB,CACS,EACf;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pos-rich-link/pos-rich-link.css?tag=pos-rich-link&encapsulation=shadow","src/components/pos-rich-link/pos-rich-link.tsx"],"sourcesContent":[":host {\n  --background-color: inherit;\n  --label-color: var(--pos-normal-text-color);\n  --description-color: var(--pos-normal-text-color);\n  --uri-color: var(--pos-subtle-text-color);\n  --font-family: var(--font-sans);\n}\n\np.content {\n  background-color: var(--background-color);\n  line-height: var(--line-xs);\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: baseline;\n  gap: var(--size-1);\n\n  .url {\n    font-size: var(--scale-fluid-1);\n    color: var(--pos-subtle-text-color);\n  }\n}\n\na {\n  color: var(--label-color);\n  max-width: var(--prose-lg);\n  text-decoration: underline;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  text-decoration-thickness: var(--size-px);\n}\n\npos-label {\n  color: var(--label-color);\n  font-size: var(--scale-fluid-2);\n  margin-bottom: var(--size-1);\n}\n\npos-description {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  font-weight: var(--weight-light);\n  color: var(--description-color);\n  font-size: var(--scale-fluid-2);\n}\n\n@media (min-width: 640px) {\n  pos-label {\n    font-size: var(--scale-fluid-0);\n  }\n  pos-description {\n    font-size: var(--scale-fluid-1);\n  }\n\n  p.content {\n    .url {\n      font-size: var(--scale-fluid-000);\n    }\n  }\n}\n","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pos-rich-link',\n  shadow: true,\n  styleUrl: 'pos-rich-link.css',\n})\nexport class PosRichLink {\n  @Prop() uri: string;\n\n  @Event({ eventName: 'pod-os:link' }) linkEmitter: EventEmitter;\n\n  render() {\n    return (\n      <pos-resource lazy={true} uri={this.uri}>\n        <p class=\"content\">\n          <a\n            href={this.uri}\n            onClick={e => {\n              e.preventDefault();\n              this.linkEmitter.emit(this.uri);\n            }}\n          >\n            <pos-label />\n          </a>\n          <span class=\"url\">{new URL(this.uri).host}</span>\n          <pos-description />\n        </p>\n      </pos-resource>\n    );\n  }\n}\n"],"version":3}

package/dist/components/pos-router2.js

@@ -327,7 +327,7 @@ const PosRouter = /*@__PURE__*/ proxyCustomElement(class PosRouter extends HTMLE
         this.routeChanged.emit(this.uri);
     }
     render() {
-        return h("slot", { key: '5c111993377abe4ad03de3c8678c0a5a9529085a' });
+        return h("slot", { key: '221db70a52ce7ebc7e9c171142dcf94f252fa985' });
     }
     static get style() { return PosRouterStyle0; }
 }, [4, "pos-router", {

package/dist/components/pos-select-term2.js

@@ -28,7 +28,7 @@ const PosSelectTerm = /*@__PURE__*/ proxyCustomElement(class PosSelectTerm exten
         this.termSelected.emit({ uri: event.target.value });
     }
     render() {
-        return (h(Host, { key: 'd8316308e089f89fdbb16dbdf799caa308713a14' }, h("input", { key: 'aab9ef56274dd2608c346673fd9be2420b0f6dbf', part: "input", list: "terms", placeholder: this.placeholder, value: this.value, onChange: ev => this.handleChange(ev) }), h("datalist", { key: '5b54e6c44cd926b9b40fe79de1afb12326f919bc', part: "terms", id: "terms" }, this.terms.map(term => (h("option", { value: term.uri }, term.shorthand))))));
+        return (h(Host, { key: '7a548735e2a0478fa1e63e2a880ca61f0f43d91c' }, h("input", { key: '9549691026f4bf42a3048f2af3a78bd71536b160', part: "input", list: "terms", placeholder: this.placeholder, value: this.value, onChange: ev => this.handleChange(ev) }), h("datalist", { key: 'adfd77a001389d6cc092e3b054ef12e45d562d54', part: "terms", id: "terms" }, this.terms.map(term => (h("option", { value: term.uri }, term.shorthand))))));
     }
     static get delegatesFocus() { return true; }
     static get watchers() { return {