mn-angular-lib 1.0.76 → 1.0.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mn-angular-lib",
-  "version": "1.0.76",
+  "version": "1.0.78",
   "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-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;
+  }
+}