domma-js 0.3.1-alpha → 0.7.0-alpha

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

@@ -1,8 +1,8 @@
 /*!
- * Domma Complete CSS Bundle v0.3.0-alpha.0
+ * Domma Complete CSS Bundle v0.5.0-alpha
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-01-02T14:32:25.779Z
+ * Built: 2026-01-08T09:15:50.457Z
  */
 
 /* ============================================
@@ -11,11 +11,11 @@
    ============================================ */
 
 /*!
- * Domma Core CSS v0.3.0-alpha.0
+ * Domma Core CSS v0.5.0-alpha
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-01-02T14:32:25.385Z
- * Commit: bc8e519
+ * Built: 2026-01-08T09:15:50.022Z
+ * Commit: ad86642
  */
 
 /**
@@ -277,6 +277,44 @@
     --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
     --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
 
+    /* Glow effects - STRONG AND VIBRANT */
+    --dm-glow-sm: 0 0 15px rgba(59, 130, 246, 0.8),
+    0 0 30px rgba(59, 130, 246, 0.6);
+    --dm-glow: 0 0 20px rgba(59, 130, 246, 0.9),
+    0 0 40px rgba(59, 130, 246, 0.7),
+    0 0 60px rgba(59, 130, 246, 0.5);
+    --dm-glow-md: 0 0 25px rgba(59, 130, 246, 1),
+    0 0 50px rgba(59, 130, 246, 0.8),
+    0 0 75px rgba(59, 130, 246, 0.6);
+    --dm-glow-lg: 0 0 30px rgba(59, 130, 246, 1),
+    0 0 60px rgba(59, 130, 246, 0.9),
+    0 0 90px rgba(59, 130, 246, 0.7),
+    0 0 120px rgba(59, 130, 246, 0.5);
+    --dm-glow-xl: 0 0 40px rgba(59, 130, 246, 1),
+    0 0 80px rgba(59, 130, 246, 0.9),
+    0 0 120px rgba(59, 130, 246, 0.7),
+    0 0 160px rgba(59, 130, 246, 0.5);
+
+    /* Colour-specific glows - INTENSE */
+    --dm-glow-primary: 0 0 20px rgba(59, 130, 246, 1),
+    0 0 40px rgba(59, 130, 246, 0.8),
+    0 0 60px rgba(59, 130, 246, 0.6);
+    --dm-glow-secondary: 0 0 20px rgba(139, 92, 246, 1),
+    0 0 40px rgba(139, 92, 246, 0.8),
+    0 0 60px rgba(139, 92, 246, 0.6);
+    --dm-glow-success: 0 0 20px rgba(34, 197, 94, 1),
+    0 0 40px rgba(34, 197, 94, 0.8),
+    0 0 60px rgba(34, 197, 94, 0.6);
+    --dm-glow-warning: 0 0 20px rgba(245, 158, 11, 1),
+    0 0 40px rgba(245, 158, 11, 0.8),
+    0 0 60px rgba(245, 158, 11, 0.6);
+    --dm-glow-danger: 0 0 20px rgba(239, 68, 68, 1),
+    0 0 40px rgba(239, 68, 68, 0.8),
+    0 0 60px rgba(239, 68, 68, 0.6);
+    --dm-glow-info: 0 0 20px rgba(14, 165, 233, 1),
+    0 0 40px rgba(14, 165, 233, 0.8),
+    0 0 60px rgba(14, 165, 233, 0.6);
+
     /* ================================================
        TRANSPARENCY & OPACITY
        ================================================ */
@@ -1488,6 +1526,505 @@ code, pre {
     transition: text-shadow 0.3s ease;
 }
 
