@pod-os/elements 0.26.1-rc.d6e1fef.0 → 0.26.1-rc.f4329bf.0

package/dist/collection/apps/pos-app-dashboard/pos-getting-started/pos-getting-started.css

@@ -15,3 +15,15 @@ a {
   font-weight: var(--weight-bold);
   color: var(--pos-primary-color);
 }
+
+button.login {
+  background: none;
+  color: var(--pos-primary-color);
+  display: inline;
+  text-decoration: underline;
+  border: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  font-size: unset;
+}

package/dist/collection/apps/pos-app-dashboard/pos-getting-started/pos-getting-started.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class PosGettingStarted {
     render() {
-        return (h(Host, { key: 'a31a64545a5960ce8e34f0c612d2755e465c1131' }, h("div", { key: '29ec2c449fd5334e47199dece7c01c2a71ab6d98' }, h("h2", { key: 'e680003831826c8cd4615de083f9f9c305513c29' }, "Getting started \uD83D\uDE80"), h("p", { key: '8e80305087bee4c8ec05ac7cb16096caf0c61ad0' }, "\uD83D\uDD0E Enter a URL into the above navigation bar to browse through the web of data. "), h("p", { key: '4d7ba95047694e636934cb7a03c291adb0678bb6' }, "\uD83D\uDD10 Sign in to access private resources on your Solid Pod or those of your friends or coworkers.")), h("div", { key: '167ac903fa88b9be6cf00f2f5bfea23d8dfd14c9' }, h("p", { key: 'a0b06f944e534b889502a96c935686a3b7f349d0', class: "question" }, "New to Solid?"), h("p", { key: '8c26c4d20d0fcdb075ad4c0ea5ff012d22dee081' }, h("a", { key: 'd9bc5b7bfd213012078729e25e42b4ea8b970573', href: "https://solidproject.org/for-developers#hosted-pod-services" }, "Get a Pod \u2192"))), h("div", { key: '223f171699e3acf5f1c5c4819621bddc49db41f1' }, h("p", { key: 'e83cfd2b01c5abaf30f0053ef261c68ae0919f0a', class: "question" }, "Want to dig deeper into PodOS?"), h("p", { key: '8ccdbd60a250850c4105e99545f09755109ced86' }, h("a", { key: 'f72a83533b846bd8e8e798b0dd71cfc585a8d104', href: "http://pod-os.org" }, "Learn more \u2192")))));
+        return (h(Host, { key: '23a14b5ee10d585cc8cf3166ce041072b68cabb2' }, h("div", { key: '964e46223d77516aaed40c7c55371716cfccf40a' }, h("h2", { key: '5eaf56d6b0751d8511632d05570a05d5deba88c0' }, "Getting started \uD83D\uDE80"), h("p", { key: 'f41d858112a0337bcf2be9a39986cacac6921210' }, "\uD83D\uDD0E Enter a URL into the above navigation bar to browse through the web of data. "), h("p", { key: '8d40de32d86b871343687b402122b0dcc843daf9' }, "\uD83D\uDD10", ' ', h("button", { key: '225091e03c1cf175362dc9530cf1eb5238e50d65', class: "login", onClick: () => this.login.emit() }, "Sign in"), ' ', "to access private resources on your Solid Pod or those of your friends or coworkers.")), h("div", { key: '92924f3a67ac70cd333932f0658f9f73dd7474c9' }, h("p", { key: '365d7c78aee4bb9396ac7d55c42c9e26b47fe87a', class: "question" }, "New to Solid?"), h("p", { key: '42190c0f401faff3cf43fe8f3c69f4afc380f819' }, h("a", { key: 'd7de0d55a657c8a54a389efc50aa89bc4d48c5e6', href: "https://solidproject.org/for-developers#hosted-pod-services" }, "Get a Pod \u2192"))), h("div", { key: '8ad728231a1f2af613a462982af6bf129956ab1c' }, h("p", { key: 'c960fa49ff9789fe881cadc4f37d315c7727115a', class: "question" }, "Want to dig deeper into PodOS?"), h("p", { key: '7991e91dbfdfc0447a2e08850e3634086f3f12ee' }, h("a", { key: 'a35d336eb2ca5947e66abb9e37526ee035c0a700', href: "http://pod-os.org" }, "Learn more \u2192")))));
     }
     static get is() { return "pos-getting-started"; }
     static get encapsulation() { return "shadow"; }
@@ -15,5 +15,23 @@ export class PosGettingStarted {
             "$": ["pos-getting-started.css"]
         };
     }
