@design.estate/dees-catalog 9.3.0 → 9.4.0

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

@@ -257,6 +257,8 @@ export class DeesSimpleLogin extends DeesElement {
     cssManager.defaultStyles,
     css`
       :host {
+        position: relative;
+        container-type: inline-size;
         color: var(--dees-color-text-primary);
         user-select: none;
         display: block;
@@ -295,7 +297,15 @@ export class DeesSimpleLogin extends DeesElement {
 
       .login {
         width: 100%;
-        max-width: 360px;
+        max-width: 424px;
+        box-sizing: border-box;
+        padding: 32px;
+        margin: auto;
+        border: 1px solid var(--dees-color-border-subtle);
+        border-radius: var(--dees-radius-2xl);
+        corner-shape: var(--dees-corner-shape);
+        background: var(--dees-color-bg-primary);
+        --dees-input-control-height: 40px;
         display: flex;
         flex-direction: column;
         gap: var(--dees-spacing-xl);
@@ -308,8 +318,20 @@ export class DeesSimpleLogin extends DeesElement {
         text-align: center;
       }
 
+      .identity {
+        display: grid;
+        place-items: center;
+        width: 48px;
+        height: 48px;
+        margin: 0 auto 12px;
+        border-radius: var(--dees-radius-xl);
+        background: var(--dees-color-fill-secondary);
+        color: var(--dees-color-text-primary);
+      }
+
       .header {
         font-size: var(--dees-font-title2-size);
+        line-height: 1.2;
         font-weight: 600;
         letter-spacing: -0.025em;
         color: var(--dees-color-text-primary);
@@ -320,12 +342,13 @@ export class DeesSimpleLogin extends DeesElement {
         /* secondary rather than muted: the tertiary label token is a 0.30 alpha and drops
            under 2:1 against both backgrounds */
         color: var(--dees-color-text-secondary);
+        line-height: 1.5;
       }
 
       .methods {
         display: flex;
         flex-direction: column;
-        gap: var(--dees-spacing-lg);
+        gap: var(--dees-spacing-sm);
       }
 
       .method {
@@ -369,6 +392,7 @@ export class DeesSimpleLogin extends DeesElement {
       }
 
       .divider {
+        margin: 12px 0;
         display: flex;
         align-items: center;
         gap: var(--dees-spacing-md);
@@ -382,7 +406,7 @@ export class DeesSimpleLogin extends DeesElement {
         content: '';
         flex: 1;
         height: 1px;
-        background: var(--dees-color-border-subtle);
+        background: var(--dees-color-border-default);
       }
 
       .methodError {
@@ -393,6 +417,9 @@ export class DeesSimpleLogin extends DeesElement {
         line-height: 1.4;
         color: var(--dees-color-text-error);
         user-select: text;
+        padding: 10px 12px;
+        border-radius: var(--dees-radius-md);
+        background: var(--dees-color-badge-error-bg);
       }
 
       .methodError dees-icon {
@@ -434,9 +461,23 @@ export class DeesSimpleLogin extends DeesElement {
       }
 
       dees-tile::part(content) {
-        padding: var(--dees-spacing-xl);
+        padding: 0;
+        border: 0;
+        overflow: visible;
       }
 
+      dees-tile::part(outer) {
+        border: 0;
+        border-radius: 0;
+        background: transparent;
+        overflow: visible;
+      }
+
+      dees-tile::part(header) {
+        padding-bottom: 16px;
+      }
+      .credentials-title { color: var(--dees-color-text-secondary); font-size: 12px; font-weight: 500; }
+
       dees-tile dees-form {
         display: flex;
         flex-direction: column;
@@ -451,6 +492,18 @@ export class DeesSimpleLogin extends DeesElement {
         margin-top: var(--dees-spacing-sm);
         width: 100%;
       }
+
+      .loginContainer { background: var(--dees-color-bg-canvas); align-items: safe center; }
+      .loginContainer dees-button::part(button) { min-height: 40px; font-size: var(--dees-font-control-size); padding-inline: 16px; }
+      .credentials dees-form { display: grid; gap: 18px; }
+      .credentials dees-form-submit, dees-tile dees-form-submit { margin-top: 4px; }
+      @container (max-width: 480px) {
+        .loginContainer { padding: 20px; }
+        .login { padding: 24px; }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .login, .slotContainer { transition: none; }
+      }
     `,
   ];
 
@@ -613,6 +666,7 @@ export class DeesSimpleLogin extends DeesElement {
       <div class="loginContainer">
         <div class="login">
           <div class="login-header">
+            <div class="identity"><slot name="brand"><dees-icon icon="lucide:logIn" iconSize="24"></dees-icon></slot></div>
             <div class="header">${this.copy('heading', 'Sign in')}</div>
             <div class="subheader">
               ${this.copy('subheading', `Enter your credentials to access ${this.name}`)}
@@ -642,7 +696,7 @@ export class DeesSimpleLogin extends DeesElement {
       <div class="methods">
         ${methods.map(
           (methodArg, index) => html`
-            ${index === 0
+            ${index === 0 || (methodArg !== 'password' && methods[index - 1] !== 'password')
               ? ''
               : html`<div class="divider">${this.copy('divider', 'or')}</div>`}
             ${this.renderMethod(methodArg)}
@@ -680,6 +734,7 @@ export class DeesSimpleLogin extends DeesElement {
             return html`
               <dees-button
                 full-width
+                size="lg"
                 .type=${isRegister ? 'outline' : 'accent'}
                 .icon=${busy ? '' : isRegister ? 'lucide:keyRound' : 'lucide:fingerprint'}
                 .text=${isRegister
@@ -720,7 +775,8 @@ export class DeesSimpleLogin extends DeesElement {
             return html`
               <dees-button
                 full-width
-                title=${dense ? providerArg.label : ''}
+                size="lg"
+                title=${providerArg.label}
                 .type=${'secondary'}
                 .icon=${busy ? '' : providerArg.icon || ''}
                 .text=${prefix ? `${prefix} ${providerArg.label}` : providerArg.label}
@@ -764,17 +820,17 @@ export class DeesSimpleLogin extends DeesElement {
           isPasswordBool
           required
         ></dees-input-text>
-        <dees-form-submit full-width>${this.copy('passwordSubmit', 'Sign in')}</dees-form-submit>
+        <dees-form-submit full-width size="lg" .type=${this.resolvedMethods.length === 1 ? 'accent' : 'default'}>${this.copy('passwordSubmit', 'Sign in')}</dees-form-submit>
       </dees-form>
     `;
-    // The tile is what gives a lone credentials form its card. Once the column holds other
-    // methods the column *is* the card, and a second frame around only the fields reads as
-    // a stray box — so the form joins the column bare and keeps the same 360px edge.
+    // Keep the password-only tile handle and configurable heading. Its parts are flat
+    // inside the shared login frame, so every method follows the same content edge.
     return html`
       <div class="method">
         ${this.resolvedMethods.length === 1
           ? html`
               <dees-tile .heading=${this.copy('credentialsHeading', 'Credentials')}>
+                <div slot="header" class="credentials-title">${this.copy('credentialsHeading', 'Credentials')}</div>
                 ${form}
               </dees-tile>
             `