ninja-keys - npm Package Compare versions

Comparing version 1.0.0-beta to 1.0.0-beta.2

dist/ninja-action.js

@@ -62,8 +62,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     .ninja-action {
-      padding: 12px 16px;
+      padding: 0.75em 1em;
       display: flex;
-      border-left: 2px solid rgb(110, 121, 214, 0);
+      border-left: 2px solid transparent;
       align-items: center;
       justify-content: start;
-      font-size: 13px;
       outline: none;
@@ -74,6 +73,10 @@ transition: color 0s ease 0s;
       cursor: pointer;
-      background-color: rgb(248, 249, 251);
-      border-left: 2px solid rgb(110, 121, 214);
+      color: var(--ninja-selected-text-color);
+      background-color: var(--ninja-selected-background);
+      border-left: 2px solid var(--ninja-accent-color);
       outline: none;
     }
+    .ninja-action.selected .ninja-icon {
+      color: var(--ninja-selected-text-color);
+    }
     slot {
@@ -84,14 +87,14 @@ display: flex;
     .ninja-icon {
-      font-size: 20px;
-      margin-right: 16px;
-      color: rgb(107, 111, 118);
-      margin-right: 16px;
-      width: 20px;
-      height: 20px;
+      font-size: 1.2em;
+      margin-right: 1em;
+      color: var(--ninja-icon-color);
+      margin-right: 1em;
       position: relative;
     }
+
     .ninja-title {
       flex-shrink: 0.01;
-      margin-right: 8px;
+      margin-right: 0.5em;
       flex-grow: 1;
+      font-size: 0.8125em;
       white-space: nowrap;
@@ -102,3 +105,3 @@ overflow: hidden;
     .ninja-hotkeys {
-      margin-left: 8px;
+      margin-left: 0.5em;
       flex-shrink: 0;
@@ -109,9 +112,9 @@ width: min-content;
     .ninja-hotkey {
-      background: rgb(239, 241, 244);
-      padding: 1px 4px;
-      border-radius: 3px;
-      min-width: 20px;
+      background: var(--ninja-secondary-background-color);
+      padding: 0.06em 0.25em;
+      border-radius: var(--ninja-key-border-radius);
+      min-width: 1.2em;
       text-transform: capitalize;
-      color: rgb(60, 65, 73);
-      font-size: 12px;
+      color: var(--ninja-secondary-text-color);
+      font-size: 0.75em;
     }
@@ -118,0 +121,0 @@ `;

dist/ninja-header.d.ts

@@ -1,9 +0,10 @@
-import { LitElement } from 'lit';
+import { LitElement, TemplateResult } from 'lit';
 export declare class NinjaHeader extends LitElement {
     static styles: import("lit").CSSResult;
     placeholder: string;
+    hideBreadcrumbs: boolean;
     breadcrumbHome: string;
     breadcrumbs: string[];
     private _inputRef;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): TemplateResult<1>;
     setSearch(value: string): void;
@@ -10,0 +11,0 @@ focusSearch(): void;

dist/ninja-header.js

@@ -14,2 +14,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
         this.placeholder = '';
+        this.hideBreadcrumbs = false;
         this.breadcrumbHome = 'Home';
@@ -20,19 +21,22 @@ this.breadcrumbs = [];
     render() {
-        const itemTemplates = [];
-        for (const breadcrumb of this.breadcrumbs) {
-            itemTemplates.push(html `<button
-          @click=${() => this.selectParent(breadcrumb)}
-          class="breadcrumb"
-        >
-          ${breadcrumb}
-        </button>`);
-        }
-        return html `
-      <button class="close" @click=${this._close}>esc</button>
-      <div class="breadcrumb-list">
-        <button @click=${() => this.selectParent()} class="breadcrumb">
+        let breadcrumbs = '';
+        if (!this.hideBreadcrumbs) {
+            const itemTemplates = [];
+            for (const breadcrumb of this.breadcrumbs) {
+                itemTemplates.push(html `<button tabindex="-1"
+            @click=${() => this.selectParent(breadcrumb)}
+            class="breadcrumb"
+          >
+            ${breadcrumb}
+          </button>`);
+            }
+            breadcrumbs = html `<div class="breadcrumb-list">
+        <button tabindex="-1" @click=${() => this.selectParent()} class="breadcrumb">
           ${this.breadcrumbHome}
         </button>
         ${itemTemplates}
-      </div>
+      </div>`;
+        }
+        return html `
+      ${breadcrumbs}
       <div class="search-wrapper">
@@ -88,3 +92,3 @@ <input
     .search {
-      padding: 20px;
+      padding: 1.25em;
       flex-grow: 1;
@@ -95,28 +99,10 @@ flex-shrink: 0;
       appearance: none;
-      font-size: 18px;
+      font-size: 1.125em;
       background: transparent;
-      color: rgb(60, 65, 73);
-      caret-color: rgb(110, 94, 210);
+      caret-color: var(--ninja-accent-color);
+      color: var(--ninja-text-color);
       outline: none;
     }
-    .close {
-      border: none;
-      background: rgb(239, 241, 244);
-      padding: 4px;
-      border-radius: 3px;
-      min-width: 20px;
-      color: rgb(60, 65, 73);
-      position: absolute;
-      right: 16px;
-      top: 16px;
-      font-size: 12px;
-    }
-
-    .close:hover,
-    .close:focus {
-      text-decoration: none;
-      cursor: pointer;
-    }
     .breadcrumb-list {
-      padding: 16px 64px 0px 16px;
+      padding: 1em 4em 0 1em;
       display: flex;
@@ -130,13 +116,11 @@ flex-direction: row;
     .breadcrumb {
-      background: rgb(239, 241, 244);
-      height: 20px;
+      background: var(--ninja-secondary-background-color);
       text-align: center;
-      line-height: 20px;
-      border-radius: 4px;
+      line-height: 1.2em;
+      border-radius: var(--ninja-key-border-radius);
       border: 0;
       cursor: pointer;
-      font-size: 12px;
-      padding: 0 8px;
-      color: rgb(107, 111, 118);
-      margin-right: 8px;
+      padding: 0.1em 0.5em;
+      color: var(--ninja-secondary-text-color);
+      margin-right: 0.5em;
     }
@@ -146,3 +130,3 @@
       display: flex;
-      border-bottom: 1px solid rgb(239, 241, 244);
+      border-bottom: var(--ninja-separate-border);
     }
@@ -154,2 +138,5 @@ `;
 __decorate([
+    property({ type: Boolean })
+], NinjaHeader.prototype, "hideBreadcrumbs", void 0);
+__decorate([
     property()
@@ -156,0 +143,0 @@ ], NinjaHeader.prototype, "breadcrumbHome", void 0);

dist/ninja-keys.bundled.js

@@ -11,3 +11,3 @@ /**
  * SPDX-License-Identifier: BSD-3-Clause
- */;var r;const l=window.reactiveElementPolyfillSupport,h={toAttribute(t,i){switch(i){case Boolean:t=t?"":null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,i){let e=t;switch(i){case Boolean:e=null!==t;break;case Number:e=null===t?null:Number(t);break;case Object:case Array:try{e=JSON.parse(t)}catch(t){e=null}}return e}},a=(t,i)=>i!==t&&(i==i||t==t),c={attribute:!0,type:String,converter:h,reflect:!1,hasChanged:a};class d extends HTMLElement{constructor(){super(),this._$Et=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Ei=null,this.o()}static addInitializer(t){var i;null!==(i=this.l)&&void 0!==i||(this.l=[]),this.l.push(t)}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((i,e)=>{const s=this._$Eh(e,i);void 0!==s&&(this._$Eu.set(s,e),t.push(s))})),t}static createProperty(t,i=c){if(i.state&&(i.attribute=!1),this.finalize(),this.elementProperties.set(t,i),!i.noAccessor&&!this.prototype.hasOwnProperty(t)){const e="symbol"==typeof t?Symbol():"__"+t,s=this.getPropertyDescriptor(t,e,i);void 0!==s&&Object.defineProperty(this.prototype,t,s)}}static getPropertyDescriptor(t,i,e){return{get(){return this[i]},set(s){const n=this[t];this[i]=s,this.requestUpdate(t,n,e)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||c}static finalize(){if(this.hasOwnProperty("finalized"))return!1;this.finalized=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),this.elementProperties=new Map(t.elementProperties),this._$Eu=new Map,this.hasOwnProperty("properties")){const t=this.properties,i=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const e of i)this.createProperty(e,t[e])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(t){const i=[];if(Array.isArray(t)){const e=new Set(t.flat(1/0).reverse());for(const t of e)i.unshift(o(t))}else void 0!==t&&i.push(o(t));return i}static _$Eh(t,i){const e=i.attribute;return!1===e?void 0:"string"==typeof e?e:"string"==typeof t?t.toLowerCase():void 0}o(){var t;this._$Ev=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$Ep(),this.requestUpdate(),null===(t=this.constructor.l)||void 0===t||t.forEach((t=>t(this)))}addController(t){var i,e;(null!==(i=this._$Em)&&void 0!==i?i:this._$Em=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(e=t.hostConnected)||void 0===e||e.call(t))}removeController(t){var i;null===(i=this._$Em)||void 0===i||i.splice(this._$Em.indexOf(t)>>>0,1)}_$Ep(){this.constructor.elementProperties.forEach(((t,i)=>{this.hasOwnProperty(i)&&(this._$Et.set(i,this[i]),delete this[i])}))}createRenderRoot(){var i;const e=null!==(i=this.shadowRoot)&&void 0!==i?i:this.attachShadow(this.constructor.shadowRootOptions);return((i,e)=>{t?i.adoptedStyleSheets=e.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)):e.forEach((t=>{const e=document.createElement("style"),s=window.litNonce;void 0!==s&&e.setAttribute("nonce",s),e.textContent=t.cssText,i.appendChild(e)}))})(e,this.constructor.elementStyles),e}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this._$Em)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostConnected)||void 0===i?void 0:i.call(t)}))}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this._$Em)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostDisconnected)||void 0===i?void 0:i.call(t)}))}attributeChangedCallback(t,i,e){this._$AK(t,e)}_$Eg(t,i,e=c){var s,n;const o=this.constructor._$Eh(t,e);if(void 0!==o&&!0===e.reflect){const r=(null!==(n=null===(s=e.converter)||void 0===s?void 0:s.toAttribute)&&void 0!==n?n:h.toAttribute)(i,e.type);this._$Ei=t,null==r?this.removeAttribute(o):this.setAttribute(o,r),this._$Ei=null}}_$AK(t,i){var e,s,n;const o=this.constructor,r=o._$Eu.get(t);if(void 0!==r&&this._$Ei!==r){const t=o.getPropertyOptions(r),l=t.converter,a=null!==(n=null!==(s=null===(e=l)||void 0===e?void 0:e.fromAttribute)&&void 0!==s?s:"function"==typeof l?l:null)&&void 0!==n?n:h.fromAttribute;this._$Ei=r,this[r]=a(i,t.type),this._$Ei=null}}requestUpdate(t,i,e){let s=!0;void 0!==t&&(((e=e||this.constructor.getPropertyOptions(t)).hasChanged||a)(this[t],i)?(this._$AL.has(t)||this._$AL.set(t,i),!0===e.reflect&&this._$Ei!==t&&(void 0===this._$ES&&(this._$ES=new Map),this._$ES.set(t,e))):s=!1),!this.isUpdatePending&&s&&(this._$Ev=this._$EC())}async _$EC(){this.isUpdatePending=!0;try{await this._$Ev}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this._$Et&&(this._$Et.forEach(((t,i)=>this[i]=t)),this._$Et=void 0);let i=!1;const e=this._$AL;try{i=this.shouldUpdate(e),i?(this.willUpdate(e),null===(t=this._$Em)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostUpdate)||void 0===i?void 0:i.call(t)})),this.update(e)):this._$EU()}catch(t){throw i=!1,this._$EU(),t}i&&this._$AE(e)}willUpdate(t){}_$AE(t){var i;null===(i=this._$Em)||void 0===i||i.forEach((t=>{var i;return null===(i=t.hostUpdated)||void 0===i?void 0:i.call(t)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EU(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$Ev}shouldUpdate(t){return!0}update(t){void 0!==this._$ES&&(this._$ES.forEach(((t,i)=>this._$Eg(i,this[i],t))),this._$ES=void 0),this._$EU()}updated(t){}firstUpdated(t){}}
+ */;var r;const a=window.reactiveElementPolyfillSupport,l={toAttribute(t,i){switch(i){case Boolean:t=t?"":null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,i){let e=t;switch(i){case Boolean:e=null!==t;break;case Number:e=null===t?null:Number(t);break;case Object:case Array:try{e=JSON.parse(t)}catch(t){e=null}}return e}},h=(t,i)=>i!==t&&(i==i||t==t),c={attribute:!0,type:String,converter:l,reflect:!1,hasChanged:h};class d extends HTMLElement{constructor(){super(),this._$Et=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Ei=null,this.o()}static addInitializer(t){var i;null!==(i=this.l)&&void 0!==i||(this.l=[]),this.l.push(t)}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((i,e)=>{const s=this._$Eh(e,i);void 0!==s&&(this._$Eu.set(s,e),t.push(s))})),t}static createProperty(t,i=c){if(i.state&&(i.attribute=!1),this.finalize(),this.elementProperties.set(t,i),!i.noAccessor&&!this.prototype.hasOwnProperty(t)){const e="symbol"==typeof t?Symbol():"__"+t,s=this.getPropertyDescriptor(t,e,i);void 0!==s&&Object.defineProperty(this.prototype,t,s)}}static getPropertyDescriptor(t,i,e){return{get(){return this[i]},set(s){const n=this[t];this[i]=s,this.requestUpdate(t,n,e)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||c}static finalize(){if(this.hasOwnProperty("finalized"))return!1;this.finalized=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),this.elementProperties=new Map(t.elementProperties),this._$Eu=new Map,this.hasOwnProperty("properties")){const t=this.properties,i=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const e of i)this.createProperty(e,t[e])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(t){const i=[];if(Array.isArray(t)){const e=new Set(t.flat(1/0).reverse());for(const t of e)i.unshift(o(t))}else void 0!==t&&i.push(o(t));return i}static _$Eh(t,i){const e=i.attribute;return!1===e?void 0:"string"==typeof e?e:"string"==typeof t?t.toLowerCase():void 0}o(){var t;this._$Ev=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$Ep(),this.requestUpdate(),null===(t=this.constructor.l)||void 0===t||t.forEach((t=>t(this)))}addController(t){var i,e;(null!==(i=this._$Em)&&void 0!==i?i:this._$Em=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(e=t.hostConnected)||void 0===e||e.call(t))}removeController(t){var i;null===(i=this._$Em)||void 0===i||i.splice(this._$Em.indexOf(t)>>>0,1)}_$Ep(){this.constructor.elementProperties.forEach(((t,i)=>{this.hasOwnProperty(i)&&(this._$Et.set(i,this[i]),delete this[i])}))}createRenderRoot(){var i;const e=null!==(i=this.shadowRoot)&&void 0!==i?i:this.attachShadow(this.constructor.shadowRootOptions);return((i,e)=>{t?i.adoptedStyleSheets=e.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)):e.forEach((t=>{const e=document.createElement("style"),s=window.litNonce;void 0!==s&&e.setAttribute("nonce",s),e.textContent=t.cssText,i.appendChild(e)}))})(e,this.constructor.elementStyles),e}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this._$Em)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostConnected)||void 0===i?void 0:i.call(t)}))}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this._$Em)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostDisconnected)||void 0===i?void 0:i.call(t)}))}attributeChangedCallback(t,i,e){this._$AK(t,e)}_$Eg(t,i,e=c){var s,n;const o=this.constructor._$Eh(t,e);if(void 0!==o&&!0===e.reflect){const r=(null!==(n=null===(s=e.converter)||void 0===s?void 0:s.toAttribute)&&void 0!==n?n:l.toAttribute)(i,e.type);this._$Ei=t,null==r?this.removeAttribute(o):this.setAttribute(o,r),this._$Ei=null}}_$AK(t,i){var e,s,n;const o=this.constructor,r=o._$Eu.get(t);if(void 0!==r&&this._$Ei!==r){const t=o.getPropertyOptions(r),a=t.converter,h=null!==(n=null!==(s=null===(e=a)||void 0===e?void 0:e.fromAttribute)&&void 0!==s?s:"function"==typeof a?a:null)&&void 0!==n?n:l.fromAttribute;this._$Ei=r,this[r]=h(i,t.type),this._$Ei=null}}requestUpdate(t,i,e){let s=!0;void 0!==t&&(((e=e||this.constructor.getPropertyOptions(t)).hasChanged||h)(this[t],i)?(this._$AL.has(t)||this._$AL.set(t,i),!0===e.reflect&&this._$Ei!==t&&(void 0===this._$ES&&(this._$ES=new Map),this._$ES.set(t,e))):s=!1),!this.isUpdatePending&&s&&(this._$Ev=this._$EC())}async _$EC(){this.isUpdatePending=!0;try{await this._$Ev}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this._$Et&&(this._$Et.forEach(((t,i)=>this[i]=t)),this._$Et=void 0);let i=!1;const e=this._$AL;try{i=this.shouldUpdate(e),i?(this.willUpdate(e),null===(t=this._$Em)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostUpdate)||void 0===i?void 0:i.call(t)})),this.update(e)):this._$EU()}catch(t){throw i=!1,this._$EU(),t}i&&this._$AE(e)}willUpdate(t){}_$AE(t){var i;null===(i=this._$Em)||void 0===i||i.forEach((t=>{var i;return null===(i=t.hostUpdated)||void 0===i?void 0:i.call(t)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EU(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$Ev}shouldUpdate(t){return!0}update(t){void 0!==this._$ES&&(this._$ES.forEach(((t,i)=>this._$Eg(i,this[i],t))),this._$ES=void 0),this._$EU()}updated(t){}firstUpdated(t){}}
 /**
@@ -18,3 +18,3 @@ * @license
  */
-var u;d.finalized=!0,d.elementProperties=new Map,d.elementStyles=[],d.shadowRootOptions={mode:"open"},null==l||l({ReactiveElement:d}),(null!==(r=globalThis.reactiveElementVersions)&&void 0!==r?r:globalThis.reactiveElementVersions=[]).push("1.0.1");const v=globalThis.trustedTypes,f=v?v.createPolicy("lit-html",{createHTML:t=>t}):void 0,p=`lit$${(Math.random()+"").slice(9)}$`,m="?"+p,b=`<${m}>`,g=document,y=(t="")=>g.createComment(t),w=t=>null===t||"object"!=typeof t&&"function"!=typeof t,x=Array.isArray,$=t=>{var i;return x(t)||"function"==typeof(null===(i=t)||void 0===i?void 0:i[Symbol.iterator])},k=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,_=/-->/g,j=/>/g,S=/>|[ 	\n\r](?:([^\s"'>=/]+)([ 	\n\r]*=[ 	\n\r]*(?:[^ 	\n\r"'`<>=]|("|')|))|$)/g,A=/'/g,C=/"/g,E=/^(?:script|style|textarea)$/i,O=(t=>(i,...e)=>({_$litType$:t,strings:i,values:e}))(1),z=Symbol.for("lit-noChange"),T=Symbol.for("lit-nothing"),M=new WeakMap,K=g.createTreeWalker(g,129,null,!1),U=(t,i)=>{const e=t.length-1,s=[];let n,o=2===i?"<svg>":"",r=k;for(let i=0;i<e;i++){const e=t[i];let l,h,a=-1,c=0;for(;c<e.length&&(r.lastIndex=c,h=r.exec(e),null!==h);)c=r.lastIndex,r===k?"!--"===h[1]?r=_:void 0!==h[1]?r=j:void 0!==h[2]?(E.test(h[2])&&(n=RegExp("</"+h[2],"g")),r=S):void 0!==h[3]&&(r=S):r===S?">"===h[0]?(r=null!=n?n:k,a=-1):void 0===h[1]?a=-2:(a=r.lastIndex-h[2].length,l=h[1],r=void 0===h[3]?S:'"'===h[3]?C:A):r===C||r===A?r=S:r===_||r===j?r=k:(r=S,n=void 0);const d=r===S&&t[i+1].startsWith("/>")?" ":"";o+=r===k?e+b:a>=0?(s.push(l),e.slice(0,a)+"$lit$"+e.slice(a)+p+d):e+p+(-2===a?(s.push(void 0),i):d)}const l=o+(t[e]||"<?>")+(2===i?"</svg>":"");return[void 0!==f?f.createHTML(l):l,s]};class P{constructor({strings:t,_$litType$:i},e){let s;this.parts=[];let n=0,o=0;const r=t.length-1,l=this.parts,[h,a]=U(t,i);if(this.el=P.createElement(h,e),K.currentNode=this.el.content,2===i){const t=this.el.content,i=t.firstChild;i.remove(),t.append(...i.childNodes)}for(;null!==(s=K.nextNode())&&l.length<r;){if(1===s.nodeType){if(s.hasAttributes()){const t=[];for(const i of s.getAttributeNames())if(i.endsWith("$lit$")||i.startsWith(p)){const e=a[o++];if(t.push(i),void 0!==e){const t=s.getAttribute(e.toLowerCase()+"$lit$").split(p),i=/([.?@])?(.*)/.exec(e);l.push({type:1,index:n,name:i[2],strings:t,ctor:"."===i[1]?H:"?"===i[1]?L:"@"===i[1]?D:B})}else l.push({type:6,index:n})}for(const i of t)s.removeAttribute(i)}if(E.test(s.tagName)){const t=s.textContent.split(p),i=t.length-1;if(i>0){s.textContent=v?v.emptyScript:"";for(let e=0;e<i;e++)s.append(t[e],y()),K.nextNode(),l.push({type:2,index:++n});s.append(t[i],y())}}}else if(8===s.nodeType)if(s.data===m)l.push({type:2,index:n});else{let t=-1;for(;-1!==(t=s.data.indexOf(p,t+1));)l.push({type:7,index:n}),t+=p.length-1}n++}}static createElement(t,i){const e=g.createElement("template");return e.innerHTML=t,e}}function I(t,i,e=t,s){var n,o,r,l;if(i===z)return i;let h=void 0!==s?null===(n=e._$Cl)||void 0===n?void 0:n[s]:e._$Cu;const a=w(i)?void 0:i._$litDirective$;return(null==h?void 0:h.constructor)!==a&&(null===(o=null==h?void 0:h._$AO)||void 0===o||o.call(h,!1),void 0===a?h=void 0:(h=new a(t),h._$AT(t,e,s)),void 0!==s?(null!==(r=(l=e)._$Cl)&&void 0!==r?r:l._$Cl=[])[s]=h:e._$Cu=h),void 0!==h&&(i=I(t,h._$AS(t,i.values),h,s)),i}class R{constructor(t,i){this.v=[],this._$AN=void 0,this._$AD=t,this._$AM=i}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}p(t){var i;const{el:{content:e},parts:s}=this._$AD,n=(null!==(i=null==t?void 0:t.creationScope)&&void 0!==i?i:g).importNode(e,!0);K.currentNode=n;let o=K.nextNode(),r=0,l=0,h=s[0];for(;void 0!==h;){if(r===h.index){let i;2===h.type?i=new N(o,o.nextSibling,this,t):1===h.type?i=new h.ctor(o,h.name,h.strings,this,t):6===h.type&&(i=new F(o,this,t)),this.v.push(i),h=s[++l]}r!==(null==h?void 0:h.index)&&(o=K.nextNode(),r++)}return n}m(t){let i=0;for(const e of this.v)void 0!==e&&(void 0!==e.strings?(e._$AI(t,e,i),i+=e.strings.length-2):e._$AI(t[i])),i++}}class N{constructor(t,i,e,s){var n;this.type=2,this._$AH=T,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=e,this.options=s,this._$Cg=null===(n=null==s?void 0:s.isConnected)||void 0===n||n}get _$AU(){var t,i;return null!==(i=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==i?i:this._$Cg}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=I(this,t,i),w(t)?t===T||null==t||""===t?(this._$AH!==T&&this._$AR(),this._$AH=T):t!==this._$AH&&t!==z&&this.$(t):void 0!==t._$litType$?this.T(t):void 0!==t.nodeType?this.S(t):$(t)?this.M(t):this.$(t)}A(t,i=this._$AB){return this._$AA.parentNode.insertBefore(t,i)}S(t){this._$AH!==t&&(this._$AR(),this._$AH=this.A(t))}$(t){this._$AH!==T&&w(this._$AH)?this._$AA.nextSibling.data=t:this.S(g.createTextNode(t)),this._$AH=t}T(t){var i;const{values:e,_$litType$:s}=t,n="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=P.createElement(s.h,this.options)),s);if((null===(i=this._$AH)||void 0===i?void 0:i._$AD)===n)this._$AH.m(e);else{const t=new R(n,this),i=t.p(this.options);t.m(e),this.S(i),this._$AH=t}}_$AC(t){let i=M.get(t.strings);return void 0===i&&M.set(t.strings,i=new P(t)),i}M(t){x(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let e,s=0;for(const n of t)s===i.length?i.push(e=new N(this.A(y()),this.A(y()),this,this.options)):e=i[s],e._$AI(n),s++;s<i.length&&(this._$AR(e&&e._$AB.nextSibling,s),i.length=s)}_$AR(t=this._$AA.nextSibling,i){var e;for(null===(e=this._$AP)||void 0===e||e.call(this,!1,!0,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i}}setConnected(t){var i;void 0===this._$AM&&(this._$Cg=t,null===(i=this._$AP)||void 0===i||i.call(this,t))}}class B{constructor(t,i,e,s,n){this.type=1,this._$AH=T,this._$AN=void 0,this.element=t,this.name=i,this._$AM=s,this.options=n,e.length>2||""!==e[0]||""!==e[1]?(this._$AH=Array(e.length-1).fill(new String),this.strings=e):this._$AH=T}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,i=this,e,s){const n=this.strings;let o=!1;if(void 0===n)t=I(this,t,i,0),o=!w(t)||t!==this._$AH&&t!==z,o&&(this._$AH=t);else{const s=t;let r,l;for(t=n[0],r=0;r<n.length-1;r++)l=I(this,s[e+r],i,r),l===z&&(l=this._$AH[r]),o||(o=!w(l)||l!==this._$AH[r]),l===T?t=T:t!==T&&(t+=(null!=l?l:"")+n[r+1]),this._$AH[r]=l}o&&!s&&this.k(t)}k(t){t===T?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class H extends B{constructor(){super(...arguments),this.type=3}k(t){this.element[this.name]=t===T?void 0:t}}class L extends B{constructor(){super(...arguments),this.type=4}k(t){t&&t!==T?this.element.setAttribute(this.name,""):this.element.removeAttribute(this.name)}}class D extends B{constructor(t,i,e,s,n){super(t,i,e,s,n),this.type=5}_$AI(t,i=this){var e;if((t=null!==(e=I(this,t,i,0))&&void 0!==e?e:T)===z)return;const s=this._$AH,n=t===T&&s!==T||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,o=t!==T&&(s===T||n);n&&this.element.removeEventListener(this.name,this,s),o&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var i,e;"function"==typeof this._$AH?this._$AH.call(null!==(e=null===(i=this.options)||void 0===i?void 0:i.host)&&void 0!==e?e:this.element,t):this._$AH.handleEvent(t)}}class F{constructor(t,i,e){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=e}get _$AU(){return this._$AM._$AU}_$AI(t){I(this,t)}}const V={P:"$lit$",V:p,L:m,I:1,N:U,R,D:$,j:I,H:N,O:B,F:L,B:D,W:H,Z:F},q=window.litHtmlPolyfillSupport;
+var u;d.finalized=!0,d.elementProperties=new Map,d.elementStyles=[],d.shadowRootOptions={mode:"open"},null==a||a({ReactiveElement:d}),(null!==(r=globalThis.reactiveElementVersions)&&void 0!==r?r:globalThis.reactiveElementVersions=[]).push("1.0.1");const v=globalThis.trustedTypes,f=v?v.createPolicy("lit-html",{createHTML:t=>t}):void 0,p=`lit$${(Math.random()+"").slice(9)}$`,m="?"+p,g=`<${m}>`,b=document,y=(t="")=>b.createComment(t),w=t=>null===t||"object"!=typeof t&&"function"!=typeof t,j=Array.isArray,x=t=>{var i;return j(t)||"function"==typeof(null===(i=t)||void 0===i?void 0:i[Symbol.iterator])},k=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,$=/-->/g,_=/>/g,S=/>|[ 	\n\r](?:([^\s"'>=/]+)([ 	\n\r]*=[ 	\n\r]*(?:[^ 	\n\r"'`<>=]|("|')|))|$)/g,A=/'/g,z=/"/g,C=/^(?:script|style|textarea)$/i,E=(t=>(i,...e)=>({_$litType$:t,strings:i,values:e}))(1),O=Symbol.for("lit-noChange"),T=Symbol.for("lit-nothing"),M=new WeakMap,H=b.createTreeWalker(b,129,null,!1),U=(t,i)=>{const e=t.length-1,s=[];let n,o=2===i?"<svg>":"",r=k;for(let i=0;i<e;i++){const e=t[i];let a,l,h=-1,c=0;for(;c<e.length&&(r.lastIndex=c,l=r.exec(e),null!==l);)c=r.lastIndex,r===k?"!--"===l[1]?r=$:void 0!==l[1]?r=_:void 0!==l[2]?(C.test(l[2])&&(n=RegExp("</"+l[2],"g")),r=S):void 0!==l[3]&&(r=S):r===S?">"===l[0]?(r=null!=n?n:k,h=-1):void 0===l[1]?h=-2:(h=r.lastIndex-l[2].length,a=l[1],r=void 0===l[3]?S:'"'===l[3]?z:A):r===z||r===A?r=S:r===$||r===_?r=k:(r=S,n=void 0);const d=r===S&&t[i+1].startsWith("/>")?" ":"";o+=r===k?e+g:h>=0?(s.push(a),e.slice(0,h)+"$lit$"+e.slice(h)+p+d):e+p+(-2===h?(s.push(void 0),i):d)}const a=o+(t[e]||"<?>")+(2===i?"</svg>":"");return[void 0!==f?f.createHTML(a):a,s]};class K{constructor({strings:t,_$litType$:i},e){let s;this.parts=[];let n=0,o=0;const r=t.length-1,a=this.parts,[l,h]=U(t,i);if(this.el=K.createElement(l,e),H.currentNode=this.el.content,2===i){const t=this.el.content,i=t.firstChild;i.remove(),t.append(...i.childNodes)}for(;null!==(s=H.nextNode())&&a.length<r;){if(1===s.nodeType){if(s.hasAttributes()){const t=[];for(const i of s.getAttributeNames())if(i.endsWith("$lit$")||i.startsWith(p)){const e=h[o++];if(t.push(i),void 0!==e){const t=s.getAttribute(e.toLowerCase()+"$lit$").split(p),i=/([.?@])?(.*)/.exec(e);a.push({type:1,index:n,name:i[2],strings:t,ctor:"."===i[1]?R:"?"===i[1]?N:"@"===i[1]?V:L})}else a.push({type:6,index:n})}for(const i of t)s.removeAttribute(i)}if(C.test(s.tagName)){const t=s.textContent.split(p),i=t.length-1;if(i>0){s.textContent=v?v.emptyScript:"";for(let e=0;e<i;e++)s.append(t[e],y()),H.nextNode(),a.push({type:2,index:++n});s.append(t[i],y())}}}else if(8===s.nodeType)if(s.data===m)a.push({type:2,index:n});else{let t=-1;for(;-1!==(t=s.data.indexOf(p,t+1));)a.push({type:7,index:n}),t+=p.length-1}n++}}static createElement(t,i){const e=b.createElement("template");return e.innerHTML=t,e}}function B(t,i,e=t,s){var n,o,r,a;if(i===O)return i;let l=void 0!==s?null===(n=e._$Cl)||void 0===n?void 0:n[s]:e._$Cu;const h=w(i)?void 0:i._$litDirective$;return(null==l?void 0:l.constructor)!==h&&(null===(o=null==l?void 0:l._$AO)||void 0===o||o.call(l,!1),void 0===h?l=void 0:(l=new h(t),l._$AT(t,e,s)),void 0!==s?(null!==(r=(a=e)._$Cl)&&void 0!==r?r:a._$Cl=[])[s]=l:e._$Cu=l),void 0!==l&&(i=B(t,l._$AS(t,i.values),l,s)),i}class I{constructor(t,i){this.v=[],this._$AN=void 0,this._$AD=t,this._$AM=i}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}p(t){var i;const{el:{content:e},parts:s}=this._$AD,n=(null!==(i=null==t?void 0:t.creationScope)&&void 0!==i?i:b).importNode(e,!0);H.currentNode=n;let o=H.nextNode(),r=0,a=0,l=s[0];for(;void 0!==l;){if(r===l.index){let i;2===l.type?i=new P(o,o.nextSibling,this,t):1===l.type?i=new l.ctor(o,l.name,l.strings,this,t):6===l.type&&(i=new D(o,this,t)),this.v.push(i),l=s[++a]}r!==(null==l?void 0:l.index)&&(o=H.nextNode(),r++)}return n}m(t){let i=0;for(const e of this.v)void 0!==e&&(void 0!==e.strings?(e._$AI(t,e,i),i+=e.strings.length-2):e._$AI(t[i])),i++}}class P{constructor(t,i,e,s){var n;this.type=2,this._$AH=T,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=e,this.options=s,this._$Cg=null===(n=null==s?void 0:s.isConnected)||void 0===n||n}get _$AU(){var t,i;return null!==(i=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==i?i:this._$Cg}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=B(this,t,i),w(t)?t===T||null==t||""===t?(this._$AH!==T&&this._$AR(),this._$AH=T):t!==this._$AH&&t!==O&&this.$(t):void 0!==t._$litType$?this.T(t):void 0!==t.nodeType?this.S(t):x(t)?this.M(t):this.$(t)}A(t,i=this._$AB){return this._$AA.parentNode.insertBefore(t,i)}S(t){this._$AH!==t&&(this._$AR(),this._$AH=this.A(t))}$(t){this._$AH!==T&&w(this._$AH)?this._$AA.nextSibling.data=t:this.S(b.createTextNode(t)),this._$AH=t}T(t){var i;const{values:e,_$litType$:s}=t,n="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=K.createElement(s.h,this.options)),s);if((null===(i=this._$AH)||void 0===i?void 0:i._$AD)===n)this._$AH.m(e);else{const t=new I(n,this),i=t.p(this.options);t.m(e),this.S(i),this._$AH=t}}_$AC(t){let i=M.get(t.strings);return void 0===i&&M.set(t.strings,i=new K(t)),i}M(t){j(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let e,s=0;for(const n of t)s===i.length?i.push(e=new P(this.A(y()),this.A(y()),this,this.options)):e=i[s],e._$AI(n),s++;s<i.length&&(this._$AR(e&&e._$AB.nextSibling,s),i.length=s)}_$AR(t=this._$AA.nextSibling,i){var e;for(null===(e=this._$AP)||void 0===e||e.call(this,!1,!0,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i}}setConnected(t){var i;void 0===this._$AM&&(this._$Cg=t,null===(i=this._$AP)||void 0===i||i.call(this,t))}}class L{constructor(t,i,e,s,n){this.type=1,this._$AH=T,this._$AN=void 0,this.element=t,this.name=i,this._$AM=s,this.options=n,e.length>2||""!==e[0]||""!==e[1]?(this._$AH=Array(e.length-1).fill(new String),this.strings=e):this._$AH=T}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,i=this,e,s){const n=this.strings;let o=!1;if(void 0===n)t=B(this,t,i,0),o=!w(t)||t!==this._$AH&&t!==O,o&&(this._$AH=t);else{const s=t;let r,a;for(t=n[0],r=0;r<n.length-1;r++)a=B(this,s[e+r],i,r),a===O&&(a=this._$AH[r]),o||(o=!w(a)||a!==this._$AH[r]),a===T?t=T:t!==T&&(t+=(null!=a?a:"")+n[r+1]),this._$AH[r]=a}o&&!s&&this.k(t)}k(t){t===T?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class R extends L{constructor(){super(...arguments),this.type=3}k(t){this.element[this.name]=t===T?void 0:t}}class N extends L{constructor(){super(...arguments),this.type=4}k(t){t&&t!==T?this.element.setAttribute(this.name,""):this.element.removeAttribute(this.name)}}class V extends L{constructor(t,i,e,s,n){super(t,i,e,s,n),this.type=5}_$AI(t,i=this){var e;if((t=null!==(e=B(this,t,i,0))&&void 0!==e?e:T)===O)return;const s=this._$AH,n=t===T&&s!==T||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,o=t!==T&&(s===T||n);n&&this.element.removeEventListener(this.name,this,s),o&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var i,e;"function"==typeof this._$AH?this._$AH.call(null!==(e=null===(i=this.options)||void 0===i?void 0:i.host)&&void 0!==e?e:this.element,t):this._$AH.handleEvent(t)}}class D{constructor(t,i,e){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=e}get _$AU(){return this._$AM._$AU}_$AI(t){B(this,t)}}const F={P:"$lit$",V:p,L:m,I:1,N:U,R:I,D:x,j:B,H:P,O:L,F:N,B:V,W:R,Z:D},q=window.litHtmlPolyfillSupport;
 /**
@@ -25,3 +25,3 @@ * @license
  */
-var W,Z;null==q||q(P,N),(null!==(u=globalThis.litHtmlVersions)&&void 0!==u?u:globalThis.litHtmlVersions=[]).push("2.0.1");class J extends d{constructor(){super(...arguments),this.renderOptions={host:this},this._$Dt=void 0}createRenderRoot(){var t,i;const e=super.createRenderRoot();return null!==(t=(i=this.renderOptions).renderBefore)&&void 0!==t||(i.renderBefore=e.firstChild),e}update(t){const i=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Dt=((t,i,e)=>{var s,n;const o=null!==(s=null==e?void 0:e.renderBefore)&&void 0!==s?s:i;let r=o._$litPart$;if(void 0===r){const t=null!==(n=null==e?void 0:e.renderBefore)&&void 0!==n?n:null;o._$litPart$=r=new N(i.insertBefore(y(),t),t,void 0,null!=e?e:{})}return r._$AI(t),r})(i,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),null===(t=this._$Dt)||void 0===t||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this._$Dt)||void 0===t||t.setConnected(!1)}render(){return z}}J.finalized=!0,J._$litElement$=!0,null===(W=globalThis.litElementHydrateSupport)||void 0===W||W.call(globalThis,{LitElement:J});const G=globalThis.litElementPolyfillSupport;null==G||G({LitElement:J}),(null!==(Z=globalThis.litElementVersions)&&void 0!==Z?Z:globalThis.litElementVersions=[]).push("3.0.1");
+var W,Z;null==q||q(K,P),(null!==(u=globalThis.litHtmlVersions)&&void 0!==u?u:globalThis.litHtmlVersions=[]).push("2.0.1");class J extends d{constructor(){super(...arguments),this.renderOptions={host:this},this._$Dt=void 0}createRenderRoot(){var t,i;const e=super.createRenderRoot();return null!==(t=(i=this.renderOptions).renderBefore)&&void 0!==t||(i.renderBefore=e.firstChild),e}update(t){const i=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Dt=((t,i,e)=>{var s,n;const o=null!==(s=null==e?void 0:e.renderBefore)&&void 0!==s?s:i;let r=o._$litPart$;if(void 0===r){const t=null!==(n=null==e?void 0:e.renderBefore)&&void 0!==n?n:null;o._$litPart$=r=new P(i.insertBefore(y(),t),t,void 0,null!=e?e:{})}return r._$AI(t),r})(i,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),null===(t=this._$Dt)||void 0===t||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this._$Dt)||void 0===t||t.setConnected(!1)}render(){return O}}J.finalized=!0,J._$litElement$=!0,null===(W=globalThis.litElementHydrateSupport)||void 0===W||W.call(globalThis,{LitElement:J});const G=globalThis.litElementPolyfillSupport;null==G||G({LitElement:J}),(null!==(Z=globalThis.litElementVersions)&&void 0!==Z?Z:globalThis.litElementVersions=[]).push("3.0.1");
 /**
@@ -52,3 +52,3 @@ * @license
  * SPDX-License-Identifier: BSD-3-Clause
- */const{H:lt}=V,ht=t=>void 0===t.strings,at=()=>document.createComment(""),ct=(t,i,e)=>{var s;const n=t._$AA.parentNode,o=void 0===i?t._$AB:i._$AA;if(void 0===e){const i=n.insertBefore(at(),o),s=n.insertBefore(at(),o);e=new lt(i,s,t,t.options)}else{const i=e._$AB.nextSibling,r=e._$AM,l=r!==t;if(l){let i;null===(s=e._$AQ)||void 0===s||s.call(e,t),e._$AM=t,void 0!==e._$AP&&(i=t._$AU)!==r._$AU&&e._$AP(i)}if(i!==o||l){let t=e._$AA;for(;t!==i;){const i=t.nextSibling;n.insertBefore(t,o),t=i}}}return e},dt=(t,i,e=t)=>(t._$AI(i,e),t),ut={},vt=(t,i=ut)=>t._$AH=i,ft=t=>{var i;null===(i=t._$AP)||void 0===i||i.call(t,!1,!0);let e=t._$AA;const s=t._$AB.nextSibling;for(;e!==s;){const t=e.nextSibling;e.remove(),e=t}},pt=(t,i,e)=>{const s=new Map;for(let n=i;n<=e;n++)s.set(t[n],n);return s},mt=ot(class extends rt{constructor(t){if(super(t),t.type!==et)throw Error("repeat() can only be used in text expressions")}dt(t,i,e){let s;void 0===e?e=i:void 0!==i&&(s=i);const n=[],o=[];let r=0;for(const i of t)n[r]=s?s(i,r):r,o[r]=e(i,r),r++;return{values:o,keys:n}}render(t,i,e){return this.dt(t,i,e).values}update(t,[i,e,s]){var n;const o=(t=>t._$AH)(t),{values:r,keys:l}=this.dt(i,e,s);if(!Array.isArray(o))return this.ct=l,r;const h=null!==(n=this.ct)&&void 0!==n?n:this.ct=[],a=[];let c,d,u=0,v=o.length-1,f=0,p=r.length-1;for(;u<=v&&f<=p;)if(null===o[u])u++;else if(null===o[v])v--;else if(h[u]===l[f])a[f]=dt(o[u],r[f]),u++,f++;else if(h[v]===l[p])a[p]=dt(o[v],r[p]),v--,p--;else if(h[u]===l[p])a[p]=dt(o[u],r[p]),ct(t,a[p+1],o[u]),u++,p--;else if(h[v]===l[f])a[f]=dt(o[v],r[f]),ct(t,o[u],o[v]),v--,f++;else if(void 0===c&&(c=pt(l,f,p),d=pt(h,u,v)),c.has(h[u]))if(c.has(h[v])){const i=d.get(l[f]),e=void 0!==i?o[i]:null;if(null===e){const i=ct(t,o[u]);dt(i,r[f]),a[f]=i}else a[f]=dt(e,r[f]),ct(t,o[u],e),o[i]=null;f++}else ft(o[v]),v--;else ft(o[u]),u++;for(;f<=p;){const i=ct(t,a[p+1]);dt(i,r[f]),a[f++]=i}for(;u<=v;){const t=o[u++];null!==t&&ft(t)}return this.ct=l,vt(t,a),z}});
+ */const{H:at}=F,lt=t=>void 0===t.strings,ht=()=>document.createComment(""),ct=(t,i,e)=>{var s;const n=t._$AA.parentNode,o=void 0===i?t._$AB:i._$AA;if(void 0===e){const i=n.insertBefore(ht(),o),s=n.insertBefore(ht(),o);e=new at(i,s,t,t.options)}else{const i=e._$AB.nextSibling,r=e._$AM,a=r!==t;if(a){let i;null===(s=e._$AQ)||void 0===s||s.call(e,t),e._$AM=t,void 0!==e._$AP&&(i=t._$AU)!==r._$AU&&e._$AP(i)}if(i!==o||a){let t=e._$AA;for(;t!==i;){const i=t.nextSibling;n.insertBefore(t,o),t=i}}}return e},dt=(t,i,e=t)=>(t._$AI(i,e),t),ut={},vt=(t,i=ut)=>t._$AH=i,ft=t=>{var i;null===(i=t._$AP)||void 0===i||i.call(t,!1,!0);let e=t._$AA;const s=t._$AB.nextSibling;for(;e!==s;){const t=e.nextSibling;e.remove(),e=t}},pt=(t,i,e)=>{const s=new Map;for(let n=i;n<=e;n++)s.set(t[n],n);return s},mt=ot(class extends rt{constructor(t){if(super(t),t.type!==et)throw Error("repeat() can only be used in text expressions")}dt(t,i,e){let s;void 0===e?e=i:void 0!==i&&(s=i);const n=[],o=[];let r=0;for(const i of t)n[r]=s?s(i,r):r,o[r]=e(i,r),r++;return{values:o,keys:n}}render(t,i,e){return this.dt(t,i,e).values}update(t,[i,e,s]){var n;const o=(t=>t._$AH)(t),{values:r,keys:a}=this.dt(i,e,s);if(!Array.isArray(o))return this.ct=a,r;const l=null!==(n=this.ct)&&void 0!==n?n:this.ct=[],h=[];let c,d,u=0,v=o.length-1,f=0,p=r.length-1;for(;u<=v&&f<=p;)if(null===o[u])u++;else if(null===o[v])v--;else if(l[u]===a[f])h[f]=dt(o[u],r[f]),u++,f++;else if(l[v]===a[p])h[p]=dt(o[v],r[p]),v--,p--;else if(l[u]===a[p])h[p]=dt(o[u],r[p]),ct(t,h[p+1],o[u]),u++,p--;else if(l[v]===a[f])h[f]=dt(o[v],r[f]),ct(t,o[u],o[v]),v--,f++;else if(void 0===c&&(c=pt(a,f,p),d=pt(l,u,v)),c.has(l[u]))if(c.has(l[v])){const i=d.get(a[f]),e=void 0!==i?o[i]:null;if(null===e){const i=ct(t,o[u]);dt(i,r[f]),h[f]=i}else h[f]=dt(e,r[f]),ct(t,o[u],e),o[i]=null;f++}else ft(o[v]),v--;else ft(o[u]),u++;for(;f<=p;){const i=ct(t,h[p+1]);dt(i,r[f]),h[f++]=i}for(;u<=v;){const t=o[u++];null!==t&&ft(t)}return this.ct=a,vt(t,h),O}});
 /**
@@ -68,3 +68,3 @@ * @license
  */
