@pod-os/elements 0.25.3-rc.ba1a8fa.0 → 0.25.3-rc.def4131.0

package/dist/components/ion-row.js

@@ -1,33 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { g as getIonMode } from './ionic-global.js';
-
-const rowCss = ":host{display:flex;flex-wrap:wrap}";
-const IonRowStyle0 = rowCss;
-
-const Row = /*@__PURE__*/ proxyCustomElement(class Row extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-    }
-    render() {
-        return (h(Host, { key: '242c9a45b0bb39af2aebf412fdfa9a176babc834', class: getIonMode(this) }, h("slot", { key: 'd9015d663d631bbf20bd3e0821fed874cd6c5156' })));
-    }
-    static get style() { return IonRowStyle0; }
-}, [1, "ion-row"]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ion-row"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ion-row":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, Row);
-            }
-            break;
-    } });
-}
+import { R as Row, d as defineCustomElement$1 } from './row.js';
 
 const IonRow = Row;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ion-row.js.map

@@ -1 +1 @@
-{"file":"ion-row.js","mappings":";;;AAAA,MAAM,MAAM,GAAG,oCAAoC,CAAC;AACpD,qBAAe,MAAM;;MCIR,GAAG;;;;;;IACZ,MAAM;QACF,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,CAAC,CAAC,EAAE;KAClK;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["../node_modules/@ionic/core/dist/collection/components/row/row.css?tag=ion-row&encapsulation=shadow","../node_modules/@ionic/core/dist/collection/components/row/row.js"],"sourcesContent":["/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n:host {\n  display: flex;\n  flex-wrap: wrap;\n}","/*!\n * (C) Ionic http://ionicframework.com - MIT License\n */\nimport { Host, h } from \"@stencil/core\";\nimport { getIonMode } from \"../../global/ionic-global\";\nexport class Row {\n    render() {\n        return (h(Host, { key: '242c9a45b0bb39af2aebf412fdfa9a176babc834', class: getIonMode(this) }, h(\"slot\", { key: 'd9015d663d631bbf20bd3e0821fed874cd6c5156' })));\n    }\n    static get is() { return \"ion-row\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"row.scss\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"row.css\"]\n        };\n    }\n}\n"],"version":3}
+{"file":"ion-row.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/pos-add-new-thing2.js

@@ -17,7 +17,7 @@ const PosAddNewThing = /*@__PURE__*/ proxyCustomElement(class PosAddNewThing ext
         this.dialog.showModal();
     }
     render() {
-        return (h(Host, { key: '6142a141ef03ca93a362a6b00ebe8d515c3a677a' }, h("button", { key: '72ecf353cd3a7d2d68f9ef28eb1bbe7fdb88b700', id: "new", title: "Add a new thing", onClick: () => this.openDialog() }, h("ion-icon", { key: 'bd05d75c42c10de6df519575787fc66eafb22930', name: "add-circle-outline" })), h("pos-dialog", { key: '23cf0118149704dfca16758970e4f4658e87e946', ref: el => (this.dialog = el) }, h("span", { key: '5af7b7f618cc20684c39134b5ea295400e651cb6', slot: "title" }, "Add a new thing"), h("pos-new-thing-form", { key: '895496c2f6ede3c8677d9d918e0b13582090baed', slot: "content", referenceUri: this.referenceUri }))));
+        return (h(Host, { key: '5ed3ba3982467778ed2b9b02090c230acb6b1762' }, h("button", { key: '96ff5dbd0ba4ca4d8c1d25045efa06fea062e9cf', id: "new", title: "Add a new thing", onClick: () => this.openDialog() }, h("ion-icon", { key: '201a19c8ecb39e0e913d3fb8cf1ebee06bc41df5', name: "add-circle-outline" })), h("pos-dialog", { key: '421da81e6faf52119fe600cc388663299eab67ec', ref: el => (this.dialog = el) }, h("span", { key: '454e6e05dc478e9c1b378cb3308f006fab4d8738', slot: "title" }, "Add a new thing"), h("pos-new-thing-form", { key: 'a469379848776a4c7e9f8e3f94da76ba048d7fab', slot: "content", referenceUri: this.referenceUri }))));
     }
     static get style() { return PosAddNewThingStyle0; }
 }, [1, "pos-add-new-thing", {

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

@@ -1,4 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$y } from './card.js';
+import { d as defineCustomElement$x } from './card-content.js';
+import { d as defineCustomElement$w } from './card-header.js';
 import { d as defineCustomElement$v } from './icon.js';
 import { d as defineCustomElement$u } from './progress-bar.js';
 import { d as defineCustomElement$t } from './ripple-effect.js';
@@ -75,13 +78,28 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-app-browser", "ion-icon", "ion-progress-bar", "ion-ripple-effect", "ion-searchbar", "ion-skeleton-text", "ion-toast", "pos-add-new-thing", "pos-app", "pos-app-dashboard", "pos-app-settings", "pos-description", "pos-dialog", "pos-error-toast", "pos-example-resources", "pos-getting-started", "pos-image", "pos-internal-router", "pos-label", "pos-login", "pos-login-form", "pos-make-findable", "pos-navigation-bar", "pos-new-thing-form", "pos-picture", "pos-resource", "pos-rich-link", "pos-router", "pos-select-term", "pos-setting-offline-cache", "pos-type-router"];
+    const components = ["pos-app-browser", "ion-card", "ion-card-content", "ion-card-header", "ion-icon", "ion-progress-bar", "ion-ripple-effect", "ion-searchbar", "ion-skeleton-text", "ion-toast", "pos-add-new-thing", "pos-app", "pos-app-dashboard", "pos-app-settings", "pos-description", "pos-dialog", "pos-error-toast", "pos-example-resources", "pos-getting-started", "pos-image", "pos-internal-router", "pos-label", "pos-login", "pos-login-form", "pos-make-findable", "pos-navigation-bar", "pos-new-thing-form", "pos-picture", "pos-resource", "pos-rich-link", "pos-router", "pos-select-term", "pos-setting-offline-cache", "pos-type-router"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-app-browser":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PosAppBrowser$1);
             }
             break;
+        case "ion-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$y();
+            }
+            break;
+        case "ion-card-content":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$x();
+            }
+            break;
+        case "ion-card-header":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$w();
+            }
+            break;
         case "ion-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$v();

package/dist/components/pos-app-browser.js.map

