fix(dees-simple-login): use dees-tile for the login credentials container

ts_web/elements/00group-simple/dees-simple-login/dees-simple-login.ts

@@ -10,6 +10,7 @@ import {
   css,
 } from '@design.estate/dees-element';
 import { themeDefaultStyles } from '../../00theme.js';
+import '../../00group-layout/dees-tile/dees-tile.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -90,24 +91,25 @@ export class DeesSimpleLogin extends DeesElement {
         color: var(--dees-color-text-muted);
       }
 
-      .login-card {
-        background: var(--dees-color-bg-primary);
-        border: 1px solid var(--dees-color-border-default);
-        border-radius: 8px;
+      dees-tile {
+        width: 100%;
+      }
+
+      dees-tile::part(content) {
         padding: 24px;
       }
 
-      .login-card dees-form {
+      dees-tile dees-form {
         display: flex;
         flex-direction: column;
         gap: 16px;
       }
 
-      .login-card dees-input-text {
+      dees-tile dees-input-text {
         width: 100%;
       }
 
-      .login-card dees-form-submit {
+      dees-tile dees-form-submit {
         margin-top: 8px;
         width: 100%;
       }
@@ -122,13 +124,13 @@ export class DeesSimpleLogin extends DeesElement {
             <div class="header">Sign in</div>
             <div class="subheader">Enter your credentials to access ${this.name}</div>
           </div>
-          <div class="login-card">
+          <dees-tile .heading=${'Credentials'}>
             <dees-form>
               <dees-input-text key="username" label="Username" required></dees-input-text>
               <dees-input-text key="password" label="Password" isPasswordBool required></dees-input-text>
               <dees-form-submit>Sign in</dees-form-submit>
             </dees-form>
-          </div>
+          </dees-tile>
         </div>
       </div>
       <div class="slotContainer">