@pod-os/elements 0.26.1-rc.6fb2bdc.0 → 0.26.1-rc.a682a29.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3353,7 +3353,7 @@ const IconMakeFindable = () => (index.h("svg", { role: "presentation", xmlns: "h
3353
3353
  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" })));
3354
3354
  PosMakeFindable.style = PosMakeFindableStyle0;
3355
3355
 
3356
- const posNavigationCss = ":host {\n --pos-navigation-bar-height: var(--size-10);\n}\n\nsearch {\n position: relative;\n}\n\n.suggestions ol {\n border: 1px solid var(--pos-border-color);\n display: flex;\n flex-direction: column;\n margin: 0;\n padding: 0;\n list-style-type: none;\n}\n\n.suggestions {\n width: 100%;\n overflow-y: auto;\n max-height: 90dvh;\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\ndialog {\n position: absolute;\n margin-top: calc(-1 * var(--pos-navigation-bar-height));\n padding: 0;\n width: 100%;\n max-width: 100%;\n min-width: 100%;\n overflow: hidden;\n max-height: 100dvh;\n background-color: var(--pos-background-color);\n color: var(--pos-normal-text-color);\n border: var(--pos-border-color);\n border-radius: var(--radius-md);\n box-shadow: var(--shadow-md);\n form {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n align-items: center;\n input {\n display: flex;\n font-size: var(--scale-1);\n height: var(--pos-navigation-bar-height);\n border-top-left-radius: var(--radius-md);\n border-top-right-radius: var(--radius-md);\n padding-left: var(--size-2);\n width: 100%;\n border: none;\n outline: none;\n color: var(--pos-normal-text-color);\n background-color: var(--pos-input-background-color);\n box-sizing: border-box;\n }\n }\n}\n\ndialog[open] {\n display: flex;\n z-index: var(--layer-top);\n animation: slideIn 100ms ease-out;\n}\n\n@media (max-width: 640px) {\n search {\n position: unset;\n }\n dialog {\n margin-top: var(--size-1);\n top: 0;\n width: 95dvw;\n max-width: unset;\n min-width: unset;\n form {\n input {\n height: var(--size-12);\n font-size: var(--scale-fluid-3);\n }\n }\n }\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n";
3356
+ const posNavigationCss = ":host {\n --pos-navigation-bar-height: var(--size-10);\n}\n\nsearch {\n position: relative;\n}\n\n.suggestions ol {\n border: 1px solid var(--pos-border-color);\n display: flex;\n flex-direction: column;\n margin: 0;\n padding: 0;\n list-style-type: none;\n}\n\n.suggestions {\n width: 100%;\n overflow-y: auto;\n max-height: 90dvh;\n li {\n padding: 1rem;\n background-color: var(--pos-background-color);\n pos-rich-link {\n --background-color: inherit;\n }\n &[aria-selected='true'] {\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\ndialog {\n position: absolute;\n margin-top: calc(-1 * var(--pos-navigation-bar-height));\n padding: 0;\n width: 100%;\n max-width: 100%;\n min-width: 100%;\n overflow: hidden;\n max-height: 100dvh;\n background-color: var(--pos-background-color);\n color: var(--pos-normal-text-color);\n border: var(--pos-border-color);\n border-radius: var(--radius-md);\n box-shadow: var(--shadow-md);\n form {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n align-items: center;\n input {\n display: flex;\n font-size: var(--scale-1);\n height: var(--pos-navigation-bar-height);\n border-top-left-radius: var(--radius-md);\n border-top-right-radius: var(--radius-md);\n padding-left: var(--size-2);\n width: 100%;\n border: none;\n outline: none;\n color: var(--pos-normal-text-color);\n background-color: var(--pos-input-background-color);\n box-sizing: border-box;\n }\n }\n}\n\ndialog[open] {\n display: flex;\n z-index: var(--layer-top);\n animation: slideIn 100ms ease-out;\n}\n\n@media (max-width: 640px) {\n search {\n position: unset;\n }\n dialog {\n margin-top: var(--size-1);\n top: 0;\n width: 95dvw;\n max-width: unset;\n min-width: unset;\n form {\n input {\n height: var(--size-12);\n font-size: var(--scale-fluid-3);\n }\n }\n }\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n";
3357
3357
  const PosNavigationStyle0 = posNavigationCss;
3358
3358
 
3359
3359
  const PosNavigation = class {
@@ -3470,7 +3470,7 @@ const PosNavigation = class {
3470
3470
  }
3471
3471
  }
3472
3472
  render() {
3473
- return (index.h("nav", { key: 'f09437fdd0bdfc5912af62658f1f32ab54c439c8' }, index.h("search", { key: 'fa09fec64bacfe1460a1fad256e509a480dd6a01' }, index.h("pos-navigation-bar", { key: '8dcd35cad5858da049ae942152f3cebe884aa761', searchIndexReady: this.searchIndex !== undefined, current: this.resource }), index.h("dialog", { key: '3ad61d48a6c5fcd0b010950c702e9488a9fd5160', ref: el => (this.dialogRef = el) }, index.h("form", { key: '1c23af28daf15f635d4c36002ca6fe153e33b48e', method: "dialog", onSubmit: () => this.onSubmit() }, index.h("input", { key: 'f11ff492c9333e5f6110630b9b6b3f3b5c127660', ref: el => (this.inputRef = el), enterkeyhint: "search", placeholder: "Search or enter URI", value: this.uri, onChange: e => this.onChange(e), onInput: 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)))));
3473
+ return (index.h("nav", { key: 'f09437fdd0bdfc5912af62658f1f32ab54c439c8' }, index.h("search", { key: 'fa09fec64bacfe1460a1fad256e509a480dd6a01' }, index.h("pos-navigation-bar", { key: '8dcd35cad5858da049ae942152f3cebe884aa761', searchIndexReady: this.searchIndex !== undefined, current: this.resource }), index.h("dialog", { key: '3ad61d48a6c5fcd0b010950c702e9488a9fd5160', ref: el => (this.dialogRef = el) }, index.h("form", { key: '1c23af28daf15f635d4c36002ca6fe153e33b48e', method: "dialog", onSubmit: () => this.onSubmit() }, index.h("input", { key: 'b94910b19d32dbb091790f0ebbf59f5838e8d5ea', 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 ? (index.h("div", { class: "suggestions" }, index.h("ol", { id: "suggestions-list", role: "listbox", "aria-label": "Search results" }, this.suggestions.map((it, index$1) => (index.h("li", { id: `option-${index$1}`, role: "option", "aria-selected": index$1 === this.selectedIndex ? 'true' : 'false' }, index.h("pos-rich-link", { uri: it.ref }))))))) : null)))));
3474
3474
  }
3475
3475
  static get watchers() { return {
3476
3476
  "uri": ["updateResource"],