-var bt="undefined"!=typeof navigator&&navigator.userAgent.toLowerCase().indexOf("firefox")>0;function gt(t,i,e){t.addEventListener?t.addEventListener(i,e,!1):t.attachEvent&&t.attachEvent("on".concat(i),(function(){e(window.event)}))}function yt(t,i){for(var e=i.slice(0,i.length-1),s=0;s<e.length;s++)e[s]=t[e[s].toLowerCase()];return e}function wt(t){"string"!=typeof t&&(t="");for(var i=(t=t.replace(/\s/g,"")).split(","),e=i.lastIndexOf("");e>=0;)i[e-1]+=",",i.splice(e,1),e=i.lastIndexOf("");return i}for(var xt={backspace:8,tab:9,clear:12,enter:13,return:13,esc:27,escape:27,space:32,left:37,up:38,right:39,down:40,del:46,delete:46,ins:45,insert:45,home:36,end:35,pageup:33,pagedown:34,capslock:20,num_0:96,num_1:97,num_2:98,num_3:99,num_4:100,num_5:101,num_6:102,num_7:103,num_8:104,num_9:105,num_multiply:106,num_add:107,num_enter:108,num_subtract:109,num_decimal:110,num_divide:111,"⇪":20,",":188,".":190,"/":191,"`":192,"-":bt?173:189,"=":bt?61:187,";":bt?59:186,"'":222,"[":219,"]":221,"\\":220},$t={"⇧":16,shift:16,"⌥":18,alt:18,option:18,"⌃":17,ctrl:17,control:17,"⌘":91,cmd:91,command:91},kt={16:"shiftKey",18:"altKey",17:"ctrlKey",91:"metaKey",shiftKey:16,ctrlKey:17,altKey:18,metaKey:91},_t={16:!1,18:!1,17:!1,91:!1},jt={},St=1;St<20;St++)xt["f".concat(St)]=111+St;var At=[],Ct="all",Et=[],Ot=function(t){return xt[t.toLowerCase()]||$t[t.toLowerCase()]||t.toUpperCase().charCodeAt(0)};function zt(t){Ct=t||"all"}function Tt(){return Ct||"all"}var Mt=function(t){var i=t.key,e=t.scope,s=t.method,n=t.splitKey,o=void 0===n?"+":n;wt(i).forEach((function(t){var i=t.split(o),n=i.length,r=i[n-1],l="*"===r?"*":Ot(r);if(jt[l]){e||(e=Tt());var h=n>1?yt($t,i):[];jt[l]=jt[l].map((function(t){return(!s||t.method===s)&&t.scope===e&&function(t,i){for(var e=t.length>=i.length?t:i,s=t.length>=i.length?i:t,n=!0,o=0;o<e.length;o++)-1===s.indexOf(e[o])&&(n=!1);return n}(t.mods,h)?{}:t}))}}))};function Kt(t,i,e){var s;if(i.scope===e||"all"===i.scope){for(var n in s=i.mods.length>0,_t)Object.prototype.hasOwnProperty.call(_t,n)&&(!_t[n]&&i.mods.indexOf(+n)>-1||_t[n]&&-1===i.mods.indexOf(+n))&&(s=!1);(0!==i.mods.length||_t[16]||_t[18]||_t[17]||_t[91])&&!s&&"*"!==i.shortcut||!1===i.method(t,i)&&(t.preventDefault?t.preventDefault():t.returnValue=!1,t.stopPropagation&&t.stopPropagation(),t.cancelBubble&&(t.cancelBubble=!0))}}function Ut(t){var i=jt["*"],e=t.keyCode||t.which||t.charCode;if(Pt.filter.call(this,t)){if(93!==e&&224!==e||(e=91),-1===At.indexOf(e)&&229!==e&&At.push(e),["ctrlKey","altKey","shiftKey","metaKey"].forEach((function(i){var e=kt[i];t[i]&&-1===At.indexOf(e)?At.push(e):!t[i]&&At.indexOf(e)>-1?At.splice(At.indexOf(e),1):"metaKey"===i&&t[i]&&3===At.length&&(t.ctrlKey||t.shiftKey||t.altKey||(At=At.slice(At.indexOf(e))))})),e in _t){for(var s in _t[e]=!0,$t)$t[s]===e&&(Pt[s]=!0);if(!i)return}for(var n in _t)Object.prototype.hasOwnProperty.call(_t,n)&&(_t[n]=t[kt[n]]);t.getModifierState&&(!t.altKey||t.ctrlKey)&&t.getModifierState("AltGraph")&&(-1===At.indexOf(17)&&At.push(17),-1===At.indexOf(18)&&At.push(18),_t[17]=!0,_t[18]=!0);var o=Tt();if(i)for(var r=0;r<i.length;r++)i[r].scope===o&&("keydown"===t.type&&i[r].keydown||"keyup"===t.type&&i[r].keyup)&&Kt(t,i[r],o);if(e in jt)for(var l=0;l<jt[e].length;l++)if(("keydown"===t.type&&jt[e][l].keydown||"keyup"===t.type&&jt[e][l].keyup)&&jt[e][l].key){for(var h=jt[e][l],a=h.splitKey,c=h.key.split(a),d=[],u=0;u<c.length;u++)d.push(Ot(c[u]));d.sort().join("")===At.sort().join("")&&Kt(t,h,o)}}}function Pt(t,i,e){At=[];var s=wt(t),n=[],o="all",r=document,l=0,h=!1,a=!0,c="+";for(void 0===e&&"function"==typeof i&&(e=i),"[object Object]"===Object.prototype.toString.call(i)&&(i.scope&&(o=i.scope),i.element&&(r=i.element),i.keyup&&(h=i.keyup),void 0!==i.keydown&&(a=i.keydown),"string"==typeof i.splitKey&&(c=i.splitKey)),"string"==typeof i&&(o=i);l<s.length;l++)n=[],(t=s[l].split(c)).length>1&&(n=yt($t,t)),(t="*"===(t=t[t.length-1])?"*":Ot(t))in jt||(jt[t]=[]),jt[t].push({keyup:h,keydown:a,scope:o,mods:n,shortcut:s[l],method:e,key:s[l],splitKey:c});void 0!==r&&!function(t){return Et.indexOf(t)>-1}(r)&&window&&(Et.push(r),gt(r,"keydown",(function(t){Ut(t)})),gt(window,"focus",(function(){At=[]})),gt(r,"keyup",(function(t){Ut(t),function(t){var i=t.keyCode||t.which||t.charCode,e=At.indexOf(i);if(e>=0&&At.splice(e,1),t.key&&"meta"===t.key.toLowerCase()&&At.splice(0,At.length),93!==i&&224!==i||(i=91),i in _t)for(var s in _t[i]=!1,$t)$t[s]===i&&(Pt[s]=!1)}(t)})))}var It={setScope:zt,getScope:Tt,deleteScope:function(t,i){var e,s;for(var n in t||(t=Tt()),jt)if(Object.prototype.hasOwnProperty.call(jt,n))for(e=jt[n],s=0;s<e.length;)e[s].scope===t?e.splice(s,1):s++;Tt()===t&&zt(i||"all")},getPressedKeyCodes:function(){return At.slice(0)},isPressed:function(t){return"string"==typeof t&&(t=Ot(t)),-1!==At.indexOf(t)},filter:function(t){var i=t.target||t.srcElement,e=i.tagName,s=!0;return!i.isContentEditable&&("INPUT"!==e&&"TEXTAREA"!==e&&"SELECT"!==e||i.readOnly)||(s=!1),s},unbind:function(t){if(t){if(Array.isArray(t))t.forEach((function(t){t.key&&Mt(t)}));else if("object"==typeof t)t.key&&Mt(t);else if("string"==typeof t){for(var i=arguments.length,e=new Array(i>1?i-1:0),s=1;s<i;s++)e[s-1]=arguments[s];var n=e[0],o=e[1];"function"==typeof n&&(o=n,n=""),Mt({key:t,scope:n,method:o,splitKey:"+"})}}else Object.keys(jt).forEach((function(t){return delete jt[t]}))}};for(var Rt in It)Object.prototype.hasOwnProperty.call(It,Rt)&&(Pt[Rt]=It[Rt]);if("undefined"!=typeof window){var Nt=window.hotkeys;Pt.noConflict=function(t){return t&&window.hotkeys===Pt&&(window.hotkeys=Nt),Pt},window.hotkeys=Pt}
+var gt="undefined"!=typeof navigator&&navigator.userAgent.toLowerCase().indexOf("firefox")>0;function bt(t,i,e){t.addEventListener?t.addEventListener(i,e,!1):t.attachEvent&&t.attachEvent("on".concat(i),(function(){e(window.event)}))}function yt(t,i){for(var e=i.slice(0,i.length-1),s=0;s<e.length;s++)e[s]=t[e[s].toLowerCase()];return e}function wt(t){"string"!=typeof t&&(t="");for(var i=(t=t.replace(/\s/g,"")).split(","),e=i.lastIndexOf("");e>=0;)i[e-1]+=",",i.splice(e,1),e=i.lastIndexOf("");return i}for(var jt={backspace:8,tab:9,clear:12,enter:13,return:13,esc:27,escape:27,space:32,left:37,up:38,right:39,down:40,del:46,delete:46,ins:45,insert:45,home:36,end:35,pageup:33,pagedown:34,capslock:20,num_0:96,num_1:97,num_2:98,num_3:99,num_4:100,num_5:101,num_6:102,num_7:103,num_8:104,num_9:105,num_multiply:106,num_add:107,num_enter:108,num_subtract:109,num_decimal:110,num_divide:111,"⇪":20,",":188,".":190,"/":191,"`":192,"-":gt?173:189,"=":gt?61:187,";":gt?59:186,"'":222,"[":219,"]":221,"\\":220},xt={"⇧":16,shift:16,"⌥":18,alt:18,option:18,"⌃":17,ctrl:17,control:17,"⌘":91,cmd:91,command:91},kt={16:"shiftKey",18:"altKey",17:"ctrlKey",91:"metaKey",shiftKey:16,ctrlKey:17,altKey:18,metaKey:91},$t={16:!1,18:!1,17:!1,91:!1},_t={},St=1;St<20;St++)jt["f".concat(St)]=111+St;var At=[],zt="all",Ct=[],Et=function(t){return jt[t.toLowerCase()]||xt[t.toLowerCase()]||t.toUpperCase().charCodeAt(0)};function Ot(t){zt=t||"all"}function Tt(){return zt||"all"}var Mt=function(t){var i=t.key,e=t.scope,s=t.method,n=t.splitKey,o=void 0===n?"+":n;wt(i).forEach((function(t){var i=t.split(o),n=i.length,r=i[n-1],a="*"===r?"*":Et(r);if(_t[a]){e||(e=Tt());var l=n>1?yt(xt,i):[];_t[a]=_t[a].map((function(t){return(!s||t.method===s)&&t.scope===e&&function(t,i){for(var e=t.length>=i.length?t:i,s=t.length>=i.length?i:t,n=!0,o=0;o<e.length;o++)-1===s.indexOf(e[o])&&(n=!1);return n}(t.mods,l)?{}:t}))}}))};function Ht(t,i,e){var s;if(i.scope===e||"all"===i.scope){for(var n in s=i.mods.length>0,$t)Object.prototype.hasOwnProperty.call($t,n)&&(!$t[n]&&i.mods.indexOf(+n)>-1||$t[n]&&-1===i.mods.indexOf(+n))&&(s=!1);(0!==i.mods.length||$t[16]||$t[18]||$t[17]||$t[91])&&!s&&"*"!==i.shortcut||!1===i.method(t,i)&&(t.preventDefault?t.preventDefault():t.returnValue=!1,t.stopPropagation&&t.stopPropagation(),t.cancelBubble&&(t.cancelBubble=!0))}}function Ut(t){var i=_t["*"],e=t.keyCode||t.which||t.charCode;if(Kt.filter.call(this,t)){if(93!==e&&224!==e||(e=91),-1===At.indexOf(e)&&229!==e&&At.push(e),["ctrlKey","altKey","shiftKey","metaKey"].forEach((function(i){var e=kt[i];t[i]&&-1===At.indexOf(e)?At.push(e):!t[i]&&At.indexOf(e)>-1?At.splice(At.indexOf(e),1):"metaKey"===i&&t[i]&&3===At.length&&(t.ctrlKey||t.shiftKey||t.altKey||(At=At.slice(At.indexOf(e))))})),e in $t){for(var s in $t[e]=!0,xt)xt[s]===e&&(Kt[s]=!0);if(!i)return}for(var n in $t)Object.prototype.hasOwnProperty.call($t,n)&&($t[n]=t[kt[n]]);t.getModifierState&&(!t.altKey||t.ctrlKey)&&t.getModifierState("AltGraph")&&(-1===At.indexOf(17)&&At.push(17),-1===At.indexOf(18)&&At.push(18),$t[17]=!0,$t[18]=!0);var o=Tt();if(i)for(var r=0;r<i.length;r++)i[r].scope===o&&("keydown"===t.type&&i[r].keydown||"keyup"===t.type&&i[r].keyup)&&Ht(t,i[r],o);if(e in _t)for(var a=0;a<_t[e].length;a++)if(("keydown"===t.type&&_t[e][a].keydown||"keyup"===t.type&&_t[e][a].keyup)&&_t[e][a].key){for(var l=_t[e][a],h=l.splitKey,c=l.key.split(h),d=[],u=0;u<c.length;u++)d.push(Et(c[u]));d.sort().join("")===At.sort().join("")&&Ht(t,l,o)}}}function Kt(t,i,e){At=[];var s=wt(t),n=[],o="all",r=document,a=0,l=!1,h=!0,c="+";for(void 0===e&&"function"==typeof i&&(e=i),"[object Object]"===Object.prototype.toString.call(i)&&(i.scope&&(o=i.scope),i.element&&(r=i.element),i.keyup&&(l=i.keyup),void 0!==i.keydown&&(h=i.keydown),"string"==typeof i.splitKey&&(c=i.splitKey)),"string"==typeof i&&(o=i);a<s.length;a++)n=[],(t=s[a].split(c)).length>1&&(n=yt(xt,t)),(t="*"===(t=t[t.length-1])?"*":Et(t))in _t||(_t[t]=[]),_t[t].push({keyup:l,keydown:h,scope:o,mods:n,shortcut:s[a],method:e,key:s[a],splitKey:c});void 0!==r&&!function(t){return Ct.indexOf(t)>-1}(r)&&window&&(Ct.push(r),bt(r,"keydown",(function(t){Ut(t)})),bt(window,"focus",(function(){At=[]})),bt(r,"keyup",(function(t){Ut(t),function(t){var i=t.keyCode||t.which||t.charCode,e=At.indexOf(i);if(e>=0&&At.splice(e,1),t.key&&"meta"===t.key.toLowerCase()&&At.splice(0,At.length),93!==i&&224!==i||(i=91),i in $t)for(var s in $t[i]=!1,xt)xt[s]===i&&(Kt[s]=!1)}(t)})))}var Bt={setScope:Ot,getScope:Tt,deleteScope:function(t,i){var e,s;for(var n in t||(t=Tt()),_t)if(Object.prototype.hasOwnProperty.call(_t,n))for(e=_t[n],s=0;s<e.length;)e[s].scope===t?e.splice(s,1):s++;Tt()===t&&Ot(i||"all")},getPressedKeyCodes:function(){return At.slice(0)},isPressed:function(t){return"string"==typeof t&&(t=Et(t)),-1!==At.indexOf(t)},filter:function(t){var i=t.target||t.srcElement,e=i.tagName,s=!0;return!i.isContentEditable&&("INPUT"!==e&&"TEXTAREA"!==e&&"SELECT"!==e||i.readOnly)||(s=!1),s},unbind:function(t){if(t){if(Array.isArray(t))t.forEach((function(t){t.key&&Mt(t)}));else if("object"==typeof t)t.key&&Mt(t);else if("string"==typeof t){for(var i=arguments.length,e=new Array(i>1?i-1:0),s=1;s<i;s++)e[s-1]=arguments[s];var n=e[0],o=e[1];"function"==typeof n&&(o=n,n=""),Mt({key:t,scope:n,method:o,splitKey:"+"})}}else Object.keys(_t).forEach((function(t){return delete _t[t]}))}};for(var It in Bt)Object.prototype.hasOwnProperty.call(Bt,It)&&(Kt[It]=Bt[It]);if("undefined"!=typeof window){var Pt=window.hotkeys;Kt.noConflict=function(t){return t&&window.hotkeys===Kt&&(window.hotkeys=Pt),Kt},window.hotkeys=Kt}
 /**
@@ -74,3 +74,3 @@ * @license
  * SPDX-License-Identifier: BSD-3-Clause
- */const Bt=ot(class extends rt{constructor(t){var i;if(super(t),t.type!==it||"class"!==t.name||(null===(i=t.strings)||void 0===i?void 0:i.length)>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return" "+Object.keys(t).filter((i=>t[i])).join(" ")+" "}update(t,[i]){var e,s;if(void 0===this.st){this.st=new Set,void 0!==t.strings&&(this.et=new Set(t.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!(null===(e=this.et)||void 0===e?void 0:e.has(t))&&this.st.add(t);return this.render(i)}const n=t.element.classList;this.st.forEach((t=>{t in i||(n.remove(t),this.st.delete(t))}));for(const t in i){const e=!!i[t];e===this.st.has(t)||(null===(s=this.et)||void 0===s?void 0:s.has(t))||(e?(n.add(t),this.st.add(t)):(n.remove(t),this.st.delete(t)))}return z}}),Ht=(t,i)=>{var e,s;const n=t._$AN;if(void 0===n)return!1;for(const t of n)null===(s=(e=t)._$AO)||void 0===s||s.call(e,i,!1),Ht(t,i);return!0},Lt=t=>{let i,e;do{if(void 0===(i=t._$AM))break;e=i._$AN,e.delete(t),t=i}while(0===(null==e?void 0:e.size))},Dt=t=>{for(let i;i=t._$AM;t=i){let e=i._$AN;if(void 0===e)i._$AN=e=new Set;else if(e.has(t))break;e.add(t),qt(i)}};
+ */const Lt=ot(class extends rt{constructor(t){var i;if(super(t),t.type!==it||"class"!==t.name||(null===(i=t.strings)||void 0===i?void 0:i.length)>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return" "+Object.keys(t).filter((i=>t[i])).join(" ")+" "}update(t,[i]){var e,s;if(void 0===this.st){this.st=new Set,void 0!==t.strings&&(this.et=new Set(t.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!(null===(e=this.et)||void 0===e?void 0:e.has(t))&&this.st.add(t);return this.render(i)}const n=t.element.classList;this.st.forEach((t=>{t in i||(n.remove(t),this.st.delete(t))}));for(const t in i){const e=!!i[t];e===this.st.has(t)||(null===(s=this.et)||void 0===s?void 0:s.has(t))||(e?(n.add(t),this.st.add(t)):(n.remove(t),this.st.delete(t)))}return O}}),Rt=(t,i)=>{var e,s;const n=t._$AN;if(void 0===n)return!1;for(const t of n)null===(s=(e=t)._$AO)||void 0===s||s.call(e,i,!1),Rt(t,i);return!0},Nt=t=>{let i,e;do{if(void 0===(i=t._$AM))break;e=i._$AN,e.delete(t),t=i}while(0===(null==e?void 0:e.size))},Vt=t=>{for(let i;i=t._$AM;t=i){let e=i._$AN;if(void 0===e)i._$AN=e=new Set;else if(e.has(t))break;e.add(t),qt(i)}};
 /**
@@ -80,3 +80,3 @@ * @license
  * SPDX-License-Identifier: BSD-3-Clause
- */function Ft(t){void 0!==this._$AN?(Lt(this),this._$AM=t,Dt(this)):this._$AM=t}function Vt(t,i=!1,e=0){const s=this._$AH,n=this._$AN;if(void 0!==n&&0!==n.size)if(i)if(Array.isArray(s))for(let t=e;t<s.length;t++)Ht(s[t],!1),Lt(s[t]);else null!=s&&(Ht(s,!1),Lt(s));else Ht(this,t)}const qt=t=>{var i,e,s,n;t.type==et&&(null!==(i=(s=t)._$AP)&&void 0!==i||(s._$AP=Vt),null!==(e=(n=t)._$AQ)&&void 0!==e||(n._$AQ=Ft))};class Wt extends rt{constructor(){super(...arguments),this._$AN=void 0}_$AT(t,i,e){super._$AT(t,i,e),Dt(this),this.isConnected=t._$AU}_$AO(t,i=!0){var e,s;t!==this.isConnected&&(this.isConnected=t,t?null===(e=this.reconnected)||void 0===e||e.call(this):null===(s=this.disconnected)||void 0===s||s.call(this)),i&&(Ht(this,t),Lt(this))}setValue(t){if(ht(this._$Ct))this._$Ct._$AI(t,this);else{const i=[...this._$Ct._$AH];i[this._$Ci]=t,this._$Ct._$AI(i,this,0)}}disconnected(){}reconnected(){}}
+ */function Dt(t){void 0!==this._$AN?(Nt(this),this._$AM=t,Vt(this)):this._$AM=t}function Ft(t,i=!1,e=0){const s=this._$AH,n=this._$AN;if(void 0!==n&&0!==n.size)if(i)if(Array.isArray(s))for(let t=e;t<s.length;t++)Rt(s[t],!1),Nt(s[t]);else null!=s&&(Rt(s,!1),Nt(s));else Rt(this,t)}const qt=t=>{var i,e,s,n;t.type==et&&(null!==(i=(s=t)._$AP)&&void 0!==i||(s._$AP=Ft),null!==(e=(n=t)._$AQ)&&void 0!==e||(n._$AQ=Dt))};class Wt extends rt{constructor(){super(...arguments),this._$AN=void 0}_$AT(t,i,e){super._$AT(t,i,e),Vt(this),this.isConnected=t._$AU}_$AO(t,i=!0){var e,s;t!==this.isConnected&&(this.isConnected=t,t?null===(e=this.reconnected)||void 0===e||e.call(this):null===(s=this.disconnected)||void 0===s||s.call(this)),i&&(Rt(this,t),Nt(this))}setValue(t){if(lt(this._$Ct))this._$Ct._$AI(t,this);else{const i=[...this._$Ct._$AH];i[this._$Ci]=t,this._$Ct._$AI(i,this,0)}}disconnected(){}reconnected(){}}
 /**
@@ -86,3 +86,3 @@ * @license
  * SPDX-License-Identifier: BSD-3-Clause
- */const Zt=()=>new Jt;class Jt{}const Gt=new WeakMap,Xt=ot(class extends Wt{render(t){return T}update(t,[i]){var e;const s=i!==this.U;return s&&void 0!==this.U&&this.nt(void 0),(s||this.rt!==this.lt)&&(this.U=i,this.ht=null===(e=t.options)||void 0===e?void 0:e.host,this.nt(this.lt=t.element)),T}nt(t){"function"==typeof this.U?(void 0!==Gt.get(this.U)&&this.U.call(this.ht,void 0),Gt.set(this.U,t),void 0!==t&&this.U.call(this.ht,t)):this.U.value=t}get rt(){var t;return"function"==typeof this.U?Gt.get(this.U):null===(t=this.U)||void 0===t?void 0:t.value}disconnected(){this.rt===this.lt&&this.nt(void 0)}reconnected(){this.nt(this.lt)}});var Qt=function(t,i,e,s){for(var n,o=arguments.length,r=o<3?i:null===s?s=Object.getOwnPropertyDescriptor(i,e):s,l=t.length-1;l>=0;l--)(n=t[l])&&(r=(o<3?n(r):o>3?n(i,e,r):n(i,e))||r);return o>3&&r&&Object.defineProperty(i,e,r),r};let Yt=class extends J{constructor(){super(...arguments),this.placeholder="",this.breadcrumbHome="Home",this.breadcrumbs=[],this._inputRef=Zt()}render(){const t=[];for(const i of this.breadcrumbs)t.push(O`<button @click="${()=>this.selectParent(i)}" class="breadcrumb">${i}</button>`);return O`<button class="close" @click="${this._close}">esc</button><div class="breadcrumb-list"><button @click="${()=>this.selectParent()}" class="breadcrumb">${this.breadcrumbHome}</button> ${t}</div><div class="search-wrapper"><input type="text" id="search" spellcheck="false" autocomplete="off" @input="${this._handleInput}" ${Xt(this._inputRef)} placeholder="${this.placeholder}" class="search"></div>`}setSearch(t){this._inputRef.value&&(this._inputRef.value.value=t)}focusSearch(){requestAnimationFrame((()=>this._inputRef.value.focus()))}_handleInput(t){const i=t.target;this.dispatchEvent(new CustomEvent("change",{detail:{search:i.value},bubbles:!0,composed:!0}))}selectParent(t){this.dispatchEvent(new CustomEvent("setParent",{detail:{parent:t},bubbles:!0,composed:!0}))}firstUpdated(){this.focusSearch()}_close(){this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0}))}};Yt.styles=n`:host{flex:1;position:relative}.search{padding:20px;flex-grow:1;flex-shrink:0;margin:0;border:none;appearance:none;font-size:18px;background:0 0;color:#3c4149;caret-color:#6e5ed2;outline:0}.close{border:none;background:#eff1f4;padding:4px;border-radius:3px;min-width:20px;color:#3c4149;position:absolute;right:16px;top:16px;font-size:12px}.close:focus,.close:hover{text-decoration:none;cursor:pointer}.breadcrumb-list{padding:16px 64px 0 16px;display:flex;flex-direction:row;align-items:stretch;justify-content:flex-start;flex:initial}.breadcrumb{background:#eff1f4;height:20px;text-align:center;line-height:20px;border-radius:4px;border:0;cursor:pointer;font-size:12px;padding:0 8px;color:#6b6f76;margin-right:8px}.search-wrapper{display:flex;border-bottom:1px solid #eff1f4}`,Qt([Y()],Yt.prototype,"placeholder",void 0),Qt([Y()],Yt.prototype,"breadcrumbHome",void 0),Qt([Y({type:Array})],Yt.prototype,"breadcrumbs",void 0),Yt=Qt([X("ninja-header")],Yt),
+ */const Zt=()=>new Jt;class Jt{}const Gt=new WeakMap,Xt=ot(class extends Wt{render(t){return T}update(t,[i]){var e;const s=i!==this.U;return s&&void 0!==this.U&&this.nt(void 0),(s||this.rt!==this.lt)&&(this.U=i,this.ht=null===(e=t.options)||void 0===e?void 0:e.host,this.nt(this.lt=t.element)),T}nt(t){"function"==typeof this.U?(void 0!==Gt.get(this.U)&&this.U.call(this.ht,void 0),Gt.set(this.U,t),void 0!==t&&this.U.call(this.ht,t)):this.U.value=t}get rt(){var t;return"function"==typeof this.U?Gt.get(this.U):null===(t=this.U)||void 0===t?void 0:t.value}disconnected(){this.rt===this.lt&&this.nt(void 0)}reconnected(){this.nt(this.lt)}});var Qt=function(t,i,e,s){for(var n,o=arguments.length,r=o<3?i:null===s?s=Object.getOwnPropertyDescriptor(i,e):s,a=t.length-1;a>=0;a--)(n=t[a])&&(r=(o<3?n(r):o>3?n(i,e,r):n(i,e))||r);return o>3&&r&&Object.defineProperty(i,e,r),r};let Yt=class extends J{constructor(){super(...arguments),this.placeholder="",this.hideBreadcrumbs=!1,this.breadcrumbHome="Home",this.breadcrumbs=[],this._inputRef=Zt()}render(){let t="";if(!this.hideBreadcrumbs){const i=[];for(const t of this.breadcrumbs)i.push(E`<button tabindex="-1" @click="${()=>this.selectParent(t)}" class="breadcrumb">${t}</button>`);t=E`<div class="breadcrumb-list"><button tabindex="-1" @click="${()=>this.selectParent()}" class="breadcrumb">${this.breadcrumbHome}</button> ${i}</div>`}return E`${t}<div class="search-wrapper"><input type="text" id="search" spellcheck="false" autocomplete="off" @input="${this._handleInput}" ${Xt(this._inputRef)} placeholder="${this.placeholder}" class="search"></div>`}setSearch(t){this._inputRef.value&&(this._inputRef.value.value=t)}focusSearch(){requestAnimationFrame((()=>this._inputRef.value.focus()))}_handleInput(t){const i=t.target;this.dispatchEvent(new CustomEvent("change",{detail:{search:i.value},bubbles:!0,composed:!0}))}selectParent(t){this.dispatchEvent(new CustomEvent("setParent",{detail:{parent:t},bubbles:!0,composed:!0}))}firstUpdated(){this.focusSearch()}_close(){this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0}))}};Yt.styles=n`:host{flex:1;position:relative}.search{padding:1.25em;flex-grow:1;flex-shrink:0;margin:0;border:none;appearance:none;font-size:1.125em;background:0 0;caret-color:var(--ninja-accent-color);color:var(--ninja-text-color);outline:0}.breadcrumb-list{padding:1em 4em 0 1em;display:flex;flex-direction:row;align-items:stretch;justify-content:flex-start;flex:initial}.breadcrumb{background:var(--ninja-secondary-background-color);text-align:center;line-height:1.2em;border-radius:var(--ninja-key-border-radius);border:0;cursor:pointer;padding:.1em .5em;color:var(--ninja-secondary-text-color);margin-right:.5em}.search-wrapper{display:flex;border-bottom:var(--ninja-separate-border)}`,Qt([Y()],Yt.prototype,"placeholder",void 0),Qt([Y({type:Boolean})],Yt.prototype,"hideBreadcrumbs",void 0),Qt([Y()],Yt.prototype,"breadcrumbHome",void 0),Qt([Y({type:Array})],Yt.prototype,"breadcrumbs",void 0),Yt=Qt([X("ninja-header")],Yt),
 /**
@@ -104,3 +104,3 @@ * @license
  * SPDX-License-Identifier: Apache-2.0
- */;let ii=class extends J{render(){return O`<span><slot></slot></span>`}};ii.styles=[ti],ii=
+ */;let ii=class extends J{render(){return E`<span><slot></slot></span>`}};ii.styles=[ti],ii=
 /*! *****************************************************************************
@@ -120,3 +120,3 @@ Copyright (c) Microsoft Corporation.
 ***************************************************************************** */