@@ -1 +1 @@
-{"file":"pos-app-browser.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,gBAAgB,GAAG,60CAA60C,CAAC;AACv2C,4BAAe,gBAAgB;;MCKlBA,eAAa;IAJ1B;;;QAKU,2BAAsB,GAAY,KAAK,CAAC;;;;;;;QAQxC,SAAI,GAAyB,YAAY,CAAC;QAEzC,QAAG,GAAG,EAAE,CAAC;KAoCnB;IAlCC,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,gEAAS,sBAAsB,EAAE,IAAI,CAAC,sBAAsB,IAC1D,0EACE,mEAAY,IAAI,EAAE,IAAI,CAAC,IAAI,4BAA0B,CAAC,KAAK,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,MAAM,CAAC,IAC7E,iEACE,0EAAmB,YAAY,EAAE,IAAI,CAAC,GAAG,GAAsB,EAC/D,2EAAoB,GAAG,EAAE,IAAI,CAAC,GAAG,KAAK,kBAAkB,GAAG,EAAE,GAAG,IAAI,CAAC,GAAG,GAAuB,EAC/F,mEAAuB,CAChB,EACT,+DACG,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,SAAS,CAAC,IAC7B,2BAAqB,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,KAEtC,oBAAc,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,IACxC,0BAAmB,CACN,CAChB,CACI,EACP,iEACE,EAAC,IAAI,sDAAG,EACR,+EAA0B,EAC1B,mEAAc,EACd,0DAAG,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,wBAAwB,sBAE7C,CACG,CACE,CACG,CACV,CACL,EACP;KACH;;;;;;;AAGH,MAAM,IAAI,GAAG;IACX,QACE,WAAK,OAAO,EAAC,aAAa,EAAC,KAAK,EAAC,4BAA4B,IAC3D,YACE,CAAC,EAAC,6CAA6C,EAC/C,KAAK,EAAE;YACL,MAAM,EAAE,SAAS;YACjB,QAAQ,EAAE,SAAS;YACnB,cAAc,EAAE,IAAI;SACrB,qBACe,OAAO,GACvB,EAEF,YACE,CAAC,EAAC,0EAA0E,EAC5E,KAAK,EAAE;YACL,MAAM,EAAE,OAAO;YACf,QAAQ,EAAE,OAAO;YACjB,cAAc,EAAE,IAAI;SACrB,qBACe,OAAO,GACvB,EAEF,YACE,CAAC,EAAC,gDAAgD,EAClD,KAAK,EAAE;YACL,MAAM,EAAE,SAAS;YACjB,QAAQ,EAAE,SAAS;YACnB,cAAc,EAAE,IAAI;SACrB,qBACe,OAAO,GACvB,CACE,EACN;AACJ,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PosAppBrowser"],"sources":["src/apps/pos-app-browser/pos-app-browser.css?tag=pos-app-browser","src/apps/pos-app-browser/pos-app-browser.tsx"],"sourcesContent":["pos-router {\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\npos-navigation-bar {\n  max-width: var(--width-lg);\n  margin: 0;\n}\n\npos-add-new-thing,\npos-login {\n  flex: 0 1 auto; /* Behält die Breite des Inhalts bei */\n}\n\nheader,\nfooter {\n  display: flex;\n  gap: var(--size-1);\n  height: auto;\n  justify-content: center;\n  align-items: center;\n  padding: var(--size-1);\n}\n\nfooter svg {\n  width: var(--size-5);\n  height: var(--size-5);\n}\n\nfooter {\n  font-size: var(--scale-fluid-000);\n\n  .settings {\n    padding: 0 var(--size-1);\n    text-decoration: none;\n    background-color: var(--pos-background-color);\n    border: 1px solid var(--pos-secondary-border-color);\n    color: var(--pos-secondary-border-color);\n    border-radius: var(--radius-xs);\n\n    &:hover {\n      background-color: var(--pos-secondary-border-color);\n      color: var(--pos-background-color);\n    }\n  }\n}\n\nheader {\n  flex-wrap: wrap;\n  padding: 0 var(--size-8);\n}\n\nmain {\n  flex: 1;\n  max-height: 100vh;\n  overflow: auto;\n}\n\n@media (max-width: 640px) {\n  header {\n    padding: 0 var(--size-1) var(--size-1);\n    justify-content: space-between;\n  }\n\n  pos-navigation-bar {\n    flex-basis: 100%;\n    order: 0;\n  }\n\n  pos-add-new-thing,\n  pos-login {\n    order: 1;\n  }\n}\n","import { Component, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'pos-app-browser',\n  styleUrl: 'pos-app-browser.css',\n})\nexport class PosAppBrowser {\n  @Prop() restorePreviousSession: boolean = false;\n\n  /**\n   * The mode the app is running in:\n   *\n   * - standalone:  use this when you deploy it as a standalone web application\n   * - pod: use this when you host this app as a default interface for you pod\n   */\n  @Prop() mode: 'standalone' | 'pod' = 'standalone';\n\n  @State() uri = '';\n\n  render() {\n    return (\n      <Host>\n        <pos-app restorePreviousSession={this.restorePreviousSession}>\n          <pos-error-toast>\n            <pos-router mode={this.mode} onPod-os:route-changed={e => (this.uri = e.detail)}>\n              <header>\n                <pos-add-new-thing referenceUri={this.uri}></pos-add-new-thing>\n                <pos-navigation-bar uri={this.uri === 'pod-os:dashboard' ? '' : this.uri}></pos-navigation-bar>\n                <pos-login></pos-login>\n              </header>\n              <main>\n                {this.uri.startsWith('pod-os:') ? (\n                  <pos-internal-router uri={this.uri} />\n                ) : (\n                  <pos-resource key={this.uri} uri={this.uri}>\n                    <pos-type-router />\n                  </pos-resource>\n                )}\n              </main>\n              <footer>\n                <Logo />\n                <span>PodOS Browser</span>\n                <span>|</span>\n                <a class=\"settings\" href=\"?uri=pod-os%3Asettings\">\n                  ⚙ Settings\n                </a>\n              </footer>\n            </pos-router>\n          </pos-error-toast>\n        </pos-app>\n      </Host>\n    );\n  }\n}\n\nconst Logo = () => {\n  return (\n    <svg viewBox=\"0 0 400 400\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M50 350 L50 100 L200 50 L350 100 L350 350 Z\"\n        style={{\n          'fill': '#008BF8',\n          'stroke': '#008BF8',\n          'stroke-width': '70',\n        }}\n        stroke-linejoin=\"round\"\n      />\n\n      <path\n        d=\"M100 300 L100 150 L200 120 L300 150 L300 300 L130 300 L130 370 L100 370Z\"\n        style={{\n          'fill': 'white',\n          'stroke': 'white',\n          'stroke-width': '45',\n        }}\n        stroke-linejoin=\"round\"\n      />\n\n      <path\n        d=\"M150 250 L150 200 L200 180 L250 200 L250 250 Z\"\n        style={{\n          'fill': '#DC0073',\n          'stroke': '#DC0073',\n          'stroke-width': '20',\n        }}\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  );\n};\n"],"version":3}
+{"file":"pos-app-browser.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,gBAAgB,GAAG,60CAA60C,CAAC;AACv2C,4BAAe,gBAAgB;;MCKlBA,eAAa;IAJ1B;;;QAKU,2BAAsB,GAAY,KAAK,CAAC;;;;;;;QAQxC,SAAI,GAAyB,YAAY,CAAC;QAEzC,QAAG,GAAG,EAAE,CAAC;KAoCnB;IAlCC,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,gEAAS,sBAAsB,EAAE,IAAI,CAAC,sBAAsB,IAC1D,0EACE,mEAAY,IAAI,EAAE,IAAI,CAAC,IAAI,4BAA0B,CAAC,KAAK,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,MAAM,CAAC,IAC7E,iEACE,0EAAmB,YAAY,EAAE,IAAI,CAAC,GAAG,GAAsB,EAC/D,2EAAoB,GAAG,EAAE,IAAI,CAAC,GAAG,KAAK,kBAAkB,GAAG,EAAE,GAAG,IAAI,CAAC,GAAG,GAAuB,EAC/F,mEAAuB,CAChB,EACT,+DACG,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,SAAS,CAAC,IAC7B,2BAAqB,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,KAEtC,oBAAc,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,IACxC,0BAAmB,CACN,CAChB,CACI,EACP,iEACE,EAAC,IAAI,sDAAG,EACR,+EAA0B,EAC1B,mEAAc,EACd,0DAAG,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,wBAAwB,sBAE7C,CACG,CACE,CACG,CACV,CACL,EACP;KACH;;;;;;;AAGH,MAAM,IAAI,GAAG;IACX,QACE,WAAK,OAAO,EAAC,aAAa,EAAC,KAAK,EAAC,4BAA4B,IAC3D,YACE,CAAC,EAAC,6CAA6C,EAC/C,KAAK,EAAE;YACL,MAAM,EAAE,SAAS;YACjB,QAAQ,EAAE,SAAS;YACnB,cAAc,EAAE,IAAI;SACrB,qBACe,OAAO,GACvB,EAEF,YACE,CAAC,EAAC,0EAA0E,EAC5E,KAAK,EAAE;YACL,MAAM,EAAE,OAAO;YACf,QAAQ,EAAE,OAAO;YACjB,cAAc,EAAE,IAAI;SACrB,qBACe,OAAO,GACvB,EAEF,YACE,CAAC,EAAC,gDAAgD,EAClD,KAAK,EAAE;YACL,MAAM,EAAE,SAAS;YACjB,QAAQ,EAAE,SAAS;YACnB,cAAc,EAAE,IAAI;SACrB,qBACe,OAAO,GACvB,CACE,EACN;AACJ,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PosAppBrowser"],"sources":["src/apps/pos-app-browser/pos-app-browser.css?tag=pos-app-browser","src/apps/pos-app-browser/pos-app-browser.tsx"],"sourcesContent":["pos-router {\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\npos-navigation-bar {\n  max-width: var(--width-lg);\n  margin: 0;\n}\n\npos-add-new-thing,\npos-login {\n  flex: 0 1 auto; /* Behält die Breite des Inhalts bei */\n}\n\nheader,\nfooter {\n  display: flex;\n  gap: var(--size-1);\n  height: auto;\n  justify-content: center;\n  align-items: center;\n  padding: var(--size-1);\n}\n\nfooter svg {\n  width: var(--size-5);\n  height: var(--size-5);\n}\n\nfooter {\n  font-size: var(--scale-fluid-000);\n\n  .settings {\n    padding: 0 var(--size-1);\n    text-decoration: none;\n    background-color: var(--pos-background-color);\n    border: 1px solid var(--pos-secondary-border-color);\n    color: var(--pos-secondary-border-color);\n    border-radius: var(--radius-xs);\n\n    &:hover {\n      background-color: var(--pos-secondary-border-color);\n      color: var(--pos-background-color);\n    }\n  }\n}\n\nheader {\n  flex-wrap: wrap;\n  padding: 0 var(--size-8);\n}\n\nmain {\n  flex: 1;\n  max-height: 100vh;\n  overflow: auto;\n}\n\n@media (max-width: 640px) {\n  header {\n    padding: 0 var(--size-1) var(--size-1);\n    justify-content: space-between;\n  }\n\n  pos-navigation-bar {\n    flex-basis: 100%;\n    order: 0;\n  }\n\n  pos-add-new-thing,\n  pos-login {\n    order: 1;\n  }\n}\n","import { Component, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'pos-app-browser',\n  styleUrl: 'pos-app-browser.css',\n})\nexport class PosAppBrowser {\n  @Prop() restorePreviousSession: boolean = false;\n\n  /**\n   * The mode the app is running in:\n   *\n   * - standalone:  use this when you deploy it as a standalone web application\n   * - pod: use this when you host this app as a default interface for you pod\n   */\n  @Prop() mode: 'standalone' | 'pod' = 'standalone';\n\n  @State() uri = '';\n\n  render() {\n    return (\n      <Host>\n        <pos-app restorePreviousSession={this.restorePreviousSession}>\n          <pos-error-toast>\n            <pos-router mode={this.mode} onPod-os:route-changed={e => (this.uri = e.detail)}>\n              <header>\n                <pos-add-new-thing referenceUri={this.uri}></pos-add-new-thing>\n                <pos-navigation-bar uri={this.uri === 'pod-os:dashboard' ? '' : this.uri}></pos-navigation-bar>\n                <pos-login></pos-login>\n              </header>\n              <main>\n                {this.uri.startsWith('pod-os:') ? (\n                  <pos-internal-router uri={this.uri} />\n                ) : (\n                  <pos-resource key={this.uri} uri={this.uri}>\n                    <pos-type-router />\n                  </pos-resource>\n                )}\n              </main>\n              <footer>\n                <Logo />\n                <span>PodOS Browser</span>\n                <span>|</span>\n                <a class=\"settings\" href=\"?uri=pod-os%3Asettings\">\n                  ⚙ Settings\n                </a>\n              </footer>\n            </pos-router>\n          </pos-error-toast>\n        </pos-app>\n      </Host>\n    );\n  }\n}\n\nconst Logo = () => {\n  return (\n    <svg viewBox=\"0 0 400 400\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M50 350 L50 100 L200 50 L350 100 L350 350 Z\"\n        style={{\n          'fill': '#008BF8',\n          'stroke': '#008BF8',\n          'stroke-width': '70',\n        }}\n        stroke-linejoin=\"round\"\n      />\n\n      <path\n        d=\"M100 300 L100 150 L200 120 L300 150 L300 300 L130 300 L130 370 L100 370Z\"\n        style={{\n          'fill': 'white',\n          'stroke': 'white',\n          'stroke-width': '45',\n        }}\n        stroke-linejoin=\"round\"\n      />\n\n      <path\n        d=\"M150 250 L150 200 L200 180 L250 200 L250 250 Z\"\n        style={{\n          'fill': '#DC0073',\n          'stroke': '#DC0073',\n          'stroke-width': '20',\n        }}\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  );\n};\n"],"version":3}

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

