v3.78.1

changelog.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 2026-04-12 - 3.78.1 - fix(dees-simple-login)
+use dees-tile for the login credentials container
+
+- replace the custom login card wrapper with a dees-tile component
+- update styles to target dees-tile and its content part while preserving form layout
+- add a credentials heading to the login tile
+
 ## 2026-04-12 - 3.78.0 - feat(dees-settings)
 add dees-settings layout component for displaying read-only settings with footer actions
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.78.0",
+  "version": "3.78.1",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.78.0',
+  version: '3.78.1',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

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">