+.glow-secondary-hover:hover {
+    text-shadow: var(--dm-glow-secondary);
+    transition: text-shadow 0.3s ease;
+}
+
+.glow-info-hover:hover {
+    text-shadow: var(--dm-glow-info);
+    transition: text-shadow 0.3s ease;
+}
+
+/* ============================================
+   FIREWORKS EFFECTS
+   Realistic particle-based fireworks animations
+   ============================================ */
+
+/* Firework CSS Variables */
+:root {
+    --dm-fw-launch-height: 200px;
+    --dm-fw-explosion-size: 150px;
+    --dm-fw-particle-size: 2px;
+    --dm-fw-duration: 3s;
+    --dm-fw-delay: 0s;
+
+    /* Default firework colours - bright, vibrant colours */
+    --dm-fw-color-1: #ffeb3b; /* Bright Yellow */
+    --dm-fw-color-2: #ff4444; /* Bright Red */
+    --dm-fw-color-3: #44ffdd; /* Cyan */
+    --dm-fw-color-4: #4488ff; /* Bright Blue */
+    --dm-fw-color-5: #ff8844; /* Orange */
+    --dm-fw-color-6: #ff44ff; /* Magenta */
+    --dm-fw-color-7: #44ff88; /* Lime */
+    --dm-fw-color-8: #ffff88; /* Light Yellow */
+}
+
+/* Base firework container */
+.firework {
+    position: relative;
+    display: inline-block;
+    pointer-events: none;
+    width: var(--dm-fw-explosion-size);
+    height: calc(var(--dm-fw-launch-height) + var(--dm-fw-explosion-size));
+    overflow: visible;
+}
+
+/* Rocket trail that launches upward */
+.firework-launch {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    width: 3px;
+    height: 8px;
+    background: linear-gradient(to top, transparent, #ffa500, #fff);
+    transform: translateX(-50%);
+    animation: dm-fw-launch 1s ease-out forwards;
+}
+
+.firework-launch::after {
+    content: '';
+    position: absolute;
+    bottom: -10px;
+    left: 50%;
+    width: 2px;
+    height: 20px;
+    background: linear-gradient(to top, transparent, rgba(255, 165, 0, 0.3));
+    transform: translateX(-50%);
+    filter: blur(2px);
+}
+
+/* Explosion particles */
+.firework-particles {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: var(--dm-fw-explosion-size);
+    height: var(--dm-fw-explosion-size);
+    transform: translateX(-50%);
+    opacity: 0;
+    animation-delay: 1s; /* Wait for launch */
+}
+
+/* Main burst - creates many particles using box-shadow */
+.firework-burst .firework-particles::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: var(--dm-fw-particle-size);
+    height: var(--dm-fw-particle-size);
+    background: var(--dm-fw-color-1);
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    animation: dm-fw-explode 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+    box-shadow: /* Ring 1 - 8 particles at 30° intervals */ 0 0 3px var(--dm-fw-color-1),
+    0 -20px 0 0 var(--dm-fw-color-1),
+    14px -14px 0 0 var(--dm-fw-color-2),
+    20px 0 0 0 var(--dm-fw-color-3),
+    14px 14px 0 0 var(--dm-fw-color-4),
+    0 20px 0 0 var(--dm-fw-color-5),
+    -14px 14px 0 0 var(--dm-fw-color-6),
+    -20px 0 0 0 var(--dm-fw-color-7),
+    -14px -14px 0 0 var(--dm-fw-color-8),
+        /* Ring 2 - 12 particles */ 0 -35px 0 0 var(--dm-fw-color-2),
+    17px -30px 0 0 var(--dm-fw-color-3),
+    30px -17px 0 0 var(--dm-fw-color-4),
+    35px 0 0 0 var(--dm-fw-color-5),
+    30px 17px 0 0 var(--dm-fw-color-6),
+    17px 30px 0 0 var(--dm-fw-color-7),
+    0 35px 0 0 var(--dm-fw-color-8),
+    -17px 30px 0 0 var(--dm-fw-color-1),
+    -30px 17px 0 0 var(--dm-fw-color-2),
+    -35px 0 0 0 var(--dm-fw-color-3),
+    -30px -17px 0 0 var(--dm-fw-color-4),
+    -17px -30px 0 0 var(--dm-fw-color-5),
+        /* Ring 3 - 16 particles */ 0 -50px 0 0 var(--dm-fw-color-6),
+    19px -46px 0 0 var(--dm-fw-color-7),
+    35px -35px 0 0 var(--dm-fw-color-8),
+    46px -19px 0 0 var(--dm-fw-color-1),
+    50px 0 0 0 var(--dm-fw-color-2),
+    46px 19px 0 0 var(--dm-fw-color-3),
+    35px 35px 0 0 var(--dm-fw-color-4),
+    19px 46px 0 0 var(--dm-fw-color-5),
+    0 50px 0 0 var(--dm-fw-color-6),
+    -19px 46px 0 0 var(--dm-fw-color-7),
+    -35px 35px 0 0 var(--dm-fw-color-8),
+    -46px 19px 0 0 var(--dm-fw-color-1),
+    -50px 0 0 0 var(--dm-fw-color-2),
+    -46px -19px 0 0 var(--dm-fw-color-3),
+    -35px -35px 0 0 var(--dm-fw-color-4),
+    -19px -46px 0 0 var(--dm-fw-color-5);
+}
+
+/* Secondary layer for more particles and trailing effect */
+.firework-burst .firework-particles::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: calc(var(--dm-fw-particle-size) * 0.8);
+    height: calc(var(--dm-fw-particle-size) * 0.8);
+    background: var(--dm-fw-color-3);
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    animation: dm-fw-explode-secondary 2.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+    box-shadow: /* Offset particles for depth */ 0 0 2px var(--dm-fw-color-3),
+    10px -25px 0 0 var(--dm-fw-color-4),
+    25px -10px 0 0 var(--dm-fw-color-5),
+    25px 10px 0 0 var(--dm-fw-color-6),
+    10px 25px 0 0 var(--dm-fw-color-7),
+    -10px 25px 0 0 var(--dm-fw-color-8),
+    -25px 10px 0 0 var(--dm-fw-color-1),
+    -25px -10px 0 0 var(--dm-fw-color-2),
+    -10px -25px 0 0 var(--dm-fw-color-3),
+        /* Extra sparkles */ 8px -42px 0 0 var(--dm-fw-color-4),
+    42px -8px 0 0 var(--dm-fw-color-5),
+    42px 8px 0 0 var(--dm-fw-color-6),
+    8px 42px 0 0 var(--dm-fw-color-7),
+    -8px 42px 0 0 var(--dm-fw-color-8),
+    -42px 8px 0 0 var(--dm-fw-color-1),
+    -42px -8px 0 0 var(--dm-fw-color-2),
+    -8px -42px 0 0 var(--dm-fw-color-3);
+}
+
+/* Sparkle animation - twinkling particles */
+.firework-sparkle::before {
+    width: 2px;
+    height: 2px;
+    background: white;
+    box-shadow: /* Create sparkle pattern */ 0 0 3px 1px rgba(255, 255, 255, 0.8),
+    10px -10px 0 0 var(--dm-fw-color-1),
+    10px -10px 3px 1px var(--dm-fw-color-1),
+    -10px -10px 0 0 var(--dm-fw-color-2),
+    -10px -10px 3px 1px var(--dm-fw-color-2),
+    -10px 10px 0 0 var(--dm-fw-color-3),
+    -10px 10px 3px 1px var(--dm-fw-color-3),
+    10px 10px 0 0 var(--dm-fw-color-4),
+    10px 10px 3px 1px var(--dm-fw-color-4),
+    20px 0 0 0 var(--dm-fw-color-5),
+    20px 0 3px 1px var(--dm-fw-color-5),
+    -20px 0 0 0 var(--dm-fw-color-6),
+    -20px 0 3px 1px var(--dm-fw-color-6),
+    0 20px 0 0 var(--dm-fw-color-7),
+    0 20px 3px 1px var(--dm-fw-color-7),
+    0 -20px 0 0 var(--dm-fw-color-8),
+    0 -20px 3px 1px var(--dm-fw-color-8);
+    animation: dm-firework-sparkle var(--dm-fw-duration) ease-out forwards;
+    animation-delay: var(--dm-fw-delay);
+    opacity: 0;
+}
+
+.firework-sparkle::after {
+    width: 2px;
+    height: 2px;
+    background: white;
+    box-shadow: /* Secondary sparkle layer */ 15px -15px 0 0 var(--dm-fw-color-1),
+    15px -15px 4px 2px rgba(255, 235, 59, 0.5),
+    -15px -15px 0 0 var(--dm-fw-color-3),
+    -15px -15px 4px 2px rgba(78, 205, 196, 0.5),
+    -15px 15px 0 0 var(--dm-fw-color-5),
+    -15px 15px 4px 2px rgba(243, 156, 18, 0.5),
+    15px 15px 0 0 var(--dm-fw-color-7),
+    15px 15px 4px 2px rgba(253, 121, 168, 0.5);
+    animation: dm-firework-sparkle-alt var(--dm-fw-duration) ease-out forwards;
+    animation-delay: calc(var(--dm-fw-delay) + 0.2s);
+    opacity: 0;
+}
+
+/* Trail animation - launch and falling particles */
+.firework-trail::before {
+    width: 3px;
+    height: 3px;
+    background: var(--dm-fw-color-1);
+    box-shadow: 0 0 10px 2px var(--dm-fw-color-1),
+    0 5px 2px 0 rgba(255, 235, 59, 0.8),
+    0 10px 2px 0 rgba(255, 235, 59, 0.6),
+    0 15px 2px 0 rgba(255, 235, 59, 0.4),
+    0 20px 2px 0 rgba(255, 235, 59, 0.2);
+    animation: dm-firework-launch var(--dm-fw-duration) ease-out forwards;
+    animation-delay: var(--dm-fw-delay);
+}
+
+/* Size variants */
+.firework-sm::before,
+.firework-sm::after {
+    width: var(--dm-fw-size-sm);
+    height: var(--dm-fw-size-sm);
+}
+
+.firework-md::before,
+.firework-md::after {
+    width: var(--dm-fw-size-md);
+    height: var(--dm-fw-size-md);
+}
+
+.firework-lg::before,
+.firework-lg::after {
+    width: var(--dm-fw-size-lg);
+    height: var(--dm-fw-size-lg);
+}
+
+.firework-xl::before,
+.firework-xl::after {
+    width: var(--dm-fw-size-xl);
+    height: var(--dm-fw-size-xl);
+}
+
+/* Colour variants */
+.firework-primary {
+    --dm-fw-color-1: var(--dm-primary);
+    --dm-fw-color-2: var(--dm-primary-light);
+    --dm-fw-color-3: var(--dm-primary-dark);
+    --dm-fw-color-4: var(--dm-primary);
+    --dm-fw-color-5: var(--dm-primary);
+    --dm-fw-color-6: var(--dm-primary-light);
+    --dm-fw-color-7: var(--dm-primary-dark);
+    --dm-fw-color-8: var(--dm-primary);
+}
+
+.firework-secondary {
+    --dm-fw-color-1: var(--dm-secondary);
+    --dm-fw-color-2: var(--dm-secondary-light);
+    --dm-fw-color-3: var(--dm-secondary-dark);
+    --dm-fw-color-4: var(--dm-secondary);
+    --dm-fw-color-5: var(--dm-secondary);
+    --dm-fw-color-6: var(--dm-secondary-light);
+    --dm-fw-color-7: var(--dm-secondary-dark);
+    --dm-fw-color-8: var(--dm-secondary);
+}
+
+.firework-success {
+    --dm-fw-color-1: var(--dm-success);
+    --dm-fw-color-2: var(--dm-success-light);
+    --dm-fw-color-3: var(--dm-success-dark);
+    --dm-fw-color-4: var(--dm-success);
+    --dm-fw-color-5: var(--dm-success);
+    --dm-fw-color-6: var(--dm-success-light);
+    --dm-fw-color-7: var(--dm-success-dark);
+    --dm-fw-color-8: var(--dm-success);
+}
+
+.firework-warning {
+    --dm-fw-color-1: var(--dm-warning);
+    --dm-fw-color-2: var(--dm-warning-light);
+    --dm-fw-color-3: var(--dm-warning-dark);
+    --dm-fw-color-4: var(--dm-warning);
+    --dm-fw-color-5: var(--dm-warning);
+    --dm-fw-color-6: var(--dm-warning-light);
+    --dm-fw-color-7: var(--dm-warning-dark);
+    --dm-fw-color-8: var(--dm-warning);
+}
+
+.firework-danger {
+    --dm-fw-color-1: var(--dm-danger);
+    --dm-fw-color-2: var(--dm-danger-light);
+    --dm-fw-color-3: var(--dm-danger-dark);
+    --dm-fw-color-4: var(--dm-danger);
+    --dm-fw-color-5: var(--dm-danger);
+    --dm-fw-color-6: var(--dm-danger-light);
+    --dm-fw-color-7: var(--dm-danger-dark);
+    --dm-fw-color-8: var(--dm-danger);
+}
+
+.firework-info {
+    --dm-fw-color-1: var(--dm-info);
+    --dm-fw-color-2: var(--dm-info-light);
+    --dm-fw-color-3: var(--dm-info-dark);
+    --dm-fw-color-4: var(--dm-info);
+    --dm-fw-color-5: var(--dm-info);
+    --dm-fw-color-6: var(--dm-info-light);
+    --dm-fw-color-7: var(--dm-info-dark);
+    --dm-fw-color-8: var(--dm-info);
+}
+
+.firework-rainbow {
+    --dm-fw-color-1: #ff0000;
+    --dm-fw-color-2: #ff7f00;
+    --dm-fw-color-3: #ffff00;
+    --dm-fw-color-4: #00ff00;
+    --dm-fw-color-5: #0000ff;
+    --dm-fw-color-6: #4b0082;
+    --dm-fw-color-7: #9400d3;
+    --dm-fw-color-8: #ff1493;
+}
+
+/* Continuous animation */
+.firework-continuous::before,
+.firework-continuous::after {
+    animation-iteration-count: infinite;
+}
+
+/* Trigger on hover */
+.firework-on-hover {
+    position: relative;
+}
+
+.firework-on-hover::before,
+.firework-on-hover::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: var(--dm-fw-size);
+    height: var(--dm-fw-size);
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    pointer-events: none;
+}
+
+.firework-on-hover:hover::before {
+    background: var(--dm-fw-color-1);
+    box-shadow: /* Inner ring - 8 particles */ 0 -30px 0 1px var(--dm-fw-color-1),
+    21px -21px 0 1px var(--dm-fw-color-2),
+    30px 0 0 1px var(--dm-fw-color-3),
+    21px 21px 0 1px var(--dm-fw-color-4),
+    0 30px 0 1px var(--dm-fw-color-5),
+    -21px 21px 0 1px var(--dm-fw-color-6),
+    -30px 0 0 1px var(--dm-fw-color-7),
+    -21px -21px 0 1px var(--dm-fw-color-8),
+        /* Outer ring */ 0 -50px 0 0 var(--dm-fw-color-2),
+    35px -35px 0 0 var(--dm-fw-color-3),
+    50px 0 0 0 var(--dm-fw-color-4),
+    35px 35px 0 0 var(--dm-fw-color-5),
+    0 50px 0 0 var(--dm-fw-color-6),
+    -35px 35px 0 0 var(--dm-fw-color-7),
+    -50px 0 0 0 var(--dm-fw-color-8),
+    -35px -35px 0 0 var(--dm-fw-color-1);
+    animation: dm-firework-burst 1.5s ease-out forwards;
+}
+
+.firework-on-hover:hover::after {
+    background: var(--dm-fw-color-3);
+    box-shadow: 15px -40px 0 0 var(--dm-fw-color-1),
+    40px -15px 0 0 var(--dm-fw-color-3),
+    40px 15px 0 0 var(--dm-fw-color-5),
+    15px 40px 0 0 var(--dm-fw-color-7),
+    -15px 40px 0 0 var(--dm-fw-color-2),
+    -40px 15px 0 0 var(--dm-fw-color-4),
+    -40px -15px 0 0 var(--dm-fw-color-6),
+    -15px -40px 0 0 var(--dm-fw-color-8);
+    animation: dm-firework-burst-secondary 1.5s ease-out forwards;
+}
+
+/* Keyframe Animations */
+
+/* Launch animation - rocket goes up */
+@keyframes dm-fw-launch {
+    0% {
+        transform: translateX(-50%) translateY(0);
+        opacity: 1;
+    }
+    100% {
+        transform: translateX(-50%) translateY(calc(-1 * var(--dm-fw-launch-height)));
+        opacity: 0;
+    }
+}
+
+/* Main explosion - particles burst outward then fall with gravity */
+@keyframes dm-fw-explode {
+    0% {
+        transform: translate(-50%, -50%) scale(0);
+        opacity: 0;
+    }
+    5% {
+        transform: translate(-50%, -50%) scale(0.1);
+        opacity: 1;
+    }
+    25% {
+        transform: translate(-50%, -50%) scale(2.5);
+        opacity: 1;
+    }
+    50% {
+        transform: translate(-50%, -50%) scale(3.5) translateY(10px);
+        opacity: 0.9;
+    }
+    75% {
+        transform: translate(-50%, -50%) scale(4) translateY(40px);
+        opacity: 0.6;
+    }
+    100% {
+        transform: translate(-50%, -50%) scale(4.5) translateY(100px);
+        opacity: 0;
+    }
+}
+
+/* Secondary explosion with slight delay and rotation */
+@keyframes dm-fw-explode-secondary {
+    0% {
+        transform: translate(-50%, -50%) scale(0) rotate(0deg);
+        opacity: 0;
+    }
+    10% {
+        transform: translate(-50%, -50%) scale(0.2) rotate(45deg);
+        opacity: 1;
+    }
+    30% {
+        transform: translate(-50%, -50%) scale(2.2) rotate(90deg);
+        opacity: 1;
+    }
+    55% {
+        transform: translate(-50%, -50%) scale(3.2) rotate(135deg) translateY(15px);
+        opacity: 0.8;
+    }
+    80% {
+        transform: translate(-50%, -50%) scale(3.8) rotate(180deg) translateY(50px);
+        opacity: 0.5;
+    }
+    100% {
+        transform: translate(-50%, -50%) scale(4.2) rotate(225deg) translateY(120px);
+        opacity: 0;
+    }
+}
+
+/* Sparkle animation for twinkling effect */
+@keyframes dm-fw-sparkle {
+    0%, 100% {
+        transform: translate(-50%, -50%) scale(1);
+        opacity: 0;
+    }
+    10% {
+        transform: translate(-50%, -50%) scale(0.5);
+        opacity: 1;
+    }
+    50% {
+        transform: translate(-50%, -50%) scale(1.5);
+        opacity: 1;
+    }
+    90% {
+        transform: translate(-50%, -50%) scale(2) translateY(30px);
+        opacity: 0;
+    }
+}
+
+/* Crackle effect - small rapid sparkles */
+@keyframes dm-fw-crackle {
+    0%, 100% {
+        opacity: 0;
+    }
+    25%, 75% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
+}
+
+/* Multiple fireworks container */
+.fireworks-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 9999;
+}
+
+.fireworks-container .firework {
+    position: absolute;
+}
+
 /* ============================================
    SIZE UTILITIES
    ============================================ */