-function(t,i,e,s){for(var n,o=arguments.length,r=o<3?i:null===s?s=Object.getOwnPropertyDescriptor(i,e):s,l=t.length-1;l>=0;l--)(n=t[l])&&(r=(o<3?n(r):o>3?n(i,e,r):n(i,e))||r);return o>3&&r&&Object.defineProperty(i,e,r),r}([X("mwc-icon")],ii);var ei=function(t,i,e,s){for(var n,o=arguments.length,r=o<3?i:null===s?s=Object.getOwnPropertyDescriptor(i,e):s,l=t.length-1;l>=0;l--)(n=t[l])&&(r=(o<3?n(r):o>3?n(i,e,r):n(i,e))||r);return o>3&&r&&Object.defineProperty(i,e,r),r};let si=class extends J{constructor(){super(),this.selected=!1,this.addEventListener("click",this.click)}ensureInView(){requestAnimationFrame((()=>this.scrollIntoView({block:"nearest"})))}click(){this.dispatchEvent(new CustomEvent("actionsSelected",{detail:this.action,bubbles:!0,composed:!0}))}updated(t){t.has("selected")&&this.selected&&this.ensureInView()}render(){const t=this.action.icon?O`<mwc-icon class="ninja-icon">${this.action.icon}</mwc-icon>`:O`<div class="ninja-icon"></div>`,i=this.action.hotkey?O`<div class="ninja-hotkey">${this.action.hotkey}</div>`:"",e={selected:this.selected,"ninja-action":!0};return O`<slot class="ninja-action" class="${Bt(e)}">${t}<div class="ninja-title">${this.action.title}</div>${i}</slot>`}};si.styles=n`:host{display:flex}.ninja-action{padding:12px 16px;display:flex;border-left:2px solid rgb(110,121,214,0);align-items:center;justify-content:start;font-size:13px;outline:0;transition:color 0s ease 0s}.ninja-action.selected{cursor:pointer;background-color:#f8f9fb;border-left:2px solid #6e79d6;outline:0}slot{display:flex;width:100%}.ninja-icon{font-size:20px;margin-right:16px;color:#6b6f76;margin-right:16px;width:20px;height:20px;position:relative}.ninja-title{flex-shrink:.01;margin-right:8px;flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ninja-hotkeys{margin-left:8px;flex-shrink:0;width:min-content}.ninja-hotkey{background:#eff1f4;padding:1px 4px;border-radius:3px;min-width:20px;text-transform:capitalize;color:#3c4149;font-size:12px}`,ei([Y({type:Object})],si.prototype,"action",void 0),ei([Y({type:Boolean})],si.prototype,"selected",void 0),si=ei([X("ninja-action")],si);
+function(t,i,e,s){for(var n,o=arguments.length,r=o<3?i:null===s?s=Object.getOwnPropertyDescriptor(i,e):s,a=t.length-1;a>=0;a--)(n=t[a])&&(r=(o<3?n(r):o>3?n(i,e,r):n(i,e))||r);return o>3&&r&&Object.defineProperty(i,e,r),r}([X("mwc-icon")],ii);var ei=function(t,i,e,s){for(var n,o=arguments.length,r=o<3?i:null===s?s=Object.getOwnPropertyDescriptor(i,e):s,a=t.length-1;a>=0;a--)(n=t[a])&&(r=(o<3?n(r):o>3?n(i,e,r):n(i,e))||r);return o>3&&r&&Object.defineProperty(i,e,r),r};let si=class extends J{constructor(){super(),this.selected=!1,this.addEventListener("click",this.click)}ensureInView(){requestAnimationFrame((()=>this.scrollIntoView({block:"nearest"})))}click(){this.dispatchEvent(new CustomEvent("actionsSelected",{detail:this.action,bubbles:!0,composed:!0}))}updated(t){t.has("selected")&&this.selected&&this.ensureInView()}render(){const t=this.action.icon?E`<mwc-icon class="ninja-icon">${this.action.icon}</mwc-icon>`:E`<div class="ninja-icon"></div>`,i=this.action.hotkey?E`<div class="ninja-hotkey">${this.action.hotkey}</div>`:"",e={selected:this.selected,"ninja-action":!0};return E`<slot class="ninja-action" class="${Lt(e)}">${t}<div class="ninja-title">${this.action.title}</div>${i}</slot>`}};si.styles=n`:host{display:flex}.ninja-action{padding:.75em 1em;display:flex;border-left:2px solid transparent;align-items:center;justify-content:start;outline:0;transition:color 0s ease 0s}.ninja-action.selected{cursor:pointer;color:var(--ninja-selected-text-color);background-color:var(--ninja-selected-background);border-left:2px solid var(--ninja-accent-color);outline:0}.ninja-action.selected .ninja-icon{color:var(--ninja-selected-text-color)}slot{display:flex;width:100%}.ninja-icon{font-size:1.2em;margin-right:1em;color:var(--ninja-icon-color);margin-right:1em;position:relative}.ninja-title{flex-shrink:.01;margin-right:.5em;flex-grow:1;font-size:.8125em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ninja-hotkeys{margin-left:.5em;flex-shrink:0;width:min-content}.ninja-hotkey{background:var(--ninja-secondary-background-color);padding:.06em .25em;border-radius:var(--ninja-key-border-radius);min-width:1.2em;text-transform:capitalize;color:var(--ninja-secondary-text-color);font-size:.75em}`,ei([Y({type:Object})],si.prototype,"action",void 0),ei([Y({type:Boolean})],si.prototype,"selected",void 0),si=ei([X("ninja-action")],si);
 /**
@@ -127,2 +127,2 @@ * @license
  */
