mn-angular-lib 1.0.77 → 1.0.79

package/package.json

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

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

@@ -0,0 +1,188 @@
+/*
+ * 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.
+ */
+
+.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;
+  box-shadow: 0 1px oklch(0% 0 0 / 0.1) inset,
+  0 0 #0000 inset,
+  0 0 #0000;
+  transition: background-color 0.2s,
+  box-shadow 0.2s;
+}
+
+.mn-checkbox::before {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 100%;
+  rotate: 45deg;
+  background-color: currentColor;
+  opacity: 0;
+  box-shadow: 0 3px 0 0 oklch(100% 0 0 / 0.1) inset;
+  clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%);
+  transition: clip-path 0.3s,
+  opacity 0.1s,
+  rotate 0.3s,
+  translate 0.3s;
+  transition-delay: 0.1s;
+}
+
+.mn-checkbox:focus-visible {
+  outline: 2px solid var(--mn-checkbox-input-color, currentColor);
+  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);
+}
+
+.mn-checkbox:checked::before,
+.mn-checkbox[aria-checked='true']::before {
+  opacity: 1;
+  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;
+  translate: 0 -35%;
+  clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%);
+}
+
+.mn-checkbox:disabled {
+  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

@@ -1412,9 +1412,21 @@ declare class MnTextarea implements OnInit {
 
 declare const mnCheckboxVariants: tailwind_variants.TVReturnType<{
     size: {
+        xs: string;
         sm: string;
         md: string;
         lg: string;
+        xl: string;
+    };
+    color: {
+        primary: string;
+        secondary: string;
+        accent: string;
+        neutral: string;
+        info: string;
+        success: string;
+        warning: string;
+        error: string;
     };
     borderRadius: {
         none: string;
@@ -1423,11 +1435,23 @@ declare const mnCheckboxVariants: tailwind_variants.TVReturnType<{
         md: string;
         lg: string;
     };
-}, undefined, "", {
+}, undefined, "mn-checkbox", {
     size: {
+        xs: string;
         sm: string;
         md: string;
         lg: string;
+        xl: string;
+    };
+    color: {
+        primary: string;
+        secondary: string;
+        accent: string;
+        neutral: string;
+        info: string;
+        success: string;
+        warning: string;
+        error: string;
     };
     borderRadius: {
         none: string;
@@ -1438,9 +1462,21 @@ declare const mnCheckboxVariants: tailwind_variants.TVReturnType<{
     };
 }, undefined, tailwind_variants.TVReturnType<{
     size: {
+        xs: string;
         sm: string;
         md: string;
         lg: string;
+        xl: string;
+    };
+    color: {
+        primary: string;
+        secondary: string;
+        accent: string;
+        neutral: string;
+        info: string;
+        success: string;
+        warning: string;
+        error: string;
     };
     borderRadius: {
         none: string;
@@ -1449,12 +1485,14 @@ declare const mnCheckboxVariants: tailwind_variants.TVReturnType<{
         md: string;
         lg: string;
     };
-}, undefined, "", unknown, unknown, undefined>>;
+}, undefined, "mn-checkbox", unknown, unknown, undefined>>;
 declare const mnCheckboxWrapperVariants: tailwind_variants.TVReturnType<{
     size: {
+        xs: string;
         sm: string;
         md: string;
         lg: string;
+        xl: string;
     };
     fullWidth: {
         true: string;
@@ -1464,9 +1502,11 @@ declare const mnCheckboxWrapperVariants: tailwind_variants.TVReturnType<{
     };
 }, undefined, "text-base-content", {
     size: {
+        xs: string;
         sm: string;
         md: string;
         lg: string;
+        xl: string;
     };
     fullWidth: {
         true: string;
@@ -1476,9 +1516,11 @@ declare const mnCheckboxWrapperVariants: tailwind_variants.TVReturnType<{
     };
 }, undefined, tailwind_variants.TVReturnType<{
     size: {
+        xs: string;
         sm: string;
         md: string;
         lg: string;
+        xl: string;
     };
     fullWidth: {
         true: string;
@@ -1501,6 +1543,8 @@ type MnCheckboxProps = {
     label?: string;
     /** Size variant of the checkbox (default: 'md') */
     size?: MnCheckboxVariants['size'];
+    /** Color variant of the checkbox (default: 'primary') */
+    color?: MnCheckboxVariants['color'];
     /** Border radius variant (default: 'sm') */
     borderRadius?: MnCheckboxVariants['borderRadius'];
     /** Whether the checkbox wrapper should take full width */
@@ -3701,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;