@@ -1827,6 +2364,43 @@ code, pre {
     color: var(--dm-warning);
 }
 
+/* Validation State Container Classes */
+.has-success .form-input,
+.has-success .form-select,
+.has-success .form-textarea {
+    border-color: var(--dm-success);
+}
+
+.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);
+}
+
+.has-error .form-input,
+.has-error .form-select,
+.has-error .form-textarea {
+    border-color: var(--dm-danger);
+}
+
+.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);
+}
+
+.has-warning .form-input,
+.has-warning .form-select,
+.has-warning .form-textarea {
+    border-color: var(--dm-warning);
+}
+
+.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);
+}
+
 /* Input Sizes */
 .form-input-sm,
 .form-select-sm,
@@ -2205,6 +2779,63 @@ code, pre {
     cursor: pointer;
 }
 
+/* Form Sections */
+.domma-form-section {
+    border: 1px solid var(--dm-border, var(--dm-gray-200));
+    border-radius: var(--dm-radius-lg);
+    padding: var(--dm-space-6);
+    margin-bottom: var(--dm-space-6);
+    background-color: var(--dm-surface, var(--dm-white));
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    transition: box-shadow 0.15s ease;
+}
+
+.domma-form-section:hover {
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.domma-form-section-title {
+    font-size: var(--dm-font-size-lg);
+    font-weight: var(--dm-font-weight-semibold);
+    color: var(--dm-primary);
+    margin: 0 0 var(--dm-space-4) 0;
+    padding: 0 var(--dm-space-4);
+    border-bottom: 2px solid var(--dm-primary);
+    display: inline-block;
+    background-color: var(--dm-surface, var(--dm-white));
+    position: relative;
+    top: calc(-1 * var(--dm-space-6) - 1px);
+    left: 0;
+    border-radius: var(--dm-radius-md) var(--dm-radius-md) 0 0;
+}
+
+.domma-form-section-content {
+    margin-top: calc(-1 * var(--dm-space-2));
+}
+
+/* Dark theme adjustments */
+.dm-theme-dark .domma-form-section {
+    background-color: var(--dm-gray-800);
+    border-color: var(--dm-gray-700);
+}
+
+.dm-theme-dark .domma-form-section-title {
+    background-color: var(--dm-gray-800);
+    color: var(--dm-primary-light, var(--dm-blue-400));
+    border-color: var(--dm-primary-light, var(--dm-blue-400));
+}
+
+/* Compact form sections */
+.domma-form-section.compact {
+    padding: var(--dm-space-4);
+    margin-bottom: var(--dm-space-4);
+}
+
+.domma-form-section.compact .domma-form-section-title {
+    font-size: var(--dm-font-size-base);
+    top: calc(-1 * var(--dm-space-4) - 1px);
+}
+
 /* ============================================
    COMPONENT: Badge
    ============================================ */
@@ -2418,68 +3049,1019 @@ code, pre {
     --dm-glow-md: 0 0 20px rgba(255, 255, 255, 0.6);
     --dm-glow-lg: 0 0 30px rgba(255, 255, 255, 0.7);
     --dm-glow-xl: 0 0 40px rgba(255, 255, 255, 0.8);
-    
+
     --dm-glow-primary: 0 0 20px rgba(59, 130, 246, 0.6);
     --dm-glow-secondary: 0 0 20px rgba(139, 92, 246, 0.6);
     --dm-glow-success: 0 0 20px rgba(34, 197, 94, 0.6);
     --dm-glow-warning: 0 0 20px rgba(245, 158, 11, 0.6);
     --dm-glow-danger: 0 0 20px rgba(239, 68, 68, 0.6);
     --dm-glow-info: 0 0 20px rgba(14, 165, 233, 0.6);
-}
 
+    /* ================================================
+       ANIMATION VARIABLES
+       ================================================ */
+    --dm-animate-duration: 1s;
+    --dm-animate-delay: 0s;
+    --dm-animate-timing: ease;
+}
 
 /* ============================================
-   GRID SYSTEM
-   Bootstrap + CSS Grid utilities
+   ANIMATION UTILITIES
    ============================================ */
 
-/*!
- * Domma Grid CSS v0.3.0-alpha.0
- * Dynamic Object Manipulation & Modeling API
- * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-01-02T14:32:25.394Z
- * Commit: bc8e519
- */
-
-/**
- * Domma Grid System
- * Bootstrap-style 12-column flexbox grid with mobile-first stacking
- *
- * Usage:
- *   <div class="row">
- *       <div class="col-4">Column 1</div>
- *       <div class="col-4">Column 2</div>
- *       <div class="col-4">Column 3</div>
- *   </div>
- *
- * Mobile-first: columns stack below 576px, activate grid above
- */
+/* Animation Keyframes */
 
-/* ============================================
-   ROW CONTAINER
-   ============================================ */
+@keyframes dm-fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
 
