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

package/dist/cjs/{ion-card_34.cjs.entry.js → ion-icon_31.cjs.entry.js}

@@ -23,115 +23,6 @@ const PodOsAware = require('./PodOsAware-a16ddb44.js');
 require('./hardware-back-button-e71c41f7.js');
 require('./framework-delegate-a257df68.js');
 
-const cardIosCss = ":host{--ion-safe-area-left:0px;--ion-safe-area-right:0px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);contain:content;overflow:hidden}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.card-disabled){cursor:default;opacity:0.3;pointer-events:none}.card-native{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;min-height:var(--min-height);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:inherit}.card-native::-moz-focus-inner{border:0}button,a{cursor:pointer;user-select:none;-webkit-user-drag:none}ion-ripple-effect{color:var(--ripple-color)}:host{--background:var(--ion-card-background, var(--ion-item-background, var(--ion-background-color, #fff)));--color:var(--ion-card-color, var(--ion-item-color, var(--ion-color-step-600, #666666)));-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:24px;margin-bottom:24px;border-radius:8px;transition:transform 500ms cubic-bezier(0.12, 0.72, 0.29, 1);font-size:0.875rem;box-shadow:0 4px 16px rgba(0, 0, 0, 0.12)}:host(.ion-activated){transform:scale3d(0.97, 0.97, 1)}";
-const IonCardIosStyle0 = cardIosCss;
-
-const cardMdCss = ":host{--ion-safe-area-left:0px;--ion-safe-area-right:0px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);contain:content;overflow:hidden}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.card-disabled){cursor:default;opacity:0.3;pointer-events:none}.card-native{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;min-height:var(--min-height);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:inherit}.card-native::-moz-focus-inner{border:0}button,a{cursor:pointer;user-select:none;-webkit-user-drag:none}ion-ripple-effect{color:var(--ripple-color)}:host{--background:var(--ion-card-background, var(--ion-item-background, var(--ion-background-color, #fff)));--color:var(--ion-card-color, var(--ion-item-color, var(--ion-color-step-550, #737373)));-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px;margin-top:10px;margin-bottom:10px;border-radius:4px;font-size:0.875rem;box-shadow:0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)}";
-const IonCardMdStyle0 = cardMdCss;
-
-const Card = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.inheritedAriaAttributes = {};
-        this.color = undefined;
-        this.button = false;
-        this.type = 'button';
-        this.disabled = false;
-        this.download = undefined;
-        this.href = undefined;
-        this.rel = undefined;
-        this.routerDirection = 'forward';
-        this.routerAnimation = undefined;
-        this.target = undefined;
-    }
-    componentWillLoad() {
-        this.inheritedAriaAttributes = helpers.inheritAttributes(this.el, ['aria-label']);
-    }
-    isClickable() {
-        return this.href !== undefined || this.button;
-    }
-    renderCard(mode) {
-        const clickable = this.isClickable();
-        if (!clickable) {
-            return [index.h("slot", null)];
-        }
-        const { href, routerAnimation, routerDirection, inheritedAriaAttributes } = this;
-        const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div';
-        const attrs = TagType === 'button'
-            ? { type: this.type }
-            : {
-                download: this.download,
-                href: this.href,
-                rel: this.rel,
-                target: this.target,
-            };
-        return (index.h(TagType, Object.assign({}, attrs, inheritedAriaAttributes, { class: "card-native", part: "native", disabled: this.disabled, onClick: (ev) => theme.openURL(href, ev, routerDirection, routerAnimation) }), index.h("slot", null), clickable && mode === 'md' && index.h("ion-ripple-effect", null)));
-    }
-    render() {
-        const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: 'b92792294360fd974324b31ed2d3db00d3e2f8cd', class: theme.createColorClasses(this.color, {
-                [mode]: true,
-                'card-disabled': this.disabled,
-                'ion-activatable': this.isClickable(),
-            }) }, this.renderCard(mode)));
-    }
-    get el() { return index.getElement(this); }
-};
-Card.style = {
-    ios: IonCardIosStyle0,
-    md: IonCardMdStyle0
-};
-
-const cardContentIosCss = "ion-card-content{display:block;position:relative}.card-content-ios{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px;padding-top:20px;padding-bottom:20px;font-size:1rem;line-height:1.4}.card-content-ios h1{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:1.5rem;font-weight:normal}.card-content-ios h2{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:1rem;font-weight:normal}.card-content-ios h3,.card-content-ios h4,.card-content-ios h5,.card-content-ios h6{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:0.875rem;font-weight:normal}.card-content-ios p{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:0.875rem}ion-card-header+.card-content-ios{padding-top:0}";
-const IonCardContentIosStyle0 = cardContentIosCss;
-
-const cardContentMdCss = "ion-card-content{display:block;position:relative}.card-content-md{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:13px;padding-bottom:13px;font-size:0.875rem;line-height:1.5}.card-content-md h1{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:1.5rem;font-weight:normal}.card-content-md h2{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:1rem;font-weight:normal}.card-content-md h3,.card-content-md h4,.card-content-md h5,.card-content-md h6{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:0.875rem;font-weight:normal}.card-content-md p{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:0.875rem;font-weight:normal;line-height:1.5}ion-card-header+.card-content-md{padding-top:0}";
-const IonCardContentMdStyle0 = cardContentMdCss;
-
-const CardContent = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    render() {
-        const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: 'dd95806f042fcd124b18126679f671be6e32a021', class: {
-                [mode]: true,
-                // Used internally for styling
-                [`card-content-${mode}`]: true,
-            } }));
-    }
-};
-CardContent.style = {
-    ios: IonCardContentIosStyle0,
-    md: IonCardContentMdStyle0
-};
-
-const cardHeaderIosCss = ":host{--background:transparent;--color:inherit;display:flex;position:relative;flex-direction:column;background:var(--background);color:var(--color)}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px;padding-top:20px;padding-bottom:16px;flex-direction:column-reverse}@supports (backdrop-filter: blur(0)){:host(.card-header-translucent){background-color:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.9);backdrop-filter:saturate(180%) blur(30px)}}";
-const IonCardHeaderIosStyle0 = cardHeaderIosCss;
-
-const cardHeaderMdCss = ":host{--background:transparent;--color:inherit;display:flex;position:relative;flex-direction:column;background:var(--background);color:var(--color)}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:16px;padding-bottom:16px}::slotted(ion-card-title:not(:first-child)),::slotted(ion-card-subtitle:not(:first-child)){margin-top:8px}";
-const IonCardHeaderMdStyle0 = cardHeaderMdCss;
-
-const CardHeader = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.color = undefined;
-        this.translucent = false;
-    }
-    render() {
-        const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: '44077ad8e3edf7726d0f7a039046e32dc56a83c9', class: theme.createColorClasses(this.color, {
-                'card-header-translucent': this.translucent,
-                'ion-inherit-color': true,
-                [mode]: true,
-            }) }, index.h("slot", { key: '51b6f4048d25521ece18d79e5361c762af41cae7' })));
-    }
-};
-CardHeader.style = {
-    ios: IonCardHeaderIosStyle0,
-    md: IonCardHeaderMdStyle0
-};
-
 let CACHED_MAP;
 const getIconMap = () => {
   if (typeof window === 'undefined') {
@@ -1908,7 +1799,7 @@ Toast.style = {
     md: IonToastMdStyle0
 };
 
-const posAddNewThingCss = ":host{font-family:var(--font-sans);display:block}button#new{cursor:pointer;display:flex;align-items:center;justify-content:center;border:none;width:var(--scale-5);height:var(--scale-5);background-color:var(--pos-primary-color);color:var(--color-grey-50);font-size:var(--scale-6);border-radius:var(--radius-xs)}button#new:hover,button#new:focus{outline:none;filter:brightness(110%);box-shadow:var(--shadow-sm)}pos-new-thing-form{margin:var(--scale-3)}";
+const posAddNewThingCss = ":host{font-family:var(--font-sans);display:block}button#new{cursor:pointer;display:flex;align-items:center;justify-content:center;border:none;width:var(--scale-5);height:var(--scale-5);background-color:var(--pos-primary-color);color:var(--pos-primary-text-color);font-size:var(--scale-6);border-radius:var(--radius-xs)}button#new:hover,button#new:focus{outline:none;filter:brightness(110%);box-shadow:var(--shadow-sm)}pos-new-thing-form{margin:var(--scale-3)}";
 const PosAddNewThingStyle0 = posAddNewThingCss;
 
 const PosAddNewThing = class {
@@ -1919,7 +1810,7 @@ const PosAddNewThing = class {
         this.dialog.showModal();
     }
     render() {
-        return (index.h(index.Host, { key: '4adcc80d1a0d810279a85be26c8ec6717d91c8a2' }, index.h("button", { key: '9a3cdd12719c4d3e4ae1e0eff60ccd6101395d92', id: "new", title: "Add a new thing", onClick: () => this.openDialog() }, index.h("ion-icon", { key: 'efb2723db05962c02293931d0a334ba55908f596', name: "add-circle-outline" })), index.h("pos-dialog", { key: '954a947b2dc4082519c50cb71a4b6f0f3550c0fb', ref: el => (this.dialog = el) }, index.h("span", { key: '0a7e91bab3d8740bc8228782d70a980779db7ca1', slot: "title" }, "Add a new thing"), index.h("pos-new-thing-form", { key: '66ac9bcf72a71b58f4dbbc5cfd214b3609c78cbf', slot: "content", referenceUri: this.referenceUri }))));
+        return (index.h(index.Host, { key: '6142a141ef03ca93a362a6b00ebe8d515c3a677a' }, index.h("button", { key: '72ecf353cd3a7d2d68f9ef28eb1bbe7fdb88b700', id: "new", title: "Add a new thing", onClick: () => this.openDialog() }, index.h("ion-icon", { key: 'bd05d75c42c10de6df519575787fc66eafb22930', name: "add-circle-outline" })), index.h("pos-dialog", { key: '23cf0118149704dfca16758970e4f4658e87e946', ref: el => (this.dialog = el) }, index.h("span", { key: '5af7b7f618cc20684c39134b5ea295400e651cb6', slot: "title" }, "Add a new thing"), index.h("pos-new-thing-form", { key: '895496c2f6ede3c8677d9d918e0b13582090baed', slot: "content", referenceUri: this.referenceUri }))));
     }
 };
 PosAddNewThing.style = PosAddNewThingStyle0;
@@ -3250,11 +3141,11 @@ const PosApp = class {
         }
     }
     render() {
-        return index.h("slot", { key: 'eb7dfaa67c538b3e3e33f42556c1b604fc964729' });
+        return index.h("slot", { key: '988c393af75e8bd0f4ff2b4c04fe33b1ed686fa7' });
     }
 };
 