@@ -1,5 +1,9 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$7 } from './progress-bar.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 './progress-bar.js';
+import { d as defineCustomElement$7 } from './ripple-effect.js';
 import { d as defineCustomElement$6 } from './pos-description2.js';
 import { d as defineCustomElement$5 } from './pos-example-resources2.js';
 import { d as defineCustomElement$4 } from './pos-getting-started2.js';
@@ -25,14 +29,34 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-app-dashboard", "ion-progress-bar", "pos-description", "pos-example-resources", "pos-getting-started", "pos-label", "pos-resource", "pos-rich-link"];
+    const components = ["pos-app-dashboard", "ion-card", "ion-card-content", "ion-card-header", "ion-progress-bar", "ion-ripple-effect", "pos-description", "pos-example-resources", "pos-getting-started", "pos-label", "pos-resource", "pos-rich-link"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-app-dashboard":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PosAppDashboard);
             }
             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-progress-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "ion-ripple-effect":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }

package/dist/components/pos-app-dashboard2.js.map

@@ -1 +1 @@
-{"file":"pos-app-dashboard2.js","mappings":";;;;;;;;;AAAA,MAAM,kBAAkB,GAAG,2MAA2M,CAAC;AACvO,8BAAe,kBAAkB;;MCMpB,eAAe;;;;;;IAC1B,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,6EAA2C,EAC3C,+EAA+C,CAC1C,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/apps/pos-app-dashboard/pos-app-dashboard.css?tag=pos-app-dashboard&encapsulation=shadow","src/apps/pos-app-dashboard/pos-app-dashboard.tsx"],"sourcesContent":[":host {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(var(--size-12), var(--size-96)));\n  gap: var(--size-4);\n  padding: var(--size-2);\n  justify-content: center;\n  align-items: start;\n  justify-items: stretch;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'pos-app-dashboard',\n  styleUrl: 'pos-app-dashboard.css',\n  shadow: true,\n})\nexport class PosAppDashboard {\n  render() {\n    return (\n      <Host>\n        <pos-getting-started></pos-getting-started>\n        <pos-example-resources></pos-example-resources>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pos-app-dashboard2.js","mappings":";;;;;;;;;;;;;AAAA,MAAM,kBAAkB,GAAG,2MAA2M,CAAC;AACvO,8BAAe,kBAAkB;;MCMpB,eAAe;;;;;;IAC1B,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,6EAA2C,EAC3C,+EAA+C,CAC1C,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/apps/pos-app-dashboard/pos-app-dashboard.css?tag=pos-app-dashboard&encapsulation=shadow","src/apps/pos-app-dashboard/pos-app-dashboard.tsx"],"sourcesContent":[":host {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(var(--size-12), var(--size-96)));\n  gap: var(--size-4);\n  padding: var(--size-2);\n  justify-content: center;\n  align-items: start;\n  justify-items: stretch;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'pos-app-dashboard',\n  styleUrl: 'pos-app-dashboard.css',\n  shadow: true,\n})\nexport class PosAppDashboard {\n  render() {\n    return (\n      <Host>\n        <pos-getting-started></pos-getting-started>\n        <pos-example-resources></pos-example-resources>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/pos-app-document-viewer.js

@@ -1,7 +1,14 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { s as subscribeResource } from './ResourceAware.js';
-import { d as defineCustomElement$b } from './badge.js';
-import { d as defineCustomElement$a } from './icon.js';
+import { d as defineCustomElement$i } from './badge.js';
+import { d as defineCustomElement$h } from './card.js';
+import { d as defineCustomElement$g } from './card-header.js';
+import { d as defineCustomElement$f } from './card-title.js';
+import { d as defineCustomElement$e } from './col.js';
+import { d as defineCustomElement$d } from './grid.js';
+import { d as defineCustomElement$c } from './icon.js';
+import { d as defineCustomElement$b } from './ripple-effect.js';
+import { d as defineCustomElement$a } from './row.js';
 import { d as defineCustomElement$9 } from './skeleton-text.js';
 import { d as defineCustomElement$8 } from './pos-add-literal-value2.js';
 import { d as defineCustomElement$7 } from './pos-document2.js';
@@ -11,12 +18,6 @@ import { d as defineCustomElement$4 } from './pos-predicate2.js';
 import { d as defineCustomElement$3 } from './pos-select-term2.js';
 import { d as defineCustomElement$2 } from './pos-type-badges2.js';
 
-const defaultAppLayoutCss = ":host{--gap-size:var(--size-4);display:flex;flex-direction:column;gap:var(--gap-size);margin:var(--gap-size)}section{display:flex;flex-direction:column;gap:var(--gap-size)}@media (min-width: 640px){:host{flex-direction:row;flex-wrap:wrap;section:first-of-type {\n      flex: 1}section:not(:first-of-type){flex:0 0 30%}}";
-const PosAppDocumentViewerStyle0 = defaultAppLayoutCss;
-
-const articleCardCss = "article {\n  padding: var(--size-2);\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-2);\n  outline: var(--pos-border-solid);\n  border-radius: var(--radius-sm);\n  box-shadow: var(--shadow-md);\n  background-color: var(--pos-card-background);\n\n  header {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    h1 {\n      margin: 0;\n    }\n  }\n}\n";
-const PosAppDocumentViewerStyle1 = articleCardCss;
-
 const PosAppDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class PosAppDocumentViewer extends HTMLElement {
     constructor() {
         super();
@@ -34,9 +35,8 @@ const PosAppDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class PosAppDocu
         if (!this.resource) {
             return null;
         }
-        return (h(Host, null, h("section", null, h("pos-document", { src: this.resource.uri })), h("section", null, h("article", null, h("header", null, h("h1", null, h("pos-label", null)), h("pos-type-badges", null)), h("pos-literals", null)))));
+        return (h("ion-grid", null, h("ion-row", null, h("ion-col", { size: "12", "size-sm": true }, h("pos-document", { src: this.resource.uri })), h("ion-col", { size: "12", "size-sm": true }, h("ion-card", null, h("ion-card-header", { style: { gap: 'var(--size-1)' } }, h("ion-card-title", null, h("pos-label", null)), h("pos-type-badges", null), h("pos-literals", null)))))));
     }
-    static get style() { return PosAppDocumentViewerStyle0 + PosAppDocumentViewerStyle1; }
 }, [1, "pos-app-document-viewer", {
         "resource": [32]
     }]);
