@duskmoon-dev/core 1.9.0 → 1.10.1

package/README.md

@@ -1,6 +1,6 @@
 # @duskmoon-dev/core
 
-> DuskMoonUI - A Tailwind CSS v4 plugin with Material Design 3 color system and 42 component styles
+> DuskMoonUI - A Tailwind CSS v4 plugin with Material Design 3 color system and 49 component styles
 
 [![npm version](https://img.shields.io/npm/v/@duskmoon-dev/core.svg)](https://www.npmjs.com/package/@duskmoon-dev/core)
 [![npm downloads](https://img.shields.io/npm/dm/@duskmoon-dev/core.svg)](https://www.npmjs.com/package/@duskmoon-dev/core)
@@ -12,7 +12,7 @@
 - 🎨 **Three-color system** - Primary, secondary, and tertiary brand colors with automatic content colors
 - 🌓 **Built-in themes** - Sunshine (light) and Moonlight (dark) themes ready to use
 - 📦 **55+ Material Design 3 color tokens** - Full MD3 color system with OKLCH format
-- 🧩 **42 UI components** - Complete component library with consistent styling
+- 🧩 **49 UI components** - Complete component library with consistent styling
 - 🚀 **Zero runtime JS** - Pure CSS with CSS custom properties for theme switching
 - ♿ **Accessible by default** - WCAG AA compliant contrast ratios (4.5:1 minimum)
 - 🎯 **Tailwind v4 native** - Pure CSS using `@import`, no JavaScript configuration
@@ -96,7 +96,7 @@ Theme switching is instant and uses pure CSS custom properties.
 
 ## Components
 
-@duskmoon-dev/core includes **42 components** organized into 7 categories:
+@duskmoon-dev/core includes **49 components** organized into 7 categories:
 
 ### Core Components (6)
 

package/dist/components/appbar.css

@@ -14,7 +14,7 @@
     padding: 0 1rem;
     background-color: var(--color-surface);
     color: var(--color-on-surface);
-    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    box-shadow: var(--shadow-sm);
   }
 
   /* Static App Bar (default) */
@@ -55,7 +55,7 @@
 
   /* App Bar with Shadow (elevated) */
   .appbar-elevated {
-    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    box-shadow: var(--shadow-sm);
   }
 
   /* Flat App Bar (no shadow) */

package/dist/components/autocomplete.css

@@ -49,7 +49,7 @@
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline);
     border-radius: 0.5rem;
-    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    box-shadow: var(--shadow-lg);
     overflow-y: auto;
     opacity: 0;
     visibility: hidden;

package/dist/components/card.css

@@ -13,12 +13,12 @@
     border-radius: 1rem;
     background-color: var(--color-surface);
     color: var(--color-on-surface);
-    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    box-shadow: var(--shadow-sm);
     transition: box-shadow 150ms ease-in-out, transform 150ms ease-in-out;
   }
 
   .card:hover {
-    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    box-shadow: var(--shadow-md);
   }
 
   /* Card Image */
@@ -171,11 +171,11 @@
 
   /* Elevated Variants */
   .card-elevated {
-    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    box-shadow: var(--shadow-lg);
   }
 
   .card-elevated:hover {
-    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    box-shadow: var(--shadow-xl);
     transform: translateY(-2px);
   }
 

package/dist/components/cascader.css

@@ -125,7 +125,7 @@
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline-variant);
     border-radius: 0.5rem;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--shadow-md);
     overflow: hidden;
   }
 

package/dist/components/collapse.css

@@ -156,7 +156,7 @@
     border: 1px solid var(--color-outline-variant);
     border-radius: 0.75rem;
     overflow: hidden;
-    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
+    box-shadow: var(--shadow-sm);
   }
 
   .collapse-card .collapse-toggle,

package/dist/components/datepicker.css

@@ -116,7 +116,7 @@
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline);
     border-radius: 0.75rem;
-    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    box-shadow: var(--shadow-lg);
     opacity: 0;
     visibility: hidden;
     transform: translateY(-0.5rem);
@@ -142,7 +142,7 @@
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline);
     border-radius: 0.75rem;
-    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    box-shadow: var(--shadow-lg);
   }
 
   /* Calendar Header */

package/dist/components/dialog.css

@@ -17,7 +17,7 @@
     background-color: var(--color-surface);
     color: var(--color-on-surface);
     border-radius: 1.5rem;
-    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+    box-shadow: var(--shadow-2xl);
     overflow: hidden;
   }
 

package/dist/components/drawer.css

@@ -27,7 +27,7 @@
     display: flex;
     flex-direction: column;
     background-color: var(--color-surface-container-low);
-    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+    box-shadow: var(--shadow-2xl);
     transition: transform 300ms ease-out;
   }
 

package/dist/components/file-upload.css

@@ -286,7 +286,7 @@
   }
 
   .file-upload-button:hover {
-    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+    box-shadow: var(--shadow-md);
   }
 
   .file-upload-button:focus-visible {

package/dist/components/form-group.css

@@ -147,7 +147,7 @@
   .fieldset-card {
     background-color: var(--color-surface);
     border-color: transparent;
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--shadow-xs);
     padding: 1.5rem;
   }
 
@@ -289,6 +289,13 @@
     border-color: var(--color-error);
   }
 
+  .form-group-error .input:focus-visible,
+  .form-group-error .select:focus-visible,
+  .form-group-error .textarea:focus-visible {
+    border-color: var(--color-error);
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent);
+  }
+
   /* Success State on Form Group */
   .form-group-success .form-label {
     color: var(--color-success);
@@ -300,6 +307,31 @@
     border-color: var(--color-success);
   }
 
+  .form-group-success .input:focus-visible,
+  .form-group-success .select:focus-visible,
+  .form-group-success .textarea:focus-visible {
+    border-color: var(--color-success);
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-success) 10%, transparent);
+  }
+
+  /* Warning State on Form Group */
+  .form-group-warning .form-label {
+    color: var(--color-warning);
+  }
+
+  .form-group-warning .input,
+  .form-group-warning .select,
+  .form-group-warning .textarea {
+    border-color: var(--color-warning);
+  }
+
+  .form-group-warning .input:focus-visible,
+  .form-group-warning .select:focus-visible,
+  .form-group-warning .textarea:focus-visible {
+    border-color: var(--color-warning);
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-warning) 10%, transparent);
+  }
+
   /* Disabled Form Group */
   .form-group-disabled {
     opacity: 0.5;