-const posAppBrowserCss = "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    border: 1px solid var(--color-grey-800);\n    color: var(--color-grey-800);\n    border-radius: var(--radius-xs);\n\n    &:hover {\n      background-color: var(--color-grey-800);\n      color: white;\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";
+const posAppBrowserCss = "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";
 const PosAppBrowserStyle0 = posAppBrowserCss;
 
 const PosAppBrowser = class {
@@ -3291,7 +3182,7 @@ const Logo = () => {
 };
 PosAppBrowser.style = PosAppBrowserStyle0;
 
-const posAppDashboardCss = ":host{display:grid;grid-template-columns:repeat(auto-fit, minmax(var(--size-12), var(--size-96)));gap:var(--size-4);padding:var(--size-2);justify-content:center;align-items:start;justify-items:stretch;height:100%;background:linear-gradient(230deg, rgb(251, 251, 255) 0%, rgb(215, 223, 252) 100%)}";
+const posAppDashboardCss = ":host{display:grid;grid-template-columns:repeat(auto-fit, minmax(var(--size-12), var(--size-96)));gap:var(--size-4);padding:var(--size-2);justify-content:center;align-items:start;justify-items:stretch}";
 const PosAppDashboardStyle0 = posAppDashboardCss;
 
 const PosAppDashboard = class {
@@ -3304,7 +3195,7 @@ const PosAppDashboard = class {
 };
 PosAppDashboard.style = PosAppDashboardStyle0;
 
-const posAppSettingsCss = ":host{display:grid;grid-template-columns:repeat(auto-fit, minmax(var(--size-12), var(--size-96)));gap:var(--size-4);padding:var(--size-2);justify-content:center;align-items:start;justify-items:stretch;height:100%;background:linear-gradient(230deg, rgb(251, 251, 255) 0%, rgb(215, 223, 252) 100%)}";
+const posAppSettingsCss = ":host{display:grid;grid-template-columns:repeat(auto-fit, minmax(var(--size-12), var(--size-96)));gap:var(--size-4);padding:var(--size-2);justify-content:center;align-items:start;justify-items:stretch}";
 const PosAppSettingsStyle0 = posAppSettingsCss;
 
 const PosAppSettings = class {
@@ -3312,7 +3203,7 @@ const PosAppSettings = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return index.h("pos-setting-offline-cache", { key: '83d824c60d1eb9e2d60b0d7255dda841ad9c6164' });
+        return index.h("pos-setting-offline-cache", { key: 'f065206f6291089773a19045243f04b6ce35eeb9' });
     }
 };
 PosAppSettings.style = PosAppSettingsStyle0;
@@ -3333,7 +3224,7 @@ const PosDescription = class {
     }
 };
 
