@sondor-technology/sondor-components 1.0.5 → 1.0.6

package/dist/components/modal/modal.js

@@ -4,34 +4,24 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { LitElement, html, css, nothing } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset.js';
+import { LitElement, html, css, nothing } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { resetStyles } from "../../styles/reset.js";
 let StModal = class StModal extends LitElement {
     constructor() {
         super(...arguments);
-        /**
-         * Controls whether the modal is open.
-         */
         this.open = false;
-        /**
-         * Title text displayed in the modal header.
-         */
-        this.heading = '';
-        /**
-         * Size of the modal (sm, md, lg, xl, xxl).
-         */
-        this.size = 'md';
-        /**
-         * If true, the modal cannot be closed by clicking the backdrop or pressing Esc.
-         */
+        this.heading = "";
+        this.size = "md";
         this.static = false;
         this.isClosing = false;
     }
+    // 🚀 FIX: Typed strictly and calls super
     updated(changedProperties) {
-        if (changedProperties.has('open')) {
+        super.updated(changedProperties);
+        if (changedProperties.has("open")) {
             if (this.open) {
-                this.dialogEl.classList.remove('closing');
+                this.dialogEl.classList.remove("closing");
                 this.isClosing = false;
                 if (!this.dialogEl.open) {
                     this.dialogEl.showModal();
@@ -46,20 +36,20 @@ let StModal = class StModal extends LitElement {
         if (this.isClosing)
             return;
         this.isClosing = true;
-        this.dialogEl.classList.add('closing');
+        this.dialogEl.classList.add("closing");
         const onAnimationEnd = () => {
-            this.dialogEl.removeEventListener('animationend', onAnimationEnd);
-            this.dialogEl.classList.remove('closing');
+            this.dialogEl.classList.remove("closing");
             this.isClosing = false;
             if (!this.open) {
                 this.dialogEl.close();
             }
         };
-        this.dialogEl.addEventListener('animationend', onAnimationEnd);
+        // 🚀 FIX: Prevent listener stacking on rapid toggles
+        this.dialogEl.addEventListener("animationend", onAnimationEnd, { once: true });
     }
     handleClose() {
         this.open = false;
-        this.dispatchEvent(new CustomEvent('st-close', { bubbles: true, composed: true }));
+        this.dispatchEvent(new CustomEvent("st-close", { bubbles: true, composed: true }));
     }
     handleCancel(e) {
         e.preventDefault();
@@ -70,7 +60,7 @@ let StModal = class StModal extends LitElement {
     onDialogClose() {
         if (this.open) {
             this.open = false;
-            this.dispatchEvent(new CustomEvent('st-close', { bubbles: true, composed: true }));
+            this.dispatchEvent(new CustomEvent("st-close", { bubbles: true, composed: true }));
         }
     }
     handleBackdropClick(e) {
@@ -87,28 +77,43 @@ let StModal = class StModal extends LitElement {
     }
     render() {
         return html `
-      <dialog 
+      <dialog
         class="size-${this.size}"
-        aria-labelledby=${this.heading ? 'modal-heading' : nothing}
-        @cancel=${this.handleCancel} 
-        @click=${this.handleBackdropClick} 
+        aria-labelledby=${this.heading ? "modal-heading" : nothing}
+        @cancel=${this.handleCancel}
+        @click=${this.handleBackdropClick}
         @close=${this.onDialogClose}
       >
-        <div class="modal-header" @click=${(e) => e.stopPropagation()}>
+        <!-- 🚀 FIX: Removed @click=stopPropagation from all inner wrappers -->
+        <div class="modal-header">
           <slot name="header">
             <h3 class="modal-title" id="modal-heading">${this.heading}</h3>
           </slot>
-          
-          ${!this.static ? html `
-            <button class="close-btn" @click=${this.handleClose} aria-label="Close modal">
-              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          ` : nothing}
+
+          ${!this.static
+            ? html `
+                <button class="close-btn" @click=${this.handleClose} aria-label="Close modal">
+                  <svg
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                  </svg>
+                </button>
+              `
+            : nothing}
         </div>
-        <div class="modal-body" @click=${(e) => e.stopPropagation()}>
+        <div class="modal-body">
           <slot></slot>
         </div>
-        <div class="modal-footer" @click=${(e) => e.stopPropagation()}>
+        <div class="modal-footer">
           <slot name="footer"></slot>
         </div>
       </dialog>
@@ -128,43 +133,72 @@ StModal.styles = [
         border-radius: var(--st-radius-lg, 0.5rem);
         background-color: var(--st-color-surface);
         color: var(--st-color-text);
-        
-        /* Responsive width calculation */
+
         width: calc(100% - 2rem);
         margin: auto;
-        
-        box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+
+        box-shadow:
+          0 20px 25px -5px rgb(0 0 0 / 0.1),
+          0 8px 10px -6px rgb(0 0 0 / 0.1);
         font-family: var(--st-font-family, inherit);
       }
 
-      /* Sizes */
-      dialog.size-sm { max-width: 400px; }
-      dialog.size-md { max-width: 500px; }
-      dialog.size-lg { max-width: 800px; }
-      dialog.size-xl { max-width: 1024px; }
-      dialog.size-xxl { max-width: 1280px; }
+      dialog.size-sm {
+        max-width: 400px;
+      }
+      dialog.size-md {
+        max-width: 500px;
+      }
+      dialog.size-lg {
+        max-width: 800px;
+      }
+      dialog.size-xl {
+        max-width: 1024px;
+      }
+      dialog.size-xxl {
+        max-width: 1280px;
+      }
 
       dialog::backdrop {
         background-color: rgba(0, 0, 0, 0.5);
         backdrop-filter: blur(2px);
       }
 
-      /* Animations */
       @keyframes fade-in {
-        from { opacity: 0; }
-        to { opacity: 1; }
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
       }
       @keyframes fade-out {
-        from { opacity: 1; }
-        to { opacity: 0; }
+        from {
+          opacity: 1;
+        }
+        to {
+          opacity: 0;
+        }
       }
       @keyframes slide-up {
-        from { opacity: 0; transform: translateY(20px) scale(0.95); }
-        to { opacity: 1; transform: translateY(0) scale(1); }
+        from {
+          opacity: 0;
+          transform: translateY(20px) scale(0.95);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0) scale(1);
+        }
       }
       @keyframes slide-down {
-        from { opacity: 1; transform: translateY(0) scale(1); }
-        to { opacity: 0; transform: translateY(20px) scale(0.95); }
+        from {
+          opacity: 1;
+          transform: translateY(0) scale(1);
+        }
+        to {
+          opacity: 0;
+          transform: translateY(20px) scale(0.95);
+        }
       }
 
       dialog[open] {
@@ -173,7 +207,7 @@ StModal.styles = [
       dialog[open]::backdrop {
         animation: fade-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
       }
-      
+
       dialog.closing {
         animation: slide-down 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
       }
@@ -205,7 +239,9 @@ StModal.styles = [
         align-items: center;
         justify-content: center;
         border-radius: var(--st-radius-sm);
-        transition: color 0.2s, background-color 0.2s;
+        transition:
+          color 0.2s,
+          background-color 0.2s;
       }
 
       .close-btn:hover {
@@ -228,7 +264,7 @@ StModal.styles = [
         border-top: 1px solid var(--st-color-border);
         background-color: var(--st-color-surface-muted, #f8fafc);
       }
-    `
+    `,
 ];
 __decorate([
     property({ type: Boolean, reflect: true })
@@ -243,9 +279,10 @@ __decorate([
     property({ type: Boolean })
 ], StModal.prototype, "static", void 0);
 __decorate([
-    query('dialog')
+    query("dialog")
 ], StModal.prototype, "dialogEl", void 0);
 StModal = __decorate([
-    customElement('st-modal')
+    customElement("st-modal")
 ], StModal);
 export { StModal };
+//# sourceMappingURL=modal.js.map

package/dist/components/modal/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/components/modal/modal.ts"],"names":[],"mappings":"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"}

package/dist/components/page-layout/page-layout.d.ts

@@ -1,5 +1,5 @@
-import { LitElement, PropertyValues } from 'lit';
-export type LayoutVariant = 'app-shell' | 'content-sidebar' | 'single-column' | 'three-column';
+import { LitElement, PropertyValues } from "lit";
+export type LayoutVariant = "app-shell" | "content-sidebar" | "single-column" | "three-column";
 export declare class StPageLayout extends LitElement {
     /**
      * Defines the structural layout variant to render.
@@ -21,6 +21,7 @@ export declare class StPageLayout extends LitElement {
      * When true, expands the main content area to fill 100% of the available width between sidebars.
      */
     fillMain: boolean;
+    clearFooterPadding: boolean;
     private _mobileMenuOpen;
     private _touchStartX;
     private _currentTranslateX;
@@ -40,7 +41,7 @@ export declare class StPageLayout extends LitElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'st-page-layout': StPageLayout;
+        "st-page-layout": StPageLayout;
     }
 }
 //# sourceMappingURL=page-layout.d.ts.map

package/dist/components/page-layout/page-layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page-layout.d.ts","sourceRoot":"","sources":["../../../src/components/page-layout/page-layout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAI5D,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,iBAAiB,GAAG,eAAe,GAAG,cAAc,CAAC;AAE/F,qBACa,YAAa,SAAQ,UAAU;IAC1C;;OAEG;IAEH,OAAO,EAAE,aAAa,CAAmB;IAEzC;;OAEG;IAEH,YAAY,SAAM;IAElB;;OAEG;IAEH,iBAAiB,SAAM;IAEvB;;OAEG;IAEH,YAAY,SAAM;IAElB;;OAEG;IAEH,QAAQ,UAAS;IAGjB,OAAO,CAAC,eAAe,CAAS;IAEhC,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,kBAAkB,CAAK;IAC/B,OAAO,CAAC,WAAW,CAAS;IAEnB,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,QA0BvD;IAED,OAAO,CAAC,iBAAiB,CAEvB;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAGF,OAAO,CAAC,eAAe,CAUrB;IAEF,OAAO,CAAC,iBAAiB,CAMvB;IAEF,OAAO,CAAC,gBAAgB,CAUtB;IAEF,OAAO,CAAC,eAAe,CAarB;IAEF,OAAO,CAAC,eAAe,CAIrB;IAEF,iBAAiB,SAGhB;IAED,oBAAoB,SAGnB;IAED,MAAM,CAAC,MAAM,4BAsZX;IAEF,MAAM,yCAgJL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}
+{"version":3,"file":"page-layout.d.ts","sourceRoot":"","sources":["../../../src/components/page-layout/page-layout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAa,cAAc,EAAC,MAAM,KAAK,CAAC;AAI1D,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,iBAAiB,GAAG,eAAe,GAAG,cAAc,CAAC;AAE/F,qBACa,YAAa,SAAQ,UAAU;IAC1C;;OAEG;IAEH,OAAO,EAAE,aAAa,CAAmB;IAEzC;;OAEG;IAEH,YAAY,SAAM;IAElB;;OAEG;IAEH,iBAAiB,SAAM;IAEvB;;OAEG;IAEH,YAAY,SAAM;IAElB;;OAEG;IAEH,QAAQ,UAAS;IAGjB,kBAAkB,UAAS;IAG3B,OAAO,CAAC,eAAe,CAAS;IAEhC,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,kBAAkB,CAAK;IAC/B,OAAO,CAAC,WAAW,CAAS;IAEnB,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,QA0BvD;IAED,OAAO,CAAC,iBAAiB,CAEvB;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAGF,OAAO,CAAC,eAAe,CAUrB;IAEF,OAAO,CAAC,iBAAiB,CAMvB;IAEF,OAAO,CAAC,gBAAgB,CAUtB;IAEF,OAAO,CAAC,eAAe,CAarB;IAEF,OAAO,CAAC,eAAe,CAIrB;IAEF,iBAAiB,SAGhB;IAED,oBAAoB,SAGnB;IAED,MAAM,CAAC,MAAM,4BA4ZX;IAEF,MAAM,yCAgKL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}