feat: add unit tests for CodeBindingElement and InteractiveCodeElement

- Implemented tests for CodeBindingElement covering attribute getters, value parsing, value setter, disabled property, toggle, increment, decrement, and event handling.
- Added tests for InteractiveCodeElement focusing on language attribute, code property, shadow DOM structure, template extraction, binding integration, syntax highlighting for various languages, and event handling.
- Integrated Vitest for testing framework with coverage reporting.
- Updated package.json to include Vitest and its dependencies.
- Excluded test files from TypeScript compilation.

Author: hhfrancois

demo/index.html

@@ -8,6 +8,7 @@
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <style>
     :root {
+      color-scheme: dark;
       --bg-gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
       --bg-primary: #161b22;
       --bg-secondary: #21262d;
@@ -310,25 +311,22 @@
       letter-spacing: 0.5px;
     }
 
-    /* User view: code + live element side by side */
+    /* User view: code + live element stacked vertically */
     .user-view {
       display: flex;
-      gap: 1.5rem;
-      align-items: stretch;
+      flex-direction: column;
+      gap: 1rem;
     }
 
     .user-view > interactive-code {
-      flex: 1;
       margin: 0;
     }
 
     .live-element {
-      flex: 0 0 auto;
-      min-width: 200px;
       display: flex;
       align-items: center;
       justify-content: center;
-      padding: 1rem;
+      padding: 1.5rem;
       background: var(--bg-primary);
       border-radius: 6px;
       border: 1px dashed var(--border-color);
@@ -402,7 +400,7 @@
       background: var(--accent-purple);
       color: white;
       transition: all 0.2s ease;
-      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+      border: 3px solid #50fa7b;
       border-radius: 12px;
     }
   </style>
@@ -476,13 +474,14 @@ <h3>Boolean Type</h3>
               <interactive-code language="html">
                 <textarea><label><input type="checkbox" checked="${checked}">Accept terms</label></textarea>
                 <code-binding key="checked" type="boolean" value="true"
-                  onchange="document.getElementById('preview-checkbox').checked = e"></code-binding>
+                  onchange="document.getElementById('icon-checked').style.display = e ? 'inline' : 'none'; document.getElementById('icon-unchecked').style.display = e ? 'none' : 'inline'"></code-binding>
               </interactive-code>
               <div class="live-element">
-                <label class="checkbox-label">
-                  <input type="checkbox" id="preview-checkbox" checked>
+                <span class="checkbox-label">
+                  <span class="material-icons" id="icon-checked" style="color: var(--accent-blue);">check_box</span>
+                  <span class="material-icons" id="icon-unchecked" style="display: none; color: var(--text-muted);">check_box_outline_blank</span>
                   Accept terms
-                </label>
+                </span>
               </div>
             </div>
           </div>
@@ -625,11 +624,11 @@ <h3>Comment Type (Line Toggle)</h3>
           <interactive-code class="inline-code" language="html">
             <textarea><interactive-code language="scss">
   <textarea>.element {
-  ${enableShadow}box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+  ${enableBorder}border: 3px solid #50fa7b;
   ${enableRadius}border-radius: 12px;
 }&lt;/textarea>
-  <code-binding key="enableShadow" type="comment" value="true"
-    onchange="document.getElementById('preview-element').style.boxShadow = e ? '0 4px 12px rgba(0,0,0,0.3)' : 'none'"></code-binding>
+  <code-binding key="enableBorder" type="comment" value="true"
+    onchange="document.getElementById('preview-element').style.border = e ? '3px solid #50fa7b' : 'none'"></code-binding>
   <code-binding key="enableRadius" type="comment" value="true"
     onchange="document.getElementById('preview-element').style.borderRadius = e ? '12px' : '0'"></code-binding>
 </interactive-code>
@@ -642,11 +641,11 @@ <h3>Comment Type (Line Toggle)</h3>
             <div class="user-view">
               <interactive-code language="scss">
                 <textarea>.element {
-  ${enableShadow}box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+  ${enableBorder}border: 3px solid #50fa7b;
   ${enableRadius}border-radius: 12px;
 }</textarea>
-                <code-binding key="enableShadow" type="comment" value="true"
-                  onchange="document.getElementById('preview-element').style.boxShadow = e ? '0 4px 12px rgba(0,0,0,0.3)' : 'none'"></code-binding>
+                <code-binding key="enableBorder" type="comment" value="true"
+                  onchange="document.getElementById('preview-element').style.border = e ? '3px solid #50fa7b' : 'none'"></code-binding>
                 <code-binding key="enableRadius" type="comment" value="true"
                   onchange="document.getElementById('preview-element').style.borderRadius = e ? '12px' : '0'"></code-binding>
               </interactive-code>