Improve the UI of the contact form, input are not designed.

script.js

@@ -130,7 +130,6 @@ function validateForm() {
 
   return isValid;
 }
-
 function collectFormData() {
   const nameInput = document.querySelector('custom-input#name');
   const emailInput = document.querySelector('custom-input#email');
@@ -145,6 +144,27 @@ function collectFormData() {
   };
 }
 
+// Enhanced form submission with better UX
+async function submitForm(data) {
+  // Simulate API call
+  try {
+    const response = await fetch('/api/contact', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(data)
+    });
+
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
+
+    return { success: true, message: 'Message sent successfully!' };
+  } catch (error) {
+    throw new Error('Failed to send message. Please try again.');
+  }
+}
 // Setup custom input event listeners when elements are ready
 waitForCustomElements().then(() => {
   // Clear errors on input
@@ -503,3 +523,834 @@ function initTypingAnimation() {
 }
 // Initialize typing animation when page loads
 document.addEventListener('DOMContentLoaded', initTypingAnimation);
+
+// Custom Input Component
+class CustomInput extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.value = '';
+  }
+
+  static get observedAttributes() {
+    return ['placeholder', 'type', 'name', 'required', 'value'];
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  render() {
+    const placeholder = this.getAttribute('placeholder') || '';
+    const type = this.getAttribute('type') || 'text';
+    const name = this.getAttribute('name') || '';
+    const required = this.hasAttribute('required');
+    
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+        }
+        
+        .input-wrapper {
+          position: relative;
+          width: 100%;
+        }
+        
+        .input-field {
+          width: 100%;
+          padding: 14px 16px 14px 44px;
+          background: rgba(255, 255, 255, 0.05);
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          border-radius: 12px;
+          color: rgb(var(--fg));
+          font-size: 14px;
+          outline: none;
+          transition: all 0.2s ease;
+          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
+        }
+        
+        .input-field:focus {
+          border-color: rgba(var(--color-primary-500), 0.6);
+          box-shadow: 0 0 0 3px rgba(var(--color-primary-500), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+          background: rgba(255, 255, 255, 0.08);
+        }
+        
+        .input-field::placeholder {
+          color: rgba(161, 161, 170, 0.6);
+          transition: color 0.2s ease;
+        }
+        
+        .input-field:focus::placeholder {
+          color: rgba(161, 161, 170, 0.4);
+        }
+        
+        .input-field.error {
+          border-color: rgb(239, 68, 68);
+          box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+        }
+        
+        .input-icon {
+          position: absolute;
+          left: 14px;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 16px;
+          height: 16px;
+          color: rgba(161, 161, 170, 0.8);
+          transition: all 0.2s ease;
+          pointer-events: none;
+        }
+        
+        .input-field:focus + .input-icon {
+          color: rgba(var(--color-primary-500), 0.8);
+        }
+        
+        .error-text {
+          margin-top: 6px;
+          font-size: 12px;
+          color: rgb(239, 68, 68);
+          opacity: 0;
+          transform: translateY(-4px);
+          transition: all 0.2s ease;
+        }
+        
+        .error-text.show {
+          opacity: 1;
+          transform: translateY(0);
+        }
+        
+        /* Light theme styles */
+        :host(.light) .input-field {
+          background: rgba(255, 255, 255, 0.8);
+          border-color: rgba(15, 23, 42, 0.15);
+          color: rgb(15, 23, 42);
+          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
+        }
+        
+        :host(.light) .input-field:focus {
+          background: rgba(255, 255, 255, 0.95);
+          border-color: rgba(var(--color-primary-500), 0.6);
+          box-shadow: 0 0 0 3px rgba(var(--color-primary-500), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5);
+        }
+        
+        :host(.light) .input-field::placeholder {
+          color: rgba(100, 116, 139, 0.8);
+        }
+        
+        :host(.light) .input-icon {
+          color: rgba(100, 116, 139, 0.8);
+        }
+      </style>
+      
+      <div class="input-wrapper">
+        <input 
+          type="${type}" 
+          name="${name}"
+          placeholder="${placeholder}"
+          ${required ? 'required' : ''}
+          class="input-field"
+        />
+        <div class="input-icon">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="10"></circle>
+            <path d="m9 12 2 2 4-4"></path>
+          </svg>
+        </div>
+        <div class="error-text"></div>
+      </div>
+    `;
+
+    this.value = this.getAttribute('value') || '';
+    this.setupEventListeners();
+    this.updateTheme();
+  }
+
+  setupEventListeners() {
+    const input = this.shadowRoot.querySelector('.input-field');
+    const errorText = this.shadowRoot.querySelector('.error-text');
+
+    if (input) {
+      input.addEventListener('input', (e) => {
+        this.value = e.target.value;
+        this.dispatchEvent(new CustomEvent('input', { detail: { value: this.value } }));
+        this.clearError();
+      });
+
+      input.addEventListener('blur', () => {
+        this.dispatchEvent(new CustomEvent('blur', { detail: { value: this.value } }));
+      });
+
+      input.addEventListener('focus', () => {
+        this.dispatchEvent(new CustomEvent('focus', { detail: { value: this.value } }));
+      });
+    }
+  }
+
+  updateTheme() {
+    const html = document.documentElement;
+    if (html.classList.contains('light')) {
+      this.shadowRoot.host.classList.add('light');
+    } else {
+      this.shadowRoot.host.classList.remove('light');
+    }
+  }
+
+  setError(message) {
+    const input = this.shadowRoot.querySelector('.input-field');
+    const errorText = this.shadowRoot.querySelector('.error-text');
+    
+    if (input) input.classList.add('error');
+    if (errorText) {
+      errorText.textContent = message;
+      errorText.classList.add('show');
+    }
+  }
+
+  clearError() {
+    const input = this.shadowRoot.querySelector('.input-field');
+    const errorText = this.shadowRoot.querySelector('.error-text');
+    
+    if (input) input.classList.remove('error');
+    if (errorText) {
+      errorText.classList.remove('show');
+    }
+  }
+
+  get value() {
+    return this._value || '';
+  }
+
+  set value(val) {
+    this._value = val;
+    const input = this.shadowRoot?.querySelector('.input-field');
+    if (input) {
+      input.value = val;
+    }
+  }
+}
+
+// Custom Textarea Component
+class CustomTextarea extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.value = '';
+  }
+
+  static get observedAttributes() {
+    return ['placeholder', 'name', 'required', 'rows', 'value'];
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  render() {
+    const placeholder = this.getAttribute('placeholder') || '';
+    const name = this.getAttribute('name') || '';
+    const required = this.hasAttribute('required');
+    const rows = this.getAttribute('rows') || '4';
+    
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+        }
+        
+        .textarea-wrapper {
+          position: relative;
+          width: 100%;
+        }
+        
+        .textarea-field {
+          width: 100%;
+          min-height: 120px;
+          padding: 14px 16px 14px 16px;
+          background: rgba(255, 255, 255, 0.05);
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          border-radius: 12px;
+          color: rgb(var(--fg));
+          font-size: 14px;
+          outline: none;
+          transition: all 0.2s ease;
+          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
+          resize: vertical;
+          font-family: inherit;
+          line-height: 1.5;
+        }
+        
+        .textarea-field:focus {
+          border-color: rgba(var(--color-primary-500), 0.6);
+          box-shadow: 0 0 0 3px rgba(var(--color-primary-500), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+          background: rgba(255, 255, 255, 0.08);
+        }
+        
+        .textarea-field::placeholder {
+          color: rgba(161, 161, 170, 0.6);
+          transition: color 0.2s ease;
+        }
+        
+        .textarea-field:focus::placeholder {
+          color: rgba(161, 161, 170, 0.4);
+        }
+        
+        .textarea-field.error {
+          border-color: rgb(239, 68, 68);
+          box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+        }
+        
+        .error-text {
+          margin-top: 6px;
+          font-size: 12px;
+          color: rgb(239, 68, 68);
+          opacity: 0;
+          transform: translateY(-4px);
+          transition: all 0.2s ease;
+        }
+        
+        .error-text.show {
+          opacity: 1;
+          transform: translateY(0);
+        }
+        
+        /* Light theme styles */
+        :host(.light) .textarea-field {
+          background: rgba(255, 255, 255, 0.8);
+          border-color: rgba(15, 23, 42, 0.15);
+          color: rgb(15, 23, 42);
+          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
+        }
+        
+        :host(.light) .textarea-field:focus {
+          background: rgba(255, 255, 255, 0.95);
+          border-color: rgba(var(--color-primary-500), 0.6);
+          box-shadow: 0 0 0 3px rgba(var(--color-primary-500), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5);
+        }
+        
+        :host(.light) .textarea-field::placeholder {
+          color: rgba(100, 116, 139, 0.8);
+        }
+      </style>
+      
+      <div class="textarea-wrapper">
+        <textarea 
+          name="${name}"
+          placeholder="${placeholder}"
+          ${required ? 'required' : ''}
+          rows="${rows}"
+          class="textarea-field"
+        ></textarea>
+        <div class="error-text"></div>
+      </div>
+    `;
+
+    this.value = this.getAttribute('value') || '';
+    this.setupEventListeners();
+    this.updateTheme();
+  }
+
+  setupEventListeners() {
+    const textarea = this.shadowRoot.querySelector('.textarea-field');
+    const errorText = this.shadowRoot.querySelector('.error-text');
+
+    if (textarea) {
+      textarea.addEventListener('input', (e) => {
+        this.value = e.target.value;
+        this.dispatchEvent(new CustomEvent('input', { detail: { value: this.value } }));
+        this.clearError();
+      });
+
+      textarea.addEventListener('blur', () => {
+        this.dispatchEvent(new CustomEvent('blur', { detail: { value: this.value } }));
+      });
+
+      textarea.addEventListener('focus', () => {
+        this.dispatchEvent(new CustomEvent('focus', { detail: { value: this.value } }));
+      });
+    }
+  }
+
+  updateTheme() {
+    const html = document.documentElement;
+    if (html.classList.contains('light')) {
+      this.shadowRoot.host.classList.add('light');
+    } else {
+      this.shadowRoot.host.classList.remove('light');
+    }
+  }
+
+  setError(message) {
+    const textarea = this.shadowRoot.querySelector('.textarea-field');
+    const errorText = this.shadowRoot.querySelector('.error-text');
+    
+    if (textarea) textarea.classList.add('error');
+    if (errorText) {
+      errorText.textContent = message;
+      errorText.classList.add('show');
+    }
+  }
+
+  clearError() {
+    const textarea = this.shadowRoot.querySelector('.textarea-field');
+    const errorText = this.shadowRoot.querySelector('.error-text');
+    
+    if (textarea) textarea.classList.remove('error');
+    if (errorText) {
+      errorText.classList.remove('show');
+    }
+  }
+
+  get value() {
+    return this._value || '';
+  }
+
+  set value(val) {
+    this._value = val;
+    const textarea = this.shadowRoot?.querySelector('.textarea-field');
+    if (textarea) {
+      textarea.value = val;
+    }
+  }
+}
+
+// Register the custom elements
+customElements.define('custom-input', CustomInput);
+customElements.define('custom-textarea', CustomTextarea);
+
+// Theme change observer
+const themeObserver = new MutationObserver(() => {
+  document.querySelectorAll('custom-input, custom-textarea').forEach(el => {
+    if (el.updateTheme) el.updateTheme();
+  });
+});
+
+themeObserver.observe(document.documentElement, {
+  attributes: true,
+  attributeFilter: ['class']
+});
+// Custom Input Component
+class CustomInput extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.value = '';
+  }
+
+  static get observedAttributes() {
+    return ['placeholder', 'type', 'name', 'required', 'value'];
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  render() {
+    const placeholder = this.getAttribute('placeholder') || '';
+    const type = this.getAttribute('type') || 'text';
+    const name = this.getAttribute('name') || '';
+    const required = this.hasAttribute('required');
+    
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+        }
+        
+        .input-wrapper {
+          position: relative;
+          width: 100%;
+        }
+        
+        .input-field {
+          width: 100%;
+          padding: 14px 16px 14px 44px;
+          background: rgba(255, 255, 255, 0.05);
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          border-radius: 12px;
+          color: rgb(var(--fg));
+          font-size: 14px;
+          outline: none;
+          transition: all 0.2s ease;
+          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
+        }
+        
+        .input-field:focus {
+          border-color: rgba(var(--color-primary-500), 0.6);
+          box-shadow: 0 0 0 3px rgba(var(--color-primary-500), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+          background: rgba(255, 255, 255, 0.08);
+        }
+        
+        .input-field::placeholder {
+          color: rgba(161, 161, 170, 0.6);
+          transition: color 0.2s ease;
+        }
+        
+        .input-field:focus::placeholder {
+          color: rgba(161, 161, 170, 0.4);
+        }
+        
+        .input-field.error {
+          border-color: rgb(239, 68, 68);
+          box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+        }
+        
+        .input-icon {
+          position: absolute;
+          left: 14px;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 16px;
+          height: 16px;
+          color: rgba(161, 161, 170, 0.8);
+          transition: all 0.2s ease;
+          pointer-events: none;
+        }
+        
+        .input-field:focus + .input-icon {
+          color: rgba(var(--color-primary-500), 0.8);
+        }
+        
+        .error-text {
+          margin-top: 6px;
+          font-size: 12px;
+          color: rgb(239, 68, 68);
+          opacity: 0;
+          transform: translateY(-4px);
+          transition: all 0.2s ease;
+        }
+        
+        .error-text.show {
+          opacity: 1;
+          transform: translateY(0);
+        }
+        
+        /* Light theme styles */
+        :host(.light) .input-field {
+          background: rgba(255, 255, 255, 0.8);
+          border-color: rgba(15, 23, 42, 0.15);
+          color: rgb(15, 23, 42);
+          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
+        }
+        
+        :host(.light) .input-field:focus {
+          background: rgba(255, 255, 255, 0.95);
+          border-color: rgba(var(--color-primary-500), 0.6);
+          box-shadow: 0 0 0 3px rgba(var(--color-primary-500), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5);
+        }
+        
+        :host(.light) .input-field::placeholder {
+          color: rgba(100, 116, 139, 0.8);
+        }
+        
+        :host(.light) .input-icon {
+          color: rgba(100, 116, 139, 0.8);
+        }
+      </style>
+      
+      <div class="input-wrapper">
+        <input 
+          type="${type}" 
+          name="${name}"
+          placeholder="${placeholder}"
+          ${required ? 'required' : ''}
+          class="input-field"
+        />
+        <div class="input-icon">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="10"></circle>
+            <path d="m9 12 2 2 4-4"></path>
+          </svg>
+        </div>
+        <div class="error-text"></div>
+      </div>
+    `;
+
+    this.value = this.getAttribute('value') || '';
+    this.setupEventListeners();
+    this.updateTheme();
+  }
+
+  setupEventListeners() {
+    const input = this.shadowRoot.querySelector('.input-field');
+    const errorText = this.shadowRoot.querySelector('.error-text');
+
+    if (input) {
+      input.addEventListener('input', (e) => {
+        this.value = e.target.value;
+        this.dispatchEvent(new CustomEvent('input', { detail: { value: this.value } }));
+        this.clearError();
+      });
+
+      input.addEventListener('blur', () => {
+        this.dispatchEvent(new CustomEvent('blur', { detail: { value: this.value } }));
+      });
+
+      input.addEventListener('focus', () => {
+        this.dispatchEvent(new CustomEvent('focus', { detail: { value: this.value } }));
+      });
+    }
+  }
+
+  updateTheme() {
+    const html = document.documentElement;
+    if (html.classList.contains('light')) {
+      this.shadowRoot.host.classList.add('light');
+    } else {
+      this.shadowRoot.host.classList.remove('light');
+    }
+  }
+
+  setError(message) {
+    const input = this.shadowRoot.querySelector('.input-field');
+    const errorText = this.shadowRoot.querySelector('.error-text');
+    
+    if (input) input.classList.add('error');
+    if (errorText) {
+      errorText.textContent = message;
+      errorText.classList.add('show');
+    }
+  }
+
+  clearError() {
+    const input = this.shadowRoot.querySelector('.input-field');
+    const errorText = this.shadowRoot.querySelector('.error-text');
+    
+    if (input) input.classList.remove('error');
+    if (errorText) {
+      errorText.classList.remove('show');
+    }
+  }
+
+  get value() {
+    return this._value || '';
+  }
+
+  set value(val) {
+    this._value = val;
+    const input = this.shadowRoot?.querySelector('.input-field');
+    if (input) {
+      input.value = val;
+    }
+  }
+}
+
+// Custom Textarea Component
+class CustomTextarea extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.value = '';
+  }
+
+  static get observedAttributes() {
+    return ['placeholder', 'name', 'required', 'rows', 'value'];
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  render() {
+    const placeholder = this.getAttribute('placeholder') || '';
+    const name = this.getAttribute('name') || '';
+    const required = this.hasAttribute('required');
+    const rows = this.getAttribute('rows') || '4';
+    
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+        }
+        
+        .textarea-wrapper {
+          position: relative;
+          width: 100%;
+        }
+        
+        .textarea-field {
+          width: 100%;
+          min-height: 120px;
+          padding: 14px 16px 14px 16px;
+          background: rgba(255, 255, 255, 0.05);
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          border-radius: 12px;
+          color: rgb(var(--fg));
+          font-size: 14px;
+          outline: none;
+          transition: all 0.2s ease;
+          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
+          resize: vertical;
+          font-family: inherit;
+          line-height: 1.5;
+        }
+        
+        .textarea-field:focus {
+          border-color: rgba(var(--color-primary-500), 0.6);
+          box-shadow: 0 0 0 3px rgba(var(--color-primary-500), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+          background: rgba(255, 255, 255, 0.08);
+        }
+        
+        .textarea-field::placeholder {
+          color: rgba(161, 161, 170, 0.6);
+          transition: color 0.2s ease;
+        }
+        
+        .textarea-field:focus::placeholder {
+          color: rgba(161, 161, 170, 0.4);
+        }
+        
+        .textarea-field.error {
+          border-color: rgb(239, 68, 68);
+          box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+        }
+        
+        .error-text {
+          margin-top: 6px;
+          font-size: 12px;
+          color: rgb(239, 68, 68);
+          opacity: 0;
+          transform: translateY(-4px);
+          transition: all 0.2s ease;
+        }
+        
+        .error-text.show {
+          opacity: 1;
+          transform: translateY(0);
+        }
+        
+        /* Light theme styles */
+        :host(.light) .textarea-field {
+          background: rgba(255, 255, 255, 0.8);
+          border-color: rgba(15, 23, 42, 0.15);
+          color: rgb(15, 23, 42);
+          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
+        }
+        
+        :host(.light) .textarea-field:focus {
+          background: rgba(255, 255, 255, 0.95);
+          border-color: rgba(var(--color-primary-500), 0.6);
+          box-shadow: 0 0 0 3px rgba(var(--color-primary-500), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5);
+        }
+        
+        :host(.light) .textarea-field::placeholder {
+          color: rgba(100, 116, 139, 0.8);
+        }
+      </style>
+      
+      <div class="textarea-wrapper">
+        <textarea 
+          name="${name}"
+          placeholder="${placeholder}"
+          ${required ? 'required' : ''}
+          rows="${rows}"
+          class="textarea-field"
+        ></textarea>
+        <div class="error-text"></div>
+      </div>
+    `;
+
+    this.value = this.getAttribute('value') || '';
+    this.setupEventListeners();
+    this.updateTheme();
+  }
+
+  setupEventListeners() {
+    const textarea = this.shadowRoot.querySelector('.textarea-field');
+    const errorText = this.shadowRoot.querySelector('.error-text');
+
+    if (textarea) {
+      textarea.addEventListener('input', (e) => {
+        this.value = e.target.value;
+        this.dispatchEvent(new CustomEvent('input', { detail: { value: this.value } }));
+        this.clearError();
+      });
+
+      textarea.addEventListener('blur', () => {
+        this.dispatchEvent(new CustomEvent('blur', { detail: { value: this.value } }));
+      });
+
+      textarea.addEventListener('focus', () => {
+        this.dispatchEvent(new CustomEvent('focus', { detail: { value: this.value } }));
+      });
+    }
+  }
+
+  updateTheme() {
+    const html = document.documentElement;
+    if (html.classList.contains('light')) {
+      this.shadowRoot.host.classList.add('light');
+    } else {
+      this.shadowRoot.host.classList.remove('light');
+    }
+  }
+
+  setError(message) {
+    const textarea = this.shadowRoot.querySelector('.textarea-field');
+    const errorText = this.shadowRoot.querySelector('.error-text');
+    
+    if (textarea) textarea.classList.add('error');
+    if (errorText) {
+      errorText.textContent = message;
+      errorText.classList.add('show');
+    }
+  }
+
+  clearError() {
+    const textarea = this.shadowRoot.querySelector('.textarea-field');
+    const errorText = this.shadowRoot.querySelector('.error-text');
+    
+    if (textarea) textarea.classList.remove('error');
+    if (errorText) {
+      errorText.classList.remove('show');
+    }
+  }
+
+  get value() {
+    return this._value || '';
+  }
+
+  set value(val) {
+    this._value = val;
+    const textarea = this.shadowRoot?.querySelector('.textarea-field');
+    if (textarea) {
+      textarea.value = val;
+    }
+  }
+}
+
+// Register the custom elements
+customElements.define('custom-input', CustomInput);
+customElements.define('custom-textarea', CustomTextarea);
+
+// Theme change observer
+const themeObserver = new MutationObserver(() => {
+  document.querySelectorAll('custom-input, custom-textarea').forEach(el => {
+    if (el.updateTheme) el.updateTheme();
+  });
+});
+
+themeObserver.observe(document.documentElement, {
+  attributes: true,
+  attributeFilter: ['class']
+});

style.css

@@ -86,6 +86,42 @@ html.light .chip {
 }
 /* Enhanced Form Styling for custom components */
 
+/* Form labels positioning */
+.label {
+  @apply block text-sm font-medium text-zinc-300 mb-3 mt-1;
+}
+
+/* Custom component containers */
+custom-input, custom-textarea {
+  margin-bottom: 6px;
+}
+
+/* Enhanced input focus states for consistency */
+:host custom-input:focus-within .input-field,
+:host custom-textarea:focus-within .textarea-field {
+  transform: translateY(-1px);
+}
+
+/* Smooth transitions for form interactions */
+custom-input, custom-textarea {
+  transition: all 0.2s ease;
+}
+
+/* Error state animations */
+custom-input[error], custom-textarea[error] {
+  animation: shake 0.3s ease-in-out;
+}
+
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-4px); }
+  75% { transform: translateX(4px); }
+}
+
+/* Light theme label colors */
+html.light .label {
+  color: rgb(71, 85, 105);
+}
 /* Ensure web components inherit dark mode */
 html.light custom-input,
 html.light custom-textarea {