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

ts_web/elements/dees-button.demo.ts

@@ -1,6 +1,42 @@
-import { html } from '@design.estate/dees-element';
+import { html, css } from '@design.estate/dees-element';
 
 export const demoFunc = () => html`
+  <style>
+    ${css`
+      h3 {
+        margin-top: 32px;
+        margin-bottom: 16px;
+        color: #333;
+      }
+      
+      @media (prefers-color-scheme: dark) {
+        h3 {
+          color: #ccc;
+        }
+      }
+      
+      .form-demo {
+        background: #f5f5f5;
+        padding: 20px;
+        border-radius: 8px;
+        margin: 20px 0;
+      }
+      
+      @media (prefers-color-scheme: dark) {
+        .form-demo {
+          background: #1a1a1a;
+        }
+      }
+      
+      .button-group {
+        display: flex;
+        gap: 16px;
+        margin: 20px 0;
+      }
+    `}
+  </style>
+
+  <h3>Button Types</h3>
   <dees-button>This is a slotted Text</dees-button>
   <p>
     <dees-button text="Highlighted: This text shows" type="highlighted">Highlighted</dees-button>
@@ -8,8 +44,34 @@ export const demoFunc = () => html`
   <p><dees-button type="discreet">This is discreete button</dees-button></p>
   <p><dees-button disabled>This is a disabled button</dees-button></p>
   <p><dees-button type="big">This is a slotted Text</dees-button></p>
+
+  <h3>Button States</h3>
   <p><dees-button status="normal">Normal Status</dees-button></p>
   <p><dees-button disabled status="pending">Pending Status</dees-button></p>
   <p><dees-button disabled status="success">Success Status</dees-button></p>
   <p><dees-button disabled status="error">Error Status</dees-button></p>
+
+  <h3>Buttons in Forms (Auto-spacing)</h3>
+  <div class="form-demo">
+    <dees-form>
+      <dees-input-text label="Name" key="name"></dees-input-text>
+      <dees-input-text label="Email" key="email"></dees-input-text>
+      <dees-button>Save Draft</dees-button>
+      <dees-button type="highlighted">Save and Continue</dees-button>
+      <dees-form-submit>Submit Form</dees-form-submit>
+    </dees-form>
+  </div>
+
+  <h3>Buttons Outside Forms (No auto-spacing)</h3>
+  <div class="button-group">
+    <dees-button>Button 1</dees-button>
+    <dees-button>Button 2</dees-button>
+    <dees-button>Button 3</dees-button>
+  </div>
+
+  <h3>Manual Form Spacing</h3>
+  <div>
+    <dees-button inside-form="true">Manually spaced button 1</dees-button>
+    <dees-button inside-form="true">Manually spaced button 2</dees-button>
+  </div>
 `;