-.row {
-    display: flex;
-    flex-wrap: wrap;
-    margin-left: calc(var(--dm-space-3, 0.75rem) * -1);
-    margin-right: calc(var(--dm-space-3, 0.75rem) * -1);
+@keyframes dm-fade-out {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
 }
 
-/* No gutters variant */
-.row.no-gutters {
-    margin-left: 0;
-    margin-right: 0;
+@keyframes dm-fade-in-up {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
-.row.no-gutters > [class*="col"] {
-    padding-left: 0;
-    padding-right: 0;
+@keyframes dm-fade-in-down {
+    from {
+        opacity: 0;
+        transform: translateY(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
-/* ============================================
-   COLUMN BASE STYLES
-   ============================================ */
+@keyframes dm-fade-in-left {
+    from {
+        opacity: 0;
+        transform: translateX(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes dm-fade-in-right {
+    from {
+        opacity: 0;
+        transform: translateX(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes dm-slide-in-up {
+    from {
+        transform: translateY(100%);
+    }
+    to {
+        transform: translateY(0);
+    }
+}
+
+@keyframes dm-slide-in-down {
+    from {
+        transform: translateY(-100%);
+    }
+    to {
+        transform: translateY(0);
+    }
+}
+
+@keyframes dm-slide-in-left {
+    from {
+        transform: translateX(-100%);
+    }
+    to {
+        transform: translateX(0);
+    }
+}
+
+@keyframes dm-slide-in-right {
+    from {
+        transform: translateX(100%);
+    }
+    to {
+        transform: translateX(0);
+    }
+}
+
+@keyframes dm-zoom-in {
+    from {
+        opacity: 0;
+        transform: scale(0.8);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+@keyframes dm-zoom-out {
+    from {
+        opacity: 1;
+        transform: scale(1);
+    }
+    to {
+        opacity: 0;
+        transform: scale(0.8);
+    }
+}
+
+@keyframes dm-bounce {
+    0%, 20%, 50%, 80%, 100% {
+        transform: translateY(0);
+    }
+    40% {
+        transform: translateY(-20px);
+    }
+    60% {
+        transform: translateY(-10px);
+    }
+}
+
+@keyframes dm-pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
+}
+
+@keyframes dm-shake {
+    0%, 100% {
+        transform: translateX(0);
+    }
+    10%, 30%, 50%, 70%, 90% {
+        transform: translateX(-5px);
+    }
+    20%, 40%, 60%, 80% {
+        transform: translateX(5px);
+    }
+}
+
+@keyframes dm-spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes dm-rotate-in {
+    from {
+        opacity: 0;
+        transform: rotate(-180deg) scale(0.8);
+    }
+    to {
+        opacity: 1;
+        transform: rotate(0) scale(1);
+    }
+}
+
+@keyframes dm-flip {
+    from {
+        transform: perspective(400px) rotateY(90deg);
+        opacity: 0;
+    }
+    to {
+        transform: perspective(400px) rotateY(0);
+        opacity: 1;
+    }
+}
+
+/* Animation Classes */
+
+.animate-fade-in {
+    animation-name: dm-fade-in;
+    animation-duration: var(--dm-animate-duration, 1s);
+    animation-timing-function: var(--dm-animate-timing, ease);
+    animation-delay: var(--dm-animate-delay, 0s);
+    animation-fill-mode: both;
+}
+
+.animate-fade-out {
+    animation-name: dm-fade-out;
+    animation-duration: var(--dm-animate-duration, 1s);
+    animation-timing-function: var(--dm-animate-timing, ease);
+    animation-delay: var(--dm-animate-delay, 0s);
+    animation-fill-mode: both;
+}
+
+.animate-fade-in-up {
+    animation-name: dm-fade-in-up;
+    animation-duration: var(--dm-animate-duration, 1s);
+    animation-timing-function: var(--dm-animate-timing, ease);
+    animation-delay: var(--dm-animate-delay, 0s);
+    animation-fill-mode: both;
+}
+
+.animate-fade-in-down {
+    animation-name: dm-fade-in-down;
+    animation-duration: var(--dm-animate-duration, 1s);
+    animation-timing-function: var(--dm-animate-timing, ease);
+    animation-delay: var(--dm-animate-delay, 0s);
+    animation-fill-mode: both;
+}
+
+.animate-fade-in-left {
+    animation-name: dm-fade-in-left;
+    animation-duration: var(--dm-animate-duration, 1s);
+    animation-timing-function: var(--dm-animate-timing, ease);
+    animation-delay: var(--dm-animate-delay, 0s);
+    animation-fill-mode: both;
+}
+
+.animate-fade-in-right {
+    animation-name: dm-fade-in-right;
+    animation-duration: var(--dm-animate-duration, 1s);
+    animation-timing-function: var(--dm-animate-timing, ease);
+    animation-delay: var(--dm-animate-delay, 0s);
+    animation-fill-mode: both;
+}
+
+.animate-slide-in-up {
+    animation-name: dm-slide-in-up;
+    animation-duration: var(--dm-animate-duration, 1s);
+    animation-timing-function: var(--dm-animate-timing, ease);
+    animation-delay: var(--dm-animate-delay, 0s);
+    animation-fill-mode: both;
+}
+
+.animate-slide-in-down {
+    animation-name: dm-slide-in-down;
+    animation-duration: var(--dm-animate-duration, 1s);
+    animation-timing-function: var(--dm-animate-timing, ease);
+    animation-delay: var(--dm-animate-delay, 0s);
+    animation-fill-mode: both;
+}
+
+.animate-slide-in-left {
+    animation-name: dm-slide-in-left;
+    animation-duration: var(--dm-animate-duration, 1s);
+    animation-timing-function: var(--dm-animate-timing, ease);
+    animation-delay: var(--dm-animate-delay, 0s);
+    animation-fill-mode: both;
+}
+
+.animate-slide-in-right {
+    animation-name: dm-slide-in-right;
+    animation-duration: var(--dm-animate-duration, 1s);
+    animation-timing-function: var(--dm-animate-timing, ease);
+    animation-delay: var(--dm-animate-delay, 0s);
+    animation-fill-mode: both;
+}
+
+.animate-zoom-in {
+    animation-name: dm-zoom-in;
+    animation-duration: var(--dm-animate-duration, 1s);
+    animation-timing-function: var(--dm-animate-timing, ease);
+    animation-delay: var(--dm-animate-delay, 0s);
+    animation-fill-mode: both;
+}
+
+.animate-zoom-out {
+    animation-name: dm-zoom-out;
+    animation-duration: var(--dm-animate-duration, 1s);
+    animation-timing-function: var(--dm-animate-timing, ease);
+    animation-delay: var(--dm-animate-delay, 0s);
+    animation-fill-mode: both;
+}
+
+.animate-bounce {
+    animation-name: dm-bounce;
+    animation-duration: var(--dm-animate-duration, 1s);
+    animation-timing-function: var(--dm-animate-timing, ease);
+    animation-delay: var(--dm-animate-delay, 0s);
+    animation-fill-mode: both;
+}
+
+.animate-pulse {
+    animation-name: dm-pulse;
+    animation-duration: var(--dm-animate-duration, 1s);
+    animation-timing-function: var(--dm-animate-timing, ease);
+    animation-delay: var(--dm-animate-delay, 0s);
+    animation-fill-mode: both;
+}
+
+.animate-shake {
+    animation-name: dm-shake;
+    animation-duration: 0.5s;
+    animation-timing-function: ease;
+    animation-fill-mode: both;
+}
+
+.animate-spin {
+    animation-name: dm-spin;
+    animation-duration: var(--dm-animate-duration, 1s);
+    animation-timing-function: linear;
+    animation-delay: var(--dm-animate-delay, 0s);
+    animation-fill-mode: both;
+}
+
+.animate-rotate-in {
+    animation-name: dm-rotate-in;
+    animation-duration: var(--dm-animate-duration, 1s);
+    animation-timing-function: var(--dm-animate-timing, ease);
+    animation-delay: var(--dm-animate-delay, 0s);
+    animation-fill-mode: both;
+}
+
+.animate-flip {
+    animation-name: dm-flip;
+    animation-duration: var(--dm-animate-duration, 1s);
+    animation-timing-function: var(--dm-animate-timing, ease);
+    animation-delay: var(--dm-animate-delay, 0s);
+    animation-fill-mode: both;
+}
+
+/* Animation Control Classes */
+
+.animate-infinite {
+    animation-iteration-count: infinite;
+}
+
+.animate-once {
+    animation-iteration-count: 1;
+}
+
+.animate-repeat-2 {
+    animation-iteration-count: 2;
+}
+
+.animate-repeat-3 {
+    animation-iteration-count: 3;
+}
+
+/* Animation Durations */
+
+.animate-duration-fast {
+    --dm-animate-duration: 0.3s;
+}
+
+.animate-duration-normal {
+    --dm-animate-duration: 0.6s;
+}
+
+.animate-duration-slow {
+    --dm-animate-duration: 1s;
+}
+
+.animate-duration-slower {
+    --dm-animate-duration: 2s;
+}
+
+/* Animation Delays */
+
+.animate-delay-100 {
+    --dm-animate-delay: 0.1s;
+}
+
+.animate-delay-200 {
+    --dm-animate-delay: 0.2s;
+}
+
+.animate-delay-300 {
+    --dm-animate-delay: 0.3s;
+}
+
+.animate-delay-500 {
+    --dm-animate-delay: 0.5s;
+}
+
+.animate-delay-1000 {
+    --dm-animate-delay: 1s;
+}
+
+/* Hover Animations */
+
+.animate-fade-in-hover:hover {
+    animation-name: dm-fade-in;
+    animation-duration: 0.3s;
+    animation-timing-function: ease;
+    animation-fill-mode: both;
+}
+
+.animate-bounce-hover:hover {
+    animation-name: dm-bounce;
+    animation-duration: 0.6s;
+    animation-timing-function: ease;
+    animation-fill-mode: both;
+}
+
+.animate-pulse-hover:hover {
+    animation-name: dm-pulse;
+    animation-duration: 1s;
+    animation-timing-function: ease;
+    animation-fill-mode: both;
+}
+
+.animate-shake-hover:hover {
+    animation-name: dm-shake;
+    animation-duration: 0.5s;
+    animation-timing-function: ease;
+    animation-fill-mode: both;
+}
+
+.animate-spin-hover:hover {
+    animation-name: dm-spin;
+    animation-duration: 1s;
+    animation-timing-function: linear;
+    animation-fill-mode: both;
+}
+
+/* ============================================
+   GRADIENT UTILITIES
+   ============================================ */
+
+/* Background Gradients */
+
+.bg-gradient-primary {
+    background: linear-gradient(135deg, var(--dm-primary) 0%, var(--dm-primary-dark) 100%);
+}
+
+.bg-gradient-secondary {
+    background: linear-gradient(135deg, var(--dm-secondary) 0%, var(--dm-secondary-dark) 100%);
+}
+
+.bg-gradient-success {
+    background: linear-gradient(135deg, var(--dm-success) 0%, var(--dm-success-dark) 100%);
+}
+
+.bg-gradient-danger {
+    background: linear-gradient(135deg, var(--dm-danger) 0%, var(--dm-danger-dark) 100%);
+}
+
+.bg-gradient-warning {
+    background: linear-gradient(135deg, var(--dm-warning) 0%, var(--dm-warning-dark) 100%);
+}
+
+.bg-gradient-info {
+    background: linear-gradient(135deg, var(--dm-info) 0%, var(--dm-info-dark) 100%);
+}
+
+/* Directional Gradients */
+
+.bg-gradient-to-t {
+    background: linear-gradient(to top, var(--dm-gradient-from, transparent), var(--dm-gradient-to, transparent));
+}
+
+.bg-gradient-to-tr {
+    background: linear-gradient(to top right, var(--dm-gradient-from, transparent), var(--dm-gradient-to, transparent));
+}
+
+.bg-gradient-to-r {
+    background: linear-gradient(to right, var(--dm-gradient-from, transparent), var(--dm-gradient-to, transparent));
+}
+
+.bg-gradient-to-br {
+    background: linear-gradient(to bottom right, var(--dm-gradient-from, transparent), var(--dm-gradient-to, transparent));
+}
+
+.bg-gradient-to-b {
+    background: linear-gradient(to bottom, var(--dm-gradient-from, transparent), var(--dm-gradient-to, transparent));
+}
+
+.bg-gradient-to-bl {
+    background: linear-gradient(to bottom left, var(--dm-gradient-from, transparent), var(--dm-gradient-to, transparent));
+}
+
+.bg-gradient-to-l {
+    background: linear-gradient(to left, var(--dm-gradient-from, transparent), var(--dm-gradient-to, transparent));
+}
+
+.bg-gradient-to-tl {
+    background: linear-gradient(to top left, var(--dm-gradient-from, transparent), var(--dm-gradient-to, transparent));
+}
+
+/* Radial Gradients */
+
+.bg-gradient-radial {
+    background: radial-gradient(circle, var(--dm-gradient-from, transparent), var(--dm-gradient-to, transparent));
+}
+
+/* Named Gradient Presets */
+
+.bg-gradient-purple {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.bg-gradient-blue {
+    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+}
+
+.bg-gradient-green {
+    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+}
+
+.bg-gradient-sunset {
+    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
+}
+
+.bg-gradient-ocean {
+    background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
+}
+
+.bg-gradient-rose {
+    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
+}
+
+.bg-gradient-forest {
+    background: linear-gradient(135deg, #10b981 0%, #065f46 100%);
+}
+
+.bg-gradient-night {
+    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+}
+
+.bg-gradient-warm {
+    background: linear-gradient(135deg, #f59e0b 0%, #f97316 0%, #dc2626 100%);
+}
+
+.bg-gradient-cool {
+    background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 0%, #8b5cf6 100%);
+}
+
+/* Animated Gradients */
+
+@keyframes dm-gradient-shift {
+    0% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
+.bg-gradient-animated {
+    background-size: 200% 200%;
+    animation: dm-gradient-shift 3s ease infinite;
+}
+
+/* Text Gradients */
+
+.text-gradient {
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-image: linear-gradient(135deg, var(--dm-primary) 0%, var(--dm-secondary) 100%);
+}
+
+.text-gradient-primary {
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-image: linear-gradient(135deg, var(--dm-primary) 0%, var(--dm-primary-dark) 100%);
+}
+
+.text-gradient-sunset {
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-image: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
+}
+
+.text-gradient-ocean {
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-image: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
+}
+
+.text-gradient-purple {
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+/* ============================================
+   FILTER UTILITIES
+   ============================================ */
+
+/* Blur */
+
+.blur-none {
+    filter: blur(0);
+}
+
+.blur-sm {
+    filter: blur(4px);
+}
+
+.blur {
+    filter: blur(8px);
+}
+
+.blur-md {
+    filter: blur(12px);
+}
+
+.blur-lg {
+    filter: blur(16px);
+}
+
+.blur-xl {
+    filter: blur(24px);
+}
+
+.blur-2xl {
+    filter: blur(40px);
+}
+
+.blur-3xl {
+    filter: blur(64px);
+}
+
+/* Brightness */
+
+.brightness-0 {
+    filter: brightness(0);
+}
+
+.brightness-50 {
+    filter: brightness(0.5);
+}
+
+.brightness-75 {
+    filter: brightness(0.75);
+}
+
+.brightness-90 {
+    filter: brightness(0.9);
+}
+
+.brightness-100 {
+    filter: brightness(1);
+}
+
+.brightness-110 {
+    filter: brightness(1.1);
+}
+
+.brightness-125 {
+    filter: brightness(1.25);
+}
+
+.brightness-150 {
+    filter: brightness(1.5);
+}
+
+.brightness-200 {
+    filter: brightness(2);
+}
+
+/* Contrast */
+
+.contrast-0 {
+    filter: contrast(0);
+}
+
+.contrast-50 {
+    filter: contrast(0.5);
+}
+
+.contrast-75 {
+    filter: contrast(0.75);
+}
+
+.contrast-100 {
+    filter: contrast(1);
+}
+
+.contrast-125 {
+    filter: contrast(1.25);
+}
+
+.contrast-150 {
+    filter: contrast(1.5);
+}
+
+.contrast-200 {
+    filter: contrast(2);
+}
+
+/* Grayscale */
+
+.grayscale-0 {
+    filter: grayscale(0);
+}
+
+.grayscale {
+    filter: grayscale(1);
+}
+
+.grayscale-50 {
+    filter: grayscale(0.5);
+}
+
+/* Hue Rotate */
+
+.hue-rotate-15 {
+    filter: hue-rotate(15deg);
+}
+
+.hue-rotate-30 {
+    filter: hue-rotate(30deg);
+}
+
+.hue-rotate-60 {
+    filter: hue-rotate(60deg);
+}
+
+.hue-rotate-90 {
+    filter: hue-rotate(90deg);
+}
+
+.hue-rotate-180 {
+    filter: hue-rotate(180deg);
+}
+
+/* Invert */
+
+.invert-0 {
+    filter: invert(0);
+}
+
+.invert {
+    filter: invert(1);
+}
+
+.invert-50 {
+    filter: invert(0.5);
+}
+
+/* Saturate */
+
+.saturate-0 {
+    filter: saturate(0);
+}
+
+.saturate-50 {
+    filter: saturate(0.5);
+}
+
+.saturate-100 {
+    filter: saturate(1);
+}
+
+.saturate-150 {
+    filter: saturate(1.5);
+}
+
+.saturate-200 {
+    filter: saturate(2);
+}
+
+/* Sepia */
+
+.sepia-0 {
+    filter: sepia(0);
+}
+
+.sepia {
+    filter: sepia(1);
+}
+
+.sepia-50 {
+    filter: sepia(0.5);
+}
+
+/* Drop Shadow */
+
+.drop-shadow-sm {
+    filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
+}
+
+.drop-shadow {
+    filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
+}
+
+.drop-shadow-md {
+    filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
+}
+
+.drop-shadow-lg {
+    filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
+}
+
+.drop-shadow-xl {
+    filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
+}
+
+.drop-shadow-2xl {
+    filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
+}
+
+.drop-shadow-none {
+    filter: drop-shadow(0 0 #0000);
+}
+
+/* Backdrop Blur */
+
+.backdrop-blur-none {
+    backdrop-filter: blur(0);
+}
+
+.backdrop-blur-sm {
+    backdrop-filter: blur(4px);
+}
+
+.backdrop-blur {
+    backdrop-filter: blur(8px);
+}
+
+.backdrop-blur-md {
+    backdrop-filter: blur(12px);
+}
+
+.backdrop-blur-lg {
+    backdrop-filter: blur(16px);
+}
+
+.backdrop-blur-xl {
+    backdrop-filter: blur(24px);
+}
+
+.backdrop-blur-2xl {
+    backdrop-filter: blur(40px);
+}
+
+.backdrop-blur-3xl {
+    backdrop-filter: blur(64px);
+}
+
+/* Backdrop Brightness */
+
+.backdrop-brightness-50 {
+    backdrop-filter: brightness(0.5);
+}
+
+.backdrop-brightness-75 {
+    backdrop-filter: brightness(0.75);
+}
+
+.backdrop-brightness-90 {
+    backdrop-filter: brightness(0.9);
+}
+
+.backdrop-brightness-100 {
+    backdrop-filter: brightness(1);
+}
+
+.backdrop-brightness-110 {
+    backdrop-filter: brightness(1.1);
+}
+
+.backdrop-brightness-125 {
+    backdrop-filter: brightness(1.25);
+}
+
+.backdrop-brightness-150 {
+    backdrop-filter: brightness(1.5);
+}
+
+/* Backdrop Saturate */
+
+.backdrop-saturate-0 {
+    backdrop-filter: saturate(0);
+}
+
+.backdrop-saturate-50 {
+    backdrop-filter: saturate(0.5);
+}
+
+.backdrop-saturate-100 {
+    backdrop-filter: saturate(1);
+}
+
+.backdrop-saturate-150 {
+    backdrop-filter: saturate(1.5);
+}
+
+.backdrop-saturate-200 {
+    backdrop-filter: saturate(2);
+}
+
+/* Combined Filter Presets */
+
+.filter-none {
+    filter: none;
+}
+
+.filter-vintage {
+    filter: sepia(0.5) contrast(1.2) brightness(0.9);
+}
+
+.filter-dramatic {
+    filter: contrast(1.5) saturate(1.3);
+}
+
+.filter-soft {
+    filter: blur(2px) brightness(1.1);
+}
+
+.filter-cold {
+    filter: saturate(0.8) hue-rotate(15deg);
+}
+
+.filter-warm {
+    filter: saturate(1.2) hue-rotate(-15deg);
+}
+
+/* ================================================
+   CLOAKING - Prevent flash of unstyled content
+   ================================================ */
+body.dm-cloaked {
+    opacity: 0;
+}
+
+body.dm-cloaked.dm-ready {
+    opacity: 1;
+    transition: opacity 0.3s ease;
+}
+
+
+/* ============================================
+   GRID SYSTEM
+   Bootstrap + CSS Grid utilities
+   ============================================ */
+
+/*!
+ * Domma Grid CSS v0.5.0-alpha
+ * Dynamic Object Manipulation & Modeling API
+ * (c) 2026 Darryl Waterhouse & DCBW-IT
+ * Built: 2026-01-08T09:15:50.031Z
+ * Commit: ad86642
+ */
+
+/**
+ * Domma Grid System
+ * Bootstrap-style 12-column flexbox grid with mobile-first stacking
+ *
+ * Usage:
+ *   <div class="row">
+ *       <div class="col-4">Column 1</div>
+ *       <div class="col-4">Column 2</div>
+ *       <div class="col-4">Column 3</div>
+ *   </div>
+ *
+ * Mobile-first: columns stack below 576px, activate grid above
+ */
+
+/* ============================================
+   ROW CONTAINER
+   ============================================ */
+
+.row {
+    display: flex;
+    flex-wrap: wrap;
+    margin-left: calc(var(--dm-space-3, 0.75rem) * -1);
+    margin-right: calc(var(--dm-space-3, 0.75rem) * -1);
+}
+
+/* No gutters variant */
+.row.no-gutters {
+    margin-left: 0;
+    margin-right: 0;
+}
+
+.row.no-gutters > [class*="col"] {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+/* ============================================
+   COLUMN BASE STYLES
+   ============================================ */
 
 /* Base column styles - mobile-first (stacked) */
 .col,
@@ -2979,11 +4561,11 @@ code, pre {
    ============================================ */
 
 /*!
- * Domma Elements CSS v0.3.0-alpha.0
+ * Domma Elements CSS v0.5.0-alpha
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-01-02T14:32:25.401Z
- * Commit: bc8e519
+ * Built: 2026-01-08T09:15:50.041Z
+ * Commit: ad86642
  */
 
 /**
@@ -3238,6 +4820,40 @@ code, pre {
     text-decoration: none;
 }
 
+/* Collapsible card styles */
+.card-collapsible .card-header {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    user-select: none;
+}
+
+.card-header-content {
+    flex: 1;
+}
+
+.card-collapse-icon {
+    transition: transform var(--dm-transition-normal);
+    flex-shrink: 0;
+    margin-left: var(--dm-space-2);
+}
+
+.card-collapsed .card-collapse-icon {
+    transform: rotate(-90deg);
+}
+
+.card-collapsible .card-body {
+    overflow: hidden;
+    transition: height var(--dm-transition-normal);
+}
+
+.card-collapsed .card-body {
+    height: 0 !important;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
 
 /* ============================================
    MODAL
@@ -3251,7 +4867,7 @@ code, pre {
     border-radius: var(--dm-radius-lg);
     box-shadow: var(--dm-shadow-xl);
     z-index: 50;
-    max-width: 500px;
+    max-width: 700px;
     width: 90%;
     max-height: 90vh;
     overflow: auto;
@@ -3323,6 +4939,23 @@ code, pre {
     max-width: 1140px;
 }
 
+/* Modal Factory Dialog Sizes */
+.dm-dialog-small {
+    max-width: 400px !important;
+}
+
+.dm-dialog-medium {
+    max-width: 700px !important;
+}
+
+.dm-dialog-large {
+    max-width: 900px !important;
+}
+
+.dm-dialog-xl {
+    max-width: 1200px !important;
+}
+
 
 /* ============================================
    TABS
@@ -3770,16 +5403,18 @@ textarea:not([class])::placeholder {
 .form-check {
     display: flex;
     align-items: flex-start;
-    gap: var(--dm-space-2);
+    gap: var(--dm-space-3);
     cursor: pointer;
     position: relative;
+    padding: var(--dm-space-1) 0;
+    min-height: 1.5rem;
 }
 
 .form-check-input {
     appearance: none;
     -webkit-appearance: none;
-    width: 1.125rem;
-    height: 1.125rem;
+    width: 1.25rem;
+    height: 1.25rem;
     border: 2px solid var(--dm-border, var(--dm-gray-400));
     border-radius: var(--dm-radius-sm);
     background-color: var(--dm-surface, var(--dm-white));
@@ -3787,6 +5422,8 @@ textarea:not([class])::placeholder {
     position: relative;
     flex-shrink: 0;
     margin-top: 0.125rem;
+    margin-right: var(--dm-space-1);
+    padding: 0;
     transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
 }
 
@@ -3808,10 +5445,10 @@ textarea:not([class])::placeholder {
 .form-check-input:checked::after {
     content: '';
     position: absolute;
-    left: 5px;
-    top: 2px;
-    width: 5px;
-    height: 9px;
+    left: 5.5px;
+    top: 2.5px;
+    width: 6px;
+    height: 10px;
     border: solid var(--dm-white);
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
@@ -3830,6 +5467,9 @@ textarea:not([class])::placeholder {
 .form-check-label {
     cursor: pointer;
     color: var(--dm-text, var(--dm-gray-900));
+    line-height: 1.5;
+    padding-top: 0.125rem;
+    user-select: none;
 }
 
 /* Custom Radio */
@@ -7854,146 +9494,439 @@ code {
     transform: translateX(-50%);
 }
 
-.dm-timeline-centered .dm-timeline-item {
-    width: 50%;
-    padding-right: var(--dm-space-8);
-    justify-content: flex-end;
+.dm-timeline-centered .dm-timeline-item {
+    width: 50%;
+    padding-right: var(--dm-space-8);
+    justify-content: flex-end;
+}
+
+.dm-timeline-centered .dm-timeline-item:nth-child(even) {
+    left: 50%;
+    padding-left: var(--dm-space-8);
+    padding-right: 0;
+    justify-content: flex-start;
+}
+
+.dm-timeline-centered .dm-timeline-year {
+    order: 2;
+    margin-left: var(--dm-space-6);
+    margin-right: 0;
+}
+
+.dm-timeline-centered .dm-timeline-item:nth-child(even) .dm-timeline-year {
+    order: 0;
+    margin-left: 0;
+    margin-right: var(--dm-space-6);
+}
+
+/* Horizontal Layout */
+.dm-timeline-horizontal {
+    display: flex;
+    overflow-x: auto;
+    padding-bottom: var(--dm-space-4);
+    max-width: 100%;
+    gap: var(--dm-space-6);
+}
+
+.dm-timeline-horizontal .dm-timeline-item {
+    flex-direction: column;
+    margin-bottom: 0;
+    min-width: 250px;
+    flex-shrink: 0;
+}
+
+.dm-timeline-horizontal .dm-timeline-year {
+    width: auto;
+    margin-right: 0;
+    margin-bottom: var(--dm-space-4);
+}
+
+/* Theme Variants */
+.dm-timeline-minimal .dm-timeline-content {
+    box-shadow: none;
+    border: 1px solid var(--dm-gray-200);
+    background: var(--dm-gray-50);
+}
+
+.dm-timeline-minimal .dm-timeline-year {
+    background: var(--dm-gray-600);
+}
+
+.dm-timeline-corporate .dm-timeline-year {
+    background: var(--dm-slate-700);
+    font-size: var(--dm-font-size-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.dm-timeline-corporate .dm-timeline-content {
+    background: var(--dm-slate-50);
+    border-color: var(--dm-slate-200);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .dm-timeline-centered {
+        /* Switch to vertical layout on mobile */
+    }
+
+    .dm-timeline-centered::before {
+        left: 30px;
+        transform: none;
+    }
+
+    .dm-timeline-centered .dm-timeline-item,
+    .dm-timeline-centered .dm-timeline-item:nth-child(even) {
+        width: 100%;
+        left: 0;
+        padding-left: var(--dm-space-16);
+        padding-right: 0;
+        justify-content: flex-start;
+    }
+
+    .dm-timeline-centered .dm-timeline-year,
+    .dm-timeline-centered .dm-timeline-item:nth-child(even) .dm-timeline-year {
+        order: 0;
+        margin-right: var(--dm-space-6);
+        margin-left: 0;
+        position: absolute;
+        left: 0;
+        width: 80px;
+    }
+
+    .dm-timeline-horizontal {
+        flex-direction: column;
+    }
+
+    .dm-timeline-horizontal .dm-timeline-item {
+        flex-direction: row;
+        min-width: auto;
+        margin-bottom: var(--dm-space-6);
+    }
+
+    .dm-timeline-horizontal .dm-timeline-year {
+        margin-bottom: 0;
+        margin-right: var(--dm-space-4);
+        width: 100px;
+    }
+}
+
+/* Dark Theme Support */
+[data-theme="dark"] .dm-timeline-content {
+    background: var(--dm-slate-800);
+    border-color: var(--dm-slate-700);
+    color: var(--dm-slate-200);
+}
+
+[data-theme="dark"] .dm-timeline-title {
+    color: var(--dm-white);
+}
+
+[data-theme="dark"] .dm-timeline-description {
+    color: var(--dm-slate-300);
+}
+
+[data-theme="dark"] .dm-timeline-minimal .dm-timeline-content {
+    background: var(--dm-slate-900);
+    border-color: var(--dm-slate-700);
+}
+
+[data-theme="dark"] .dm-timeline-corporate .dm-timeline-content {
+    background: var(--dm-slate-800);
+    border-color: var(--dm-slate-600);
+}
+
+/* ==============================================
+   Cookie Consent Component
+   ============================================== */
+
+.dm-cookie-consent {
+    position: fixed;
+    z-index: 9999;
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+/* Position variants */
+.dm-cookie-consent-bottom {
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+.dm-cookie-consent-top {
+    top: 0;
+    left: 0;
+    right: 0;
+}
+
+.dm-cookie-consent-bottom-left {
+    bottom: 20px;
+    left: 20px;
+    max-width: 400px;
+}
+
+.dm-cookie-consent-bottom-right {
+    bottom: 20px;
+    right: 20px;
+    max-width: 400px;
+}
+
+.dm-cookie-consent-center-modal {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    max-width: 600px;
+    width: 90%;
+}
+
+/* Layout variants */
+.dm-cookie-consent-bar .dm-cookie-consent-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 20px;
+    gap: 20px;
+}
+
+.dm-cookie-consent-box .dm-cookie-consent-content {
+    padding: 24px;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.dm-cookie-consent-modal .dm-cookie-consent-content {
+    padding: 32px;
+    border-radius: 12px;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+}
+
+/* Theme variants */
+.dm-cookie-consent-light .dm-cookie-consent-content {
+    background: white;
+    color: #333;
+    border: 1px solid #e5e5e5;
+}
+
+.dm-cookie-consent-light a {
+    color: var(--dm-primary);
+}
+
+.dm-cookie-consent-dark .dm-cookie-consent-content {
+    background: #1f2937;
+    color: #f3f4f6;
+    border: 1px solid #374151;
+}
+
+.dm-cookie-consent-dark a {
+    color: #60a5fa;
+}
+
+/* Message styles */
+.dm-cookie-consent-message {
+    flex: 1;
+    margin-right: 20px;
+}
+
+.dm-cookie-consent-message a {
+    text-decoration: underline;
+    margin: 0 4px;
+}
+
+.dm-cookie-consent-message a:hover {
+    opacity: 0.8;
+}
+
+/* Button styles */
+.dm-cookie-consent-buttons {
+    display: flex;
+    gap: 12px;
+    flex-shrink: 0;
+}
+
+/* Animation */
+.dm-cookie-consent-animated {
+    transition: all 0.3s ease;
+}
+
+.dm-cookie-consent-bottom.dm-cookie-consent-animated:not(.dm-cookie-consent-visible) {
+    transform: translateY(100%);
+}
+
+.dm-cookie-consent-top.dm-cookie-consent-animated:not(.dm-cookie-consent-visible) {
+    transform: translateY(-100%);
+}
+
+.dm-cookie-consent-bottom-left.dm-cookie-consent-animated:not(.dm-cookie-consent-visible),
+.dm-cookie-consent-bottom-right.dm-cookie-consent-animated:not(.dm-cookie-consent-visible) {
+    transform: translateY(20px);
+    opacity: 0;
+}
+
+.dm-cookie-consent-center-modal.dm-cookie-consent-animated:not(.dm-cookie-consent-visible) {
+    transform: translate(-50%, -50%) scale(0.95);
+    opacity: 0;
+}
+
+/* Backdrop */
+.dm-cookie-consent-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: -1;
+}
+
+/* Customize Modal */
+.dm-cookie-consent-modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 10000;
+    align-items: center;
+    justify-content: center;
+}
+
+.dm-cookie-consent-modal-backdrop {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+}
+
+.dm-cookie-consent-modal-content {
+    position: relative;
+    background: white;
+    border-radius: 12px;
+    max-width: 600px;
+    width: 90%;
+    max-height: 80vh;
+    overflow: auto;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
 }
 
-.dm-timeline-centered .dm-timeline-item:nth-child(even) {
-    left: 50%;
-    padding-left: var(--dm-space-8);
-    padding-right: 0;
-    justify-content: flex-start;
+.dm-cookie-consent-modal-header {
+    padding: 24px;
+    border-bottom: 1px solid #e5e5e5;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
 
-.dm-timeline-centered .dm-timeline-year {
-    order: 2;
-    margin-left: var(--dm-space-6);
-    margin-right: 0;
+.dm-cookie-consent-modal-header h3 {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 600;
 }
 
-.dm-timeline-centered .dm-timeline-item:nth-child(even) .dm-timeline-year {
-    order: 0;
-    margin-left: 0;
-    margin-right: var(--dm-space-6);
+.dm-cookie-consent-modal-close {
+    background: none;
+    border: none;
+    font-size: 24px;
+    cursor: pointer;
+    color: #666;
+    padding: 0;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    transition: all 0.2s;
 }
 
-/* Horizontal Layout */
-.dm-timeline-horizontal {
-    display: flex;
-    overflow-x: auto;
-    padding-bottom: var(--dm-space-4);
-    max-width: 100%;
-    gap: var(--dm-space-6);
+.dm-cookie-consent-modal-close:hover {
+    background: #f5f5f5;
 }
 
-.dm-timeline-horizontal .dm-timeline-item {
-    flex-direction: column;
-    margin-bottom: 0;
-    min-width: 250px;
-    flex-shrink: 0;
+.dm-cookie-consent-modal-body {
+    padding: 24px;
 }
 
-.dm-timeline-horizontal .dm-timeline-year {
-    width: auto;
-    margin-right: 0;
-    margin-bottom: var(--dm-space-4);
+.dm-cookie-consent-category {
+    margin-bottom: 20px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid #e5e5e5;
 }
 
-/* Theme Variants */
-.dm-timeline-minimal .dm-timeline-content {
-    box-shadow: none;
-    border: 1px solid var(--dm-gray-200);
-    background: var(--dm-gray-50);
+.dm-cookie-consent-category:last-child {
+    border-bottom: none;
+    margin-bottom: 0;
+    padding-bottom: 0;
 }
 
-.dm-timeline-minimal .dm-timeline-year {
-    background: var(--dm-gray-600);
+.dm-cookie-consent-category-label {
+    display: flex;
+    align-items: flex-start;
+    cursor: pointer;
 }
 
-.dm-timeline-corporate .dm-timeline-year {
-    background: var(--dm-slate-700);
-    font-size: var(--dm-font-size-xs);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
+.dm-cookie-consent-category-toggle {
+    margin-right: 12px;
+    margin-top: 2px;
 }
 
-.dm-timeline-corporate .dm-timeline-content {
-    background: var(--dm-slate-50);
-    border-color: var(--dm-slate-200);
+.dm-cookie-consent-category-toggle:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
 }
 
-/* Responsive Design */
-@media (max-width: 768px) {
-    .dm-timeline-centered {
-        /* Switch to vertical layout on mobile */
-    }
-    
-    .dm-timeline-centered::before {
-        left: 30px;
-        transform: none;
-    }
-    
-    .dm-timeline-centered .dm-timeline-item,
-    .dm-timeline-centered .dm-timeline-item:nth-child(even) {
-        width: 100%;
-        left: 0;
-        padding-left: var(--dm-space-16);
-        padding-right: 0;
-        justify-content: flex-start;
-    }
-    
-    .dm-timeline-centered .dm-timeline-year,
-    .dm-timeline-centered .dm-timeline-item:nth-child(even) .dm-timeline-year {
-        order: 0;
-        margin-right: var(--dm-space-6);
-        margin-left: 0;
-        position: absolute;
-        left: 0;
-        width: 80px;
-    }
-    
-    .dm-timeline-horizontal {
-        flex-direction: column;
-    }
-    
-    .dm-timeline-horizontal .dm-timeline-item {
-        flex-direction: row;
-        min-width: auto;
-        margin-bottom: var(--dm-space-6);
-    }
-    
-    .dm-timeline-horizontal .dm-timeline-year {
-        margin-bottom: 0;
-        margin-right: var(--dm-space-4);
-        width: 100px;
-    }
+.dm-cookie-consent-category-info {
+    flex: 1;
 }
 
-/* Dark Theme Support */
-[data-theme="dark"] .dm-timeline-content {
-    background: var(--dm-slate-800);
-    border-color: var(--dm-slate-700);
-    color: var(--dm-slate-200);
+.dm-cookie-consent-category-name {
+    font-weight: 500;
+    margin-bottom: 4px;
 }
 
-[data-theme="dark"] .dm-timeline-title {
-    color: var(--dm-white);
+.dm-cookie-consent-required {
+    color: #666;
+    font-size: 12px;
 }
 
-[data-theme="dark"] .dm-timeline-description {
-    color: var(--dm-slate-300);
+.dm-cookie-consent-category-description {
+    color: #666;
+    font-size: 13px;
 }
 
-[data-theme="dark"] .dm-timeline-minimal .dm-timeline-content {
-    background: var(--dm-slate-900);
-    border-color: var(--dm-slate-700);
+.dm-cookie-consent-modal-footer {
+    padding: 24px;
+    border-top: 1px solid #e5e5e5;
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
 }
 
-[data-theme="dark"] .dm-timeline-corporate .dm-timeline-content {
-    background: var(--dm-slate-800);
-    border-color: var(--dm-slate-600);
+/* Responsive */
+@media (max-width: 640px) {
+    .dm-cookie-consent-bar .dm-cookie-consent-content {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .dm-cookie-consent-message {
+        margin-right: 0;
+        margin-bottom: 16px;
+    }
+
+    .dm-cookie-consent-buttons {
+        flex-direction: column;
+    }
+
+    .dm-cookie-consent-bottom-left,
+    .dm-cookie-consent-bottom-right {
+        left: 10px;
+        right: 10px;
+        max-width: none;
+    }
 }
 
 
@@ -8003,11 +9936,11 @@ code {
    ============================================ */
 
 /*!
- * Domma Themes v0.3.0-alpha.0
+ * Domma Themes v0.5.0-alpha
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-01-02T14:32:25.353Z
- * Commit: bc8e519
+ * Built: 2026-01-08T09:15:49.994Z
+ * Commit: ad86642
  */
 
 /**
@@ -11470,5 +13403,218 @@ code {
     --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
 
 }
+.dm-theme-grayve {
+    color-scheme: dark; /* Slate is typically a dark theme */
+
+    /* Tailwind-based color palette - adapting for grayve */
+    /* Slate (using bootswatch values) */
+    --dm-slate-50: #F8F9FA; /* Off-white */
+    --dm-slate-100: #E9ECEF;
+    --dm-slate-200: #DEE2E6;
+    --dm-slate-300: #CED4DA;
+    --dm-slate-400: #ADB5BD;
+    --dm-slate-500: #6C757D; /* Medium Gray */
+    --dm-slate-600: #495057;
+    --dm-slate-700: #343A40;
+    --dm-slate-800: #212529;
+    --dm-slate-900: #1a1e21; /* Dark Gray */
+    --dm-slate-950: #141619; /* Very Dark Gray */
+
+    /* Blues (for primary/info, etc.) */
+    --dm-blue-50: #e0f7fa;
+    --dm-blue-100: #b2ebf2;
+    --dm-blue-200: #80deea;
+    --dm-blue-300: #4dd0e1;
+    --dm-blue-400: #26c6da;
+    --dm-blue-500: #00bcd4; /* Bootswatch primary might be close to this or lighter */
+    --dm-blue-600: #00acc1;
+    --dm-blue-700: #0097a7;
+    --dm-blue-800: #00838f;
+    --dm-blue-900: #006064;
+    --dm-blue-950: #004d40;
+
+    /* Green (Success) */
+    --dm-green-500: #28a745;
+    --dm-green-400: #49cc61;
+    --dm-green-300: #6fd180;
+    --dm-green-600: #218838;
+
+    /* Red (Danger) */
+    --dm-red-500: #dc3545;
+    --dm-red-400: #e35a67;
+    --dm-red-300: #eb808a;
+    --dm-red-600: #c82333;
+
+    /* Amber (Warning) */
+    --dm-amber-500: #ffc107;
+    --dm-amber-400: #ffcd38;
+    --dm-amber-300: #ffd865;
+    --dm-amber-600: #e0a800;
+
+    /* Sky (Info - often similar to primary but distinct) */
+    --dm-sky-500: #17a2b8;
+    --dm-sky-400: #26d2e9;
+    --dm-sky-300: #51daec;
+    --dm-sky-600: #138496;
+
+    /* Semantic colors */
+    --dm-background: var(--dm-slate-900);
+    --dm-background-alt: var(--dm-slate-800);
+    --dm-surface: var(--dm-slate-800);
+    --dm-surface-raised: var(--dm-slate-700);
+    --dm-surface-overlay: rgba(0, 0, 0, 0.7);
+
+    /* Text */
+    --dm-text: var(--dm-slate-200);
+    --dm-text-secondary: var(--dm-slate-400);
+    --dm-text-muted: var(--dm-slate-500);
+    --dm-text-disabled: var(--dm-slate-600);
+    --dm-text-inverse: var(--dm-slate-900);
+
+    /* Borders */
+    --dm-border: var(--dm-slate-700);
+    --dm-border-light: var(--dm-slate-800);
+    --dm-border-dark: var(--dm-slate-600);
+    --dm-border-focus: var(--dm-blue-500); /* Use a vibrant blue for focus */
+    --dm-focus-ring: rgba(0, 188, 212, 0.3); /* Based on dm-blue-500 */
+    --dm-focus-ring-danger: rgba(220, 53, 69, 0.3); /* Based on dm-red-500 */
+
+    /* Interactive States */
+    --dm-hover-bg: rgba(255, 255, 255, 0.07);
+    --dm-active-bg: rgba(255, 255, 255, 0.1);
+    --dm-selected-bg: var(--dm-blue-600);
+    --dm-disabled-opacity: 0.4;
+
+    /* Brand Colors */
+    --dm-primary: var(--dm-blue-500);
+    --dm-primary-dark: var(--dm-blue-700);
+    --dm-primary-light: var(--dm-blue-300);
+    --dm-primary-hover: var(--dm-blue-400);
+    --dm-primary-active: var(--dm-blue-600);
+
+    --dm-secondary: var(--dm-slate-500);
+    --dm-secondary-hover: var(--dm-slate-400);
+    --dm-secondary-active: var(--dm-slate-300);
+
+    /* Status Colors */
+    --dm-success: var(--dm-green-500);
+    --dm-success-hover: var(--dm-green-400);
+    --dm-success-active: var(--dm-green-600);
+    --dm-success-light: rgba(40, 167, 69, 0.2);
+    --dm-success-dark: var(--dm-green-600);
+
+    --dm-danger: var(--dm-red-500);
+    --dm-danger-hover: var(--dm-red-400);
+    --dm-danger-active: var(--dm-red-600);
+    --dm-danger-light: rgba(220, 53, 69, 0.2);
+    --dm-danger-dark: var(--dm-red-600);
+
+    --dm-warning: var(--dm-amber-400);
+    --dm-warning-hover: var(--dm-amber-300);
+    --dm-warning-active: var(--dm-amber-500);
+    --dm-warning-text: var(--dm-amber-900);
+    --dm-warning-light: rgba(255, 193, 7, 0.2);
+    --dm-warning-dark: var(--dm-amber-600);
+
+    --dm-info: var(--dm-sky-500);
+    --dm-info-hover: var(--dm-sky-400);
+    --dm-info-active: var(--dm-sky-600);
+    --dm-info-light: rgba(23, 162, 184, 0.2);
+    --dm-info-dark: var(--dm-sky-600);
+
+    /* Background Tints */
+    --dm-primary-bg: rgba(0, 188, 212, 0.15);
+    --dm-secondary-bg: rgba(108, 117, 125, 0.15);
+    --dm-success-bg: rgba(40, 167, 69, 0.15);
+    --dm-danger-bg: rgba(220, 53, 69, 0.15);
+    --dm-warning-bg: rgba(255, 193, 7, 0.15);
+    --dm-info-bg: rgba(23, 162, 184, 0.15);
+
+    /* Semantic Surface Colors */
+    --dm-surface-secondary: var(--dm-slate-900);
+    --dm-card-bg: var(--dm-slate-800);
+    --dm-card-border: var(--dm-slate-700);
+
+    /* Legacy color names (kept for backwards compatibility) */
+    --dm-light: var(--dm-slate-200);
+    --dm-dark: var(--dm-slate-800);
+    --dm-white: #ffffff;
+    --dm-black: #000000;
+
+    /* Grays (mapped to Slate) */
+    --dm-gray-50: var(--dm-slate-50);
+    --dm-gray-100: var(--dm-slate-100);
+    --dm-gray-200: var(--dm-slate-200);
+    --dm-gray-300: var(--dm-slate-300);
+    --dm-gray-400: var(--dm-slate-400);
+    --dm-gray-500: var(--dm-slate-500);
+    --dm-gray-600: var(--dm-slate-600);
+    --dm-gray-700: var(--dm-slate-700);
+    --dm-gray-800: var(--dm-slate-800);
+    --dm-gray-900: var(--dm-slate-900);
+    --dm-gray-950: var(--dm-slate-950);
+
+    /* Component-specific variables */
+    --dm-input-bg: var(--dm-surface);
+    --dm-input-border: var(--dm-border-dark);
+    --dm-input-text: var(--dm-text);
+    --dm-input-placeholder: var(--dm-text-muted);
+    --dm-input-focus-border: var(--dm-primary);
+    --dm-input-disabled-bg: var(--dm-slate-800);
+
+    --dm-table-border: var(--dm-border);
+    --dm-table-hover-bg: var(--dm-hover-bg);
+    --dm-table-stripe-bg: rgba(255, 255, 255, 0.03);
+
+    --dm-navbar-bg: var(--dm-surface);
+    --dm-navbar-text: var(--dm-text);
+    --dm-navbar-border: var(--dm-border);
+
+    --dm-dropdown-bg: var(--dm-surface-raised);
+    --dm-dropdown-border: var(--dm-border);
+    --dm-dropdown-item-hover: var(--dm-hover-bg);
+    --dm-dropdown-item-active: var(--dm-selected-bg);
+
+    --dm-sidebar-bg: var(--dm-surface);
+    --dm-sidebar-border: var(--dm-border);
+    --dm-sidebar-item-hover: var(--dm-hover-bg);
+    --dm-sidebar-item-active: var(--dm-selected-bg);
+
+    --dm-autocomplete-bg: var(--dm-surface);
+    --dm-autocomplete-border: var(--dm-border);
+    --dm-autocomplete-shadow: var(--dm-shadow-md);
+    --dm-autocomplete-item-hover: var(--dm-hover-bg);
+    --dm-autocomplete-item-active: var(--dm-selected-bg);
+    --dm-autocomplete-highlight: var(--dm-primary-light);
+
+    --dm-pillbox-bg: var(--dm-surface);
+    --dm-pillbox-border: var(--dm-border);
+    --dm-pill-bg: var(--dm-gray-700); /* Darker pill background for dark theme */
+    --dm-pill-color: var(--dm-text);
+    --dm-pill-hover-bg: var(--dm-gray-600);
+
+    --dm-tab-border: var(--dm-border);
+    --dm-tab-hover-bg: var(--dm-hover-bg);
+    --dm-tab-active-border: var(--dm-primary);
+    --dm-tab-active-text: var(--dm-primary);
+
+    --dm-accordion-border: var(--dm-border);
+    --dm-accordion-header-hover: var(--dm-hover-bg);
+}
+
+/* Syntax highlighting tokens for grayve (assuming similar to dark theme) */
+.dm-theme-grayve .code-block .syntax-keyword {
+    color: #c792ea; /* Purple */
+    font-weight: 500;
+}
+
+.dm-theme-grayve .code-block .syntax-string,
+.dm-theme-grayve .code-block .syntax-template-string {
+    color: #c3e88d; /* Green */
+}
+
+.dm-theme-grayve .code-block .syntax-function {
+    color: #82aaff; /* Light Blue */
+}