mn-angular-lib 1.0.78 → 1.0.80

package/package.json

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

package/src/lib/features/mn-checkbox/mn-checkbox.css

@@ -2,39 +2,23 @@
  * Self-contained checkbox styling — a faithful reproduction of daisyui's
  * `checkbox` component WITHOUT depending on daisyui.
  *
- * Unlike mn-select (which renders entirely with Tailwind utilities), the
- * checkbox needs a component stylesheet: daisyui draws the checkmark with a
- * `::before` pseudo-element and an animated `clip-path`, which cannot be
- * expressed as utility classes on a native <input>. Shipping it as component
- * CSS also means it compiles with the component and does not rely on the
- * consumer's Tailwind scanning the library.
- *
- * Colors come from the theme CSS variables the consuming app already provides
- * (--color-primary, --color-base-content, etc. — see demo-app styles.css).
- * The depth shadows hardcode daisyui's default depth (0.1 opacity) and the
- * `--fx-noise` layer is dropped.
+ * Size, color, and border-radius are handled entirely by Tailwind utility
+ * classes generated in mn-checkboxVariants.ts. This file is responsible only
+ * for structural rules and the ::before pseudo-element checkmark animation,
+ * which cannot be expressed as utility classes on a native <input>.
  */
 
 .mn-checkbox {
-  /* Defaults; size/color modifier classes override these. */
-  --mn-checkbox-size: 1.5rem;
-  --mn-checkbox-input-color: var(--color-primary);
-  --mn-checkbox-check-color: var(--color-primary-content, #fff);
-
   position: relative;
   display: inline-block;
   flex-shrink: 0;
   box-sizing: border-box;
-  width: var(--mn-checkbox-size);
-  height: var(--mn-checkbox-size);
-  padding: 0.25rem;
   vertical-align: middle;
   cursor: pointer;
   appearance: none;
   -webkit-appearance: none;
-  color: var(--mn-checkbox-check-color);
-  border: 1px solid var(--mn-checkbox-input-color, color-mix(in oklab, var(--color-base-content) 20%, transparent));
-  border-radius: 0.25rem;
+  border-width: 1px;
+  border-style: solid;
   box-shadow: 0 1px oklch(0% 0 0 / 0.1) inset,
   0 0 #0000 inset,
   0 0 #0000;
@@ -60,13 +44,13 @@
 }
 
 .mn-checkbox:focus-visible {
-  outline: 2px solid var(--mn-checkbox-input-color, currentColor);
+  outline-width: 2px;
+  outline-style: solid;
   outline-offset: 2px;
 }
 
 .mn-checkbox:checked,
 .mn-checkbox[aria-checked='true'] {
-  background-color: var(--mn-checkbox-input-color);
   box-shadow: 0 0 #0000 inset,
   0 8px 0 -4px oklch(100% 0 0 / 0.1) inset,
   0 1px oklch(0% 0 0 / 0.1);
@@ -78,10 +62,6 @@
   clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%);
 }
 
-.mn-checkbox:indeterminate {
-  background-color: var(--mn-checkbox-input-color);
-}
-
 .mn-checkbox:indeterminate::before {
   opacity: 1;
   rotate: 0deg;
@@ -93,96 +73,3 @@
   cursor: not-allowed;
   opacity: 0.2;
 }
