domma-js 0.14.5 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "domma-js",
-  "version": "0.14.5",
+  "version": "0.16.0",
   "description": "Dynamic Object Manipulation & Modeling API - A complete front-end toolkit.",
   "main": "public/dist/domma.min.js",
   "module": "public/dist/domma.esm.js",

package/public/dist/bundles/domma-complete.css

@@ -1,8 +1,8 @@
 /*!
- * Domma Complete CSS Bundle v0.14.5
+ * Domma Complete CSS Bundle v0.16.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-02-13T16:14:14.530Z
+ * Built: 2026-02-15T19:34:06.411Z
  */
 
 /* ============================================
@@ -11,11 +11,11 @@
    ============================================ */
 
 /*!
- * Domma Core CSS v0.14.5
+ * Domma Core CSS v0.16.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-02-13T16:14:14.182Z
- * Commit: 53db6e0
+ * Built: 2026-02-15T19:34:06.099Z
+ * Commit: 04c480c
  */
 
 /**
@@ -2337,7 +2337,7 @@ code, pre {
 .form-input.success:focus,
 .form-select.success:focus,
 .form-textarea.success:focus {
-    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
+    box-shadow: 0 0 0 3px var(--dm-focus-ring-success, rgba(22, 163, 74, 0.2));
 }
 
 .form-input.warning,
@@ -2349,7 +2349,7 @@ code, pre {
 .form-input.warning:focus,
 .form-select.warning:focus,
 .form-textarea.warning:focus {
-    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
+    box-shadow: 0 0 0 3px var(--dm-focus-ring-warning, rgba(245, 158, 11, 0.2));
 }
 
 .form-success {
@@ -2374,7 +2374,7 @@ code, pre {
 .has-success .form-input:focus,
 .has-success .form-select:focus,
 .has-success .form-textarea:focus {
-    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
+    box-shadow: 0 0 0 3px var(--dm-focus-ring-success, rgba(22, 163, 74, 0.2));
 }
 
 .has-error .form-input,
@@ -2386,7 +2386,7 @@ code, pre {
 .has-error .form-input:focus,
 .has-error .form-select:focus,
 .has-error .form-textarea:focus {
-    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
+    box-shadow: 0 0 0 3px var(--dm-focus-ring-danger, rgba(239, 68, 68, 0.2));
 }
 
 .has-warning .form-input,
@@ -2398,7 +2398,7 @@ code, pre {
 .has-warning .form-input:focus,
 .has-warning .form-select:focus,
 .has-warning .form-textarea:focus {
-    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
+    box-shadow: 0 0 0 3px var(--dm-focus-ring-warning, rgba(245, 158, 11, 0.2));
 }
 
 /* Input Sizes */
