fix: Update default button text handling and improve demo example in dees-form-submit

ts_web/elements/dees-button.ts

@@ -181,7 +181,7 @@ export class DeesButton extends DeesElement {
         ${this.status === 'normal' ? html``: html`
           <dees-spinner .bnw=${true} status="${this.status}"></dees-spinner>
         `}
-        <div class="textbox">${this.text ? this.text : this.textContent}</div>
+        <div class="textbox">${this.text || html`<slot>Button</slot>`}</div>
       </div>
     `;
   }
@@ -202,9 +202,6 @@ export class DeesButton extends DeesElement {
   }
 
   public async firstUpdated() {
-    if (!this.textContent) {
+    // Don't set default text here as it interferes with slotted content
-      this.textContent = 'Button';
-      this.performUpdate();
-    }
   }
 }

ts_web/elements/dees-form-submit.ts

@@ -5,7 +5,6 @@ import {
   css,
   cssManager,
   property,
-  type CSSResult,
 } from '@design.estate/dees-element';
 import { DeesForm } from './dees-form.js';
 
@@ -17,7 +16,7 @@ declare global {
 
 @customElement('dees-form-submit')
 export class DeesFormSubmit extends DeesElement {
-  public static demo = () => html`<dees-form-submit>This is a sloted text</dees-form-submit>`;
+  public static demo = () => html`<dees-form-submit>Submit Form</dees-form-submit>`;
 
   @property({
     type: Boolean,
@@ -38,17 +37,17 @@ export class DeesFormSubmit extends DeesElement {
   constructor() {
     super();
   }
-
+  
   public static styles = [cssManager.defaultStyles, css``];
 
   public render() {
     return html`
       <dees-button
-        status=${this.status}
+        status="${this.status}"
-        @click=${this.submit}
+        @click="${this.submit}"
-        .disabled=${this.disabled}
+        ?disabled="${this.disabled}"
-        .text=${this.text ? this.text : this.textContent}
       >
+        ${this.text || html`<slot></slot>`}
       </dees-button>
     `;
   }