-
-/* ========== Sizes (daisyui dimensions verbatim) ========== */
-
-.mn-checkbox-xs {
-  --mn-checkbox-size: 1rem;
-  padding: 0.125rem;
-}
-
-.mn-checkbox-sm {
-  --mn-checkbox-size: 1.25rem;
-  padding: 0.1875rem;
-}
-
-.mn-checkbox-md {
-  --mn-checkbox-size: 1.5rem;
-  padding: 0.25rem;
-}
-
-.mn-checkbox-lg {
-  --mn-checkbox-size: 1.75rem;
-  padding: 0.3125rem;
-}
-
-.mn-checkbox-xl {
-  --mn-checkbox-size: 2rem;
-  padding: 0.375rem;
-}
-
-/* ========== Colors ========== */
-/* Content tokens carry a #fff fallback because not every theme defines the
- * full *-content palette; without it currentColor would inherit body text. */
-
-.mn-checkbox-primary {
-  --mn-checkbox-input-color: var(--color-primary);
-  --mn-checkbox-check-color: var(--color-primary-content, #fff);
-}
-
-.mn-checkbox-secondary {
-  --mn-checkbox-input-color: var(--color-secondary);
-  --mn-checkbox-check-color: var(--color-secondary-content, #fff);
-}
-
-.mn-checkbox-accent {
-  --mn-checkbox-input-color: var(--color-accent);
-  --mn-checkbox-check-color: var(--color-accent-content, #fff);
-}
-
-.mn-checkbox-neutral {
-  --mn-checkbox-input-color: var(--color-neutral);
-  --mn-checkbox-check-color: var(--color-neutral-content, #fff);
-}
-
-.mn-checkbox-info {
-  --mn-checkbox-input-color: var(--color-info);
-  --mn-checkbox-check-color: var(--color-info-content, #fff);
-}
-
-.mn-checkbox-success {
-  --mn-checkbox-input-color: var(--color-success);
-  --mn-checkbox-check-color: var(--color-success-content, #fff);
-}
-
-.mn-checkbox-warning {
-  --mn-checkbox-input-color: var(--color-warning);
-  --mn-checkbox-check-color: var(--color-warning-content, #fff);
-}
-
-.mn-checkbox-error {
-  --mn-checkbox-input-color: var(--color-error);
-  --mn-checkbox-check-color: var(--color-error-content, #fff);
-}
-
-/* ========== Border radius ========== */
-
-.mn-checkbox-radius-none {
-  border-radius: 0;
-}
-
-.mn-checkbox-radius-xs {
-  border-radius: 0.125rem;
-}
-
-.mn-checkbox-radius-sm {
-  border-radius: 0.25rem;
-}
-
-.mn-checkbox-radius-md {
-  border-radius: 0.375rem;
-}
-
-.mn-checkbox-radius-lg {
-  border-radius: 0.5rem;
-}

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

@@ -1,4 +1,9 @@
 :host {
+  /* Native-feeling sheet curve (iOS-style decelerate, no out-of-bounds overshoot
+     which would expose a gap below a bottom-anchored sheet). Shared by the
+     slide keyframes, the drag spring-back, and the swipe-dismiss glide. */
+  --mn-sheet-ease: cubic-bezier(0.32, 0.72, 0, 1);
+
   position: fixed;
   inset: 0;
   z-index: 1000;
@@ -17,7 +22,7 @@
 
 /* Swipe-to-dismiss: animate the spring-back, but follow the finger 1:1 while dragging. */
 .modal-container {
-  transition: transform 0.2s ease;
+  transition: transform 0.35s var(--mn-sheet-ease);
 }
 
 .modal-container.sheet-dragging {
@@ -30,7 +35,7 @@
 :host(.swipe-dismissing) .modal-container,
 :host(.swipe-dismissing).closing .modal-container {
   animation: none !important;
-  transition: transform 0.2s ease-in;
+  transition: transform 0.3s var(--mn-sheet-ease);
 }
 
 @keyframes fadeIn {
@@ -130,20 +135,35 @@
     max-width: 100%;
     max-height: 92vh;
     border-radius: 1rem 1rem 0 0;
-    animation: slideUpIn 0.25s ease-out;
+    animation: slideUpIn 0.35s 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.25s ease-out;
+    animation: slideUpIn 0.35s var(--mn-sheet-ease);
   }
 
   :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.2s ease-in forwards;
+    animation: slideUpOut 0.25s var(--mn-sheet-ease) forwards;
+  }
+}
+
+/* =========================
+   Reduced motion: collapse every open/close/drag animation to ~instant.
+   Kept at 0.01ms (not `none`) so animationend still fires for the
+   event-driven close teardown in the shell component. The shell also
+   short-circuits its close wait when reduced motion is requested.
+   ========================= */
+@media (prefers-reduced-motion: reduce) {
+  :host .modal-backdrop,
+  :host .modal-container {
+    animation-duration: 0.01ms !important;
+    animation-delay: 0ms !important;
+    transition-duration: 0.01ms !important;
   }
 }

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

@@ -3745,10 +3745,24 @@ declare class MnModalShellComponent<TResult = unknown> implements OnInit, AfterV
     asConfirmation(config: ModalConfig<TResult>): ConfirmationModalConfig;
     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. */
+    private static readonly CLOSE_FALLBACK_MS;
     /** Whether this modal renders as a bottom sheet on small screens (default: true). */
     get isMobileSheet(): boolean;
-    /** Triggers the closing animation. Deferred to avoid NG0100 when called during a CD cycle. */
+    /**
+     * Triggers the closing animation and resolves once it has actually finished.
+     *
+     * Deferred via setTimeout to avoid NG0100 when called during a CD cycle.
+     * Rather than guess a fixed duration (the old hardcoded 150ms truncated the
+     * mobile slide-down, which runs 250ms — and the swipe glide, 300ms), we wait
+     * for the container's `animationend`/`transitionend` and tear down then. A
+     * fallback timeout guarantees resolution if no such event fires, and we
+     * short-circuit entirely under reduced motion (the CSS collapses to instant).
+     */
     startClosing(): Promise<void>;
+    private prefersReducedMotion;
     onEscapeKey(event: Event): void;
     onBackdropClick(): void;
     onCloseButtonClick(): void;