feat(structure): adjust

ts_web/elements/dees-simple-login/dees-simple-login.demo.ts

@@ -0,0 +1,37 @@
+import { html } from '@design.estate/dees-element';
+
+export const demoFunc = () => html`
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+    }
+    .demo-container {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  </style>
+  <div class="demo-container">
+    <dees-simple-login 
+      name="My Application"
+      @login=${(e: CustomEvent) => {
+        console.log('Login event received:', e.detail);
+        const loginData = e.detail?.data || e.detail;
+        if (loginData?.username && loginData?.password) {
+          alert(`Login attempted with:\nUsername: ${loginData.username}\nPassword: ${loginData.password}`);
+          // Here you would typically validate credentials and show the slotted content
+        } else {
+          console.error('Invalid login data structure:', e.detail);
+        }
+      }}
+    >
+      <div style="padding: 40px; text-align: center;">
+        <h1>Welcome!</h1>
+        <p>This is the slotted content that appears after login.</p>
+      </div>
+    </dees-simple-login>
+  </div>
+`;