-const ni=ot(class extends rt{constructor(t){if(super(t),t.type!==st&&t.type!==it&&t.type!==nt)throw Error("The `live` directive is not allowed on child or event bindings");if(!ht(t))throw Error("`live` bindings can only contain a single expression")}render(t){return t}update(t,[i]){if(i===z||i===T)return i;const e=t.element,s=t.name;if(t.type===st){if(i===e[s])return z}else if(t.type===nt){if(!!i===e.hasAttribute(s))return z}else if(t.type===it&&e.getAttribute(s)===i+"")return z;return vt(t),i}});var oi=function(t,i,e,s){for(var n,o=arguments.length,r=o<3?i:null===s?s=Object.getOwnPropertyDescriptor(i,e):s,l=t.length-1;l>=0;l--)(n=t[l])&&(r=(o<3?n(r):o>3?n(i,e,r):n(i,e))||r);return o>3&&r&&Object.defineProperty(i,e,r),r};let ri=class extends J{constructor(){super(),this.visible=!1,this.placeholder="Type a command or search...",this.registerHotkeys=!0,this.data=[],this._bump=!0,this._actionMatches=[],this._search="",this._headerRef=Zt(),Pt("cmd+k",(t=>{t.preventDefault(),this.visible?this.close():this.open()})),Pt("enter",(t=>{this.visible&&(t.preventDefault(),this._actionSelected({detail:this._actionMatches[this._selectedIndex]}))})),Pt("backspace",(t=>{this.visible&&(this._search||(t.preventDefault(),this._goBack()))})),Pt("down,tab",(t=>{this.visible&&(t.preventDefault(),this._selectedIndex>=this._actionMatches.length-1?this._selected=this._actionMatches[0]:this._selected=this._actionMatches[this._selectedIndex+1])})),Pt("up,shift+tab",(t=>{this.visible&&(t.preventDefault(),0===this._selectedIndex?this._selected=this._actionMatches[this._actionMatches.length-1]:this._selected=this._actionMatches[this._selectedIndex-1])})),Pt("esc",(()=>{this.visible&&this.close()}))}get breadcrumbs(){var t;const i=[];let e=null===(t=this._selected)||void 0===t?void 0:t.parent;if(e)for(i.push(e);e;){const t=this.data.find((t=>t.id===e));(null==t?void 0:t.parent)&&i.push(t.parent),e=t?t.parent:void 0}return i.reverse()}open(){this._bump=!0,this.visible=!0,this._headerRef.value.focusSearch()}close(){this._bump=!1,this.visible=!1}setParent(t){this._currentRoot=t||void 0}update(t){t.has("data")&&(console.log("Data changed",this.data),this.data.filter((t=>!!t.hotkey)).forEach((t=>{Pt(t.hotkey,(i=>{i.preventDefault(),t.handler&&t.handler()}))}))),super.update(t)}actionFocused(t,i){this._selected=t,i.target.ensureInView()}_onTransitionEnd(){this._bump=!1}_goBack(){const t=this.breadcrumbs.length>1?this.breadcrumbs[this.breadcrumbs.length-2]:void 0;this.setParent(t)}render(){const t={bump:this._bump,"modal-content":!0},i={visible:this.visible,modal:!0};this._actionMatches=this.data.filter((t=>(!this._currentRoot&&this._search||t.parent===this._currentRoot)&&t.title.match(new RegExp(this._search,"gi")))),this._actionMatches.length>0&&-1===this._selectedIndex&&(this._selected=this._actionMatches[0]),0===this._actionMatches.length&&(this._selected=void 0);const e=this._actionMatches.reduce(((t,i)=>t.set(i.section,[...t.get(i.section)||[],i])),new Map),s=t=>O`${mt(t,(t=>t.id),(t=>{var i;return O`<ninja-action .selected="${ni(t.id===(null===(i=this._selected)||void 0===i?void 0:i.id))}" @mouseover="${i=>this.actionFocused(t,i)}" @actionsSelected="${this._actionSelected}" .action="${t}"></ninja-action>`}))}`,n=[];return e.forEach(((t,i)=>{const e=i?O`<div class="group-header">${i}</div>`:void 0;n.push(O`${e}${s(t)}`)})),O`<div id="ninja-keys" @click="${this._overlayClick}" class="${Bt(i)}"><div class="${Bt(t)}" @animationend="${this._onTransitionEnd}"><ninja-header ${Xt(this._headerRef)} .placeholder="${this.placeholder}" .breadcrumbs="${this.breadcrumbs}" @change="${this._handleInput}" @setParent="${t=>this.setParent(t.detail.parent)}" @close="${this.close}"></ninja-header><div class="modal-body"><div class="actions-list">${n}</div></div></div></div>`}get _selectedIndex(){return this._selected?this._actionMatches.indexOf(this._selected):-1}_actionSelected(t){var i;if(t.detail.children&&(null===(i=t.detail.children)||void 0===i?void 0:i.length)>0&&(this._currentRoot=t.detail.id,this._search=""),this._headerRef.value.setSearch(""),this._headerRef.value.focusSearch(),t.detail.handler){const i=t.detail.handler();(null==i?void 0:i.keepOpen)||this.close()}this._bump=!0}_handleInput(t){this._search=t.detail.search}_overlayClick(t){var i;"ninja-keys"===(null===(i=t.target)||void 0===i?void 0:i.id)&&this.close()}};ri.styles=n`:host{font-family:var(--ninja-keys-font-family,Inter);--ninja-keys-text-color:rgb(60, 65, 73);text-align:left}.modal{display:none;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background:rgba(255,255,255,.5);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;backdrop-filter:saturate(180%) blur(2px)}.modal.visible{display:block}.modal-content{position:relative;top:20%;margin:auto;padding:0;display:flex;flex-direction:column;flex-shrink:1;-webkit-box-flex:1;flex-grow:1;min-width:0;will-change:transform;background:linear-gradient(136.61deg,#fff 13.72%,#fff 74.3%);border-radius:8px;box-shadow:rgb(0 0 0 / 50%) 0 16px 70px;max-width:640px;font-size:14px;color:var(--ninja-keys-text-color);overflow:hidden}.bump{animation:zoom-in-zoom-out .2s ease}@keyframes zoom-in-zoom-out{0%{transform:scale(.99)}50%{transform:scale(1.01,1.01)}100%{transform:scale(1,1)}}.ninja-github{color:var(--ninja-keys-text-color);font-weight:400;text-decoration:none}.actions-list{max-height:300px;overflow:auto;scroll-behavior:smooth;position:relative;margin:0;padding:16px 0;list-style:none;scroll-behavior:smooth}.group-header{height:22px;line-height:22px;padding-left:20px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:12px;color:#90959d;margin:1px 0}`,oi([Y({type:Boolean})],ri.prototype,"visible",void 0),oi([Y({type:String})],ri.prototype,"placeholder",void 0),oi([Y({type:Boolean})],ri.prototype,"registerHotkeys",void 0),oi([Y({type:Array})],ri.prototype,"data",void 0),oi([tt()],ri.prototype,"_bump",void 0),oi([tt()],ri.prototype,"_actionMatches",void 0),oi([tt()],ri.prototype,"_search",void 0),oi([tt()],ri.prototype,"_currentRoot",void 0),oi([tt()],ri.prototype,"breadcrumbs",null),oi([tt()],ri.prototype,"_selected",void 0),ri=oi([X("ninja-keys")],ri);export{ri as NinjaKeys};
+const ni=ot(class extends rt{constructor(t){if(super(t),t.type!==st&&t.type!==it&&t.type!==nt)throw Error("The `live` directive is not allowed on child or event bindings");if(!lt(t))throw Error("`live` bindings can only contain a single expression")}render(t){return t}update(t,[i]){if(i===O||i===T)return i;const e=t.element,s=t.name;if(t.type===st){if(i===e[s])return O}else if(t.type===nt){if(!!i===e.hasAttribute(s))return O}else if(t.type===it&&e.getAttribute(s)===i+"")return O;return vt(t),i}});var oi=function(t,i,e,s){for(var n,o=arguments.length,r=o<3?i:null===s?s=Object.getOwnPropertyDescriptor(i,e):s,a=t.length-1;a>=0;a--)(n=t[a])&&(r=(o<3?n(r):o>3?n(i,e,r):n(i,e))||r);return o>3&&r&&Object.defineProperty(i,e,r),r};let ri=class extends J{constructor(){super(...arguments),this.visible=!1,this.placeholder="Type a command or search...",this.disableHotkeys=!1,this.hideBreadcrumbs=!1,this.openHotkey="cmd+k,ctrl+k",this.navigationUpHotkey="up,shift+tab",this.navigationDownHotkey="down,tab",this.closeHotkey="esc",this.goBackHotkey="backspace",this.selectHotkey="enter",this.data=[],this._bump=!0,this._actionMatches=[],this._search="",this._headerRef=Zt()}get breadcrumbs(){var t;const i=[];let e=null===(t=this._selected)||void 0===t?void 0:t.parent;if(e)for(i.push(e);e;){const t=this.data.find((t=>t.id===e));(null==t?void 0:t.parent)&&i.push(t.parent),e=t?t.parent:void 0}return i.reverse()}open(){this._bump=!0,this.visible=!0,this._headerRef.value.focusSearch()}close(){this._bump=!1,this.visible=!1}setParent(t){this._currentRoot=t||void 0,this._search="",this._headerRef.value.setSearch("")}connectedCallback(){super.connectedCallback(),this._registerInternalHotkeys()}update(t){t.has("data")&&!this.disableHotkeys&&this.data.filter((t=>!!t.hotkey)).forEach((t=>{Kt(t.hotkey,(i=>{i.preventDefault(),t.handler&&t.handler()}))})),super.update(t)}_registerInternalHotkeys(){this.openHotkey&&Kt(this.openHotkey,(t=>{t.preventDefault(),this.visible?this.close():this.open()})),this.selectHotkey&&Kt(this.selectHotkey,(t=>{this.visible&&(t.preventDefault(),this._actionSelected({detail:this._actionMatches[this._selectedIndex]}))})),this.goBackHotkey&&Kt(this.goBackHotkey,(t=>{this.visible&&(this._search||(t.preventDefault(),this._goBack()))})),this.navigationDownHotkey&&Kt(this.navigationDownHotkey,(t=>{this.visible&&(t.preventDefault(),this._selectedIndex>=this._actionMatches.length-1?this._selected=this._actionMatches[0]:this._selected=this._actionMatches[this._selectedIndex+1])})),this.navigationUpHotkey&&Kt(this.navigationUpHotkey,(t=>{this.visible&&(t.preventDefault(),0===this._selectedIndex?this._selected=this._actionMatches[this._actionMatches.length-1]:this._selected=this._actionMatches[this._selectedIndex-1])})),this.closeHotkey&&Kt(this.closeHotkey,(()=>{this.visible&&this.close()}))}_actionFocused(t,i){this._selected=t,i.target.ensureInView()}_onTransitionEnd(){this._bump=!1}_goBack(){const t=this.breadcrumbs.length>1?this.breadcrumbs[this.breadcrumbs.length-2]:void 0;this.setParent(t)}render(){const t={bump:this._bump,"modal-content":!0},i={visible:this.visible,modal:!0};this._actionMatches=this.data.filter((t=>(!this._currentRoot&&this._search||t.parent===this._currentRoot)&&t.title.match(new RegExp(this._search,"gi")))),this._actionMatches.length>0&&-1===this._selectedIndex&&(this._selected=this._actionMatches[0]),0===this._actionMatches.length&&(this._selected=void 0);const e=this._actionMatches.reduce(((t,i)=>t.set(i.section,[...t.get(i.section)||[],i])),new Map),s=t=>E`${mt(t,(t=>t.id),(t=>{var i;return E`<ninja-action .selected="${ni(t.id===(null===(i=this._selected)||void 0===i?void 0:i.id))}" @mouseover="${i=>this._actionFocused(t,i)}" @actionsSelected="${this._actionSelected}" .action="${t}"></ninja-action>`}))}`,n=[];return e.forEach(((t,i)=>{const e=i?E`<div class="group-header">${i}</div>`:void 0;n.push(E`${e}${s(t)}`)})),E`<div @click="${this._overlayClick}" class="${Lt(i)}"><div class="${Lt(t)}" @animationend="${this._onTransitionEnd}"><ninja-header ${Xt(this._headerRef)} .placeholder="${this.placeholder}" .hideBreadcrumbs="${this.hideBreadcrumbs}" .breadcrumbs="${this.breadcrumbs}" @change="${this._handleInput}" @setParent="${t=>this.setParent(t.detail.parent)}" @close="${this.close}"></ninja-header><div class="modal-body"><div class="actions-list">${n}</div></div><slot name="footer"><div class="modal-footer" slot="footer"><span class="help"><svg version="1.0" class="ninja-examplekey" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 1280"><path d="M1013 376c0 73.4-.4 113.3-1.1 120.2a159.9 159.9 0 0 1-90.2 127.3c-20 9.6-36.7 14-59.2 15.5-7.1.5-121.9.9-255 1h-242l95.5-95.5 95.5-95.5-38.3-38.2-38.2-38.3-160 160c-88 88-160 160.4-160 161 0 .6 72 73 160 161l160 160 38.2-38.3 38.3-38.2-95.5-95.5-95.5-95.5h251.1c252.9 0 259.8-.1 281.4-3.6 72.1-11.8 136.9-54.1 178.5-116.4 8.6-12.9 22.6-40.5 28-55.4 4.4-12 10.7-36.1 13.1-50.6 1.6-9.6 1.8-21 2.1-132.8l.4-122.2H1013v110z"/></svg> to select </span><span class="help"><svg xmlns="http://www.w3.org/2000/svg" class="ninja-examplekey" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" class="ninja-examplekey" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg> to navigate </span><span class="help"><span class="ninja-examplekey esc">esc</span> to close </span><span class="help"><svg xmlns="http://www.w3.org/2000/svg" class="ninja-examplekey" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"/></svg> move to parent</span></div></slot></div></div>`}get _selectedIndex(){return this._selected?this._actionMatches.indexOf(this._selected):-1}_actionSelected(t){var i;if(t.detail.children&&(null===(i=t.detail.children)||void 0===i?void 0:i.length)>0&&(this._currentRoot=t.detail.id,this._search=""),this._headerRef.value.setSearch(""),this._headerRef.value.focusSearch(),t.detail.handler){const i=t.detail.handler();(null==i?void 0:i.keepOpen)||this.close()}this._bump=!0}_handleInput(t){this._search=t.detail.search}_overlayClick(t){var i;(null===(i=t.target)||void 0===i?void 0:i.classList.contains("modal"))&&this.close()}};ri.styles=n`:host{--ninja-width:640px;--ninja-backdrop-filter:saturate(180%) blur(2px);--ninja-overflow-background:rgba(255, 255, 255, 0.5);--ninja-text-color:rgb(60, 65, 73);--ninja-font-family:'Inter';--ninja-font-size:16px;--ninja-top:20%;--ninja-key-border-radius:0.25em;--ninja-accent-color:rgb(110, 94, 210);--ninja-secondary-background-color:rgb(239, 241, 244);--ninja-secondary-text-color:rgb(107, 111, 118);--ninja-selected-background:rgb(248, 249, 251);--ninja-icon-color:var(--ninja-secondary-text-color);--ninja-separate-border:1px solid var(--ninja-secondary-background-color);--ninja-modal-background:#fff;--ninja-modal-shadow:rgb(0 0 0 / 50%) 0px 16px 70px;--ninja-actions-height:300px;--ninja-group-text-color:rgb(144, 149, 157);--ninja-footer-background:rgba(242, 242, 242, 0.4);font-size:var(--ninja-font-size)}.modal{display:none;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background:var(--ninja-overflow-background);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;backdrop-filter:var(--ninja-backdrop-filter);text-align:left;color:var(--ninja-text-color);font-family:var(--ninja-font-family)}.modal.visible{display:block}.modal-content{position:relative;top:var(--ninja-top);margin:auto;padding:0;display:flex;flex-direction:column;flex-shrink:1;-webkit-box-flex:1;flex-grow:1;min-width:0;will-change:transform;background:var(--ninja-modal-background);border-radius:.5em;box-shadow:var(--ninja-modal-shadow);max-width:var(--ninja-width);overflow:hidden}.bump{animation:zoom-in-zoom-out .2s ease}@keyframes zoom-in-zoom-out{0%{transform:scale(.99)}50%{transform:scale(1.01,1.01)}100%{transform:scale(1,1)}}.ninja-github{color:var(--ninja-keys-text-color);font-weight:400;text-decoration:none}.actions-list{max-height:var(--ninja-actions-height);overflow:auto;scroll-behavior:smooth;position:relative;margin:0;padding:.5em 0;list-style:none;scroll-behavior:smooth}.group-header{height:1.375em;line-height:1.375em;padding-left:1.25em;padding-top:.5em;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:.75em;line-height:1em;color:var(--ninja-group-text-color);margin:1px 0}.modal-footer{background:var(--ninja-footer-background);padding:.5em 1em;display:flex;border-top:var(--ninja-separate-border);color:var(--ninja-secondary-text-color)}.modal-footer .help{display:flex;margin-right:1em;align-items:center;font-size:.75em}.ninja-examplekey{background:var(--ninja-secondary-background-color);padding:.06em .25em;border-radius:var(--ninja-key-border-radius);color:var(--ninja-secondary-text-color);width:1em;height:1em;margin-right:.5em;font-size:1.25em;fill:currentColor}.ninja-examplekey.esc{width:auto;height:auto;font-size:1.1em}`,oi([Y({type:Boolean})],ri.prototype,"visible",void 0),oi([Y({type:String})],ri.prototype,"placeholder",void 0),oi([Y({type:Boolean})],ri.prototype,"disableHotkeys",void 0),oi([Y({type:Boolean})],ri.prototype,"hideBreadcrumbs",void 0),oi([Y()],ri.prototype,"openHotkey",void 0),oi([Y()],ri.prototype,"navigationUpHotkey",void 0),oi([Y()],ri.prototype,"navigationDownHotkey",void 0),oi([Y()],ri.prototype,"closeHotkey",void 0),oi([Y()],ri.prototype,"goBackHotkey",void 0),oi([Y()],ri.prototype,"selectHotkey",void 0),oi([Y({type:Array})],ri.prototype,"data",void 0),oi([tt()],ri.prototype,"_bump",void 0),oi([tt()],ri.prototype,"_actionMatches",void 0),oi([tt()],ri.prototype,"_search",void 0),oi([tt()],ri.prototype,"_currentRoot",void 0),oi([tt()],ri.prototype,"breadcrumbs",null),oi([tt()],ri.prototype,"_selected",void 0),ri=oi([X("ninja-keys")],ri);export{ri as NinjaKeys};

