feat(form-inputs): Improve form input consistency and auto spacing across inputs and buttons

ts_web/elements/dees-button.ts

@@ -55,10 +55,24 @@ export class DeesButton extends DeesElement {
   })
   public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
 
+  @property({
+    type: Boolean,
+    reflect: true
+  })
+  public insideForm: boolean = false;
+
   constructor() {
     super();
   }
 
+  public async connectedCallback() {
+    await super.connectedCallback();
+    // Auto-detect if inside a form
+    if (!this.insideForm && this.closest('dees-form')) {
+      this.insideForm = true;
+    }
+  }
+
   public static styles = [
     cssManager.defaultStyles,
     css`
@@ -71,6 +85,27 @@ export class DeesButton extends DeesElement {
         display: none;
       }
 
+      /* Form spacing styles */
+      /* Default vertical form layout */
+      :host([inside-form]) {
+        margin-bottom: 16px; /* Using standard 16px like inputs */
+      }
+      
+      :host([inside-form]:last-child) {
+        margin-bottom: 0;
+      }
+      
+      /* Horizontal form layout - auto-detected via parent */
+      dees-form[horizontal-layout] :host([inside-form]) {
+        display: inline-block;
+        margin-right: 16px;
+        margin-bottom: 0;
+      }
+      
+      dees-form[horizontal-layout] :host([inside-form]:last-child) {
+        margin-right: 0;
+      }
+
       .button {
         transition: all 0.1s , color 0s;
         position: relative;