@@ -44,7 +44,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-app-document-viewer", "ion-badge", "ion-icon", "ion-skeleton-text", "pos-add-literal-value", "pos-document", "pos-label", "pos-literals", "pos-predicate", "pos-select-term", "pos-type-badges"];
+    const components = ["pos-app-document-viewer", "ion-badge", "ion-card", "ion-card-header", "ion-card-title", "ion-col", "ion-grid", "ion-icon", "ion-ripple-effect", "ion-row", "ion-skeleton-text", "pos-add-literal-value", "pos-document", "pos-label", "pos-literals", "pos-predicate", "pos-select-term", "pos-type-badges"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-app-document-viewer":
             if (!customElements.get(tagName)) {
@@ -53,10 +53,45 @@ function defineCustomElement$1() {
             break;
         case "ion-badge":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$i();
+            }
+            break;
+        case "ion-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$h();
+            }
+            break;
+        case "ion-card-header":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
+        case "ion-card-title":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
+        case "ion-col":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "ion-grid":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
             }
             break;
         case "ion-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "ion-ripple-effect":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "ion-row":
             if (!customElements.get(tagName)) {
                 defineCustomElement$a();
             }

package/dist/components/pos-app-document-viewer.js.map

@@ -1 +1 @@
-{"file":"pos-app-document-viewer.js","mappings":";;;;;;;;;;;;;AAAA,MAAM,mBAAmB,GAAG,iUAAiU,CAAC;AAC9V,mCAAe,mBAAmB;;ACDlC,MAAM,cAAc,GAAG,0YAA0Y,CAAC;AACla,mCAAe,cAAc;;MCQhBA,sBAAoB;IALjC;;;;;QAcE,oBAAe,GAAG,CAAC,QAAe;YAChC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;SAC1B,CAAC;KA0BH;IAhCC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;KACzB;IAMD,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,OAAO,IAAI,CAAC;SACb;QAED,QACE,EAAC,IAAI,QACH,mBACE,oBAAc,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,GAAG,GAAI,CAChC,EACV,mBACE,mBACE,kBACE,cACE,oBAAa,CACV,EACL,0BAAmB,CACZ,EACT,uBAAgB,CACR,CACF,CACL,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PosAppDocumentViewer"],"sources":["src/apps/styles/default-app-layout.css?tag=pos-app-document-viewer&encapsulation=shadow","src/apps/styles/article-card.css?tag=pos-app-document-viewer&encapsulation=shadow","src/apps/pos-app-document-viewer/pos-app-document-viewer.tsx"],"sourcesContent":[":host {\n  --gap-size: var(--size-4);\n  display: flex;\n  flex-direction: column;\n  gap: var(--gap-size);\n  margin: var(--gap-size);\n}\n\nsection {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gap-size);\n}\n\n@media (min-width: 640px) {\n  :host {\n    flex-direction: row;\n    flex-wrap: wrap;\n\n    section:first-of-type {\n      flex: 1;\n    }\n\n    section:not(:first-of-type) {\n      flex: 0 0 30%;\n    }\n  }\n}\n","article {\n  padding: var(--size-2);\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-2);\n  outline: var(--pos-border-solid);\n  border-radius: var(--radius-sm);\n  box-shadow: var(--shadow-md);\n  background-color: var(--pos-card-background);\n\n  header {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    h1 {\n      margin: 0;\n    }\n  }\n}\n","import { Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Host, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../../components/events/ResourceAware';\n\n@Component({\n  tag: 'pos-app-document-viewer',\n  shadow: true,\n  styleUrls: ['../styles/default-app-layout.css', '../styles/article-card.css'],\n})\nexport class PosAppDocumentViewer implements ResourceAware {\n  @State() resource: Thing;\n\n  @Event({ eventName: 'pod-os:resource' }) 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) {\n      return null;\n    }\n\n    return (\n      <Host>\n        <section>\n          <pos-document src={this.resource.uri} />\n        </section>\n        <section>\n          <article>\n            <header>\n              <h1>\n                <pos-label />\n              </h1>\n              <pos-type-badges />\n            </header>\n            <pos-literals />\n          </article>\n        </section>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pos-app-document-viewer.js","mappings":";;;;;;;;;;;;;;;;;;;;MAQaA,sBAAoB;IAJjC;;;;;QAaE,oBAAe,GAAG,CAAC,QAAe;YAChC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;SAC1B,CAAC;KA4BH;IAlCC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;KACzB;IAMD,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,OAAO,IAAI,CAAC;SACb;QAED,QACE,oBACE,mBACE,eAAS,IAAI,EAAC,IAAI,qBAChB,oBAAc,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,GAAG,GAAI,CAChC,EACV,eAAS,IAAI,EAAC,IAAI,qBAChB,oBACE,uBAAiB,KAAK,EAAE,EAAE,GAAG,EAAE,eAAe,EAAE,IAC9C,0BACE,oBAAa,CACE,EACjB,0BAAmB,EACnB,uBAAgB,CACA,CACT,CACH,CACF,CACD,EACX;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PosAppDocumentViewer"],"sources":["src/apps/pos-app-document-viewer/pos-app-document-viewer.tsx"],"sourcesContent":["import { Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../../components/events/ResourceAware';\n\n@Component({\n  tag: 'pos-app-document-viewer',\n  shadow: true,\n})\nexport class PosAppDocumentViewer implements ResourceAware {\n  @State() resource: Thing;\n\n  @Event({ eventName: 'pod-os:resource' }) 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) {\n      return null;\n    }\n\n    return (\n      <ion-grid>\n        <ion-row>\n          <ion-col size=\"12\" size-sm>\n            <pos-document src={this.resource.uri} />\n          </ion-col>\n          <ion-col size=\"12\" size-sm>\n            <ion-card>\n              <ion-card-header style={{ gap: 'var(--size-1)' }}>\n                <ion-card-title>\n                  <pos-label />\n                </ion-card-title>\n                <pos-type-badges />\n                <pos-literals />\n              </ion-card-header>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,7 +1,11 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$i } from './badge.js';
-import { d as defineCustomElement$h } from './icon.js';
-import { d as defineCustomElement$g } from './progress-bar.js';
+import { d as defineCustomElement$m } from './badge.js';
+import { d as defineCustomElement$l } from './card.js';
+import { d as defineCustomElement$k } from './card-content.js';
+import { d as defineCustomElement$j } from './card-header.js';
+import { d as defineCustomElement$i } from './icon.js';
+import { d as defineCustomElement$h } from './progress-bar.js';
+import { d as defineCustomElement$g } from './ripple-effect.js';
 import { d as defineCustomElement$f } from './skeleton-text.js';
 import { d as defineCustomElement$e } from './pos-add-literal-value2.js';
 import { d as defineCustomElement$d } from './pos-description2.js';
@@ -35,7 +39,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-app-generic", "ion-badge", "ion-icon", "ion-progress-bar", "ion-skeleton-text", "pos-add-literal-value", "pos-description", "pos-image", "pos-label", "pos-literals", "pos-picture", "pos-predicate", "pos-relations", "pos-resource", "pos-reverse-relations", "pos-rich-link", "pos-select-term", "pos-type-badges"];
+    const components = ["pos-app-generic", "ion-badge", "ion-card", "ion-card-content", "ion-card-header", "ion-icon", "ion-progress-bar", "ion-ripple-effect", "ion-skeleton-text", "pos-add-literal-value", "pos-description", "pos-image", "pos-label", "pos-literals", "pos-picture", "pos-predicate", "pos-relations", "pos-resource", "pos-reverse-relations", "pos-rich-link", "pos-select-term", "pos-type-badges"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-app-generic":
             if (!customElements.get(tagName)) {
@@ -44,15 +48,35 @@ function defineCustomElement$1() {
             break;
         case "ion-badge":
             if (!customElements.get(tagName)) {
-                defineCustomElement$i();
+                defineCustomElement$m();
+            }
+            break;
+        case "ion-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$l();
+            }
+            break;
+        case "ion-card-content":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$k();
+            }
+            break;
+        case "ion-card-header":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$j();
             }
             break;
         case "ion-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$h();
+                defineCustomElement$i();
             }
             break;
         case "ion-progress-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$h();