dist/ninja-keys.d.ts

@@ -18,7 +18,38 @@ import { LitElement, TemplateResult, PropertyValues } from 'lit';
      */
-    registerHotkeys: boolean;
+    disableHotkeys: boolean;
     /**
+     * Show or hide breadcrumbs on header
+     */
+    hideBreadcrumbs: boolean;
+    /**
+     * Open or hide shorcut
+     */
+    openHotkey: string;
+    /**
+     * Navigation Up hotkey
+     */
+    navigationUpHotkey: string;
+    /**
+     * Navigation Down hotkey
+     */
+    navigationDownHotkey: string;
+    /**
+     * Close hotkey
+     */
+    closeHotkey: string;
+    /**
+     * Go back on one level if has parent menu
+     */
+    goBackHotkey: string;
+    /**
+     * Select action and execute handler or open submenu
+     */
+    selectHotkey: string;
+    /**
      * Array of actions
      */
     data: INinjaAction[];
+    /**
+     * Temproray used for animation effect. TODO: change to animate logic
+     */
     private _bump;
@@ -30,8 +61,15 @@ private _actionMatches;
     private _selected?;
+    /**
+     * Show a modal
+     */
     open(): void;
+    /**
+     * Close modal
+     */
     close(): void;
     setParent(parent?: string): void;
