@supersoniks/concorde 3.1.94 → 3.1.96

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersoniks/concorde",
-  "version": "3.1.94",
+  "version": "3.1.96",
   "license": "MIT",
   "type": "module",
   "main": "",

package/src/core/components/ui/modal/modal-subtitle.ts

@@ -7,9 +7,8 @@ export class ModalSubTitle extends LitElement {
   static styles = [
     css`
       :host {
-        font-size: 1.1rem;
+        font-size: 1.25rem;
         display: block;
-        line-height: 1.1rem;
         line-height: var(--sc-headings-line-height, 1.1);
         font-family: var(
           --sc-headings-font-family,

package/src/core/components/ui/modal/modal.ts

@@ -51,11 +51,14 @@ export class Modal extends Subscriber(LitElement) {
       :host {
         --sc-modal-py: 2.5rem;
         --sc-modal-px: 1.5rem;
-        --sc_max-w: min(100vw, 40rem);
-        --sc_max-h: 85vh;
+
+        --sc_backdrop-bg: var(
+          --sc_overlay-bg,
+          var(--sc-base-200, rgba(0, 0, 0, 0.12))
+        );
+        --sc_backdrop-opacity: 0;
         --sc_rounded: var(--sc-rounded-lg);
         --sc_z-index: 990;
-        --sc_backdrop-opacity: 0;
       }
 
       * {
@@ -67,7 +70,7 @@ export class Modal extends Subscriber(LitElement) {
         color: var(--sc-base-content, #000);
         width: 100%;
         box-shadow: var(--sc-shadow-lg);
-        border-radius: var(--sc_rounded) var(--sc_rounded) 0 0;
+        border-radius: var(--sc_rounded) var(--sc_rounded);
         transform: translateZ(0);
         border: none;
         outline: none;
@@ -83,10 +86,7 @@ export class Modal extends Subscriber(LitElement) {
 
       #backdrop {
         opacity: var(--sc_backdrop-opacity, 0);
-        background: var(
-          --sc_overlay-bg,
-          var(--sc-base-200, rgba(0, 0, 0, 0.12))
-        );
+        background: var(--sc_backdrop-bg);
         transition: opacity 0.15s linear;
         inset: 0;
         position: fixed;
@@ -101,12 +101,6 @@ export class Modal extends Subscriber(LitElement) {
         padding: var(--sc-modal-py) var(--sc-modal-px);
       }
 
-      ::slotted(sonic-modal-subtitle),
-      sonic-modal-subtitle {
-        margin-top: -0.9rem;
-        margin-bottom: 2.5rem;
-      }
-
       @media (max-width: 767.5px) {
         #modal {
           max-width: none !important;
@@ -115,6 +109,10 @@ export class Modal extends Subscriber(LitElement) {
           border-radius: var(--sc_rounded) var(--sc_rounded) 0 0 !important;
         }
       }
+
+      :host([fullScreen]) {
+        --sc_rounded: 0;
+      }
       :host([fullScreen]) #modal {
         width: 100% !important;
         height: 100% !important;
@@ -126,8 +124,14 @@ export class Modal extends Subscriber(LitElement) {
       /* Layout des éléments slottés */
       ::slotted(sonic-modal-title),
       sonic-modal-title {
-        margin-bottom: 2.5rem;
+        margin-bottom: 1.75rem;
       }
+      ::slotted(sonic-modal-subtitle),
+      sonic-modal-subtitle {
+        margin-bottom: 1.75rem;
+        margin-top: -1.25rem;
+      }
+
       :host([align="left"]) ::slotted(sonic-modal-title),
       :host([align="left"]) sonic-modal-title {
         padding-right: 1em;
@@ -188,12 +192,15 @@ export class Modal extends Subscriber(LitElement) {
     | "right"
     | "left" = "left";
 
-  @property({ type: String }) padding = "var(--sc-modal-py) var(--sc-modal-px)";
-  @property({ type: String }) maxWidth = "var(--sc_max-w)";
-  @property({ type: String }) maxHeight = "var(--sc_max-h)";
+  // Settings de base
+  @property({ type: String }) paddingX?: string;
+  @property({ type: String }) paddingY?: string;
+  @property({ type: String }) maxWidth = "min(100vw, 40rem)";
+  @property({ type: String }) maxHeight = "90vh";
+  @property({ type: String }) zIndex?: string;
+
   @property({ type: String }) width = "100%";
   @property({ type: String }) height = "fit-content";
-  @property({ type: String }) zIndex = "var(--sc_z-index)";
   @property({ type: String }) effect: effectType = "slide";
 
   @property({ type: Object }) options?: ModalCreateOptions;
@@ -209,8 +216,6 @@ export class Modal extends Subscriber(LitElement) {
   @state() private _animationState: "visible" | "in" | "out" | "hidden" =
     "hidden";
 
-  _animationDuration = 300;
-
   static create(options: ModalCreateOptions): Modal {
     const modal = document.createElement(tagName) as Modal;
     // modal styles
@@ -231,12 +236,9 @@ export class Modal extends Subscriber(LitElement) {
     if (options.fullScreen) modal.fullScreen = options?.fullScreen;
     if (options.effect) modal.effect = options?.effect;
 
-    if (options.paddingX)
-      modal.style.setProperty("--sc-modal-px", options?.paddingX);
-    if (options.paddingY)
-      modal.style.setProperty("--sc-modal-py", options?.paddingY);
-    if (options.zIndex)
-      modal.style.setProperty("--sc_z-index", options?.zIndex);
+    if (options.paddingX) modal.paddingX = options?.paddingX;
+    if (options.paddingY) modal.paddingY = options?.paddingY;
+    if (options.zIndex) modal.zIndex = options?.zIndex;
 
     const container = Theme.getPopContainer();
     container.appendChild(modal);
@@ -279,6 +281,17 @@ export class Modal extends Subscriber(LitElement) {
       }
     }
 
+    if (_changedProperties.has("zIndex")) {
+      this.style.setProperty("--sc_z-index", this.zIndex || "990");
+    }
+
+    if (_changedProperties.has("paddingX")) {
+      this.style.setProperty("--sc-modal-px", this.paddingX || "");
+    }
+    if (_changedProperties.has("paddingY")) {
+      this.style.setProperty("--sc-modal-py", this.paddingY || "");
+    }
+
     super.willUpdate(_changedProperties);
   }
 
@@ -316,16 +329,11 @@ export class Modal extends Subscriber(LitElement) {
       maxHeight: this.maxHeight,
       width: this.width,
       height: this.height,
-      zIndex: this.zIndex,
-      borderRadius: this.fullScreen ? "0" : "var(--sc_rounded)",
       pointerEvents: this._animationState === "visible" ? "auto" : "none",
     };
 
-    const modalContentStyles = {
-      padding: this.padding,
-    };
-
     const overlayStyles = {
+      display: this.fullScreen ? "none" : "block",
       pointerEvents: this._animationState === "visible" ? "auto" : "none",
     };
 
@@ -343,7 +351,7 @@ export class Modal extends Subscriber(LitElement) {
         style=${styleMap(modalStyles)}
       >
         ${this._animationState !== "hidden"
-          ? html`<div id="modal-content" style=${styleMap(modalContentStyles)}>
+          ? html`<div id="modal-content">
               ${!this.forceAction
                 ? html`<sonic-modal-close></sonic-modal-close>`
                 : nothing}
@@ -448,7 +456,7 @@ export class Modal extends Subscriber(LitElement) {
     linear: "linear",
     translateY: "translateY(2.5rem)",
     durationIn: 300,
-    durationOut: 450,
+    durationOut: 300,
   } as const;
 
   // ------------------------
@@ -464,14 +472,16 @@ export class Modal extends Subscriber(LitElement) {
 
       const isEntering = direction === "in";
       const duration = isEntering ? durationIn : durationOut;
-
+      const delay = !this.fullScreen && isEntering ? 100 : 0;
       // Backdrop
-      if (isEntering) {
-        this.style.setProperty("--sc_backdrop-opacity", "0.8");
-      } else {
-        setTimeout(() => {
-          this.style.setProperty("--sc_backdrop-opacity", "0");
-        }, 300);
+      if (!this.fullScreen) {
+        if (isEntering) {
+          this.style.setProperty("--sc_backdrop-opacity", "0.8");
+        } else {
+          setTimeout(() => {
+            this.style.setProperty("--sc_backdrop-opacity", "0");
+          }, 150);
+        }
       }
 
       // Animations
@@ -489,7 +499,7 @@ export class Modal extends Subscriber(LitElement) {
               duration: duration,
               easing: isEntering ? quartOut : quadOut,
               fill: "both",
-              delay: isEntering ? 100 : 0,
+              delay: delay,
             }
           )
         );
@@ -500,7 +510,7 @@ export class Modal extends Subscriber(LitElement) {
               duration: duration,
               easing: linear,
               fill: "both",
-              delay: isEntering ? 100 : 0,
+              delay: delay,
             }
           )
         );