+            }
+            break;
+        case "ion-ripple-effect":
             if (!customElements.get(tagName)) {
                 defineCustomElement$g();
             }

package/dist/components/pos-app-generic.js.map

@@ -1 +1 @@
-{"file":"pos-app-generic.js","mappings":";;;;;;;;;;;;;;;;;;;AAAA,MAAM,gBAAgB,GAAG,mkCAAmkC,CAAC;AAC7lC,4BAAe,gBAAgB;;MCMlBA,eAAa;;;;;;IACxB,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,kEACE,mFAAyB,aAAa,IACpC,iEACE,oEAAa,iBAAiB,EAAE,IAAI,GAAI,EACxC,2DAAI,EAAE,EAAC,aAAa,IAClB,mEAAa,CACV,EACL,yEAAmB,CACZ,EACT,+DACE,yEAAmB,CACd,CACC,CACF,EACV,kEACE,sEAAgB,CACR,EACV,kEACE,uEAAiB,EACjB,+EAAyB,CACjB,CACL,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PosAppGeneric"],"sources":["src/apps/pos-app-generic/pos-app-generic.css?tag=pos-app-generic&encapsulation=shadow","src/apps/pos-app-generic/pos-app-generic.tsx"],"sourcesContent":[":host {\n  --gap-size: var(--size-1);\n  display: flex;\n  flex-direction: column;\n  gap: var(--gap-size);\n  margin: var(--gap-size);\n}\n\narticle {\n  outline: var(--pos-border-solid);\n  border-radius: var(--radius-sm);\n  box-shadow: var(--shadow-md);\n  background-color: var(--pos-card-background);\n\n  header {\n    display: flex;\n    flex-direction: column;\n\n    pos-picture {\n      --object-fit: contain;\n      --width: 100%;\n      --height: auto;\n      --max-height: 300px;\n      border-radius: var(--radius-sm) var(--radius-sm) 0 0;\n      --border-radius: var(--radius-sm) var(--radius-sm) 0 0;\n    }\n\n    h1,\n    pos-type-badges {\n      margin: var(--size-2);\n    }\n  }\n\n  main {\n    padding: var(--size-2);\n\n    pos-description {\n      color: var(--pos-secondary-text-color);\n      font-weight: var(--weight-light);\n    }\n  }\n}\n\n@media (min-width: 640px) {\n  :host {\n    flex-direction: row;\n    flex-wrap: wrap;\n\n    section:first-of-type {\n      flex: 0 0 25%;\n    }\n\n    section:not(:first-of-type) {\n      flex: 1;\n    }\n  }\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'pos-app-generic',\n  styleUrls: ['./pos-app-generic.css'],\n  shadow: true,\n})\nexport class PosAppGeneric {\n  render() {\n    return (\n      <Host>\n        <section>\n          <article aria-labelledby=\"thing-title\">\n            <header>\n              <pos-picture blurredBackground={true} />\n              <h1 id=\"thing-title\">\n                <pos-label />\n              </h1>\n              <pos-type-badges />\n            </header>\n            <main>\n              <pos-description />\n            </main>\n          </article>\n        </section>\n        <section>\n          <pos-literals />\n        </section>\n        <section>\n          <pos-relations />\n          <pos-reverse-relations />\n        </section>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pos-app-generic.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,gBAAgB,GAAG,mkCAAmkC,CAAC;AAC7lC,4BAAe,gBAAgB;;MCMlBA,eAAa;;;;;;IACxB,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,kEACE,mFAAyB,aAAa,IACpC,iEACE,oEAAa,iBAAiB,EAAE,IAAI,GAAI,EACxC,2DAAI,EAAE,EAAC,aAAa,IAClB,mEAAa,CACV,EACL,yEAAmB,CACZ,EACT,+DACE,yEAAmB,CACd,CACC,CACF,EACV,kEACE,sEAAgB,CACR,EACV,kEACE,uEAAiB,EACjB,+EAAyB,CACjB,CACL,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PosAppGeneric"],"sources":["src/apps/pos-app-generic/pos-app-generic.css?tag=pos-app-generic&encapsulation=shadow","src/apps/pos-app-generic/pos-app-generic.tsx"],"sourcesContent":[":host {\n  --gap-size: var(--size-1);\n  display: flex;\n  flex-direction: column;\n  gap: var(--gap-size);\n  margin: var(--gap-size);\n}\n\narticle {\n  outline: var(--pos-border-solid);\n  border-radius: var(--radius-sm);\n  box-shadow: var(--shadow-md);\n  background-color: var(--pos-card-background);\n\n  header {\n    display: flex;\n    flex-direction: column;\n\n    pos-picture {\n      --object-fit: contain;\n      --width: 100%;\n      --height: auto;\n      --max-height: 300px;\n      border-radius: var(--radius-sm) var(--radius-sm) 0 0;\n      --border-radius: var(--radius-sm) var(--radius-sm) 0 0;\n    }\n\n    h1,\n    pos-type-badges {\n      margin: var(--size-2);\n    }\n  }\n\n  main {\n    padding: var(--size-2);\n\n    pos-description {\n      color: var(--pos-secondary-text-color);\n      font-weight: var(--weight-light);\n    }\n  }\n}\n\n@media (min-width: 640px) {\n  :host {\n    flex-direction: row;\n    flex-wrap: wrap;\n\n    section:first-of-type {\n      flex: 0 0 25%;\n    }\n\n    section:not(:first-of-type) {\n      flex: 1;\n    }\n  }\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'pos-app-generic',\n  styleUrls: ['./pos-app-generic.css'],\n  shadow: true,\n})\nexport class PosAppGeneric {\n  render() {\n    return (\n      <Host>\n        <section>\n          <article aria-labelledby=\"thing-title\">\n            <header>\n              <pos-picture blurredBackground={true} />\n              <h1 id=\"thing-title\">\n                <pos-label />\n              </h1>\n              <pos-type-badges />\n            </header>\n            <main>\n              <pos-description />\n            </main>\n          </article>\n        </section>\n        <section>\n          <pos-literals />\n        </section>\n        <section>\n          <pos-relations />\n          <pos-reverse-relations />\n        </section>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/pos-app-image-viewer.js

@@ -1,7 +1,14 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { s as subscribeResource } from './ResourceAware.js';
-import { d as defineCustomElement$b } from './badge.js';
-import { d as defineCustomElement$a } from './icon.js';
+import { d as defineCustomElement$i } from './badge.js';
+import { d as defineCustomElement$h } from './card.js';
+import { d as defineCustomElement$g } from './card-header.js';
+import { d as defineCustomElement$f } from './card-title.js';
+import { d as defineCustomElement$e } from './col.js';
+import { d as defineCustomElement$d } from './grid.js';
+import { d as defineCustomElement$c } from './icon.js';
+import { d as defineCustomElement$b } from './ripple-effect.js';
+import { d as defineCustomElement$a } from './row.js';
 import { d as defineCustomElement$9 } from './skeleton-text.js';
 import { d as defineCustomElement$8 } from './pos-add-literal-value2.js';
 import { d as defineCustomElement$7 } from './pos-image2.js';
@@ -11,15 +18,6 @@ import { d as defineCustomElement$4 } from './pos-predicate2.js';
 import { d as defineCustomElement$3 } from './pos-select-term2.js';
 import { d as defineCustomElement$2 } from './pos-type-badges2.js';
 
-const posAppImageViewerCss = "pos-image{--max-width:100%}";
-const PosAppImageViewerStyle0 = posAppImageViewerCss;
-
-const defaultAppLayoutCss = ":host{--gap-size:var(--size-4);display:flex;flex-direction:column;gap:var(--gap-size);margin:var(--gap-size)}section{display:flex;flex-direction:column;gap:var(--gap-size)}@media (min-width: 640px){:host{flex-direction:row;flex-wrap:wrap;section:first-of-type {\n      flex: 1}section:not(:first-of-type){flex:0 0 30%}}";
-const PosAppImageViewerStyle1 = defaultAppLayoutCss;
-
-const articleCardCss = "article {\n  padding: var(--size-2);\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-2);\n  outline: var(--pos-border-solid);\n  border-radius: var(--radius-sm);\n  box-shadow: var(--shadow-md);\n  background-color: var(--pos-card-background);\n\n  header {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    h1 {\n      margin: 0;\n    }\n  }\n}\n";
-const PosAppImageViewerStyle2 = articleCardCss;
-
 const PosAppImageViewer$1 = /*@__PURE__*/ proxyCustomElement(class PosAppImageViewer extends HTMLElement {
     constructor() {
         super();
@@ -37,9 +35,9 @@ const PosAppImageViewer$1 = /*@__PURE__*/ proxyCustomElement(class PosAppImageVi
         if (!this.resource) {
             return null;
         }
-        return (h(Host, null, h("section", null, h("pos-image", { src: this.resource.uri })), h("section", null, h("article", null, h("header", null, h("h1", null, h("pos-label", null)), h("pos-type-badges", null)), h("pos-literals", null)))));
+        return (h("ion-grid", null, h("ion-row", null, h("ion-col", { size: "12", "size-sm": true }, h("pos-image", { src: this.resource.uri })), h("ion-col", { size: "12", "size-sm": true }, h("ion-card", null, h("ion-card-header", { style: { gap: 'var(--size-1)' } }, h("ion-card-title", null, h("pos-label", null)), h("pos-type-badges", null), h("pos-literals", null)))))));
     }
-    static get style() { return PosAppImageViewerStyle0 + (PosAppImageViewerStyle1 + PosAppImageViewerStyle2); }
+    static get style() { return "pos-image {\n      --max-width: 100%;\n    }"; }
 }, [1, "pos-app-image-viewer", {
         "resource": [32]
     }]);
@@ -47,7 +45,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-app-image-viewer", "ion-badge", "ion-icon", "ion-skeleton-text", "pos-add-literal-value", "pos-image", "pos-label", "pos-literals", "pos-predicate", "pos-select-term", "pos-type-badges"];
+    const components = ["pos-app-image-viewer", "ion-badge", "ion-card", "ion-card-header", "ion-card-title", "ion-col", "ion-grid", "ion-icon", "ion-ripple-effect", "ion-row", "ion-skeleton-text", "pos-add-literal-value", "pos-image", "pos-label", "pos-literals", "pos-predicate", "pos-select-term", "pos-type-badges"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-app-image-viewer":
             if (!customElements.get(tagName)) {
@@ -56,10 +54,45 @@ function defineCustomElement$1() {
             break;
         case "ion-badge":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$i();
+            }
+            break;
+        case "ion-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$h();
+            }
+            break;
+        case "ion-card-header":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
+        case "ion-card-title":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
+        case "ion-col":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "ion-grid":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
             }
             break;
         case "ion-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "ion-ripple-effect":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "ion-row":
             if (!customElements.get(tagName)) {
                 defineCustomElement$a();
             }

package/dist/components/pos-app-image-viewer.js.map

@@ -1 +1 @@
-{"file":"pos-app-image-viewer.js","mappings":";;;;;;;;;;;;;AAAA,MAAM,oBAAoB,GAAG,6BAA6B,CAAC;AAC3D,gCAAe,oBAAoB;;ACDnC,MAAM,mBAAmB,GAAG,iUAAiU,CAAC;AAC9V,gCAAe,mBAAmB;;ACDlC,MAAM,cAAc,GAAG,0YAA0Y,CAAC;AACla,gCAAe,cAAc;;MCQhBA,mBAAiB;IAL9B;;;;;QAcE,oBAAe,GAAG,CAAC,QAAe;YAChC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;SAC1B,CAAC;KA0BH;IAhCC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;KACzB;IAMD,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,OAAO,IAAI,CAAC;SACb;QAED,QACE,EAAC,IAAI,QACH,mBACE,iBAAW,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,GAAG,GAAI,CAC7B,EACV,mBACE,mBACE,kBACE,cACE,oBAAa,CACV,EACL,0BAAmB,CACZ,EACT,uBAAgB,CACR,CACF,CACL,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PosAppImageViewer"],"sources":["src/apps/pos-app-image-viewer/pos-app-image-viewer.css?tag=pos-app-image-viewer&encapsulation=shadow","src/apps/styles/default-app-layout.css?tag=pos-app-image-viewer&encapsulation=shadow","src/apps/styles/article-card.css?tag=pos-app-image-viewer&encapsulation=shadow","src/apps/pos-app-image-viewer/pos-app-image-viewer.tsx"],"sourcesContent":["pos-image {\n  --max-width: 100%;\n}\n",":host {\n  --gap-size: var(--size-4);\n  display: flex;\n  flex-direction: column;\n  gap: var(--gap-size);\n  margin: var(--gap-size);\n}\n\nsection {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gap-size);\n}\n\n@media (min-width: 640px) {\n  :host {\n    flex-direction: row;\n    flex-wrap: wrap;\n\n    section:first-of-type {\n      flex: 1;\n    }\n\n    section:not(:first-of-type) {\n      flex: 0 0 30%;\n    }\n  }\n}\n","article {\n  padding: var(--size-2);\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-2);\n  outline: var(--pos-border-solid);\n  border-radius: var(--radius-sm);\n  box-shadow: var(--shadow-md);\n  background-color: var(--pos-card-background);\n\n  header {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    h1 {\n      margin: 0;\n    }\n  }\n}\n","import { Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Host, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../../components/events/ResourceAware';\n\n@Component({\n  tag: 'pos-app-image-viewer',\n  shadow: true,\n  styleUrls: ['pos-app-image-viewer.css', '../styles/default-app-layout.css', '../styles/article-card.css'],\n})\nexport class PosAppImageViewer implements ResourceAware {\n  @State() resource: Thing;\n\n  @Event({ eventName: 'pod-os:resource' }) 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) {\n      return null;\n    }\n\n    return (\n      <Host>\n        <section>\n          <pos-image src={this.resource.uri} />\n        </section>\n        <section>\n          <article>\n            <header>\n              <h1>\n                <pos-label />\n              </h1>\n              <pos-type-badges />\n            </header>\n            <pos-literals />\n          </article>\n        </section>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pos-app-image-viewer.js","mappings":";;;;;;;;;;;;;;;;;;;;MAaaA,mBAAiB;IAT9B;;;;;QAkBE,oBAAe,GAAG,CAAC,QAAe;YAChC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;SAC1B,CAAC;KA4BH;IAlCC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;KACzB;IAMD,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,OAAO,IAAI,CAAC;SACb;QAED,QACE,oBACE,mBACE,eAAS,IAAI,EAAC,IAAI,qBAChB,iBAAW,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,GAAG,GAAI,CAC7B,EACV,eAAS,IAAI,EAAC,IAAI,qBAChB,oBACE,uBAAiB,KAAK,EAAE,EAAE,GAAG,EAAE,eAAe,EAAE,IAC9C,0BACE,oBAAa,CACE,EACjB,0BAAmB,EACnB,uBAAgB,CACA,CACT,CACH,CACF,CACD,EACX;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PosAppImageViewer"],"sources":["src/apps/pos-app-image-viewer/pos-app-image-viewer.tsx"],"sourcesContent":["import { Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../../components/events/ResourceAware';\n\n@Component({\n  tag: 'pos-app-image-viewer',\n  shadow: true,\n  styles: `\n    pos-image {\n      --max-width: 100%;\n    }\n  `,\n})\nexport class PosAppImageViewer implements ResourceAware {\n  @State() resource: Thing;\n\n  @Event({ eventName: 'pod-os:resource' }) 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) {\n      return null;\n    }\n\n    return (\n      <ion-grid>\n        <ion-row>\n          <ion-col size=\"12\" size-sm>\n            <pos-image src={this.resource.uri} />\n          </ion-col>\n          <ion-col size=\"12\" size-sm>\n            <ion-card>\n              <ion-card-header style={{ gap: 'var(--size-1)' }}>\n                <ion-card-title>\n                  <pos-label />\n                </ion-card-title>\n                <pos-type-badges />\n                <pos-literals />\n              </ion-card-header>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    );\n  }\n}\n"],"version":3}

package/dist/components/pos-app-ldp-container.js

@@ -1,7 +1,15 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$g } from './badge.js';
-import { d as defineCustomElement$f } from './icon.js';
-import { d as defineCustomElement$e } from './progress-bar.js';
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$o } from './badge.js';
+import { d as defineCustomElement$n } from './card.js';
+import { d as defineCustomElement$m } from './card-content.js';
+import { d as defineCustomElement$l } from './card-header.js';
+import { d as defineCustomElement$k } from './card-title.js';
+import { d as defineCustomElement$j } from './col.js';
+import { d as defineCustomElement$i } from './grid.js';
+import { d as defineCustomElement$h } from './icon.js';
+import { d as defineCustomElement$g } from './progress-bar.js';
+import { d as defineCustomElement$f } from './ripple-effect.js';
+import { d as defineCustomElement$e } from './row.js';
 import { d as defineCustomElement$d } from './pos-add-literal-value2.js';
 import { d as defineCustomElement$c } from './pos-container-contents2.js';
 import { d as defineCustomElement$b } from './pos-container-item2.js';