+    static get events() {
+        return [{
+                "method": "login",
+                "name": "pod-os:login",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
 }
 //# sourceMappingURL=pos-getting-started.js.map

package/dist/collection/apps/pos-app-dashboard/pos-getting-started/pos-getting-started.js.map

@@ -1 +1 @@
-{"version":3,"file":"pos-getting-started.js","sourceRoot":"","sources":["../../../../../src/apps/pos-app-dashboard/pos-getting-started/pos-getting-started.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,iBAAiB;IAC5B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH;gBACE,4FAA2B;gBAC3B,yJAAuF;gBACvF,wKAAsG,CAClG;YACN;gBACE,0DAAG,KAAK,EAAC,UAAU,oBAAkB;gBACrC;oBACE,0DAAG,IAAI,EAAC,6DAA6D,uBAAqB,CACxF,CACA;YACN;gBACE,0DAAG,KAAK,EAAC,UAAU,qCAAmC;gBACtD;oBACE,0DAAG,IAAI,EAAC,mBAAmB,wBAAsB,CAC/C,CACA,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'pos-getting-started',\n  styleUrl: 'pos-getting-started.css',\n  shadow: true,\n})\nexport class PosGettingStarted {\n  render() {\n    return (\n      <Host>\n        <div>\n          <h2>Getting started 🚀</h2>\n          <p>🔎 Enter a URL into the above navigation bar to browse through the web of data. </p>\n          <p>🔐 Sign in to access private resources on your Solid Pod or those of your friends or coworkers.</p>\n        </div>\n        <div>\n          <p class=\"question\">New to Solid?</p>\n          <p>\n            <a href=\"https://solidproject.org/for-developers#hosted-pod-services\">Get a Pod &rarr;</a>\n          </p>\n        </div>\n        <div>\n          <p class=\"question\">Want to dig deeper into PodOS?</p>\n          <p>\n            <a href=\"http://pod-os.org\">Learn more &rarr;</a>\n          </p>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pos-getting-started.js","sourceRoot":"","sources":["../../../../../src/apps/pos-app-dashboard/pos-getting-started/pos-getting-started.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOxE,MAAM,OAAO,iBAAiB;IAI5B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH;gBACE,4FAA2B;gBAC3B,yJAAuF;gBACvF;;oBACK,GAAG;oBACN,+DAAQ,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,cAE7C;oBAAC,GAAG;2GAEX,CACA;YACN;gBACE,0DAAG,KAAK,EAAC,UAAU,oBAAkB;gBACrC;oBACE,0DAAG,IAAI,EAAC,6DAA6D,uBAAqB,CACxF,CACA;YACN;gBACE,0DAAG,KAAK,EAAC,UAAU,qCAAmC;gBACtD;oBACE,0DAAG,IAAI,EAAC,mBAAmB,wBAAsB,CAC/C,CACA,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'pos-getting-started',\n  styleUrl: 'pos-getting-started.css',\n  shadow: true,\n})\nexport class PosGettingStarted {\n  @Event({ eventName: 'pod-os:login' })\n  login: EventEmitter<void>;\n\n  render() {\n    return (\n      <Host>\n        <div>\n          <h2>Getting started 🚀</h2>\n          <p>🔎 Enter a URL into the above navigation bar to browse through the web of data. </p>\n          <p>\n            🔐{' '}\n            <button class=\"login\" onClick={() => this.login.emit()}>\n              Sign in\n            </button>{' '}\n            to access private resources on your Solid Pod or those of your friends or coworkers.\n          </p>\n        </div>\n        <div>\n          <p class=\"question\">New to Solid?</p>\n          <p>\n            <a href=\"https://solidproject.org/for-developers#hosted-pod-services\">Get a Pod &rarr;</a>\n          </p>\n        </div>\n        <div>\n          <p class=\"question\">Want to dig deeper into PodOS?</p>\n          <p>\n            <a href=\"http://pod-os.org\">Learn more &rarr;</a>\n          </p>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/collection-manifest.json

@@ -28,7 +28,8 @@
     "components/pos-login/pos-login.js",
     "components/pos-login-form/pos-login-form.js",
     "components/pos-make-findable/pos-make-findable.js",
-    "components/pos-navigation-bar/pos-navigation-bar.js",
+    "components/pos-navigation/pos-navigation.js",
+    "components/pos-navigation/bar/pos-navigation-bar.js",
     "components/pos-new-thing-form/pos-new-thing-form.js",
     "components/pos-picture/pos-picture.js",
     "components/pos-predicate/pos-predicate.js",
@@ -41,6 +42,7 @@
     "components/pos-subjects/pos-subjects.js",
     "components/pos-type-badges/pos-type-badges.js",
     "components/pos-type-router/pos-type-router.js",
+    "components/pos-user-menu/pos-user-menu.js",
     "components/pos-value/pos-value.js"
   ],
   "compiler": {

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

@@ -9,8 +9,8 @@ button#new {
   align-items: center;
   justify-content: center;
   border: none;
-  width: var(--scale-5);
-  height: var(--scale-5);
+  width: var(--size-10);
+  height: var(--size-10);
   background-color: var(--pos-primary-color);
   color: var(--pos-primary-text-color);
   font-size: var(--scale-6);

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

@@ -2,11 +2,13 @@ import { h, Host } from "@stencil/core";
 import session from "../../store/session";
 export class PosLogin {
     constructor() {
+        this.customLoggedInComponent = false;
         this.setOs = async (os) => {
             this.os = os;
         };
     }
     componentWillLoad() {
+        this.customLoggedInComponent = !!this.host.querySelector('[slot="if-logged-in"]');
         this.initializeOsEmitter.emit(this.setOs);
     }
     login(event) {
@@ -16,11 +18,23 @@ export class PosLogin {
     logout() {
         this.os.logout();
     }
+    onLogin() {
+        this.openDialog();
+    }
     openDialog() {
         this.dialog.showModal();
     }
     render() {
-        return (h(Host, { key: '6349e0939fb22cddc9a6e47d424ce2badd518dcd' }, h("div", { key: '940d720ae5a7b951fe4a1bf411e463add43d93d0', class: "container" }, session.state.isLoggedIn ? (h("pos-resource", { uri: session.state.webId }, h("span", { class: "user-data" }, h("pos-picture", null), h("pos-label", null)))) : (''), !session.state.isLoggedIn && (h("button", { key: '40aeea2f9686c9792c3952f8b899f9e819895bae', id: "login", onClick: () => this.openDialog() }, "Login")), session.state.isLoggedIn && (h("button", { key: 'dd8129f4ae6b590231c33d072f4094b7bfc99da5', id: "logout", onClick: () => this.logout() }, "Logout"))), h("pos-dialog", { key: '33278d394f830f5c6040c3c22dc720440dd9d75c', ref: el => (this.dialog = el) }, h("span", { key: '96d3c645cacb1b38bd9adca8562ae4068eeabe11', slot: "title" }, "Sign in to your Pod"), h("pos-login-form", { key: '0c296b68774e4e2c1ed6091c305348b36e80178f', "onPod-os:idp-url-selected": ev => this.login(ev), slot: "content" }))));
+        return (h(Host, { key: 'dded3af9b4a95f30b9eda0414ff90ef77503f730' }, h("div", { key: 'd97326a13eb116bf47e7bd2c0887cfca59b792ad', class: "container" }, !session.state.isLoggedIn ? (h("button", { id: "login", onClick: () => this.openDialog() }, "Login")) : (this.loggedInComponents())), h("pos-dialog", { key: 'fd361fd4961fb96d74e402c4f41288a191c56bd5', ref: el => (this.dialog = el) }, h("span", { key: '2254d45b88f06dab5b3c5ce593c01fb3b35bd935', slot: "title" }, "Sign in to your Pod"), h("pos-login-form", { key: '70a0080686c1f8064887b918273451c65c9a7813', "onPod-os:idp-url-selected": ev => this.login(ev), slot: "content" }))));
+    }
+    loggedInComponents() {
+        return this.customLoggedInComponent ? h("slot", { name: "if-logged-in" }) : this.defaultLoggedInComponents();
+    }
+    defaultLoggedInComponents() {
+        return [
+            h("pos-resource", { uri: session.state.webId }, h("span", { class: "user-data" }, h("pos-picture", null), h("pos-label", null))),
+            h("button", { id: "logout", onClick: () => this.logout() }, "Logout"),
+        ];
     }
     static get is() { return "pos-login"; }
     static get encapsulation() { return "shadow"; }
@@ -36,7 +50,8 @@ export class PosLogin {
     }
     static get states() {
         return {
-            "os": {}
+            "os": {},
+            "customLoggedInComponent": {}
         };
     }
     static get events() {
@@ -57,5 +72,21 @@ export class PosLogin {
                 }
             }];
     }
+    static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "pod-os:logout",
+                "method": "logout",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "pod-os:login",
+                "method": "onLogin",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 //# sourceMappingURL=pos-login.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"pos-login.js","sourceRoot":"","sources":["../../../../src/components/pos-login/pos-login.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE/E,OAAO,OAAO,MAAM,qBAAqB,CAAC;AAO1C,MAAM,OAAO,QAAQ;IALrB;QAcE,UAAK,GAAG,KAAK,EAAE,EAAS,EAAE,EAAE;YAC1B,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QACf,CAAC,CAAC;KAiDH;IAvDC,iBAAiB;QACf,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5C,CAAC;IAMD,KAAK,CAAC,KAA0B;QAC9B,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;QAC5B,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACxB,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC;IACnB,CAAC;IAID,UAAU;QACR,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC;IAC1B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,WAAW;gBACnB,OAAO,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAC1B,oBAAc,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC,KAAK;oBACpC,YAAM,KAAK,EAAC,WAAW;wBACrB,sBAAe;wBACf,oBAAa,CACR,CACM,CAChB,CAAC,CAAC,CAAC,CACF,EAAE,CACH;gBACA,CAAC,OAAO,CAAC,KAAK,CAAC,UAAU,IAAI,CAC5B,+DAAQ,EAAE,EAAC,OAAO,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,YAE1C,CACV;gBACA,OAAO,CAAC,KAAK,CAAC,UAAU,IAAI,CAC3B,+DAAQ,EAAE,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,aAEvC,CACV,CACG;YACN,mEAAY,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAA0B,CAAC;gBAC/D,6DAAM,IAAI,EAAC,OAAO,0BAA2B;gBAC7C,oGAA2C,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,IAAI,EAAC,SAAS,GAAG,CACvE,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { PodOS } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Host, State } from '@stencil/core';\n\nimport session from '../../store/session';\n\n@Component({\n  tag: 'pos-login',\n  shadow: true,\n  styleUrl: 'pos-login.css',\n})\nexport class PosLogin {\n  @Event({ eventName: 'pod-os:init' }) initializeOsEmitter: EventEmitter;\n\n  @State() os: PodOS;\n\n  componentWillLoad() {\n    this.initializeOsEmitter.emit(this.setOs);\n  }\n\n  setOs = async (os: PodOS) => {\n    this.os = os;\n  };\n\n  login(event: CustomEvent<string>) {\n    const idpUrl = event.detail;\n    this.os.login(idpUrl);\n  }\n\n  logout() {\n    this.os.logout();\n  }\n\n  private dialog: HTMLPosDialogElement;\n\n  openDialog() {\n    this.dialog.showModal();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"container\">\n          {session.state.isLoggedIn ? (\n            <pos-resource uri={session.state.webId}>\n              <span class=\"user-data\">\n                <pos-picture />\n                <pos-label />\n              </span>\n            </pos-resource>\n          ) : (\n            ''\n          )}\n          {!session.state.isLoggedIn && (\n            <button id=\"login\" onClick={() => this.openDialog()}>\n              Login\n            </button>\n          )}\n          {session.state.isLoggedIn && (\n            <button id=\"logout\" onClick={() => this.logout()}>\n              Logout\n            </button>\n          )}\n        </div>\n        <pos-dialog ref={el => (this.dialog = el as HTMLPosDialogElement)}>\n          <span slot=\"title\">Sign in to your Pod</span>\n          <pos-login-form onPod-os:idp-url-selected={ev => this.login(ev)} slot=\"content\" />\n        </pos-dialog>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pos-login.js","sourceRoot":"","sources":["../../../../src/components/pos-login/pos-login.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEhG,OAAO,OAAO,MAAM,qBAAqB,CAAC;AAO1C,MAAM,OAAO,QAAQ;IALrB;QAaU,4BAAuB,GAAY,KAAK,CAAC;QAOjD,UAAK,GAAG,KAAK,EAAE,EAAS,EAAE,EAAE;YAC1B,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QACf,CAAC,CAAC;KA4DH;IAnEC,iBAAiB;QACf,IAAI,CAAC,uBAAuB,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;QAClF,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5C,CAAC;IAMD,KAAK,CAAC,KAA0B;QAC9B,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;QAC5B,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACxB,CAAC;IAGD,MAAM;QACJ,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC;IACnB,CAAC;IAKD,OAAO;QACL,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAED,UAAU;QACR,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC;IAC1B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,WAAW,IACnB,CAAC,OAAO,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAC3B,cAAQ,EAAE,EAAC,OAAO,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,YAE1C,CACV,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,kBAAkB,EAAE,CAC1B,CACG;YACN,mEAAY,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;gBACvC,6DAAM,IAAI,EAAC,OAAO,0BAA2B;gBAC7C,oGAA2C,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,IAAI,EAAC,SAAS,GAAG,CACvE,CACR,CACR,CAAC;IACJ,CAAC;IAEO,kBAAkB;QACxB,OAAO,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,cAAc,GAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,yBAAyB,EAAE,CAAC;IAC7G,CAAC;IAEO,yBAAyB;QAC/B,OAAO;YACL,oBAAc,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC,KAAK;gBACpC,YAAM,KAAK,EAAC,WAAW;oBACrB,sBAAe;oBACf,oBAAa,CACR,CACM;YACf,cAAQ,EAAE,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,aAEvC;SACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { PodOS } from '@pod-os/core';\nimport { Component, Element, Event, EventEmitter, h, Host, Listen, State } from '@stencil/core';\n\nimport session from '../../store/session';\n\n@Component({\n  tag: 'pos-login',\n  shadow: true,\n  styleUrl: 'pos-login.css',\n})\nexport class PosLogin {\n  @Event({ eventName: 'pod-os:init' }) initializeOsEmitter: EventEmitter;\n\n  @State() os: PodOS;\n\n  @Element() host: HTMLElement;\n\n  @State()\n  private customLoggedInComponent: boolean = false;\n\n  componentWillLoad() {\n    this.customLoggedInComponent = !!this.host.querySelector('[slot=\"if-logged-in\"]');\n    this.initializeOsEmitter.emit(this.setOs);\n  }\n\n  setOs = async (os: PodOS) => {\n    this.os = os;\n  };\n\n  login(event: CustomEvent<string>) {\n    const idpUrl = event.detail;\n    this.os.login(idpUrl);\n  }\n\n  @Listen('pod-os:logout', { target: 'document' })\n  logout() {\n    this.os.logout();\n  }\n\n  private dialog: HTMLPosDialogElement;\n\n  @Listen('pod-os:login', { target: 'document' })\n  onLogin() {\n    this.openDialog();\n  }\n\n  openDialog() {\n    this.dialog.showModal();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"container\">\n          {!session.state.isLoggedIn ? (\n            <button id=\"login\" onClick={() => this.openDialog()}>\n              Login\n            </button>\n          ) : (\n            this.loggedInComponents()\n          )}\n        </div>\n        <pos-dialog ref={el => (this.dialog = el)}>\n          <span slot=\"title\">Sign in to your Pod</span>\n          <pos-login-form onPod-os:idp-url-selected={ev => this.login(ev)} slot=\"content\" />\n        </pos-dialog>\n      </Host>\n    );\n  }\n\n  private loggedInComponents() {\n    return this.customLoggedInComponent ? <slot name=\"if-logged-in\"></slot> : this.defaultLoggedInComponents();\n  }\n\n  private defaultLoggedInComponents() {\n    return [\n      <pos-resource uri={session.state.webId}>\n        <span class=\"user-data\">\n          <pos-picture />\n          <pos-label />\n        </span>\n      </pos-resource>,\n      <button id=\"logout\" onClick={() => this.logout()}>\n        Logout\n      </button>,\n    ];\n  }\n}\n"]}

package/dist/collection/components/pos-login-form/pos-login-form.js

@@ -8,7 +8,7 @@ export class PosLoginForm {
         this.canSubmit = Boolean(this.idpUrl);
     }
     render() {
-        return (h("form", { key: '193d3790329d1480fd6b14fd55a0d8cee8ce61dd', method: "dialog", onSubmit: () => this.handleSubmit() }, h("label", { key: 'd85ea6b508c9f229e1125f8cc97092335458b94a', htmlFor: "idpUrl" }, "Please enter your Identity Provider"), h("input", { key: 'a2f5e9955b27a8c1fab14c8f087fab167a19dc9a', id: "idpUrl", type: "url", value: this.idpUrl, required: true, onInput: e => this.handleChange(e), list: "suggestedIssuers", placeholder: "Type to search..." }), h("datalist", { key: 'fa0924b31e1a4fcdc794931dd2073022ab4ce95b', id: "suggestedIssuers" }, h("option", { key: 'c3495be7c2a98494ac3ca7fe504edd4b1b232394', value: "https://solidcommunity.net" }, "solidcommunity.net"), h("option", { key: '7fd17434388ed31468df8682dcfc2b4263c27ccb', value: "https://solidweb.org" }, "solidweb.org"), h("option", { key: '4c2a5854fc2499198b289181136cbd0a2fd9c1e1', value: "https://solidweb.me" }, "solidweb.me"), h("option", { key: '02a81104db23c62e0d42b8b45b95eccbd16fc108', value: "https://inrupt.net" }, "inrupt.net"), h("option", { key: 'd7c15dca86800cafc5a974920e40bd117fa50194', value: "https://login.inrupt.com" }, "Inrupt PodSpaces"), h("option", { key: '93ff71136f1775098fda80db5d437f37b51c496f', value: "https://trinpod.us" }, "trinpod.us"), h("option", { key: '481f1630526e324cb24b38c0077b1aeb496b4690', value: "https://use.id" }, "use.id"), h("option", { key: 'abd85ffba7532ba488bf0a4c18a2da2f3dc481ee', value: "https://solid.redpencil.io" }, "redpencil.io"), h("option", { key: '339562d277c4af2e10344f385d00aa4cc37375fa', value: "https://datapod.grant.io" }, "Data Pod (grant.io)"), h("option", { key: '918224ac5af806666a7b77bc8049dcf79800ab8c', value: "https://teamid.live" }, "teamid.live")), h("input", { key: '1ad3ef7998237d30c5eaf5bc9eebe55ede09d0a8', id: "login", type: "submit", value: "Login", disabled: !this.canSubmit })));
+        return (h("form", { key: '30eab981894b50a2681e10a68606c87e0d07a235', method: "dialog", onSubmit: () => this.handleSubmit() }, h("label", { key: '97ceb026754eba3f7b2d14b2dc47f842d601f8c0', htmlFor: "idpUrl" }, "Please enter your Identity Provider"), h("input", { key: '2c5c709ab36bbf017291e37991e3da93c150ad8a', id: "idpUrl", type: "url", value: this.idpUrl, required: true, onInput: e => this.handleChange(e), list: "suggestedIssuers", placeholder: "Type to search..." }), h("datalist", { key: '0baa3fada6f2dbb7c11cadaa52430628710fcc20', id: "suggestedIssuers" }, h("option", { key: 'b69926e6ad5e0c2d71a18ae95ef68e8ec1c1ffaa', value: "https://solidcommunity.net" }, "solidcommunity.net"), h("option", { key: '551d5bb9df7fe416e10a64f072020e1c4fdcb407', value: "https://solidweb.org" }, "solidweb.org"), h("option", { key: '5461e8bbe8c8e1a33d4cae2bb8c82e51bd78fde2', value: "https://solidweb.me" }, "solidweb.me"), h("option", { key: '8a46f5b818ca408db889abd68f6087a56db3788d', value: "https://inrupt.net" }, "inrupt.net"), h("option", { key: '533935f58b3230a223bd0f8e38a4800d6e357017', value: "https://login.inrupt.com" }, "Inrupt PodSpaces"), h("option", { key: '2e47e0832aaa3786283d4ca667efe4af246e8b0c', value: "https://trinpod.us" }, "trinpod.us"), h("option", { key: '259af90ed0e39da4ea3148643dde06125ee8e349', value: "https://use.id" }, "use.id"), h("option", { key: '2259f1ca0e0fa91ffbaa8aeddc7336bb94eed05b', value: "https://solid.redpencil.io" }, "redpencil.io"), h("option", { key: '29244565c8f61e38d7bc15039a6ec990ca8765c0', value: "https://datapod.grant.io" }, "Data Pod (grant.io)"), h("option", { key: '6be3b3c1171669fe3a9405d68623208dafc41439', value: "https://teamid.live" }, "teamid.live")), h("input", { key: '4b967c6bb05a87a007eebf4ef3495d6b342da784', id: "login", type: "submit", value: "Login", disabled: !this.canSubmit })));
     }
     handleChange(event) {
         this.validate();

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

@@ -8,11 +8,11 @@ button.main {
   max-width: var(--size-40);
   flex-direction: row;
   overflow: hidden;
-  height: var(--size-8);
-  width: var(--size-8);
+  height: var(--pos-navigation-bar-height);
+  width: var(--pos-navigation-bar-height);
   align-items: center;
   justify-content: center;
-  border-radius: var(--radius-xs);
+  border-radius: var(--radius-md);
   color: var(--pos-subtle-text-color);
   border: var(--size-px) dashed var(--pos-subtle-text-color);
   background-color: var(--pos-background-color);
@@ -35,50 +35,8 @@ button.main {
     transform: scale(0.99);
     filter: brightness(90%);
   }
-}
-
-.options {
-  position: absolute;
-  animation: fadeIn 300ms;
-  padding: 0;
-  margin-top: var(--size-1);
-  z-index: var(--layer-top);
-
-  ol {
-    display: flex;
-    flex-direction: column;
-    box-shadow: var(--shadow-md);
-    backdrop-filter: var(--blur-md);
-    border-radius: var(--radius-xs);
-    overflow: hidden;
-    color: var(--color-grey-900);
-    background-color: var(--color-grey-200);
-    padding: 0;
-    margin: 0;
-    list-style: none;
-    label {
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      transition: all 300ms var(--ease-in-out-sine);
-      margin: 0;
-      border: none;
-      outline: none;
-      padding: var(--size-2);
-      width: var(--size-full);
-
-      &:hover,
-      &:focus {
-        filter: brightness(80%);
-      }
-
-      &:active {
-        filter: brightness(90%);
-      }
-    }
-  }
-  label:has(input:checked) {
-    background-color: var(--color-green-100);
+  &:focus {
+    outline: var(--pos-input-focus-outline);
   }
 }
 
@@ -91,12 +49,13 @@ svg {
 }
 
 button.main:hover,
-button.open {
+sl-dropdown[open] button {
   &.success {
     background: var(--color-green-200);
+    color: var(--color-green-700);
   }
   width: var(--size-full);
-  height: var(--size-8);
+  height: var(--pos-navigation-bar-height);
   background: var(--pos-background-color);
   color: var(--pos-normal-text-color);
 
@@ -104,12 +63,3 @@ button.open {
     display: inline-block;
   }
 }
-
-@keyframes fadeIn {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}

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

@@ -2,6 +2,7 @@ import { h, Host } from "@stencil/core";
 import { LabelIndex } from "@pod-os/core";
 import { subscribePodOs } from "../events/PodOsAware";
 import session from "../../store/session";
+import "./shoelace";
 export class PosMakeFindable {
     constructor() {
         this.indexes = [];
@@ -22,17 +23,6 @@ export class PosMakeFindable {
     disconnectedCallback() {
         this.unsubscribeSessionChange && this.unsubscribeSessionChange();
     }
-    hideOptions(event) {
-        // @ts-ignore
-        if (!this.el.contains(event.target)) {
-            this.showOptions = false;
-        }
-    }
-    handleKeyDown(ev) {
-        if (ev.key === 'Escape') {
-            this.showOptions = false;
-        }
-    }
     updateUri(uri) {
         this.thing = this.os.store.get(uri);
         this.isIndexed = this.checkIfIndexed(uri);
@@ -43,6 +33,7 @@ export class PosMakeFindable {
     getLabelIndexes(profile) {
         if (profile) {
             this.indexes = profile.getPrivateLabelIndexes().map(it => this.os.store.get(it).assume(LabelIndex));
+            this.showOptions = this.indexes.length > 1;
             this.isIndexed = this.checkIfIndexed(this.uri);
         }
     }
@@ -53,10 +44,7 @@ export class PosMakeFindable {
             await this.addToLabelIndex(index);
             this.indexUpdatedEmitter.emit(index);
         }
-        else if (this.indexes.length > 1) {
-            this.showOptions = !this.showOptions;
-        }
-        else {
+        else if (this.indexes.length === 0) {
             const index = await this.createDefaultLabelIndex();
             await this.addToLabelIndex(index);
             this.indexCreatedEmitter.emit(index);
@@ -70,7 +58,6 @@ export class PosMakeFindable {
         catch (e) {
             this.errorEmitter.emit(e);
         }
-        this.showOptions = false;
     }
     async createDefaultLabelIndex() {
         try {
@@ -85,14 +72,22 @@ export class PosMakeFindable {
             return null;
         }
         const label = 'Make this findable';
-        return (h(Host, null, h("button", { type: "button", "aria-label": label, class: { main: true, open: this.showOptions, success: this.isIndexed }, onClick: e => this.onClick(e), title: "" }, this.isIndexed ? h(IconSuccess, null) : h(IconMakeFindable, null), h("p", null, label)), this.showOptions && (h("div", { class: "options" }, h("ol", { role: "listbox" }, this.indexes.map((index) => (h("li", { role: "option" }, h("label", null, h("input", { type: "checkbox", checked: index.contains(this.uri), onChange: e => this.chooseOption(e, index) }), h("pos-resource", { uri: index.uri, lazy: true }, h("pos-label", null)))))))))));
+        const button = (h("button", { type: "button", slot: "trigger", "aria-label": label, class: { main: true, success: this.isIndexed }, onClick: e => this.onClick(e), title: "" }, this.isIndexed ? h(IconSuccess, null) : h(IconMakeFindable, null), h("p", null, label)));
+        if (this.showOptions) {
+            return (h(Host, null, h("sl-dropdown", null, button, h("sl-menu", { role: "listbox" }, this.indexes.map((index) => (h("sl-menu-item", { role: "option", value: index, type: "checkbox", checked: index.contains(this.uri) }, h("pos-resource", { uri: index.uri, lazy: true }, h("pos-label", null)))))))));
+        }
+        else {
+            return button;
+        }
     }
-    async chooseOption(e, index) {
+    async onSelect(e) {
+        const index = e.detail.item.value;
         e.preventDefault();
         await this.addToLabelIndex(index);
         this.indexUpdatedEmitter.emit(index);
     }
     static get is() { return "pos-make-findable"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["pos-make-findable.css"]
@@ -208,14 +203,8 @@ export class PosMakeFindable {
     }
     static get listeners() {
         return [{
-                "name": "click",
-                "method": "hideOptions",
-                "target": "document",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "keydown",
-                "method": "handleKeyDown",
+                "name": "sl-select",
+                "method": "onSelect",
                 "target": undefined,
                 "capture": false,
                 "passive": false

package/dist/collection/components/pos-make-findable/pos-make-findable.js.map

@@ -1 +1 @@
-{"version":3,"file":"pos-make-findable.js","sourceRoot":"","sources":["../../../../src/components/pos-make-findable/pos-make-findable.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\nimport { LabelIndex, PodOS, Thing, WebIdProfile } from '@pod-os/core';\nimport { PodOsAware, PodOsEventEmitter, subscribePodOs } from '../events/PodOsAware';\nimport session from '../../store/session';\n\n@Component({\n  tag: 'pos-make-findable',\n  styleUrl: 'pos-make-findable.css',\n})\nexport class PosMakeFindable implements PodOsAware {\n  @Prop() uri!: string;\n\n  @State() os: PodOS;\n  @State() thing: Thing;\n  @State() indexes: LabelIndex[] = [];\n\n  @Event({ eventName: 'pod-os:init' }) subscribePodOs: PodOsEventEmitter;\n\n  @State() unsubscribeSessionChange: undefined | (() => void);\n\n  @State() showOptions = false;\n  @State() isIndexed = false;\n\n  @Event({ eventName: 'pod-os:error' }) errorEmitter: EventEmitter;\n  @Event({ eventName: 'pod-os:search:index-updated' }) indexUpdatedEmitter: EventEmitter;\n  @Event({ eventName: 'pod-os:search:index-created' }) indexCreatedEmitter: EventEmitter;\n\n  @Element() el: HTMLElement;\n\n  componentWillLoad() {\n    subscribePodOs(this);\n  }\n\n  disconnectedCallback() {\n    this.unsubscribeSessionChange && this.unsubscribeSessionChange();\n  }\n\n  @Listen('click', { target: 'document' })\n  hideOptions(event: MouseEvent) {\n    // @ts-ignore\n    if (!this.el.contains(event.target)) {\n      this.showOptions = false;\n    }\n  }\n\n  @Listen('keydown')\n  handleKeyDown(ev: KeyboardEvent) {\n    if (ev.key === 'Escape') {\n      this.showOptions = false;\n    }\n  }\n\n  @Watch('uri')\n  updateUri(uri: string) {\n    this.thing = this.os.store.get(uri);\n    this.isIndexed = this.checkIfIndexed(uri);\n  }\n\n  private checkIfIndexed(uri: string) {\n    return this.indexes.some(it => it.contains(uri));\n  }\n\n  receivePodOs = async (os: PodOS) => {\n    this.os = os;\n    this.thing = this.os.store.get(this.uri);\n    this.getLabelIndexes(session.state.profile);\n    this.unsubscribeSessionChange = session.onChange('profile', profile => {\n      this.getLabelIndexes(profile);\n    });\n  };\n\n  private getLabelIndexes(profile: WebIdProfile) {\n    if (profile) {\n      this.indexes = profile.getPrivateLabelIndexes().map(it => this.os.store.get(it).assume(LabelIndex));\n      this.isIndexed = this.checkIfIndexed(this.uri);\n    }\n  }\n\n  private async onClick(e: MouseEvent) {\n    e.preventDefault();\n    if (this.indexes.length === 1) {\n      const index = this.indexes[0];\n      await this.addToLabelIndex(index);\n      this.indexUpdatedEmitter.emit(index);\n    } else if (this.indexes.length > 1) {\n      this.showOptions = !this.showOptions;\n    } else {\n      const index = await this.createDefaultLabelIndex();\n      await this.addToLabelIndex(index);\n      this.indexCreatedEmitter.emit(index);\n    }\n  }\n\n  private async addToLabelIndex(index: LabelIndex) {\n    try {\n      await this.os.addToLabelIndex(this.thing, index);\n      this.isIndexed = true;\n    } catch (e) {\n      this.errorEmitter.emit(e);\n    }\n\n    this.showOptions = false;\n  }\n\n  private async createDefaultLabelIndex(): Promise<LabelIndex> {\n    try {\n      return await this.os.createDefaultLabelIndex(session.state.profile);\n    } catch (e) {\n      this.errorEmitter.emit(e);\n    }\n  }\n\n  render() {\n    if (!session.state.isLoggedIn || !this.uri) {\n      return null;\n    }\n\n    const label = 'Make this findable';\n    return (\n      <Host>\n        <button\n          type=\"button\"\n          aria-label={label}\n          class={{ main: true, open: this.showOptions, success: this.isIndexed }}\n          onClick={e => this.onClick(e)}\n          title=\"\"\n        >\n          {this.isIndexed ? <IconSuccess /> : <IconMakeFindable />}\n          <p>{label}</p>\n        </button>\n        {this.showOptions && (\n          <div class=\"options\">\n            <ol role=\"listbox\">\n              {this.indexes.map((index: LabelIndex) => (\n                <li role=\"option\">\n                  <label>\n                    <input\n                      type=\"checkbox\"\n                      checked={index.contains(this.uri)}\n                      onChange={e => this.chooseOption(e, index)}\n                    />\n                    <pos-resource uri={index.uri} lazy={true}>\n                      <pos-label></pos-label>\n                    </pos-resource>\n                  </label>\n                </li>\n              ))}\n            </ol>\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  private async chooseOption(e: Event, index: LabelIndex) {\n    e.preventDefault();\n    await this.addToLabelIndex(index);\n    this.indexUpdatedEmitter.emit(index);\n  }\n}\n\nconst IconMakeFindable = () => (\n  <svg\n    role=\"presentation\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke-width=\"1.5\"\n    stroke=\"currentColor\"\n  >\n    <path\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      d=\"M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v16.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Zm3.75 11.625a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z\"\n    />\n  </svg>\n);\n\nconst IconSuccess = () => (\n  <svg\n    role=\"presentation\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke-width=\"1.5\"\n    stroke=\"currentColor\"\n  >\n    <path\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      d=\"M10.125 2.25h-4.5c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125v-9M10.125 2.25h.375a9 9 0 0 1 9 9v.375M10.125 2.25A3.375 3.375 0 0 1 13.5 5.625v1.5c0 .621.504 1.125 1.125 1.125h1.5a3.375 3.375 0 0 1 3.375 3.375M9 15l2.25 2.25L15 12\"\n    />\n  </svg>\n);\n"]}
+{"version":3,"file":"pos-make-findable.js","sourceRoot":"","sources":["../../../../src/components/pos-make-findable/pos-make-findable.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\nimport { LabelIndex, PodOS, Thing, WebIdProfile } from '@pod-os/core';\nimport { PodOsAware, PodOsEventEmitter, subscribePodOs } from '../events/PodOsAware';\nimport session from '../../store/session';\n\nimport './shoelace';\n\n@Component({\n  tag: 'pos-make-findable',\n  styleUrl: 'pos-make-findable.css',\n  shadow: true,\n})\nexport class PosMakeFindable implements PodOsAware {\n  @Prop() uri!: string;\n\n  @State() os: PodOS;\n  @State() thing: Thing;\n  @State() indexes: LabelIndex[] = [];\n\n  @Event({ eventName: 'pod-os:init' }) subscribePodOs: PodOsEventEmitter;\n\n  @State() unsubscribeSessionChange: undefined | (() => void);\n\n  @State() showOptions = false;\n  @State() isIndexed = false;\n\n  @Event({ eventName: 'pod-os:error' }) errorEmitter: EventEmitter;\n  @Event({ eventName: 'pod-os:search:index-updated' }) indexUpdatedEmitter: EventEmitter;\n  @Event({ eventName: 'pod-os:search:index-created' }) indexCreatedEmitter: EventEmitter;\n\n  @Element() el: HTMLElement;\n\n  componentWillLoad() {\n    subscribePodOs(this);\n  }\n\n  disconnectedCallback() {\n    this.unsubscribeSessionChange && this.unsubscribeSessionChange();\n  }\n\n  @Watch('uri')\n  updateUri(uri: string) {\n    this.thing = this.os.store.get(uri);\n    this.isIndexed = this.checkIfIndexed(uri);\n  }\n\n  private checkIfIndexed(uri: string) {\n    return this.indexes.some(it => it.contains(uri));\n  }\n\n  receivePodOs = async (os: PodOS) => {\n    this.os = os;\n    this.thing = this.os.store.get(this.uri);\n    this.getLabelIndexes(session.state.profile);\n    this.unsubscribeSessionChange = session.onChange('profile', profile => {\n      this.getLabelIndexes(profile);\n    });\n  };\n\n  private getLabelIndexes(profile: WebIdProfile) {\n    if (profile) {\n      this.indexes = profile.getPrivateLabelIndexes().map(it => this.os.store.get(it).assume(LabelIndex));\n      this.showOptions = this.indexes.length > 1;\n      this.isIndexed = this.checkIfIndexed(this.uri);\n    }\n  }\n\n  private async onClick(e: MouseEvent) {\n    e.preventDefault();\n    if (this.indexes.length === 1) {\n      const index = this.indexes[0];\n      await this.addToLabelIndex(index);\n      this.indexUpdatedEmitter.emit(index);\n    } else if (this.indexes.length === 0) {\n      const index = await this.createDefaultLabelIndex();\n      await this.addToLabelIndex(index);\n      this.indexCreatedEmitter.emit(index);\n    }\n  }\n\n  private async addToLabelIndex(index: LabelIndex) {\n    try {\n      await this.os.addToLabelIndex(this.thing, index);\n      this.isIndexed = true;\n    } catch (e) {\n      this.errorEmitter.emit(e);\n    }\n  }\n\n  private async createDefaultLabelIndex(): Promise<LabelIndex> {\n    try {\n      return await this.os.createDefaultLabelIndex(session.state.profile);\n    } catch (e) {\n      this.errorEmitter.emit(e);\n    }\n  }\n\n  render() {\n    if (!session.state.isLoggedIn || !this.uri) {\n      return null;\n    }\n\n    const label = 'Make this findable';\n    const button = (\n      <button\n        type=\"button\"\n        slot=\"trigger\"\n        aria-label={label}\n        class={{ main: true, success: this.isIndexed }}\n        onClick={e => this.onClick(e)}\n        title=\"\"\n      >\n        {this.isIndexed ? <IconSuccess /> : <IconMakeFindable />}\n        <p>{label}</p>\n      </button>\n    );\n    if (this.showOptions) {\n      return (\n        <Host>\n          <sl-dropdown>\n            {button}\n            <sl-menu role=\"listbox\">\n              {this.indexes.map((index: LabelIndex) => (\n                <sl-menu-item role=\"option\" value={index} type=\"checkbox\" checked={index.contains(this.uri)}>\n                  <pos-resource uri={index.uri} lazy={true}>\n                    <pos-label></pos-label>\n                  </pos-resource>\n                </sl-menu-item>\n              ))}\n            </sl-menu>\n          </sl-dropdown>\n        </Host>\n      );\n    } else {\n      return button;\n    }\n  }\n\n  @Listen('sl-select')\n  async onSelect(e: CustomEvent<{ item: { value: LabelIndex } }>) {\n    const index = e.detail.item.value;\n    e.preventDefault();\n    await this.addToLabelIndex(index);\n    this.indexUpdatedEmitter.emit(index);\n  }\n}\n\nconst IconMakeFindable = () => (\n  <svg\n    role=\"presentation\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke-width=\"1.5\"\n    stroke=\"currentColor\"\n  >\n    <path\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      d=\"M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v16.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Zm3.75 11.625a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z\"\n    />\n  </svg>\n);\n\nconst IconSuccess = () => (\n  <svg\n    role=\"presentation\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke-width=\"1.5\"\n    stroke=\"currentColor\"\n  >\n    <path\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      d=\"M10.125 2.25h-4.5c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125v-9M10.125 2.25h.375a9 9 0 0 1 9 9v.375M10.125 2.25A3.375 3.375 0 0 1 13.5 5.625v1.5c0 .621.504 1.125 1.125 1.125h1.5a3.375 3.375 0 0 1 3.375 3.375M9 15l2.25 2.25L15 12\"\n    />\n  </svg>\n);\n"]}

package/dist/collection/components/pos-make-findable/shoelace.js

@@ -0,0 +1,4 @@
+import "@shoelace-style/shoelace/dist/components/dropdown/dropdown.js";
+import "@shoelace-style/shoelace/dist/components/menu/menu.js";
+import "@shoelace-style/shoelace/dist/components/menu-item/menu-item.js";
+//# sourceMappingURL=shoelace.js.map

package/dist/collection/components/pos-make-findable/shoelace.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shoelace.js","sourceRoot":"","sources":["../../../../src/components/pos-make-findable/shoelace.ts"],"names":[],"mappings":"AAAA,OAAO,+DAA+D,CAAC;AACvE,OAAO,uDAAuD,CAAC;AAC/D,OAAO,iEAAiE,CAAC","sourcesContent":["import '@shoelace-style/shoelace/dist/components/dropdown/dropdown.js';\nimport '@shoelace-style/shoelace/dist/components/menu/menu.js';\nimport '@shoelace-style/shoelace/dist/components/menu-item/menu-item.js';\n"]}

package/dist/collection/components/pos-navigation/__test/typeToSearch.js

@@ -0,0 +1,12 @@
+import { fireEvent } from "@testing-library/dom";
+export async function typeToSearch(page, text) {
+    jest.useFakeTimers();
+    const searchBar = page.root.querySelector('input');
+    searchBar.value = text;
+    // @ts-ignore
+    fireEvent(searchBar, new CustomEvent('change', { target: { value: text } }));
+    jest.advanceTimersByTime(300); // advance debounce time
+    jest.useRealTimers();
+    await page.waitForChanges();
+}
+//# sourceMappingURL=typeToSearch.js.map

package/dist/collection/components/pos-navigation/__test/typeToSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typeToSearch.js","sourceRoot":"","sources":["../../../../../src/components/pos-navigation/__test/typeToSearch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,MAAM,CAAC,KAAK,UAAU,YAAY,CAAC,IAAI,EAAE,IAAY;IACnD,IAAI,CAAC,aAAa,EAAE,CAAC;IACrB,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACnD,SAAS,CAAC,KAAK,GAAG,IAAI,CAAC;IACvB,aAAa;IACb,SAAS,CAAC,SAAS,EAAE,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC;IAC7E,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC,CAAC,wBAAwB;IACvD,IAAI,CAAC,aAAa,EAAE,CAAC;IACrB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;AAC9B,CAAC","sourcesContent":["import { fireEvent } from '@testing-library/dom';\n\nexport async function typeToSearch(page, text: string) {\n  jest.useFakeTimers();\n  const searchBar = page.root.querySelector('input');\n  searchBar.value = text;\n  // @ts-ignore\n  fireEvent(searchBar, new CustomEvent('change', { target: { value: text } }));\n  jest.advanceTimersByTime(300); // advance debounce time\n  jest.useRealTimers();\n  await page.waitForChanges();\n}\n"]}

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

@@ -0,0 +1,38 @@
+section.current {
+  display: flex;
+  height: var(--pos-navigation-bar-height);
+  flex-grow: 1;
+  gap: 0;
+  background-color: var(--pos-input-background-color);
+  border-radius: var(--radius-md);
+  width: 100%;
+  &:focus-within {
+    outline: var(--pos-input-focus-outline);
+  }
+}
+
+section.current button {
+  cursor: pointer;
+  font-size: var(--scale-1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 1;
+  background: none;
+  color: var(--pos-normal-text-color);
+  outline: none;
+  border: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  &:focus {
+    text-decoration: underline;
+  }
+  :first-child {
+    flex-grow: 1;
+  }
+  svg {
+    width: var(--size-6);
+    color: var(--pos-subtle-text-color);
+  }
+}

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

@@ -0,0 +1,105 @@
+import { h } from "@stencil/core";
+export class PosNavigationBar {
+    onClick() {
+        this.navigate.emit(this.current);
+    }
+    activate(e) {
+        if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+            e.preventDefault();
+            this.navigate.emit(this.current);
+        }
+    }
+    render() {
+        const ariaLabel = this.current ? `${this.current.label()} (Click to search or enter URI)` : 'Search or enter URI';
+        return (h("section", { key: '4b942ac9ddb8c7ec9325197dc0906c8e236586d9', class: "current" }, this.current && this.searchIndexReady && h("pos-make-findable", { key: '4202379b075353cf6c0214fbc5a00b892ad948e1', uri: this.current.uri }), h("button", { key: 'e59f5644299d8eee98d3fd179a1796aa837bb0cc', "aria-label": ariaLabel, onClick: () => this.onClick() }, h("div", { key: '4a4df2d898be9c916b3fa31b00bd9bf2b3beabd1' }, this.current ? this.current.label() : 'Search or enter URI'), this.icon())));
+    }
+    icon() {
+        return (h("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" })));
+    }
+    static get is() { return "pos-navigation-bar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pos-navigation-bar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pos-navigation-bar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "current": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Thing",
+                    "resolved": "Thing",
+                    "references": {
+                        "Thing": {
+                            "location": "import",
+                            "path": "@pod-os/core",
+                            "id": "../core/types/index.d.ts::Thing"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "searchIndexReady": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "search-index-ready",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "navigate",
+                "name": "pod-os:navigate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "activate",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=pos-navigation-bar.js.map