@@ -3337,7 +3337,7 @@ code, pre {
 .dm-tw-cursor-block {
     padding: 0;
     background: currentColor;
-    color: var(--dm-body-bg, #fff);
+    color: var(--dm-background, #fff);
     opacity: 0.8;
     font-size: 0.7em;
     line-height: 0.9;
@@ -3376,6 +3376,121 @@ code, pre {
     animation: dm-tw-glow 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
 }
 
+/* =================================================================
+   Reveal Effect - Scroll-triggered entrance animations
+   ================================================================= */
+
+.dm-reveal {
+    opacity: 0;
+    transition-property: opacity, transform;
+    will-change: opacity, transform;
+}
+
+.dm-reveal.dm-reveal-visible {
+    opacity: 1;
+    transform: none !important;
+}
+
+.dm-reveal-fade {
+    /* opacity-only, no transform needed */
+}
+
+.dm-reveal-slide-up {
+    transform: translateY(30px);
+}
+
+.dm-reveal-slide-down {
+    transform: translateY(-30px);
+}
+
+.dm-reveal-slide-left {
+    transform: translateX(30px);
+}
+
+.dm-reveal-slide-right {
+    transform: translateX(-30px);
+}
+
+.dm-reveal-zoom {
+    transform: scale(0.85);
+}
+
+.dm-reveal-flip {
+    transform: perspective(600px) rotateX(15deg);
+}
+
+/* =================================================================
+   Scramble Effect - Text cipher/decode
+   ================================================================= */
+
+.dm-scramble-char {
+    display: inline;
+    white-space: pre;
+}
+
+.dm-scramble-resolved {
+    /* Resolved characters can be styled differently if desired */
+}
+
+/* =================================================================
+   Ripple Effect - Material Design click ripple
+   ================================================================= */
+
+.dm-ripple-container {
+    position: relative;
+    overflow: hidden;
+}
+
+.dm-ripple {
+    position: absolute;
+    border-radius: 50%;
+    pointer-events: none;
+    will-change: transform, opacity;
+}
+
+/* =================================================================
+   Shake Effect - Attention/error animation (keyframes injected by JS)
+   ================================================================= */
+
+/* Static shake keyframes for CSS-only usage */
+@keyframes dm-shake-h {
+    0%, 100% { transform: translateX(0); }
+    10%, 30%, 50%, 70%, 90% { transform: translateX(-6px); }
+    20%, 40%, 60%, 80% { transform: translateX(6px); }
+}
+
+@keyframes dm-shake-v {
+    0%, 100% { transform: translateY(0); }
+    10%, 30%, 50%, 70%, 90% { transform: translateY(-6px); }
+    20%, 40%, 60%, 80% { transform: translateY(6px); }
+}
+
+.dm-shake-h {
+    animation: dm-shake-h 0.5s ease-in-out;
+}
+
+.dm-shake-v {
+    animation: dm-shake-v 0.5s ease-in-out;
+}
+
+/* Reduced motion: disable all effects (unless forced via data-force-animation) */
+@media (prefers-reduced-motion: reduce) {
+    .dm-reveal:not([data-force-animation]) {
+        opacity: 1;
+        transform: none;
+        transition: none;
+    }
+
+    .dm-ripple:not([data-force-animation]) {
+        animation: none !important;
+    }
+
+    .dm-shake-h:not([data-force-animation]),
+    .dm-shake-v:not([data-force-animation]) {
+        animation: none !important;
+    }
+}
+
 /* Animation Classes */
 
 .animate-fade-in {
@@ -4588,11 +4703,11 @@ body.dm-cloaked.dm-ready {
    ============================================ */
 
 /*!
- * Domma Grid CSS v0.14.5
+ * Domma Grid CSS v0.16.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-02-13T16:14:14.190Z
- * Commit: 53db6e0
+ * Built: 2026-02-15T19:34:06.108Z
+ * Commit: 04c480c
  */
 
 /**
@@ -5189,11 +5304,11 @@ body.dm-cloaked.dm-ready {
    ============================================ */
 
 /*!
- * Domma Elements CSS v0.14.5
+ * Domma Elements CSS v0.16.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-02-13T16:14:14.198Z
- * Commit: 53db6e0
+ * Built: 2026-02-15T19:34:06.115Z
+ * Commit: 04c480c
  */
 
 /**
@@ -5491,7 +5606,7 @@ body.dm-cloaked.dm-ready {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) scale(0.95);
-    background-color: var(--dm-white);
+    background-color: var(--dm-surface, var(--dm-white));
     border-radius: var(--dm-radius-lg);
     box-shadow: var(--dm-shadow-xl);
     z-index: 50;
@@ -5681,7 +5796,7 @@ body.dm-cloaked.dm-ready {
     justify-content: space-between;
     padding: var(--dm-space-4) var(--dm-space-6);
     cursor: pointer;
-    background-color: var(--dm-white);
+    background-color: var(--dm-surface, var(--dm-white));
     font-weight: 500;
     transition: background-color var(--dm-transition-fast);
 }
@@ -6853,7 +6968,7 @@ code {
 
 .navbar-link:hover {
     color: var(--dm-text);
-    background-color: var(--dm-gray-800);
+    background-color: var(--dm-hover-bg, var(--dm-gray-800));
     border-radius: 0;
 }
 
@@ -6865,7 +6980,7 @@ code {
 
 .nav-version {
     display: none;
-    color: #eee;
+    color: var(--dm-text-secondary, #eee);
 }
 
 /* Light navbar variant */
@@ -7169,7 +7284,7 @@ code {
 .navbar-dropdown-divider {
     height: 1px;
     margin: 0.5rem 0;
-    background: var(--dm-border-color, rgba(0, 0, 0, 0.1));
+    background: var(--dm-border, rgba(0, 0, 0, 0.1));
     list-style: none;
 }
 
@@ -7494,11 +7609,12 @@ code {
 .hero {
     position: relative;
     padding: var(--dm-space-12) var(--dm-space-6);
-    background-color: var(--dm-gray-100);
+    background-color: var(--dm-background-alt, var(--dm-gray-100));
+    color: var(--dm-text, inherit);
     border: none;
     border-radius: 0;
     margin-bottom: var(--dm-space-6);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--dm-shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.05));
     text-align: center;
 }
 
@@ -7509,7 +7625,7 @@ code {
 }
 
 .hero-dark {
-    background-color: var(--dm-gray-900);
+    background-color: var(--dm-surface-overlay, var(--dm-gray-900));
     color: var(--dm-white);
 }
 
@@ -7791,7 +7907,7 @@ code {
     gap: var(--dm-space-2);
     padding: var(--dm-space-1) var(--dm-space-3);
     background: var(--dm-primary);
-    color: white;
+    color: var(--dm-white);
     font-size: var(--dm-font-size-sm);
     font-weight: 500;
     border-radius: var(--dm-radius-full);
@@ -7800,8 +7916,8 @@ code {
 }
 
 .hero-badge-secondary {
-    background: var(--dm-gray-200);
-    color: var(--dm-gray-900);
+    background: var(--dm-secondary-light, var(--dm-gray-200));
+    color: var(--dm-text, var(--dm-gray-900));
 }
 
 .hero-badge-outline {
@@ -7812,22 +7928,22 @@ code {
 
 .hero-badge-success {
     background: var(--dm-success);
-    color: white;
+    color: var(--dm-white);
 }
 
 .hero-badge-warning {
     background: var(--dm-warning);
-    color: var(--dm-gray-900);
+    color: var(--dm-text, var(--dm-gray-900));
 }
 
 .hero-badge-danger {
     background: var(--dm-danger);
-    color: white;
+    color: var(--dm-white);
 }
 
 .hero-badge-info {
     background: var(--dm-info);
-    color: white;
+    color: var(--dm-white);
 }
 
 /* Badge icon/emoji support */
@@ -7901,43 +8017,43 @@ code {
 /* 5. Additional Gradient Variants - Modern gradient backgrounds */
 
 .hero-gradient-purple {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    color: white;
+    background: linear-gradient(135deg, var(--dm-purple, #667eea) 0%, var(--dm-purple-dark, #764ba2) 100%);
+    color: var(--dm-white);
 }
 
 .hero-gradient-blue {
-    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
-    color: white;
+    background: linear-gradient(135deg, var(--dm-info, #3b82f6) 0%, var(--dm-info-dark, #1e40af) 100%);
+    color: var(--dm-white);
 }
 
 .hero-gradient-green {
-    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
-    color: white;
+    background: linear-gradient(135deg, var(--dm-success, #10b981) 0%, var(--dm-success-dark, #059669) 100%);
+    color: var(--dm-white);
 }
 
 .hero-gradient-sunset {
-    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
-    color: white;
+    background: linear-gradient(135deg, var(--dm-warning, #f59e0b) 0%, var(--dm-danger, #ef4444) 100%);
+    color: var(--dm-white);
 }
 
 .hero-gradient-ocean {
-    background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);
-    color: white;
+    background: linear-gradient(135deg, var(--dm-sky, #0ea5e9) 0%, var(--dm-cyan, #06b6d4) 100%);
+    color: var(--dm-white);
 }
 
 .hero-gradient-rose {
-    background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
-    color: white;
+    background: linear-gradient(135deg, var(--dm-pink, #ec4899) 0%, var(--dm-rose, #f43f5e) 100%);
+    color: var(--dm-white);
 }
 
 .hero-gradient-forest {
-    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
-    color: white;
+    background: linear-gradient(135deg, var(--dm-green, #16a34a) 0%, var(--dm-green-dark, #15803d) 100%);
+    color: var(--dm-white);
 }
 
 .hero-gradient-night {
-    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
-    color: white;
+    background: linear-gradient(135deg, var(--dm-slate-800, #1e293b) 0%, var(--dm-slate-900, #0f172a) 100%);
+    color: var(--dm-white);
 }
 
    CAROUSEL
@@ -8632,8 +8748,8 @@ code {
 }
 
 .sidebar-dark .sidebar-link.active {
-    color: #eaeaea;
-    background: rgba(102, 178, 255, 0.15);
+    color: var(--dm-text-light, #eaeaea);
+    background: var(--dm-primary-light, rgba(102, 178, 255, 0.15));
     border-left-color: var(--dm-primary-light, #66b2ff);
 }
 
@@ -10118,11 +10234,11 @@ code {
     right: 0;
     bottom: 0;
     z-index: 1000;
-    background-color: rgba(255, 255, 255, 0.9);
+    background-color: var(--dm-loader-overlay-bg, rgba(255, 255, 255, 0.9));
 }
 
 [data-theme="dark"] .dm-loader.dm-loader-overlay {
-    background-color: rgba(0, 0, 0, 0.8);
+    background-color: var(--dm-loader-overlay-bg, rgba(0, 0, 0, 0.8));
 }
 
 /* Spinner type */
@@ -10481,7 +10597,7 @@ code {
     width: 16px;
     left: 2px;
     top: 2px;
-    background: white;
+    background: var(--dm-white, #fff);
     border-radius: 50%;
     transition: left 0.2s;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
@@ -10640,7 +10756,7 @@ code {
     width: 16px;
     left: 3px;
     bottom: 3px;
-    background: white;
+    background: var(--dm-white, #fff);
     border-radius: 50%;
     transition: transform 0.3s;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
@@ -11738,11 +11854,11 @@ code {
    ============================================ */
 
 /*!
- * Domma Themes v0.14.5
+ * Domma Themes v0.16.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-02-13T16:14:14.155Z
- * Commit: 53db6e0
+ * Built: 2026-02-15T19:34:06.077Z
+ * Commit: 04c480c
  */
 
 /**