-    constructor();
+    connectedCallback(): void;
     update(changedProperties: PropertyValues<this>): void;
-    private actionFocused;
+    private _registerInternalHotkeys;
+    private _actionFocused;
     private _onTransitionEnd;
@@ -38,0 +76,0 @@ private _goBack;

dist/ninja-keys.js

@@ -18,3 +18,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     constructor() {
-        super();
+        super(...arguments);
         /**
@@ -31,7 +31,38 @@ * Show or hide element
          */
-        this.registerHotkeys = true;
+        this.disableHotkeys = false;
         /**
+         * Show or hide breadcrumbs on header
+         */
+        this.hideBreadcrumbs = false;
+        /**
+         * Open or hide shorcut
+         */
+        this.openHotkey = 'cmd+k,ctrl+k';
+        /**
+         * Navigation Up hotkey
+         */
+        this.navigationUpHotkey = 'up,shift+tab';
+        /**
+         * Navigation Down hotkey
+         */
+        this.navigationDownHotkey = 'down,tab';
+        /**
+         * Close hotkey
+         */
+        this.closeHotkey = 'esc';
+        /**
+         * Go back on one level if has parent menu
+         */
+        this.goBackHotkey = 'backspace';
+        /**
+         * Select action and execute handler or open submenu
+         */
+        this.selectHotkey = 'enter'; // enter,space
+        /**
          * Array of actions
          */
         this.data = [];
+        /**
+         * Temproray used for animation effect. TODO: change to animate logic
+         */
         this._bump = true;
@@ -41,52 +72,2 @@ this._actionMatches = [];
         this._headerRef = createRef();
-        hotkeys('cmd+k', (event) => {
-            event.preventDefault();
-            this.visible ? this.close() : this.open();
-        });
-        hotkeys('enter', (event) => {
-            if (!this.visible) {
-                return;
-            }
-            event.preventDefault();
-            this._actionSelected({ detail: this._actionMatches[this._selectedIndex] });
-        });
-        hotkeys('backspace', (event) => {
-            if (!this.visible) {
-                return;
-            }
-            if (!this._search) {
-                event.preventDefault();
-                this._goBack();
-            }
-        });
-        hotkeys('down,tab', (event) => {
-            if (!this.visible) {
-                return;
-            }
-            event.preventDefault();
-            if (this._selectedIndex >= this._actionMatches.length - 1) {
-                this._selected = this._actionMatches[0];
-            }
-            else {
-                this._selected = this._actionMatches[this._selectedIndex + 1];
-            }
-        });
-        hotkeys('up,shift+tab', (event) => {
-            if (!this.visible) {
-                return;
-            }
-            event.preventDefault();
-            if (this._selectedIndex === 0) {
-                this._selected = this._actionMatches[this._actionMatches.length - 1];
-            }
-            else {
-                this._selected = this._actionMatches[this._selectedIndex - 1];
-            }
-        });
-        hotkeys('esc', () => {
-            if (!this.visible) {
-                return;
-            }
-            this.close();
-        });
     }