@@ -15,28 +23,20 @@ import { d as defineCustomElement$4 } from './pos-select-term2.js';
 import { d as defineCustomElement$3 } from './pos-subjects2.js';
 import { d as defineCustomElement$2 } from './pos-type-badges2.js';
 
-const defaultAppLayoutCss = ":host{--gap-size:var(--size-4);display:flex;flex-direction:column;gap:var(--gap-size);margin:var(--gap-size)}section{display:flex;flex-direction:column;gap:var(--gap-size)}@media (min-width: 640px){:host{flex-direction:row;flex-wrap:wrap;section:first-of-type {\n      flex: 1}section:not(:first-of-type){flex:0 0 30%}}";
-const PosAppLdpContainerStyle0 = defaultAppLayoutCss;
-
-const articleCardCss = "article {\n  padding: var(--size-2);\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-2);\n  outline: var(--pos-border-solid);\n  border-radius: var(--radius-sm);\n  box-shadow: var(--shadow-md);\n  background-color: var(--pos-card-background);\n\n  header {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    h1 {\n      margin: 0;\n    }\n  }\n}\n";
-const PosAppLdpContainerStyle1 = articleCardCss;
-
 const PosAppLdpContainer$1 = /*@__PURE__*/ proxyCustomElement(class PosAppLdpContainer extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: '76b7a2ab73232cbea2a7352527fd4fc35a75c66b' }, h("section", { key: '28d455d6e4b640de624a2c684133a6d4c7de2100' }, h("pos-container-contents", { key: '8e518a1122461108b3d33d66664f67feb55527c4' }), h("details", { key: '6be9b8cf613a54213e8281c0a4bf4e8235c1b4b1' }, h("summary", { key: '541ff3bbe8ec736361ea59fef319141a743c93ee' }, "All subjects"), h("pos-subjects", { key: '4e1927ea2365c354c7d1abf2eca50d892e1ac2bc' }))), h("section", { key: 'c9156ae4584e7f5803a7427b97844c3bbeae86bf' }, h("article", { key: 'c3fdc4cf0d4dd6624c63c2c6f4cf1c852a2468fc' }, h("header", { key: '4103d4a971e51942afeff1a26aca17454a962f31' }, h("h1", { key: 'eb000f4bac564b0255e28c44c112180a4558e323' }, h("pos-label", { key: '700a53e05c33d9c5a923dd5f73ecfb4ee969bc9d' })), h("pos-type-badges", { key: '15c37fc60de0e9ff1d36280da42bf0cc42c0c27c' })), h("pos-literals", { key: '4bf833339c2bedd888248e3893633496d2f61bd0' })))));