-const posDialogCss = "dialog{background-color:var(--pos-background-color);border:none;border-radius:var(--radius-md);box-shadow:var(--shadow-md);max-width:var(--width-xs)}dialog header>:first-child{flex-grow:1;font-weight:var(--weight-light);font-size:var(--scale-2);font-family:var(--font-sans);margin:0}dialog header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:var(--scale-0);border-bottom-style:inset;padding:0 0 var(--scale-0) 0}dialog>:last-child{display:block;margin-top:var(--scale-3)}button#close{cursor:pointer;display:flex;align-items:center;justify-content:center;border:none;background:none;font-size:var(--scale-3);color:var(--color-grey-500)}button#close:hover{color:var(--color-grey-800)}";
+const posDialogCss = "dialog{background-color:var(--pos-background-color);color:var(--pos-normal-text-color);border:none;border-radius:var(--radius-md);box-shadow:var(--shadow-md);max-width:var(--width-xs);animation:slideIn 0.2s ease-out}dialog::backdrop{background:rgba(0, 0, 0, 0.5);backdrop-filter:var(--blur-sm);animation:fadeIn 0.2s ease-out}@media (prefers-color-scheme: dark){dialog::backdrop{background:rgb(100, 100, 100, 0.5)}}dialog header>:first-child{flex-grow:1;font-weight:var(--weight-light);font-size:var(--scale-2);font-family:var(--font-sans);margin:0}dialog header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:var(--scale-0);border-bottom-style:inset;padding:0 0 var(--scale-0) 0}dialog>:last-child{display:block;margin-top:var(--scale-3)}button#close{cursor:pointer;display:flex;align-items:center;justify-content:center;border:none;background:none;font-size:var(--scale-3);color:var(--color-grey-500)}button#close:hover{color:var(--pos-secondary-border-color)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes slideIn{from{opacity:0;transform:translateY(-20px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}}";
 const PosDialogStyle0 = posDialogCss;
 
 const PosDialog = class {
@@ -3347,7 +3238,7 @@ const PosDialog = class {
         this.dialog.close();
     }
     render() {
-        return (index.h(index.Host, { key: '097959e50499628b0b3e9be024cd415d25182303' }, index.h("dialog", { key: '0ac068acd6392cfc57f9e3bff866a6c865dcafe3', ref: el => (this.dialog = el) }, index.h("header", { key: '0cf470448e42f04c8a839eb67eec5a0708e306cb' }, index.h("slot", { key: '3f3f457ff9130c66ac31e21da74f9ffa9cc42a06', name: "title" }), index.h("button", { key: 'd420ee61dc91d4f193048f6c89351121c0337446', tabindex: -1, id: "close", title: "Close", onClick: () => this.close() }, index.h("ion-icon", { key: '9a775752b1678654b3446b964fe83ca15d8722ca', name: "close-outline" }))), index.h("slot", { key: '464e9fefd0dc8c32b52399358ff250e1982bdf36', name: "content" }))));
+        return (index.h(index.Host, { key: '168dc7d1cf3feabd5f9b2b3f9add6b04467b36ef' }, index.h("dialog", { key: '8bbfb245d9ff066d111c116c1715be25b0907403', ref: el => (this.dialog = el) }, index.h("header", { key: '94e28eb2b8147cb6b2aedda0d8e6a5158117788e' }, index.h("slot", { key: 'a40c2d397b9f54056d4fd8089fdfcc1e446b6d61', name: "title" }), index.h("button", { key: 'f0f64f5aaafc331f9e3d0fb6201c453600157db1', tabindex: -1, id: "close", title: "Close", onClick: () => this.close() }, index.h("ion-icon", { key: 'd94a0cf3d19d7caa3717690004101e3ff4748760', name: "close-outline" }))), index.h("slot", { key: '3181fafe55869add4a587bf4726226055e98588d', name: "content" }))));
     }
 };
 PosDialog.style = PosDialogStyle0;
@@ -3382,11 +3273,11 @@ const PosErrorToast = class {
         await toast.present();
     }
     render() {
-        return (index.h(index.Host, { key: 'ca253ac051cc38f56c8db1224fea075293f796b4' }, index.h("ion-toast", { key: '060b78fd54963782be40abca4592c5871fc84d82', trigger: "never", message: "Workarround to preload ion-toast and ion-ripple-effect to be able to show errors while offline", duration: 0 }, index.h("ion-ripple-effect", { key: '45f799c8d1f36ad3f11a62485677fc38eb01857b' })), index.h("slot", { key: '02c6e3ad7cce764de694579056fc1fe1d97dfa32' })));
+        return (index.h(index.Host, { key: 'c1ee5f8a19177c79a3fe377fa27e4a32ffa9db9f' }, index.h("ion-toast", { key: '8759a3436a5caa16a11a2900a5f67d0dd205d097', trigger: "never", message: "Workarround to preload ion-toast and ion-ripple-effect to be able to show errors while offline", duration: 0 }, index.h("ion-ripple-effect", { key: '990aa24f2a18750ec5307498acda539b784c86c4' })), index.h("slot", { key: 'bea0650cc211dc2a161e7c634825adc045647d84' })));
     }
 };
 
