release: WRNexusJS 0.8.0

examples/basic-app/app/pages/login.wrn

@@ -11,24 +11,49 @@ page Login {
 
   view {
     <form data-schema="login" method="post" action="/api/login" data-redirect="/dashboard">
-      <div data-component="stack" gap="4">
+      <div class="auth-stack">
         <h1>Sign in</h1>
 
         <div class="wire-alert wire-alert--success" data-success="Signed in! The form posted JSON and was validated server-side." hidden></div>
 
-        <div>
-          <div data-component="input" type="email" name="email" placeholder="you@example.com"></div>
+        <label class="auth-field">
+          <span>Email address</span>
+          <input type="email" name="email" autocomplete="email" placeholder="you@example.com" required />
           <span class="wire-field-error" data-error="email"></span>
-        </div>
+        </label>
 
-        <div>
-          <div data-component="input" type="password" name="password" placeholder="Password"></div>
+        <label class="auth-field">
+          <span>Password</span>
+          <input type="password" name="password" autocomplete="current-password" placeholder="Password" required />
           <span class="wire-field-error" data-error="password"></span>
-        </div>
+        </label>
 
         <button type="submit" class="wire-btn wire-btn--primary wire-btn--lg">Sign in</button>
         <p><a href="/">Back home</a></p>
       </div>
     </form>
   }
+
+  style {
+    form,
+    .auth-stack,
+    .auth-field {
+      display: grid;
+      gap: 0.5rem;
+    }
+
+    form,
+    .auth-stack {
+      gap: 1.25rem;
+    }
+
+    .auth-field input {
+      min-height: 2.75rem;
+      padding: 0.7rem 0.8rem;
+      border: 1px solid var(--wire-color-border);
+      border-radius: var(--wire-radius-md);
+      background: var(--wire-color-surface);
+      color: inherit;
+    }
+  }
 }