+        return (h("ion-grid", { key: 'b5ebaf12ad80fbe1de402725fee629d6ff634d82' }, h("ion-row", { key: '97e9414cc2d702abbc51c3b8f4e894e4c47396c3' }, h("ion-col", { key: '5412d9c2a339923913a514913cc67af12451c299', size: "12", "size-sm": true }, h("pos-container-contents", { key: 'ef602f4c357d8308c5a37fe2a14b7100d6fc8737' }), h("details", { key: '1c754800523e2bc9b54323035b5e123a139fddff' }, h("summary", { key: '4ab826738cc31ed61bd888da6f110a0f9f40bfee' }, "All subjects"), h("pos-subjects", { key: '73a41bcd107c654139798d8f8e66d6794c17aa94' }))), h("ion-col", { key: '66bad3d51cdf326b7487463388869eccc21a1272', size: "12", "size-sm": true }, h("ion-card", { key: '83d11549b46d2a501f0fe7cdcaa5e2d41536f689' }, h("ion-card-header", { key: 'e1a625e1bb1771537974de79f60dceda2ff2b6c4', style: { gap: 'var(--size-1)' } }, h("ion-card-title", { key: '0571560cf780182f071c8eecf98b805ddfdf1747' }, h("pos-label", { key: 'abfb6a6a4c4cbe3cc0accd71cf13f9e3e68ad25f' })), h("pos-type-badges", { key: 'c1b6addde162ace3604805dab8446aa39b1874b1' }), h("pos-literals", { key: '04ab3ebf74e378d2c4a9c85b32b246e24ad355e0' })))))));
     }
