update

ts_web/elements/sio-image-lightbox.ts

@@ -279,7 +279,9 @@ export class SioImageLightbox extends DeesElement {
       : '';
 
     return html`
-      <div class="overlay ${this.isOpen ? 'open' : ''}" @click=${this.close}></div>
+      <div class="overlay ${this.isOpen ? 'open' : ''}" @click=${(e: Event) => {
+        if (e.target === e.currentTarget) this.close(e);
+      }}></div>
       <div class="container ${this.isOpen ? 'open' : ''}">
         ${this.image ? html`
           <div class="controls">
@@ -292,7 +294,7 @@ export class SioImageLightbox extends DeesElement {
             <div class="control-button" @click=${this.resetZoom}>
               <sio-icon icon="maximize-2" size="18"></sio-icon>
             </div>
-            <div class="control-button" @click=${this.close}>
+            <div class="control-button" @click=${(e: Event) => this.close(e)}>
               <sio-icon icon="x" size="18"></sio-icon>
             </div>
           </div>
@@ -350,12 +352,17 @@ export class SioImageLightbox extends DeesElement {
     document.addEventListener('keydown', this.handleKeyDown);
   }
 
-  private close = () => {
+  private close = (e?: Event) => {
+    if (e) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+    
     this.isOpen = false;
     document.removeEventListener('keydown', this.handleKeyDown);
     
     // Dispatch close event
-    this.dispatchEvent(new CustomEvent('close', {
+    this.dispatchEvent(new CustomEvent('lightbox-close', {
       bubbles: true,
       composed: true
     }));