@@ -109,2 +90,5 @@ get breadcrumbs() {
     }
+    /**
+     * Show a modal
+     */
     open() {
@@ -115,2 +99,5 @@ this._bump = true;
     }
+    /**
+     * Close modal
+     */
     close() {
@@ -128,6 +115,11 @@ this._bump = false;
         }
+        this._search = '';
+        this._headerRef.value.setSearch('');
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this._registerInternalHotkeys();
+    }
     update(changedProperties) {
-        if (changedProperties.has('data')) {
-            console.log('Data changed', this.data);
+        if (changedProperties.has('data') && !this.disableHotkeys) {
             this.data
@@ -146,3 +138,69 @@ .filter((action) => !!action.hotkey)
     }
-    actionFocused(index, $event) {
+    _registerInternalHotkeys() {
+        if (this.openHotkey) {
+            hotkeys(this.openHotkey, (event) => {
+                event.preventDefault();
+                this.visible ? this.close() : this.open();
+            });
+        }
+        if (this.selectHotkey) {
+            hotkeys(this.selectHotkey, (event) => {
+                if (!this.visible) {
+                    return;
+                }
+                event.preventDefault();
+                this._actionSelected({
+                    detail: this._actionMatches[this._selectedIndex],
+                });
+            });
+        }
+        if (this.goBackHotkey) {
+            hotkeys(this.goBackHotkey, (event) => {
+                if (!this.visible) {
+                    return;
+                }
+                if (!this._search) {
+                    event.preventDefault();
+                    this._goBack();
+                }
+            });
+        }
+        if (this.navigationDownHotkey) {
+            hotkeys(this.navigationDownHotkey, (event) => {
+                if (!this.visible) {
+                    return;
+                }
+                event.preventDefault();
+                if (this._selectedIndex >= this._actionMatches.length - 1) {
+                    this._selected = this._actionMatches[0];
+                }
+                else {
+                    this._selected = this._actionMatches[this._selectedIndex + 1];
+                }
+            });
+        }
+        if (this.navigationUpHotkey) {
+            hotkeys(this.navigationUpHotkey, (event) => {
+                if (!this.visible) {
+                    return;
+                }
+                event.preventDefault();
+                if (this._selectedIndex === 0) {
+                    this._selected = this._actionMatches[this._actionMatches.length - 1];
+                }
+                else {
+                    this._selected = this._actionMatches[this._selectedIndex - 1];
+                }
+            });
+        }
+        if (this.closeHotkey) {
+            hotkeys(this.closeHotkey, () => {
+                if (!this.visible) {
+                    return;
+                }
+                this.close();
+            });
+        }
+    }
+    _actionFocused(index, $event) {
         // this.selectedIndex = index;
@@ -189,3 +247,3 @@ this._selected = index;
             .selected=${live(action.id === ((_a = this._selected) === null || _a === void 0 ? void 0 : _a.id))}
-            @mouseover=${($event) => this.actionFocused(action, $event)}
+            @mouseover=${($event) => this._actionFocused(action, $event)}
             @actionsSelected=${this._actionSelected}
@@ -203,7 +261,3 @@ .action=${action}
         return html `
-      <div
-        id="ninja-keys"
-        @click=${this._overlayClick}
-        class=${classMap(menuClasses)}
-      >
+      <div @click=${this._overlayClick} class=${classMap(menuClasses)}>
         <div class=${classMap(classes)} @animationend=${this._onTransitionEnd}>
@@ -213,2 +267,3 @@ <ninja-header
             .placeholder=${this.placeholder}
+            .hideBreadcrumbs=${this.hideBreadcrumbs}
             .breadcrumbs=${this.breadcrumbs}
@@ -223,2 +278,62 @@ @change=${this._handleInput}
           </div>
+          <slot name="footer">
+            <div class="modal-footer" slot="footer">
+              <span class="help">
+                <svg
+                  version="1.0"
+                  class="ninja-examplekey"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 1280 1280"
+                >
+                  <path
+                    d="M1013 376c0 73.4-.4 113.3-1.1 120.2a159.9 159.9 0 0 1-90.2 127.3c-20 9.6-36.7 14-59.2 15.5-7.1.5-121.9.9-255 1h-242l95.5-95.5 95.5-95.5-38.3-38.2-38.2-38.3-160 160c-88 88-160 160.4-160 161 0 .6 72 73 160 161l160 160 38.2-38.3 38.3-38.2-95.5-95.5-95.5-95.5h251.1c252.9 0 259.8-.1 281.4-3.6 72.1-11.8 136.9-54.1 178.5-116.4 8.6-12.9 22.6-40.5 28-55.4 4.4-12 10.7-36.1 13.1-50.6 1.6-9.6 1.8-21 2.1-132.8l.4-122.2H1013v110z"
+                  />
+                </svg>
+
+                to select
+              </span>
+              <span class="help">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="ninja-examplekey"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M0 0h24v24H0V0z" fill="none" />
+                  <path
+                    d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                  />
+                </svg>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="ninja-examplekey"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M0 0h24v24H0V0z" fill="none" />
+                  <path
+                    d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"
+                  />
+                </svg>
+                to navigate
+              </span>
+              <span class="help">
+                <span class="ninja-examplekey esc">esc</span>
+                to close
+              </span>
+              <span class="help">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="ninja-examplekey"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z"
+                    clip-rule="evenodd"
+                  />
+                </svg>
+                move to parent
+              </span>
+            </div>
+          </slot>
         </div>
@@ -255,3 +370,3 @@ </div>
         var _a;
-        if (((_a = event.target) === null || _a === void 0 ? void 0 : _a.id) === 'ninja-keys') {
+        if ((_a = event.target) === null || _a === void 0 ? void 0 : _a.classList.contains('modal')) {
             this.close();
@@ -263,5 +378,29 @@ }
     :host {
-      font-family: var(--ninja-keys-font-family, Inter);
-      --ninja-keys-text-color: rgb(60, 65, 73);
-      text-align: left;
+      --ninja-width: 640px;
+      --ninja-backdrop-filter: saturate(180%) blur(2px);
+      --ninja-overflow-background: rgba(255, 255, 255, 0.5);
+      --ninja-text-color: rgb(60, 65, 73);
+      --ninja-font-family: 'Inter';
+      --ninja-font-size: 16px;
+      --ninja-top: 20%;
+
+      --ninja-key-border-radius: 0.25em;
+      --ninja-accent-color: rgb(110, 94, 210);
+      --ninja-secondary-background-color: rgb(239, 241, 244);
+      --ninja-secondary-text-color: rgb(107, 111, 118);
+
+      --ninja-selected-background: rgb(248, 249, 251);
+
+      --ninja-icon-color: var(--ninja-secondary-text-color);
+      --ninja-separate-border: 1px solid var(--ninja-secondary-background-color);
+
+      --ninja-modal-background: #fff;
+      --ninja-modal-shadow: rgb(0 0 0 / 50%) 0px 16px 70px;
+
+      --ninja-actions-height: 300px;
+      --ninja-group-text-color: rgb(144, 149, 157);
+
+      --ninja-footer-background: rgba(242, 242, 242, 0.4);
+
+      font-size: var(--ninja-font-size);
     }
@@ -278,8 +417,9 @@
       overflow: auto;
-      background: rgba(255, 255, 255, 0.5);
+      background: var(--ninja-overflow-background);
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
-      backdrop-filter: saturate(180%) blur(2px);
-      /* font-family: var(--font-sans); */
-      /* backdrop-filter: blur(2px); */
+      backdrop-filter: var(--ninja-backdrop-filter);
+      text-align: left;
+      color: var(--ninja-text-color);
+      font-family: var(--ninja-font-family);
     }
@@ -290,9 +430,7 @@ .modal.visible {
 
-    /* Modal Content */
     .modal-content {
       position: relative;
-      top: 20%;
+      top: var(--ninja-top);
       margin: auto;
       padding: 0;
-
       display: flex;
@@ -305,12 +443,6 @@ flex-direction: column;
       will-change: transform;
-      background: linear-gradient(
-        136.61deg,
-        rgb(255, 255, 255) 13.72%,
-        rgb(255, 255, 255) 74.3%
-      );
-      border-radius: 8px;
-      box-shadow: rgb(0 0 0 / 50%) 0px 16px 70px;
-      max-width: 640px;
-      font-size: 14px;
-      color: var(--ninja-keys-text-color);
+      background: var(--ninja-modal-background);
+      border-radius: 0.5em;
+      box-shadow: var(--ninja-modal-shadow);
+      max-width: var(--ninja-width);
       overflow: hidden;
@@ -342,3 +474,3 @@ }
     .actions-list {
-      max-height: 300px;
+      max-height: var(--ninja-actions-height);
       overflow: auto;
@@ -348,3 +480,3 @@ scroll-behavior: smooth;
       margin: 0;
-      padding: 16px 0;
+      padding: 0.5em 0;
       list-style: none;
@@ -355,12 +487,47 @@ scroll-behavior: smooth;
     .group-header {
-      height: 22px;
-      line-height: 22px;
-      padding-left: 20px;
+      height: 1.375em;
+      line-height: 1.375em;
+      padding-left: 1.25em;
+      padding-top: 0.5em;
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;
-      font-size: 12px;
-      color: rgb(144, 149, 157);
+      font-size: 0.75em;
+      line-height: 1em;
+      color: var(--ninja-group-text-color);
       margin: 1px 0;
     }
+
+    .modal-footer {
+      background: var(--ninja-footer-background);
+      padding: 0.5em 1em;
+      display: flex;
+      /* font-size: 0.75em; */
+      border-top: var(--ninja-separate-border);
+      color: var(--ninja-secondary-text-color);
+    }
+
+    .modal-footer .help {
+      display: flex;
+      margin-right: 1em;
+      align-items: center;
+      font-size: 0.75em;
+    }
+
+    .ninja-examplekey {
+      background: var(--ninja-secondary-background-color);
+      padding: 0.06em 0.25em;
+      border-radius: var(--ninja-key-border-radius);
+      color: var(--ninja-secondary-text-color);
+      width: 1em;
+      height: 1em;
+      margin-right: 0.5em;
+      font-size: 1.25em;
+      fill: currentColor;
+    }
+    .ninja-examplekey.esc {
+      width: auto;
+      height: auto;
+      font-size: 1.1em;
+    }
   `;
@@ -375,4 +542,25 @@ __decorate([
     property({ type: Boolean })
-], NinjaKeys.prototype, "registerHotkeys", void 0);
+], NinjaKeys.prototype, "disableHotkeys", void 0);
 __decorate([
+    property({ type: Boolean })
+], NinjaKeys.prototype, "hideBreadcrumbs", void 0);
+__decorate([
+    property()
+], NinjaKeys.prototype, "openHotkey", void 0);
+__decorate([
+    property()
+], NinjaKeys.prototype, "navigationUpHotkey", void 0);
+__decorate([
+    property()
+], NinjaKeys.prototype, "navigationDownHotkey", void 0);
+__decorate([
+    property()
+], NinjaKeys.prototype, "closeHotkey", void 0);
+__decorate([
+    property()
+], NinjaKeys.prototype, "goBackHotkey", void 0);
+__decorate([
+    property()
+], NinjaKeys.prototype, "selectHotkey", void 0);
+__decorate([
     property({ type: Array })
@@ -379,0 +567,0 @@ ], NinjaKeys.prototype, "data", void 0);

package.json

 {
   "name": "ninja-keys",
-  "version": "1.0.0-beta",
+  "version": "1.0.0-beta.2",
   "description": "Ninja Keys",
@@ -35,5 +35,4 @@ "main": "dist/ninja-keys.js",
   "scripts": {
-    "prepublish": "npm run bundle",
-    "publish": "clean-publish"
+    "publish": "npm run bundle && clean-publish"
   }
 }

README.md

 # Ninja Keys
 
-Keyboard shorcuts interface for your website. Working with static HTML, Vanila JS, Vue, React.
+Keyboard shortcuts interface for your website. Working with static HTML, Vanilla JS, Vue, React.
 
@@ -9,2 +9,8 @@ 🚧 **Work in progress.** That's first shot for me using [Web Components](https://open-wc.org/) and [Lit Element](https://lit.dev/).
 
+## Demo
+
+![Demo](./docs/demo-min.gif)
+
+[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fssleptsov%2Fninja-keys.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fssleptsov%2Fninja-keys?ref=badge_shield)
+
 ## Usage in plain HTML
@@ -119,1 +125,9 @@
 [Prettier](https://prettier.io/) is used for code formatting. It has been pre-configured according to the Lit's style.
+
+## License
+
+Copyright (c) [Sergei Sleptsov](https://sergei.ws) <[e-mail]>
+
+Licensed under [the MIT license](./LICENSE).
+
+[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fssleptsov%2Fninja-keys.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fssleptsov%2Fninja-keys?ref=badge_large)

src/ninja-action.ts

@@ -14,8 +14,7 @@ import {LitElement, html, css} from 'lit';
     .ninja-action {
-      padding: 12px 16px;
+      padding: 0.75em 1em;
       display: flex;
-      border-left: 2px solid rgb(110, 121, 214, 0);
+      border-left: 2px solid transparent;
       align-items: center;
       justify-content: start;
-      font-size: 13px;
       outline: none;
@@ -26,6 +25,10 @@ transition: color 0s ease 0s;
       cursor: pointer;
-      background-color: rgb(248, 249, 251);
-      border-left: 2px solid rgb(110, 121, 214);
+      color: var(--ninja-selected-text-color);
+      background-color: var(--ninja-selected-background);
+      border-left: 2px solid var(--ninja-accent-color);
       outline: none;
     }
+    .ninja-action.selected .ninja-icon {
+      color: var(--ninja-selected-text-color);
+    }
     slot {
@@ -36,14 +39,14 @@ display: flex;
     .ninja-icon {
-      font-size: 20px;
-      margin-right: 16px;
-      color: rgb(107, 111, 118);
-      margin-right: 16px;
-      width: 20px;
-      height: 20px;
+      font-size: 1.2em;
+      margin-right: 1em;
+      color: var(--ninja-icon-color);
+      margin-right: 1em;
       position: relative;
     }
+
     .ninja-title {
       flex-shrink: 0.01;
-      margin-right: 8px;
+      margin-right: 0.5em;
       flex-grow: 1;
+      font-size: 0.8125em;
       white-space: nowrap;
@@ -54,3 +57,3 @@ overflow: hidden;
     .ninja-hotkeys {
-      margin-left: 8px;
+      margin-left: 0.5em;
       flex-shrink: 0;
@@ -61,9 +64,9 @@ width: min-content;
     .ninja-hotkey {
-      background: rgb(239, 241, 244);
-      padding: 1px 4px;
-      border-radius: 3px;
-      min-width: 20px;
+      background: var(--ninja-secondary-background-color);
+      padding: 0.06em 0.25em;
+      border-radius: var(--ninja-key-border-radius);
+      min-width: 1.2em;
       text-transform: capitalize;
-      color: rgb(60, 65, 73);
-      font-size: 12px;
+      color: var(--ninja-secondary-text-color);
+      font-size: 0.75em;
     }
@@ -70,0 +73,0 @@ `;

src/ninja-header.ts

@@ -1,2 +0,2 @@
-import {LitElement, html, css} from 'lit';
+import {LitElement, html, css, TemplateResult} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
@@ -13,3 +13,3 @@ import {ref, createRef} from 'lit/directives/ref.js';
     .search {
-      padding: 20px;
+      padding: 1.25em;
       flex-grow: 1;
@@ -20,28 +20,10 @@ flex-shrink: 0;
       appearance: none;
-      font-size: 18px;
+      font-size: 1.125em;
       background: transparent;
-      color: rgb(60, 65, 73);
-      caret-color: rgb(110, 94, 210);
+      caret-color: var(--ninja-accent-color);
+      color: var(--ninja-text-color);
       outline: none;
     }
-    .close {
-      border: none;
-      background: rgb(239, 241, 244);
-      padding: 4px;
-      border-radius: 3px;
-      min-width: 20px;
-      color: rgb(60, 65, 73);
-      position: absolute;
-      right: 16px;
-      top: 16px;
-      font-size: 12px;
-    }
-
-    .close:hover,
-    .close:focus {
-      text-decoration: none;
-      cursor: pointer;
-    }
     .breadcrumb-list {
-      padding: 16px 64px 0px 16px;
+      padding: 1em 4em 0 1em;
       display: flex;
@@ -55,13 +37,11 @@ flex-direction: row;
     .breadcrumb {
-      background: rgb(239, 241, 244);
-      height: 20px;
+      background: var(--ninja-secondary-background-color);
       text-align: center;
-      line-height: 20px;
-      border-radius: 4px;
+      line-height: 1.2em;
+      border-radius: var(--ninja-key-border-radius);
       border: 0;
       cursor: pointer;
-      font-size: 12px;
-      padding: 0 8px;
-      color: rgb(107, 111, 118);
-      margin-right: 8px;
+      padding: 0.1em 0.5em;
+      color: var(--ninja-secondary-text-color);
+      margin-right: 0.5em;
     }
@@ -71,3 +51,3 @@
       display: flex;
-      border-bottom: 1px solid rgb(239, 241, 244);
+      border-bottom: var(--ninja-separate-border);
     }
@@ -79,2 +59,5 @@ `;
 
+  @property({type: Boolean})
+  hideBreadcrumbs = false;
+
   @property()
@@ -89,22 +72,25 @@ breadcrumbHome = 'Home';
   override render() {
-    const itemTemplates = [];
-    for (const breadcrumb of this.breadcrumbs) {
-      itemTemplates.push(
-        html`<button
-          @click=${() => this.selectParent(breadcrumb)}
-          class="breadcrumb"
-        >
-          ${breadcrumb}
-        </button>`
-      );
+    let breadcrumbs: TemplateResult<1> | '' = '';
+    if (!this.hideBreadcrumbs) {
+      const itemTemplates = [];
+      for (const breadcrumb of this.breadcrumbs) {
+        itemTemplates.push(
+          html`<button tabindex="-1"
+            @click=${() => this.selectParent(breadcrumb)}
+            class="breadcrumb"
+          >
+            ${breadcrumb}
+          </button>`
+        );
+      }
+      breadcrumbs = html`<div class="breadcrumb-list">
+        <button tabindex="-1" @click=${() => this.selectParent()} class="breadcrumb">
+          ${this.breadcrumbHome}
+        </button>
+        ${itemTemplates}
+      </div>`;
     }
 
     return html`
-      <button class="close" @click=${this._close}>esc</button>
-      <div class="breadcrumb-list">
-        <button @click=${() => this.selectParent()} class="breadcrumb">
-          ${this.breadcrumbHome}
-        </button>
-        ${itemTemplates}
-      </div>
+      ${breadcrumbs}
       <div class="search-wrapper">
@@ -111,0 +97,0 @@ <input

src/ninja-keys.ts

@@ -18,5 +18,29 @@ import {LitElement, html, css, TemplateResult, PropertyValues} from 'lit';
     :host {
-      font-family: var(--ninja-keys-font-family, Inter);
-      --ninja-keys-text-color: rgb(60, 65, 73);
-      text-align: left;
+      --ninja-width: 640px;
+      --ninja-backdrop-filter: saturate(180%) blur(2px);
+      --ninja-overflow-background: rgba(255, 255, 255, 0.5);
+      --ninja-text-color: rgb(60, 65, 73);
+      --ninja-font-family: 'Inter';
+      --ninja-font-size: 16px;
+      --ninja-top: 20%;
+
+      --ninja-key-border-radius: 0.25em;
+      --ninja-accent-color: rgb(110, 94, 210);
+      --ninja-secondary-background-color: rgb(239, 241, 244);
+      --ninja-secondary-text-color: rgb(107, 111, 118);
+
+      --ninja-selected-background: rgb(248, 249, 251);
+
+      --ninja-icon-color: var(--ninja-secondary-text-color);
+      --ninja-separate-border: 1px solid var(--ninja-secondary-background-color);
+
+      --ninja-modal-background: #fff;
+      --ninja-modal-shadow: rgb(0 0 0 / 50%) 0px 16px 70px;
+
+      --ninja-actions-height: 300px;
+      --ninja-group-text-color: rgb(144, 149, 157);
+
+      --ninja-footer-background: rgba(242, 242, 242, 0.4);
+
+      font-size: var(--ninja-font-size);
     }
@@ -33,8 +57,9 @@
       overflow: auto;
-      background: rgba(255, 255, 255, 0.5);
+      background: var(--ninja-overflow-background);
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
-      backdrop-filter: saturate(180%) blur(2px);
-      /* font-family: var(--font-sans); */
-      /* backdrop-filter: blur(2px); */
+      backdrop-filter: var(--ninja-backdrop-filter);
+      text-align: left;
+      color: var(--ninja-text-color);
+      font-family: var(--ninja-font-family);
     }
@@ -45,9 +70,7 @@ .modal.visible {
 
-    /* Modal Content */
     .modal-content {
       position: relative;
-      top: 20%;
+      top: var(--ninja-top);
       margin: auto;
       padding: 0;
-
       display: flex;
@@ -60,12 +83,6 @@ flex-direction: column;
       will-change: transform;
-      background: linear-gradient(
-        136.61deg,
-        rgb(255, 255, 255) 13.72%,
-        rgb(255, 255, 255) 74.3%
-      );
-      border-radius: 8px;
-      box-shadow: rgb(0 0 0 / 50%) 0px 16px 70px;
-      max-width: 640px;
-      font-size: 14px;
-      color: var(--ninja-keys-text-color);
+      background: var(--ninja-modal-background);
+      border-radius: 0.5em;
+      box-shadow: var(--ninja-modal-shadow);
+      max-width: var(--ninja-width);
       overflow: hidden;
@@ -97,3 +114,3 @@ }
     .actions-list {
-      max-height: 300px;
+      max-height: var(--ninja-actions-height);
       overflow: auto;
@@ -103,3 +120,3 @@ scroll-behavior: smooth;
       margin: 0;
-      padding: 16px 0;
+      padding: 0.5em 0;
       list-style: none;
@@ -110,12 +127,47 @@ scroll-behavior: smooth;
     .group-header {
-      height: 22px;
-      line-height: 22px;
-      padding-left: 20px;
+      height: 1.375em;
+      line-height: 1.375em;
+      padding-left: 1.25em;
+      padding-top: 0.5em;
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;
-      font-size: 12px;
-      color: rgb(144, 149, 157);
+      font-size: 0.75em;
+      line-height: 1em;
+      color: var(--ninja-group-text-color);
       margin: 1px 0;
     }
+
+    .modal-footer {
+      background: var(--ninja-footer-background);
+      padding: 0.5em 1em;
+      display: flex;
+      /* font-size: 0.75em; */
+      border-top: var(--ninja-separate-border);
+      color: var(--ninja-secondary-text-color);
+    }
+
+    .modal-footer .help {
+      display: flex;
+      margin-right: 1em;
+      align-items: center;
+      font-size: 0.75em;
+    }
+
+    .ninja-examplekey {
+      background: var(--ninja-secondary-background-color);
+      padding: 0.06em 0.25em;
+      border-radius: var(--ninja-key-border-radius);
+      color: var(--ninja-secondary-text-color);
+      width: 1em;
+      height: 1em;
+      margin-right: 0.5em;
+      font-size: 1.25em;
+      fill: currentColor;
+    }
+    .ninja-examplekey.esc {
+      width: auto;
+      height: auto;
+      font-size: 1.1em;
+    }
   `;
@@ -139,5 +191,47 @@
   @property({type: Boolean})
-  registerHotkeys = true;
+  disableHotkeys = false;
 
   /**
+   * Show or hide breadcrumbs on header
+   */
+  @property({type: Boolean})
+  hideBreadcrumbs = false;
+
+  /**
+   * Open or hide shorcut
+   */
+  @property()
+  openHotkey = 'cmd+k,ctrl+k';
+
+  /**
+   * Navigation Up hotkey
+   */
+  @property()
+  navigationUpHotkey = 'up,shift+tab';
+
+  /**
+   * Navigation Down hotkey
+   */
+  @property()
+  navigationDownHotkey = 'down,tab';
+
+  /**
+   * Close hotkey
+   */
+  @property()
+  closeHotkey = 'esc';
+
+  /**
+   * Go back on one level if has parent menu
+   */
+  @property()
+  goBackHotkey = 'backspace';
+
+  /**
+   * Select action and execute handler or open submenu
+   */
+  @property()
+  selectHotkey = 'enter'; // enter,space
+
+  /**
    * Array of actions
@@ -148,2 +242,5 @@ */
 
+  /**
+   * Temproray used for animation effect. TODO: change to animate logic
+   */
   @state()
@@ -181,2 +278,5 @@ private _bump = true;
 
+  /**
+   * Show a modal
+   */
   open() {
@@ -188,2 +288,5 @@ this._bump = true;
 
+  /**
+   * Close modal
+   */
   close() {
@@ -201,65 +304,13 @@ this._bump = false;
     }
+    this._search = '';
+    this._headerRef.value!.setSearch('');
   }
 
-  constructor() {
-    super();
-
-    hotkeys('cmd+k', (event) => {
-      event.preventDefault();
-      this.visible ? this.close() : this.open();
-    });
-
-    hotkeys('enter', (event) => {
-      if (!this.visible) {
-        return;
-      }
-      event.preventDefault();
-      this._actionSelected({detail: this._actionMatches[this._selectedIndex]});
-    });
-
-    hotkeys('backspace', (event) => {
-      if (!this.visible) {
-        return;
-      }
-      if (!this._search) {
-        event.preventDefault();
-        this._goBack();
-      }
-    });
-
-    hotkeys('down,tab', (event) => {
-      if (!this.visible) {
-        return;
-      }
-      event.preventDefault();
-      if (this._selectedIndex >= this._actionMatches.length - 1) {
-        this._selected = this._actionMatches[0];
-      } else {
-        this._selected = this._actionMatches[this._selectedIndex + 1];
-      }
-    });
-
-    hotkeys('up,shift+tab', (event) => {
-      if (!this.visible) {
-        return;
-      }
-      event.preventDefault();
-      if (this._selectedIndex === 0) {
-        this._selected = this._actionMatches[this._actionMatches.length - 1];
-      } else {
-        this._selected = this._actionMatches[this._selectedIndex - 1];
-      }
-    });
-
-    hotkeys('esc', () => {
-      if (!this.visible) {
-        return;
-      }
-      this.close();
-    });
+  override connectedCallback() {
+    super.connectedCallback();
+    this._registerInternalHotkeys();
   }
 
   override update(changedProperties: PropertyValues<this>) {
-    if (changedProperties.has('data')) {
-      console.log('Data changed', this.data);
+    if (changedProperties.has('data') && !this.disableHotkeys) {
       this.data
@@ -279,3 +330,73 @@ .filter((action) => !!action.hotkey)
 
-  private actionFocused(index: INinjaAction, $event: MouseEvent) {
+  private _registerInternalHotkeys() {
+    if (this.openHotkey) {
+      hotkeys(this.openHotkey, (event) => {
+        event.preventDefault();
+        this.visible ? this.close() : this.open();
+      });
+    }
+
+    if (this.selectHotkey) {
+      hotkeys(this.selectHotkey, (event) => {
+        if (!this.visible) {
+          return;
+        }
+        event.preventDefault();
+        this._actionSelected({
+          detail: this._actionMatches[this._selectedIndex],
+        });
+      });
+    }
+
+    if (this.goBackHotkey) {
+      hotkeys(this.goBackHotkey, (event) => {
+        if (!this.visible) {
+          return;
+        }
+        if (!this._search) {
+          event.preventDefault();
+          this._goBack();
+        }
+      });
+    }
+
+    if (this.navigationDownHotkey) {
+      hotkeys(this.navigationDownHotkey, (event) => {
+        if (!this.visible) {
+          return;
+        }
+        event.preventDefault();
+        if (this._selectedIndex >= this._actionMatches.length - 1) {
+          this._selected = this._actionMatches[0];
+        } else {
+          this._selected = this._actionMatches[this._selectedIndex + 1];
+        }
+      });
+    }
+
+    if (this.navigationUpHotkey) {
+      hotkeys(this.navigationUpHotkey, (event) => {
+        if (!this.visible) {
+          return;
+        }
+        event.preventDefault();
+        if (this._selectedIndex === 0) {
+          this._selected = this._actionMatches[this._actionMatches.length - 1];
+        } else {
+          this._selected = this._actionMatches[this._selectedIndex - 1];
+        }
+      });
+    }
+
+    if (this.closeHotkey) {
+      hotkeys(this.closeHotkey, () => {
+        if (!this.visible) {
+          return;
+        }
+        this.close();
+      });
+    }
+  }
+
+  private _actionFocused(index: INinjaAction, $event: MouseEvent) {
     // this.selectedIndex = index;
@@ -344,3 +465,3 @@ this._selected = index;
             @mouseover=${($event: MouseEvent) =>
-              this.actionFocused(action, $event)}
+              this._actionFocused(action, $event)}
             @actionsSelected=${this._actionSelected}
@@ -360,7 +481,3 @@ .action=${action}
     return html`
-      <div
-        id="ninja-keys"
-        @click=${this._overlayClick}
-        class=${classMap(menuClasses)}
-      >
+      <div @click=${this._overlayClick} class=${classMap(menuClasses)}>
         <div class=${classMap(classes)} @animationend=${this._onTransitionEnd}>
@@ -370,2 +487,3 @@ <ninja-header
             .placeholder=${this.placeholder}
+            .hideBreadcrumbs=${this.hideBreadcrumbs}
             .breadcrumbs=${this.breadcrumbs}
@@ -381,2 +499,62 @@ @change=${this._handleInput}
           </div>
+          <slot name="footer">
+            <div class="modal-footer" slot="footer">
+              <span class="help">
+                <svg
+                  version="1.0"
+                  class="ninja-examplekey"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 1280 1280"
+                >
+                  <path
+                    d="M1013 376c0 73.4-.4 113.3-1.1 120.2a159.9 159.9 0 0 1-90.2 127.3c-20 9.6-36.7 14-59.2 15.5-7.1.5-121.9.9-255 1h-242l95.5-95.5 95.5-95.5-38.3-38.2-38.2-38.3-160 160c-88 88-160 160.4-160 161 0 .6 72 73 160 161l160 160 38.2-38.3 38.3-38.2-95.5-95.5-95.5-95.5h251.1c252.9 0 259.8-.1 281.4-3.6 72.1-11.8 136.9-54.1 178.5-116.4 8.6-12.9 22.6-40.5 28-55.4 4.4-12 10.7-36.1 13.1-50.6 1.6-9.6 1.8-21 2.1-132.8l.4-122.2H1013v110z"
+                  />
+                </svg>
+
+                to select
+              </span>
+              <span class="help">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="ninja-examplekey"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M0 0h24v24H0V0z" fill="none" />
+                  <path
+                    d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                  />
+                </svg>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="ninja-examplekey"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M0 0h24v24H0V0z" fill="none" />
+                  <path
+                    d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"
+                  />
+                </svg>
+                to navigate
+              </span>
+              <span class="help">
+                <span class="ninja-examplekey esc">esc</span>
+                to close
+              </span>
+              <span class="help">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="ninja-examplekey"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z"
+                    clip-rule="evenodd"
+                  />
+                </svg>
+                move to parent
+              </span>
+            </div>
+          </slot>
         </div>
@@ -418,3 +596,3 @@ </div>
   private _overlayClick(event: Event) {
-    if ((event.target as HTMLElement)?.id === 'ninja-keys') {
+    if ((event.target as HTMLElement)?.classList.contains('modal')) {
       this.close();
@@ -421,0 +599,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

155633

increased by19.25%

Lines of code

2562

increased by17.09%

Number of lines in readme file

132

increased by11.86%

No dependency changes