-    static get style() { return PosAppLdpContainerStyle0 + PosAppLdpContainerStyle1; }
-}, [1, "pos-app-ldp-container"]);
+}, [0, "pos-app-ldp-container"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-app-ldp-container", "ion-badge", "ion-icon", "ion-progress-bar", "pos-add-literal-value", "pos-container-contents", "pos-container-item", "pos-description", "pos-label", "pos-literals", "pos-predicate", "pos-resource", "pos-rich-link", "pos-select-term", "pos-subjects", "pos-type-badges"];
+    const components = ["pos-app-ldp-container", "ion-badge", "ion-card", "ion-card-content", "ion-card-header", "ion-card-title", "ion-col", "ion-grid", "ion-icon", "ion-progress-bar", "ion-ripple-effect", "ion-row", "pos-add-literal-value", "pos-container-contents", "pos-container-item", "pos-description", "pos-label", "pos-literals", "pos-predicate", "pos-resource", "pos-rich-link", "pos-select-term", "pos-subjects", "pos-type-badges"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-app-ldp-container":
             if (!customElements.get(tagName)) {
@@ -45,15 +45,55 @@ function defineCustomElement$1() {
             break;
         case "ion-badge":
             if (!customElements.get(tagName)) {
-                defineCustomElement$g();
+                defineCustomElement$o();
+            }
+            break;
+        case "ion-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$n();
+            }
+            break;
+        case "ion-card-content":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$m();
+            }
+            break;
+        case "ion-card-header":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$l();
+            }
+            break;
+        case "ion-card-title":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$k();
+            }
+            break;
+        case "ion-col":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$j();
+            }
+            break;
+        case "ion-grid":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$i();
             }
             break;
         case "ion-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$f();
+                defineCustomElement$h();
             }
             break;
         case "ion-progress-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
+        case "ion-ripple-effect":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
+        case "ion-row":
             if (!customElements.get(tagName)) {
                 defineCustomElement$e();
             }