mn-angular-lib 1.0.76 → 1.0.77

package/package.json

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

package/src/lib/features/mn-grid/mn-grid.component.css

@@ -0,0 +1,63 @@
+/*
+ * Responsive card grid driven by CSS custom properties set inline by the
+ * component. Dynamic Tailwind classes (e.g. md:grid-cols-3) can't be used: the
+ * consuming app's JIT can't see runtime values and would drop them. Breakpoints
+ * match Tailwind defaults (sm 640, md 768, lg 1024, xl 1280).
+ *
+ * Each `--mn-grid-cols-*` falls back to the next-smaller breakpoint so consumers
+ * only set the breakpoints they care about.
+ */
+:host {
+  display: block;
+}
+
+.mn-grid {
+  display: grid;
+  gap: var(--mn-grid-gap, 1rem);
+  grid-template-columns: repeat(var(--mn-grid-cols-base, 1), minmax(0, 1fr));
+}
+
+@media (min-width: 640px) {
+  .mn-grid {
+    grid-template-columns: repeat(
+      var(--mn-grid-cols-sm, var(--mn-grid-cols-base, 1)),
+      minmax(0, 1fr)
+    );
+  }
+}
+
+@media (min-width: 768px) {
+  .mn-grid {
+    grid-template-columns: repeat(
+      var(--mn-grid-cols-md, var(--mn-grid-cols-sm, var(--mn-grid-cols-base, 1))),
+      minmax(0, 1fr)
+    );
+  }
+}
+
+@media (min-width: 1024px) {
+  .mn-grid {
+    grid-template-columns: repeat(
+      var(--mn-grid-cols-lg, var(--mn-grid-cols-md, var(--mn-grid-cols-sm, var(--mn-grid-cols-base, 1)))),
+      minmax(0, 1fr)
+    );
+  }
+}
+
+@media (min-width: 1280px) {
+  .mn-grid {
+    grid-template-columns: repeat(
+      var(--mn-grid-cols-xl, var(--mn-grid-cols-lg, var(--mn-grid-cols-md, var(--mn-grid-cols-sm, var(--mn-grid-cols-base, 1))))),
+      minmax(0, 1fr)
+    );
+  }
+}
+
+/*
+ * auto-fit layout (minCardWidth). Two classes → higher specificity than the
+ * single-class media-query rules above, so it wins at every width regardless of
+ * any `cols` vars that may also be set.
+ */
+.mn-grid.mn-grid--auto {
+  grid-template-columns: repeat(auto-fit, minmax(var(--mn-grid-min, 18rem), 1fr));
+}

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

@@ -24,6 +24,15 @@
   transition: none;
 }
 
+/* A swipe past the dismiss threshold glides the sheet off-screen via its transform
+   transition. Suppress the slide-up keyframe (it would snap back to 0 first); the
+   backdrop still fades out via its own .closing animation. */
+:host(.swipe-dismissing) .modal-container,
+:host(.swipe-dismissing).closing .modal-container {
+  animation: none !important;
+  transition: transform 0.2s ease-in;
+}
+
 @keyframes fadeIn {
   from { opacity: 0; }
   to { opacity: 1; }

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

@@ -14,11 +14,19 @@
 .mn-skeleton-shimmer-bar {
   position: absolute;
   inset: 0;
+  /* Highlight band derives from a theme token (base-100) so it contrasts against
+     the base-300 surface in both light and dark themes, instead of a fixed white. */
   background: linear-gradient(
     90deg,
     transparent 0%,
-    rgba(255, 255, 255, 0.15) 50%,
+    color-mix(in srgb, var(--color-base-100) 65%, transparent) 50%,
     transparent 100%
   );
   animation: mn-skeleton-shimmer 1.5s ease-in-out infinite;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .mn-skeleton-shimmer-bar {
+    animation: none;
+  }
+}