-const posExampleResourcesCss = ":host{border:var(--size-px) solid var(--color-grey-100);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--size-8);max-width:var(--size-96);background:var(--color-white)}.links{display:flex;flex-direction:column;gap:var(--size-3);max-width:80vw}";
+const posExampleResourcesCss = ":host{border:var(--size-px) solid var(--pos-border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--size-8);max-width:var(--size-96);background:var(--pos-card-background)}.links{display:flex;flex-direction:column;gap:var(--size-3);max-width:80vw}";
 const PosExampleResourcesStyle0 = posExampleResourcesCss;
 
 const PosExampleResources = class {
@@ -3399,7 +3290,7 @@ const PosExampleResources = class {
 };
 PosExampleResources.style = PosExampleResourcesStyle0;
 
-const posGettingStartedCss = ":host{border:var(--size-px) solid var(--color-grey-100);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--size-8);max-width:var(--size-96);background:var(--color-white)}.question{font-weight:var(--weight-semibold);color:var(--color-grey-900)}a{font-weight:var(--weight-bold);color:var(--pos-primary-color)}";
+const posGettingStartedCss = ":host{border:var(--size-px) solid var(--pos-border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--size-8);max-width:var(--size-96);background:var(--pos-card-background)}.question{font-weight:var(--weight-semibold)}a{font-weight:var(--weight-bold);color:var(--pos-primary-color)}";
 const PosGettingStartedStyle0 = posGettingStartedCss;
 
 const PosGettingStarted = class {
@@ -3537,12 +3428,12 @@ const PosLogin = class {
         this.dialog.showModal();
     }
     render() {
-        return (index.h(index.Host, { key: '246bea632b952b0a004e1237697a86bd0ebfeea4' }, index.h("div", { key: 'cdcb1905deb0d27f79adc4ed1eeae0adb47b37f6', class: "container" }, BrokenFile.store.state.isLoggedIn ? (index.h("pos-resource", { uri: BrokenFile.store.state.webId }, index.h("span", { class: "user-data" }, index.h("pos-picture", null), index.h("pos-label", null)))) : (''), !BrokenFile.store.state.isLoggedIn && (index.h("button", { key: 'dc3a1072af920e9495a2e003c1e2edf8d282de29', id: "login", onClick: () => this.openDialog() }, "Login")), BrokenFile.store.state.isLoggedIn && (index.h("button", { key: 'ca04ffb1126cd26d1c80060673c036048b403c82', id: "logout", onClick: () => this.logout() }, "Logout"))), index.h("pos-dialog", { key: 'f832ac8272a695e1bcf826d5aa5d62843bfb4de5', ref: el => (this.dialog = el) }, index.h("span", { key: 'd2dd84554a068af4a044cba963aa4417b8232d93', slot: "title" }, "Sign in to your Pod"), index.h("pos-login-form", { key: '98b542c2ddc6828fe99857632ee90a0dae6fdf96', "onPod-os:idp-url-selected": ev => this.login(ev), slot: "content" }))));
+        return (index.h(index.Host, { key: '6349e0939fb22cddc9a6e47d424ce2badd518dcd' }, index.h("div", { key: '940d720ae5a7b951fe4a1bf411e463add43d93d0', class: "container" }, BrokenFile.store.state.isLoggedIn ? (index.h("pos-resource", { uri: BrokenFile.store.state.webId }, index.h("span", { class: "user-data" }, index.h("pos-picture", null), index.h("pos-label", null)))) : (''), !BrokenFile.store.state.isLoggedIn && (index.h("button", { key: '40aeea2f9686c9792c3952f8b899f9e819895bae', id: "login", onClick: () => this.openDialog() }, "Login")), BrokenFile.store.state.isLoggedIn && (index.h("button", { key: 'dd8129f4ae6b590231c33d072f4094b7bfc99da5', id: "logout", onClick: () => this.logout() }, "Logout"))), index.h("pos-dialog", { key: '33278d394f830f5c6040c3c22dc720440dd9d75c', ref: el => (this.dialog = el) }, index.h("span", { key: '96d3c645cacb1b38bd9adca8562ae4068eeabe11', slot: "title" }, "Sign in to your Pod"), index.h("pos-login-form", { key: '0c296b68774e4e2c1ed6091c305348b36e80178f', "onPod-os:idp-url-selected": ev => this.login(ev), slot: "content" }))));
     }
 };
 PosLogin.style = PosLoginStyle0;
 
-const posLoginFormCss = ":host{display:block;margin:0}form{display:flex;flex-direction:column;gap:var(--size-4)}input{outline:var(--pos-input-outline);padding:var(--scale-000);border:none;border-radius:var(--radius-xs);width:var(--size-full);box-sizing:border-box}input:focus-within{outline:var(--pos-input-focus-outline)}input#login{outline:none;box-shadow:var(--shadow-sm);cursor:pointer;color:var(--pos-primary-text-color);background-color:var(--pos-primary-color)}input#login:disabled{cursor:default;color:var(--pos-disabled-text-color);background-color:var(--pos-disabled-color);box-shadow:none}input#login:hover:not(:disabled),input#login:focus{filter:brightness(110%);box-shadow:var(--shadow-md)}";
+const posLoginFormCss = ":host{display:block;margin:0}form{display:flex;flex-direction:column;gap:var(--size-4)}input{outline:var(--pos-input-outline);padding:var(--scale-000);border:none;border-radius:var(--radius-xs);width:var(--size-full);box-sizing:border-box;background:var(--pos-input-background-color);color:var(--pos-normal-text-color)}input:focus-within{outline:var(--pos-input-focus-outline)}input#login{outline:none;box-shadow:var(--shadow-sm);cursor:pointer;color:var(--pos-primary-text-color);background-color:var(--pos-primary-color)}input#login:disabled{cursor:default;color:var(--pos-disabled-text-color);background-color:var(--pos-disabled-color);box-shadow:none}input#login:hover:not(:disabled),input#login:focus{filter:brightness(110%);box-shadow:var(--shadow-md)}";
 const PosLoginFormStyle0 = posLoginFormCss;
 
 const PosLoginForm = class {
@@ -3556,7 +3447,7 @@ const PosLoginForm = class {
         this.canSubmit = Boolean(this.idpUrl);
     }
     render() {
-        return (index.h("form", { key: 'ad94a827203fead2cc5976e65d5dd11b76929a37', method: "dialog", onSubmit: () => this.handleSubmit() }, index.h("label", { key: '042115e98ac3dc97aa941b9a086a930c532bab19', htmlFor: "idpUrl" }, "Please enter your Identity Provider"), index.h("input", { key: '45a4621d9a21a5b21ec82f81025b2be68d5505ae', id: "idpUrl", type: "url", value: this.idpUrl, required: true, onInput: e => this.handleChange(e), list: "suggestedIssuers", placeholder: "Type to search..." }), index.h("datalist", { key: '1f4dd4962470e796d1a175ea2ec2d03663390a0d', id: "suggestedIssuers" }, index.h("option", { key: 'f00f189f9f7babbda5c109a57d380d4d44d68f79', value: "https://solidcommunity.net" }, "solidcommunity.net"), index.h("option", { key: 'a0a1e4171ef87cd219cb8f0c68b68d0901d3fa55', value: "https://solidweb.org" }, "solidweb.org"), index.h("option", { key: '4361294b71ba9b7b123dd5d1deb2692b2edfa59e', value: "https://solidweb.me" }, "solidweb.me"), index.h("option", { key: '0fcee23d732415ef206d8c9a4d18c31f2bcd8eca', value: "https://inrupt.net" }, "inrupt.net"), index.h("option", { key: '267b177e9765e09ee2aa592c8a4d4c152ad7fb0b', value: "https://login.inrupt.com" }, "Inrupt PodSpaces"), index.h("option", { key: '302a4d517fedeafb146d9f8a3938383c57e24f7e', value: "https://trinpod.us" }, "trinpod.us"), index.h("option", { key: '83fd1b92688b24f575d3ee17a9cb394c8ab16eab', value: "https://use.id" }, "use.id"), index.h("option", { key: '007f814795f747d9b74f7b16db986502a9b746af', value: "https://solid.redpencil.io" }, "redpencil.io"), index.h("option", { key: '5477d60737d194bce4c50f24a75930427b6dc9bb', value: "https://datapod.grant.io" }, "Data Pod (grant.io)"), index.h("option", { key: 'e289736fcc31902f783efae443f17dfda532ba9f', value: "https://teamid.live" }, "teamid.live")), index.h("input", { key: '69a61d727a4e2c88a7f3594b98cca42f934b649a', id: "login", type: "submit", value: "Login", disabled: !this.canSubmit })));
+        return (index.h("form", { key: '193d3790329d1480fd6b14fd55a0d8cee8ce61dd', method: "dialog", onSubmit: () => this.handleSubmit() }, index.h("label", { key: 'd85ea6b508c9f229e1125f8cc97092335458b94a', htmlFor: "idpUrl" }, "Please enter your Identity Provider"), index.h("input", { key: 'a2f5e9955b27a8c1fab14c8f087fab167a19dc9a', id: "idpUrl", type: "url", value: this.idpUrl, required: true, onInput: e => this.handleChange(e), list: "suggestedIssuers", placeholder: "Type to search..." }), index.h("datalist", { key: 'fa0924b31e1a4fcdc794931dd2073022ab4ce95b', id: "suggestedIssuers" }, index.h("option", { key: 'c3495be7c2a98494ac3ca7fe504edd4b1b232394', value: "https://solidcommunity.net" }, "solidcommunity.net"), index.h("option", { key: '7fd17434388ed31468df8682dcfc2b4263c27ccb', value: "https://solidweb.org" }, "solidweb.org"), index.h("option", { key: '4c2a5854fc2499198b289181136cbd0a2fd9c1e1', value: "https://solidweb.me" }, "solidweb.me"), index.h("option", { key: '02a81104db23c62e0d42b8b45b95eccbd16fc108', value: "https://inrupt.net" }, "inrupt.net"), index.h("option", { key: 'd7c15dca86800cafc5a974920e40bd117fa50194', value: "https://login.inrupt.com" }, "Inrupt PodSpaces"), index.h("option", { key: '93ff71136f1775098fda80db5d437f37b51c496f', value: "https://trinpod.us" }, "trinpod.us"), index.h("option", { key: '481f1630526e324cb24b38c0077b1aeb496b4690', value: "https://use.id" }, "use.id"), index.h("option", { key: 'abd85ffba7532ba488bf0a4c18a2da2f3dc481ee', value: "https://solid.redpencil.io" }, "redpencil.io"), index.h("option", { key: '339562d277c4af2e10344f385d00aa4cc37375fa', value: "https://datapod.grant.io" }, "Data Pod (grant.io)"), index.h("option", { key: '918224ac5af806666a7b77bc8049dcf79800ab8c', value: "https://teamid.live" }, "teamid.live")), index.h("input", { key: '1ad3ef7998237d30c5eaf5bc9eebe55ede09d0a8', id: "login", type: "submit", value: "Login", disabled: !this.canSubmit })));
     }
     handleChange(event) {
         this.validate();
@@ -3572,7 +3463,7 @@ const PosLoginForm = class {
 };
 PosLoginForm.style = PosLoginFormStyle0;
 
-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 = class {
@@ -3679,7 +3570,7 @@ const IconMakeFindable = () => (index.h("svg", { role: "presentation", xmlns: "h
 const IconSuccess = () => (index.h("svg", { role: "presentation", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" }, index.h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", 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" })));
 PosMakeFindable.style = PosMakeFindableStyle0;
 
-const posNavigationBarCss = ":host {\n}\n\n.suggestions ol {\n  border: 1px solid var(--color-grey-200);\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  margin: 0;\n  padding: 0;\n  z-index: var(--layer-top);\n  list-style-type: none;\n  box-shadow: var(--shadow-xl);\n}\n\n.suggestions {\n  position: relative;\n  li {\n    padding: 1rem;\n    background-color: white;\n    pos-rich-link {\n      --background-color: inherit;\n    }\n    &.selected {\n      background-color: var(--color-blue);\n      &:hover {\n        background-color: var(--color-blue-700);\n      }\n    }\n    &:hover {\n      background-color: var(--color-grey-200);\n    }\n  }\n}\n\n.suggestions li.selected pos-rich-link {\n  --label-color: white;\n  --description-color: var(--color-grey-200);\n  --uri-color: var(--color-grey-200);\n}\n\nion-searchbar {\n  width: 100%;\n}\n\nform {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.bar {\n  flex-grow: 1;\n}\n";
+const posNavigationBarCss = ".suggestions ol {\n  border: 1px solid var(--pos-border-color);\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  margin: 0;\n  padding: 0;\n  z-index: var(--layer-top);\n  list-style-type: none;\n  box-shadow: var(--shadow-xl);\n}\n\n.suggestions {\n  position: relative;\n  li {\n    padding: 1rem;\n    background-color: var(--pos-background-color);\n    pos-rich-link {\n      --background-color: inherit;\n    }\n    &.selected {\n      background-color: var(--pos-primary-color);\n      &:hover {\n        background-color: var(--pos-primary-color);\n      }\n    }\n    &:hover {\n      background-color: var(--pos-border-color);\n    }\n  }\n}\n\n.suggestions li.selected pos-rich-link {\n  --label-color: white;\n  --description-color: var(--pos-border-color);\n  --uri-color: var(--pos-subtle-text-color);\n}\n\nion-searchbar {\n  width: 100%;\n}\n\nform {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.bar {\n  flex-grow: 1;\n}\n";
 const PosNavigationBarStyle0 = posNavigationBarCss;
 
 const PosNavigationBar = class {
@@ -3756,12 +3647,12 @@ const PosNavigationBar = class {
         }
     }
     render() {
-        return (index.h("form", { key: 'dadf35124fd0908c3623ef2e358f1e751a0b7242', onSubmit: e => this.onSubmit(e) }, this.searchIndex && this.uri ? index.h("pos-make-findable", { uri: this.uri }) : '', index.h("div", { key: '64d85b0b51298e2d1b3d6ff32f36db3f80fa1796', class: "bar" }, index.h("ion-searchbar", { key: 'cd51737238ab42315ace5bebdcc0b4c561b02c38', enterkeyhint: "search", placeholder: "Search or enter URI", value: this.uri, debounce: 300, onIonChange: e => this.onChange(e), onIonInput: e => this.onChange(e) }), this.suggestions.length > 0 ? (index.h("div", { class: "suggestions" }, index.h("ol", null, this.suggestions.map((it, index$1) => (index.h("li", { class: index$1 === this.selectedIndex ? 'selected' : '' }, index.h("pos-rich-link", { uri: it.ref }))))))) : null)));
+        return (index.h("form", { key: 'e92382c2024642ea5c0b5abb00f1759003f74c78', onSubmit: e => this.onSubmit(e) }, this.searchIndex && this.uri ? index.h("pos-make-findable", { uri: this.uri }) : '', index.h("div", { key: 'c32607860e8aa1fe6d6d182c0e2a056f40b6f1b7', class: "bar" }, index.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 ? (index.h("div", { class: "suggestions" }, index.h("ol", null, this.suggestions.map((it, index$1) => (index.h("li", { class: index$1 === this.selectedIndex ? 'selected' : '' }, index.h("pos-rich-link", { uri: it.ref }))))))) : null)));
     }
 };
 PosNavigationBar.style = PosNavigationBarStyle0;
 
-const posNewThingFormCss = ":host{display:block}form{display:grid;grid-template-columns:var(--size-16) 1fr;grid-gap:var(--scale-0)}label{grid-column:1 / 2;display:flex;align-items:center;justify-content:flex-end}input,pos-select-term,button{grid-column:2 / 3}input,pos-select-term::part(input){outline:var(--pos-input-outline);padding:var(--scale-000);border:none;border-radius:var(--radius-xs);width:var(--size-full);box-sizing:border-box}input:focus-within,pos-select-term::part(input):focus-within{outline:var(--pos-input-focus-outline)}#new-uri{grid-column:1/3;cursor:default;word-break:break-all;color:var(--color-grey-800);font-weight:var(--weight-light);background:var(--color-grey-100);padding:var(--scale-000);border-radius:var(--radius-xs)}input#create{outline:none;box-shadow:var(--shadow-sm);cursor:pointer;color:var(--pos-primary-text-color);background-color:var(--pos-primary-color)}input#create:disabled{cursor:default;color:var(--pos-disabled-text-color);background-color:var(--pos-disabled-color);box-shadow:none}input#create:hover:not(:disabled),input#create:focus{filter:brightness(110%);box-shadow:var(--shadow-md)}";
+const posNewThingFormCss = ":host{display:block}form{display:grid;grid-template-columns:var(--size-16) 1fr;grid-gap:var(--scale-0)}label{grid-column:1 / 2;display:flex;align-items:center;justify-content:flex-end}input,pos-select-term,button{grid-column:2 / 3}input,pos-select-term::part(input){outline:var(--pos-input-outline);padding:var(--scale-000);border:none;border-radius:var(--radius-xs);width:var(--size-full);box-sizing:border-box;background:var(--pos-input-background-color);color:var(--pos-normal-text-color)}input:focus-within,pos-select-term::part(input):focus-within{outline:var(--pos-input-focus-outline)}#new-uri{grid-column:1/3;cursor:default;word-break:break-all;color:var(--pos-normal-text-color);font-weight:var(--weight-light);background:var(--pos-disabled-color);padding:var(--scale-000);border-radius:var(--radius-xs)}input#create{outline:none;box-shadow:var(--shadow-sm);cursor:pointer;color:var(--pos-primary-text-color);background-color:var(--pos-primary-color)}input#create:disabled{cursor:default;color:var(--pos-disabled-text-color);background-color:var(--pos-disabled-color);box-shadow:none}input#create:hover:not(:disabled),input#create:focus{filter:brightness(110%);box-shadow:var(--shadow-md)}";
 const PosNewThingFormStyle0 = posNewThingFormCss;
 
 const PosNewThingForm = class {
@@ -3782,7 +3673,7 @@ const PosNewThingForm = class {
         PodOsAware.subscribePodOs(this);
     }
     render() {
-        return (index.h("form", { key: 'd231729bb8d01ffa9e1f88d9488fa92041f33460', method: "dialog", onSubmit: e => this.handleSubmit(e) }, index.h("label", { key: '739f893b508ffe8baa0b575594af48f6f690425c', htmlFor: "type" }, "Type"), index.h("pos-select-term", { key: '9973af04355cf8dec838a4217f711e4c8669dab4', id: "type", placeholder: "", value: this.selectedTypeUri, "onPod-os:term-selected": e => this.onTermSelected(e) }), index.h("label", { key: '4fac8ecca95c2e16c98c35ae92ea9b7f6bd6a94a', htmlFor: "name" }, "Name"), index.h("input", { key: 'c922c03e656d194c3235fb374ef90fce205f7ee7', id: "name", type: "text", value: this.name, onInput: e => this.handleChange(e) }), this.newUri ? (index.h("div", { id: "new-uri", title: "This will be the URI of the new thing" }, this.newUri)) : null, index.h("input", { key: 'fb39eb6c09e67315326f13e184aab93a4ed786c6', id: "create", type: "submit", value: "Create", disabled: !this.canSubmit })));
+        return (index.h("form", { key: '9ee9d0ab4f31bfc55865ef697d410b37977b1051', method: "dialog", onSubmit: e => this.handleSubmit(e) }, index.h("label", { key: 'a6f807d2034d55e5218c01375c4ff36564924bfb', htmlFor: "type" }, "Type"), index.h("pos-select-term", { key: 'f6001d6801bee97c03121d57742a595c8d5d5bd7', id: "type", placeholder: "", value: this.selectedTypeUri, "onPod-os:term-selected": e => this.onTermSelected(e) }), index.h("label", { key: '9365561d47d72e0153bb743f4fdf5ca7a1b5dcc0', htmlFor: "name" }, "Name"), index.h("input", { key: 'c93de873370a1123441a33d27c53c954bcc5f5ce', id: "name", type: "text", value: this.name, onInput: e => this.handleChange(e) }), this.newUri ? (index.h("div", { id: "new-uri", title: "This will be the URI of the new thing" }, this.newUri)) : null, index.h("input", { key: '9fc1fb39f7c582a069876642cc17678303c7d72b', id: "create", type: "submit", value: "Create", disabled: !this.canSubmit })));
     }
     handleChange(event) {
         this.name = event.target.value;
@@ -3842,6 +3733,9 @@ const PosPicture = class {
 };
 PosPicture.style = PosPictureStyle0;
 
+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 = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -3896,9 +3790,9 @@ const PosResource = class {
             return index.h("ion-progress-bar", { type: "indeterminate" });
         }
         if (this.error) {
-            return (index.h("ion-card", null, index.h("ion-card-header", null, index.h("p", null, "Sorry, something went wrong"), index.h("p", null, "Status:", 
+            return (index.h("details", { class: "error" }, index.h("summary", { title: "Click to expand" }, "\u26A0 Sorry, something went wrong"), index.h("p", null, "Status:", 
             // @ts-ignore
-            this.error.status), index.h("details", null, this.error.message)), index.h("ion-card-content", null, index.h("p", null, "You can try to open the link outside PodOS:"), index.h("a", { href: this.uri }, this.uri))));
+            this.error.status), index.h("p", null, this.error.message), index.h("p", null, "You can try to open the link outside PodOS: ", index.h("a", { href: this.uri }, this.uri))));
         }
         return index.h("slot", null);
     }
@@ -3907,8 +3801,9 @@ const PosResource = class {
         "uri": ["loadResource"]
     }; }
 };
+PosResource.style = PosResourceStyle0;
 
-const posRichLinkCss = ":host {\n  --background-color: inherit;\n  --label-color: var(--color-grey-900);\n  --description-color: var(--color-grey-900);\n  --uri-color: var(--color-grey-600);\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 = class {
@@ -3917,10 +3812,10 @@ const PosRichLink = class {
         this.linkEmitter = index.createEvent(this, "pod-os:link", 7);
     }
     render() {
-        return (index.h("pos-resource", { key: 'e9f1c8b7ca9ded161eebf1b4886b21ec2a23e042', lazy: true, uri: this.uri }, index.h("p", { key: '022cebbb522c3a04f1f6b83e9aeb8ad890642bdd', class: "content" }, index.h("a", { key: '105415deeb645e99e36d34f1750da0fa444c6ba8', href: this.uri, onClick: e => {
+        return (index.h("pos-resource", { key: '0a794cc8287b13f163a813dc6a4f87b2f00e028b', lazy: true, uri: this.uri }, index.h("p", { key: 'b7a44482a82cd69228f144b04e9ec20b84410339', class: "content" }, index.h("a", { key: '0d218d4d5c1991c767b66f0d37c5476038e7a0fb', href: this.uri, onClick: e => {
                 e.preventDefault();
                 this.linkEmitter.emit(this.uri);
-            } }, index.h("pos-label", { key: '4530f9511b81d37229f7c4f57915da035002bdfb' })), index.h("span", { key: '341e91a6167d36881d2bb5e96365aa7f2f7f2f9b', class: "url" }, new URL(this.uri).host), index.h("pos-description", { key: 'c8e3875a219a76fa401a558d9c4eaa6813206a19' }))));
+            } }, index.h("pos-label", { key: 'd04048986a7a4da138608f187a2f27e6313d9a6e' })), index.h("span", { key: '53a05023aa2fec4725e1d7e59acee9888476ecac', class: "url" }, new URL(this.uri).host), index.h("pos-description", { key: 'a73de2d208b684a9f555cda312e94df4282afba0' }))));
     }
 };
 PosRichLink.style = PosRichLinkStyle0;
@@ -4251,12 +4146,12 @@ const PosRouter = class {
         this.routeChanged.emit(this.uri);
     }
     render() {
-        return index.h("slot", { key: '4c9986b609d72550130ca76675dee260ca1cf373' });
+        return index.h("slot", { key: '221db70a52ce7ebc7e9c171142dcf94f252fa985' });
     }
 };
 PosRouter.style = PosRouterStyle0;
 
-const posSelectTermCss = ":host{display:block}input{border:none;padding-top:1rem;padding-bottom:1rem}input:focus{outline:none}";
+const posSelectTermCss = ":host{display:block}input{background-color:transparent;color:var(--pos-normal-text-color);border:none;padding-top:1rem;padding-bottom:1rem}input:focus{outline:none}";
 const PosSelectTermStyle0 = posSelectTermCss;
 
 const PosSelectTerm = class {
@@ -4281,7 +4176,7 @@ const PosSelectTerm = class {
         this.termSelected.emit({ uri: event.target.value });
     }
     render() {
-        return (index.h(index.Host, { key: '0c84c241534e981ac22797ca058622c79aa2c661' }, index.h("input", { key: '0dd0c1d3ed228a3e2c333e440eb5044e99110252', part: "input", list: "terms", placeholder: this.placeholder, value: this.value, onChange: ev => this.handleChange(ev) }), index.h("datalist", { key: 'b792a879f92d1b95b094cef9cab81738205a503b', part: "terms", id: "terms" }, this.terms.map(term => (index.h("option", { value: term.uri }, term.shorthand))))));
+        return (index.h(index.Host, { key: '7a548735e2a0478fa1e63e2a880ca61f0f43d91c' }, index.h("input", { key: '9549691026f4bf42a3048f2af3a78bd71536b160', part: "input", list: "terms", placeholder: this.placeholder, value: this.value, onChange: ev => this.handleChange(ev) }), index.h("datalist", { key: 'adfd77a001389d6cc092e3b054ef12e45d562d54', part: "terms", id: "terms" }, this.terms.map(term => (index.h("option", { value: term.uri }, term.shorthand))))));
     }
     static get delegatesFocus() { return true; }
     static get watchers() { return {
@@ -4290,7 +4185,7 @@ const PosSelectTerm = class {
 };
 PosSelectTerm.style = PosSelectTermStyle0;
 
-const posSettingOfflineCacheCss = ":host{border:var(--size-px) solid var(--color-grey-100);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--size-8);max-width:var(--size-96);background:var(--color-white)}svg{width:var(--size-8)}h2{display:flex;align-items:center}p{padding:var(--size-2)}.info{background-color:var(--color-blue-200)}.warn{background-color:var(--color-yellow-200)}";
+const posSettingOfflineCacheCss = ":host{border:var(--size-px) solid var(--pos-border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--size-8);max-width:var(--size-96);background:var(--pos-card-background)}svg{width:var(--size-8)}h2{display:flex;align-items:center}p{padding:var(--size-2)}.info{color:var(--color-grey-900);background-color:var(--color-blue-200)}.warn{color:var(--color-grey-900);background-color:var(--color-yellow-200)}";
 const PosSettingOfflineCacheStyle0 = posSettingOfflineCacheCss;
 
 const PosSettingOfflineCache = class {
@@ -4298,7 +4193,7 @@ const PosSettingOfflineCache = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'a98de97ba1e0930b485a4a3610102deb02d927a7' }, index.h("div", { key: '5cf196a71b95fdfed7e5d990b272e12d2b9dd3ff' }, index.h("h2", { key: '99ddd9827f3ccc5a5277cc64e3952a3f5170f7bc' }, index.h("svg", { key: 'd9ce3722957428524cc9b264265320119f2e5c88', xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" }, index.h("path", { key: '8e4e7af37df231e3141ba30b17a02517737cbe85', "stroke-linecap": "round", "stroke-linejoin": "round", d: "M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" })), "Cache Settings"), index.h("p", { key: '7175929cd9327bc705db305294afa362cb2f648c', class: "info" }, "\u2139 Enable offline cache to be able to access previously loaded data while offline."), index.h("p", { key: '784fd9141b339165fdab6a98c084430299ff7ed5', class: "warn" }, "\u26A0 Private data may be stored on this device. Only enable it, if you trust this device."), index.h("label", { key: 'dac2cddf6b6c374d1a2ef3c4d9bad63a9cb7b8d9' }, index.h("input", { key: 'e39adb18d03ce622a85dd48a28c6d3c0dc2ce7f4', type: "checkbox", checked: localSettings.state.offlineCache, onChange: ev => (localSettings.state.offlineCache = ev.target.checked) }), "Enable offline cache"))));
+        return (index.h(index.Host, { key: 'f024e7d542cfc87a4dc0a1f22694b664086ebd60' }, index.h("div", { key: 'e88e694cefa4a2361ca8c67f1bd023fda1b70f2a' }, index.h("h2", { key: 'c4b2e6270f26a2eb7f62e5076b40834903fc10e4' }, index.h("svg", { key: 'd63643c1ed908c6fe9ab4ff6c47b13848c714c32', xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" }, index.h("path", { key: '78f055556bb175ea17d0db1ccf78c16343d67d3f', "stroke-linecap": "round", "stroke-linejoin": "round", d: "M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" })), "Cache Settings"), index.h("p", { key: '3045ae3214b9e91feb34857ce45a3db6529f2959', class: "info" }, "\u2139 Enable offline cache to be able to access previously loaded data while offline."), index.h("p", { key: '9987c1cb59b62e1eb06c67a9c646a9a2f125529a', class: "warn" }, "\u26A0 Private data may be stored on this device. Only enable it, if you trust this device."), index.h("label", { key: '55dd3c0fa7ece9a59437e7818d6cfa9b0e9eb5bf' }, index.h("input", { key: '22874f8a39b5016b71818fa1d6226bf66ff969c3', type: "checkbox", checked: localSettings.state.offlineCache, onChange: ev => (localSettings.state.offlineCache = ev.target.checked) }), "Enable offline cache"))));
     }
 };
 PosSettingOfflineCache.style = PosSettingOfflineCacheStyle0;
@@ -4356,9 +4251,6 @@ const PosTypeRouter = class {
     }
 };
 
-exports.ion_card = Card;
-exports.ion_card_content = CardContent;
-exports.ion_card_header = CardHeader;
 exports.ion_icon = Icon;
 exports.ion_progress_bar = ProgressBar;
 exports.ion_ripple_effect = RippleEffect;
@@ -4391,4 +4283,4 @@ exports.pos_select_term = PosSelectTerm;
 exports.pos_setting_offline_cache = PosSettingOfflineCache;
 exports.pos_type_router = PosTypeRouter;
 
-//# sourceMappingURL=ion-card_34.cjs.entry.js.map
+//# sourceMappingURL=ion-icon_31.cjs.entry.js.map