mn-angular-lib 1.0.83 → 1.0.85

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mn-angular-lib",
-  "version": "1.0.83",
+  "version": "1.0.85",
   "peerDependencies": {
     "@angular/common": "^21.1.3",
     "@angular/core": "^21.1.3"

package/src/lib/features/mn-modal/components/mn-modal-shell/mn-modal-shell.component.css

@@ -79,17 +79,6 @@
   }
 }
 
-@keyframes slideUpOut {
-  from {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(100%);
-  }
-}
-
 /* Open animations — keyed by the same .anim-* host classes as the close animations
    below, so mobile bottom-sheet overrides can target both in one place. */
 :host(.anim-slide) .modal-container {
@@ -135,21 +124,29 @@
     max-width: 100%;
     max-height: 92vh;
     border-radius: 1rem 1rem 0 0;
-    animation: slideUpIn 0.35s var(--mn-sheet-ease);
+    animation: slideUpIn 0.45s var(--mn-sheet-ease);
   }
 
   /* Override whichever anim-* open animation was selected */
   :host(.mobile-sheet).anim-slide .modal-container,
   :host(.mobile-sheet).anim-fade .modal-container,
   :host(.mobile-sheet).anim-zoom .modal-container {
-    animation: slideUpIn 0.35s var(--mn-sheet-ease);
+    animation: slideUpIn 0.45s var(--mn-sheet-ease);
   }
 
+  /* Close via a transform TRANSITION, not a re-triggered keyframe. Replaying the
+     slideUpOut KEYFRAME on a sheet whose open keyframe has already finished does
+     not animate reliably on mobile browsers — the sheet just disappears. A
+     transition animates dependably there (it's the same mechanism swipe-to-dismiss
+     uses), and works whether or not change detection flushes the host class. */
   :host(.mobile-sheet).closing .modal-container,
   :host(.mobile-sheet).closing.anim-slide .modal-container,
   :host(.mobile-sheet).closing.anim-fade .modal-container,
   :host(.mobile-sheet).closing.anim-zoom .modal-container {
-    animation: slideUpOut 0.25s var(--mn-sheet-ease) forwards;
+    animation: none !important;
+    transform: translateY(100%);
+    opacity: 0;
+    transition: transform 0.45s var(--mn-sheet-ease), opacity 0.45s var(--mn-sheet-ease);
   }
 }
 

package/src/lib/styles/styles.css

@@ -1,17 +1,17 @@
-/* Default theme styles */
+/* Default theme styles */
 @import "tailwindcss";
 
 @theme {
-  --color-brand-50:  #F5F3FF;
-  --color-brand-100: #EDE9FE;
-  --color-brand-200: #DDD6FE;
-  --color-brand-300: #C4B5FD;
-  --color-brand-400: #A78BFA;
-  --color-brand-500: #8B5CF6; /* hoofd paars */
-  --color-brand-600: #7C3AED;
-  --color-brand-700: #6D28D9;
-  --color-brand-800: #5B21B6;
-  --color-brand-900: #4C1D95;
+  --color-primary-50:  #F5F3FF;
+  --color-primary-100: #EDE9FE;
+  --color-primary-200: #DDD6FE;
+  --color-primary-300: #C4B5FD;
+  --color-primary-400: #A78BFA;
+  --color-primary-500: #8B5CF6; /* hoofd paars */
+  --color-primary-600: #7C3AED;
+  --color-primary-700: #6D28D9;
+  --color-primary-800: #5B21B6;
+  --color-primary-900: #4C1D95;
 }
 
 @utility scrollbar-hide {

package/types/mn-angular-lib.d.ts

@@ -3767,8 +3767,8 @@ declare class MnModalShellComponent<TResult = unknown> implements OnInit, AfterV
     asCustom(config: ModalConfig<TResult>): CustomModalConfig;
     private static readonly SWIPE_DISMISS_THRESHOLD;
     /** Upper bound for the close wait if no animation/transition end event fires
-     *  (e.g. an animation was suppressed). Longer than the slowest close path
-     *  (mobile slide-down 0.25s, swipe glide 0.3s) so it never preempts. */
+     *  (e.g. an animation was suppressed). Must stay longer than the slowest close
+     *  path (mobile sheet slide-down 0.45s, swipe glide 0.3s) so it never preempts. */
     private static readonly CLOSE_FALLBACK_MS;
     /** Whether this modal renders as a bottom sheet on small screens (default: true). */
     get isMobileSheet(): boolean;