fix(core): update

ts_web/elements/dees-windowlayer.ts

@@ -10,8 +10,15 @@ declare global {
 
 @customElement('dees-windowlayer')
 export class DeesWindowLayer extends LitElement {
+  // STATIC
   public static demo = () => html`<dees-windowlayer></dees-windowlayer>`;
 
+  // INSTANCE
+  @property({
+    type: Boolean
+  })
+  public visible = false;
+
   constructor() {
     super();
     domtools.elementBasic.setup();
@@ -22,8 +29,8 @@ export class DeesWindowLayer extends LitElement {
       ${domtools.elementBasic.styles}
       <style>
         .windowOverlay {
+          transition: all 0.3s;
           will-change: transform;
-          transition: all 1s;
           position: fixed;
           top: 0px;
           left: 0px;
@@ -33,15 +40,17 @@ export class DeesWindowLayer extends LitElement {
           justify-content: center;
           align-items: center;
           background: rgba(0, 0, 0, 0.0);
-          backdrop-filter: blur(0px);
+          backdrop-filter: brightness(1);
+          pointer-events: none;
         }
         
         .visible {
           background: rgba(0, 0, 0, 0.2);
           backdrop-filter: brightness(0.3);
+          pointer-events: all;
         }
       </style>
-      <div class="windowOverlay">
+      <div @click=${this.dispatchClicked} class="windowOverlay ${this.visible ? 'visible' : null}">
         <slot></slot>
       </div>
     `;
@@ -49,7 +58,15 @@ export class DeesWindowLayer extends LitElement {
 
   firstUpdated() {
     setTimeout(() => {
-      this.shadowRoot.querySelector('.windowOverlay').classList.add('visible');
+      this.visible = true;
     }, 100);
   }
+
+  dispatchClicked() {
+    this.dispatchEvent(new CustomEvent('clicked'))
+  }
+
+  public toggleVisibility () {
+    this.visible = !this.visible;
+  }
 }