mn-angular-lib 1.0.79 → 1.0.80

package/package.json

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