release: WRNexusJS 0.8.0

examples/basic-app/app/layouts/auth.wrn

@@ -3,9 +3,27 @@
 component AuthLayout {
   view {
     <div class="auth-wrap">
-      <div data-component="card" class="auth-card">
+      <section class="auth-card" aria-label="Authentication">
         <slot></slot>
-      </div>
+      </section>
     </div>
   }
+
+  style {
+    .auth-wrap {
+      display: grid;
+      min-height: 100vh;
+      place-items: center;
+      padding: 1.5rem;
+    }
+
+    .auth-card {
+      width: min(100%, 28rem);
+      padding: 2rem;
+      border: 1px solid var(--wire-color-border);
+      border-radius: var(--wire-radius-lg);
+      background: var(--wire-color-surface);
+      box-shadow: 0 1.25rem 3rem rgb(0 0 0 / 0.18);
+    }
+  }
 }

examples/basic-app/app/layouts/dashboard.wrn

@@ -9,7 +9,7 @@ component DashboardLayout {
           <a href="/ui">Components</a>
           <a href="/">Home</a>
         </nav>
-        <div data-component="theme-toggle" label="Toggle theme"></div>
+        <button type="button" data-wire-theme-toggle aria-label="Toggle color theme">Theme</button>
       </aside>
 
       <main class="dash-main">

examples/basic-app/app/layouts/public.wrn

@@ -11,7 +11,7 @@ component PublicLayout {
           <a href="/chat">{t:nav.chat}</a>
           <a href="/dashboard">{t:nav.dashboard}</a>
           <a href="/about">{t:nav.about}</a>
-          <div data-component="theme-toggle" label="Theme"></div>
+          <button type="button" data-wire-theme-toggle aria-label="Toggle color theme">Theme</button>
           <button class="wire-btn wire-btn--ghost wire-btn--sm" data-wire-lang-set="en">EN</button>
           <button class="wire-btn wire-btn--ghost wire-btn--sm" data-wire-lang-set="es">ES</button>
         </nav>