@pod-os/elements 0.26.1-rc.39433d3.0 → 0.26.1-rc.5fcb63b.0

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

@@ -40,51 +40,6 @@ button.main {
   }
 }
 
-.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);
-  }
-}
-
 svg {
   display: inline-block;
   height: var(--size-6);
@@ -94,9 +49,10 @@ 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(--pos-navigation-bar-height);
@@ -107,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/bar/pos-navigation-bar.js

@@ -11,7 +11,7 @@ export class PosNavigationBar {
     }
     render() {
         const ariaLabel = this.current ? `${this.current.label()} (Click to search or enter URI)` : 'Search or enter URI';
-        return (h("section", { key: '1b507d50bd24f257023fe980f1ffdb3abe903577', class: "current" }, this.current && this.searchIndexReady && h("pos-make-findable", { key: 'e96559f40418154a26350705ae6e3dbf8057a424', uri: this.current.uri }), h("button", { key: '2ac476bd89918e71ca10cc945952f8c9905865df', "aria-label": ariaLabel, onClick: () => this.onClick() }, h("div", { key: 'd34b73e2090f08cab8533d03a7b206d420bfa8c2' }, this.current ? this.current.label() : 'Search or enter URI'), this.icon())));
+        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" })));

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

@@ -113,7 +113,7 @@ export class PosNavigation {
         }
     }
     render() {
-        return (h("nav", { key: '5c6c07b6b2f9ccb0e45bd59b5e477d8ed3d52c2d' }, h("search", { key: '19997ad34212d679547ad5e1bb2f5ea53e576361' }, h("pos-navigation-bar", { key: '2d1c073b2c53ba8cd5afbb595cc95015e5a50e5b', searchIndexReady: this.searchIndex !== undefined, current: this.resource }), h("dialog", { key: '55de5a58604feaf54426b643b434560dbc55a9a1', ref: el => (this.dialogRef = el) }, h("form", { key: '50c064938ec275b53bde81d9bb6c86e0c708a625', method: "dialog", onSubmit: () => this.onSubmit() }, h("input", { key: 'ca06fd69e8346cb8bb0868560f39987b4545c8f5', ref: el => (this.inputRef = el), enterkeyhint: "search", "aria-label": "Search or enter URI", placeholder: "Search or enter URI", value: this.uri, onChange: e => this.onChange(e), onInput: e => this.onChange(e), role: "combobox", "aria-autocomplete": "list", "aria-expanded": this.suggestions.length > 0, "aria-controls": "suggestions-list", "aria-activedescendant": this.selectedIndex >= 0 ? `option-${this.selectedIndex}` : null }), this.suggestions.length > 0 ? (h("div", { class: "suggestions" }, h("ol", { id: "suggestions-list", role: "listbox", "aria-label": "Search results" }, this.suggestions.map((it, index) => (h("li", { id: `option-${index}`, role: "option", "aria-selected": index === this.selectedIndex ? 'true' : 'false' }, h("pos-rich-link", { uri: it.ref }))))))) : null)))));
+        return (h("nav", { key: 'c6f9915d7778a332aa0e2f3b19b733da63b55d3a' }, h("search", { key: '2911efe53775a82d6c87ba823adfd2f37d196994' }, h("pos-navigation-bar", { key: 'ce9d62d0fdc81df2f6c7f7750b5c4fc98e2b0240', searchIndexReady: this.searchIndex !== undefined, current: this.resource }), h("dialog", { key: 'cab1f4261e43e8318582d6b37096301a7ef987cc', ref: el => (this.dialogRef = el) }, h("form", { key: '3caed872d467ef70c3b097da4f337f492bafdc9f', method: "dialog", onSubmit: () => this.onSubmit() }, h("input", { key: '72ba8d15816608dab944f7d8541713bbf177c1c2', ref: el => (this.inputRef = el), enterkeyhint: "search", "aria-label": "Search or enter URI", placeholder: "Search or enter URI", value: this.uri, onChange: e => this.onChange(e), onInput: e => this.onChange(e), role: "combobox", "aria-autocomplete": "list", "aria-expanded": this.suggestions.length > 0, "aria-controls": "suggestions-list", "aria-activedescendant": this.selectedIndex >= 0 ? `option-${this.selectedIndex}` : null }), this.suggestions.length > 0 ? (h("div", { class: "suggestions" }, h("ol", { id: "suggestions-list", role: "listbox", "aria-label": "Search results" }, this.suggestions.map((it, index) => (h("li", { id: `option-${index}`, role: "option", "aria-selected": index === this.selectedIndex ? 'true' : 'false' }, h("pos-rich-link", { uri: it.ref }))))))) : null)))));
     }
     static get is() { return "pos-navigation"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pos-new-thing-form/pos-new-thing-form.js

@@ -14,7 +14,7 @@ export class PosNewThingForm {
         subscribePodOs(this);
     }
     render() {
-        return (h("form", { key: '6d8a76b95abc98ab382b425b2dd8894983bb9522', method: "dialog", onSubmit: e => this.handleSubmit(e) }, h("label", { key: '6fe391ac186c0b0a8e6bb3265e66469dac3ab187', htmlFor: "type" }, "Type"), h("pos-select-term", { key: '33b50596c8cd22d8ce2b1af114277fa9bfd80355', id: "type", placeholder: "", value: this.selectedTypeUri, "onPod-os:term-selected": e => this.onTermSelected(e) }), h("label", { key: '8681f29f0c20d59c2be10a1f49cc38dea6abd19d', htmlFor: "name" }, "Name"), h("input", { key: 'f5905d871b55821f7019134d972e1f156c55f49e', id: "name", type: "text", value: this.name, onInput: e => this.handleChange(e) }), this.newUri ? (h("div", { id: "new-uri", title: "This will be the URI of the new thing" }, this.newUri)) : null, h("input", { key: 'dade4834abecd9bf2fc8eb5bca0b1f60784287a4', id: "create", type: "submit", value: "Create", disabled: !this.canSubmit })));
+        return (h("form", { key: '947421a1e826b4cc59a5d92cf83d25726257c871', method: "dialog", onSubmit: e => this.handleSubmit(e) }, h("label", { key: 'fd239a8b7c9d7b6f833acc794c4ce44d884d240f', htmlFor: "type" }, "Type"), h("pos-select-term", { key: '04b2e4bfdb8590bcb4bc4c822780bffd126488fa', id: "type", placeholder: "", value: this.selectedTypeUri, "onPod-os:term-selected": e => this.onTermSelected(e) }), h("label", { key: 'fa363e0adf2d73c0f22ce90588504ec3b8b6cb6f', htmlFor: "name" }, "Name"), h("input", { key: 'b3c9ff73ea9b1e1e1c059287f3876935fc845699', id: "name", type: "text", value: this.name, onInput: e => this.handleChange(e) }), this.newUri ? (h("div", { id: "new-uri", title: "This will be the URI of the new thing" }, this.newUri)) : null, h("input", { key: 'a804450dd5c59ee847f736861e0eeb6616476081', id: "create", type: "submit", value: "Create", disabled: !this.canSubmit })));
     }
     handleChange(event) {
         this.name = event.target.value;

package/dist/collection/components/pos-rich-link/pos-rich-link.js

@@ -1,10 +1,10 @@
 import { h } from "@stencil/core";
 export class PosRichLink {
     render() {
-        return (h("pos-resource", { key: '389fb8817f5a7ff77965a8bb9924f48af15c528c', lazy: true, uri: this.uri }, h("p", { key: '1946deeff38a510800ef1558fd6374f65d72cd7f', class: "content" }, h("a", { key: '776c99ca32c7cd7fac30ab1f18b1c024b234d85f', href: this.uri, onClick: e => {
+        return (h("pos-resource", { key: 'f41ba8c5430e96e47d176b4e85633bad4ee9b0a7', lazy: true, uri: this.uri }, h("p", { key: '0a92fa1df51d78c0e8d1f6d47af078cb0cbe264a', class: "content" }, h("a", { key: '27c623707a5cbc6618d5a70e0eacc2fd5552d7dd', href: this.uri, onClick: e => {
                 e.preventDefault();
                 this.linkEmitter.emit(this.uri);
-            } }, h("pos-label", { key: '0ddb22c414f2e4d61cf1beabb301b723b78235e1' })), h("span", { key: 'd2730c1fcc1c1521a7527bdb7a63c091ff49746c', class: "url" }, new URL(this.uri).host), h("pos-description", { key: '53867e57b7403aed46e94a5f3df0b8389bc68244' }))));
+            } }, h("pos-label", { key: 'e8cb96334502e2f2fad85c35096baa3a6cc890cb' })), h("span", { key: '0f0feeee5e65f982d54cd474c42ed14759d2e834', class: "url" }, new URL(this.uri).host), h("pos-description", { key: '87a7cdf2c0e1f523ecdbed2e786d948f267ad303' }))));
     }
     static get is() { return "pos-rich-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,7 +38,7 @@ export class PosRouter {
         this.routeChanged.emit(this.uri);
     }
     render() {
-        return h("slot", { key: 'a5a451a8ddf4a30c6e5cbb2faf61d44f5a286df9' });
+        return h("slot", { key: 'e3d70ed25e70d8273a2c820bb92fec69b7f70f25' });
     }
     static get is() { return "pos-router"; }
     static get originalStyleUrls() {

package/dist/collection/components/pos-select-term/pos-select-term.js

@@ -19,7 +19,7 @@ export class PosSelectTerm {
         this.termSelected.emit({ uri: event.target.value });
     }
     render() {
-        return (h(Host, { key: '7f7d48443893800bb818e67865fccdbe1d10d44a' }, h("input", { key: 'ee24690418d5a4d6e357154e12685fa9975754f9', part: "input", list: "terms", placeholder: this.placeholder, value: this.value, onChange: ev => this.handleChange(ev) }), h("datalist", { key: '78fde7ccb4e0750e902da139b02810c15c21db3e', part: "terms", id: "terms" }, this.terms.map(term => (h("option", { value: term.uri }, term.shorthand))))));
+        return (h(Host, { key: 'c9529ceaf82d8aa1a3f73532e8ca0f99aa3fc4e6' }, h("input", { key: '2de0e74b99ae5dd7aa6d7bdea4289b9e25b7629e', part: "input", list: "terms", placeholder: this.placeholder, value: this.value, onChange: ev => this.handleChange(ev) }), h("datalist", { key: '92e240a12c0d733c15b8daf971e3026a1d535561', part: "terms", id: "terms" }, this.terms.map(term => (h("option", { value: term.uri }, term.shorthand))))));
     }
     static get is() { return "pos-select-term"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pos-user-menu/pos-user-menu.css

@@ -0,0 +1,23 @@
+button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  border-radius: 50%;
+  pos-picture {
+    --width: 40px;
+    --height: 40px;
+    --border-radius: 50%;
+  }
+  sl-avatar {
+    --size: 40px;
+  }
+}
+
+sl-dropdown {
+  display: block;
+}

package/dist/collection/components/pos-user-menu/pos-user-menu.js

@@ -0,0 +1,102 @@
+import { h } from "@stencil/core";
+import "./shoelace";
+export class PosUserMenu {
+    onSelect(e) {
+        const { value } = e.detail.item;
+        if (value === 'logout') {
+            this.logout.emit();
+        }
+        else if (value === 'profile') {
+            this.link.emit(this.webId);
+        }
+        else if (value === 'dashboard') {
+            this.link.emit('pod-os:dashboard');
+        }
+        else if (value === 'settings') {
+            this.link.emit('pod-os:settings');
+        }
+    }
+    render() {
+        if (!this.webId)
+            return null; //?
+        return (h("pos-resource", { uri: this.webId }, h("sl-dropdown", null, h("button", { slot: "trigger", "aria-label": "User menu" }, h("pos-picture", null, h("sl-avatar", null))), h("sl-menu", null, h("sl-menu-item", { value: "dashboard" }, "Dashboard"), h("sl-menu-item", { value: "profile" }, h("pos-label", null)), h("sl-menu-item", { value: "settings" }, "Settings"), h("sl-divider", null), h("sl-menu-item", { value: "logout" }, "Logout")))));
+    }
+    static get is() { return "pos-user-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pos-user-menu.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pos-user-menu.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "webId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "web-id",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "logout",
+                "name": "pod-os:logout",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "link",
+                "name": "pod-os:link",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "sl-select",
+                "method": "onSelect",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=pos-user-menu.js.map

package/dist/collection/components/pos-user-menu/pos-user-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pos-user-menu.js","sourceRoot":"","sources":["../../../../src/components/pos-user-menu/pos-user-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEhF,OAAO,YAAY,CAAC;AAOpB,MAAM,OAAO,WAAW;IAWtB,QAAQ,CAAC,CAAuE;QAC9E,MAAM,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC;QAChC,IAAI,KAAK,KAAK,QAAQ,EAAE,CAAC;YACvB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;QACrB,CAAC;aAAM,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YAC/B,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC7B,CAAC;aAAM,IAAI,KAAK,KAAK,WAAW,EAAE,CAAC;YACjC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;QACrC,CAAC;aAAM,IAAI,KAAK,KAAK,UAAU,EAAE,CAAC;YAChC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACpC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAC,CAAC,GAAG;QACjC,OAAO,CACL,oBAAc,GAAG,EAAE,IAAI,CAAC,KAAK;YAC3B;gBACE,cAAQ,IAAI,EAAC,SAAS,gBAAY,WAAW;oBAC3C;wBACE,oBAAuB,CACX,CACP;gBACT;oBACE,oBAAc,KAAK,EAAC,WAAW,gBAAyB;oBACxD,oBAAc,KAAK,EAAC,SAAS;wBAC3B,oBAAuB,CACV;oBACf,oBAAc,KAAK,EAAC,UAAU,eAAwB;oBACtD,qBAAyB;oBACzB,oBAAc,KAAK,EAAC,QAAQ,aAAsB,CAC1C,CACE,CACD,CAChB,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Listen, Prop } from '@stencil/core';\n\nimport './shoelace';\n\n@Component({\n  tag: 'pos-user-menu',\n  shadow: true,\n  styleUrl: 'pos-user-menu.css',\n})\nexport class PosUserMenu {\n  @Prop()\n  webId!: string;\n\n  @Event({ eventName: 'pod-os:logout' })\n  logout: EventEmitter;\n\n  @Event({ eventName: 'pod-os:link' })\n  link: EventEmitter;\n\n  @Listen('sl-select')\n  onSelect(e: CustomEvent<{ item: { value: 'profile' | 'logout' | 'dashboard' } }>) {\n    const { value } = e.detail.item;\n    if (value === 'logout') {\n      this.logout.emit();\n    } else if (value === 'profile') {\n      this.link.emit(this.webId);\n    } else if (value === 'dashboard') {\n      this.link.emit('pod-os:dashboard');\n    } else if (value === 'settings') {\n      this.link.emit('pod-os:settings');\n    }\n  }\n\n  render() {\n    if (!this.webId) return null; //?\n    return (\n      <pos-resource uri={this.webId}>\n        <sl-dropdown>\n          <button slot=\"trigger\" aria-label=\"User menu\">\n            <pos-picture>\n              <sl-avatar></sl-avatar>\n            </pos-picture>\n          </button>\n          <sl-menu>\n            <sl-menu-item value=\"dashboard\">Dashboard</sl-menu-item>\n            <sl-menu-item value=\"profile\">\n              <pos-label></pos-label>\n            </sl-menu-item>\n            <sl-menu-item value=\"settings\">Settings</sl-menu-item>\n            <sl-divider></sl-divider>\n            <sl-menu-item value=\"logout\">Logout</sl-menu-item>\n          </sl-menu>\n        </sl-dropdown>\n      </pos-resource>\n    );\n  }\n}\n"]}

package/dist/collection/components/pos-user-menu/shoelace.js

@@ -0,0 +1,6 @@
+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";
+import "@shoelace-style/shoelace/dist/components/avatar/avatar.js";
+import "@shoelace-style/shoelace/dist/components/divider/divider.js";
+//# sourceMappingURL=shoelace.js.map

package/dist/collection/components/pos-user-menu/shoelace.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shoelace.js","sourceRoot":"","sources":["../../../../src/components/pos-user-menu/shoelace.ts"],"names":[],"mappings":"AAAA,OAAO,+DAA+D,CAAC;AACvE,OAAO,uDAAuD,CAAC;AAC/D,OAAO,iEAAiE,CAAC;AACzE,OAAO,2DAA2D,CAAC;AACnE,OAAO,6DAA6D,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';\nimport '@shoelace-style/shoelace/dist/components/avatar/avatar.js';\nimport '@shoelace-style/shoelace/dist/components/divider/divider.js';\n"]}

package/dist/collection/global.js

@@ -1,2 +1,8 @@
 import "@ionic/core";
+const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+function updateTheme(e) {
+    document.documentElement.classList.toggle('sl-theme-dark', e.matches);
+}
+updateTheme(mediaQuery);
+mediaQuery.addEventListener('change', updateTheme);
 //# sourceMappingURL=global.js.map

package/dist/collection/global.js.map

@@ -1 +1 @@
-{"version":3,"file":"global.js","sourceRoot":"","sources":["../../src/global.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC","sourcesContent":["import '@ionic/core';\n"]}
+{"version":3,"file":"global.js","sourceRoot":"","sources":["../../src/global.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAErB,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC;AAErE,SAAS,WAAW,CAAC,CAAC;IACpB,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC,MAAM,CAAC,eAAe,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC;AACxE,CAAC;AAED,WAAW,CAAC,UAAU,CAAC,CAAC;AAExB,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC","sourcesContent":["import '@ionic/core';\n\nconst mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n\nfunction updateTheme(e) {\n  document.documentElement.classList.toggle('sl-theme-dark', e.matches);\n}\n\nupdateTheme(mediaQuery);\n\nmediaQuery.addEventListener('change', updateTheme);\n"]}