diff --git a/bun.lock b/bun.lock
index 85c4171e..cc1f47ee 100644
--- a/bun.lock
+++ b/bun.lock
@@ -749,7 +749,7 @@
     },
     "packages/ui": {
       "name": "@wrnexus/ui",
-      "version": "0.8.86",
+      "version": "0.8.87",
       "dependencies": {
         "@wrnexus/core": "workspace:*",
       },
diff --git a/examples/component-showcase/app/pages/base.wrn b/examples/component-showcase/app/pages/base.wrn
index 46c41920..e8fe247a 100644
--- a/examples/component-showcase/app/pages/base.wrn
+++ b/examples/component-showcase/app/pages/base.wrn
@@ -116,7 +116,7 @@ page BaseShowcase {
       <article class="catalog-card" data-interactive-preview="false">
         <div class="catalog-card-preview">
           <div class="catalog-card-glow" aria-hidden="true"></div>
-          <div class="catalog-card-stage"><ChatBubble size="default" color="primary" title="" description="" items='[{"text":"Hi Maya, is the new dashboard ready to review?","direction":"incoming","timestamp":"10:24"},{"text":"Yes! I have shared the latest version with you.","direction":"outgoing","timestamp":"10:25","status":"Delivered"},{"text":"Thanks, I will take a look this afternoon.","direction":"incoming","timestamp":"10:26"}]' oneSided="false" showAvatars="false" showMetadata="true" ariaLabel="Conversation" variant="default" class="" /></div>
+          <div class="catalog-card-stage"><ChatBubble size="default" color="primary" title="" description="" items='[{"text":"Hi Maya, is the new dashboard ready to review?","direction":"incoming","timestamp":"10:24"},{"text":"Yes! I have shared the latest version with you.","direction":"outgoing","timestamp":"10:25","receipt":"read"},{"text":"Thanks, I will take a look this afternoon.","direction":"incoming","timestamp":"10:26"},{"text":"Great. The release notes are attached too.","direction":"outgoing","timestamp":"10:27","receipt":"delivered"},{"text":"One more screenshot coming up.","direction":"outgoing","timestamp":"10:28","receipt":"sent"},{"text":"Uploading the final export now.","direction":"outgoing","timestamp":"10:29","receipt":"sending"},{"text":"Here is the invoice PDF.","direction":"outgoing","timestamp":"10:30","receipt":"failed","status":"Not delivered","actionLabel":"Retry"}]' oneSided="false" showAvatars="false" showMetadata="true" ariaLabel="Conversation" variant="default" class="" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Base</span><h2>Chat Bubble</h2><p>Theme-aware, responsive chat bubble component.</p></div>
diff --git a/examples/component-showcase/app/pages/components/chat-bubble.wrn b/examples/component-showcase/app/pages/components/chat-bubble.wrn
index ccdfe7a2..bead6e53 100644
--- a/examples/component-showcase/app/pages/components/chat-bubble.wrn
+++ b/examples/component-showcase/app/pages/components/chat-bubble.wrn
@@ -5,7 +5,7 @@ page ChatBubbleDetail {
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_title = ctx.url.searchParams.get("pg_title") ?? ""
   state playground_description = ctx.url.searchParams.get("pg_description") ?? ""
-  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"text\":\"Hi Maya, is the new dashboard ready to review?\",\"direction\":\"incoming\",\"timestamp\":\"10:24\"},{\"text\":\"Yes! I have shared the latest version with you.\",\"direction\":\"outgoing\",\"timestamp\":\"10:25\",\"status\":\"Delivered\"},{\"text\":\"Thanks, I will take a look this afternoon.\",\"direction\":\"incoming\",\"timestamp\":\"10:26\"}]")
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"text\":\"Hi Maya, is the new dashboard ready to review?\",\"direction\":\"incoming\",\"timestamp\":\"10:24\"},{\"text\":\"Yes! I have shared the latest version with you.\",\"direction\":\"outgoing\",\"timestamp\":\"10:25\",\"receipt\":\"read\"},{\"text\":\"Thanks, I will take a look this afternoon.\",\"direction\":\"incoming\",\"timestamp\":\"10:26\"},{\"text\":\"Great. The release notes are attached too.\",\"direction\":\"outgoing\",\"timestamp\":\"10:27\",\"receipt\":\"delivered\"},{\"text\":\"One more screenshot coming up.\",\"direction\":\"outgoing\",\"timestamp\":\"10:28\",\"receipt\":\"sent\"},{\"text\":\"Uploading the final export now.\",\"direction\":\"outgoing\",\"timestamp\":\"10:29\",\"receipt\":\"sending\"},{\"text\":\"Here is the invoice PDF.\",\"direction\":\"outgoing\",\"timestamp\":\"10:30\",\"receipt\":\"failed\",\"status\":\"Not delivered\",\"actionLabel\":\"Retry\"}]")
   state playground_oneSided = (ctx.url.searchParams.get("pg_oneSided") ?? "false") === "true"
   state playground_showAvatars = (ctx.url.searchParams.get("pg_showAvatars") ?? "false") === "true"
   state playground_showMetadata = (ctx.url.searchParams.get("pg_showMetadata") ?? "true") === "true"
@@ -48,12 +48,38 @@ page ChatBubbleDetail {
     "text": "Yes! I have shared the latest version with you.",
     "direction": "outgoing",
     "timestamp": "10:25",
-    "status": "Delivered"
+    "receipt": "read"
   <span>&#125;</span>,
   <span>&#123;</span>
     "text": "Thanks, I will take a look this afternoon.",
     "direction": "incoming",
     "timestamp": "10:26"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "text": "Great. The release notes are attached too.",
+    "direction": "outgoing",
+    "timestamp": "10:27",
+    "receipt": "delivered"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "text": "One more screenshot coming up.",
+    "direction": "outgoing",
+    "timestamp": "10:28",
+    "receipt": "sent"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "text": "Uploading the final export now.",
+    "direction": "outgoing",
+    "timestamp": "10:29",
+    "receipt": "sending"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "text": "Here is the invoice PDF.",
+    "direction": "outgoing",
+    "timestamp": "10:30",
+    "receipt": "failed",
+    "status": "Not delivered",
+    "actionLabel": "Retry"
   <span>&#125;</span>
 ]
   view <span>&#123;</span>
@@ -79,12 +105,38 @@ page ChatBubbleDetail {
     "text": "Yes! I have shared the latest version with you.",
     "direction": "outgoing",
     "timestamp": "10:25",
-    "status": "Delivered"
+    "receipt": "read"
   &#125;,
   &#123;
     "text": "Thanks, I will take a look this afternoon.",
     "direction": "incoming",
     "timestamp": "10:26"
+  &#125;,
+  &#123;
+    "text": "Great. The release notes are attached too.",
+    "direction": "outgoing",
+    "timestamp": "10:27",
+    "receipt": "delivered"
+  &#125;,
+  &#123;
+    "text": "One more screenshot coming up.",
+    "direction": "outgoing",
+    "timestamp": "10:28",
+    "receipt": "sent"
+  &#125;,
+  &#123;
+    "text": "Uploading the final export now.",
+    "direction": "outgoing",
+    "timestamp": "10:29",
+    "receipt": "sending"
+  &#125;,
+  &#123;
+    "text": "Here is the invoice PDF.",
+    "direction": "outgoing",
+    "timestamp": "10:30",
+    "receipt": "failed",
+    "status": "Not delivered",
+    "actionLabel": "Retry"
   &#125;
 ]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-chat-bubble-oneSided"><span><strong>one Sided</strong><small>boolean</small></span><input id="playground-chat-bubble-oneSided" name="pg_oneSided" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-chat-bubble-showAvatars"><span><strong>show Avatars</strong><small>boolean</small></span><input id="playground-chat-bubble-showAvatars" name="pg_showAvatars" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-chat-bubble-showMetadata"><span><strong>show Metadata</strong><small>boolean</small></span><input id="playground-chat-bubble-showMetadata" name="pg_showMetadata" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-chat-bubble-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-chat-bubble-ariaLabel" name="pg_ariaLabel" type="text" value="Conversation" /></label><label class="playground-field" for="playground-chat-bubble-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-chat-bubble-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-chat-bubble-class"><span><strong>class</strong><small>string</small></span><input id="playground-chat-bubble-class" name="pg_class" type="text" value="" /></label></div>
         </form>
@@ -102,7 +154,7 @@ page ChatBubbleDetail {
           <div id="chat-bubble-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><ChatBubble size="default" color="primary" title="" description="" items='[{"text":"Hi Maya, is the new dashboard ready to review?","direction":"incoming","timestamp":"10:24"},{"text":"Yes! I have shared the latest version with you.","direction":"outgoing","timestamp":"10:25","status":"Delivered"},{"text":"Thanks, I will take a look this afternoon.","direction":"incoming","timestamp":"10:26"}]' oneSided="false" showAvatars="false" showMetadata="true" ariaLabel="Conversation" variant="default" class="" /></div>
+            <div class="demo-render"><ChatBubble size="default" color="primary" title="" description="" items='[{"text":"Hi Maya, is the new dashboard ready to review?","direction":"incoming","timestamp":"10:24"},{"text":"Yes! I have shared the latest version with you.","direction":"outgoing","timestamp":"10:25","receipt":"read"},{"text":"Thanks, I will take a look this afternoon.","direction":"incoming","timestamp":"10:26"},{"text":"Great. The release notes are attached too.","direction":"outgoing","timestamp":"10:27","receipt":"delivered"},{"text":"One more screenshot coming up.","direction":"outgoing","timestamp":"10:28","receipt":"sent"},{"text":"Uploading the final export now.","direction":"outgoing","timestamp":"10:29","receipt":"sending"},{"text":"Here is the invoice PDF.","direction":"outgoing","timestamp":"10:30","receipt":"failed","status":"Not delivered","actionLabel":"Retry"}]' oneSided="false" showAvatars="false" showMetadata="true" ariaLabel="Conversation" variant="default" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -117,12 +169,38 @@ page ChatBubbleDetail {
     "text": "Yes! I have shared the latest version with you.",
     "direction": "outgoing",
     "timestamp": "10:25",
-    "status": "Delivered"
+    "receipt": "read"
   <span>&#125;</span>,
   <span>&#123;</span>
     "text": "Thanks, I will take a look this afternoon.",
     "direction": "incoming",
     "timestamp": "10:26"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "text": "Great. The release notes are attached too.",
+    "direction": "outgoing",
+    "timestamp": "10:27",
+    "receipt": "delivered"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "text": "One more screenshot coming up.",
+    "direction": "outgoing",
+    "timestamp": "10:28",
+    "receipt": "sent"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "text": "Uploading the final export now.",
+    "direction": "outgoing",
+    "timestamp": "10:29",
+    "receipt": "sending"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "text": "Here is the invoice PDF.",
+    "direction": "outgoing",
+    "timestamp": "10:30",
+    "receipt": "failed",
+    "status": "Not delivered",
+    "actionLabel": "Retry"
   <span>&#125;</span>
 ]
   view <span>&#123;</span>
@@ -144,7 +222,7 @@ page ChatBubbleDetail {
           <div id="chat-bubble-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><ChatBubble size="default" color="primary" title="" description="" items='[{"text":"Hi Maya, is the new dashboard ready to review?","direction":"incoming","timestamp":"10:24"},{"text":"Yes! I have shared the latest version with you.","direction":"outgoing","timestamp":"10:25","status":"Delivered"},{"text":"Thanks, I will take a look this afternoon.","direction":"incoming","timestamp":"10:26"}]' oneSided="false" showAvatars="false" showMetadata="true" ariaLabel="Conversation" variant="default" class="" /></div>
+            <div class="demo-render"><ChatBubble size="default" color="primary" title="" description="" items='[{"text":"Hi Maya, is the new dashboard ready to review?","direction":"incoming","timestamp":"10:24"},{"text":"Yes! I have shared the latest version with you.","direction":"outgoing","timestamp":"10:25","receipt":"read"},{"text":"Thanks, I will take a look this afternoon.","direction":"incoming","timestamp":"10:26"},{"text":"Great. The release notes are attached too.","direction":"outgoing","timestamp":"10:27","receipt":"delivered"},{"text":"One more screenshot coming up.","direction":"outgoing","timestamp":"10:28","receipt":"sent"},{"text":"Uploading the final export now.","direction":"outgoing","timestamp":"10:29","receipt":"sending"},{"text":"Here is the invoice PDF.","direction":"outgoing","timestamp":"10:30","receipt":"failed","status":"Not delivered","actionLabel":"Retry"}]' oneSided="false" showAvatars="false" showMetadata="true" ariaLabel="Conversation" variant="default" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -159,12 +237,38 @@ page ChatBubbleDetail {
     "text": "Yes! I have shared the latest version with you.",
     "direction": "outgoing",
     "timestamp": "10:25",
-    "status": "Delivered"
+    "receipt": "read"
   <span>&#125;</span>,
   <span>&#123;</span>
     "text": "Thanks, I will take a look this afternoon.",
     "direction": "incoming",
     "timestamp": "10:26"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "text": "Great. The release notes are attached too.",
+    "direction": "outgoing",
+    "timestamp": "10:27",
+    "receipt": "delivered"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "text": "One more screenshot coming up.",
+    "direction": "outgoing",
+    "timestamp": "10:28",
+    "receipt": "sent"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "text": "Uploading the final export now.",
+    "direction": "outgoing",
+    "timestamp": "10:29",
+    "receipt": "sending"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "text": "Here is the invoice PDF.",
+    "direction": "outgoing",
+    "timestamp": "10:30",
+    "receipt": "failed",
+    "status": "Not delivered",
+    "actionLabel": "Retry"
   <span>&#125;</span>
 ]
   view <span>&#123;</span>
@@ -186,7 +290,7 @@ page ChatBubbleDetail {
           <div id="chat-bubble-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><ChatBubble size="default" color="primary" title="" description="" items='[{"text":"Hi Maya, is the new dashboard ready to review?","direction":"incoming","timestamp":"10:24"},{"text":"Yes! I have shared the latest version with you.","direction":"outgoing","timestamp":"10:25","status":"Delivered"},{"text":"Thanks, I will take a look this afternoon.","direction":"incoming","timestamp":"10:26"}]' oneSided="false" showAvatars="false" showMetadata="true" ariaLabel="Conversation" variant="default" class="" /></div>
+            <div class="demo-render"><ChatBubble size="default" color="primary" title="" description="" items='[{"text":"Hi Maya, is the new dashboard ready to review?","direction":"incoming","timestamp":"10:24"},{"text":"Yes! I have shared the latest version with you.","direction":"outgoing","timestamp":"10:25","receipt":"read"},{"text":"Thanks, I will take a look this afternoon.","direction":"incoming","timestamp":"10:26"},{"text":"Great. The release notes are attached too.","direction":"outgoing","timestamp":"10:27","receipt":"delivered"},{"text":"One more screenshot coming up.","direction":"outgoing","timestamp":"10:28","receipt":"sent"},{"text":"Uploading the final export now.","direction":"outgoing","timestamp":"10:29","receipt":"sending"},{"text":"Here is the invoice PDF.","direction":"outgoing","timestamp":"10:30","receipt":"failed","status":"Not delivered","actionLabel":"Retry"}]' oneSided="false" showAvatars="false" showMetadata="true" ariaLabel="Conversation" variant="default" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -201,12 +305,38 @@ page ChatBubbleDetail {
     "text": "Yes! I have shared the latest version with you.",
     "direction": "outgoing",
     "timestamp": "10:25",
-    "status": "Delivered"
+    "receipt": "read"
   <span>&#125;</span>,
   <span>&#123;</span>
     "text": "Thanks, I will take a look this afternoon.",
     "direction": "incoming",
     "timestamp": "10:26"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "text": "Great. The release notes are attached too.",
+    "direction": "outgoing",
+    "timestamp": "10:27",
+    "receipt": "delivered"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "text": "One more screenshot coming up.",
+    "direction": "outgoing",
+    "timestamp": "10:28",
+    "receipt": "sent"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "text": "Uploading the final export now.",
+    "direction": "outgoing",
+    "timestamp": "10:29",
+    "receipt": "sending"
+  <span>&#125;</span>,
+  <span>&#123;</span>
+    "text": "Here is the invoice PDF.",
+    "direction": "outgoing",
+    "timestamp": "10:30",
+    "receipt": "failed",
+    "status": "Not delivered",
+    "actionLabel": "Retry"
   <span>&#125;</span>
 ]
   view <span>&#123;</span>
diff --git a/examples/component-showcase/app/pages/components/drawer.wrn b/examples/component-showcase/app/pages/components/drawer.wrn
index 2036c8e9..0df47a1b 100644
--- a/examples/component-showcase/app/pages/components/drawer.wrn
+++ b/examples/component-showcase/app/pages/components/drawer.wrn
@@ -179,6 +179,44 @@ page DrawerDetail {
   &lt;div data-slot="footer"&gt;
     &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
   &lt;/div&gt;
+&lt;/Drawer&gt;</code></pre>
+          </section>
+        </div>
+      </article>
+      <article class="demo-case">
+        <header class="demo-case-header">
+          <div><span class="demo-case-eyebrow">Compact</span><h2>Top notice drawer</h2><p>Slide a panel down from the top edge for announcements, search, or quick settings.</p></div>
+          <span class="demo-case-number">04</span>
+        </header>
+        <div class="demo-workbench">
+          <div id="drawer-demo-4" class="demo-canvas demo-canvas--4">
+            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
+            <p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Click the trigger to open the drawer</p>
+            <div class="demo-render"><Drawer open="false" defaultOpen="false" placement="top" size="sm" variant="success" title="Scheduled maintenance" description="The workspace will be read-only on Sunday from 02:00 to 03:00 UTC." icon="icon-[lucide--trash-2]" label="Advanced example" closeLabel="Advanced example" showClose="true" closeOnBackdrop="true" closeOnEscape="true" duration="260" overlay="true" scrollable="true" triggerLabel="Open top drawer" triggerIcon="icon-[lucide--panel-top-open]" class="showcase-instance showcase-instance--4"><div class="showcase-overlay-content"><p>Save your work before the window starts.</p></div></Drawer></div>
+          </div>
+          <section class="demo-code" aria-label="Top notice drawer usage">
+            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
+            <pre><code>&lt;Drawer
+  placement="top"
+  size="sm"
+  variant="success"
+  title="Scheduled maintenance"
+  description="The workspace will be read-only on Sunday from 02:00 to 03:00 UTC."
+  icon="icon-[lucide--trash-2]"
+  label="Advanced example"
+  closeLabel="Advanced example"
+  triggerLabel="Open top drawer"
+  triggerIcon="icon-[lucide--panel-top-open]"&gt;
+  &lt;div data-slot="trigger"&gt;
+    &lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="header"&gt;
+    &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="showcase-overlay-content"&gt;&lt;p&gt;Save your work before the window starts.&lt;/p&gt;&lt;/div&gt;
+  &lt;div data-slot="footer"&gt;
+    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/Drawer&gt;</code></pre>
           </section>
         </div>
@@ -205,7 +243,7 @@ if (component) registerOutputHandler(component, "cancel", (payload) =&gt; <span>
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>open</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>defaultOpen</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"right"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Drawer"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Drawer"</code></td><td>No</td></tr><tr><td><code>closeLabel</code></td><td>string</td><td><code>"Close drawer"</code></td><td>No</td></tr><tr><td><code>showClose</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>closeOnBackdrop</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>closeOnEscape</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>duration</code></td><td>number</td><td><code>260</code></td><td>No</td></tr><tr><td><code>overlay</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>scrollable</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>triggerLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>triggerIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#drawer-demo-1">Right-side detail drawer</a><a href="#drawer-demo-2">Bottom mobile drawer</a><a href="#drawer-demo-3">Wide navigation drawer</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#drawer-demo-1">Right-side detail drawer</a><a href="#drawer-demo-2">Bottom mobile drawer</a><a href="#drawer-demo-3">Wide navigation drawer</a><a href="#drawer-demo-4">Top notice drawer</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
diff --git a/examples/component-showcase/app/pages/components/section.wrn b/examples/component-showcase/app/pages/components/section.wrn
index f3e8a288..c8802aac 100644
--- a/examples/component-showcase/app/pages/components/section.wrn
+++ b/examples/component-showcase/app/pages/components/section.wrn
@@ -45,7 +45,7 @@ page SectionDetail {
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>10 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-section-id"><span><strong>id</strong><small>string</small></span><input id="playground-section-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-section-size"><span><strong>size</strong><small>string</small></span><select id="playground-section-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-section-color"><span><strong>color</strong><small>string</small></span><select id="playground-section-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-section-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-section-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="raised">raised</option><option value="transparent">transparent</option></select></label><label class="playground-field" for="playground-section-spacing"><span><strong>spacing</strong><small>string</small></span><select id="playground-section-spacing" name="pg_spacing"><option value="lg" selected>lg</option><option value="none">none</option><option value="sm">sm</option><option value="md">md</option><option value="xl">xl</option></select></label><label class="playground-field" for="playground-section-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-section-maxWidth" name="pg_maxWidth"><option value="xl" selected>xl</option><option value="compact">compact</option><option value="lg">lg</option><option value="wide">wide</option><option value="2xl">2xl</option><option value="full">full</option></select></label><label class="playground-toggle" for="playground-section-fullWidth"><span><strong>full Width</strong><small>boolean</small></span><input id="playground-section-fullWidth" name="pg_fullWidth" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-section-borderTop"><span><strong>border Top</strong><small>boolean</small></span><input id="playground-section-borderTop" name="pg_borderTop" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-section-borderBottom"><span><strong>border Bottom</strong><small>boolean</small></span><input id="playground-section-borderBottom" name="pg_borderBottom" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-section-class"><span><strong>class</strong><small>string</small></span><input id="playground-section-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-section-id"><span><strong>id</strong><small>string</small></span><input id="playground-section-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-section-size"><span><strong>size</strong><small>string</small></span><select id="playground-section-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-section-color"><span><strong>color</strong><small>string</small></span><select id="playground-section-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-section-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-section-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="raised">raised</option><option value="tinted">tinted</option><option value="solid">solid</option><option value="panel">panel</option><option value="grid">grid</option></select></label><label class="playground-field" for="playground-section-spacing"><span><strong>spacing</strong><small>string</small></span><select id="playground-section-spacing" name="pg_spacing"><option value="lg" selected>lg</option><option value="none">none</option><option value="sm">sm</option><option value="md">md</option><option value="xl">xl</option></select></label><label class="playground-field" for="playground-section-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-section-maxWidth" name="pg_maxWidth"><option value="xl" selected>xl</option><option value="compact">compact</option><option value="lg">lg</option><option value="wide">wide</option><option value="2xl">2xl</option><option value="full">full</option></select></label><label class="playground-toggle" for="playground-section-fullWidth"><span><strong>full Width</strong><small>boolean</small></span><input id="playground-section-fullWidth" name="pg_fullWidth" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-section-borderTop"><span><strong>border Top</strong><small>boolean</small></span><input id="playground-section-borderTop" name="pg_borderTop" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-section-borderBottom"><span><strong>border Bottom</strong><small>boolean</small></span><input id="playground-section-borderBottom" name="pg_borderBottom" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-section-class"><span><strong>class</strong><small>string</small></span><input id="playground-section-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -61,12 +61,13 @@ page SectionDetail {
           <div id="section-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Section id="standard-section" size="default" variant="default" spacing="lg" maxWidth="xl" fullWidth="false" borderTop="false" borderBottom="false" class="showcase-instance showcase-instance--1"><div class="showcase-content-block">Standard section content</div></Section></div>
+            <div class="demo-render"><Section id="standard-section" size="default" variant="grid" spacing="lg" maxWidth="xl" fullWidth="false" borderTop="false" borderBottom="false" class="showcase-instance showcase-instance--1"><div class="showcase-content-block">Standard section content</div></Section></div>
           </div>
           <section class="demo-code" aria-label="Standard content section usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Section
-  id="standard-section"&gt;
+  id="standard-section"
+  variant="grid"&gt;
   &lt;div class="showcase-content-block"&gt;Standard section content&lt;/div&gt;
 &lt;/Section&gt;</code></pre>
           </section>
@@ -105,14 +106,14 @@ page SectionDetail {
           <div id="section-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Section id="full-section" size="lg" variant="raised" maxWidth="full" fullWidth="true" borderTop="true" borderBottom="true" class="showcase-instance showcase-instance--3"><div class="showcase-content-block">Full-width public page section</div></Section></div>
+            <div class="demo-render"><Section id="full-section" size="lg" variant="solid" maxWidth="full" fullWidth="true" borderTop="true" borderBottom="true" class="showcase-instance showcase-instance--3"><div class="showcase-content-block">Full-width public page section</div></Section></div>
           </div>
           <section class="demo-code" aria-label="Full-width surface section usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Section
   id="full-section"
   size="lg"
-  variant="raised"
+  variant="solid"
   maxWidth="full"
   fullWidth="true"
   borderTop="true"
diff --git a/examples/component-showcase/app/pages/components/timeline.wrn b/examples/component-showcase/app/pages/components/timeline.wrn
index 703d8cb7..044788a3 100644
--- a/examples/component-showcase/app/pages/components/timeline.wrn
+++ b/examples/component-showcase/app/pages/components/timeline.wrn
@@ -264,7 +264,7 @@ page TimelineDetail {
       "Standard"
     ]
   &#125;
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-timeline-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-timeline-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="raised">raised</option><option value="outline">outline</option></select></label><label class="playground-toggle" for="playground-timeline-numbered"><span><strong>numbered</strong><small>boolean</small></span><input id="playground-timeline-numbered" name="pg_numbered" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-timeline-class"><span><strong>class</strong><small>string</small></span><input id="playground-timeline-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-timeline-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-timeline-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="raised">raised</option><option value="outline">outline</option><option value="minimal">minimal</option><option value="compact">compact</option><option value="alternate">alternate</option></select></label><label class="playground-toggle" for="playground-timeline-numbered"><span><strong>numbered</strong><small>boolean</small></span><input id="playground-timeline-numbered" name="pg_numbered" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-timeline-class"><span><strong>class</strong><small>string</small></span><input id="playground-timeline-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -324,7 +324,7 @@ page TimelineDetail {
           <div id="timeline-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Timeline size="sm" title="Recent activity" description="A compact configuration for dashboards and dense product surfaces." items='[{"title":"Status changed","time":"Today"},{"title":"Comment added","time":"Yesterday"},{"title":"Document uploaded","time":"3 days ago"}]' variant="soft" numbered="false" class="showcase-instance showcase-instance--2" /></div>
+            <div class="demo-render"><Timeline size="sm" title="Recent activity" description="A compact configuration for dashboards and dense product surfaces." items='[{"title":"Status changed","time":"Today"},{"title":"Comment added","time":"Yesterday"},{"title":"Document uploaded","time":"3 days ago"}]' variant="compact" numbered="false" class="showcase-instance showcase-instance--2" /></div>
           </div>
           <section class="demo-code" aria-label="Compact activity history usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -349,7 +349,7 @@ page TimelineDetail {
       title="Recent activity"
       description="A compact configuration for dashboards and dense product surfaces."
       items="<span>&#123;</span>items<span>&#125;</span>"
-      variant="soft"
+      variant="compact"
     /&gt;
   <span>&#125;</span>
 <span>&#125;</span></code></pre>
@@ -365,7 +365,7 @@ page TimelineDetail {
           <div id="timeline-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Timeline size="lg" title="Implementation milestones" description="Planned delivery sequence." items='[{"title":"Foundation","description":"Tokens, themes, and primitives","icon":"icon-[lucide--layers-3]","status":"complete"},{"title":"Components","description":"Reusable UI and documentation","icon":"icon-[lucide--blocks]","current":true},{"title":"Applications","description":"Compose production interfaces","icon":"icon-[lucide--rocket]"}]' variant="raised" numbered="false" class="showcase-instance showcase-instance--3" /></div>
+            <div class="demo-render"><Timeline size="lg" title="Implementation milestones" description="Planned delivery sequence." items='[{"title":"Foundation","description":"Tokens, themes, and primitives","icon":"icon-[lucide--layers-3]","status":"complete"},{"title":"Components","description":"Reusable UI and documentation","icon":"icon-[lucide--blocks]","current":true},{"title":"Applications","description":"Compose production interfaces","icon":"icon-[lucide--rocket]"}]' variant="alternate" numbered="false" class="showcase-instance showcase-instance--3" /></div>
           </div>
           <section class="demo-code" aria-label="Rich milestone timeline usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -395,7 +395,7 @@ page TimelineDetail {
       title="Implementation milestones"
       description="Planned delivery sequence."
       items="<span>&#123;</span>items<span>&#125;</span>"
-      variant="raised"
+      variant="alternate"
     /&gt;
   <span>&#125;</span>
 <span>&#125;</span></code></pre>
diff --git a/examples/component-showcase/app/pages/index.wrn b/examples/component-showcase/app/pages/index.wrn
index daabadfa..7c2ae95f 100644
--- a/examples/component-showcase/app/pages/index.wrn
+++ b/examples/component-showcase/app/pages/index.wrn
@@ -17,11 +17,11 @@ page ComponentShowcase {
       <section class="home-product-grid"><article><span class="icon-[lucide--component] size-7"></span><strong>84 components</strong><p>Accessible primitives for every product surface.</p><a href="/base">Browse components →</a></article><article><span class="icon-[lucide--layout-template] size-7"></span><strong>Ready-made blocks</strong><p>Composable sections assembled from WRNexus UI.</p><a href="/block-library">Explore blocks →</a></article><article><span class="icon-[lucide--panels-top-left] size-7"></span><strong>Page templates</strong><p>Complete responsive pages ready to customize.</p><a href="/templates">View templates →</a></article></section>
       <section class="showcase-stats">
         <div class="showcase-stat"><strong>84</strong><span>Unique components</span></div>
-        <div class="showcase-stat"><strong>345</strong><span>Live configurations</span></div>
+        <div class="showcase-stat"><strong>346</strong><span>Live configurations</span></div>
         <div class="showcase-stat"><strong>0</strong><span>Duplicate implementations</span></div>
         <div class="showcase-stat"><strong>11</strong><span>Focused categories</span></div>
       </section>
-      <section class="home-categories"><div class="home-section-heading"><span>Explore the system</span><h2>Everything your product needs</h2></div><div class="home-category-grid"><a class="home-category home-category--1" href="/base"><span class="home-category-index">01</span><div><strong>Base</strong><p>26 components · 85 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--2" href="/core"><span class="home-category-index">02</span><div><strong>Core</strong><p>2 components · 4 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--3" href="/data"><span class="home-category-index">03</span><div><strong>Data</strong><p>1 components · 3 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--4" href="/forms"><span class="home-category-index">04</span><div><strong>Forms</strong><p>12 components · 32 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--1" href="/integrations"><span class="home-category-index">05</span><div><strong>Integrations</strong><p>7 components · 19 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--2" href="/layout"><span class="home-category-index">06</span><div><strong>Layout</strong><p>11 components · 31 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--3" href="/marketing"><span class="home-category-index">07</span><div><strong>Marketing</strong><p>1 components · 3 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--4" href="/navigation"><span class="home-category-index">08</span><div><strong>Navigation</strong><p>10 components · 30 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--1" href="/overlays"><span class="home-category-index">09</span><div><strong>Overlays</strong><p>6 components · 20 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--2" href="/tables"><span class="home-category-index">010</span><div><strong>Tables</strong><p>1 components · 9 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--3" href="/advanced-forms"><span class="home-category-index">011</span><div><strong>Advanced Forms</strong><p>7 components · 109 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a></div></section>
+      <section class="home-categories"><div class="home-section-heading"><span>Explore the system</span><h2>Everything your product needs</h2></div><div class="home-category-grid"><a class="home-category home-category--1" href="/base"><span class="home-category-index">01</span><div><strong>Base</strong><p>26 components · 85 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--2" href="/core"><span class="home-category-index">02</span><div><strong>Core</strong><p>2 components · 4 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--3" href="/data"><span class="home-category-index">03</span><div><strong>Data</strong><p>1 components · 3 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--4" href="/forms"><span class="home-category-index">04</span><div><strong>Forms</strong><p>12 components · 32 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--1" href="/integrations"><span class="home-category-index">05</span><div><strong>Integrations</strong><p>7 components · 19 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--2" href="/layout"><span class="home-category-index">06</span><div><strong>Layout</strong><p>11 components · 31 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--3" href="/marketing"><span class="home-category-index">07</span><div><strong>Marketing</strong><p>1 components · 3 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--4" href="/navigation"><span class="home-category-index">08</span><div><strong>Navigation</strong><p>10 components · 30 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--1" href="/overlays"><span class="home-category-index">09</span><div><strong>Overlays</strong><p>6 components · 21 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--2" href="/tables"><span class="home-category-index">010</span><div><strong>Tables</strong><p>1 components · 9 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--3" href="/advanced-forms"><span class="home-category-index">011</span><div><strong>Advanced Forms</strong><p>7 components · 109 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a></div></section>
     </div>
   }
 }
diff --git a/examples/component-showcase/app/pages/layout.wrn b/examples/component-showcase/app/pages/layout.wrn
index 4090b65b..f703a720 100644
--- a/examples/component-showcase/app/pages/layout.wrn
+++ b/examples/component-showcase/app/pages/layout.wrn
@@ -106,7 +106,7 @@ page LayoutShowcase {
       <article class="catalog-card" data-interactive-preview="false">
         <div class="catalog-card-preview">
           <div class="catalog-card-glow" aria-hidden="true"></div>
-          <div class="catalog-card-stage"><Section id="standard-section" size="default" variant="default" spacing="lg" maxWidth="xl" fullWidth="false" borderTop="false" borderBottom="false" class="showcase-instance showcase-instance--1"><div class="showcase-content-block">Standard section content</div></Section></div>
+          <div class="catalog-card-stage"><Section id="standard-section" size="default" variant="grid" spacing="lg" maxWidth="xl" fullWidth="false" borderTop="false" borderBottom="false" class="showcase-instance showcase-instance--1"><div class="showcase-content-block">Standard section content</div></Section></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Layout</span><h2>Section</h2><p>Create a responsive themed page section with controlled spacing, width, borders, and surface treatment.</p></div>
diff --git a/examples/component-showcase/app/pages/overlays.wrn b/examples/component-showcase/app/pages/overlays.wrn
index fd59a8a1..5292fee0 100644
--- a/examples/component-showcase/app/pages/overlays.wrn
+++ b/examples/component-showcase/app/pages/overlays.wrn
@@ -10,7 +10,7 @@ page OverlaysShowcase {
       <span class="showcase-eyebrow">Component category</span>
       <h1 class="showcase-title">Overlays</h1>
       <p class="showcase-description">6 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
-      <div class="category-meta"><span>6 components</span><span>Multiple use cases</span><span>20 live configurations</span></div>
+      <div class="category-meta"><span>6 components</span><span>Multiple use cases</span><span>21 live configurations</span></div>
     </header>
     <div class="catalog-grid">
       <article class="catalog-card" data-interactive-preview="true">
diff --git a/examples/component-showcase/scripts/generate-showcase.mjs b/examples/component-showcase/scripts/generate-showcase.mjs
index a9e05988..c8683fea 100644
--- a/examples/component-showcase/scripts/generate-showcase.mjs
+++ b/examples/component-showcase/scripts/generate-showcase.mjs
@@ -283,7 +283,7 @@ function defaultValue(prop) {
 function sampleValue(prop, component, variation) {
   const name = prop.name.toLowerCase();
   const curated = {
-    ChatBubble: { title:"", description:"", showMetadata:true, showAvatars:false, items:[{text:"Hi Maya, is the new dashboard ready to review?",direction:"incoming",timestamp:"10:24"},{text:"Yes! I have shared the latest version with you.",direction:"outgoing",timestamp:"10:25",status:"Delivered"},{text:"Thanks, I will take a look this afternoon.",direction:"incoming",timestamp:"10:26"}] },
+    ChatBubble: { title:"", description:"", showMetadata:true, showAvatars:false, items:[{text:"Hi Maya, is the new dashboard ready to review?",direction:"incoming",timestamp:"10:24"},{text:"Yes! I have shared the latest version with you.",direction:"outgoing",timestamp:"10:25",receipt:"read"},{text:"Thanks, I will take a look this afternoon.",direction:"incoming",timestamp:"10:26"},{text:"Great. The release notes are attached too.",direction:"outgoing",timestamp:"10:27",receipt:"delivered"},{text:"One more screenshot coming up.",direction:"outgoing",timestamp:"10:28",receipt:"sent"},{text:"Uploading the final export now.",direction:"outgoing",timestamp:"10:29",receipt:"sending"},{text:"Here is the invoice PDF.",direction:"outgoing",timestamp:"10:30",receipt:"failed",status:"Not delivered",actionLabel:"Retry"}] },
     FileUploadProgress: { label:"Upload progress",fileName:"brand-guidelines.pdf",fileSize:"4.8 MB",uploadedSize:variation === 0 ? "2.4 MB" : "",value:variation === 2 ? 100 : 50,status:["uploading","error","complete"][variation % 3] },
     ListGroup: {title:"Workspace",value:"inbox",items:[{value:"inbox",label:"Inbox",description:"Messages that need your attention",icon:"icon-[lucide--inbox]",badge:"8"},{value:"projects",label:"Projects",description:"Your team's active work",icon:"icon-[lucide--folder]"},{value:"archive",label:"Archive",description:"Completed conversations",icon:"icon-[lucide--archive]"}]},
     Rating: {title:"How was your experience?",value:variation === 1 ? 3 : 4,readonly:variation === 2},
diff --git a/examples/component-showcase/scripts/showcase-profiles.mjs b/examples/component-showcase/scripts/showcase-profiles.mjs
index 98b357e2..2917adec 100644
--- a/examples/component-showcase/scripts/showcase-profiles.mjs
+++ b/examples/component-showcase/scripts/showcase-profiles.mjs
@@ -1272,7 +1272,7 @@ export const componentProfiles = {
       standard(
         "Standard content section",
         "Create predictable vertical rhythm around a page section.",
-        { id: "standard-section", spacing: "lg", maxWidth: "xl" },
+        { id: "standard-section", spacing: "lg", maxWidth: "xl", variant: "grid" },
         { default: '<div class="showcase-content-block">Standard section content</div>' },
       ),
       compact(
@@ -1290,7 +1290,7 @@ export const componentProfiles = {
           maxWidth: "full",
           borderTop: true,
           borderBottom: true,
-          variant: "raised",
+          variant: "solid",
         },
         { default: '<div class="showcase-content-block">Full-width public page section</div>' },
       ),
@@ -1298,7 +1298,7 @@ export const componentProfiles = {
     options: {
       spacing: ["none", "sm", "md", "lg", "xl"],
       maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
-      variant: ["default", "soft", "raised", "transparent"],
+      variant: ["default", "soft", "raised", "tinted", "solid", "panel", "grid"],
     },
   },
 
@@ -2093,6 +2093,24 @@ export const componentProfiles = {
             '<div class="showcase-overlay-content showcase-overlay-content--tall"><p>Long scrollable content</p><p>Filters, navigation, details, and forms can be composed here.</p></div>',
         },
       ),
+      compact(
+        "Top notice drawer",
+        "Slide a panel down from the top edge for announcements, search, or quick settings.",
+        {
+          open: false,
+          defaultOpen: false,
+          triggerLabel: "Open top drawer",
+          triggerIcon: "icon-[lucide--panel-top-open]",
+          title: "Scheduled maintenance",
+          description: "The workspace will be read-only on Sunday from 02:00 to 03:00 UTC.",
+          placement: "top",
+          size: "sm",
+        },
+        {
+          default:
+            '<div class="showcase-overlay-content"><p>Save your work before the window starts.</p></div>',
+        },
+      ),
     ],
     playground: {
       open: false,
@@ -2822,7 +2840,7 @@ export const componentProfiles = {
             { title: "Document uploaded", time: "3 days ago" },
           ],
           size: "sm",
-          variant: "soft",
+          variant: "compact",
         },
       ),
       advanced(
@@ -2851,11 +2869,11 @@ export const componentProfiles = {
             },
           ],
           size: "lg",
-          variant: "raised",
+          variant: "alternate",
         },
       ),
     ],
-    options: { size: ["sm", "default", "lg"], variant: ["default", "soft", "raised", "outline"] },
+    options: { size: ["sm", "default", "lg"], variant: ["default", "soft", "raised", "outline", "minimal", "compact", "alternate"] },
   },
 
   Typography: {
diff --git a/examples/component-showcase/showcase-manifest.json b/examples/component-showcase/showcase-manifest.json
index e5568b92..bc7abe86 100644
--- a/examples/component-showcase/showcase-manifest.json
+++ b/examples/component-showcase/showcase-manifest.json
@@ -75,7 +75,7 @@
   ],
   "componentCount": 84,
   "categoryCount": 11,
-  "totalDemoCount": 345,
+  "totalDemoCount": 346,
   "components": [
     {
       "name": "Accordion",
@@ -475,7 +475,7 @@
       "slug": "drawer",
       "category": "overlays",
       "purpose": "Present responsive modal side or bottom content with focus management, backdrop behavior, slots, and close events.",
-      "demoCount": 3,
+      "demoCount": 4,
       "propCount": 20,
       "slots": ["trigger", "header", "default", "footer"],
       "events": ["open", "close", "cancel"],
diff --git a/packages/ui/components/Accordion.wrn b/packages/ui/components/Accordion.wrn
index 8facf037..c7e46bd3 100644
--- a/packages/ui/components/Accordion.wrn
+++ b/packages/ui/components/Accordion.wrn
@@ -229,15 +229,17 @@ component Accordion {
       width: 100%;
       align-items: center;
       gap: 0.75rem;
-      padding: 0.85rem 0;
+      padding: 0.9rem 0;
       border: 0;
       background: transparent;
       color: var(--wrn-color-text);
       font: inherit;
-      font-size: 0.88rem;
+      font-size: 0.9rem;
       font-weight: 600;
+      letter-spacing: -0.008em;
       text-align: left;
       cursor: pointer;
+      transition: color 120ms ease;
     }
 
     .wrn-next__accordion-heading > button > span:not(.wrn-next__accordion-indicator) {
@@ -286,7 +288,7 @@ component Accordion {
     .wrn-next__accordion-item[data-open="true"]
       > .wrn-next__accordion-heading
       .wrn-next__accordion-indicator {
-      color: var(--wrn-accordion-accent);
+      color: var(--wrn-color-text);
       transform: rotate(45deg);
     }
 
@@ -298,7 +300,7 @@ component Accordion {
     }
 
     .wrn-next__accordion-item[data-open="true"] > .wrn-next__accordion-heading > button {
-      color: var(--wrn-accordion-accent);
+      color: var(--wrn-color-text);
     }
 
     .wrn-next__accordion-panel {
@@ -321,9 +323,10 @@ component Accordion {
 
     .wrn-next__accordion-content {
       padding: 0 0 1rem;
-      color: var(--wrn-color-muted);
-      font-size: 0.86rem;
+      color: var(--wrn-color-text-muted, var(--wrn-color-muted));
+      font-size: 0.875rem;
       line-height: 1.65;
+      max-width: 68ch;
     }
 
     .wrn-next--accordion[data-indicator-position="start"] .wrn-next__accordion-content {
@@ -350,8 +353,9 @@ component Accordion {
     .wrn-next--accordion-bordered {
       overflow: hidden;
       border: 1px solid var(--wrn-color-border);
-      border-radius: var(--wrn-radius-md);
+      border-radius: var(--wrn-radius);
       background: var(--wrn-color-surface);
+      box-shadow: var(--wrn-shadow-1);
     }
 
     .wrn-next--accordion-bordered > .wrn-next__accordion-item + .wrn-next__accordion-item {
@@ -380,13 +384,16 @@ component Accordion {
 
     .wrn-next--accordion-separated > .wrn-next__accordion-item {
       overflow: hidden;
-      border: 1px solid transparent;
-      border-radius: var(--wrn-radius-md);
-      background: var(--wrn-color-surface-2);
+      border: 1px solid var(--wrn-color-border);
+      border-radius: var(--wrn-radius);
+      background: var(--wrn-color-surface);
+      box-shadow: var(--wrn-shadow-1);
+      transition: box-shadow 160ms ease, border-color 160ms ease;
     }
 
     .wrn-next--accordion-separated > .wrn-next__accordion-item[data-open="true"] {
-      border-color: var(--wrn-color-border);
+      border-color: var(--wrn-color-border-strong, var(--wrn-color-border));
+      box-shadow: var(--wrn-shadow-2);
     }
 
     .wrn-next--accordion-separated
@@ -478,7 +485,7 @@ component Accordion {
 
         .wrn-component p {
           margin: 0;
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-muted, var(--wrn-color-muted));
           line-height: 1.6;
         }
   }
diff --git a/packages/ui/components/AdvancedSelect.wrn b/packages/ui/components/AdvancedSelect.wrn
index 8d7bd119..8c8b47f1 100644
--- a/packages/ui/components/AdvancedSelect.wrn
+++ b/packages/ui/components/AdvancedSelect.wrn
@@ -497,13 +497,14 @@ component AdvancedSelect {
     .wrn-next__select-tags > span {
       display: inline-flex;
       align-items: center;
-      gap: 0.35rem;
-      padding: 0.3rem 0.55rem;
-      border-radius: 999px;
-      color: var(--wrn-component-color);
-      background: color-mix(in srgb, var(--wrn-component-color) 12%, transparent);
-      font-size: 0.75em;
-      font-weight: 700;
+      gap: 0.3rem;
+      padding: 0.15rem 0.5rem;
+      border: 1px solid var(--wrn-color-border);
+      border-radius: calc(var(--wrn-radius-sm) - 2px);
+      color: var(--wrn-color-text);
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
+      font-size: 0.75rem;
+      font-weight: 550;
     }
 
     .wrn-next__select-tags img {
@@ -522,7 +523,7 @@ component AdvancedSelect {
 
     .wrn-next__placeholder {
       overflow: hidden;
-      color: var(--wrn-color-muted);
+      color: var(--wrn-color-input-placeholder, var(--wrn-color-muted));
       text-overflow: ellipsis;
       white-space: nowrap;
     }
@@ -592,7 +593,7 @@ component AdvancedSelect {
 
         .wrn-component p {
           margin: 0;
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-muted, var(--wrn-color-muted));
           line-height: 1.6;
         }
   }
diff --git a/packages/ui/components/AnnouncementBar.wrn b/packages/ui/components/AnnouncementBar.wrn
index 80abebc9..79812948 100644
--- a/packages/ui/components/AnnouncementBar.wrn
+++ b/packages/ui/components/AnnouncementBar.wrn
@@ -234,9 +234,7 @@ badge: string = ""
       background: var(--wrn-color-surface-raised);
       border: 1px solid var(--wrn-color-border);
       border-radius: 1.25rem;
-      box-shadow:
-        0 1px 2px rgb(0 0 0 / 0.04),
-        0 12px 32px rgb(0 0 0 / 0.08);
+      box-shadow: var(--wrn-shadow-2);
     }
 
     .wrn-announcement[data-variant="soft"] .wrn-announcement__surface {
@@ -279,9 +277,7 @@ badge: string = ""
           color-mix(in srgb, var(--announcement-accent) 76%, black 24%)
         );
       border-color: color-mix(in srgb, var(--announcement-contrast) 28%, transparent);
-      box-shadow:
-        0 1px 0 color-mix(in srgb, var(--announcement-contrast) 20%, transparent) inset,
-        0 18px 46px color-mix(in srgb, var(--announcement-accent) 30%, transparent);
+      box-shadow: var(--wrn-shadow-2);
     }
 
     .wrn-announcement__accent {
diff --git a/packages/ui/components/AuthForm.wrn b/packages/ui/components/AuthForm.wrn
index 3affb335..00174ddb 100644
--- a/packages/ui/components/AuthForm.wrn
+++ b/packages/ui/components/AuthForm.wrn
@@ -211,7 +211,7 @@ component AuthForm {
 
         .wrn-component p {
           margin: 0;
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-muted, var(--wrn-color-muted));
           line-height: 1.6;
         }
   }
diff --git a/packages/ui/components/AuthSplitLayout.wrn b/packages/ui/components/AuthSplitLayout.wrn
index af7c5f4c..04ce486a 100644
--- a/packages/ui/components/AuthSplitLayout.wrn
+++ b/packages/ui/components/AuthSplitLayout.wrn
@@ -323,7 +323,7 @@ component AuthSplitLayout {
 
         .wrn-component p {
           margin: 0;
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-muted, var(--wrn-color-muted));
           line-height: 1.6;
         }
   }
diff --git a/packages/ui/components/AvatarGroup.wrn b/packages/ui/components/AvatarGroup.wrn
index 978525a8..cf96ad3e 100644
--- a/packages/ui/components/AvatarGroup.wrn
+++ b/packages/ui/components/AvatarGroup.wrn
@@ -151,7 +151,7 @@ component AvatarGroup {
   style {
     /* --- Avatar group -------------------------------------------------------- */
     .wrn-next--avatar-group {
-      --wrn-avatar-group-size: 3rem;
+      --wrn-avatar-group-size: 2.5rem;
       position: relative;
       display: inline-flex;
       width: fit-content;
@@ -159,24 +159,24 @@ component AvatarGroup {
     }
 
     .wrn-next--avatar-group[data-size="xs"] {
-      --wrn-avatar-group-size: 1.75rem;
+      --wrn-avatar-group-size: 1.5rem;
     }
 
     .wrn-next--avatar-group[data-size="sm"] {
-      --wrn-avatar-group-size: 2.25rem;
+      --wrn-avatar-group-size: 2rem;
     }
 
     .wrn-next--avatar-group[data-size="md"],
     .wrn-next--avatar-group[data-size="default"] {
-      --wrn-avatar-group-size: 3rem;
+      --wrn-avatar-group-size: 2.5rem;
     }
 
     .wrn-next--avatar-group[data-size="lg"] {
-      --wrn-avatar-group-size: 4rem;
+      --wrn-avatar-group-size: 3.25rem;
     }
 
     .wrn-next--avatar-group[data-size="xl"] {
-      --wrn-avatar-group-size: 5rem;
+      --wrn-avatar-group-size: 4.5rem;
     }
 
     .wrn-next__avatar-group-members {
@@ -186,7 +186,7 @@ component AvatarGroup {
 
     .wrn-next--avatar-group[data-layout="stack"] .wrn-next__avatar-group-member,
     .wrn-next--avatar-group[data-layout="stack"] .wrn-next__avatar-group-overflow {
-      margin-left: calc(var(--wrn-avatar-group-size) * -0.22);
+      margin-left: calc(var(--wrn-avatar-group-size) * -0.28);
     }
 
     .wrn-next--avatar-group[data-layout="stack"] :first-child {
@@ -236,7 +236,7 @@ component AvatarGroup {
     }
 
     .wrn-next__avatar-group-member[data-shape="rounded"] {
-      border-radius: calc(var(--wrn-radius-sm, 0.5rem) * 0.72);
+      border-radius: calc(var(--wrn-avatar-group-size) * 0.28);
     }
 
     .wrn-next__avatar-group-avatar,
@@ -248,14 +248,15 @@ component AvatarGroup {
       height: 100%;
       overflow: hidden;
       place-items: center;
-      color: white;
-      border: 2px solid var(--wrn-avatar-group-ring);
+      color: color-mix(in srgb, var(--wrn-avatar-group-color, var(--wrn-color-primary)) 78%, var(--wrn-color-text));
+      border: 1px solid color-mix(in srgb, var(--wrn-avatar-group-color, var(--wrn-color-primary)) 22%, transparent);
       border-radius: inherit;
-      background: var(--wrn-avatar-group-color, var(--wrn-color-primary));
-      box-shadow: 0 5px 14px rgb(0 0 0 / 0.16);
+      background: color-mix(in srgb, var(--wrn-avatar-group-color, var(--wrn-color-primary)) 14%, var(--wrn-color-surface));
+      box-shadow: 0 0 0 2px var(--wrn-color-surface), var(--wrn-shadow-1);
       font: inherit;
-      font-size: calc(var(--wrn-avatar-group-size) * 0.3);
-      font-weight: 800;
+      font-size: calc(var(--wrn-avatar-group-size) * 0.36);
+      font-weight: 650;
+      letter-spacing: -0.01em;
     }
 
     .wrn-next__avatar-group-avatar img,
@@ -270,15 +271,19 @@ component AvatarGroup {
       align-items: center;
       justify-content: center;
       cursor: pointer;
-      color: var(--wrn-color-text);
-      background: var(--wrn-color-surface-2);
+      color: var(--wrn-color-text-muted);
+      border-color: var(--wrn-color-border);
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
+      font-size: calc(var(--wrn-avatar-group-size) * 0.32);
+      font-weight: 650;
+      font-variant-numeric: tabular-nums;
     }
 
     .wrn-next__avatar-group-member:hover,
     .wrn-next__avatar-group-member:focus-visible,
     .wrn-next__avatar-group-overflow:focus-within {
       z-index: 5;
-      transform: translateY(-3px);
+      transform: translateY(-2px);
     }
 
     .wrn-next__avatar-group-member:focus-visible,
@@ -294,13 +299,14 @@ component AvatarGroup {
       z-index: 20;
       width: max-content;
       max-width: 14rem;
-      padding: 0.4rem 0.6rem;
-      color: var(--wrn-color-bg);
-      border-radius: 0.4rem;
-      background: var(--wrn-color-text);
-      box-shadow: 0 8px 22px rgb(0 0 0 / 0.22);
+      padding: 0.375rem 0.6rem;
+      color: #f4f5f7;
+      border: 1px solid rgb(255 255 255 / 0.08);
+      border-radius: var(--wrn-radius-sm, 0.5rem);
+      background: #16181d;
+      box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 8px 24px -4px rgb(0 0 0 / 0.35);
       font-size: 0.75rem;
-      font-weight: 650;
+      font-weight: 550;
       pointer-events: none;
       opacity: 0;
       transform: translate(-50%, 0.25rem);
@@ -317,32 +323,32 @@ component AvatarGroup {
 
     .wrn-next__avatar-group-menu {
       position: absolute;
-      top: calc(100% + 0.65rem);
+      top: calc(100% + 0.5rem);
       right: 0;
       z-index: 30;
       display: grid;
       width: max-content;
       min-width: 12rem;
-      gap: 0.25rem;
-      padding: 0.45rem;
+      gap: 0.125rem;
+      padding: 0.3rem;
       color: var(--wrn-color-text);
       border: 1px solid var(--wrn-color-border);
-      border-radius: var(--wrn-radius-sm, 0.5rem);
-      background: var(--wrn-color-surface);
-      box-shadow: 0 16px 38px rgb(0 0 0 / 0.22);
+      border-radius: var(--wrn-radius);
+      background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
+      box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
     }
 
     .wrn-next__avatar-group-menu-item {
       display: flex;
       align-items: center;
       gap: 0.6rem;
-      padding: 0.45rem 0.55rem;
-      border-radius: 0.4rem;
-      font-size: 0.82rem;
+      padding: 0.4rem 0.55rem;
+      border-radius: calc(var(--wrn-radius-sm) - 2px);
+      font-size: 0.8125rem;
     }
 
     .wrn-next__avatar-group-menu-item:hover {
-      background: var(--wrn-color-surface-2);
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
     }
 
     .wrn-next__avatar-group-menu-avatar {
@@ -353,9 +359,10 @@ component AvatarGroup {
       flex: none;
       place-items: center;
       border-radius: 999px;
-      background: var(--wrn-color-surface-2);
+      color: var(--wrn-color-primary-text, var(--wrn-color-primary));
+      background: color-mix(in srgb, var(--wrn-color-primary) 12%, var(--wrn-color-surface));
       font-size: 0.65rem;
-      font-weight: 800;
+      font-weight: 650;
     }
 
     /* Shared component foundation. */
@@ -423,7 +430,7 @@ component AvatarGroup {
 
         .wrn-component p {
           margin: 0;
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-muted, var(--wrn-color-muted));
           line-height: 1.6;
         }
   }
diff --git a/packages/ui/components/BackToTop.wrn b/packages/ui/components/BackToTop.wrn
index a4f3382e..2a2c7631 100644
--- a/packages/ui/components/BackToTop.wrn
+++ b/packages/ui/components/BackToTop.wrn
@@ -192,7 +192,6 @@ component BackToTop {
       padding: 0.75rem;
       color: var(--back-contrast);
       background:
-        linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 56%),
         var(--back-accent);
       border: 1px solid color-mix(in srgb, white 18%, transparent);
       border-radius: inherit;
diff --git a/packages/ui/components/Blockquote.wrn b/packages/ui/components/Blockquote.wrn
index fbfbe3ef..77d17562 100644
--- a/packages/ui/components/Blockquote.wrn
+++ b/packages/ui/components/Blockquote.wrn
@@ -183,7 +183,7 @@ component Blockquote {
     .wrn-next__blockquote-attribution cite {
       color: var(--wrn-color-text);
       font-style: normal;
-      font-weight: 700;
+      font-weight: 620;
     }
 
     .wrn-next__blockquote-attribution a {
@@ -244,7 +244,7 @@ component Blockquote {
     .wrn-next--blockquote[data-variant="border"],
     .wrn-next--blockquote[data-variant="left-border"] {
       padding-inline-start: 1.5rem;
-      border-inline-start: 4px solid var(--wrn-blockquote-color);
+      border-inline-start: 3px solid var(--wrn-blockquote-color);
     }
 
     .wrn-next--blockquote[data-variant="bordered"] .wrn-next__blockquote-mark,
@@ -352,7 +352,7 @@ component Blockquote {
 
         .wrn-component p {
           margin: 0;
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-muted, var(--wrn-color-muted));
           line-height: 1.6;
         }
   }
diff --git a/packages/ui/components/Breadcrumb.wrn b/packages/ui/components/Breadcrumb.wrn
index 3cfd56ba..696e70a6 100644
--- a/packages/ui/components/Breadcrumb.wrn
+++ b/packages/ui/components/Breadcrumb.wrn
@@ -178,20 +178,20 @@ label: string = "Breadcrumb"
     .wrn-breadcrumb[data-variant="soft"] {
       width: fit-content;
       max-width: 100%;
-      padding: 0.45rem 0.65rem;
-      background: var(--breadcrumb-soft);
-      border: 1px solid var(--breadcrumb-muted);
-      border-radius: 0.75rem;
+      padding: 0.25rem 0.5rem;
+      background: var(--wrn-color-surface-soft, var(--breadcrumb-soft));
+      border: 1px solid var(--wrn-color-border);
+      border-radius: var(--wrn-radius-sm);
     }
 
     .wrn-breadcrumb[data-variant="outline"] {
       width: fit-content;
       max-width: 100%;
-      padding: 0.45rem 0.65rem;
+      padding: 0.25rem 0.5rem;
       background: var(--wrn-color-surface-raised);
       border: 1px solid var(--wrn-color-border);
-      border-radius: 0.75rem;
-      box-shadow: var(--wrn-shadow-sm);
+      border-radius: var(--wrn-radius-sm);
+      box-shadow: var(--wrn-shadow-1);
     }
 
     .wrn-breadcrumb[data-variant="contrast"] {
@@ -226,10 +226,9 @@ label: string = "Breadcrumb"
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      margin-inline: 0.45rem;
-      color: var(--wrn-color-text-subtle);
+      margin-inline: 0.25rem;
+      color: var(--wrn-color-border-strong, var(--wrn-color-text-subtle));
       font-size: 0.75rem;
-      opacity: 0.72;
     }
 
     .wrn-breadcrumb__separator-icon {
@@ -247,11 +246,11 @@ label: string = "Breadcrumb"
     .wrn-breadcrumb__current {
       display: inline-flex;
       align-items: center;
-      gap: 0.4rem;
+      gap: 0.375rem;
       min-width: 0;
-      min-height: 2rem;
-      padding: 0.25rem 0.4rem;
-      border-radius: 0.55rem;
+      min-height: 1.75rem;
+      padding: 0.125rem 0.375rem;
+      border-radius: calc(var(--wrn-radius-sm) - 2px);
       font-size: 0.8125rem;
       line-height: 1.25rem;
       text-decoration: none;
@@ -271,15 +270,13 @@ label: string = "Breadcrumb"
 
     .wrn-breadcrumb__link {
       color: var(--wrn-color-text-muted);
-      font-weight: 600;
-      transition:
-        color 160ms ease,
-        background 160ms ease;
+      font-weight: 500;
+      transition: color 120ms ease, background 120ms ease;
     }
 
     .wrn-breadcrumb__link:hover {
-      color: var(--breadcrumb-accent);
-      background: var(--breadcrumb-soft);
+      color: var(--wrn-color-text);
+      background: var(--wrn-color-surface-muted, var(--breadcrumb-soft));
     }
 
     .wrn-breadcrumb__link:focus-visible {
@@ -291,12 +288,12 @@ label: string = "Breadcrumb"
     .wrn-breadcrumb__current {
       max-width: 22rem;
       color: var(--wrn-color-text);
-      font-weight: 750;
+      font-weight: 600;
     }
 
     .wrn-breadcrumb__item[data-current="true"] .wrn-breadcrumb__current {
-      color: var(--breadcrumb-text);
-      background: var(--breadcrumb-soft);
+      color: var(--wrn-color-text);
+      background: transparent;
     }
 
     .wrn-breadcrumb__current[aria-disabled="true"] {
@@ -311,7 +308,7 @@ label: string = "Breadcrumb"
     }
 
     .wrn-breadcrumb__home {
-      color: var(--breadcrumb-accent);
+      color: var(--wrn-color-text-muted);
     }
 
     .wrn-breadcrumb__label {
diff --git a/packages/ui/components/ButtonGroup.wrn b/packages/ui/components/ButtonGroup.wrn
index 2efa14a5..a120c73d 100644
--- a/packages/ui/components/ButtonGroup.wrn
+++ b/packages/ui/components/ButtonGroup.wrn
@@ -317,7 +317,7 @@ items: unknown[] = []
 
         .wrn-component p {
           margin: 0;
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-muted, var(--wrn-color-muted));
           line-height: 1.6;
         }
   }
diff --git a/packages/ui/components/CTASection.wrn b/packages/ui/components/CTASection.wrn
index e8af2024..3e4bc5a7 100644
--- a/packages/ui/components/CTASection.wrn
+++ b/packages/ui/components/CTASection.wrn
@@ -291,9 +291,7 @@ component CTASection {
         var(--wrn-color-surface-raised);
       border: 1px solid var(--cta-border);
       border-radius: 1.5rem;
-      box-shadow:
-        0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
-        0 24px 70px color-mix(in srgb, black 15%, transparent);
+      box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
     }
     .wrn-cta-section[data-radius="xl"] .wrn-cta-section__surface { border-radius: 1.5rem; }
     .wrn-cta-section[data-content-padding="lg"] .wrn-cta-section__surface { padding: 3.5rem clamp(1.5rem, 5vw, 4rem); }
@@ -315,7 +313,6 @@ component CTASection {
     .wrn-cta-section[data-variant="soft"] .wrn-cta-section__surface {
       background:
         radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--cta-accent) 14%, transparent), transparent 30%),
-        linear-gradient(135deg, var(--cta-accent-soft), transparent 64%),
         var(--wrn-color-surface-raised);
       box-shadow: none;
     }
@@ -339,7 +336,7 @@ component CTASection {
         radial-gradient(circle at 90% 8%, color-mix(in srgb, white 14%, transparent), transparent 30%),
         var(--cta-accent);
       border-color: color-mix(in srgb, white 22%, transparent);
-      box-shadow: 0 30px 80px color-mix(in srgb, var(--cta-accent) 28%, transparent);
+      box-shadow: var(--wrn-shadow-3);
     }
 
     .wrn-cta-section__background-image {
@@ -586,7 +583,7 @@ component CTASection {
       background: var(--wrn-color-surface-raised);
       border: 1px solid var(--wrn-color-border);
       border-radius: 1.2rem;
-      box-shadow: 0 20px 54px color-mix(in srgb, black 18%, transparent);
+      box-shadow: var(--wrn-shadow-3);
     }
 
     .wrn-cta-section__visual-media {
diff --git a/packages/ui/components/Card.wrn b/packages/ui/components/Card.wrn
index f3016045..642473b4 100644
--- a/packages/ui/components/Card.wrn
+++ b/packages/ui/components/Card.wrn
@@ -324,7 +324,10 @@ component Card {
 
   style {
     .wrn-next__card-custom-footer:empty { display:none; }
-    .wrn-next__card-header:not(:has(strong,h1,h2,h3,h4,p,button,[data-slot])), .wrn-next__card-footer:not(:has(> span, > a, > .wrn-next__card-custom-footer:not(:empty))) { display:none; }
+    /* An image-only card renders empty regions that hold only <template>
+       markers; collapse them so the image is the whole card. */
+    .wrn-next__card-body:not(:has(> :not(template))) { display: none; }
+    .wrn-next__card-content:not(:has(.wrn-next__card-body > :not(template))):not(:has(.wrn-next__card-header :is(strong, h1, h2, h3, h4, p, button, [data-slot]))):not(:has(.wrn-next__card-footer > :is(span, a), .wrn-next__card-custom-footer:not(:empty))) { display: none; }    .wrn-next__card-header:not(:has(strong,h1,h2,h3,h4,p,button,[data-slot])), .wrn-next__card-footer:not(:has(> span, > a, > .wrn-next__card-custom-footer:not(:empty))) { display:none; }
     .wrn-next__card-media--overlay {
       aspect-ratio: 16 / 9;
       min-height: 18rem;
@@ -410,7 +413,44 @@ component Card {
     }
 
     .wrn-next__card-header {
-      border-bottom: 1px solid var(--wrn-color-border);
+      align-items: flex-start;
+      padding-block: 1rem 0.875rem;
+      border-bottom: 1px solid color-mix(in srgb, var(--wrn-color-border) 75%, transparent);
+      background: transparent;
+    }
+
+    .wrn-next__card-heading {
+      display: grid;
+      min-width: 0;
+      gap: 0.2rem;
+    }
+
+    .wrn-next__card-header h3 {
+      margin: 0;
+      color: var(--wrn-color-text);
+      font-size: 0.9375rem;
+      font-weight: 620;
+      letter-spacing: -0.012em;
+      line-height: 1.35;
+    }
+
+    .wrn-next__card-header .wrn-next__card-subtitle {
+      margin: 0;
+      color: var(--wrn-color-text-muted, var(--wrn-color-muted));
+      font-size: 0.8125rem;
+      font-weight: 450;
+      letter-spacing: 0;
+      text-transform: none;
+    }
+
+    .wrn-next__card-eyebrow {
+      margin: 0;
+      color: var(--wrn-color-primary-text, var(--wrn-color-primary));
+      font-family: var(--wrn-font-mono, monospace);
+      font-size: 0.6875rem;
+      font-weight: 600;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
     }
 
     .wrn-next__card-footer {
@@ -763,7 +803,7 @@ component Card {
 
         .wrn-component p {
           margin: 0;
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-muted, var(--wrn-color-muted));
           line-height: 1.6;
         }
   }
diff --git a/packages/ui/components/Carousel.wrn b/packages/ui/components/Carousel.wrn
index e2404d5d..b63a0ac9 100644
--- a/packages/ui/components/Carousel.wrn
+++ b/packages/ui/components/Carousel.wrn
@@ -915,7 +915,7 @@ component Carousel {
 
         .wrn-component p {
           margin: 0;
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-muted, var(--wrn-color-muted));
           line-height: 1.6;
         }
   }
diff --git a/packages/ui/components/Chart.wrn b/packages/ui/components/Chart.wrn
index ca78765b..27dcfedf 100644
--- a/packages/ui/components/Chart.wrn
+++ b/packages/ui/components/Chart.wrn
@@ -26,16 +26,86 @@ component Chart {
 
   functions {
     shared function chartData() { return data.length ? data : items }
-    shared function linePoints() { return chartData().map(function (item, index) { return (barX(index) + barWidth() / 2) + "," + barY(item) }).join(" ") }
+    shared function chartKind() { var kind = type || variant; return kind === "line" || kind === "area" ? kind : "bar" }
     shared function numericValue(item) { return Math.max(0, Number(item[valueKey]) || 0) }
-    shared function maximumValue() {
-      return Math.max(1, ...chartData().map(function (item) { return numericValue(item) }))
-    }
     shared function isHidden(index) { return hiddenIndexes.includes(index) }
-    shared function barWidth() { return chartData().length ? Math.max(4, 400 / chartData().length) : 400 }
-    shared function barX(index) { return 50 + index * (500 / Math.max(1, chartData().length)) }
-    shared function barHeight(item) { return numericValue(item) / maximumValue() * 160 }
-    shared function barY(item) { return 200 - barHeight(item) }
+
+    // Visible points keep their original index so events report the source item.
+    shared function points() {
+      var source = chartData()
+      var visible = []
+      for (var index = 0; index < source.length; index++) {
+        if (!hiddenIndexes.includes(index)) { visible.push({ item: source[index], index: index }) }
+      }
+      return visible
+    }
+
+    // Plot geometry in viewBox units: 600 wide, height tall.
+    shared function plotLeft() { return 44 }
+    shared function plotRight() { return 588 }
+    shared function plotTop() { return 14 }
+    shared function plotBottom() { return Math.max(120, height) - 30 }
+
+    // Round the scale up to a readable value so the ticks land on clean numbers.
+    shared function niceMax() {
+      var max = 0
+      var visible = points()
+      for (var index = 0; index < visible.length; index++) { max = Math.max(max, numericValue(visible[index].item)) }
+      if (max <= 0) { return 1 }
+      var magnitude = Math.pow(10, Math.floor(Math.log10(max)))
+      var steps = [1, 2, 2.5, 5, 10]
+      var chosen = 10 * magnitude
+      for (var step = steps.length - 1; step >= 0; step--) {
+        if (steps[step] * magnitude >= max) { chosen = steps[step] * magnitude }
+      }
+      return chosen
+    }
+    shared function ticks() {
+      var top = niceMax()
+      return [0, top * 0.25, top * 0.5, top * 0.75, top]
+    }
+    shared function tickLabel(value) {
+      if (value >= 1000000) { return (value / 1000000).toFixed(value % 1000000 ? 1 : 0) + "M" }
+      if (value >= 1000) { return (value / 1000).toFixed(value % 1000 ? 1 : 0) + "k" }
+      return String(Math.round(value * 100) / 100)
+    }
+    shared function yFor(value) { return plotTop() + (1 - value / niceMax()) * (plotBottom() - plotTop()) }
+
+    shared function band() { return (plotRight() - plotLeft()) / Math.max(1, points().length) }
+    shared function barWidth() { return Math.min(band() * 0.62, 56) }
+    shared function centerX(position) { return plotLeft() + position * band() + band() / 2 }
+
+    // Bars: 4px rounded data end, square at the baseline.
+    shared function barPath(point, position) {
+      var width = barWidth()
+      var x = centerX(position) - width / 2
+      var y = yFor(numericValue(point.item))
+      var base = plotBottom()
+      var radius = Math.min(4, (base - y) / 2, width / 2)
+      if (base - y < 1) { return "M" + x + "," + (base - 1) + "h" + width + "v1h-" + width + "Z" }
+      return "M" + x + "," + base + "V" + (y + radius) + "Q" + x + "," + y + " " + (x + radius) + "," + y + "H" + (x + width - radius) + "Q" + (x + width) + "," + y + " " + (x + width) + "," + (y + radius) + "V" + base + "Z"
+    }
+    shared function linePath() {
+      var visible = points()
+      var path = ""
+      for (var position = 0; position < visible.length; position++) {
+        path = path + (position ? "L" : "M") + centerX(position) + "," + yFor(numericValue(visible[position].item))
+      }
+      return path
+    }
+    shared function areaPath() {
+      var visible = points()
+      if (!visible.length) { return "" }
+      return linePath() + "L" + centerX(visible.length - 1) + "," + plotBottom() + "L" + centerX(0) + "," + plotBottom() + "Z"
+    }
+
+    // Hit targets and tooltips are HTML laid over the SVG, positioned in %.
+    shared function hitStyle(position) {
+      return "left:" + ((plotLeft() + position * band()) / 600 * 100) + "%;width:" + (band() / 600 * 100) + "%;top:" + (plotTop() / Math.max(120, height) * 100) + "%;height:" + ((plotBottom() - plotTop()) / Math.max(120, height) * 100) + "%"
+    }
+    shared function tipStyle(point) {
+      return "top:" + ((yFor(numericValue(point.item)) - plotTop()) / (plotBottom() - plotTop()) * 100) + "%"
+    }
 
     client function selectPoint(item, index, sourceEvent) {
       output.dataPointClick({ item: item, index: index, sourceEvent: sourceEvent })
@@ -43,39 +113,63 @@ component Chart {
     }
 
     client function toggleLegend(item, index, sourceEvent, next) {
-      next = hiddenIndexes.slice()
-      if (next.includes(index)) {
-        next = next.filter(function (value) { return value !== index })
-      } else {
-        next.push(index)
+      next = []
+      for (var position = 0; position < hiddenIndexes.length; position++) {
+        if (hiddenIndexes[position] !== index) { next.push(hiddenIndexes[position]) }
       }
+      if (next.length === hiddenIndexes.length) { next.push(index) }
       hiddenIndexes = next
       output.legendToggle({ item: item, index: index, hidden: next.includes(index), sourceEvent: sourceEvent })
     }
   }
 
   view {
-    <figure {...attrs} data-ui-component="Chart" data-variant='{variant}' class='wrn-chart {class}'>
+    <figure {...attrs} data-ui-component="Chart" data-variant='{chartKind()}' data-size='{size}' data-color='{color}' class='wrn-chart {class}'>
       {#if title || description}
         <figcaption class="wrn-chart__header">
           {#if title}<strong>{title}</strong>{/if}
           {#if description}<span>{description}</span>{/if}
         </figcaption>
       {/if}
-      {#if (type || variant) === "line"}
-        <svg class="wrn-chart__line" viewBox="0 0 600 240" role="img" aria-label="{title}" style="height:{height}px"><polyline points="{linePoints()}" fill="none" stroke="var(--wrn-color-primary)" stroke-width="3" /></svg>
-        <div class="wrn-chart__point-labels">{#each chartData() as item, index}<button type="button" @click="selectPoint(item, index, event)">{item[labelKey]} · {numericValue(item)}</button>{/each}</div>
-      {:else}
-        <div class="wrn-chart__columns" style="height:{height}px" role="group" aria-label="{title}">
-          {#each chartData() as item, index}<button type="button" class="wrn-chart__column" data-hidden="{hiddenIndexes.includes(index)}" aria-label="{item[labelKey] + ': ' + numericValue(item)}" @click="selectPoint(item, index, event)">
-            {#if showValues}<span>{numericValue(item)}</span>{/if}
-            <svg viewBox="0 0 60 160" preserveAspectRatio="none" aria-hidden="true" style="height:{numericValue(item) / maximumValue() * Math.max(60, height - 60)}px"><rect x="0" y="0" width="60" height="160" rx="3" fill="var(--wrn-color-primary)" /></svg>
-            <small>{item[labelKey]}</small>
-          </button>{/each}
+
+      <div class="wrn-chart__stage" style="aspect-ratio: 600 / {Math.max(120, height)}">
+        <svg class="wrn-chart__plot" viewBox="0 0 600 {Math.max(120, height)}" preserveAspectRatio="none" role="img" aria-label="{title}">
+          {#each ticks() as tick}
+            <line class="wrn-chart__grid" x1="{plotLeft()}" x2="{plotRight()}" y1="{yFor(tick)}" y2="{yFor(tick)}" data-baseline="{tick === 0}"></line>
+          {/each}
+          {#if chartKind() === "bar"}
+            {#each points() as point, position}
+              <path class="wrn-chart__bar" d="{barPath(point, position)}"></path>
+            {/each}
+          {:else}
+            {#if chartKind() === "area"}<path class="wrn-chart__area" d="{areaPath()}"></path>{/if}
+            <path class="wrn-chart__line" d="{linePath()}"></path>
+          {/if}
+        </svg>
+
+        <div class="wrn-chart__ticks" aria-hidden="true">
+          {#each ticks() as tick}<span style="top:{yFor(tick) / Math.max(120, height) * 100}%">{tickLabel(tick)}</span>{/each}
         </div>
-      {/if}
-      {#if showLegend}
-        <div class="wrn-chart__legend" aria-label="Chart legend">
+
+        <div class="wrn-chart__labels" aria-hidden="true">
+          {#each points() as point, position}<span style="left:{centerX(position) / 600 * 100}%">{point.item[labelKey]}</span>{/each}
+        </div>
+
+        <div class="wrn-chart__hits">
+          {#each points() as point, position}
+            <button type="button" class="wrn-chart__hit" style="{hitStyle(position)}" aria-label="{point.item[labelKey] + ': ' + numericValue(point.item)}" @click="selectPoint(point.item, point.index, event)">
+              {#if chartKind() !== "bar"}<i class="wrn-chart__dot" style="{tipStyle(point)}" aria-hidden="true"></i>{/if}
+              {#if showValues && chartKind() === "bar"}<b class="wrn-chart__value" style="{tipStyle(point)}" aria-hidden="true">{tickLabel(numericValue(point.item))}</b>{/if}
+              <span class="wrn-chart__tip" style="{tipStyle(point)}" aria-hidden="true"><small>{point.item[labelKey]}</small><strong>{numericValue(point.item)}</strong></span>
+            </button>
+          {/each}
+        </div>
+
+        {#if !points().length}<p class="wrn-chart__empty">No data to show</p>{/if}
+      </div>
+
+      {#if showLegend && chartData().length}
+        <div class="wrn-chart__legend" role="group" aria-label="Show or hide data">
           {#each chartData() as item, index}
             <button type="button" aria-pressed='{isHidden(index) ? "false" : "true"}' @click='toggleLegend(item, index, event)'>
               <span aria-hidden="true"></span>{item[labelKey]}
@@ -88,29 +182,159 @@ component Chart {
   }
 
   style {
-    .wrn-chart__columns { display:flex; align-items:flex-end; gap:clamp(.5rem,2vw,1.5rem); padding:.5rem; border-bottom:1px solid var(--wrn-color-border); }
-    .wrn-chart__column { display:flex; flex:1; min-width:0; flex-direction:column; align-items:center; gap:.6rem; padding:0; border:0; background:transparent; color:var(--wrn-color-text); font:inherit; font-size:.8rem; cursor:pointer; }
-    .wrn-chart__column svg { width:100%; max-width:5rem; min-height:1px; }
-    .wrn-chart__column small { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--wrn-color-muted); }
-    .wrn-chart__column[data-hidden="true"] { opacity:.2; }
-    .wrn-chart__line { width:100%; display:block; }
-    .wrn-chart__point-labels { display:flex; justify-content:space-around; gap:.5rem; flex-wrap:wrap; }
-    .wrn-chart__point-labels button { border:0; background:transparent; color:var(--wrn-color-muted); font:inherit; font-size:.8rem; cursor:pointer; }
+    .wrn-chart {
+      --wrn-chart-color: var(--wrn-color-primary);
+      display: grid;
+      gap: 0.875rem;
+      min-width: 0;
+      margin: 0;
+      padding: 1rem 1.125rem;
+      border: 1px solid var(--wrn-color-border);
+      border-radius: var(--wrn-radius);
+      color: var(--wrn-color-text);
+      background: var(--wrn-color-surface);
+      box-shadow: var(--wrn-shadow-1);
+    }
+    .wrn-chart[data-color="secondary"] { --wrn-chart-color: var(--wrn-color-secondary); }
+    .wrn-chart[data-color="success"] { --wrn-chart-color: var(--wrn-color-success); }
+    .wrn-chart[data-color="info"] { --wrn-chart-color: var(--wrn-color-info); }
+    .wrn-chart[data-color="warning"] { --wrn-chart-color: var(--wrn-color-warning); }
+    .wrn-chart[data-color="danger"] { --wrn-chart-color: var(--wrn-color-danger); }
 
-    .wrn-chart { display: grid; gap: 1rem; min-width: 0; margin: 0; padding: 1rem; border: 1px solid var(--wrn-color-border); border-radius: var(--wrn-radius); color: var(--wrn-color-text); background: var(--wrn-color-surface); box-shadow: var(--wrn-shadow-1); }
     .wrn-chart__header { display: grid; gap: 0.2rem; }
-    .wrn-chart__header > span { color: var(--wrn-color-muted); font-size: 0.8rem; }
-    .wrn-chart__plot { display: block; width: 100%; min-height: 12rem; overflow: visible; }
-    .wrn-chart__axis { stroke: var(--wrn-color-border); stroke-width: 0.5; }
-    .wrn-chart__bar { fill: var(--wrn-color-primary); cursor: pointer; transition: opacity var(--wrn-motion-fast), transform var(--wrn-motion-fast); transform-box: fill-box; transform-origin: bottom; }
-    .wrn-chart__bar:hover { opacity: 0.82; transform: scaleY(1.02); }
-    .wrn-chart__bar:focus-visible { outline: 1.5px solid var(--wrn-color-focus); outline-offset: 1px; }
-    .wrn-chart__plot g[data-hidden="true"] { opacity: 0.18; pointer-events: none; }
-    .wrn-chart__value, .wrn-chart__label { fill: var(--wrn-color-text); font-size: 11px; text-anchor: middle; }
-    .wrn-chart__label { fill: var(--wrn-color-muted); }
-    .wrn-chart__legend { display: flex; flex-wrap: wrap; gap: 0.5rem; }
-    .wrn-chart__legend button { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.5rem; border: 1px solid var(--wrn-color-border); border-radius: 999px; color: var(--wrn-color-text); background: transparent; font: inherit; font-size: 0.75rem; cursor: pointer; }
-    .wrn-chart__legend button > span { width: 0.65rem; height: 0.65rem; border-radius: 0.2rem; background: var(--wrn-color-primary); }
-    .wrn-chart__legend button[aria-pressed="false"] { opacity: 0.5; }
+    .wrn-chart__header > strong { font-size: 0.9375rem; font-weight: 620; letter-spacing: -0.01em; }
+    .wrn-chart__header > span { color: var(--wrn-color-text-muted, var(--wrn-color-muted)); font-size: 0.8125rem; }
+
+    /* The stage reserves the SVG box; ticks, labels and hit targets sit over
+       it in percentages so text never scales with the plot. */
+    .wrn-chart__stage { position: relative; width: 100%; min-width: 0; }
+    .wrn-chart__plot { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
+
+    .wrn-chart__grid { stroke: var(--wrn-color-border); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 2 4; }
+    .wrn-chart__grid[data-baseline="true"] { stroke: var(--wrn-color-border-strong, var(--wrn-color-border)); stroke-dasharray: none; }
+
+    .wrn-chart__bar { fill: var(--wrn-chart-color); transition: opacity var(--wrn-motion-fast); }
+    .wrn-chart__line { fill: none; stroke: var(--wrn-chart-color); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
+    .wrn-chart__area { fill: color-mix(in srgb, var(--wrn-chart-color) 14%, transparent); stroke: none; }
+
+    .wrn-chart__ticks > span,
+    .wrn-chart__labels > span {
+      position: absolute;
+      color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+      font-family: var(--wrn-font-mono, monospace);
+      font-size: 0.65rem;
+      font-variant-numeric: tabular-nums;
+      line-height: 1;
+      white-space: nowrap;
+      pointer-events: none;
+    }
+    .wrn-chart__ticks > span { left: 0; width: calc(44 / 600 * 100% - 0.4rem); text-align: right; transform: translateY(-50%); }
+    .wrn-chart__labels > span {
+      bottom: 0;
+      max-width: 5.5rem;
+      overflow: hidden;
+      font-family: var(--wrn-font-sans, inherit);
+      font-size: 0.72rem;
+      text-overflow: ellipsis;
+      transform: translate(-50%, -0.35rem);
+    }
+
+    .wrn-chart__hits { position: absolute; inset: 0; }
+    .wrn-chart__hit {
+      position: absolute;
+      padding: 0;
+      border: 0;
+      border-radius: calc(var(--wrn-radius-sm) - 2px);
+      background: transparent;
+      cursor: pointer;
+    }
+    .wrn-chart__hit:hover,
+    .wrn-chart__hit:focus-visible { background: color-mix(in srgb, var(--wrn-color-text) 4%, transparent); outline: none; }
+    .wrn-chart__hit:focus-visible { box-shadow: inset 0 0 0 1.5px var(--wrn-color-focus, var(--wrn-chart-color)); }
+
+    .wrn-chart__dot {
+      position: absolute;
+      left: 50%;
+      width: 0.5rem;
+      height: 0.5rem;
+      border-radius: 999px;
+      background: var(--wrn-chart-color);
+      box-shadow: 0 0 0 2px var(--wrn-color-surface);
+      transform: translate(-50%, -50%);
+      transition: transform var(--wrn-motion-fast);
+    }
+    .wrn-chart__hit:is(:hover, :focus-visible) .wrn-chart__dot { transform: translate(-50%, -50%) scale(1.4); }
+
+    .wrn-chart__value {
+      position: absolute;
+      left: 50%;
+      color: var(--wrn-color-text-muted, var(--wrn-color-text));
+      font-family: var(--wrn-font-mono, monospace);
+      font-size: 0.68rem;
+      font-weight: 600;
+      font-variant-numeric: tabular-nums;
+      transform: translate(-50%, calc(-100% - 0.3rem));
+      pointer-events: none;
+    }
+
+    .wrn-chart__tip {
+      position: absolute;
+      z-index: 3;
+      left: 50%;
+      display: grid;
+      gap: 0.1rem;
+      width: max-content;
+      padding: 0.375rem 0.55rem;
+      border: 1px solid rgb(255 255 255 / 0.08);
+      border-radius: var(--wrn-radius-sm, 0.5rem);
+      color: #f4f5f7;
+      background: #16181d;
+      box-shadow: 0 8px 24px -4px rgb(0 0 0 / 0.35);
+      text-align: left;
+      opacity: 0;
+      transform: translate(-50%, calc(-100% - 0.75rem));
+      transition: opacity var(--wrn-motion-fast);
+      pointer-events: none;
+    }
+    .wrn-chart__tip small { color: rgb(244 245 247 / 0.7); font-size: 0.68rem; }
+    .wrn-chart__tip strong { font-family: var(--wrn-font-mono, monospace); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
+    .wrn-chart__hit:is(:hover, :focus-visible) .wrn-chart__tip { opacity: 1; }
+    .wrn-chart__hit:is(:hover, :focus-visible) .wrn-chart__value { opacity: 0; }
+
+    .wrn-chart__empty {
+      position: absolute;
+      inset: 0;
+      display: grid;
+      place-items: center;
+      margin: 0;
+      color: var(--wrn-color-text-muted, var(--wrn-color-muted));
+      font-size: 0.8125rem;
+    }
+
+    .wrn-chart__legend { display: flex; flex-wrap: wrap; gap: 0.375rem; }
+    .wrn-chart__legend button {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.375rem;
+      min-height: 1.75rem;
+      padding: 0 0.6rem;
+      border: 1px solid var(--wrn-color-border);
+      border-radius: 999px;
+      color: var(--wrn-color-text);
+      background: var(--wrn-color-surface);
+      font: inherit;
+      font-size: 0.75rem;
+      font-weight: 550;
+      cursor: pointer;
+      transition: opacity 120ms ease, background-color 120ms ease;
+    }
+    .wrn-chart__legend button:hover { background: var(--wrn-color-surface-soft); }
+    .wrn-chart__legend button > span { width: 0.5rem; height: 0.5rem; border-radius: 2px; background: var(--wrn-chart-color); }
+    .wrn-chart__legend button[aria-pressed="false"] { color: var(--wrn-color-text-subtle, var(--wrn-color-muted)); text-decoration: line-through; }
+    .wrn-chart__legend button[aria-pressed="false"] > span { background: var(--wrn-color-border-strong, var(--wrn-color-border)); }
+
+    @media (prefers-reduced-motion: reduce) {
+      .wrn-chart__dot, .wrn-chart__tip, .wrn-chart__bar { transition: none; }
+    }
   }
 }
diff --git a/packages/ui/components/ChatBubble.wrn b/packages/ui/components/ChatBubble.wrn
index 66e7914a..e5c3331a 100644
--- a/packages/ui/components/ChatBubble.wrn
+++ b/packages/ui/components/ChatBubble.wrn
@@ -25,6 +25,25 @@ component ChatBubble {
       return item.direction === "outgoing" ? "outgoing" : "incoming"
     }
 
+    // Delivery receipt from item.receipt, or from a status label that names one.
+    shared function receipt(item, value) {
+      value = String(item.receipt || item.status || "").toLowerCase()
+      if (value === "seen") { return "read" }
+      if (value === "sending" || value === "sent" || value === "delivered" || value === "read" || value === "failed" || value === "error") { return value }
+      return ""
+    }
+
+    shared function receiptLabel(item, value) {
+      value = receipt(item)
+      if (value === "sending") { return "Sending" }
+      if (value === "sent") { return "Sent" }
+      if (value === "delivered") { return "Delivered" }
+      if (value === "read") { return "Read" }
+      if (value === "failed") { return "Not delivered" }
+      if (value === "error") { return "Error" }
+      return ""
+    }
+
     client function selectMessage(item, index) {
       output.messageClick({
         item: item,
@@ -66,6 +85,7 @@ component ChatBubble {
       {...attrs}
       class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--chat-bubble wrn-next--variant-{variant} {class}"
       data-one-sided="{oneSided}"
+      data-avatars="{showAvatars}"
       role="log"
       aria-label="{ariaLabel}"
       aria-live="polite"
@@ -128,11 +148,24 @@ component ChatBubble {
                 </div>
               </div>
 
-              {#if showMetadata && (item.timestamp || item.status || item.actionLabel)}
-                <footer class="wrn-next__chat-meta" data-tone="{item.statusTone || 'muted'}">
+              {#if showMetadata && (item.timestamp || item.status || item.receipt || item.actionLabel)}
+                <footer class="wrn-next__chat-meta" data-tone="{item.statusTone || (receipt(item) === 'failed' || receipt(item) === 'error' ? 'danger' : 'muted')}" data-receipt="{receipt(item)}">
                   {#if item.statusIcon}<span class="{item.statusIcon}" aria-hidden="true"></span>{/if}
-                  {#if item.status}<span>{item.status}</span>{/if}
+                  {#if item.status && (!receipt(item) || receipt(item) === "failed" || receipt(item) === "error")}<span class="wrn-next__chat-status">{item.status}</span>{/if}
                   {#if item.timestamp}<time datetime="{item.datetime || ''}">{item.timestamp}</time>{/if}
+                  {#if receipt(item)}
+                    <span class="wrn-next__chat-receipt" data-receipt="{receipt(item)}" role="img" aria-label="{receiptLabel(item)}" title="{receiptLabel(item)}">
+                      {#if receipt(item) === "sending"}
+                        <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><circle cx="8" cy="8" r="6"></circle><path d="M8 4.75V8l2 1.5"></path></svg>
+                      {:else if receipt(item) === "sent"}
+                        <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7"></path></svg>
+                      {:else if receipt(item) === "delivered" || receipt(item) === "read"}
+                        <svg viewBox="0 0 20 16" width="17" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1.5 8.5l3 3 6-7"></path><path d="M8.5 11.5l.5.5 6-7.5"></path></svg>
+                      {:else}
+                        <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true"><circle cx="8" cy="8" r="6"></circle><path d="M8 4.75v3.75"></path><path d="M8 11h.01"></path></svg>
+                      {/if}
+                    </span>
+                  {/if}
                   {#if item.actionLabel}
                     <button type="button" @click="selectAction(event, item, index)">
                       {item.actionLabel}
@@ -183,7 +216,7 @@ component ChatBubble {
     .wrn-next__chat-thread {
       display: grid;
       min-width: 0;
-      gap: 1.25rem;
+      gap: 0.875rem;
     }
 
     .wrn-next__chat-message {
@@ -191,7 +224,7 @@ component ChatBubble {
       width: min(78%, 34rem);
       min-width: 0;
       justify-self: start;
-      gap: 0.4rem;
+      gap: 0.3rem;
     }
 
     .wrn-next__chat-message[data-direction="outgoing"] {
@@ -205,8 +238,8 @@ component ChatBubble {
     .wrn-next__chat-row {
       display: flex;
       min-width: 0;
-      align-items: flex-start;
-      gap: 0.75rem;
+      align-items: flex-end;
+      gap: 0.5rem;
     }
 
     .wrn-next__chat-message[data-direction="outgoing"] .wrn-next__chat-row {
@@ -221,11 +254,14 @@ component ChatBubble {
 
     .wrn-next__chat-content {
       min-width: 0;
-      padding: var(--wrn-chat-padding);
+      padding: 0.625rem 0.875rem;
       border: 1px solid var(--wrn-color-border);
-      border-radius: 1rem;
+      border-radius: 1.125rem 1.125rem 1.125rem 0.25rem;
       background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
+      box-shadow: var(--wrn-shadow-1);
       color: var(--wrn-color-text);
+      font-size: 0.875rem;
+      line-height: 1.5;
       cursor: pointer;
     }
 
@@ -235,8 +271,10 @@ component ChatBubble {
     }
 
     .wrn-next__chat-message[data-direction="outgoing"] .wrn-next__chat-content {
-      border-color: var(--wrn-chat-color);
-      background: var(--wrn-chat-color);
+      border-color: color-mix(in srgb, var(--wrn-chat-color) 82%, black);
+      border-radius: 1.125rem 1.125rem 0.25rem 1.125rem;
+      background: linear-gradient(180deg, color-mix(in srgb, var(--wrn-chat-color) 94%, white), var(--wrn-chat-color));
+      box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--wrn-chat-color) 25%, transparent);
       color: var(--wrn-color-primary-contrast, #fff);
     }
 
@@ -268,8 +306,8 @@ component ChatBubble {
     }
 
     .wrn-next__chat-content a {
-      color: var(--wrn-chat-color);
-      font-weight: 650;
+      color: var(--wrn-color-primary-text, var(--wrn-chat-color));
+      font-weight: 600;
       text-decoration: none;
     }
 
@@ -280,17 +318,21 @@ component ChatBubble {
 
     .wrn-next__chat-avatar {
       display: grid;
-      flex: 0 0 2.5rem;
-      width: 2.5rem;
-      min-height: 2.5rem;
+      flex: 0 0 2rem;
+      width: 2rem;
+      min-height: 2rem;
+      height: 2rem;
       overflow: hidden;
       padding: 0;
+      place-items: center;
       border: 1px solid var(--wrn-color-border);
       border-radius: 999px;
-      background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
-      color: var(--wrn-color-text);
+      background: color-mix(in srgb, var(--wrn-chat-color) 12%, var(--wrn-color-surface));
+      color: var(--wrn-color-primary-text, var(--wrn-chat-color));
+      font: inherit;
+      font-size: 0.72rem;
+      font-weight: 650;
       cursor: pointer;
-      place-items: center;
     }
 
     .wrn-next__chat-avatar img {
@@ -308,9 +350,11 @@ component ChatBubble {
       display: flex;
       align-items: center;
       gap: 0.3rem;
-      padding-inline: calc(2.5rem + 0.75rem);
-      color: var(--wrn-color-text-muted);
-      font-size: 0.78em;
+      padding-inline: 0.25rem;
+      color: var(--wrn-color-text-subtle, var(--wrn-color-text-muted));
+      font-size: 0.6875rem;
+      font-variant-numeric: tabular-nums;
+      line-height: 1;
     }
 
     .wrn-next__chat-message[data-direction="outgoing"] .wrn-next__chat-meta {
@@ -318,18 +362,19 @@ component ChatBubble {
     }
 
     .wrn-next__chat-meta[data-tone="danger"] {
-      color: var(--wrn-color-danger);
+      color: var(--wrn-color-danger-text, var(--wrn-color-danger));
     }
 
     .wrn-next__chat-meta button {
       padding: 0;
       border: 0;
       background: transparent;
-      color: inherit;
+      color: var(--wrn-color-danger-text, var(--wrn-color-danger));
       font: inherit;
-      font-weight: 700;
+      font-weight: 650;
       cursor: pointer;
       text-decoration: underline;
+      text-underline-offset: 0.2em;
     }
 
     @media (max-width: 640px) {
@@ -411,8 +456,38 @@ component ChatBubble {
 
         .wrn-component p {
           margin: 0;
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-muted, var(--wrn-color-muted));
           line-height: 1.6;
         }
+  
+    .wrn-next--chat-bubble[data-avatars="true"] .wrn-next__chat-meta {
+      padding-inline: calc(2rem + 0.5rem + 0.25rem);
+    }
+  
+    .wrn-next__chat-receipt {
+      display: inline-flex;
+      align-items: center;
+      color: var(--wrn-color-text-subtle, var(--wrn-color-text-muted));
+    }
+  
+    .wrn-next__chat-receipt[data-receipt="read"] {
+      color: var(--wrn-color-info, var(--wrn-color-primary));
+    }
+  
+    .wrn-next__chat-receipt:is([data-receipt="failed"], [data-receipt="error"]) {
+      color: var(--wrn-color-danger);
+    }
+  
+    .wrn-next__chat-receipt[data-receipt="sending"] svg {
+      animation: wrn-chat-sending 1.6s linear infinite;
+    }
+
+    @keyframes wrn-chat-sending {
+      to { transform: rotate(360deg); }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .wrn-next__chat-receipt[data-receipt="sending"] svg { animation: none; }
+    }
   }
 }
diff --git a/packages/ui/components/Clipboard.wrn b/packages/ui/components/Clipboard.wrn
index 0b706501..ea41c20a 100644
--- a/packages/ui/components/Clipboard.wrn
+++ b/packages/ui/components/Clipboard.wrn
@@ -82,17 +82,91 @@ component Clipboard {
   }
 
   style {
-    .wrn-clipboard { display: grid; gap: 0.5rem; color: var(--wrn-color-text); }
-    .wrn-clipboard__title { font-size: 0.875rem; }
-    .wrn-clipboard__description { margin: 0; color: var(--wrn-color-muted); font-size: 0.8rem; }
-    .wrn-clipboard__control { display: flex; min-width: 0; align-items: stretch; overflow: hidden; border: 1px solid var(--wrn-color-border); border-radius: var(--wrn-radius); background: var(--wrn-color-surface); box-shadow: var(--wrn-shadow-1); }
-    .wrn-clipboard__value { min-width: 0; flex: 1; overflow: auto; padding: 0.7rem 0.85rem; color: var(--wrn-color-text); background: var(--wrn-color-surface-2); font: inherit; font-family: var(--wrn-font-mono, ui-monospace, monospace); white-space: nowrap; }
-    .wrn-clipboard__button { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0.85rem; border: 0; border-left: 1px solid var(--wrn-color-border); color: color-mix(in srgb, var(--wrn-color-primary) 72%, var(--wrn-color-text)); background: transparent; font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
-    .wrn-clipboard__button:hover { background: var(--wrn-color-primary-soft); }
-    .wrn-clipboard__button:focus-visible { outline: 2px solid var(--wrn-color-focus); outline-offset: -3px; }
-    .wrn-clipboard__button:disabled { cursor: not-allowed; opacity: 0.55; }
-    .wrn-clipboard[data-status="success"] .wrn-clipboard__button { color: var(--wrn-color-success); }
-    .wrn-clipboard[data-status="error"] .wrn-clipboard__button { color: var(--wrn-color-danger); }
-    .wrn-clipboard__icon { width: 1rem; height: 1rem; flex: none; }
+    .wrn-clipboard { display: grid; gap: 0.375rem; color: var(--wrn-color-text); }
+    .wrn-clipboard__title { font-size: 0.8125rem; font-weight: 600; }
+    .wrn-clipboard__description { margin: 0; color: var(--wrn-color-text-muted, var(--wrn-color-muted)); font-size: 0.78rem; }
+
+    /* Plain values sit in a recessed field well; code values (the default)
+       sit on the code surface so they read as something to paste. */
+    .wrn-clipboard__control {
+      display: flex;
+      min-width: 0;
+      min-height: 2.75rem;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.3125rem 0.3125rem 0.3125rem 0.875rem;
+      border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
+      border-radius: var(--wrn-radius-sm);
+      background: var(--wrn-color-input-background, var(--wrn-color-surface));
+      box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
+    }
+    .wrn-clipboard:has(code.wrn-clipboard__value) .wrn-clipboard__control {
+      border-color: var(--wrn-color-code-border, #262a33);
+      background: var(--wrn-color-code-background, #14161b);
+      box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04);
+    }
+    .wrn-clipboard__value {
+      min-width: 0;
+      flex: 1;
+      overflow-x: auto;
+      padding: 0.25rem 0;
+      color: var(--wrn-color-text);
+      background: transparent;
+      font: inherit;
+      font-size: 0.8125rem;
+      white-space: nowrap;
+      scrollbar-width: none;
+    }
+    code.wrn-clipboard__value {
+      color: var(--wrn-color-code-text, #e6e9f0);
+      font-family: var(--wrn-font-mono, ui-monospace, monospace);
+      font-size: 0.8rem;
+    }
+    .wrn-clipboard__value::-webkit-scrollbar { display: none; }
+
+    .wrn-clipboard__button {
+      display: inline-flex;
+      flex: none;
+      align-items: center;
+      gap: 0.375rem;
+      min-height: 2rem;
+      padding: 0 0.7rem;
+      border: 1px solid var(--wrn-color-border);
+      border-bottom-color: var(--wrn-color-border-strong, var(--wrn-color-border));
+      border-radius: calc(var(--wrn-radius-sm) - 2px);
+      color: var(--wrn-color-text);
+      background: linear-gradient(180deg, var(--wrn-color-surface), var(--wrn-color-surface-soft, var(--wrn-color-surface)));
+      box-shadow: var(--wrn-shadow-1);
+      font: inherit;
+      font-size: 0.78rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
+    }
+    .wrn-clipboard:has(code.wrn-clipboard__value) .wrn-clipboard__button {
+      border-color: rgb(255 255 255 / 0.12);
+      color: var(--wrn-color-code-text, #e6e9f0);
+      background: rgb(255 255 255 / 0.06);
+      box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
+    }
+    .wrn-clipboard__button:hover:not(:disabled) { background: var(--wrn-color-surface); }
+    .wrn-clipboard:has(code.wrn-clipboard__value) .wrn-clipboard__button:hover:not(:disabled) { background: rgb(255 255 255 / 0.12); }
+    .wrn-clipboard__button:active:not(:disabled) { transform: translateY(1px); }
+    .wrn-clipboard__button:focus-visible { outline: 2px solid var(--wrn-color-focus); outline-offset: 2px; }
+    .wrn-clipboard__button:disabled { cursor: not-allowed; opacity: 0.5; }
+    .wrn-clipboard[data-status="success"] .wrn-clipboard__button,
+    .wrn-clipboard[data-status="success"]:has(code.wrn-clipboard__value) .wrn-clipboard__button {
+      border-color: color-mix(in srgb, var(--wrn-color-success) 50%, transparent);
+      color: var(--wrn-color-success);
+      background: color-mix(in srgb, var(--wrn-color-success) 14%, transparent);
+    }
+    .wrn-clipboard[data-status="error"] .wrn-clipboard__button,
+    .wrn-clipboard[data-status="error"]:has(code.wrn-clipboard__value) .wrn-clipboard__button {
+      border-color: color-mix(in srgb, var(--wrn-color-danger) 50%, transparent);
+      color: var(--wrn-color-danger);
+      background: color-mix(in srgb, var(--wrn-color-danger) 12%, transparent);
+    }
+    .wrn-clipboard__icon { width: 0.875rem; height: 0.875rem; flex: none; }
+
   }
 }
diff --git a/packages/ui/components/Collapse.wrn b/packages/ui/components/Collapse.wrn
index de55a8bd..e13dbc63 100644
--- a/packages/ui/components/Collapse.wrn
+++ b/packages/ui/components/Collapse.wrn
@@ -69,7 +69,7 @@ size: string = "default"
             disabled="{item.disabled}"
             @click="toggleItem(index, item)"
           >
-            <span>{isOpen(index) ? (item.closeLabel || "Read less") : item.label}</span>
+            <span>{isOpen(index) && (mode === "inline" || item.closeLabel) ? (item.closeLabel || "Read less") : item.label}</span>
             <span class="icon-[lucide--chevron-down] wrn-next__collapse-chevron" aria-hidden="true"></span>
           </button>
 
@@ -109,36 +109,48 @@ size: string = "default"
       display: grid;
       width: 100%;
       min-width: 0;
-      gap: 0.75rem;
+      gap: 0.625rem;
       color: var(--wrn-color-text);
     }
 
     .wrn-next__collapse-item {
       display: grid;
       min-width: 0;
-      justify-items: start;
+      justify-items: stretch;
       gap: 0;
+      overflow: hidden;
+      border: 1px solid var(--wrn-color-border);
+      border-radius: var(--wrn-radius);
+      background: var(--wrn-color-surface);
+      box-shadow: var(--wrn-shadow-1);
+      transition: border-color 160ms ease, box-shadow 160ms ease;
     }
 
     .wrn-next__collapse-trigger {
-      display: inline-flex;
-      min-height: 2.75rem;
+      display: flex;
+      width: 100%;
+      min-height: 3rem;
       align-items: center;
-      justify-content: center;
-      gap: 0.55rem;
-      padding: 0.7rem 1rem;
-      border: 1px solid var(--wrn-collapse-color);
-      border-radius: var(--wrn-radius-sm);
-      background: var(--wrn-collapse-color);
-      color: var(--wrn-color-primary-contrast, #fff);
+      justify-content: space-between;
+      gap: 0.75rem;
+      padding: 0.75rem 1rem;
+      border: 0;
+      border-radius: 0;
+      background: transparent;
+      box-shadow: none;
+      color: var(--wrn-color-text);
       font: inherit;
-      font-weight: 700;
+      font-size: 0.9rem;
+      font-weight: 600;
+      letter-spacing: -0.008em;
+      text-align: left;
       cursor: pointer;
+      transition: background-color 120ms ease;
     }
 
     .wrn-next__collapse-trigger:focus-visible {
       outline: 2px solid var(--wrn-collapse-color);
-      outline-offset: 3px;
+      outline-offset: -2px;
     }
 
     .wrn-next__collapse-trigger:disabled {
@@ -147,7 +159,11 @@ size: string = "default"
     }
 
     .wrn-next__collapse-chevron {
-      transition: transform var(--wrn-motion-fast) var(--wrn-ease-standard);
+      flex: none;
+      width: 1rem;
+      height: 1rem;
+      color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+      transition: transform var(--wrn-motion-base) var(--wrn-ease-emphasized);
     }
 
     .wrn-next__collapse-item[data-open="true"] .wrn-next__collapse-chevron {
@@ -155,20 +171,17 @@ size: string = "default"
     }
 
     .wrn-next__collapse-panel {
-      width: min(100%, 42rem);
+      width: 100%;
       max-height: 0;
       overflow: hidden;
       margin-top: 0;
       opacity: 0;
-      transition:
-        max-height 350ms var(--wrn-ease-emphasized),
-        margin-top 300ms var(--wrn-ease-emphasized),
-        opacity 200ms var(--wrn-ease-standard);
+      transition: max-height 320ms var(--wrn-ease-emphasized), opacity 200ms var(--wrn-ease-standard);
     }
 
     .wrn-next__collapse-panel[data-open="true"] {
       max-height: 40rem;
-      margin-top: 0.75rem;
+      margin-top: 0;
       opacity: 1;
     }
 
@@ -176,11 +189,16 @@ size: string = "default"
       display: grid;
       overflow: hidden;
       min-height: 0;
-      gap: 0.65rem;
-      padding: 1rem;
-      border: 1px solid var(--wrn-color-border);
-      border-radius: var(--wrn-radius-md);
-      background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
+      gap: 0.5rem;
+      padding: 0.875rem 1rem 1rem;
+      border: 0;
+      border-top: 1px solid var(--wrn-color-border);
+      border-radius: 0;
+      background: var(--wrn-color-surface-soft, transparent);
+      box-shadow: none;
+      color: var(--wrn-color-text-muted);
+      font-size: 0.875rem;
+      line-height: 1.6;
     }
 
     .wrn-next__collapse-content h4,
@@ -196,13 +214,18 @@ size: string = "default"
     }
 
     .wrn-next__collapse-content a {
-      color: var(--wrn-collapse-color);
-      font-weight: 650;
+      color: var(--wrn-color-primary-text, var(--wrn-collapse-color));
+      font-weight: 600;
       text-decoration: none;
     }
 
     .wrn-next--collapse[data-mode="inline"] .wrn-next__collapse-item {
-      gap: 0;
+      overflow: visible;
+      justify-items: start;
+      border: 0;
+      border-radius: 0;
+      background: transparent;
+      box-shadow: none;
     }
 
     .wrn-next--collapse[data-mode="inline"] .wrn-next__collapse-preview {
@@ -221,13 +244,15 @@ size: string = "default"
 
     .wrn-next--collapse[data-mode="inline"] .wrn-next__collapse-trigger {
       order: 3;
+      width: fit-content;
       margin-top: 0.5rem;
       min-height: auto;
       padding: 0;
       border: 0;
       border-radius: 0;
       background: transparent;
-      color: var(--wrn-collapse-color);
+      color: var(--wrn-color-primary-text, var(--wrn-collapse-color));
+      font-size: 0.875rem;
     }
 
     .wrn-next--collapse[data-mode="inline"] .wrn-next__collapse-content {
@@ -308,8 +333,29 @@ size: string = "default"
 
         .wrn-component p {
           margin: 0;
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-muted, var(--wrn-color-muted));
           line-height: 1.6;
         }
+  
+    .wrn-next__collapse-trigger:hover:not(:disabled) {
+      background: var(--wrn-color-surface-soft);
+    }
+  
+    .wrn-next__collapse-item[data-open="true"] {
+      border-color: var(--wrn-color-border-strong, var(--wrn-color-border));
+      box-shadow: var(--wrn-shadow-2);
+    }
+  
+    .wrn-next--collapse[data-mode="inline"] .wrn-next__collapse-trigger:hover:not(:disabled) {
+      background: transparent;
+      text-decoration: underline;
+      text-underline-offset: 0.2em;
+    }
+  
+    .wrn-next__collapse-content h4 {
+      color: var(--wrn-color-text);
+      font-size: 0.875rem;
+      font-weight: 620;
+    }
   }
 }
diff --git a/packages/ui/components/ColorPicker.wrn b/packages/ui/components/ColorPicker.wrn
index ba2294ff..081a107c 100644
--- a/packages/ui/components/ColorPicker.wrn
+++ b/packages/ui/components/ColorPicker.wrn
@@ -27,22 +27,74 @@ component ColorPicker {
     required: boolean = false
     class: string = ""
   }
+  state currentValue = value
   functions {
-    client function emitField(nameEvent, sourceEvent) { sourceEvent.stopPropagation(); output[nameEvent]({ value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }) }
+    client function emitField(nameEvent, sourceEvent) { sourceEvent.stopPropagation(); if (nameEvent === "input" || nameEvent === "change") { currentValue = sourceEvent.currentTarget.value } output[nameEvent]({ value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }) }
     client function preventReadonly(sourceEvent) { if (readonly) sourceEvent.preventDefault() }
   }
   view {
     <div {...attrs} class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--field wrn-component--color-picker {class}" data-variant="{variant}" data-inline="{inline}" data-invalid="{error ? 'true' : 'false'}">
       <div class="wrn-next__field-heading"><label class="{hiddenLabel ? 'wrn-next__sr-only' : ''}" for="{id || name}">{label}</label>{#if cornerHint}<span class="wrn-next__field-hint">{cornerHint}</span>{/if}</div>
-      <div class="wrn-next__color-control" data-icon-position="{iconPosition}">{#if icon}<span class="{icon}" aria-hidden="true"></span>{/if}<input id="{id || name}" type="color" name="{name}" value="{value}" disabled="{disabled}" required="{required}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" @click="preventReadonly(event)" @input="emitField('input', event)" @change="emitField('change', event)" @focus="emitField('focus', event)" @blur="emitField('blur', event)" /><output>{value}</output></div>
+      <div class="wrn-next__color-control" data-icon-position="{iconPosition}">{#if icon}<span class="{icon}" aria-hidden="true"></span>{/if}<input id="{id || name}" type="color" name="{name}" value="{currentValue}" disabled="{disabled}" required="{required}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" @click="preventReadonly(event)" @input="emitField('input', event)" @change="emitField('change', event)" @focus="emitField('focus', event)" @blur="emitField('blur', event)" /><output for="{id || name}">{currentValue}</output></div>
       {#if helperText}<small class="wrn-next__field-help">{helperText}</small>{/if}<small class="wrn-next__field-error" data-error="{name}">{error}</small>
     </div>
   }
 
   style {
+    /* A field well holding a swatch and the hex readout. */
+    .wrn-component--color-picker .wrn-next__color-control {
+      width: min(100%, 16rem);
+      min-height: var(--wrn-control-height, 2.5rem);
+      gap: 0.625rem;
+      padding: 0.25rem 0.75rem 0.25rem 0.25rem;
+      border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
+      border-radius: var(--wrn-radius-sm);
+      background: var(--wrn-color-input-background, var(--wrn-color-surface));
+      box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
+      transition: border-color 120ms ease, box-shadow 120ms ease;
+    }
+    .wrn-component--color-picker .wrn-next__color-control:hover {
+      border-color: var(--wrn-color-input-border-hover, var(--wrn-color-border-strong));
+    }
+    .wrn-component--color-picker .wrn-next__color-control:focus-within {
+      border-color: var(--wrn-field-color);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-field-color) 18%, transparent);
+    }
     .wrn-next__color-control input[type="color"] {
-      width: 3rem;
-      padding: 0.2rem;
+      flex: none;
+      width: 2rem;
+      height: 2rem;
+      min-height: 0;
+      padding: 0;
+      border: 0;
+      border-radius: calc(var(--wrn-radius-sm) - 2px);
+      background: transparent;
+      box-shadow: none;
+      cursor: pointer;
+    }
+    .wrn-next__color-control input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
+    .wrn-next__color-control input[type="color"]::-webkit-color-swatch {
+      border: 0;
+      border-radius: calc(var(--wrn-radius-sm) - 2px);
+      box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
+    }
+    .wrn-next__color-control input[type="color"]::-moz-color-swatch {
+      border: 0;
+      border-radius: calc(var(--wrn-radius-sm) - 2px);
+    }
+    .wrn-next__color-control output {
+      flex: 1;
+      color: var(--wrn-color-text);
+      font-family: var(--wrn-font-mono, monospace);
+      font-size: 0.8125rem;
+      font-weight: 550;
+      letter-spacing: 0.02em;
+      text-transform: uppercase;
+    }
+    .wrn-component--color-picker .wrn-next__color-control:has(input:disabled) {
+      opacity: 0.55;
+      cursor: not-allowed;
+      background: var(--wrn-color-surface-soft);
     }
 
     /* Shared component foundation. */
@@ -110,7 +162,7 @@ component ColorPicker {
 
         .wrn-component p {
           margin: 0;
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-muted, var(--wrn-color-muted));
           line-height: 1.6;
         }
 
@@ -125,8 +177,9 @@ component ColorPicker {
           display: block;
           min-height: 1em;
           margin-top: 0.25rem;
-          color: var(--wrn-color-danger);
-          font-size: 0.8rem;
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
+          font-size: 0.78rem;
+          font-weight: 550;
         }
 
         .wrn-next--choice {
@@ -153,13 +206,14 @@ component ColorPicker {
           width: 100%;
           min-height: var(--wrn-control-height, 2.5rem);
           padding: 0.5rem 0.75rem;
-          border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-sm, 6px);
+          border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
+          border-radius: var(--wrn-radius-sm, 8px);
           outline: 0;
           color: var(--wrn-color-text);
-          background: var(--wrn-color-bg);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
           font: inherit;
           font-weight: 500;
+          transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
         }
         .wrn-auth-form form > .wrn-next--field,
         .wrn-auth-form form > .wrn-field {
@@ -173,8 +227,8 @@ component ColorPicker {
       box-shadow: none;
         }
         .wrn-next--field :where(input, textarea, select):focus-visible {
-          border-color: var(--wrn-color-primary);
-          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
+          border-color: var(--wrn-field-color, var(--wrn-color-primary));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04), 0 0 0 3px color-mix(in srgb, var(--wrn-field-color, var(--wrn-color-primary)) 18%, transparent);
         }
         .wrn-next--field textarea {
           resize: vertical;
@@ -208,12 +262,14 @@ component ColorPicker {
           font-size: 0.8125rem;
           font-weight: 600;
           line-height: 1.35;
+          letter-spacing: -0.005em;
         }
         .wrn-next__field-hint,
         .wrn-next__field-help {
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
           font-size: 0.75rem;
-          font-weight: 500;
+          font-weight: 450;
+          line-height: 1.45;
         }
         .wrn-next__field-control {
           position: relative;
@@ -221,10 +277,11 @@ component ColorPicker {
         }
         .wrn-next__field-control > :is(input, textarea, select) {
           padding-inline: 0.85rem;
-          border-color: var(--wrn-color-border);
+          border-color: var(--wrn-color-input-border, var(--wrn-color-border));
           border-radius: var(--wrn-radius-sm);
-          background: var(--wrn-color-surface);
-          font-size: 0.8125rem;
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
+          font-size: 0.875rem;
         }
         .wrn-next__field-control[data-has-icon="true"][data-icon-position="start"] > :is(input, textarea, select) {
           padding-inline-start: 2.5rem;
@@ -265,7 +322,8 @@ component ColorPicker {
         }
         .wrn-next--field[data-variant="ghost"] .wrn-next__field-control > :is(input, textarea, select) {
           border-color: transparent;
-          background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
+          box-shadow: none;
         }
         .wrn-next__field-floating-label {
           position: absolute;
@@ -306,9 +364,9 @@ component ColorPicker {
         }
         .wrn-next__field-error {
           min-height: 1em;
-          color: var(--wrn-color-danger);
-          font-size: 0.82em;
-          font-weight: 600;
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
+          font-size: 0.78rem;
+          font-weight: 550;
         }
         .wrn-next__field-error:empty {
           display: none;
@@ -316,14 +374,16 @@ component ColorPicker {
         .wrn-next--field[data-invalid="true"] :is(input, textarea, select),
         .wrn-next--choice-field[data-invalid="true"] input {
           border-color: var(--wrn-color-danger);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-danger) 12%, transparent);
         }
         .wrn-next--field :is(input, textarea, select):disabled,
         .wrn-next--choice-field input:disabled {
           cursor: not-allowed;
-          opacity: 0.58;
+          opacity: 0.55;
+          background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
         }
         .wrn-next--field :is(input, textarea, select):read-only {
-          background: var(--wrn-color-surface-2);
+          background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
         }
         .wrn-next--field[data-inline="true"],
         .wrn-next--choice-field[data-inline="true"] {
@@ -380,11 +440,13 @@ component ColorPicker {
           display: flex;
           min-width: 0;
           align-items: center;
-          gap: 0.65rem;
+          gap: 0.625rem;
           color: var(--wrn-color-text);
           width: 100%;
-          font-size: 0.75rem;
+          font-size: 0.875rem;
           font-weight: 500;
+          line-height: 1.4;
+          cursor: pointer;
         }
         .wrn-next__checkbox-content > .wrn-next__choice {
           width: 100%;
@@ -399,12 +461,13 @@ component ColorPicker {
         .wrn-next__choice-copy {
           display: grid;
           min-width: 0;
-          gap: 0.15rem;
-          line-height: 1.35;
+          gap: 0.125rem;
+          line-height: 1.4;
         }
         .wrn-next__choice-copy small {
-          color: var(--wrn-color-muted);
-          font-weight: 500;
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+          font-size: 0.78rem;
+          font-weight: 450;
         }
         .wrn-next__radio-group,
         .wrn-next__checkbox-group {
@@ -424,15 +487,18 @@ component ColorPicker {
         .wrn-next--radio-field[data-card="true"] .wrn-next--radio,
         .wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox {
           min-height: 4.5rem;
-          padding: 0.85rem;
+          padding: 0.9rem 1rem;
           border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-sm);
+          border-radius: var(--wrn-radius);
           background: var(--wrn-color-surface);
+          box-shadow: var(--wrn-shadow-1);
+          transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
         }
         .wrn-next--radio-field[data-card="true"] .wrn-next--radio:has(input:checked),
         .wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox:has(input:checked) {
           border-color: var(--wrn-field-color);
-          box-shadow: 0 0 0 1px var(--wrn-field-color);
+          background: color-mix(in srgb, var(--wrn-field-color) 5%, var(--wrn-color-surface));
+          box-shadow: 0 0 0 1px var(--wrn-field-color), var(--wrn-shadow-1);
         }
         .wrn-next--radio-field[data-list="true"] .wrn-next--radio,
         .wrn-next--checkbox-field[data-list="true"] .wrn-next--checkbox {
@@ -453,19 +519,21 @@ component ColorPicker {
         }
         .wrn-next__choice[data-variant="outlined"],
         .wrn-next__choice[data-variant="floating"] {
-          padding: 0.65rem 0.8rem;
+          padding: 0.7rem 0.85rem;
           border: 1px solid var(--wrn-color-border);
           border-radius: var(--wrn-radius-sm);
+          background: var(--wrn-color-surface);
         }
         .wrn-next__choice[data-variant="pill"] {
-          padding: 0.65rem 1rem;
+          padding: 0.6rem 1rem;
+          border: 1px solid color-mix(in srgb, var(--wrn-field-color) 22%, var(--wrn-color-border));
           border-radius: 999px;
-          background: color-mix(in srgb, var(--wrn-field-color) 9%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface));
         }
         .wrn-next__choice[data-variant="ghost"] {
-          padding: 0.65rem 0.8rem;
+          padding: 0.65rem 0.85rem;
           border-radius: var(--wrn-radius-sm);
-          background: color-mix(in srgb, var(--wrn-field-color) 7%, transparent);
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, transparent);
         }
         .wrn-next__choice[data-variant="underline"] {
           padding-block: 0.5rem;
@@ -499,25 +567,35 @@ component ColorPicker {
           align-items: center;
           justify-content: space-between;
           gap: 0.75rem;
-          padding: 0.7rem 0.85rem;
-          border: 1px solid var(--wrn-color-border);
+          padding: 0.55rem 0.85rem;
+          border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
           border-radius: var(--wrn-radius-sm);
-          background: var(--wrn-color-surface);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
           color: var(--wrn-color-text);
           font: inherit;
+          font-size: 0.875rem;
+          font-variant-numeric: tabular-nums;
           text-align: left;
+          cursor: pointer;
+          transition: border-color 120ms ease, box-shadow 120ms ease;
         }
         .wrn-next__calendar,
         .wrn-next__time-panel {
-          z-index: 20;
+          position: absolute;
+          z-index: 40;
+          top: 100%;
+          left: 0;
           display: grid;
-          width: min(100%, 22rem);
+          width: min(calc(100vw - 2rem), 19.5rem);
           gap: 0.75rem;
-          padding: 0.85rem;
+          margin-top: 0.375rem;
+          padding: 0.75rem;
           border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-md);
-          background: var(--wrn-color-surface);
-          box-shadow: var(--wrn-shadow-3);
+          border-radius: var(--wrn-radius);
+          background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
+          box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
+          animation: wrn-popover-enter var(--wrn-motion-base, 160ms) var(--wrn-ease-emphasized, ease) both;
         }
         .wrn-next--date-picker[data-expanded="false"] .wrn-next__calendar,
         .wrn-next--time-picker[data-expanded="false"] .wrn-next__time-panel {
@@ -527,29 +605,42 @@ component ColorPicker {
         .wrn-next__time-panel button {
           min-height: 2.25rem;
           border: 0;
-          border-radius: var(--wrn-radius-sm);
+          border-radius: calc(var(--wrn-radius-sm) - 2px);
           background: transparent;
           color: inherit;
+          font: inherit;
+          font-size: 0.8125rem;
+          font-variant-numeric: tabular-nums;
+          cursor: pointer;
+          transition: background-color 120ms ease, color 120ms ease;
         }
         .wrn-next__calendar-weekdays,
         .wrn-next__calendar-grid {
           display: grid;
           grid-template-columns: repeat(7, 1fr);
-          gap: 0.2rem;
+          gap: 0.125rem;
           text-align: center;
         }
         .wrn-next__calendar-weekdays {
-          color: var(--wrn-color-muted);
-          font-size: 0.75rem;
+          padding-bottom: 0.375rem;
+          border-bottom: 1px solid var(--wrn-color-border);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+          font-family: var(--wrn-font-mono, monospace);
+          font-size: 0.625rem;
+          font-weight: 600;
+          letter-spacing: 0.06em;
+          text-transform: uppercase;
         }
         .wrn-next__calendar-grid button:hover,
         .wrn-next__time-panel button:hover {
-          background: var(--wrn-color-surface-2);
+          background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
         }
         .wrn-next__calendar-grid button[aria-pressed="true"],
         .wrn-next__time-panel button[aria-pressed="true"] {
           background: var(--wrn-field-color);
           color: var(--wrn-color-primary-contrast, #fff);
+          box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--wrn-field-color) 35%, transparent);
+          font-weight: 650;
         }
         .wrn-next__time-period {
           display: flex;
@@ -583,7 +674,7 @@ component ColorPicker {
         .wrn-next--field[data-variant="ghost"]
           :is(.wrn-next__input-group-control, .wrn-next__file-control, .wrn-next__color-control) {
           border-color: transparent;
-          background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
         }
         @media (max-width: 640px) {
           .wrn-next--field[data-inline="true"],
diff --git a/packages/ui/components/Combobox.wrn b/packages/ui/components/Combobox.wrn
index 24f83dbe..3b79e148 100644
--- a/packages/ui/components/Combobox.wrn
+++ b/packages/ui/components/Combobox.wrn
@@ -401,7 +401,7 @@ component ComboBox {
       padding: 0;
       place-items: center;
       border: 0;
-      color: var(--wrn-color-muted);
+      color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
       background: transparent;
       cursor: pointer;
       transform: translateY(-50%);
@@ -478,7 +478,7 @@ component ComboBox {
 
         .wrn-component p {
           margin: 0;
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-muted, var(--wrn-color-muted));
           line-height: 1.6;
         }
   }
diff --git a/packages/ui/components/ContextMenu.wrn b/packages/ui/components/ContextMenu.wrn
index bd65f3f6..00ba67e6 100644
--- a/packages/ui/components/ContextMenu.wrn
+++ b/packages/ui/components/ContextMenu.wrn
@@ -59,6 +59,10 @@ component ContextMenu {
         positionY = Math.max(12, sourceEvent.clientY || 12)
       }
       visible = true
+      // A pointer-placed menu is fixed to the viewport, so scrolling would
+      // slide the page out from under it. Close it the way native context
+      // menus do. Capture catches scrolling inside nested containers too.
+      window.addEventListener("scroll", closeOnScroll, { capture: true, once: true, passive: true })
       output.open({
         x: positionX,
         y: positionY,
@@ -67,6 +71,12 @@ component ContextMenu {
       })
     }
 
+    client function closeOnScroll(sourceEvent) {
+      if (visible && placement === "pointer") {
+        hideMenu("scroll", sourceEvent)
+      }
+    }
+
     client function hideMenu(reason, sourceEvent) {
       visible = false
       output.close({
@@ -320,22 +330,17 @@ component ContextMenu {
     .wrn-context-menu__panel {
       position: absolute;
       z-index: 1091;
-      top: calc(100% + 0.5rem);
+      top: calc(100% + 0.375rem);
       left: 0;
       width: max-content;
       min-width: var(--wrn-context-min-width);
       max-width: min(var(--wrn-context-max-width), calc(100vw - 1.5rem));
-      padding: 0.45rem;
+      padding: 0.3rem;
       color: var(--wrn-color-text);
-      background:
-        linear-gradient(145deg, color-mix(in srgb, var(--context-accent) 5%, transparent), transparent 58%),
-        color-mix(in srgb, var(--wrn-color-surface-raised) 96%, transparent);
-      border: 1px solid color-mix(in srgb, var(--context-accent) 18%, var(--wrn-color-border));
-      border-radius: var(--wrn-radius-md);
-      box-shadow:
-        0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
-        0 24px 64px color-mix(in srgb, black 24%, transparent);
-      backdrop-filter: blur(18px);
+      background: var(--wrn-color-surface-raised);
+      border: 1px solid var(--wrn-color-border);
+      border-radius: var(--wrn-radius);
+      box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
       transform-origin: top left;
     }
 
@@ -366,10 +371,8 @@ component ContextMenu {
     }
 
     .wrn-context-menu[data-variant="soft"] .wrn-context-menu__panel {
-      background:
-        linear-gradient(145deg, var(--context-soft), transparent 72%),
-        var(--wrn-color-surface-raised);
-      box-shadow: 0 18px 48px color-mix(in srgb, black 16%, transparent);
+      background: color-mix(in srgb, var(--context-accent) 4%, var(--wrn-color-surface-raised));
+      box-shadow: var(--wrn-shadow-3);
     }
 
     .wrn-context-menu[data-variant="outline"] .wrn-context-menu__panel {
@@ -379,14 +382,15 @@ component ContextMenu {
 
     .wrn-context-menu__header {
       display: grid;
-      gap: 0.2rem;
-      padding: 0.65rem 0.75rem 0.75rem;
+      gap: 0.15rem;
+      padding: 0.5rem 0.625rem 0.625rem;
+      margin: -0.3rem -0.3rem 0.25rem;
       border-bottom: 1px solid var(--wrn-color-border);
     }
 
     .wrn-context-menu__header strong {
-      font-size: 0.86rem;
-      font-weight: 650;
+      font-size: 0.8125rem;
+      font-weight: 620;
     }
 
     .wrn-context-menu__header span {
@@ -402,17 +406,18 @@ component ContextMenu {
     }
 
     .wrn-context-menu__section-label {
-      padding: 0.55rem 0.75rem 0.3rem;
-      color: var(--wrn-color-text-muted);
-      font-size: 0.68rem;
-      font-weight: 700;
-      letter-spacing: 0.12em;
+      padding: 0.5rem 0.625rem 0.25rem;
+      color: var(--wrn-color-text-subtle, var(--wrn-color-text-muted));
+      font-family: var(--wrn-font-mono, monospace);
+      font-size: 0.65rem;
+      font-weight: 600;
+      letter-spacing: 0.08em;
       text-transform: uppercase;
     }
 
     .wrn-context-menu__divider {
       height: 1px;
-      margin: 0.3rem 0.45rem;
+      margin: 0.25rem -0.3rem;
       background: var(--wrn-color-border);
     }
 
@@ -421,31 +426,33 @@ component ContextMenu {
       display: grid;
       grid-template-columns: auto minmax(0, 1fr) auto;
       align-items: center;
-      gap: 0.7rem;
+      gap: 0.625rem;
       width: 100%;
       min-width: 0;
-      padding: 0.65rem 0.7rem;
+      padding: 0.5rem 0.625rem;
       color: var(--wrn-color-text);
       background: transparent;
       border: 0;
-      border-radius: 0.72rem;
+      border-radius: calc(var(--wrn-radius-sm) - 2px);
       font: inherit;
+      font-size: 0.8125rem;
       text-align: left;
       text-decoration: none;
       cursor: pointer;
-      transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
+      transition: background-color 120ms ease, color 120ms ease;
     }
 
     .wrn-context-menu__item:hover,
     .wrn-context-menu__item:focus-visible,
     .wrn-context-menu__item[data-selected="true"] {
-      color: var(--context-accent);
-      background: var(--context-soft);
+      color: var(--wrn-color-text);
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-soft));
       outline: none;
     }
 
     .wrn-context-menu__item:active {
-      transform: scale(0.985);
+      transform: none;
+      background: color-mix(in srgb, var(--context-accent) 10%, var(--wrn-color-surface-muted, var(--wrn-color-surface-soft)));
     }
 
     .wrn-context-menu__item[data-danger="true"] {
@@ -478,9 +485,9 @@ component ContextMenu {
 
     .wrn-context-menu__copy strong {
       overflow: hidden;
-      font-size: 0.82rem;
-      font-weight: 600;
-      line-height: 1.3;
+      font-size: 0.8125rem;
+      font-weight: 550;
+      line-height: 1.35;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
@@ -488,20 +495,21 @@ component ContextMenu {
     .wrn-context-menu__copy small {
       overflow: hidden;
       color: var(--wrn-color-text-muted);
-      font-size: 0.7rem;
+      font-size: 0.72rem;
       line-height: 1.35;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
 
     .wrn-context-menu kbd {
-      padding: 0.16rem 0.38rem;
-      color: var(--wrn-color-text-muted);
+      padding: 0.125rem 0.35rem;
+      color: var(--wrn-color-text-subtle, var(--wrn-color-text-muted));
       background: var(--wrn-color-surface-soft);
       border: 1px solid var(--wrn-color-border);
-      border-radius: 0.36rem;
-      font-size: 0.64rem;
-      font-family: inherit;
+      border-bottom-width: 2px;
+      border-radius: 0.3rem;
+      font-size: 0.65rem;
+      font-family: var(--wrn-font-mono, monospace);
     }
 
     .wrn-context-menu[data-size="sm"] .wrn-context-menu__item {
diff --git a/packages/ui/components/DataTable.wrn b/packages/ui/components/DataTable.wrn
index 4ad0deb1..88e39981 100644
--- a/packages/ui/components/DataTable.wrn
+++ b/packages/ui/components/DataTable.wrn
@@ -1052,9 +1052,9 @@ component DataTable {
       gap: 0.75rem;
       padding: 1rem;
       border: 1px solid var(--wrn-color-border);
-      border-radius: var(--wrn-radius-md);
+      border-radius: var(--wrn-radius);
       background: var(--wrn-color-surface);
-      box-shadow: none;
+      box-shadow: var(--wrn-shadow-1);
     }
 
     .wrn-table {
@@ -1101,14 +1101,15 @@ component DataTable {
     .wrn-table__caption {
       margin: 0;
       color: var(--wrn-color-text);
-      font-size: 0.98rem;
+      font-size: 1rem;
       font-weight: 650;
+      letter-spacing: -0.015em;
     }
 
     .wrn-table__description {
       margin: 0;
       color: var(--wrn-color-text-muted);
-      font-size: 0.82rem;
+      font-size: 0.8125rem;
     }
 
     .wrn-table__actions {
@@ -1128,22 +1129,26 @@ component DataTable {
       appearance: none;
       display: inline-flex;
       align-items: center;
-      gap: 0.35rem;
-      min-height: 2.1rem;
-      padding: 0 0.7rem;
+      gap: 0.375rem;
+      min-height: 2.125rem;
+      padding: 0 0.75rem;
       color: var(--wrn-color-text);
-      background: var(--wrn-color-surface-soft);
+      background: linear-gradient(180deg, var(--wrn-color-surface), var(--wrn-color-surface-soft, var(--wrn-color-surface)));
       border: 1px solid var(--wrn-color-border);
+      border-bottom-color: var(--wrn-color-border-strong, var(--wrn-color-border));
       border-radius: var(--wrn-radius-sm);
+      box-shadow: var(--wrn-shadow-1);
       font: inherit;
-      font-size: 0.79rem;
+      font-size: 0.8125rem;
+      font-weight: 550;
       cursor: pointer;
-      transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
+      transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
     }
 
     .wrn-table__action:hover {
-      color: var(--table-accent);
-      border-color: color-mix(in srgb, var(--table-accent) 45%, var(--wrn-color-border));
+      color: var(--wrn-color-text);
+      border-color: var(--wrn-color-border-strong, var(--wrn-color-border));
+      background: var(--wrn-color-surface);
     }
 
     .wrn-table__action[data-tone="danger"] {
@@ -1170,12 +1175,14 @@ component DataTable {
       display: inline-flex;
       align-items: center;
       gap: 0.45rem;
-      min-height: 2.35rem;
+      min-height: 2.125rem;
       padding: 0 0.7rem;
-      color: var(--wrn-color-text-muted);
-      background: var(--wrn-color-surface-soft);
-      border: 1px solid var(--wrn-color-border);
+      color: var(--wrn-color-text-subtle, var(--wrn-color-text-muted));
+      background: var(--wrn-color-input-background, var(--wrn-color-surface));
+      border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
       border-radius: var(--wrn-radius-sm);
+      box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
+      transition: border-color 120ms ease, box-shadow 120ms ease;
     }
 
     .wrn-table__search input {
@@ -1186,12 +1193,13 @@ component DataTable {
       background: transparent;
       border: 0;
       font: inherit;
-      font-size: 0.83rem;
+      font-size: 0.8125rem;
       outline: none;
     }
 
     .wrn-table__search:focus-within {
-      border-color: color-mix(in srgb, var(--table-accent) 45%, var(--wrn-color-border));
+      border-color: var(--table-accent);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--table-accent) 18%, transparent);
     }
 
     /*
@@ -1210,7 +1218,9 @@ component DataTable {
       max-width: 100%;
       overflow-x: auto;
       border: 1px solid var(--wrn-color-border);
-      border-radius: var(--wrn-radius-sm);
+      border-radius: var(--wrn-radius);
+      background: var(--wrn-color-surface);
+      box-shadow: var(--wrn-shadow-1);
     }
 
     .wrn-table[data-bordered="false"] .wrn-table__scroll {
@@ -1221,12 +1231,13 @@ component DataTable {
     .wrn-table__table {
       width: 100%;
       border-collapse: collapse;
-      font-size: 0.85rem;
+      font-size: 0.8125rem;
+      font-variant-numeric: tabular-nums;
     }
 
     .wrn-table__table th,
     .wrn-table__table td {
-      padding: 0.7rem 0.85rem;
+      padding: 0.6875rem 0.875rem;
       text-align: left;
       vertical-align: middle;
       white-space: nowrap;
@@ -1256,17 +1267,19 @@ component DataTable {
       position: sticky;
       top: 0;
       z-index: 1;
-      color: var(--wrn-color-text-muted);
+      color: var(--wrn-color-text-subtle, var(--wrn-color-text-muted));
       background: var(--wrn-color-surface-soft);
       border-bottom: 1px solid var(--wrn-color-border);
-      font-size: 0.76rem;
-      font-weight: 650;
-      letter-spacing: 0.02em;
+      font-family: var(--wrn-font-mono, monospace);
+      font-size: 0.65rem;
+      font-weight: 600;
+      letter-spacing: 0.06em;
       text-transform: uppercase;
     }
 
     .wrn-table__table tbody tr {
-      border-bottom: 1px solid color-mix(in srgb, var(--wrn-color-border) 60%, transparent);
+      border-bottom: 1px solid color-mix(in srgb, var(--wrn-color-border) 70%, transparent);
+      transition: background-color 100ms ease;
     }
 
     .wrn-table__table tbody tr:last-child {
@@ -1285,20 +1298,21 @@ component DataTable {
      * sits at the same specificity and is ordered deliberately.
      */
     .wrn-table[data-striped="true"] .wrn-table__table tbody tr:nth-child(even) {
-      background: color-mix(in srgb, var(--wrn-color-surface-soft) 55%, transparent);
+      background: color-mix(in srgb, var(--wrn-color-surface-soft) 70%, transparent);
     }
 
     .wrn-table[data-striped] .wrn-table__table tbody tr:hover:not([data-selected="true"]) {
-      background: color-mix(in srgb, var(--table-accent) 7%, transparent);
+      background: var(--wrn-color-surface-soft);
     }
 
     /* Every selected row identical, striped or not. */
     .wrn-table[data-striped] .wrn-table__table tbody tr[data-selected="true"] {
-      background: color-mix(in srgb, var(--table-accent) 15%, transparent);
+      background: color-mix(in srgb, var(--table-accent) 7%, var(--wrn-color-surface));
+      box-shadow: inset 2px 0 0 var(--table-accent);
     }
 
     .wrn-table[data-striped] .wrn-table__table tbody tr[data-selected="true"]:hover {
-      background: color-mix(in srgb, var(--table-accent) 22%, transparent);
+      background: color-mix(in srgb, var(--table-accent) 11%, var(--wrn-color-surface));
     }
 
     .wrn-table__sort {
@@ -1319,7 +1333,7 @@ component DataTable {
     }
 
     .wrn-table__sort:hover {
-      color: var(--table-accent);
+      color: var(--wrn-color-text);
     }
 
     .wrn-table__sort-icon {
@@ -1328,7 +1342,7 @@ component DataTable {
     }
 
     .wrn-table__sort[data-active="true"] {
-      color: var(--table-accent);
+      color: var(--wrn-color-text);
     }
 
     .wrn-table__sort[data-active="true"] .wrn-table__sort-icon {
@@ -1346,25 +1360,28 @@ component DataTable {
       align-items: center;
       justify-content: center;
       padding: 0;
-      width: 1.05rem;
-      height: 1.05rem;
+      width: 1.125rem;
+      height: 1.125rem;
       color: transparent;
-      background: var(--wrn-color-surface-raised);
-      border: 1px solid var(--wrn-color-border);
-      border-radius: 0.32rem;
+      background: var(--wrn-color-input-background, var(--wrn-color-surface));
+      border: 1.5px solid var(--wrn-color-border-strong, var(--wrn-color-border));
+      border-radius: 0.3125rem;
+      box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.05);
       cursor: pointer;
-      transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
+      transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
     }
 
     .wrn-table__check[aria-checked="true"] {
       color: var(--wrn-color-primary-contrast);
       background: var(--table-accent);
-      border-color: var(--table-accent);
+      border-color: color-mix(in srgb, var(--table-accent) 80%, black);
+      box-shadow: var(--wrn-highlight-edge, none);
     }
 
     .wrn-table__check:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--table-accent) 35%, transparent);
+      outline: 2px solid var(--table-accent);
+      outline-offset: 2px;
+      box-shadow: none;
     }
 
     .wrn-table__table--comparison {
@@ -1380,9 +1397,9 @@ component DataTable {
     .wrn-table__table--comparison th[scope="row"] {
       color: var(--wrn-color-text-muted);
       background: var(--wrn-color-surface-soft);
-      font-size: 0.76rem;
-      font-weight: 650;
-      text-transform: uppercase;
+      font-size: 0.8125rem;
+      font-weight: 600;
+      text-transform: none;
       white-space: nowrap;
     }
 
@@ -1444,9 +1461,9 @@ component DataTable {
 
     .wrn-table__empty {
       margin: 0;
-      padding: 1.75rem 1rem;
+      padding: 2.5rem 1rem;
       color: var(--wrn-color-text-muted);
-      font-size: 0.85rem;
+      font-size: 0.8125rem;
       text-align: center;
     }
 
@@ -1461,7 +1478,8 @@ component DataTable {
     .wrn-table__range {
       margin: 0;
       color: var(--wrn-color-text-muted);
-      font-size: 0.8rem;
+      font-size: 0.8125rem;
+      font-variant-numeric: tabular-nums;
     }
 
     .wrn-table__pager {
@@ -1504,8 +1522,8 @@ component DataTable {
     }
 
     .wrn-table__page-button:hover:not(:disabled) {
-      color: var(--table-accent);
-      border-color: color-mix(in srgb, var(--table-accent) 40%, var(--wrn-color-border));
+      color: var(--wrn-color-text);
+      background: var(--wrn-color-surface);
     }
 
     .wrn-table__page-button:disabled {
@@ -1531,22 +1549,25 @@ component DataTable {
       color: var(--wrn-color-text-muted);
       background: transparent;
       border: 1px solid transparent;
-      border-radius: 0.55rem;
+      border-radius: var(--wrn-radius-sm);
       font: inherit;
-      font-size: 0.78rem;
+      font-size: 0.8125rem;
+      font-weight: 550;
       font-variant-numeric: tabular-nums;
       cursor: pointer;
     }
 
     .wrn-table__page-number:hover {
       color: var(--wrn-color-text);
-      background: var(--wrn-color-surface-soft);
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-soft));
     }
 
     .wrn-table__page-number[data-active="true"] {
       color: var(--wrn-color-primary-contrast);
-      background: var(--table-accent);
-      border-color: var(--table-accent);
+      background: linear-gradient(180deg, color-mix(in srgb, var(--table-accent) 92%, white), var(--table-accent));
+      border-color: color-mix(in srgb, var(--table-accent) 82%, black);
+      box-shadow: var(--wrn-highlight-edge, none);
+      font-weight: 650;
     }
 
     .wrn-table__page-indicator {
@@ -1707,7 +1728,7 @@ component DataTable {
 
         .wrn-component p {
           margin: 0;
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-muted, var(--wrn-color-muted));
           line-height: 1.6;
         }
   }
diff --git a/packages/ui/components/DatePicker.wrn b/packages/ui/components/DatePicker.wrn
index 73b36bb3..76c71acd 100644
--- a/packages/ui/components/DatePicker.wrn
+++ b/packages/ui/components/DatePicker.wrn
@@ -153,40 +153,63 @@ size: string = "default"
     .wrn-next__picker-clear {
       position: absolute;
       right: 2.5rem;
+      display: inline-grid;
+      place-items: center;
+      width: 1.375rem;
+      height: 1.375rem;
+      padding: 0;
       border: 0;
+      border-radius: 999px;
       background: transparent;
-      color: var(--wrn-color-muted);
+      color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+      font-size: 1rem;
+      line-height: 1;
+      cursor: pointer;
     }
 
     .wrn-next__date-selectors {
       display: grid;
-      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-      gap: 0.65rem;
+      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
+      gap: 0.5rem;
     }
 
     .wrn-next__date-selectors label {
       display: grid;
-      gap: 0.3rem;
-      color: var(--wrn-color-muted);
-      font-size: 0.78rem;
+      gap: 0.25rem;
+      color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+      font-family: var(--wrn-font-mono, monospace);
+      font-size: 0.625rem;
       font-weight: 600;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
     }
 
     .wrn-next__date-selectors select {
+      appearance: none;
       width: 100%;
-      min-height: 2.35rem;
-      padding: 0.45rem 0.65rem;
-      border: 1px solid var(--wrn-color-border);
-      border-radius: var(--wrn-radius-sm);
-      background: var(--wrn-color-surface);
+      min-height: 2.125rem;
+      padding: 0.375rem 1.75rem 0.375rem 0.625rem;
+      border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
+      border-radius: calc(var(--wrn-radius-sm) - 2px);
+      background: var(--wrn-color-input-background, var(--wrn-color-surface)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") right 0.5rem center / 0.875rem no-repeat;
       color: var(--wrn-color-text);
       font: inherit;
+      font-family: var(--wrn-font-sans, inherit);
+      font-size: 0.8125rem;
+      font-weight: 600;
+      letter-spacing: 0;
+      text-transform: none;
+      cursor: pointer;
     }
 
     .wrn-next__date-done {
-      background: var(--wrn-field-color) !important;
+      min-height: 2.25rem;
+      border: 1px solid color-mix(in srgb, var(--wrn-field-color) 82%, black) !important;
+      border-bottom-color: color-mix(in srgb, var(--wrn-field-color) 64%, black) !important;
+      background: linear-gradient(180deg, color-mix(in srgb, var(--wrn-field-color) 92%, white), var(--wrn-field-color)) !important;
+      box-shadow: var(--wrn-highlight-edge, none);
       color: var(--wrn-color-primary-contrast, #fff) !important;
-      font-weight: 650;
+      font-weight: 600;
     }
 
     .wrn-next__calendar > header {
@@ -202,12 +225,26 @@ size: string = "default"
     }
 
     .wrn-next__calendar-grid button[data-today="true"] {
-      box-shadow: inset 0 0 0 1px var(--wrn-field-color);
+      box-shadow: none;
+      color: var(--wrn-color-primary-text, var(--wrn-field-color));
+      font-weight: 700;
+      text-decoration: underline;
+      text-decoration-thickness: 2px;
+      text-underline-offset: 0.3em;
     }
 
     .wrn-next__calendar-grid button:disabled { opacity: 0.35; cursor: not-allowed; }
     .wrn-next__calendar-grid button:not(:disabled):focus-visible { outline: 2px solid var(--wrn-field-color); outline-offset: 1px; }
-    .wrn-next__calendar-weekdays { padding-block: 0.375rem; }
+    .wrn-next__calendar-weekdays {
+      padding-bottom: 0.375rem;
+      border-bottom: 1px solid var(--wrn-color-border);
+      color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+      font-family: var(--wrn-font-mono, monospace);
+      font-size: 0.625rem;
+      font-weight: 600;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+    }
 
     /* Shared component foundation. */
 
@@ -274,7 +311,7 @@ size: string = "default"
 
         .wrn-component p {
           margin: 0;
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-muted, var(--wrn-color-muted));
           line-height: 1.6;
         }
 
@@ -289,8 +326,9 @@ size: string = "default"
           display: block;
           min-height: 1em;
           margin-top: 0.25rem;
-          color: var(--wrn-color-danger);
-          font-size: 0.8rem;
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
+          font-size: 0.78rem;
+          font-weight: 550;
         }
 
         .wrn-next--choice {
@@ -317,13 +355,14 @@ size: string = "default"
           width: 100%;
           min-height: var(--wrn-control-height, 2.5rem);
           padding: 0.5rem 0.75rem;
-          border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-sm, 6px);
+          border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
+          border-radius: var(--wrn-radius-sm, 8px);
           outline: 0;
           color: var(--wrn-color-text);
-          background: var(--wrn-color-bg);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
           font: inherit;
           font-weight: 500;
+          transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
         }
         .wrn-auth-form form > .wrn-next--field,
         .wrn-auth-form form > .wrn-field {
@@ -337,8 +376,8 @@ size: string = "default"
       box-shadow: none;
         }
         .wrn-next--field :where(input, textarea, select):focus-visible {
-          border-color: var(--wrn-color-primary);
-          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
+          border-color: var(--wrn-field-color, var(--wrn-color-primary));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04), 0 0 0 3px color-mix(in srgb, var(--wrn-field-color, var(--wrn-color-primary)) 18%, transparent);
         }
         .wrn-next--field textarea {
           resize: vertical;
@@ -372,12 +411,14 @@ size: string = "default"
           font-size: 0.8125rem;
           font-weight: 600;
           line-height: 1.35;
+          letter-spacing: -0.005em;
         }
         .wrn-next__field-hint,
         .wrn-next__field-help {
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
           font-size: 0.75rem;
-          font-weight: 500;
+          font-weight: 450;
+          line-height: 1.45;
         }
         .wrn-next__field-control {
           position: relative;
@@ -385,10 +426,11 @@ size: string = "default"
         }
         .wrn-next__field-control > :is(input, textarea, select) {
           padding-inline: 0.85rem;
-          border-color: var(--wrn-color-border);
+          border-color: var(--wrn-color-input-border, var(--wrn-color-border));
           border-radius: var(--wrn-radius-sm);
-          background: var(--wrn-color-surface);
-          font-size: 0.8125rem;
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
+          font-size: 0.875rem;
         }
         .wrn-next__field-control[data-has-icon="true"][data-icon-position="start"] > :is(input, textarea, select) {
           padding-inline-start: 2.5rem;
@@ -429,7 +471,8 @@ size: string = "default"
         }
         .wrn-next--field[data-variant="ghost"] .wrn-next__field-control > :is(input, textarea, select) {
           border-color: transparent;
-          background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
+          box-shadow: none;
         }
         .wrn-next__field-floating-label {
           position: absolute;
@@ -470,9 +513,9 @@ size: string = "default"
         }
         .wrn-next__field-error {
           min-height: 1em;
-          color: var(--wrn-color-danger);
-          font-size: 0.82em;
-          font-weight: 600;
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
+          font-size: 0.78rem;
+          font-weight: 550;
         }
         .wrn-next__field-error:empty {
           display: none;
@@ -480,14 +523,16 @@ size: string = "default"
         .wrn-next--field[data-invalid="true"] :is(input, textarea, select),
         .wrn-next--choice-field[data-invalid="true"] input {
           border-color: var(--wrn-color-danger);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-danger) 12%, transparent);
         }
         .wrn-next--field :is(input, textarea, select):disabled,
         .wrn-next--choice-field input:disabled {
           cursor: not-allowed;
-          opacity: 0.58;
+          opacity: 0.55;
+          background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
         }
         .wrn-next--field :is(input, textarea, select):read-only {
-          background: var(--wrn-color-surface-2);
+          background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
         }
         .wrn-next--field[data-inline="true"],
         .wrn-next--choice-field[data-inline="true"] {
@@ -544,11 +589,13 @@ size: string = "default"
           display: flex;
           min-width: 0;
           align-items: center;
-          gap: 0.65rem;
+          gap: 0.625rem;
           color: var(--wrn-color-text);
           width: 100%;
-          font-size: 0.75rem;
+          font-size: 0.875rem;
           font-weight: 500;
+          line-height: 1.4;
+          cursor: pointer;
         }
         .wrn-next__checkbox-content > .wrn-next__choice {
           width: 100%;
@@ -563,12 +610,13 @@ size: string = "default"
         .wrn-next__choice-copy {
           display: grid;
           min-width: 0;
-          gap: 0.15rem;
-          line-height: 1.35;
+          gap: 0.125rem;
+          line-height: 1.4;
         }
         .wrn-next__choice-copy small {
-          color: var(--wrn-color-muted);
-          font-weight: 500;
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+          font-size: 0.78rem;
+          font-weight: 450;
         }
         .wrn-next__radio-group,
         .wrn-next__checkbox-group {
@@ -588,15 +636,18 @@ size: string = "default"
         .wrn-next--radio-field[data-card="true"] .wrn-next--radio,
         .wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox {
           min-height: 4.5rem;
-          padding: 0.85rem;
+          padding: 0.9rem 1rem;
           border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-sm);
+          border-radius: var(--wrn-radius);
           background: var(--wrn-color-surface);
+          box-shadow: var(--wrn-shadow-1);
+          transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
         }
         .wrn-next--radio-field[data-card="true"] .wrn-next--radio:has(input:checked),
         .wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox:has(input:checked) {
           border-color: var(--wrn-field-color);
-          box-shadow: 0 0 0 1px var(--wrn-field-color);
+          background: color-mix(in srgb, var(--wrn-field-color) 5%, var(--wrn-color-surface));
+          box-shadow: 0 0 0 1px var(--wrn-field-color), var(--wrn-shadow-1);
         }
         .wrn-next--radio-field[data-list="true"] .wrn-next--radio,
         .wrn-next--checkbox-field[data-list="true"] .wrn-next--checkbox {
@@ -617,19 +668,21 @@ size: string = "default"
         }
         .wrn-next__choice[data-variant="outlined"],
         .wrn-next__choice[data-variant="floating"] {
-          padding: 0.65rem 0.8rem;
+          padding: 0.7rem 0.85rem;
           border: 1px solid var(--wrn-color-border);
           border-radius: var(--wrn-radius-sm);
+          background: var(--wrn-color-surface);
         }
         .wrn-next__choice[data-variant="pill"] {
-          padding: 0.65rem 1rem;
+          padding: 0.6rem 1rem;
+          border: 1px solid color-mix(in srgb, var(--wrn-field-color) 22%, var(--wrn-color-border));
           border-radius: 999px;
-          background: color-mix(in srgb, var(--wrn-field-color) 9%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface));
         }
         .wrn-next__choice[data-variant="ghost"] {
-          padding: 0.65rem 0.8rem;
+          padding: 0.65rem 0.85rem;
           border-radius: var(--wrn-radius-sm);
-          background: color-mix(in srgb, var(--wrn-field-color) 7%, transparent);
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, transparent);
         }
         .wrn-next__choice[data-variant="underline"] {
           padding-block: 0.5rem;
@@ -663,29 +716,36 @@ size: string = "default"
           align-items: center;
           justify-content: space-between;
           gap: 0.75rem;
-          padding: 0.7rem 0.85rem;
-          border: 1px solid var(--wrn-color-border);
+          padding: 0.55rem 0.85rem;
+          border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
           border-radius: var(--wrn-radius-sm);
-          background: var(--wrn-color-surface);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
           color: var(--wrn-color-text);
           font: inherit;
+          font-size: 0.875rem;
+          font-variant-numeric: tabular-nums;
           text-align: left;
+          cursor: pointer;
+          transition: border-color 120ms ease, box-shadow 120ms ease;
         }
         .wrn-next--date-picker, .wrn-next--time-picker { position: relative; }
         .wrn-next__calendar,
         .wrn-next__time-panel {
           position: absolute;
-          inset-block-start: calc(100% + .4rem);
-          inset-inline-start: 0;
           z-index: 40;
+          top: 100%;
+          left: 0;
           display: grid;
-          width: min(100%, 22rem);
+          width: min(calc(100vw - 2rem), 19.5rem);
           gap: 0.75rem;
-          padding: 0.85rem;
+          margin-top: 0.375rem;
+          padding: 0.75rem;
           border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-md);
-          background: var(--wrn-color-surface);
-          box-shadow: var(--wrn-shadow-2);
+          border-radius: var(--wrn-radius);
+          background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
+          box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
+          animation: wrn-popover-enter var(--wrn-motion-base, 160ms) var(--wrn-ease-emphasized, ease) both;
         }
         .wrn-next--date-picker[data-expanded="false"] .wrn-next__calendar,
         .wrn-next--time-picker[data-expanded="false"] .wrn-next__time-panel {
@@ -695,29 +755,42 @@ size: string = "default"
         .wrn-next__time-panel button {
           min-height: 2.25rem;
           border: 0;
-          border-radius: var(--wrn-radius-sm);
+          border-radius: calc(var(--wrn-radius-sm) - 2px);
           background: transparent;
           color: inherit;
+          font: inherit;
+          font-size: 0.8125rem;
+          font-variant-numeric: tabular-nums;
+          cursor: pointer;
+          transition: background-color 120ms ease, color 120ms ease;
         }
         .wrn-next__calendar-weekdays,
         .wrn-next__calendar-grid {
           display: grid;
           grid-template-columns: repeat(7, 1fr);
-          gap: 0.2rem;
+          gap: 0.125rem;
           text-align: center;
         }
         .wrn-next__calendar-weekdays {
-          color: var(--wrn-color-muted);
-          font-size: 0.75rem;
+          padding-bottom: 0.375rem;
+          border-bottom: 1px solid var(--wrn-color-border);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+          font-family: var(--wrn-font-mono, monospace);
+          font-size: 0.625rem;
+          font-weight: 600;
+          letter-spacing: 0.06em;
+          text-transform: uppercase;
         }
         .wrn-next__calendar-grid button:hover,
         .wrn-next__time-panel button:hover {
-          background: var(--wrn-color-surface-2);
+          background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
         }
         .wrn-next__calendar-grid button[aria-pressed="true"],
         .wrn-next__time-panel button[aria-pressed="true"] {
           background: var(--wrn-field-color);
           color: var(--wrn-color-primary-contrast, #fff);
+          box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--wrn-field-color) 35%, transparent);
+          font-weight: 650;
         }
         .wrn-next__time-period {
           display: flex;
@@ -751,7 +824,7 @@ size: string = "default"
         .wrn-next--field[data-variant="ghost"]
           :is(.wrn-next__input-group-control, .wrn-next__file-control, .wrn-next__color-control) {
           border-color: transparent;
-          background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
         }
         @media (max-width: 640px) {
           .wrn-next--field[data-inline="true"],
@@ -773,5 +846,37 @@ size: string = "default"
         .wrn-next--strong-password input.wrn-invalid {
           border-color: var(--wrn-color-danger);
         }
+  
+    .wrn-next__picker-clear:hover {
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
+      color: var(--wrn-color-text);
+    }
+  
+    .wrn-next__picker-control > button:first-of-type > i {
+      width: 1rem;
+      height: 1rem;
+      flex: none;
+      color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+    }
+  
+    .wrn-next--date-picker[data-expanded="true"] .wrn-next__picker-control > button:first-of-type {
+      border-color: var(--wrn-field-color);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-field-color) 18%, transparent);
+    }
+  
+    .wrn-next__calendar-grid button[data-today="true"][aria-pressed="true"] {
+      color: var(--wrn-color-primary-contrast, #fff);
+    }
+  
+    .wrn-next__date-done:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  
+    .wrn-next__calendar .wrn-next--time-picker {
+      width: 100%;
+      padding-top: 0.625rem;
+      border-top: 1px solid var(--wrn-color-border);
+    }
   }
 }
diff --git a/packages/ui/components/DeviceFrame.wrn b/packages/ui/components/DeviceFrame.wrn
index bc3af94b..5ac2c1fd 100644
--- a/packages/ui/components/DeviceFrame.wrn
+++ b/packages/ui/components/DeviceFrame.wrn
@@ -169,7 +169,7 @@ component DeviceFrame {
 
         .wrn-component p {
           margin: 0;
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-muted, var(--wrn-color-muted));
           line-height: 1.6;
         }
   }
diff --git a/packages/ui/components/Drawer.wrn b/packages/ui/components/Drawer.wrn
index 9749acad..96c7fb57 100644
--- a/packages/ui/components/Drawer.wrn
+++ b/packages/ui/components/Drawer.wrn
@@ -210,14 +210,16 @@ open: boolean = false
     .wrn-drawer__trigger {
       appearance: none;
       min-height: var(--wrn-control-height, 2.5rem);
-      padding: 0.65rem 1rem;
+      padding: 0 0.95rem;
       color: var(--wrn-color-primary-contrast);
-      background: var(--drawer-accent);
-      border: 0;
+      background: linear-gradient(180deg, color-mix(in srgb, var(--drawer-accent) 92%, white), var(--drawer-accent));
+      border: 1px solid color-mix(in srgb, var(--drawer-accent) 82%, black);
+      border-bottom-color: color-mix(in srgb, var(--drawer-accent) 64%, black);
       border-radius: var(--wrn-radius-sm);
+      box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--drawer-accent) 30%, transparent);
       font: inherit;
-      font-size: 0.85rem;
-      font-weight: 650;
+      font-size: 0.875rem;
+      font-weight: 600;
       cursor: pointer;
     }
 
@@ -255,9 +257,9 @@ open: boolean = false
       z-index: 0;
       appearance: none;
       padding: 0;
-      background: color-mix(in srgb, black 56%, transparent);
+      background: rgb(10 11 14 / 0.5);
       border: 0;
-      backdrop-filter: blur(7px);
+      backdrop-filter: blur(4px);
       pointer-events: auto;
     }
 
@@ -274,18 +276,11 @@ open: boolean = false
       max-height: 100%;
       margin-left: auto;
       color: var(--wrn-color-text);
-      background:
-        radial-gradient(
-          circle at 100% 0%,
-          color-mix(in srgb, var(--drawer-accent) 8%, transparent),
-          transparent 34%
-        ),
-        var(--wrn-color-surface-raised);
-      border-left: 1px solid color-mix(in srgb, var(--drawer-accent) 18%, var(--wrn-color-border));
-      box-shadow: -28px 0 80px color-mix(in srgb, black 28%, transparent);
+      background: var(--wrn-color-surface-raised);
+      border-left: 1px solid var(--wrn-color-border);
+      box-shadow: var(--wrn-shadow-3);
       pointer-events: auto;
       overflow: hidden;
-      /* Slides in from whichever edge the placement puts it on. */
       transform: translateX(100%);
       transition: transform var(--drawer-duration, 260ms) cubic-bezier(0.32, 0.72, 0, 1);
     }
@@ -338,9 +333,9 @@ open: boolean = false
     .wrn-drawer[data-placement="left"] .wrn-drawer__panel {
       margin-right: auto;
       margin-left: 0;
-      border-right: 1px solid color-mix(in srgb, var(--drawer-accent) 18%, var(--wrn-color-border));
+      border-right: 1px solid var(--wrn-color-border);
       border-left: 0;
-      box-shadow: 28px 0 80px color-mix(in srgb, black 28%, transparent);
+      box-shadow: var(--wrn-shadow-3);
     }
 
     .wrn-drawer[data-placement="top"] .wrn-drawer__layer,
@@ -354,11 +349,11 @@ open: boolean = false
       max-height: min(80vh, 44rem);
       margin: 0;
       border: 0;
-      box-shadow: 0 24px 80px color-mix(in srgb, black 28%, transparent);
+      box-shadow: var(--wrn-shadow-3);
     }
 
     .wrn-drawer[data-placement="top"] .wrn-drawer__panel {
-      border-bottom: 1px solid color-mix(in srgb, var(--drawer-accent) 18%, var(--wrn-color-border));
+      border-bottom: 1px solid var(--wrn-color-border);
     }
 
     .wrn-drawer[data-placement="bottom"] .wrn-drawer__layer {
@@ -366,13 +361,12 @@ open: boolean = false
     }
 
     .wrn-drawer[data-placement="bottom"] .wrn-drawer__panel {
-      border-top: 1px solid color-mix(in srgb, var(--drawer-accent) 18%, var(--wrn-color-border));
-      border-radius: 1.3rem 1.3rem 0 0;
+      border-top: 1px solid var(--wrn-color-border);
+      border-radius: var(--wrn-radius-lg) var(--wrn-radius-lg) 0 0;
     }
 
     .wrn-drawer[data-variant="soft"] .wrn-drawer__panel {
       background:
-        linear-gradient(145deg, var(--drawer-soft), transparent 65%),
         var(--wrn-color-surface-raised);
     }
 
@@ -400,7 +394,7 @@ open: boolean = false
       align-items: center;
       justify-content: space-between;
       gap: 1rem;
-      padding: 1.35rem 1.35rem 1.1rem;
+      padding: 1.25rem 1.25rem 1rem;
       border-bottom: 1px solid var(--wrn-color-border);
     }
 
@@ -435,14 +429,15 @@ open: boolean = false
     }
 
     .wrn-drawer__heading-copy h2 {
-      font-size: 1.05rem;
+      font-size: 1.0625rem;
       font-weight: 650;
-      line-height: 1.3;
+      letter-spacing: -0.015em;
+      line-height: 1.35;
     }
 
     .wrn-drawer__heading-copy p {
       color: var(--wrn-color-text-muted);
-      font-size: 0.8rem;
+      font-size: 0.8125rem;
       line-height: 1.55;
     }
 
@@ -474,8 +469,8 @@ open: boolean = false
 
     .wrn-drawer__close:hover,
     .wrn-drawer__close:focus-visible {
-      color: var(--drawer-accent);
-      border-color: color-mix(in srgb, var(--drawer-accent) 34%, var(--wrn-color-border));
+      color: var(--wrn-color-text);
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-soft));
       outline: none;
     }
 
@@ -511,8 +506,9 @@ open: boolean = false
     }
 
     .wrn-drawer__footer {
-      padding: 1rem 1.35rem 1.35rem;
+      padding: 0.875rem 1.25rem;
       border-top: 1px solid var(--wrn-color-border);
+      background: var(--wrn-color-surface-soft, transparent);
     }
 
     .wrn-drawer__footer:empty {
diff --git a/packages/ui/components/Dropdown.wrn b/packages/ui/components/Dropdown.wrn
index acfa9101..c7c466d2 100644
--- a/packages/ui/components/Dropdown.wrn
+++ b/packages/ui/components/Dropdown.wrn
@@ -320,26 +320,28 @@ items: unknown[] = []
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      gap: 0.55rem;
+      gap: 0.5rem;
       min-height: var(--wrn-control-height, 2.5rem);
-      padding: 0.65rem 0.9rem;
+      padding: 0 0.875rem;
       color: var(--wrn-color-text);
-      background: var(--wrn-color-surface-raised);
+      background: linear-gradient(180deg, var(--wrn-color-surface), var(--wrn-color-surface-soft, var(--wrn-color-surface)));
       border: 1px solid var(--wrn-color-border);
+      border-bottom-color: var(--wrn-color-border-strong, var(--wrn-color-border));
       border-radius: var(--wrn-radius-sm);
+      box-shadow: var(--wrn-shadow-1);
       font: inherit;
-      font-size: 0.84rem;
+      font-size: 0.875rem;
       font-weight: 600;
       cursor: pointer;
-      transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
+      transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease, transform 150ms ease;
     }
 
     .wrn-dropdown__trigger:hover,
     .wrn-dropdown__trigger:focus-visible,
     .wrn-dropdown[data-open="true"] .wrn-dropdown__trigger {
-      color: var(--dropdown-accent);
-      background: var(--dropdown-soft);
-      border-color: color-mix(in srgb, var(--dropdown-accent) 38%, var(--wrn-color-border));
+      color: var(--wrn-color-text);
+      background: var(--wrn-color-surface);
+      border-color: var(--wrn-color-border-strong, var(--wrn-color-border));
       outline: none;
     }
 
@@ -387,22 +389,17 @@ items: unknown[] = []
     .wrn-dropdown__panel {
       position: absolute;
       z-index: 1101;
-      top: calc(100% + 0.55rem);
+      top: calc(100% + 0.375rem);
       left: 0;
       width: max-content;
       min-width: 12rem;
       max-width: min(22rem, calc(100vw - 1.5rem));
-      padding: 0.45rem;
+      padding: 0.3rem;
       color: var(--wrn-color-text);
-      background:
-        linear-gradient(145deg, color-mix(in srgb, var(--dropdown-accent) 5%, transparent), transparent 60%),
-        color-mix(in srgb, var(--wrn-color-surface-raised) 97%, transparent);
-      border: 1px solid color-mix(in srgb, var(--dropdown-accent) 18%, var(--wrn-color-border));
-      border-radius: var(--wrn-radius-md);
-      box-shadow:
-        0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
-        0 24px 64px color-mix(in srgb, black 22%, transparent);
-      backdrop-filter: blur(18px);
+      background: var(--wrn-color-surface-raised);
+      border: 1px solid var(--wrn-color-border);
+      border-radius: var(--wrn-radius);
+      box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
     }
 
     .wrn-dropdown[data-width="trigger"] .wrn-dropdown__panel {
@@ -440,10 +437,8 @@ items: unknown[] = []
     }
 
     .wrn-dropdown[data-variant="soft"] .wrn-dropdown__panel {
-      background:
-        linear-gradient(145deg, var(--dropdown-soft), transparent 70%),
-        var(--wrn-color-surface-raised);
-      box-shadow: 0 18px 48px color-mix(in srgb, black 16%, transparent);
+      background: color-mix(in srgb, var(--dropdown-accent) 4%, var(--wrn-color-surface-raised));
+      box-shadow: var(--wrn-shadow-3);
     }
 
     .wrn-dropdown[data-variant="outline"] .wrn-dropdown__panel {
@@ -457,17 +452,18 @@ items: unknown[] = []
     }
 
     .wrn-dropdown__section-label {
-      padding: 0.55rem 0.72rem 0.3rem;
-      color: var(--wrn-color-text-muted);
-      font-size: 0.68rem;
-      font-weight: 700;
-      letter-spacing: 0.12em;
+      padding: 0.5rem 0.625rem 0.25rem;
+      color: var(--wrn-color-text-subtle, var(--wrn-color-text-muted));
+      font-family: var(--wrn-font-mono, monospace);
+      font-size: 0.65rem;
+      font-weight: 600;
+      letter-spacing: 0.08em;
       text-transform: uppercase;
     }
 
     .wrn-dropdown__divider {
       height: 1px;
-      margin: 0.3rem 0.4rem;
+      margin: 0.25rem -0.3rem;
       background: var(--wrn-color-border);
     }
 
@@ -476,31 +472,33 @@ items: unknown[] = []
       display: grid;
       grid-template-columns: auto minmax(0, 1fr) auto;
       align-items: center;
-      gap: 0.7rem;
+      gap: 0.625rem;
       width: 100%;
       min-width: 0;
-      padding: 0.68rem 0.72rem;
+      padding: 0.5rem 0.625rem;
       color: var(--wrn-color-text);
       background: transparent;
       border: 0;
-      border-radius: 0.72rem;
+      border-radius: calc(var(--wrn-radius-sm) - 2px);
       font: inherit;
+      font-size: 0.8125rem;
       text-align: start;
       text-decoration: none;
       cursor: pointer;
-      transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
+      transition: background-color 120ms ease, color 120ms ease;
     }
 
     .wrn-dropdown__item:hover,
     .wrn-dropdown__item:focus-visible,
     .wrn-dropdown__item[data-selected="true"] {
-      color: var(--dropdown-accent);
-      background: var(--dropdown-soft);
+      color: var(--wrn-color-text);
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-soft));
       outline: none;
     }
 
     .wrn-dropdown__item:active {
-      transform: scale(0.985);
+      transform: none;
+      background: color-mix(in srgb, var(--dropdown-accent) 10%, var(--wrn-color-surface-muted, var(--wrn-color-surface-soft)));
     }
 
     .wrn-dropdown__item[data-danger="true"] {
@@ -532,9 +530,9 @@ items: unknown[] = []
 
     .wrn-dropdown__copy strong {
       overflow: hidden;
-      font-size: 0.82rem;
-      font-weight: 600;
-      line-height: 1.3;
+      font-size: 0.8125rem;
+      font-weight: 550;
+      line-height: 1.35;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
@@ -542,29 +540,31 @@ items: unknown[] = []
     .wrn-dropdown__copy small {
       overflow: hidden;
       color: var(--wrn-color-text-muted);
-      font-size: 0.7rem;
+      font-size: 0.72rem;
       line-height: 1.35;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
 
     .wrn-dropdown__badge {
-      padding: 0.18rem 0.45rem;
-      color: var(--dropdown-accent);
+      padding: 0.125rem 0.4rem;
+      color: var(--wrn-color-primary-text, var(--dropdown-accent));
       background: var(--dropdown-soft);
       border-radius: 999px;
-      font-size: 0.64rem;
-      font-weight: 700;
+      font-size: 0.65rem;
+      font-weight: 650;
+      font-variant-numeric: tabular-nums;
     }
 
     .wrn-dropdown kbd {
-      padding: 0.16rem 0.38rem;
-      color: var(--wrn-color-text-muted);
+      padding: 0.125rem 0.35rem;
+      color: var(--wrn-color-text-subtle, var(--wrn-color-text-muted));
       background: var(--wrn-color-surface-soft);
       border: 1px solid var(--wrn-color-border);
-      border-radius: 0.36rem;
-      font-size: 0.64rem;
-      font-family: inherit;
+      border-bottom-width: 2px;
+      border-radius: 0.3rem;
+      font-size: 0.65rem;
+      font-family: var(--wrn-font-mono, monospace);
     }
 
     .wrn-dropdown__empty {
diff --git a/packages/ui/components/FeatureCard.wrn b/packages/ui/components/FeatureCard.wrn
index 398eeb2c..a9519ad1 100644
--- a/packages/ui/components/FeatureCard.wrn
+++ b/packages/ui/components/FeatureCard.wrn
@@ -160,9 +160,7 @@ component FeatureCard {
         var(--wrn-color-surface-raised);
       border: 1px solid var(--feature-border);
       border-radius: 1.25rem;
-      box-shadow:
-        0 1px 0 color-mix(in srgb, white 4%, transparent) inset,
-        0 10px 30px color-mix(in srgb, black 9%, transparent);
+      box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-2);
       transition:
         transform 180ms ease,
         border-color 180ms ease,
@@ -585,14 +583,11 @@ component FeatureCard {
     }
 
     .wrn-feature-card[data-variant="raised"] {
-      box-shadow:
-        0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
-        0 20px 50px color-mix(in srgb, black 17%, transparent);
+      box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
     }
 
     .wrn-feature-card[data-variant="soft"] {
       background:
-        linear-gradient(135deg, var(--feature-accent-soft), transparent 68%),
         var(--wrn-color-surface-raised);
       border-color: color-mix(in srgb, var(--feature-accent) 22%, var(--wrn-color-border));
       box-shadow: none;
@@ -619,10 +614,9 @@ component FeatureCard {
     .wrn-feature-card[data-variant="solid"] {
       color: var(--feature-contrast);
       background:
-        linear-gradient(135deg, color-mix(in srgb, white 9%, transparent), transparent 60%),
         var(--feature-accent);
       border-color: color-mix(in srgb, white 20%, transparent);
-      box-shadow: 0 22px 54px color-mix(in srgb, var(--feature-accent) 28%, transparent);
+      box-shadow: var(--wrn-shadow-3);
     }
 
     .wrn-feature-card[data-variant="solid"] .wrn-feature-card__title,
@@ -653,15 +647,11 @@ component FeatureCard {
     .wrn-feature-card[data-hover="lift"]:not([data-disabled="true"]):hover {
       transform: translateY(-0.3rem);
       border-color: color-mix(in srgb, var(--feature-accent) 48%, var(--wrn-color-border));
-      box-shadow:
-        0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
-        0 24px 58px color-mix(in srgb, black 20%, transparent);
+      box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
     }
 
     .wrn-feature-card[data-hover="shadow"]:not([data-disabled="true"]):hover {
-      box-shadow:
-        0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
-        0 24px 58px color-mix(in srgb, black 20%, transparent);
+      box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
     }
 
     .wrn-feature-card[data-hover="border"]:not([data-disabled="true"]):hover {
@@ -670,7 +660,7 @@ component FeatureCard {
 
     .wrn-feature-card[data-hover="glow"]:not([data-disabled="true"]):hover {
       border-color: color-mix(in srgb, var(--feature-accent) 54%, var(--wrn-color-border));
-      box-shadow: 0 20px 60px color-mix(in srgb, var(--feature-accent) 22%, transparent);
+      box-shadow: var(--wrn-shadow-3);
     }
 
     .wrn-feature-card:not([data-disabled="true"]):hover .wrn-feature-card__image {
diff --git a/packages/ui/components/FeatureGrid.wrn b/packages/ui/components/FeatureGrid.wrn
index a9c0704a..8dce136c 100644
--- a/packages/ui/components/FeatureGrid.wrn
+++ b/packages/ui/components/FeatureGrid.wrn
@@ -296,7 +296,7 @@ component FeatureGrid {
 
         .wrn-component p {
           margin: 0;
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-muted, var(--wrn-color-muted));
           line-height: 1.6;
         }
   }
diff --git a/packages/ui/components/FileInput.wrn b/packages/ui/components/FileInput.wrn
index 52334ffa..e37a0d98 100644
--- a/packages/ui/components/FileInput.wrn
+++ b/packages/ui/components/FileInput.wrn
@@ -59,12 +59,18 @@ size: string = "default"
     .wrn-next__file-control:focus-within { outline:2px solid var(--wrn-color-focus); outline-offset:2px; }
     .wrn-next__file-control {
       position: relative;
-      display:flex; align-items:center; gap:.6rem; min-width:0;
-      min-height: 2.5rem;
-      padding: 0.65rem 0.85rem;
-      border: 1px dashed var(--wrn-color-border);
+      display: flex;
+      align-items: center;
+      gap: .6rem;
+      min-width: 0;
+      min-height: 2.75rem;
+      padding: 0.6rem 0.875rem;
+      border: 1.5px dashed var(--wrn-color-border-strong, var(--wrn-color-border));
       border-radius: var(--wrn-radius-sm);
-      background: var(--wrn-color-surface);
+      background: var(--wrn-color-surface-soft, var(--wrn-color-surface));
+      color: var(--wrn-color-text-muted);
+      font-size: 0.875rem;
+      transition: border-color 120ms ease, background-color 120ms ease;
     }
 
     .wrn-next__file-control input {
@@ -139,7 +145,7 @@ size: string = "default"
 
         .wrn-component p {
           margin: 0;
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-muted, var(--wrn-color-muted));
           line-height: 1.6;
         }
 
@@ -154,8 +160,9 @@ size: string = "default"
           display: block;
           min-height: 1em;
           margin-top: 0.25rem;
-          color: var(--wrn-color-danger);
-          font-size: 0.8rem;
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
+          font-size: 0.78rem;
+          font-weight: 550;
         }
 
         .wrn-next--choice {
@@ -182,13 +189,14 @@ size: string = "default"
           width: 100%;
           min-height: var(--wrn-control-height, 2.5rem);
           padding: 0.5rem 0.75rem;
-          border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-sm, 6px);
+          border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
+          border-radius: var(--wrn-radius-sm, 8px);
           outline: 0;
           color: var(--wrn-color-text);
-          background: var(--wrn-color-bg);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
           font: inherit;
           font-weight: 500;
+          transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
         }
         .wrn-auth-form form > .wrn-next--field,
         .wrn-auth-form form > .wrn-field {
@@ -202,8 +210,8 @@ size: string = "default"
       box-shadow: none;
         }
         .wrn-next--field :where(input, textarea, select):focus-visible {
-          border-color: var(--wrn-color-primary);
-          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
+          border-color: var(--wrn-field-color, var(--wrn-color-primary));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04), 0 0 0 3px color-mix(in srgb, var(--wrn-field-color, var(--wrn-color-primary)) 18%, transparent);
         }
         .wrn-next--field textarea {
           resize: vertical;
@@ -237,12 +245,14 @@ size: string = "default"
           font-size: 0.8125rem;
           font-weight: 600;
           line-height: 1.35;
+          letter-spacing: -0.005em;
         }
         .wrn-next__field-hint,
         .wrn-next__field-help {
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
           font-size: 0.75rem;
-          font-weight: 500;
+          font-weight: 450;
+          line-height: 1.45;
         }
         .wrn-next__field-control {
           position: relative;
@@ -250,10 +260,11 @@ size: string = "default"
         }
         .wrn-next__field-control > :is(input, textarea, select) {
           padding-inline: 0.85rem;
-          border-color: var(--wrn-color-border);
+          border-color: var(--wrn-color-input-border, var(--wrn-color-border));
           border-radius: var(--wrn-radius-sm);
-          background: var(--wrn-color-surface);
-          font-size: 0.8125rem;
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
+          font-size: 0.875rem;
         }
         .wrn-next__field-control[data-has-icon="true"][data-icon-position="start"] > :is(input, textarea, select) {
           padding-inline-start: 2.5rem;
@@ -294,7 +305,8 @@ size: string = "default"
         }
         .wrn-next--field[data-variant="ghost"] .wrn-next__field-control > :is(input, textarea, select) {
           border-color: transparent;
-          background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
+          box-shadow: none;
         }
         .wrn-next__field-floating-label {
           position: absolute;
@@ -335,9 +347,9 @@ size: string = "default"
         }
         .wrn-next__field-error {
           min-height: 1em;
-          color: var(--wrn-color-danger);
-          font-size: 0.82em;
-          font-weight: 600;
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
+          font-size: 0.78rem;
+          font-weight: 550;
         }
         .wrn-next__field-error:empty {
           display: none;
@@ -345,14 +357,16 @@ size: string = "default"
         .wrn-next--field[data-invalid="true"] :is(input, textarea, select),
         .wrn-next--choice-field[data-invalid="true"] input {
           border-color: var(--wrn-color-danger);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-danger) 12%, transparent);
         }
         .wrn-next--field :is(input, textarea, select):disabled,
         .wrn-next--choice-field input:disabled {
           cursor: not-allowed;
-          opacity: 0.58;
+          opacity: 0.55;
+          background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
         }
         .wrn-next--field :is(input, textarea, select):read-only {
-          background: var(--wrn-color-surface-2);
+          background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
         }
         .wrn-next--field[data-inline="true"],
         .wrn-next--choice-field[data-inline="true"] {
@@ -409,11 +423,13 @@ size: string = "default"
           display: flex;
           min-width: 0;
           align-items: center;
-          gap: 0.65rem;
+          gap: 0.625rem;
           color: var(--wrn-color-text);
           width: 100%;
-          font-size: 0.75rem;
+          font-size: 0.875rem;
           font-weight: 500;
+          line-height: 1.4;
+          cursor: pointer;
         }
         .wrn-next__checkbox-content > .wrn-next__choice {
           width: 100%;
@@ -428,12 +444,13 @@ size: string = "default"
         .wrn-next__choice-copy {
           display: grid;
           min-width: 0;
-          gap: 0.15rem;
-          line-height: 1.35;
+          gap: 0.125rem;
+          line-height: 1.4;
         }
         .wrn-next__choice-copy small {
-          color: var(--wrn-color-muted);
-          font-weight: 500;
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+          font-size: 0.78rem;
+          font-weight: 450;
         }
         .wrn-next__radio-group,
         .wrn-next__checkbox-group {
@@ -453,15 +470,18 @@ size: string = "default"
         .wrn-next--radio-field[data-card="true"] .wrn-next--radio,
         .wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox {
           min-height: 4.5rem;
-          padding: 0.85rem;
+          padding: 0.9rem 1rem;
           border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-sm);
+          border-radius: var(--wrn-radius);
           background: var(--wrn-color-surface);
+          box-shadow: var(--wrn-shadow-1);
+          transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
         }
         .wrn-next--radio-field[data-card="true"] .wrn-next--radio:has(input:checked),
         .wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox:has(input:checked) {
           border-color: var(--wrn-field-color);
-          box-shadow: 0 0 0 1px var(--wrn-field-color);
+          background: color-mix(in srgb, var(--wrn-field-color) 5%, var(--wrn-color-surface));
+          box-shadow: 0 0 0 1px var(--wrn-field-color), var(--wrn-shadow-1);
         }
         .wrn-next--radio-field[data-list="true"] .wrn-next--radio,
         .wrn-next--checkbox-field[data-list="true"] .wrn-next--checkbox {
@@ -482,19 +502,21 @@ size: string = "default"
         }
         .wrn-next__choice[data-variant="outlined"],
         .wrn-next__choice[data-variant="floating"] {
-          padding: 0.65rem 0.8rem;
+          padding: 0.7rem 0.85rem;
           border: 1px solid var(--wrn-color-border);
           border-radius: var(--wrn-radius-sm);
+          background: var(--wrn-color-surface);
         }
         .wrn-next__choice[data-variant="pill"] {
-          padding: 0.65rem 1rem;
+          padding: 0.6rem 1rem;
+          border: 1px solid color-mix(in srgb, var(--wrn-field-color) 22%, var(--wrn-color-border));
           border-radius: 999px;
-          background: color-mix(in srgb, var(--wrn-field-color) 9%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface));
         }
         .wrn-next__choice[data-variant="ghost"] {
-          padding: 0.65rem 0.8rem;
+          padding: 0.65rem 0.85rem;
           border-radius: var(--wrn-radius-sm);
-          background: color-mix(in srgb, var(--wrn-field-color) 7%, transparent);
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, transparent);
         }
         .wrn-next__choice[data-variant="underline"] {
           padding-block: 0.5rem;
@@ -528,25 +550,35 @@ size: string = "default"
           align-items: center;
           justify-content: space-between;
           gap: 0.75rem;
-          padding: 0.7rem 0.85rem;
-          border: 1px solid var(--wrn-color-border);
+          padding: 0.55rem 0.85rem;
+          border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
           border-radius: var(--wrn-radius-sm);
-          background: var(--wrn-color-surface);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
           color: var(--wrn-color-text);
           font: inherit;
+          font-size: 0.875rem;
+          font-variant-numeric: tabular-nums;
           text-align: left;
+          cursor: pointer;
+          transition: border-color 120ms ease, box-shadow 120ms ease;
         }
         .wrn-next__calendar,
         .wrn-next__time-panel {
-          z-index: 20;
+          position: absolute;
+          z-index: 40;
+          top: 100%;
+          left: 0;
           display: grid;
-          width: min(100%, 22rem);
+          width: min(calc(100vw - 2rem), 19.5rem);
           gap: 0.75rem;
-          padding: 0.85rem;
+          margin-top: 0.375rem;
+          padding: 0.75rem;
           border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-md);
-          background: var(--wrn-color-surface);
-          box-shadow: var(--wrn-shadow-3);
+          border-radius: var(--wrn-radius);
+          background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
+          box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
+          animation: wrn-popover-enter var(--wrn-motion-base, 160ms) var(--wrn-ease-emphasized, ease) both;
         }
         .wrn-next--date-picker[data-expanded="false"] .wrn-next__calendar,
         .wrn-next--time-picker[data-expanded="false"] .wrn-next__time-panel {
@@ -556,29 +588,42 @@ size: string = "default"
         .wrn-next__time-panel button {
           min-height: 2.25rem;
           border: 0;
-          border-radius: var(--wrn-radius-sm);
+          border-radius: calc(var(--wrn-radius-sm) - 2px);
           background: transparent;
           color: inherit;
+          font: inherit;
+          font-size: 0.8125rem;
+          font-variant-numeric: tabular-nums;
+          cursor: pointer;
+          transition: background-color 120ms ease, color 120ms ease;
         }
         .wrn-next__calendar-weekdays,
         .wrn-next__calendar-grid {
           display: grid;
           grid-template-columns: repeat(7, 1fr);
-          gap: 0.2rem;
+          gap: 0.125rem;
           text-align: center;
         }
         .wrn-next__calendar-weekdays {
-          color: var(--wrn-color-muted);
-          font-size: 0.75rem;
+          padding-bottom: 0.375rem;
+          border-bottom: 1px solid var(--wrn-color-border);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+          font-family: var(--wrn-font-mono, monospace);
+          font-size: 0.625rem;
+          font-weight: 600;
+          letter-spacing: 0.06em;
+          text-transform: uppercase;
         }
         .wrn-next__calendar-grid button:hover,
         .wrn-next__time-panel button:hover {
-          background: var(--wrn-color-surface-2);
+          background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
         }
         .wrn-next__calendar-grid button[aria-pressed="true"],
         .wrn-next__time-panel button[aria-pressed="true"] {
           background: var(--wrn-field-color);
           color: var(--wrn-color-primary-contrast, #fff);
+          box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--wrn-field-color) 35%, transparent);
+          font-weight: 650;
         }
         .wrn-next__time-period {
           display: flex;
@@ -612,7 +657,7 @@ size: string = "default"
         .wrn-next--field[data-variant="ghost"]
           :is(.wrn-next__input-group-control, .wrn-next__file-control, .wrn-next__color-control) {
           border-color: transparent;
-          background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
         }
         @media (max-width: 640px) {
           .wrn-next--field[data-inline="true"],
@@ -634,5 +679,34 @@ size: string = "default"
         .wrn-next--strong-password input.wrn-invalid {
           border-color: var(--wrn-color-danger);
         }
+  
+    .wrn-next__file-control:hover:not(:has(> input:disabled)) {
+      border-color: var(--wrn-field-color);
+      background: color-mix(in srgb, var(--wrn-field-color) 4%, var(--wrn-color-surface));
+    }
+
+    /* The native input only catches clicks. The shared field rules give
+       :disabled inputs opacity 0.55, which exposed its "Choose File / No file
+       chosen" text over the label, so keep it invisible in every state. */
+    .wrn-next--file-input .wrn-next__file-control > input[type="file"]:is(:enabled, :disabled) {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      min-height: 0;
+      padding: 0;
+      border: 0;
+      opacity: 0;
+      cursor: pointer;
+    }
+    .wrn-next--file-input .wrn-next__file-control:has(> input:disabled) {
+      border-style: solid;
+      border-color: var(--wrn-color-border);
+      background: var(--wrn-color-surface-soft);
+      color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+      opacity: 0.7;
+      cursor: not-allowed;
+    }
+    .wrn-next--file-input .wrn-next__file-control > input[type="file"]:disabled { cursor: not-allowed; }
   }
 }
diff --git a/packages/ui/components/FileUploadProgress.wrn b/packages/ui/components/FileUploadProgress.wrn
index 110c55d1..d863ae43 100644
--- a/packages/ui/components/FileUploadProgress.wrn
+++ b/packages/ui/components/FileUploadProgress.wrn
@@ -32,7 +32,7 @@ size: string = "default"
   }
   view {
     <div {...attrs} class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--file-upload-progress {class}" data-status="{currentStatus}" aria-live="polite">
-      <div class="wrn-next__row"><span>{#if fileName}<strong>{fileName}</strong><small>{#if uploadedSize || fileSize}{uploadedSize}{#if uploadedSize && fileSize} of {/if}{fileSize}{:else}{label}{/if}</small>{:else}<strong>{label}</strong>{/if}</span>{#if showValue}<strong>{percent()}%</strong>{/if}</div>
+      <div class="wrn-next__row"><span class="wrn-next__upload-file" aria-hidden="true"></span><span class="wrn-next__upload-info">{#if fileName}<strong>{fileName}</strong><small>{#if uploadedSize || fileSize}{uploadedSize}{#if uploadedSize && fileSize} of {/if}{fileSize}{:else}{label}{/if}</small>{:else}<strong>{label}</strong>{/if}</span>{#if showValue}<strong>{percent()}%</strong>{/if}</div>
       <progress value="{currentValue}" max="{max}" aria-label="{label}"></progress>
       <div class="wrn-next__upload-status"><span class="wrn-next__upload-status-icon" aria-hidden="true"></span><span>{#if currentStatus === "uploading"}Uploading securely…{:else if currentStatus === "complete"}Upload complete{:else if currentStatus === "error"}Upload failed{:else}Upload cancelled{/if}</span></div>
       <div class="wrn-next__upload-actions">{#if currentStatus === "uploading"}<button type="button" @click="cancelUpload(event)">{cancelLabel}</button>{#if showCompleteAction}<button type="button" @click="completeUpload(event)">Complete</button>{/if}{/if}{#if currentStatus === "error" || currentStatus === "cancelled"}<button type="button" @click="retryUpload(event)">{retryLabel}</button>{/if}</div>
@@ -56,9 +56,9 @@ size: string = "default"
       display: grid;
       width: min(100%, 36rem);
       gap: 0.75rem;
-      padding: 1rem;
+      padding: 1rem 1.125rem;
       border: 1px solid var(--wrn-color-border);
-      border-radius: var(--wrn-radius-md);
+      border-radius: var(--wrn-radius);
       background: var(--wrn-color-surface);
       box-shadow: var(--wrn-shadow-1);
     }
@@ -77,12 +77,18 @@ size: string = "default"
     }
 
     .wrn-next__upload-actions button {
-      min-height: 2.25rem;
-      padding-inline: 0.8rem;
+      min-height: 2rem;
+      padding-inline: 0.75rem;
       border: 1px solid var(--wrn-color-border);
+      border-bottom-color: var(--wrn-color-border-strong, var(--wrn-color-border));
       border-radius: var(--wrn-radius-sm);
-      background: var(--wrn-color-surface-2);
+      background: linear-gradient(180deg, var(--wrn-color-surface), var(--wrn-color-surface-soft, var(--wrn-color-surface)));
+      box-shadow: var(--wrn-shadow-1);
       color: inherit;
+      font: inherit;
+      font-size: 0.8125rem;
+      font-weight: 550;
+      cursor: pointer;
     }
 
     /* Shared component foundation. */
@@ -150,7 +156,7 @@ size: string = "default"
 
         .wrn-component p {
           margin: 0;
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-muted, var(--wrn-color-muted));
           line-height: 1.6;
         }
 
@@ -165,8 +171,9 @@ size: string = "default"
           display: block;
           min-height: 1em;
           margin-top: 0.25rem;
-          color: var(--wrn-color-danger);
-          font-size: 0.8rem;
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
+          font-size: 0.78rem;
+          font-weight: 550;
         }
 
         .wrn-next--choice {
@@ -193,13 +200,14 @@ size: string = "default"
           width: 100%;
           min-height: var(--wrn-control-height, 2.5rem);
           padding: 0.5rem 0.75rem;
-          border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-sm, 6px);
+          border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
+          border-radius: var(--wrn-radius-sm, 8px);
           outline: 0;
           color: var(--wrn-color-text);
-          background: var(--wrn-color-bg);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
           font: inherit;
           font-weight: 500;
+          transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
         }
         .wrn-auth-form form > .wrn-next--field,
         .wrn-auth-form form > .wrn-field {
@@ -213,8 +221,8 @@ size: string = "default"
       box-shadow: none;
         }
         .wrn-next--field :where(input, textarea, select):focus-visible {
-          border-color: var(--wrn-color-primary);
-          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
+          border-color: var(--wrn-field-color, var(--wrn-color-primary));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04), 0 0 0 3px color-mix(in srgb, var(--wrn-field-color, var(--wrn-color-primary)) 18%, transparent);
         }
         .wrn-next--field textarea {
           resize: vertical;
@@ -248,12 +256,14 @@ size: string = "default"
           font-size: 0.8125rem;
           font-weight: 600;
           line-height: 1.35;
+          letter-spacing: -0.005em;
         }
         .wrn-next__field-hint,
         .wrn-next__field-help {
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
           font-size: 0.75rem;
-          font-weight: 500;
+          font-weight: 450;
+          line-height: 1.45;
         }
         .wrn-next__field-control {
           position: relative;
@@ -261,10 +271,11 @@ size: string = "default"
         }
         .wrn-next__field-control > :is(input, textarea, select) {
           padding-inline: 0.85rem;
-          border-color: var(--wrn-color-border);
+          border-color: var(--wrn-color-input-border, var(--wrn-color-border));
           border-radius: var(--wrn-radius-sm);
-          background: var(--wrn-color-surface);
-          font-size: 0.8125rem;
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
+          font-size: 0.875rem;
         }
         .wrn-next__field-control[data-has-icon="true"][data-icon-position="start"] > :is(input, textarea, select) {
           padding-inline-start: 2.5rem;
@@ -305,7 +316,8 @@ size: string = "default"
         }
         .wrn-next--field[data-variant="ghost"] .wrn-next__field-control > :is(input, textarea, select) {
           border-color: transparent;
-          background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
+          box-shadow: none;
         }
         .wrn-next__field-floating-label {
           position: absolute;
@@ -346,9 +358,9 @@ size: string = "default"
         }
         .wrn-next__field-error {
           min-height: 1em;
-          color: var(--wrn-color-danger);
-          font-size: 0.82em;
-          font-weight: 600;
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
+          font-size: 0.78rem;
+          font-weight: 550;
         }
         .wrn-next__field-error:empty {
           display: none;
@@ -356,14 +368,16 @@ size: string = "default"
         .wrn-next--field[data-invalid="true"] :is(input, textarea, select),
         .wrn-next--choice-field[data-invalid="true"] input {
           border-color: var(--wrn-color-danger);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-danger) 12%, transparent);
         }
         .wrn-next--field :is(input, textarea, select):disabled,
         .wrn-next--choice-field input:disabled {
           cursor: not-allowed;
-          opacity: 0.58;
+          opacity: 0.55;
+          background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
         }
         .wrn-next--field :is(input, textarea, select):read-only {
-          background: var(--wrn-color-surface-2);
+          background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
         }
         .wrn-next--field[data-inline="true"],
         .wrn-next--choice-field[data-inline="true"] {
@@ -420,11 +434,13 @@ size: string = "default"
           display: flex;
           min-width: 0;
           align-items: center;
-          gap: 0.65rem;
+          gap: 0.625rem;
           color: var(--wrn-color-text);
           width: 100%;
-          font-size: 0.75rem;
+          font-size: 0.875rem;
           font-weight: 500;
+          line-height: 1.4;
+          cursor: pointer;
         }
         .wrn-next__checkbox-content > .wrn-next__choice {
           width: 100%;
@@ -439,12 +455,13 @@ size: string = "default"
         .wrn-next__choice-copy {
           display: grid;
           min-width: 0;
-          gap: 0.15rem;
-          line-height: 1.35;
+          gap: 0.125rem;
+          line-height: 1.4;
         }
         .wrn-next__choice-copy small {
-          color: var(--wrn-color-muted);
-          font-weight: 500;
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+          font-size: 0.78rem;
+          font-weight: 450;
         }
         .wrn-next__radio-group,
         .wrn-next__checkbox-group {
@@ -464,15 +481,18 @@ size: string = "default"
         .wrn-next--radio-field[data-card="true"] .wrn-next--radio,
         .wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox {
           min-height: 4.5rem;
-          padding: 0.85rem;
+          padding: 0.9rem 1rem;
           border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-sm);
+          border-radius: var(--wrn-radius);
           background: var(--wrn-color-surface);
+          box-shadow: var(--wrn-shadow-1);
+          transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
         }
         .wrn-next--radio-field[data-card="true"] .wrn-next--radio:has(input:checked),
         .wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox:has(input:checked) {
           border-color: var(--wrn-field-color);
-          box-shadow: 0 0 0 1px var(--wrn-field-color);
+          background: color-mix(in srgb, var(--wrn-field-color) 5%, var(--wrn-color-surface));
+          box-shadow: 0 0 0 1px var(--wrn-field-color), var(--wrn-shadow-1);
         }
         .wrn-next--radio-field[data-list="true"] .wrn-next--radio,
         .wrn-next--checkbox-field[data-list="true"] .wrn-next--checkbox {
@@ -493,19 +513,21 @@ size: string = "default"
         }
         .wrn-next__choice[data-variant="outlined"],
         .wrn-next__choice[data-variant="floating"] {
-          padding: 0.65rem 0.8rem;
+          padding: 0.7rem 0.85rem;
           border: 1px solid var(--wrn-color-border);
           border-radius: var(--wrn-radius-sm);
+          background: var(--wrn-color-surface);
         }
         .wrn-next__choice[data-variant="pill"] {
-          padding: 0.65rem 1rem;
+          padding: 0.6rem 1rem;
+          border: 1px solid color-mix(in srgb, var(--wrn-field-color) 22%, var(--wrn-color-border));
           border-radius: 999px;
-          background: color-mix(in srgb, var(--wrn-field-color) 9%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface));
         }
         .wrn-next__choice[data-variant="ghost"] {
-          padding: 0.65rem 0.8rem;
+          padding: 0.65rem 0.85rem;
           border-radius: var(--wrn-radius-sm);
-          background: color-mix(in srgb, var(--wrn-field-color) 7%, transparent);
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, transparent);
         }
         .wrn-next__choice[data-variant="underline"] {
           padding-block: 0.5rem;
@@ -539,25 +561,35 @@ size: string = "default"
           align-items: center;
           justify-content: space-between;
           gap: 0.75rem;
-          padding: 0.7rem 0.85rem;
-          border: 1px solid var(--wrn-color-border);
+          padding: 0.55rem 0.85rem;
+          border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
           border-radius: var(--wrn-radius-sm);
-          background: var(--wrn-color-surface);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
           color: var(--wrn-color-text);
           font: inherit;
+          font-size: 0.875rem;
+          font-variant-numeric: tabular-nums;
           text-align: left;
+          cursor: pointer;
+          transition: border-color 120ms ease, box-shadow 120ms ease;
         }
         .wrn-next__calendar,
         .wrn-next__time-panel {
-          z-index: 20;
+          position: absolute;
+          z-index: 40;
+          top: 100%;
+          left: 0;
           display: grid;
-          width: min(100%, 22rem);
+          width: min(calc(100vw - 2rem), 19.5rem);
           gap: 0.75rem;
-          padding: 0.85rem;
+          margin-top: 0.375rem;
+          padding: 0.75rem;
           border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-md);
-          background: var(--wrn-color-surface);
-          box-shadow: var(--wrn-shadow-3);
+          border-radius: var(--wrn-radius);
+          background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
+          box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
+          animation: wrn-popover-enter var(--wrn-motion-base, 160ms) var(--wrn-ease-emphasized, ease) both;
         }
         .wrn-next--date-picker[data-expanded="false"] .wrn-next__calendar,
         .wrn-next--time-picker[data-expanded="false"] .wrn-next__time-panel {
@@ -567,29 +599,42 @@ size: string = "default"
         .wrn-next__time-panel button {
           min-height: 2.25rem;
           border: 0;
-          border-radius: var(--wrn-radius-sm);
+          border-radius: calc(var(--wrn-radius-sm) - 2px);
           background: transparent;
           color: inherit;
+          font: inherit;
+          font-size: 0.8125rem;
+          font-variant-numeric: tabular-nums;
+          cursor: pointer;
+          transition: background-color 120ms ease, color 120ms ease;
         }
         .wrn-next__calendar-weekdays,
         .wrn-next__calendar-grid {
           display: grid;
           grid-template-columns: repeat(7, 1fr);
-          gap: 0.2rem;
+          gap: 0.125rem;
           text-align: center;
         }
         .wrn-next__calendar-weekdays {
-          color: var(--wrn-color-muted);
-          font-size: 0.75rem;
+          padding-bottom: 0.375rem;
+          border-bottom: 1px solid var(--wrn-color-border);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+          font-family: var(--wrn-font-mono, monospace);
+          font-size: 0.625rem;
+          font-weight: 600;
+          letter-spacing: 0.06em;
+          text-transform: uppercase;
         }
         .wrn-next__calendar-grid button:hover,
         .wrn-next__time-panel button:hover {
-          background: var(--wrn-color-surface-2);
+          background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
         }
         .wrn-next__calendar-grid button[aria-pressed="true"],
         .wrn-next__time-panel button[aria-pressed="true"] {
           background: var(--wrn-field-color);
           color: var(--wrn-color-primary-contrast, #fff);
+          box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--wrn-field-color) 35%, transparent);
+          font-weight: 650;
         }
         .wrn-next__time-period {
           display: flex;
@@ -623,7 +668,7 @@ size: string = "default"
         .wrn-next--field[data-variant="ghost"]
           :is(.wrn-next__input-group-control, .wrn-next__file-control, .wrn-next__color-control) {
           border-color: transparent;
-          background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
         }
         @media (max-width: 640px) {
           .wrn-next--field[data-inline="true"],
@@ -645,5 +690,131 @@ size: string = "default"
         .wrn-next--strong-password input.wrn-invalid {
           border-color: var(--wrn-color-danger);
         }
+
+    /* --- Upload card --------------------------------------------------------
+       Scoped by data-status so these win over the shared foundation copies
+       that other field components also ship. */
+    .wrn-next--file-upload-progress[data-status] {
+      --wrn-upload-color: var(--wrn-component-color, var(--wrn-color-primary));
+      gap: 0.625rem;
+      padding: 0.875rem 1rem;
+    }
+    .wrn-next--file-upload-progress[data-status="complete"] { --wrn-upload-color: var(--wrn-color-success); }
+    .wrn-next--file-upload-progress[data-status="error"] { --wrn-upload-color: var(--wrn-color-danger); }
+    .wrn-next--file-upload-progress[data-status="cancelled"] { --wrn-upload-color: var(--wrn-color-text-subtle, var(--wrn-color-muted)); }
+
+    .wrn-next--file-upload-progress[data-status] .wrn-next__row {
+      justify-content: flex-start;
+      gap: 0.75rem;
+    }
+    .wrn-next__upload-file {
+      position: relative;
+      display: inline-grid;
+      flex: none;
+      width: 2.25rem;
+      height: 2.25rem;
+      place-items: center;
+      border: 1px solid color-mix(in srgb, var(--wrn-upload-color) 20%, var(--wrn-color-border));
+      border-radius: var(--wrn-radius-sm);
+      background: color-mix(in srgb, var(--wrn-upload-color) 9%, var(--wrn-color-surface));
+      color: var(--wrn-upload-color);
+    }
+    .wrn-next__upload-file::after {
+      width: 1.125rem;
+      height: 1.125rem;
+      background: currentColor;
+      content: "";
+      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E") center / contain no-repeat;
+      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E") center / contain no-repeat;
+    }
+    .wrn-next--file-upload-progress[data-status] .wrn-next__upload-info {
+      display: grid;
+      flex: 1;
+      min-width: 0;
+      gap: 0.125rem;
+    }
+    .wrn-next__upload-info strong {
+      overflow: hidden;
+      color: var(--wrn-color-text);
+      font-size: 0.875rem;
+      font-weight: 600;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .wrn-next__upload-info small {
+      color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+      font-size: 0.75rem;
+      font-variant-numeric: tabular-nums;
+    }
+    .wrn-next--file-upload-progress[data-status] .wrn-next__row > strong {
+      flex: none;
+      color: var(--wrn-color-text-muted);
+      font-family: var(--wrn-font-mono, monospace);
+      font-size: 0.75rem;
+      font-weight: 600;
+      font-variant-numeric: tabular-nums;
+    }
+
+    .wrn-next--file-upload-progress[data-status] progress {
+      appearance: none;
+      width: 100%;
+      height: 0.375rem;
+      overflow: hidden;
+      border: 0;
+      border-radius: 999px;
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
+      box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.08);
+    }
+    .wrn-next--file-upload-progress[data-status] progress::-webkit-progress-bar {
+      border-radius: 999px;
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
+    }
+    .wrn-next--file-upload-progress[data-status] progress::-webkit-progress-value {
+      border-radius: 999px;
+      background: linear-gradient(180deg, color-mix(in srgb, var(--wrn-upload-color) 88%, white), var(--wrn-upload-color));
+      transition: width var(--wrn-motion-slow) var(--wrn-ease-emphasized);
+    }
+    .wrn-next--file-upload-progress[data-status] progress::-moz-progress-bar {
+      border-radius: 999px;
+      background: var(--wrn-upload-color);
+    }
+
+    .wrn-next__upload-status {
+      display: flex;
+      align-items: center;
+      gap: 0.4rem;
+      color: var(--wrn-color-text-muted);
+      font-size: 0.78rem;
+    }
+    .wrn-next__upload-status-icon {
+      width: 0.5rem;
+      height: 0.5rem;
+      flex: none;
+      border-radius: 999px;
+      background: var(--wrn-upload-color);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-upload-color) 18%, transparent);
+    }
+    .wrn-next--file-upload-progress[data-status="uploading"] .wrn-next__upload-status-icon {
+      animation: wrn-upload-pulse 1.4s ease-in-out infinite;
+    }
+    .wrn-next--file-upload-progress[data-status="error"] .wrn-next__upload-status {
+      color: var(--wrn-color-danger-text, var(--wrn-color-danger));
+    }
+    .wrn-next--file-upload-progress[data-status="complete"] .wrn-next__upload-status {
+      color: var(--wrn-color-success-text, var(--wrn-color-success));
+    }
+    .wrn-next--file-upload-progress[data-status] .wrn-next__upload-actions {
+      justify-content: flex-end;
+      margin-top: -1.75rem;
+    }
+    .wrn-next--file-upload-progress[data-status] .wrn-next__upload-actions:empty {
+      display: none;
+    }
+    @keyframes wrn-upload-pulse {
+      50% { opacity: 0.35; }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .wrn-next--file-upload-progress[data-status="uploading"] .wrn-next__upload-status-icon { animation: none; }
+    }
   }
 }
diff --git a/packages/ui/components/Hero.wrn b/packages/ui/components/Hero.wrn
index d2ed7afa..cdd3c82a 100644
--- a/packages/ui/components/Hero.wrn
+++ b/packages/ui/components/Hero.wrn
@@ -325,7 +325,6 @@ component Hero {
 
     .wrn-hero[data-variant="soft"] {
       background:
-        linear-gradient(135deg, var(--wrn-hero-accent-soft), transparent 58%),
         var(--wrn-color-surface-raised);
       border-color: var(--wrn-color-border);
     }
diff --git a/packages/ui/components/InputGroup.wrn b/packages/ui/components/InputGroup.wrn
index 89fd670a..13ef678d 100644
--- a/packages/ui/components/InputGroup.wrn
+++ b/packages/ui/components/InputGroup.wrn
@@ -57,9 +57,11 @@ component InputGroup {
     .wrn-next__input-group-control > .wrn-next__field-icon[data-position="end"] { order:2; margin-inline:0 .75rem; }
     .wrn-next__input-group-control {
       overflow: hidden;
-      border: 1px solid var(--wrn-color-border);
+      border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
       border-radius: var(--wrn-radius-sm);
-      background: var(--wrn-color-surface);
+      background: var(--wrn-color-input-background, var(--wrn-color-surface));
+      box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
+      transition: border-color 120ms ease, box-shadow 120ms ease;
     }
 
     .wrn-next__input-group-control input {
@@ -71,17 +73,23 @@ component InputGroup {
 
     .wrn-next__input-addon,
     .wrn-next__input-group-control button {
-      padding: 0.7rem 0.85rem;
+      padding: 0 0.85rem;
       white-space: nowrap;
+      align-self: stretch;
+      display: inline-flex;
+      align-items: center;
     }
 
     .wrn-next__input-group-control button {
       align-self: stretch;
       border: 0;
-      background: var(--wrn-field-color);
+      border-left: 1px solid color-mix(in srgb, var(--wrn-field-color) 70%, black);
+      background: linear-gradient(180deg, color-mix(in srgb, var(--wrn-field-color) 92%, white), var(--wrn-field-color));
+      box-shadow: var(--wrn-highlight-edge, none);
       color: var(--wrn-color-primary-contrast, #fff);
       font: inherit;
-      font-weight: 700;
+      font-size: 0.8125rem;
+      font-weight: 600;
       cursor: pointer;
     }
 
@@ -150,7 +158,7 @@ component InputGroup {
 
         .wrn-component p {
           margin: 0;
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-muted, var(--wrn-color-muted));
           line-height: 1.6;
         }
 
@@ -165,8 +173,9 @@ component InputGroup {
           display: block;
           min-height: 1em;
           margin-top: 0.25rem;
-          color: var(--wrn-color-danger);
-          font-size: 0.8rem;
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
+          font-size: 0.78rem;
+          font-weight: 550;
         }
 
         .wrn-next--choice {
@@ -193,13 +202,14 @@ component InputGroup {
           width: 100%;
           min-height: var(--wrn-control-height, 2.5rem);
           padding: 0.5rem 0.75rem;
-          border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-sm, 6px);
+          border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
+          border-radius: var(--wrn-radius-sm, 8px);
           outline: 0;
           color: var(--wrn-color-text);
-          background: var(--wrn-color-bg);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
           font: inherit;
           font-weight: 500;
+          transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
         }
         .wrn-auth-form form > .wrn-next--field,
         .wrn-auth-form form > .wrn-field {
@@ -213,8 +223,8 @@ component InputGroup {
       box-shadow: none;
         }
         .wrn-next--field :where(input, textarea, select):focus-visible {
-          border-color: var(--wrn-color-primary);
-          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
+          border-color: var(--wrn-field-color, var(--wrn-color-primary));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04), 0 0 0 3px color-mix(in srgb, var(--wrn-field-color, var(--wrn-color-primary)) 18%, transparent);
         }
         .wrn-next--field textarea {
           resize: vertical;
@@ -248,12 +258,14 @@ component InputGroup {
           font-size: 0.8125rem;
           font-weight: 600;
           line-height: 1.35;
+          letter-spacing: -0.005em;
         }
         .wrn-next__field-hint,
         .wrn-next__field-help {
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
           font-size: 0.75rem;
-          font-weight: 500;
+          font-weight: 450;
+          line-height: 1.45;
         }
         .wrn-next__field-control {
           position: relative;
@@ -261,10 +273,11 @@ component InputGroup {
         }
         .wrn-next__field-control > :is(input, textarea, select) {
           padding-inline: 0.85rem;
-          border-color: var(--wrn-color-border);
+          border-color: var(--wrn-color-input-border, var(--wrn-color-border));
           border-radius: var(--wrn-radius-sm);
-          background: var(--wrn-color-surface);
-          font-size: 0.8125rem;
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
+          font-size: 0.875rem;
         }
         .wrn-next__field-control[data-has-icon="true"][data-icon-position="start"] > :is(input, textarea, select) {
           padding-inline-start: 2.5rem;
@@ -305,7 +318,8 @@ component InputGroup {
         }
         .wrn-next--field[data-variant="ghost"] .wrn-next__field-control > :is(input, textarea, select) {
           border-color: transparent;
-          background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
+          box-shadow: none;
         }
         .wrn-next__field-floating-label {
           position: absolute;
@@ -346,9 +360,9 @@ component InputGroup {
         }
         .wrn-next__field-error {
           min-height: 1em;
-          color: var(--wrn-color-danger);
-          font-size: 0.82em;
-          font-weight: 600;
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
+          font-size: 0.78rem;
+          font-weight: 550;
         }
         .wrn-next__field-error:empty {
           display: none;
@@ -356,14 +370,16 @@ component InputGroup {
         .wrn-next--field[data-invalid="true"] :is(input, textarea, select),
         .wrn-next--choice-field[data-invalid="true"] input {
           border-color: var(--wrn-color-danger);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-danger) 12%, transparent);
         }
         .wrn-next--field :is(input, textarea, select):disabled,
         .wrn-next--choice-field input:disabled {
           cursor: not-allowed;
-          opacity: 0.58;
+          opacity: 0.55;
+          background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
         }
         .wrn-next--field :is(input, textarea, select):read-only {
-          background: var(--wrn-color-surface-2);
+          background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
         }
         .wrn-next--field[data-inline="true"],
         .wrn-next--choice-field[data-inline="true"] {
@@ -420,11 +436,13 @@ component InputGroup {
           display: flex;
           min-width: 0;
           align-items: center;
-          gap: 0.65rem;
+          gap: 0.625rem;
           color: var(--wrn-color-text);
           width: 100%;
-          font-size: 0.75rem;
+          font-size: 0.875rem;
           font-weight: 500;
+          line-height: 1.4;
+          cursor: pointer;
         }
         .wrn-next__checkbox-content > .wrn-next__choice {
           width: 100%;
@@ -439,12 +457,13 @@ component InputGroup {
         .wrn-next__choice-copy {
           display: grid;
           min-width: 0;
-          gap: 0.15rem;
-          line-height: 1.35;
+          gap: 0.125rem;
+          line-height: 1.4;
         }
         .wrn-next__choice-copy small {
-          color: var(--wrn-color-muted);
-          font-weight: 500;
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+          font-size: 0.78rem;
+          font-weight: 450;
         }
         .wrn-next__radio-group,
         .wrn-next__checkbox-group {
@@ -464,15 +483,18 @@ component InputGroup {
         .wrn-next--radio-field[data-card="true"] .wrn-next--radio,
         .wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox {
           min-height: 4.5rem;
-          padding: 0.85rem;
+          padding: 0.9rem 1rem;
           border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-sm);
+          border-radius: var(--wrn-radius);
           background: var(--wrn-color-surface);
+          box-shadow: var(--wrn-shadow-1);
+          transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
         }
         .wrn-next--radio-field[data-card="true"] .wrn-next--radio:has(input:checked),
         .wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox:has(input:checked) {
           border-color: var(--wrn-field-color);
-          box-shadow: 0 0 0 1px var(--wrn-field-color);
+          background: color-mix(in srgb, var(--wrn-field-color) 5%, var(--wrn-color-surface));
+          box-shadow: 0 0 0 1px var(--wrn-field-color), var(--wrn-shadow-1);
         }
         .wrn-next--radio-field[data-list="true"] .wrn-next--radio,
         .wrn-next--checkbox-field[data-list="true"] .wrn-next--checkbox {
@@ -493,19 +515,21 @@ component InputGroup {
         }
         .wrn-next__choice[data-variant="outlined"],
         .wrn-next__choice[data-variant="floating"] {
-          padding: 0.65rem 0.8rem;
+          padding: 0.7rem 0.85rem;
           border: 1px solid var(--wrn-color-border);
           border-radius: var(--wrn-radius-sm);
+          background: var(--wrn-color-surface);
         }
         .wrn-next__choice[data-variant="pill"] {
-          padding: 0.65rem 1rem;
+          padding: 0.6rem 1rem;
+          border: 1px solid color-mix(in srgb, var(--wrn-field-color) 22%, var(--wrn-color-border));
           border-radius: 999px;
-          background: color-mix(in srgb, var(--wrn-field-color) 9%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface));
         }
         .wrn-next__choice[data-variant="ghost"] {
-          padding: 0.65rem 0.8rem;
+          padding: 0.65rem 0.85rem;
           border-radius: var(--wrn-radius-sm);
-          background: color-mix(in srgb, var(--wrn-field-color) 7%, transparent);
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, transparent);
         }
         .wrn-next__choice[data-variant="underline"] {
           padding-block: 0.5rem;
@@ -539,25 +563,35 @@ component InputGroup {
           align-items: center;
           justify-content: space-between;
           gap: 0.75rem;
-          padding: 0.7rem 0.85rem;
-          border: 1px solid var(--wrn-color-border);
+          padding: 0.55rem 0.85rem;
+          border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
           border-radius: var(--wrn-radius-sm);
-          background: var(--wrn-color-surface);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
           color: var(--wrn-color-text);
           font: inherit;
+          font-size: 0.875rem;
+          font-variant-numeric: tabular-nums;
           text-align: left;
+          cursor: pointer;
+          transition: border-color 120ms ease, box-shadow 120ms ease;
         }
         .wrn-next__calendar,
         .wrn-next__time-panel {
-          z-index: 20;
+          position: absolute;
+          z-index: 40;
+          top: 100%;
+          left: 0;
           display: grid;
-          width: min(100%, 22rem);
+          width: min(calc(100vw - 2rem), 19.5rem);
           gap: 0.75rem;
-          padding: 0.85rem;
+          margin-top: 0.375rem;
+          padding: 0.75rem;
           border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-md);
-          background: var(--wrn-color-surface);
-          box-shadow: var(--wrn-shadow-3);
+          border-radius: var(--wrn-radius);
+          background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
+          box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
+          animation: wrn-popover-enter var(--wrn-motion-base, 160ms) var(--wrn-ease-emphasized, ease) both;
         }
         .wrn-next--date-picker[data-expanded="false"] .wrn-next__calendar,
         .wrn-next--time-picker[data-expanded="false"] .wrn-next__time-panel {
@@ -567,29 +601,42 @@ component InputGroup {
         .wrn-next__time-panel button {
           min-height: 2.25rem;
           border: 0;
-          border-radius: var(--wrn-radius-sm);
+          border-radius: calc(var(--wrn-radius-sm) - 2px);
           background: transparent;
           color: inherit;
+          font: inherit;
+          font-size: 0.8125rem;
+          font-variant-numeric: tabular-nums;
+          cursor: pointer;
+          transition: background-color 120ms ease, color 120ms ease;
         }
         .wrn-next__calendar-weekdays,
         .wrn-next__calendar-grid {
           display: grid;
           grid-template-columns: repeat(7, 1fr);
-          gap: 0.2rem;
+          gap: 0.125rem;
           text-align: center;
         }
         .wrn-next__calendar-weekdays {
-          color: var(--wrn-color-muted);
-          font-size: 0.75rem;
+          padding-bottom: 0.375rem;
+          border-bottom: 1px solid var(--wrn-color-border);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+          font-family: var(--wrn-font-mono, monospace);
+          font-size: 0.625rem;
+          font-weight: 600;
+          letter-spacing: 0.06em;
+          text-transform: uppercase;
         }
         .wrn-next__calendar-grid button:hover,
         .wrn-next__time-panel button:hover {
-          background: var(--wrn-color-surface-2);
+          background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
         }
         .wrn-next__calendar-grid button[aria-pressed="true"],
         .wrn-next__time-panel button[aria-pressed="true"] {
           background: var(--wrn-field-color);
           color: var(--wrn-color-primary-contrast, #fff);
+          box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--wrn-field-color) 35%, transparent);
+          font-weight: 650;
         }
         .wrn-next__time-period {
           display: flex;
@@ -623,7 +670,7 @@ component InputGroup {
         .wrn-next--field[data-variant="ghost"]
           :is(.wrn-next__input-group-control, .wrn-next__file-control, .wrn-next__color-control) {
           border-color: transparent;
-          background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
         }
         @media (max-width: 640px) {
           .wrn-next--field[data-inline="true"],
@@ -645,5 +692,25 @@ component InputGroup {
         .wrn-next--strong-password input.wrn-invalid {
           border-color: var(--wrn-color-danger);
         }
+  
+    .wrn-next__input-addon {
+      color: var(--wrn-color-text-muted);
+      background: var(--wrn-color-surface-soft);
+      font-size: 0.8125rem;
+      border-inline: 1px solid var(--wrn-color-border);
+    }
+  
+    .wrn-next__input-addon:first-child {
+      border-inline-start: 0;
+    }
+  
+    .wrn-next__input-addon:last-child {
+      border-inline-end: 0;
+    }
+  
+    .wrn-next__input-group-control:focus-within {
+      border-color: var(--wrn-field-color);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-field-color) 18%, transparent);
+    }
   }
 }
diff --git a/packages/ui/components/InputNumber.wrn b/packages/ui/components/InputNumber.wrn
index 7e506411..94a6485d 100644
--- a/packages/ui/components/InputNumber.wrn
+++ b/packages/ui/components/InputNumber.wrn
@@ -630,10 +630,29 @@ component InputNumber {
         .wrn-input-number[data-full-width="true"] { max-width: none; }
         .wrn-input-number[data-variant="compact"] { width: fit-content; max-width: 100%; }
         .wrn-input-number[data-disabled="true"] { opacity: 0.6; }
-        .wrn-input-number__label { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--wrn-color-text); font-size: 0.875rem; font-weight: 600; line-height: 1.25rem; }
+        .wrn-input-number__label {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.25rem;
+          color: var(--wrn-color-text);
+          font-size: 0.8125rem;
+          font-weight: 600;
+          line-height: 1.25rem;
+        }
         .wrn-input-number__required { margin-left: 0.125rem; color: var(--wrn-color-danger); }
         .wrn-input-number__description, .wrn-input-number__message { margin: 0; color: var(--wrn-color-muted); font-size: 0.75rem; line-height: 1.25rem; }
-        .wrn-input-number__control { display: flex; min-width: 0; min-height: 2.5rem; overflow: hidden; border: 1px solid var(--wrn-color-border); border-radius: var(--wrn-radius-sm); color: var(--wrn-color-text); background: var(--wrn-color-surface); box-shadow: var(--wrn-shadow-1); transition: border-color var(--wrn-motion-base), box-shadow var(--wrn-motion-base), background var(--wrn-motion-base); }
+        .wrn-input-number__control {
+          display: flex;
+          min-width: 0;
+          min-height: 2.5rem;
+          overflow: hidden;
+          border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
+          border-radius: var(--wrn-radius-sm);
+          color: var(--wrn-color-text);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
+          transition: border-color var(--wrn-motion-base), box-shadow var(--wrn-motion-base), background var(--wrn-motion-base);
+        }
         .wrn-input-number__control:focus-within { border-color: var(--input-number-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--input-number-accent) 18%, transparent); }
         .wrn-input-number[data-invalid="true"] .wrn-input-number__control { border-color: var(--wrn-color-danger); }
         .wrn-input-number[data-invalid="true"] .wrn-input-number__control:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-danger) 18%, transparent); }
@@ -658,21 +677,56 @@ component InputNumber {
         .wrn-input-number[data-variant="seat"] .wrn-input-number__field { width: auto; flex: none; }
         .wrn-input-number__prefix, .wrn-input-number__suffix { flex: none; color: var(--wrn-color-muted); }
         .wrn-input-number__prefix { padding-right: 0.375rem; } .wrn-input-number__suffix { padding-left: 0.375rem; }
-        .wrn-input-number__input { width: 100%; min-width: 0; flex: 1; padding: 0; border: 0; outline: none; color: var(--wrn-color-text); background: transparent; font: inherit; font-weight: 500; line-height: 1; appearance: textfield; }
+        .wrn-input-number__input {
+          width: 100%;
+          min-width: 0;
+          flex: 1;
+          padding: 0;
+          border: 0;
+          outline: none;
+          color: var(--wrn-color-text);
+          background: transparent;
+          font: inherit;
+          font-size: 0.875rem;
+          font-weight: 550;
+          font-variant-numeric: tabular-nums;
+          line-height: 1;
+          appearance: textfield;
+        }
         .wrn-input-number__input::-webkit-inner-spin-button, .wrn-input-number__input::-webkit-outer-spin-button { appearance: none; }
         .wrn-input-number__input::placeholder { color: var(--wrn-color-muted); }
         .wrn-input-number__input:read-only { cursor: default; }
         .wrn-input-number__input:disabled { cursor: not-allowed; }
         .wrn-input-number:is([data-variant="horizontal"], [data-variant="compact"], [data-variant="seat"]) .wrn-input-number__input { text-align: center; }
         .wrn-input-number[data-variant="seat"] .wrn-input-number__input { width: 2.5rem; flex: none; }
-        .wrn-input-number__buttons { display: flex; flex: none; border-left: 1px solid var(--wrn-color-border); }
+        .wrn-input-number__buttons {
+          display: flex;
+          flex: none;
+          border-left: 1px solid var(--wrn-color-border);
+          background: var(--wrn-color-surface-soft, transparent);
+        }
         .wrn-input-number[data-variant="vertical"] .wrn-input-number__buttons { flex-direction: column; }
-        .wrn-input-number__button { display: inline-flex; width: 2.5rem; flex: none; align-items: center; justify-content: center; padding: 0; border: 0; color: var(--wrn-color-muted); background: transparent; transition: color var(--wrn-motion-fast), background var(--wrn-motion-fast); }
+        .wrn-input-number__button {
+          display: inline-flex;
+          width: 2.5rem;
+          flex: none;
+          align-items: center;
+          justify-content: center;
+          padding: 0;
+          border: 0;
+          color: var(--wrn-color-text-muted);
+          background: transparent;
+          cursor: pointer;
+          transition: color var(--wrn-motion-fast), background var(--wrn-motion-fast);
+        }
         .wrn-input-number[data-size="xs"] .wrn-input-number__button { width: 2rem; } .wrn-input-number[data-size="sm"] .wrn-input-number__button { width: 2.25rem; } .wrn-input-number[data-size="lg"] .wrn-input-number__button { width: 3rem; } .wrn-input-number[data-size="xl"] .wrn-input-number__button { width: 3.5rem; }
         .wrn-input-number__button--start { border-right: 1px solid var(--wrn-color-border); } .wrn-input-number__button--end { border-left: 1px solid var(--wrn-color-border); }
         .wrn-input-number__button--decrement { border-right: 1px solid var(--wrn-color-border); }
         .wrn-input-number[data-variant="vertical"] .wrn-input-number__button--decrement { border-right: 0; border-bottom: 1px solid var(--wrn-color-border); }
-        .wrn-input-number__button:hover { color: var(--input-number-accent); background: var(--wrn-color-surface-2); }
+        .wrn-input-number__button:hover {
+          color: var(--wrn-color-text);
+          background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
+        }
         .wrn-input-number__button:focus-visible { z-index: 1; outline: 2px solid var(--input-number-accent); outline-offset: -2px; }
         .wrn-input-number__button:disabled { cursor: not-allowed; opacity: 0.4; }
         .wrn-input-number__icon { width: 1rem; height: 1rem; }
diff --git a/packages/ui/components/Kbd.wrn b/packages/ui/components/Kbd.wrn
index 13491cf0..b230677c 100644
--- a/packages/ui/components/Kbd.wrn
+++ b/packages/ui/components/Kbd.wrn
@@ -26,16 +26,18 @@ component Kbd {
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      min-width: 1.6rem;
-      padding: 0.15rem 0.4rem;
+      min-width: 1.5rem;
+      height: 1.5rem;
+      padding: 0 0.4rem;
       border: 1px solid var(--wrn-color-border);
-      /* The lower edge is what reads as a physical key. */
+      border-bottom-color: var(--wrn-color-border-strong, var(--wrn-color-border));
       border-bottom-width: 2px;
-      border-radius: var(--wrn-radius-sm);
-      background: var(--wrn-color-surface-soft);
-      color: var(--wrn-color-text);
-      font-family: inherit;
-      font-size: 0.78rem;
+      border-radius: 0.375rem;
+      background: linear-gradient(180deg, var(--wrn-color-surface), var(--wrn-color-surface-soft, var(--wrn-color-surface)));
+      box-shadow: var(--wrn-highlight-edge, none), 0 1px 1px rgb(0 0 0 / 0.05);
+      color: var(--wrn-color-text-muted, var(--wrn-color-text));
+      font-family: var(--wrn-font-mono, monospace);
+      font-size: 0.72rem;
       font-weight: 600;
       line-height: 1;
     }
diff --git a/packages/ui/components/LayoutSplitter.wrn b/packages/ui/components/LayoutSplitter.wrn
index 1e556a23..f02d547b 100644
--- a/packages/ui/components/LayoutSplitter.wrn
+++ b/packages/ui/components/LayoutSplitter.wrn
@@ -125,11 +125,16 @@ component LayoutSplitter {
     .wrn-splitter {
       --splitter-accent: var(--wrn-color-primary);
       display: grid;
-      /* The first track follows the size the runtime resolves. */
       grid-template-columns: var(--wrn-split, 50%) auto minmax(0, 1fr);
       align-items: stretch;
       width: 100%;
       min-width: 0;
+      min-height: 14rem;
+      overflow: hidden;
+      border: 1px solid var(--wrn-color-border);
+      border-radius: var(--wrn-radius);
+      background: var(--wrn-color-surface);
+      box-shadow: var(--wrn-shadow-1);
     }
 
     .wrn-splitter[data-color="secondary"] {
@@ -157,45 +162,57 @@ component LayoutSplitter {
       min-width: 0;
       min-height: 0;
       overflow: auto;
+      padding: 1rem 1.125rem;
+      color: var(--wrn-color-text);
+      font-size: 0.875rem;
+      line-height: 1.55;
     }
 
     .wrn-splitter__handle {
+      position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
       flex: 0 0 auto;
-      padding: 0 0.25rem;
+      width: 0.75rem;
+      padding: 0;
       border: 0;
-      background: transparent;
+      background: var(--wrn-color-surface);
       cursor: col-resize;
-      /* Without this the pointer drag selects the text in both panes. */
       touch-action: none;
       user-select: none;
     }
 
     .wrn-splitter[data-orientation="vertical"] .wrn-splitter__handle {
-      padding: 0.25rem 0;
+      width: auto;
+      height: 0.75rem;
+      padding: 0;
       cursor: row-resize;
     }
 
     .wrn-splitter__grip {
+      position: relative;
+      z-index: 1;
       display: block;
-      width: 2px;
-      height: 100%;
-      min-height: 1.5rem;
+      width: 0.375rem;
+      height: 1.75rem;
+      min-height: 0;
+      border: 1px solid var(--wrn-color-border-strong, var(--wrn-color-border));
       border-radius: 999px;
-      background: var(--wrn-color-border);
-      transition: background 140ms ease;
+      background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
+      box-shadow: var(--wrn-shadow-1);
+      transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
     }
 
     .wrn-splitter[data-orientation="vertical"] .wrn-splitter__grip {
-      width: 100%;
-      min-width: 1.5rem;
-      height: 2px;
+      width: 1.75rem;
+      min-width: 0;
+      height: 0.375rem;
     }
 
     .wrn-splitter__handle:hover .wrn-splitter__grip,
     .wrn-splitter[data-wrn-splitter-dragging="true"] .wrn-splitter__grip {
+      border-color: var(--splitter-accent);
       background: var(--splitter-accent);
     }
 
@@ -218,8 +235,43 @@ component LayoutSplitter {
       }
 
       .wrn-splitter__handle {
+        width: auto;
+        height: 1px;
         cursor: default;
+        background: var(--wrn-color-border);
       }
+
+      .wrn-splitter__handle::before,
+      .wrn-splitter__grip {
+        display: none;
+      }
+    }
+  
+    .wrn-splitter__handle::before {
+      position: absolute;
+      inset-block: 0;
+      inset-inline-start: calc(50% - 0.5px);
+      width: 1px;
+      background: var(--wrn-color-border);
+      content: "";
+      transition: background 140ms ease;
+    }
+  
+    .wrn-splitter[data-orientation="vertical"] .wrn-splitter__handle::before {
+      inset-block: auto;
+      inset-inline: 0;
+      top: calc(50% - 0.5px);
+      width: auto;
+      height: 1px;
+    }
+  
+    .wrn-splitter__handle:hover::before,
+.wrn-splitter[data-wrn-splitter-dragging="true"] .wrn-splitter__handle::before {
+      background: color-mix(in srgb, var(--splitter-accent) 60%, var(--wrn-color-border));
+    }
+  
+    .wrn-splitter__pane--end {
+      background: var(--wrn-color-surface-soft, var(--wrn-color-surface));
     }
   }
 }
diff --git a/packages/ui/components/LegendIndicator.wrn b/packages/ui/components/LegendIndicator.wrn
index b8f6f9d8..5ea6bf85 100644
--- a/packages/ui/components/LegendIndicator.wrn
+++ b/packages/ui/components/LegendIndicator.wrn
@@ -32,8 +32,27 @@ component LegendIndicator {
     .wrn-legend { display:grid; gap:.65rem; }
     .wrn-legend p { margin:0; color:var(--wrn-color-muted); }
     .wrn-legend__items { display:flex; flex-wrap:wrap; gap:.75rem; }
-    .wrn-legend button { display:flex; align-items:center; gap:.4rem; border:0; background:transparent; color:var(--wrn-color-text); font:inherit; font-size:.875rem; cursor:pointer; }
-    .wrn-legend i { width:.65rem; height:.65rem; border-radius:50%; }
+    .wrn-legend button {
+      display: flex;
+      align-items: center;
+      gap: .45rem;
+      padding: 0.25rem 0.5rem;
+      border: 1px solid transparent;
+      border-radius: 999px;
+      background: transparent;
+      color: var(--wrn-color-text);
+      font: inherit;
+      font-size: .8125rem;
+      font-weight: 550;
+      cursor: pointer;
+      transition: background-color 120ms ease, opacity 120ms ease;
+    }
+    .wrn-legend i {
+      width: .625rem;
+      height: .625rem;
+      border-radius: 3px;
+      box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1);
+    }
     .wrn-legend button[aria-pressed="false"] { opacity:.45; text-decoration:line-through; }
 
     .wrn-next--legend-indicator {
@@ -44,6 +63,7 @@ component LegendIndicator {
       border-radius: var(--wrn-radius);
       color: var(--wrn-color-text);
       background: var(--wrn-color-surface);
+      box-shadow: var(--wrn-shadow-1);
     }
     .wrn-next--legend-indicator > p { margin: 0; color: var(--wrn-color-muted); }
     .wrn-next--legend-indicator > .wrn-next__items { display: flex; flex-wrap: wrap; gap: 0.5rem; }
@@ -114,7 +134,7 @@ component LegendIndicator {
 
         .wrn-component p {
           margin: 0;
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-muted, var(--wrn-color-muted));
           line-height: 1.6;
         }
   }
diff --git a/packages/ui/components/List.wrn b/packages/ui/components/List.wrn
index 84900133..6ebbf121 100644
--- a/packages/ui/components/List.wrn
+++ b/packages/ui/components/List.wrn
@@ -99,30 +99,128 @@ component List {
   style {
     .wrn-list { width: 100%; }
     .wrn-list__header { margin-bottom: 1rem; }
-    .wrn-list__title { color: var(--wrn-color-text); font-size: 1.125rem; font-weight: 700; }
+    .wrn-list__title {
+      color: var(--wrn-color-text);
+      font-size: 1.0625rem;
+      font-weight: 650;
+      letter-spacing: -0.015em;
+    }
     .wrn-list__description { margin-top: 0.25rem; color: var(--wrn-color-text-muted); font-size: 0.875rem; line-height: 1.5rem; }
-    .wrn-list__items { overflow: hidden; }
-    .wrn-list__items:is([data-variant="default"], [data-variant="divided"]) > .wrn-list__item + .wrn-list__item { border-top: 1px solid var(--wrn-color-border); }
-    .wrn-list__items[data-variant="card"] { border: 1px solid var(--wrn-color-border); border-radius: calc(var(--wrn-radius) * 1.5); background: var(--wrn-color-surface-raised); }
+    .wrn-list__items {
+      overflow: hidden;
+    }
+    .wrn-list__items:is([data-variant="default"], [data-variant="divided"]) > .wrn-list__item + .wrn-list__item {
+      border-top: 1px solid var(--wrn-color-border);
+    }
+    .wrn-list__items[data-variant="card"] {
+      border: 1px solid var(--wrn-color-border);
+      border-radius: var(--wrn-radius);
+      background: var(--wrn-color-surface-raised);
+      box-shadow: var(--wrn-shadow-1);
+    }
     .wrn-list__items[data-variant="separated"] { display: grid; gap: 0.75rem; }
     .wrn-list__item { min-width: 0; }
-    .wrn-list__item[data-variant="separated"] { border: 1px solid var(--wrn-color-border); border-radius: var(--wrn-radius); background: var(--wrn-color-surface-raised); }
-    .wrn-list__row { display: flex; min-width: 0; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 1rem; outline: none; transition: background var(--wrn-motion-base); }
-    a.wrn-list__row:hover { background: var(--wrn-color-surface-soft); }
+    .wrn-list__item[data-variant="separated"] {
+      border: 1px solid var(--wrn-color-border);
+      border-radius: var(--wrn-radius);
+      background: var(--wrn-color-surface-raised);
+      box-shadow: var(--wrn-shadow-1);
+    }
+    .wrn-list__row {
+      display: flex;
+      min-width: 0;
+      align-items: center;
+      gap: 0.75rem;
+      padding: 0.75rem 1rem;
+      outline: none;
+      color: inherit;
+      text-decoration: none;
+      background: var(--wrn-color-surface);
+      transition: background var(--wrn-motion-base);
+    }
+    a.wrn-list__row:hover {
+      background: var(--wrn-color-surface-soft);
+    }
     .wrn-list__row:focus-visible { box-shadow: inset 0 0 0 2px var(--wrn-color-focus); }
     .wrn-list__row[data-size="sm"] { padding: 0.625rem 0.75rem; }
     .wrn-list__row[data-size="lg"] { padding: 1rem 1.25rem; }
-    .wrn-list__leading-icon { display: flex; width: 2.5rem; height: 2.5rem; flex: none; align-items: center; justify-content: center; border-radius: var(--wrn-radius); color: var(--wrn-color-primary); background: var(--wrn-color-primary-soft); }
+    .wrn-list__leading-icon {
+      display: flex;
+      width: 2.25rem;
+      height: 2.25rem;
+      flex: none;
+      align-items: center;
+      justify-content: center;
+      border-radius: var(--wrn-radius-sm);
+      color: var(--wrn-color-primary-text, var(--wrn-color-primary));
+      background: color-mix(in srgb, var(--wrn-color-primary) 10%, var(--wrn-color-surface));
+      border: 1px solid color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
+    }
     .wrn-list__leading-icon > span { width: 1.25rem; height: 1.25rem; }
     .wrn-list__image { width: 3rem; height: 3rem; flex: none; border-radius: var(--wrn-radius); object-fit: cover; }
     .wrn-list__body { min-width: 0; flex: 1; }
     .wrn-list__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
-    .wrn-list__item-title { overflow: hidden; color: var(--wrn-color-text); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
-    .wrn-list__meta { flex: none; color: var(--wrn-color-text-muted); font-size: 0.75rem; }
-    .wrn-list__item-description { display: -webkit-box; margin-top: 0.25rem; overflow: hidden; color: var(--wrn-color-text-muted); font-size: 0.875rem; line-height: 1.25rem; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
-    .wrn-list__badge { display: inline-flex; margin-top: 0.5rem; padding: 0.25rem 0.625rem; border-radius: 999px; color: var(--wrn-color-primary); background: var(--wrn-color-primary-soft); font-size: 0.75rem; font-weight: 600; }
+    .wrn-list__item-title {
+      overflow: hidden;
+      color: var(--wrn-color-text);
+      font-size: 0.875rem;
+      font-weight: 600;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .wrn-list__meta {
+      flex: none;
+      color: var(--wrn-color-text-subtle, var(--wrn-color-text-muted));
+      font-size: 0.72rem;
+      font-variant-numeric: tabular-nums;
+    }
+    .wrn-list__item-description {
+      display: -webkit-box;
+      margin-top: 0.125rem;
+      overflow: hidden;
+      color: var(--wrn-color-text-muted);
+      font-size: 0.8125rem;
+      line-height: 1.25rem;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+    }
+    .wrn-list__badge {
+      display: inline-flex;
+      margin-top: 0.5rem;
+      padding: 0.125rem 0.5rem;
+      border-radius: 999px;
+      color: var(--wrn-color-primary-text, var(--wrn-color-primary));
+      background: color-mix(in srgb, var(--wrn-color-primary) 10%, var(--wrn-color-surface));
+      border: 1px solid color-mix(in srgb, var(--wrn-color-primary) 20%, transparent);
+      font-size: 0.6875rem;
+      font-weight: 650;
+    }
     .wrn-list__chevron { width: 1rem; height: 1rem; flex: none; margin-top: 0.25rem; color: var(--wrn-color-text-muted); transition: color var(--wrn-motion-base), transform var(--wrn-motion-base); }
-    .wrn-list__row:hover .wrn-list__chevron { color: var(--wrn-color-primary); transform: translateX(0.125rem); }
-    .wrn-list__empty { padding: 1.5rem; border: 1px dashed var(--wrn-color-border); border-radius: var(--wrn-radius); color: var(--wrn-color-text-muted); font-size: 0.875rem; text-align: center; }
+    .wrn-list__row:hover .wrn-list__chevron {
+      color: var(--wrn-color-text);
+      transform: translateX(0.125rem);
+    }
+    .wrn-list__empty {
+      padding: 1.5rem;
+      border: 1px dashed var(--wrn-color-border-strong, var(--wrn-color-border));
+      border-radius: var(--wrn-radius);
+      color: var(--wrn-color-text-muted);
+      background: var(--wrn-color-surface-soft);
+      font-size: 0.8125rem;
+      text-align: center;
+    }
+  
+    .wrn-list__items:is([data-variant="default"], [data-variant="divided"]) {
+      border: 1px solid var(--wrn-color-border);
+      border-radius: var(--wrn-radius);
+      background: var(--wrn-color-surface);
+      box-shadow: var(--wrn-shadow-1);
+    }
+  
+    .wrn-list__item[aria-current="true"] > .wrn-list__row,
+.wrn-list__item[data-active="true"] > .wrn-list__row {
+      background: color-mix(in srgb, var(--wrn-color-primary) 8%, var(--wrn-color-surface));
+      box-shadow: inset 2px 0 0 var(--wrn-color-primary);
+    }
   }
 }
diff --git a/packages/ui/components/ListGroup.wrn b/packages/ui/components/ListGroup.wrn
index f224f109..5c0d41f1 100644
--- a/packages/ui/components/ListGroup.wrn
+++ b/packages/ui/components/ListGroup.wrn
@@ -33,10 +33,33 @@ component ListGroup {
   style {
     .wrn-list-group { display:grid; gap:.75rem; color:var(--wrn-color-text); }
     .wrn-list-group > p { margin:0; font-size:.875rem; color:var(--wrn-color-muted); }
-    .wrn-list-group__items { border:1px solid var(--wrn-color-border); border-radius:var(--wrn-radius-md); overflow:hidden; }
-    .wrn-list-group button { display:flex; align-items:center; gap:.75rem; width:100%; padding:.85rem 1rem; text-align:start; border:0; color:inherit; background:var(--wrn-color-surface); font:inherit; font-size:.875rem; cursor:pointer; }
+    .wrn-list-group__items {
+      border: 1px solid var(--wrn-color-border);
+      border-radius: var(--wrn-radius);
+      overflow: hidden;
+      box-shadow: var(--wrn-shadow-1);
+    }
+    .wrn-list-group button {
+      display: flex;
+      align-items: center;
+      gap: .75rem;
+      width: 100%;
+      padding: .75rem 1rem;
+      text-align: start;
+      border: 0;
+      color: inherit;
+      background: var(--wrn-color-surface);
+      font: inherit;
+      font-size: .875rem;
+      cursor: pointer;
+      transition: background-color 120ms ease;
+    }
     .wrn-list-group button + button { border-top:1px solid var(--wrn-color-border); }
-    .wrn-list-group button[aria-pressed="true"] { background:var(--wrn-color-primary-soft); color:var(--wrn-color-primary-text); }
+    .wrn-list-group button[aria-pressed="true"] {
+      background: color-mix(in srgb, var(--wrn-color-primary) 8%, var(--wrn-color-surface));
+      color: var(--wrn-color-text);
+      box-shadow: inset 2px 0 0 var(--wrn-color-primary);
+    }
     .wrn-list-group button > [class*="icon-"] { width:1.1rem; height:1.1rem; flex:none; }
     .wrn-list-group small { display:block; margin-top:.2rem; color:var(--wrn-color-muted); font-size:.8rem; }
     .wrn-list-group__badge { margin-inline-start:auto; font-size:.75rem; }
diff --git a/packages/ui/components/MetricCard.wrn b/packages/ui/components/MetricCard.wrn
index 39a9da10..526e223f 100644
--- a/packages/ui/components/MetricCard.wrn
+++ b/packages/ui/components/MetricCard.wrn
@@ -212,7 +212,6 @@ component MetricCard {
       --metric-accent-muted: var(--wrn-color-primary-muted);
       --metric-contrast: var(--wrn-color-primary-contrast);
       --metric-border: var(--wrn-color-border);
-
       position: relative;
       isolation: isolate;
       display: flex;
@@ -224,14 +223,10 @@ component MetricCard {
       color: var(--wrn-color-text);
       background: var(--wrn-color-surface);
       border: 1px solid var(--metric-border);
-      border-radius: var(--wrn-radius-md);
-      box-shadow: none;
+      border-radius: var(--wrn-radius);
+      box-shadow: var(--wrn-shadow-1);
       overflow: hidden;
-      transition:
-        transform 180ms ease,
-        border-color 180ms ease,
-        box-shadow 180ms ease,
-        background-color 180ms ease;
+      transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
     }
 
     .wrn-metric-card[data-color="secondary"] {
@@ -286,15 +281,12 @@ component MetricCard {
 
     .wrn-metric-card[data-variant="soft"] {
       background:
-        linear-gradient(135deg, var(--metric-accent-soft), transparent 68%),
         var(--wrn-color-surface-raised);
       box-shadow: none;
     }
 
     .wrn-metric-card[data-variant="raised"] {
-      box-shadow:
-        0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
-        0 24px 64px color-mix(in srgb, black 16%, transparent);
+      box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
     }
 
     .wrn-metric-card[data-variant="outline"] {
@@ -313,10 +305,9 @@ component MetricCard {
     .wrn-metric-card[data-variant="solid"] {
       color: var(--metric-contrast);
       background:
-        linear-gradient(135deg, color-mix(in srgb, white 10%, transparent), transparent 58%),
         var(--metric-accent);
       border-color: color-mix(in srgb, white 22%, transparent);
-      box-shadow: 0 20px 52px color-mix(in srgb, var(--metric-accent) 28%, transparent);
+      box-shadow: var(--wrn-shadow-3);
     }
 
     .wrn-metric-card[data-variant="gradient"] {
@@ -339,9 +330,9 @@ component MetricCard {
     }
 
     .wrn-metric-card[data-hover="lift"]:hover {
-      transform: translateY(-4px);
-      border-color: color-mix(in srgb, var(--metric-accent) 42%, var(--wrn-color-border));
-      box-shadow: 0 24px 56px color-mix(in srgb, black 16%, transparent);
+      transform: translateY(-2px);
+      border-color: var(--wrn-color-border-strong, var(--wrn-color-border));
+      box-shadow: var(--wrn-shadow-2);
     }
 
     .wrn-metric-card[data-hover="border"]:hover {
@@ -349,8 +340,8 @@ component MetricCard {
     }
 
     .wrn-metric-card[data-hover="glow"]:hover {
-      border-color: color-mix(in srgb, var(--metric-accent) 52%, var(--wrn-color-border));
-      box-shadow: 0 22px 58px color-mix(in srgb, var(--metric-accent) 18%, transparent);
+      border-color: color-mix(in srgb, var(--metric-accent) 45%, var(--wrn-color-border));
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--metric-accent) 12%, transparent), var(--wrn-shadow-2);
     }
 
     .wrn-metric-card[data-align="center"] {
@@ -382,22 +373,22 @@ component MetricCard {
     .wrn-metric-card__label {
       margin: 0;
       color: var(--wrn-color-text-muted);
-      font-size: 0.84rem;
-      font-weight: 600;
+      font-size: 0.8125rem;
+      font-weight: 550;
       line-height: 1.4;
     }
 
     .wrn-metric-card__badge {
       display: inline-flex;
       align-items: center;
-      min-height: 1.45rem;
-      padding: 0.2rem 0.55rem;
-      color: var(--metric-accent);
-      background: var(--metric-accent-soft);
-      border: 1px solid color-mix(in srgb, var(--metric-accent) 24%, transparent);
+      min-height: 1.375rem;
+      padding: 0.125rem 0.5rem;
+      color: var(--wrn-color-primary-text, var(--metric-accent));
+      background: color-mix(in srgb, var(--metric-accent) 10%, var(--wrn-color-surface));
+      border: 1px solid color-mix(in srgb, var(--metric-accent) 22%, transparent);
       border-radius: 999px;
-      font-size: 0.69rem;
-      font-weight: 700;
+      font-size: 0.6875rem;
+      font-weight: 650;
       line-height: 1;
     }
 
@@ -419,13 +410,13 @@ component MetricCard {
       align-items: center;
       justify-content: center;
       flex: 0 0 auto;
-      width: 2.75rem;
-      height: 2.75rem;
+      width: 2.5rem;
+      height: 2.5rem;
       color: var(--metric-accent);
-      background: var(--metric-accent-soft);
+      background: color-mix(in srgb, var(--metric-accent) 10%, var(--wrn-color-surface));
       border: 1px solid color-mix(in srgb, var(--metric-accent) 18%, transparent);
-      border-radius: 0.9rem;
-      font-size: 1.25rem;
+      border-radius: var(--wrn-radius-sm);
+      font-size: 1.125rem;
     }
 
     .wrn-metric-card[data-icon-style="ghost"] .wrn-metric-card__icon {
@@ -469,10 +460,10 @@ component MetricCard {
 
     .wrn-metric-card__value {
       color: var(--wrn-color-text);
-      font-size: clamp(1.75rem, 3vw, 2rem);
-      font-weight: 700;
-      line-height: 0.98;
-      letter-spacing: -0.045em;
+      font-size: clamp(1.75rem, 3vw, 2.125rem);
+      font-weight: 650;
+      line-height: 1;
+      letter-spacing: -0.04em;
       white-space: nowrap;
       font-variant-numeric: tabular-nums;
     }
@@ -491,9 +482,9 @@ component MetricCard {
 
     .wrn-metric-card__prefix,
     .wrn-metric-card__suffix {
-      color: var(--metric-accent);
+      color: var(--wrn-color-text-subtle, var(--wrn-color-text-muted));
       font-size: 1rem;
-      font-weight: 700;
+      font-weight: 600;
     }
 
     .wrn-metric-card[data-variant="solid"] .wrn-metric-card__prefix,
@@ -526,9 +517,10 @@ component MetricCard {
 
     .wrn-metric-card__progress-track {
       width: 100%;
-      height: 0.42rem;
+      height: 0.375rem;
       overflow: hidden;
-      background: color-mix(in srgb, var(--wrn-color-border) 72%, transparent);
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
+      box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.08);
       border-radius: 999px;
     }
 
@@ -552,11 +544,13 @@ component MetricCard {
       display: inline-flex;
       align-items: center;
       align-self: flex-start;
-      gap: 0.42rem;
-      margin-top: 1.15rem;
+      gap: 0.375rem;
+      margin-top: 1rem;
       color: var(--wrn-color-text-muted);
-      font-size: 0.76rem;
+      font-size: 0.75rem;
+      font-weight: 600;
       line-height: 1.4;
+      font-variant-numeric: tabular-nums;
     }
 
     .wrn-metric-card[data-align="center"] .wrn-metric-card__trend {
@@ -569,12 +563,12 @@ component MetricCard {
 
     .wrn-metric-card__trend[data-direction="up"],
     .wrn-metric-card__trend[data-direction="positive"] {
-      color: var(--wrn-color-success);
+      color: var(--wrn-color-success-text, var(--wrn-color-success));
     }
 
     .wrn-metric-card__trend[data-direction="down"],
     .wrn-metric-card__trend[data-direction="negative"] {
-      color: var(--wrn-color-danger);
+      color: var(--wrn-color-danger-text, var(--wrn-color-danger));
     }
 
     .wrn-metric-card__trend-icon {
@@ -609,15 +603,13 @@ component MetricCard {
       z-index: 1;
       display: inline-flex;
       align-items: center;
-      gap: 0.45rem;
-      color: var(--metric-accent);
-      font-size: 0.82rem;
-      font-weight: 700;
+      gap: 0.375rem;
+      color: var(--wrn-color-primary-text, var(--metric-accent));
+      font-size: 0.8125rem;
+      font-weight: 600;
       line-height: 1.3;
       text-decoration: none;
-      transition:
-        color 160ms ease,
-        gap 160ms ease;
+      transition: color 160ms ease, gap 160ms ease;
     }
 
     .wrn-metric-card__action:hover {
diff --git a/packages/ui/components/MetricGrid.wrn b/packages/ui/components/MetricGrid.wrn
index c77acb4b..cd0b9f35 100644
--- a/packages/ui/components/MetricGrid.wrn
+++ b/packages/ui/components/MetricGrid.wrn
@@ -107,8 +107,8 @@ component MetricGrid {
       padding: 1.25rem;
       color: var(--wrn-color-text-muted);
       background: var(--wrn-color-surface-soft);
-      border: 1px dashed var(--wrn-color-border);
-      border-radius: 0.9rem;
+      border: 1px dashed var(--wrn-color-border-strong, var(--wrn-color-border));
+      border-radius: var(--wrn-radius);
       text-align: center;
     }
     .wrn-metric-grid__frame {
@@ -187,11 +187,6 @@ component MetricGrid {
 
     .wrn-metric-grid[data-variant="soft"] .wrn-metric-grid__surface {
       background:
-        linear-gradient(
-          135deg,
-          color-mix(in srgb, var(--wrn-color-primary) 8%, transparent),
-          transparent 62%
-        ),
         var(--wrn-color-surface-raised);
     }
 
diff --git a/packages/ui/components/Modal.wrn b/packages/ui/components/Modal.wrn
index 78b63681..952c00b5 100644
--- a/packages/ui/components/Modal.wrn
+++ b/packages/ui/components/Modal.wrn
@@ -346,29 +346,31 @@ component Modal {
     .wrn-modal__trigger {
       appearance: none;
       min-height: var(--wrn-control-height);
-      padding: 0.65rem 1rem;
+      padding: 0 0.95rem;
       color: var(--modal-contrast);
-      background: var(--modal-accent);
-      border: 0;
+      background: linear-gradient(180deg, color-mix(in srgb, var(--modal-accent) 92%, white), var(--modal-accent));
+      border: 1px solid color-mix(in srgb, var(--modal-accent) 82%, black);
+      border-bottom-color: color-mix(in srgb, var(--modal-accent) 64%, black);
       border-radius: var(--wrn-radius-sm);
+      box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--modal-accent) 30%, transparent);
       font: inherit;
-      font-size: 0.85rem;
-      font-weight: 650;
+      font-size: 0.875rem;
+      font-weight: 600;
       cursor: pointer;
-      transition: opacity 150ms ease, transform 150ms ease, box-shadow 150ms ease;
+      transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
     }
 
     .wrn-modal__trigger:hover {
-      opacity: 0.92;
+      background: linear-gradient(180deg, color-mix(in srgb, var(--modal-accent) 94%, white), color-mix(in srgb, var(--modal-accent) 88%, black));
     }
 
     .wrn-modal__trigger:active {
-      transform: scale(0.97);
+      transform: translateY(1px);
     }
 
     .wrn-modal__trigger:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--modal-accent) 40%, transparent);
+      outline: 2px solid color-mix(in srgb, var(--modal-accent) 80%, transparent);
+      outline-offset: 2px;
     }
 
     /*
@@ -420,9 +422,9 @@ component Modal {
       z-index: 0;
       appearance: none;
       padding: 0;
-      background: color-mix(in srgb, black 62%, transparent);
+      background: rgb(10 11 14 / 0.56);
       border: 0;
-      backdrop-filter: blur(9px);
+      backdrop-filter: blur(6px);
     }
 
     .wrn-modal__panel {
@@ -436,11 +438,11 @@ component Modal {
       background: var(--wrn-color-surface-raised);
       border: 1px solid var(--wrn-color-border);
       border-radius: var(--wrn-radius-lg);
-      box-shadow: var(--wrn-shadow-lg);
+      box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
       overflow: hidden;
       opacity: 0;
-      transform: scale(0.96) translateY(10px);
-      transition: opacity 180ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
+      transform: scale(0.97) translateY(8px);
+      transition: opacity 180ms ease, transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
     }
 
     .wrn-modal[data-open="true"] .wrn-modal__panel {
@@ -476,13 +478,12 @@ component Modal {
 
     .wrn-modal[data-variant="soft"] .wrn-modal__panel {
       background:
-      linear-gradient(145deg, var(--modal-soft), transparent 68%),
       var(--wrn-color-surface-raised);
     }
 
     .wrn-modal[data-variant="outline"] .wrn-modal__panel {
       background: var(--wrn-color-surface-raised);
-      box-shadow: 0 24px 72px color-mix(in srgb, black 24%, transparent);
+      box-shadow: var(--wrn-shadow-3);
     }
 
     .wrn-modal[data-variant="solid"] .wrn-modal__panel {
@@ -496,8 +497,7 @@ component Modal {
       align-items: flex-start;
       justify-content: space-between;
       gap: 1rem;
-      padding: 1.25rem;
-      border-bottom: 1px solid var(--wrn-color-border);
+      padding: 1.25rem 1.25rem 0.5rem;
     }
 
     .wrn-modal__heading {
@@ -509,9 +509,9 @@ component Modal {
 
     .wrn-modal__icon {
       flex: 0 0 auto;
-      width: 1.3rem;
-      height: 1.3rem;
-      margin-top: 0.15rem;
+      width: 1.25rem;
+      height: 1.25rem;
+      margin-top: 0.125rem;
       color: var(--modal-accent);
     }
 
@@ -532,14 +532,15 @@ component Modal {
 
     .wrn-modal__heading-copy h2 {
       color: inherit;
-      font-size: 1.08rem;
+      font-size: 1.0625rem;
       font-weight: 650;
-      line-height: 1.3;
+      letter-spacing: -0.015em;
+      line-height: 1.35;
     }
 
     .wrn-modal__heading-copy p {
       color: var(--wrn-color-text-muted);
-      font-size: 0.8rem;
+      font-size: 0.8125rem;
       line-height: 1.55;
     }
 
@@ -589,7 +590,7 @@ component Modal {
 
     .wrn-modal__close:hover {
       color: var(--wrn-color-text);
-      background: var(--wrn-color-surface-soft);
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-soft));
     }
 
     .wrn-modal__close:focus-visible {
@@ -653,8 +654,9 @@ component Modal {
       align-items: center;
       justify-content: space-between;
       gap: 1rem;
-      padding: 1rem 1.25rem;
+      padding: 0.875rem 1.25rem;
       border-top: 1px solid var(--wrn-color-border);
+      background: var(--wrn-color-surface-soft, transparent);
     }
 
     .wrn-modal__custom-footer:empty {
@@ -676,29 +678,33 @@ component Modal {
       justify-content: center;
       gap: 0.5rem;
       min-height: var(--wrn-control-height, 2.5rem);
-      padding: 0.65rem 1rem;
+      padding: 0 0.95rem;
       border-radius: var(--wrn-radius-sm);
       font: inherit;
-      font-size: 0.83rem;
-      font-weight: 650;
+      font-size: 0.875rem;
+      font-weight: 600;
       cursor: pointer;
-      transition: transform 150ms ease, opacity 150ms ease, border-color 150ms ease;
+      transition: transform 150ms ease, background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
     }
 
     .wrn-modal__button:active {
-      transform: scale(0.985);
+      transform: translateY(1px);
     }
 
     .wrn-modal__button--secondary {
       color: var(--wrn-color-text);
-      background: transparent;
+      background: linear-gradient(180deg, var(--wrn-color-surface), var(--wrn-color-surface-soft, var(--wrn-color-surface)));
       border: 1px solid var(--wrn-color-border);
+      border-bottom-color: var(--wrn-color-border-strong, var(--wrn-color-border));
+      box-shadow: var(--wrn-shadow-1);
     }
 
     .wrn-modal__button--primary {
       color: var(--modal-contrast);
-      background: var(--modal-accent);
-      border: 1px solid transparent;
+      background: linear-gradient(180deg, color-mix(in srgb, var(--modal-accent) 92%, white), var(--modal-accent));
+      border: 1px solid color-mix(in srgb, var(--modal-accent) 82%, black);
+      border-bottom-color: color-mix(in srgb, var(--modal-accent) 64%, black);
+      box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--modal-accent) 30%, transparent);
     }
 
     /*
diff --git a/packages/ui/components/Nav.wrn b/packages/ui/components/Nav.wrn
index 2eaf2edd..0e35a2e2 100644
--- a/packages/ui/components/Nav.wrn
+++ b/packages/ui/components/Nav.wrn
@@ -223,16 +223,17 @@ component Nav {
       display: flex;
       align-items: center;
       gap: 0.45rem;
-      padding: 0.45rem 0.7rem;
+      padding: 0.4rem 0.7rem;
       border-radius: var(--wrn-radius-sm);
       color: var(--wrn-color-text-muted);
-      font-size: 0.9rem;
-      font-weight: 600;
+      font-size: 0.875rem;
+      font-weight: 550;
       text-decoration: none;
+      transition: background-color 120ms ease, color 120ms ease;
     }
 
     .wrn-nav__link:hover {
-      background: var(--wrn-color-surface-soft);
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-soft));
       color: var(--wrn-color-text);
     }
 
@@ -242,8 +243,9 @@ component Nav {
     }
 
     .wrn-nav__link[data-active="true"] {
-      background: color-mix(in srgb, var(--nav-accent) 16%, transparent);
-      color: var(--nav-accent);
+      background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
+      color: var(--wrn-color-text);
+      box-shadow: 0 0 0 1px var(--wrn-color-border), var(--wrn-shadow-1);
     }
 
     .wrn-nav__link[aria-disabled="true"] {
@@ -252,11 +254,13 @@ component Nav {
     }
 
     .wrn-nav__badge {
-      padding: 0.05rem 0.4rem;
+      padding: 0.0625rem 0.4rem;
       border-radius: 999px;
-      background: color-mix(in srgb, var(--nav-accent) 16%, transparent);
-      color: var(--nav-accent);
-      font-size: 0.72rem;
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
+      color: var(--wrn-color-text-muted);
+      font-size: 0.68rem;
+      font-weight: 650;
+      font-variant-numeric: tabular-nums;
     }
 
     .wrn-nav__arrow {
@@ -272,15 +276,15 @@ component Nav {
     .wrn-nav__submenu {
       position: absolute;
       z-index: 30;
-      top: 100%;
+      top: calc(100% + 0.25rem);
       left: 0;
       min-width: 12rem;
       margin: 0;
-      padding: 0.35rem;
+      padding: 0.3rem;
       border: 1px solid var(--wrn-color-border);
-      border-radius: var(--wrn-radius-md);
-      background: var(--wrn-color-surface);
-      box-shadow: var(--wrn-shadow-1);
+      border-radius: var(--wrn-radius);
+      background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
+      box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
       list-style: none;
       opacity: 0;
       visibility: hidden;
diff --git a/packages/ui/components/Navbar.wrn b/packages/ui/components/Navbar.wrn
index f1301bd6..bba8acca 100644
--- a/packages/ui/components/Navbar.wrn
+++ b/packages/ui/components/Navbar.wrn
@@ -284,8 +284,9 @@ size: string = "default"
       z-index: 1000;
       width: 100%;
       color: var(--wrn-color-text);
-      background: color-mix(in srgb, var(--wrn-color-surface) 96%, transparent);
+      background: color-mix(in srgb, var(--wrn-color-surface) 88%, transparent);
       border-bottom: 1px solid var(--wrn-color-border);
+      backdrop-filter: saturate(160%) blur(12px);
     }
 
     .wrn-navbar--sticky {
@@ -298,8 +299,8 @@ size: string = "default"
       position: sticky;
       z-index: 1000;
       top: var(--wrn-navbar-floating-start, 0px);
-      box-shadow: 0 10px 30px rgb(15 23 42 / 0.08);
-      backdrop-filter: blur(16px);
+      box-shadow: var(--wrn-shadow-2);
+      backdrop-filter: saturate(160%) blur(12px);
     }
 
     .wrn-navbar__topbar:not(:has(> *)) {
@@ -308,25 +309,24 @@ size: string = "default"
 
     .wrn-navbar__topbar:has(> *) {
       display: flex;
-      min-height: 2.25rem;
+      min-height: 2rem;
       align-items: center;
       justify-content: space-between;
       gap: 1rem;
-      padding: 0.35rem clamp(1rem, 4vw, 3rem);
-      color: var(--wrn-color-muted);
-      background: var(--wrn-color-surface-2);
+      padding: 0.3rem clamp(1rem, 4vw, 3rem);
+      color: var(--wrn-color-text-muted);
+      background: var(--wrn-color-surface-soft);
       border-bottom: 1px solid var(--wrn-color-border);
       font-size: 0.75rem;
-      font-weight: 400;
     }
 
     .wrn-navbar__main {
       position: relative;
       display: flex;
-      min-height: 4.25rem;
+      min-height: 3.75rem;
       width: min(100%, 90rem);
       margin-inline: auto;
-      padding: 0.75rem clamp(1rem, 4vw, 3rem);
+      padding: 0.5rem clamp(1rem, 4vw, 3rem);
       align-items: center;
       gap: 1.5rem;
     }
@@ -377,8 +377,8 @@ size: string = "default"
     }
 
     .wrn-navbar__brand-icon {
-      width: 2.5rem;
-      height: 2.5rem;
+      width: 2.25rem;
+      height: 2.25rem;
       color: var(--wrn-component-color, var(--wrn-color-primary));
     }
 
@@ -391,6 +391,7 @@ size: string = "default"
     .wrn-navbar__brand-copy strong {
       font-size: 0.9rem;
       font-weight: 600;
+      letter-spacing: -0.015em;
     }
 
     .wrn-navbar__brand-copy small {
@@ -437,11 +438,11 @@ size: string = "default"
     }
 
     .wrn-navbar__mega .wrn-mega__trigger {
-      min-height: 2.75rem;
-      padding: 0.65rem 0.8rem;
-      border-radius: 0.65rem;
+      min-height: 2.25rem;
+      padding: 0.4rem 0.75rem;
+      border-radius: var(--wrn-radius-sm);
       font-size: 0.8125rem;
-      font-weight: 500;
+      font-weight: 550;
     }
 
     .wrn-navbar__mega[data-full-width="true"] .wrn-mega__panel {
@@ -467,46 +468,40 @@ size: string = "default"
     .wrn-navbar__dropdown > summary,
     .wrn-navbar__action {
       display: inline-flex;
-      min-height: 2.75rem;
-      padding: 0.65rem 0.8rem;
+      min-height: 2.25rem;
+      padding: 0.4rem 0.75rem;
       align-items: center;
       gap: 0.45rem;
-      border-radius: 0.65rem;
+      border-radius: var(--wrn-radius-sm);
       cursor: pointer;
+      color: var(--wrn-color-text-muted);
       font-size: 0.8125rem;
       font-weight: 500;
       white-space: nowrap;
+      transition: color 120ms ease, background-color 120ms ease;
     }
 
     .wrn-navbar__menu-link:hover,
     .wrn-navbar__dropdown > summary:hover,
     .wrn-navbar__mega .wrn-mega__trigger:hover {
       color: var(--wrn-color-text);
-      background: var(--wrn-color-surface-2);
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
     }
 
     .wrn-navbar__menu-link[aria-current="page"],
     .wrn-navbar__dropdown > summary[aria-current="page"],
     .wrn-navbar__mega[data-active="true"] .wrn-mega__trigger {
-      color: var(--wrn-component-color, var(--wrn-color-primary));
+      color: var(--wrn-color-text);
       font-weight: 600;
-      background: color-mix(
-        in srgb,
-        var(--wrn-component-color, var(--wrn-color-primary)) 12%,
-        transparent
-      );
-      box-shadow: inset 0 -2px 0 var(--wrn-component-color, var(--wrn-color-primary));
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
+      box-shadow: none;
     }
 
     .wrn-navbar__menu-link[aria-current="page"]:hover,
     .wrn-navbar__dropdown > summary[aria-current="page"]:hover,
     .wrn-navbar__mega[data-active="true"] .wrn-mega__trigger:hover {
-      color: var(--wrn-component-color, var(--wrn-color-primary));
-      background: color-mix(
-        in srgb,
-        var(--wrn-component-color, var(--wrn-color-primary)) 16%,
-        transparent
-      );
+      color: var(--wrn-color-text);
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
     }
 
     .wrn-navbar__dropdown {
@@ -537,26 +532,23 @@ size: string = "default"
     .wrn-navbar__panel {
       position: absolute;
       z-index: 1100;
-      top: calc(100% + 0.55rem);
+      top: calc(100% + 0.5rem);
       left: 50%;
       display: grid;
       width: max-content;
       min-width: 15rem;
       max-width: min(90vw, 64rem);
-      padding: 0.65rem;
-      gap: 0.45rem;
+      padding: 0.375rem;
+      gap: 0.25rem;
       border: 1px solid var(--wrn-color-border);
-      border-radius: 0.9rem;
+      border-radius: var(--wrn-radius);
       color: var(--wrn-color-text);
-      background: var(--wrn-color-surface);
-      box-shadow: 0 18px 48px rgb(15 23 42 / 0.16);
+      background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
+      box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
       opacity: 1;
       transform: translateX(-50%) translateY(0) scale(1);
       transform-origin: top center;
-      transition:
-        opacity 180ms ease,
-        transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
-        display 180ms allow-discrete;
+      transition: opacity 180ms ease, transform 180ms cubic-bezier(0.22, 1, 0.36, 1), display 180ms allow-discrete;
     }
 
     .wrn-navbar__panel::before {
@@ -619,10 +611,12 @@ size: string = "default"
     }
 
     .wrn-navbar__group-title {
-      padding: 0.55rem 0.65rem 0.25rem;
-      font-size: 0.7rem;
+      padding: 0.5rem 0.625rem 0.25rem;
+      color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+      font-family: var(--wrn-font-mono, monospace);
+      font-size: 0.65rem;
       font-weight: 600;
-      letter-spacing: 0.04em;
+      letter-spacing: 0.08em;
       text-transform: uppercase;
     }
 
@@ -635,17 +629,17 @@ size: string = "default"
 
     .wrn-navbar__panel a {
       display: flex;
-      min-height: 2.75rem;
-      padding: 0.65rem;
+      min-height: 2.5rem;
+      padding: 0.5rem 0.625rem;
       align-items: flex-start;
-      gap: 0.65rem;
-      border-radius: var(--wrn-radius-sm, 6px);
-      font-size: 0.8rem;
+      gap: 0.625rem;
+      border-radius: calc(var(--wrn-radius-sm) - 2px);
+      font-size: 0.8125rem;
       font-weight: 450;
     }
 
     .wrn-navbar__panel a:hover {
-      background: var(--wrn-color-surface-2);
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
     }
 
     .wrn-navbar__panel a span:last-child {
@@ -654,39 +648,58 @@ size: string = "default"
     }
 
     .wrn-navbar__panel a strong {
-      font-weight: 500;
+      font-weight: 600;
     }
 
     .wrn-navbar__panel a small {
-      color: var(--wrn-color-muted);
-      font-size: 0.7rem;
+      color: var(--wrn-color-text-muted);
+      font-size: 0.75rem;
       font-weight: 400;
+      line-height: 1.4;
     }
 
     .wrn-navbar__action {
-      border: 1px solid transparent;
+      display: inline-flex;
+      min-height: 2.25rem;
+      padding: 0 0.875rem;
+      align-items: center;
+      gap: 0.45rem;
+      border-radius: var(--wrn-radius-sm);
+      cursor: pointer;
+      font-size: 0.8125rem;
+      font-weight: 600;
+      white-space: nowrap;
     }
 
     .wrn-navbar__action--primary {
       color: var(--wrn-color-on-primary, #fff);
-      background: var(--wrn-component-color, var(--wrn-color-primary));
+      background: linear-gradient(180deg, color-mix(in srgb, var(--wrn-component-color, var(--wrn-color-primary)) 92%, white), var(--wrn-component-color, var(--wrn-color-primary)));
+      border-color: color-mix(in srgb, var(--wrn-component-color, var(--wrn-color-primary)) 82%, black) !important;
+      border-bottom-color: color-mix(in srgb, var(--wrn-component-color, var(--wrn-color-primary)) 64%, black) !important;
+      box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--wrn-component-color, var(--wrn-color-primary)) 30%, transparent);
       font-weight: 600;
     }
 
     .wrn-navbar__action--outline {
+      color: var(--wrn-color-text);
       border-color: var(--wrn-color-border);
+      border-bottom-color: var(--wrn-color-border-strong, var(--wrn-color-border));
+      background: linear-gradient(180deg, var(--wrn-color-surface), var(--wrn-color-surface-soft, var(--wrn-color-surface)));
+      box-shadow: var(--wrn-shadow-1);
     }
 
     .wrn-navbar__toggle {
       display: none;
-      width: 2.75rem;
-      height: 2.75rem;
+      width: 2.5rem;
+      height: 2.5rem;
       margin-left: auto;
-      padding: 0.65rem;
+      padding: 0.625rem;
       border: 1px solid var(--wrn-color-border);
-      border-radius: 0.65rem;
+      border-radius: var(--wrn-radius-sm);
       color: inherit;
       background: var(--wrn-color-surface);
+      box-shadow: var(--wrn-shadow-1);
+      cursor: pointer;
     }
 
     .wrn-navbar__toggle span {
@@ -720,7 +733,7 @@ size: string = "default"
         flex-direction: column;
         background: var(--wrn-color-surface);
         border-bottom: 1px solid var(--wrn-color-border);
-        box-shadow: 0 16px 32px rgb(15 23 42 / 0.12);
+        box-shadow: var(--wrn-shadow-2);
         height: auto;
         max-height: calc(100dvh - 3.5rem);
         overflow-x: hidden;
@@ -803,7 +816,7 @@ size: string = "default"
         overflow-y: auto;
         background: var(--wrn-color-surface);
         border-bottom: 1px solid var(--wrn-color-border);
-        box-shadow: 0 16px 32px rgb(15 23 42 / 0.12);
+        box-shadow: var(--wrn-shadow-2);
       }
       .wrn-navbar[data-collapse-at="1100px"] .wrn-navbar__collapse.is-open { display: flex; }
       .wrn-navbar[data-collapse-at="1100px"] .wrn-navbar__menus,
@@ -906,7 +919,7 @@ size: string = "default"
 
         .wrn-component p {
           margin: 0;
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-muted, var(--wrn-color-muted));
           line-height: 1.6;
         }
   }
diff --git a/packages/ui/components/PageHeader.wrn b/packages/ui/components/PageHeader.wrn
index 54cdf11d..7384ca54 100644
--- a/packages/ui/components/PageHeader.wrn
+++ b/packages/ui/components/PageHeader.wrn
@@ -322,7 +322,6 @@ current: true
 
     .wrn-page-header[data-variant="tinted"] {
       background:
-      linear-gradient(135deg, var(--page-header-soft), transparent 72%),
       var(--wrn-color-background);
     }
 
diff --git a/packages/ui/components/Pagination.wrn b/packages/ui/components/Pagination.wrn
index 7dcd94bd..da3b549e 100644
--- a/packages/ui/components/Pagination.wrn
+++ b/packages/ui/components/Pagination.wrn
@@ -250,13 +250,14 @@ component Pagination {
     .wrn-pagination__summary {
       margin: 0;
       color: var(--wrn-color-text-muted);
-      font-size: 0.82rem;
+      font-size: 0.8125rem;
+      font-variant-numeric: tabular-nums;
     }
 
     .wrn-pagination__controls {
       display: flex;
       align-items: center;
-      gap: 0.35rem;
+      gap: 0.25rem;
       flex-wrap: wrap;
     }
 
@@ -266,7 +267,7 @@ component Pagination {
       min-width: 0;
       max-width: 100%;
       align-items: center;
-      gap: 0.25rem;
+      gap: 0.125rem;
       margin: 0;
       padding: 0;
       list-style: none;
@@ -281,23 +282,28 @@ component Pagination {
       appearance: none;
       display: inline-flex;
       align-items: center;
-      gap: 0.35rem;
-      min-width: 2.25rem;
+      gap: 0.3rem;
+      min-width: 2.125rem;
+      min-height: 2.125rem;
       justify-content: center;
-      padding: 0.4rem 0.6rem;
-      border: 1px solid var(--wrn-color-border);
+      padding: 0 0.55rem;
+      border: 1px solid transparent;
       border-radius: var(--wrn-radius-sm);
-      background: var(--wrn-color-surface);
-      color: var(--wrn-color-text);
+      background: transparent;
+      color: var(--wrn-color-text-muted);
       font: inherit;
-      font-size: 0.85rem;
+      font-size: 0.8125rem;
+      font-weight: 550;
+      font-variant-numeric: tabular-nums;
       cursor: pointer;
       text-decoration: none;
+      transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
     }
 
     .wrn-pagination__page:hover,
     .wrn-pagination__step:hover {
-      background: var(--wrn-color-surface-soft);
+      color: var(--wrn-color-text);
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-soft));
     }
 
     /* The href variant renders anchors, which cannot be disabled the way a
@@ -317,10 +323,12 @@ component Pagination {
     }
 
     .wrn-pagination__page[data-active="true"] {
-      border-color: var(--pagination-accent);
-      background: var(--pagination-accent);
+      border-color: color-mix(in srgb, var(--pagination-accent) 82%, black);
+      border-bottom-color: color-mix(in srgb, var(--pagination-accent) 64%, black);
+      background: linear-gradient(180deg, color-mix(in srgb, var(--pagination-accent) 92%, white), var(--pagination-accent));
+      box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--pagination-accent) 30%, transparent);
       color: var(--wrn-color-primary-contrast);
-      font-weight: 700;
+      font-weight: 650;
     }
 
     .wrn-pagination__gap {
@@ -350,5 +358,13 @@ component Pagination {
         text-align: center;
       }
     }
+  
+    .wrn-pagination__step {
+      color: var(--wrn-color-text);
+      border-color: var(--wrn-color-border);
+      border-bottom-color: var(--wrn-color-border-strong, var(--wrn-color-border));
+      background: linear-gradient(180deg, var(--wrn-color-surface), var(--wrn-color-surface-soft, var(--wrn-color-surface)));
+      box-shadow: var(--wrn-shadow-1);
+    }
   }
 }
diff --git a/packages/ui/components/PinInput.wrn b/packages/ui/components/PinInput.wrn
index d9ef4ccd..24b5e7ea 100644
--- a/packages/ui/components/PinInput.wrn
+++ b/packages/ui/components/PinInput.wrn
@@ -140,21 +140,21 @@ component PinInput {
 
     .wrn-next__pin-heading legend {
       padding: 0;
-      font-size: 0.82em;
-      font-weight: 700;
+      font-size: 0.8125rem;
+      font-weight: 600;
     }
 
     .wrn-next__pin-clear {
       display: inline-flex;
       align-items: center;
-      gap: 0.35rem;
+      gap: 0.3rem;
       padding: 0;
       border: 0;
-      color: var(--wrn-component-color);
+      color: var(--wrn-color-text-muted);
       background: transparent;
       font: inherit;
-      font-size: 0.7em;
-      font-weight: 750;
+      font-size: 0.75rem;
+      font-weight: 550;
       cursor: pointer;
     }
 
@@ -177,24 +177,23 @@ component PinInput {
     }
 
     .wrn-next--pin-input .wrn-next__pin-cells input {
-      flex: 0 1 2.5rem;
-      width: 2.5rem;
-      height: var(--wrn-control-height, 2.5rem);
+      flex: 0 1 2.75rem;
+      width: 2.75rem;
+      height: 3rem;
       min-width: 0;
       padding: 0;
-      border: 1px solid var(--wrn-color-border);
+      border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
       border-radius: var(--wrn-radius-sm);
       color: var(--wrn-color-text);
-      background: var(--wrn-color-bg);
+      background: var(--wrn-color-input-background, var(--wrn-color-surface));
+      box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.05);
       font: inherit;
-      font-size: 1rem;
+      font-family: var(--wrn-font-mono, monospace);
+      font-size: 1.125rem;
       font-weight: 600;
       text-align: center;
       caret-color: var(--wrn-component-color);
-      transition:
-        border-color var(--wrn-motion-base) var(--wrn-ease-standard),
-        box-shadow var(--wrn-motion-base) var(--wrn-ease-standard),
-        transform var(--wrn-motion-fast) var(--wrn-ease-standard);
+      transition: border-color var(--wrn-motion-base) var(--wrn-ease-standard), box-shadow var(--wrn-motion-base) var(--wrn-ease-standard);
     }
 
     .wrn-next--pin-input .wrn-next__pin-cells input::placeholder {
@@ -206,7 +205,7 @@ component PinInput {
       border-color: var(--wrn-component-color);
       outline: 0;
       box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-component-color) 18%, transparent);
-      transform: translateY(-1px);
+      transform: none;
     }
 
     .wrn-next--pin-input .wrn-next__pin-cells input:disabled,
@@ -216,14 +215,14 @@ component PinInput {
     }
 
     .wrn-next__pin-separator {
-      color: var(--wrn-color-muted);
-      font-size: 1.1rem;
-      font-weight: 800;
+      color: var(--wrn-color-border-strong, var(--wrn-color-muted));
+      font-size: 1rem;
+      font-weight: 600;
     }
 
     .wrn-next--pin-input[data-complete="true"] .wrn-next__pin-cells input {
-      border-color: color-mix(in srgb, var(--wrn-component-color) 72%, var(--wrn-color-border));
-      background: color-mix(in srgb, var(--wrn-component-color) 7%, var(--wrn-color-bg));
+      border-color: color-mix(in srgb, var(--wrn-color-success) 60%, var(--wrn-color-border));
+      background: color-mix(in srgb, var(--wrn-color-success) 6%, var(--wrn-color-input-background, var(--wrn-color-surface)));
     }
 
     @media (max-width: 480px) {
@@ -303,7 +302,7 @@ component PinInput {
 
         .wrn-component p {
           margin: 0;
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-muted, var(--wrn-color-muted));
           line-height: 1.6;
         }
   }
diff --git a/packages/ui/components/Popover.wrn b/packages/ui/components/Popover.wrn
index 61c256a5..b2d85b71 100644
--- a/packages/ui/components/Popover.wrn
+++ b/packages/ui/components/Popover.wrn
@@ -247,26 +247,28 @@ component Popover {
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      gap: 0.55rem;
+      gap: 0.5rem;
       min-height: var(--wrn-control-height, 2.5rem);
-      padding: 0.65rem 0.9rem;
+      padding: 0 0.875rem;
       color: var(--wrn-color-text);
-      background: var(--wrn-color-surface-raised);
+      background: linear-gradient(180deg, var(--wrn-color-surface), var(--wrn-color-surface-soft, var(--wrn-color-surface)));
       border: 1px solid var(--wrn-color-border);
+      border-bottom-color: var(--wrn-color-border-strong, var(--wrn-color-border));
       border-radius: var(--wrn-radius-sm);
+      box-shadow: var(--wrn-shadow-1);
       font: inherit;
-      font-size: 0.84rem;
+      font-size: 0.875rem;
       font-weight: 600;
       cursor: pointer;
-      transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
+      transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease, transform 150ms ease;
     }
 
     .wrn-popover__trigger:hover,
     .wrn-popover__trigger:focus-visible,
     .wrn-popover[data-open="true"] .wrn-popover__trigger {
-      color: var(--popover-accent);
-      background: var(--popover-soft);
-      border-color: color-mix(in srgb, var(--popover-accent) 38%, var(--wrn-color-border));
+      color: var(--wrn-color-text);
+      background: var(--wrn-color-surface);
+      border-color: var(--wrn-color-border-strong, var(--wrn-color-border));
       outline: none;
     }
 
@@ -300,20 +302,15 @@ component Popover {
     .wrn-popover__panel {
       position: absolute;
       z-index: 1121;
-      top: calc(100% + 0.72rem);
+      top: calc(100% + 0.5rem);
       left: 0;
       width: 18rem;
       max-width: calc(100vw - 1.5rem);
       color: var(--wrn-color-text);
-      background:
-        linear-gradient(145deg, color-mix(in srgb, var(--popover-accent) 5%, transparent), transparent 62%),
-        color-mix(in srgb, var(--wrn-color-surface-raised) 97%, transparent);
-      border: 1px solid color-mix(in srgb, var(--popover-accent) 18%, var(--wrn-color-border));
-      border-radius: var(--wrn-radius-md);
-      box-shadow:
-        0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
-        0 24px 64px color-mix(in srgb, black 22%, transparent);
-      backdrop-filter: blur(18px);
+      background: var(--wrn-color-surface-raised);
+      border: 1px solid var(--wrn-color-border);
+      border-radius: var(--wrn-radius);
+      box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
     }
 
     .wrn-popover[data-width="sm"] .wrn-popover__panel {
@@ -364,10 +361,8 @@ component Popover {
     }
 
     .wrn-popover[data-variant="soft"] .wrn-popover__panel {
-      background:
-        linear-gradient(145deg, var(--popover-soft), transparent 70%),
-        var(--wrn-color-surface-raised);
-      box-shadow: 0 18px 48px color-mix(in srgb, black 16%, transparent);
+      background: color-mix(in srgb, var(--popover-accent) 4%, var(--wrn-color-surface-raised));
+      box-shadow: var(--wrn-shadow-3);
     }
 
     .wrn-popover[data-variant="outline"] .wrn-popover__panel {
@@ -383,13 +378,13 @@ component Popover {
 
     .wrn-popover__arrow {
       position: absolute;
-      top: -0.35rem;
+      top: -0.3125rem;
       left: 1.25rem;
-      width: 0.7rem;
-      height: 0.7rem;
+      width: 0.625rem;
+      height: 0.625rem;
       background: inherit;
-      border-top: 1px solid color-mix(in srgb, var(--popover-accent) 18%, var(--wrn-color-border));
-      border-left: 1px solid color-mix(in srgb, var(--popover-accent) 18%, var(--wrn-color-border));
+      border-top: 1px solid var(--wrn-color-border);
+      border-left: 1px solid var(--wrn-color-border);
       transform: rotate(45deg);
     }
 
@@ -422,9 +417,8 @@ component Popover {
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
-      gap: 0.8rem;
-      padding: 1rem 1rem 0.8rem;
-      border-bottom: 1px solid var(--wrn-color-border);
+      gap: 0.75rem;
+      padding: 0.875rem 0.875rem 0.625rem;
     }
 
     .wrn-popover__heading {
@@ -458,13 +452,14 @@ component Popover {
     }
 
     .wrn-popover__heading-copy h3 {
-      font-size: 0.9rem;
-      font-weight: 650;
+      font-size: 0.875rem;
+      font-weight: 620;
+      letter-spacing: -0.01em;
     }
 
     .wrn-popover__heading-copy p {
       color: var(--wrn-color-text-muted);
-      font-size: 0.74rem;
+      font-size: 0.78rem;
       line-height: 1.5;
     }
 
@@ -494,14 +489,17 @@ component Popover {
     }
 
     .wrn-popover__body {
-      padding: 1rem;
+      padding: 0 0.875rem 0.875rem;
       color: var(--wrn-color-text-muted);
-      font-size: 0.8rem;
+      font-size: 0.8125rem;
       line-height: 1.6;
     }
 
     .wrn-popover__footer {
-      padding: 0 1rem 1rem;
+      padding: 0.75rem 0.875rem;
+      border-top: 1px solid var(--wrn-color-border);
+      background: var(--wrn-color-surface-soft, transparent);
+      border-radius: 0 0 var(--wrn-radius) var(--wrn-radius);
     }
 
     .wrn-popover__action {
@@ -509,16 +507,18 @@ component Popover {
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      gap: 0.45rem;
-      min-height: 2.35rem;
-      padding: 0.58rem 0.8rem;
+      gap: 0.4rem;
+      min-height: 2rem;
+      padding: 0 0.75rem;
       color: var(--popover-contrast);
-      background: var(--popover-accent);
-      border: 0;
-      border-radius: 0.7rem;
+      background: linear-gradient(180deg, color-mix(in srgb, var(--popover-accent) 92%, white), var(--popover-accent));
+      border: 1px solid color-mix(in srgb, var(--popover-accent) 82%, black);
+      border-bottom-color: color-mix(in srgb, var(--popover-accent) 64%, black);
+      border-radius: var(--wrn-radius-sm);
+      box-shadow: var(--wrn-highlight-edge, none);
       font: inherit;
-      font-size: 0.78rem;
-      font-weight: 650;
+      font-size: 0.8125rem;
+      font-weight: 600;
       text-decoration: none;
       cursor: pointer;
     }
diff --git a/packages/ui/components/PortalDashboard.wrn b/packages/ui/components/PortalDashboard.wrn
index eafa0c2c..c91f43c2 100644
--- a/packages/ui/components/PortalDashboard.wrn
+++ b/packages/ui/components/PortalDashboard.wrn
@@ -441,7 +441,7 @@ component PortalDashboard {
 
         .wrn-component p {
           margin: 0;
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-muted, var(--wrn-color-muted));
           line-height: 1.6;
         }
   }
diff --git a/packages/ui/components/PreferenceSwitcher.wrn b/packages/ui/components/PreferenceSwitcher.wrn
index f7ecd3e8..2948db76 100644
--- a/packages/ui/components/PreferenceSwitcher.wrn
+++ b/packages/ui/components/PreferenceSwitcher.wrn
@@ -336,7 +336,7 @@ size: string = "default"
 
         .wrn-component p {
           margin: 0;
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-muted, var(--wrn-color-muted));
           line-height: 1.6;
         }
   }
diff --git a/packages/ui/components/RangeSlider.wrn b/packages/ui/components/RangeSlider.wrn
index c6d2a632..c29527ea 100644
--- a/packages/ui/components/RangeSlider.wrn
+++ b/packages/ui/components/RangeSlider.wrn
@@ -85,7 +85,7 @@ component RangeSlider {
       <div class="wrn-next__field-heading"><label class="{hiddenLabel ? 'wrn-next__sr-only' : ''}" for="{id || name}">{label}</label>{#if cornerHint}<span class="wrn-next__field-hint">{cornerHint}</span>{/if}</div>
       <div class="wrn-next__range-control" data-variant="{variant}" data-icon-position="{iconPosition}" data-show-steps="{showSteps}">
         {#if icon}<span class="{icon}" aria-hidden="true"></span>{/if}
-        <button type="button" class="wrn-next__range-stepper" aria-label="Decrease {label}" disabled="{disabled || readonly}" @click="decreaseValue(event)">−</button>
+        <button type="button" class="wrn-next__range-stepper" aria-label="Decrease {label}" disabled="{disabled || readonly}" @click="decreaseValue(event)"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M3.5 8h9"></path></svg></button>
         <div class="wrn-next__range-track">
           <input id="{id || name}" class="wrn-next__sr-only wrn-next__range-value" type="number" name="{name}" value="{currentValue}" min="{min}" max="{max}" step="{step}" required="{required}" readonly />
           <div class="wrn-next__custom-slider" role="slider" tabindex="{disabled ? '-1' : '0'}" aria-label="{hiddenLabel ? label : ''}" aria-valuemin="{min}" aria-valuemax="{max}" aria-valuenow="{currentValue}" aria-disabled="{disabled}" aria-readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" style="--wrn-range-progress: {percent()}%" @pointerdown="beginSlide(event)" @pointermove="moveSlide(event)" @pointerup="endSlide(event)" @pointercancel="endSlide(event)" @keydown="handleKey(event)" @focus="emitFocus('focus', event)" @blur="emitFocus('blur', event)">
@@ -95,7 +95,7 @@ component RangeSlider {
           {#if showBounds}<div class="wrn-next__range-bounds"><span>{min}</span><span>Step {step}</span><span>{max}</span></div>{/if}
         </div>
         {#if showValue}<output for="{id || name}">{currentValue}</output>{/if}
-        <button type="button" class="wrn-next__range-stepper" aria-label="Increase {label}" disabled="{disabled || readonly}" @click="increaseValue(event)">+</button>
+        <button type="button" class="wrn-next__range-stepper" aria-label="Increase {label}" disabled="{disabled || readonly}" @click="increaseValue(event)"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M3.5 8h9"></path><path d="M8 3.5v9"></path></svg></button>
       </div>
       {#if helperText}<small class="wrn-next__field-help">{helperText}</small>{/if}<small class="wrn-next__field-error" data-error="{name}">{error}</small>
     </div>
@@ -132,7 +132,7 @@ component RangeSlider {
     .wrn-next__slider-fill {
       position: absolute;
       top: 50%;
-      height: 0.4rem;
+      height: 0.375rem;
       border-radius: 999px;
       transform: translateY(-50%);
       content: "";
@@ -141,15 +141,16 @@ component RangeSlider {
     .wrn-next__custom-slider::before {
       right: 0;
       left: 0;
-      background: var(--wrn-color-surface-2);
-      box-shadow: inset 0 0 0 1px var(--wrn-color-border);
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
+      box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.12);
     }
 
     .wrn-next__slider-fill {
       z-index: 1;
       left: 0;
       width: var(--wrn-range-progress);
-      background: var(--wrn-field-color);
+      background: linear-gradient(180deg, color-mix(in srgb, var(--wrn-field-color) 88%, white), var(--wrn-field-color));
+      box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25);
     }
 
     .wrn-next__slider-thumb {
@@ -157,13 +158,14 @@ component RangeSlider {
       z-index: 3;
       top: 50%;
       left: var(--wrn-range-progress);
-      width: 1.25rem;
-      height: 1.25rem;
-      border: 3px solid var(--wrn-field-color);
+      width: 1.125rem;
+      height: 1.125rem;
+      border: 1px solid rgb(0 0 0 / 0.12);
       border-radius: 50%;
-      background: var(--wrn-color-surface);
-      box-shadow: var(--wrn-shadow-1);
+      background: #fff;
+      box-shadow: 0 1px 3px rgb(0 0 0 / 0.25), 0 0 0 3px color-mix(in srgb, var(--wrn-field-color) 22%, transparent);
       transform: translate(-50%, -50%);
+      transition: box-shadow 120ms ease;
     }
 
     .wrn-next__custom-slider:focus-visible {
@@ -197,8 +199,9 @@ component RangeSlider {
     .wrn-next__range-bounds {
       display: grid;
       grid-template-columns: 1fr auto 1fr;
-      color: var(--wrn-color-muted);
-      font-size: 0.78em;
+      color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+      font-family: var(--wrn-font-mono, monospace);
+      font-size: 0.7em;
       font-variant-numeric: tabular-nums;
     }
 
@@ -212,27 +215,35 @@ component RangeSlider {
 
     .wrn-next__range-control output {
       min-width: 3ch;
+      font-family: var(--wrn-font-mono, monospace);
+      font-size: 0.8125rem;
+      font-weight: 600;
       font-variant-numeric: tabular-nums;
     }
 
     .wrn-next__range-stepper {
       display: inline-grid;
-      width: 2.35rem;
-      height: 2.35rem;
+      width: 2rem;
+      height: 2rem;
       flex: 0 0 auto;
       place-items: center;
       border: 1px solid var(--wrn-color-border);
-      border-radius: 50%;
-      background: var(--wrn-color-surface);
+      border-bottom-color: var(--wrn-color-border-strong, var(--wrn-color-border));
+      border-radius: var(--wrn-radius-sm);
+      background: linear-gradient(180deg, var(--wrn-color-surface), var(--wrn-color-surface-soft, var(--wrn-color-surface)));
+      box-shadow: var(--wrn-shadow-1);
       color: var(--wrn-color-text);
       font: inherit;
-      font-size: 1.2rem;
+      font-size: 1rem;
       cursor: pointer;
     }
 
+    .wrn-next__range-stepper > svg { display: block; }
+
     .wrn-next__range-stepper:hover:not(:disabled) {
-      border-color: var(--wrn-field-color);
-      color: var(--wrn-field-color);
+      border-color: var(--wrn-color-border-strong, var(--wrn-color-border));
+      color: var(--wrn-color-text);
+      background: var(--wrn-color-surface);
     }
 
     .wrn-next__range-stepper:disabled {
@@ -305,7 +316,7 @@ component RangeSlider {
 
         .wrn-component p {
           margin: 0;
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-muted, var(--wrn-color-muted));
           line-height: 1.6;
         }
 
@@ -320,8 +331,9 @@ component RangeSlider {
           display: block;
           min-height: 1em;
           margin-top: 0.25rem;
-          color: var(--wrn-color-danger);
-          font-size: 0.8rem;
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
+          font-size: 0.78rem;
+          font-weight: 550;
         }
 
         .wrn-next--choice {
@@ -348,13 +360,14 @@ component RangeSlider {
           width: 100%;
           min-height: var(--wrn-control-height, 2.5rem);
           padding: 0.5rem 0.75rem;
-          border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-sm, 6px);
+          border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
+          border-radius: var(--wrn-radius-sm, 8px);
           outline: 0;
           color: var(--wrn-color-text);
-          background: var(--wrn-color-bg);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
           font: inherit;
           font-weight: 500;
+          transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
         }
         .wrn-auth-form form > .wrn-next--field,
         .wrn-auth-form form > .wrn-field {
@@ -368,8 +381,8 @@ component RangeSlider {
       box-shadow: none;
         }
         .wrn-next--field :where(input, textarea, select):focus-visible {
-          border-color: var(--wrn-color-primary);
-          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
+          border-color: var(--wrn-field-color, var(--wrn-color-primary));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04), 0 0 0 3px color-mix(in srgb, var(--wrn-field-color, var(--wrn-color-primary)) 18%, transparent);
         }
         .wrn-next--field textarea {
           resize: vertical;
@@ -403,12 +416,14 @@ component RangeSlider {
           font-size: 0.8125rem;
           font-weight: 600;
           line-height: 1.35;
+          letter-spacing: -0.005em;
         }
         .wrn-next__field-hint,
         .wrn-next__field-help {
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
           font-size: 0.75rem;
-          font-weight: 500;
+          font-weight: 450;
+          line-height: 1.45;
         }
         .wrn-next__field-control {
           position: relative;
@@ -416,10 +431,11 @@ component RangeSlider {
         }
         .wrn-next__field-control > :is(input, textarea, select) {
           padding-inline: 0.85rem;
-          border-color: var(--wrn-color-border);
+          border-color: var(--wrn-color-input-border, var(--wrn-color-border));
           border-radius: var(--wrn-radius-sm);
-          background: var(--wrn-color-surface);
-          font-size: 0.8125rem;
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
+          font-size: 0.875rem;
         }
         .wrn-next__field-control[data-has-icon="true"][data-icon-position="start"] > :is(input, textarea, select) {
           padding-inline-start: 2.5rem;
@@ -460,7 +476,8 @@ component RangeSlider {
         }
         .wrn-next--field[data-variant="ghost"] .wrn-next__field-control > :is(input, textarea, select) {
           border-color: transparent;
-          background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
+          box-shadow: none;
         }
         .wrn-next__field-floating-label {
           position: absolute;
@@ -501,9 +518,9 @@ component RangeSlider {
         }
         .wrn-next__field-error {
           min-height: 1em;
-          color: var(--wrn-color-danger);
-          font-size: 0.82em;
-          font-weight: 600;
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
+          font-size: 0.78rem;
+          font-weight: 550;
         }
         .wrn-next__field-error:empty {
           display: none;
@@ -511,14 +528,16 @@ component RangeSlider {
         .wrn-next--field[data-invalid="true"] :is(input, textarea, select),
         .wrn-next--choice-field[data-invalid="true"] input {
           border-color: var(--wrn-color-danger);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-danger) 12%, transparent);
         }
         .wrn-next--field :is(input, textarea, select):disabled,
         .wrn-next--choice-field input:disabled {
           cursor: not-allowed;
-          opacity: 0.58;
+          opacity: 0.55;
+          background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
         }
         .wrn-next--field :is(input, textarea, select):read-only {
-          background: var(--wrn-color-surface-2);
+          background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
         }
         .wrn-next--field[data-inline="true"],
         .wrn-next--choice-field[data-inline="true"] {
@@ -575,11 +594,13 @@ component RangeSlider {
           display: flex;
           min-width: 0;
           align-items: center;
-          gap: 0.65rem;
+          gap: 0.625rem;
           color: var(--wrn-color-text);
           width: 100%;
-          font-size: 0.75rem;
+          font-size: 0.875rem;
           font-weight: 500;
+          line-height: 1.4;
+          cursor: pointer;
         }
         .wrn-next__checkbox-content > .wrn-next__choice {
           width: 100%;
@@ -594,12 +615,13 @@ component RangeSlider {
         .wrn-next__choice-copy {
           display: grid;
           min-width: 0;
-          gap: 0.15rem;
-          line-height: 1.35;
+          gap: 0.125rem;
+          line-height: 1.4;
         }
         .wrn-next__choice-copy small {
-          color: var(--wrn-color-muted);
-          font-weight: 500;
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+          font-size: 0.78rem;
+          font-weight: 450;
         }
         .wrn-next__radio-group,
         .wrn-next__checkbox-group {
@@ -619,15 +641,18 @@ component RangeSlider {
         .wrn-next--radio-field[data-card="true"] .wrn-next--radio,
         .wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox {
           min-height: 4.5rem;
-          padding: 0.85rem;
+          padding: 0.9rem 1rem;
           border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-sm);
+          border-radius: var(--wrn-radius);
           background: var(--wrn-color-surface);
+          box-shadow: var(--wrn-shadow-1);
+          transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
         }
         .wrn-next--radio-field[data-card="true"] .wrn-next--radio:has(input:checked),
         .wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox:has(input:checked) {
           border-color: var(--wrn-field-color);
-          box-shadow: 0 0 0 1px var(--wrn-field-color);
+          background: color-mix(in srgb, var(--wrn-field-color) 5%, var(--wrn-color-surface));
+          box-shadow: 0 0 0 1px var(--wrn-field-color), var(--wrn-shadow-1);
         }
         .wrn-next--radio-field[data-list="true"] .wrn-next--radio,
         .wrn-next--checkbox-field[data-list="true"] .wrn-next--checkbox {
@@ -648,19 +673,21 @@ component RangeSlider {
         }
         .wrn-next__choice[data-variant="outlined"],
         .wrn-next__choice[data-variant="floating"] {
-          padding: 0.65rem 0.8rem;
+          padding: 0.7rem 0.85rem;
           border: 1px solid var(--wrn-color-border);
           border-radius: var(--wrn-radius-sm);
+          background: var(--wrn-color-surface);
         }
         .wrn-next__choice[data-variant="pill"] {
-          padding: 0.65rem 1rem;
+          padding: 0.6rem 1rem;
+          border: 1px solid color-mix(in srgb, var(--wrn-field-color) 22%, var(--wrn-color-border));
           border-radius: 999px;
-          background: color-mix(in srgb, var(--wrn-field-color) 9%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface));
         }
         .wrn-next__choice[data-variant="ghost"] {
-          padding: 0.65rem 0.8rem;
+          padding: 0.65rem 0.85rem;
           border-radius: var(--wrn-radius-sm);
-          background: color-mix(in srgb, var(--wrn-field-color) 7%, transparent);
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, transparent);
         }
         .wrn-next__choice[data-variant="underline"] {
           padding-block: 0.5rem;
@@ -694,25 +721,35 @@ component RangeSlider {
           align-items: center;
           justify-content: space-between;
           gap: 0.75rem;
-          padding: 0.7rem 0.85rem;
-          border: 1px solid var(--wrn-color-border);
+          padding: 0.55rem 0.85rem;
+          border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
           border-radius: var(--wrn-radius-sm);
-          background: var(--wrn-color-surface);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
           color: var(--wrn-color-text);
           font: inherit;
+          font-size: 0.875rem;
+          font-variant-numeric: tabular-nums;
           text-align: left;
+          cursor: pointer;
+          transition: border-color 120ms ease, box-shadow 120ms ease;
         }
         .wrn-next__calendar,
         .wrn-next__time-panel {
-          z-index: 20;
+          position: absolute;
+          z-index: 40;
+          top: 100%;
+          left: 0;
           display: grid;
-          width: min(100%, 22rem);
+          width: min(calc(100vw - 2rem), 19.5rem);
           gap: 0.75rem;
-          padding: 0.85rem;
+          margin-top: 0.375rem;
+          padding: 0.75rem;
           border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-md);
-          background: var(--wrn-color-surface);
-          box-shadow: var(--wrn-shadow-3);
+          border-radius: var(--wrn-radius);
+          background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
+          box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
+          animation: wrn-popover-enter var(--wrn-motion-base, 160ms) var(--wrn-ease-emphasized, ease) both;
         }
         .wrn-next--date-picker[data-expanded="false"] .wrn-next__calendar,
         .wrn-next--time-picker[data-expanded="false"] .wrn-next__time-panel {
@@ -722,29 +759,42 @@ component RangeSlider {
         .wrn-next__time-panel button {
           min-height: 2.25rem;
           border: 0;
-          border-radius: var(--wrn-radius-sm);
+          border-radius: calc(var(--wrn-radius-sm) - 2px);
           background: transparent;
           color: inherit;
+          font: inherit;
+          font-size: 0.8125rem;
+          font-variant-numeric: tabular-nums;
+          cursor: pointer;
+          transition: background-color 120ms ease, color 120ms ease;
         }
         .wrn-next__calendar-weekdays,
         .wrn-next__calendar-grid {
           display: grid;
           grid-template-columns: repeat(7, 1fr);
-          gap: 0.2rem;
+          gap: 0.125rem;
           text-align: center;
         }
         .wrn-next__calendar-weekdays {
-          color: var(--wrn-color-muted);
-          font-size: 0.75rem;
+          padding-bottom: 0.375rem;
+          border-bottom: 1px solid var(--wrn-color-border);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+          font-family: var(--wrn-font-mono, monospace);
+          font-size: 0.625rem;
+          font-weight: 600;
+          letter-spacing: 0.06em;
+          text-transform: uppercase;
         }
         .wrn-next__calendar-grid button:hover,
         .wrn-next__time-panel button:hover {
-          background: var(--wrn-color-surface-2);
+          background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
         }
         .wrn-next__calendar-grid button[aria-pressed="true"],
         .wrn-next__time-panel button[aria-pressed="true"] {
           background: var(--wrn-field-color);
           color: var(--wrn-color-primary-contrast, #fff);
+          box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--wrn-field-color) 35%, transparent);
+          font-weight: 650;
         }
         .wrn-next__time-period {
           display: flex;
@@ -778,7 +828,7 @@ component RangeSlider {
         .wrn-next--field[data-variant="ghost"]
           :is(.wrn-next__input-group-control, .wrn-next__file-control, .wrn-next__color-control) {
           border-color: transparent;
-          background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
         }
         @media (max-width: 640px) {
           .wrn-next--field[data-inline="true"],
@@ -800,5 +850,9 @@ component RangeSlider {
         .wrn-next--strong-password input.wrn-invalid {
           border-color: var(--wrn-color-danger);
         }
+  
+    .wrn-next__custom-slider:hover .wrn-next__slider-thumb {
+      box-shadow: 0 1px 3px rgb(0 0 0 / 0.25), 0 0 0 5px color-mix(in srgb, var(--wrn-field-color) 22%, transparent);
+    }
   }
 }
diff --git a/packages/ui/components/Rating.wrn b/packages/ui/components/Rating.wrn
index 2e437cec..955c8a0e 100644
--- a/packages/ui/components/Rating.wrn
+++ b/packages/ui/components/Rating.wrn
@@ -49,12 +49,32 @@ component Rating {
     .wrn-rating { display:grid; gap:.6rem; color:var(--wrn-color-text); }
     .wrn-rating p { margin:0; color:var(--wrn-color-muted); font-size:.875rem; }
     .wrn-rating__stars { display:flex; align-items:center; gap:.25rem; }
-    .wrn-rating button { display:grid; place-items:center; width:2rem; height:2rem; padding:.2rem; border:0; background:transparent; color:var(--wrn-color-muted); cursor:pointer; }
+    .wrn-rating button {
+      display: grid;
+      place-items: center;
+      width: 2rem;
+      height: 2rem;
+      padding: .2rem;
+      border: 0;
+      border-radius: calc(var(--wrn-radius-sm) - 2px);
+      background: transparent;
+      color: var(--wrn-color-border-strong, var(--wrn-color-muted));
+      cursor: pointer;
+      transition: color 120ms ease, transform 120ms ease;
+    }
     .wrn-rating svg { width:1.5rem; height:1.5rem; fill:none; stroke:currentColor; stroke-width:1.5; }
-    .wrn-rating button[data-filled="true"] { color:var(--wrn-color-warning-text); }
+    .wrn-rating button[data-filled="true"] {
+      color: var(--wrn-color-warning);
+    }
     .wrn-rating svg { grid-area:1 / 1; }
     .wrn-rating .wrn-rating__fill { fill:currentColor; clip-path:inset(0 calc(100% - var(--fill)) 0 0); }
-    .wrn-rating output { margin-inline-start:.5rem; font-size:.8rem; color:var(--wrn-color-muted); }
+    .wrn-rating output {
+      margin-inline-start: .5rem;
+      font-family: var(--wrn-font-mono, monospace);
+      font-size: .75rem;
+      font-variant-numeric: tabular-nums;
+      color: var(--wrn-color-muted);
+    }
     .wrn-rating button:focus-visible { outline:2px solid var(--wrn-color-focus); outline-offset:2px; border-radius:4px; }
   }
 }
diff --git a/packages/ui/components/Scrollspy.wrn b/packages/ui/components/Scrollspy.wrn
index 4f51f702..d650b7fa 100644
--- a/packages/ui/components/Scrollspy.wrn
+++ b/packages/ui/components/Scrollspy.wrn
@@ -112,9 +112,10 @@ component Scrollspy {
 
     .wrn-scrollspy__heading {
       margin: 0 0 0.5rem;
-      color: var(--wrn-color-text-muted);
-      font-size: 0.72rem;
-      font-weight: 700;
+      color: var(--wrn-color-text-subtle, var(--wrn-color-text-muted));
+      font-family: var(--wrn-font-mono, monospace);
+      font-size: 0.65rem;
+      font-weight: 600;
       letter-spacing: 0.08em;
       text-transform: uppercase;
     }
@@ -149,7 +150,7 @@ component Scrollspy {
 
     .wrn-scrollspy__link[data-active="true"] {
       border-left-color: var(--scrollspy-accent);
-      color: var(--scrollspy-accent);
+      color: var(--wrn-color-text);
       font-weight: 600;
     }
 
diff --git a/packages/ui/components/SearchBox.wrn b/packages/ui/components/SearchBox.wrn
index 9787e731..642c9aec 100644
--- a/packages/ui/components/SearchBox.wrn
+++ b/packages/ui/components/SearchBox.wrn
@@ -86,9 +86,9 @@ component SearchBox {
     .wrn-search-box { width: 100%; }
     .wrn-search-box__label {
       display: block;
-      margin-bottom: 0.5rem;
+      margin-bottom: 0.4rem;
       color: var(--wrn-color-text);
-      font-size: 0.875rem;
+      font-size: 0.8125rem;
       font-weight: 600;
     }
     .wrn-search-box__label[data-hidden="true"] {
@@ -105,22 +105,25 @@ component SearchBox {
     .wrn-search-box__control { position: relative; display: flex; align-items: center; }
     .wrn-search-box__search-icon {
       position: absolute;
-      left: 1rem;
-      width: 1.25rem;
-      height: 1.25rem;
+      left: 0.875rem;
+      width: 1.125rem;
+      height: 1.125rem;
       color: var(--wrn-color-input-placeholder);
       pointer-events: none;
     }
     .wrn-search-box__input {
       width: 100%;
-      height: 3rem;
-      padding: 0 6rem 0 3rem;
+      height: 2.75rem;
+      padding: 0 5.5rem 0 2.5rem;
       border: 1px solid var(--wrn-color-input-border);
-      border-radius: var(--wrn-radius);
+      border-radius: var(--wrn-radius-sm);
       outline: none;
       color: var(--wrn-color-input-text);
       background: var(--wrn-color-input-background);
-      transition: border-color var(--wrn-motion-base) var(--wrn-ease-standard), box-shadow var(--wrn-motion-base) var(--wrn-ease-standard);
+      box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
+      font: inherit;
+      font-size: 0.875rem;
+      transition: border-color var(--wrn-motion-base), box-shadow var(--wrn-motion-base);
     }
     .wrn-search-box__input[data-size="sm"] { height: 2.5rem; }
     .wrn-search-box__input[data-size="lg"] { height: 3.5rem; }
@@ -128,7 +131,7 @@ component SearchBox {
     .wrn-search-box__input:hover { border-color: var(--wrn-color-input-border-hover); }
     .wrn-search-box__input:focus {
       border-color: var(--wrn-color-input-border-focus);
-      box-shadow: 0 0 0 2px var(--wrn-color-focus);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-focus) 18%, transparent);
     }
     .wrn-search-box__input:disabled, .wrn-search-box__button:disabled { cursor: not-allowed; opacity: 0.6; }
     .wrn-search-box__button {
@@ -141,9 +144,23 @@ component SearchBox {
       border-radius: var(--wrn-radius-sm);
       transition: color var(--wrn-motion-base), background var(--wrn-motion-base);
     }
-    .wrn-search-box__clear { right: 3rem; width: 2rem; height: 2rem; color: var(--wrn-color-text-muted); background: transparent; }
+    .wrn-search-box__clear {
+      right: 2.75rem;
+      width: 1.75rem;
+      height: 1.75rem;
+      color: var(--wrn-color-text-muted);
+      background: transparent;
+    }
     .wrn-search-box__clear:hover { color: var(--wrn-color-text); background: var(--wrn-color-surface-soft); }
-    .wrn-search-box__submit { right: 0.5rem; width: 2.25rem; height: 2.25rem; color: var(--wrn-color-on-primary); background: var(--wrn-color-primary); }
+    .wrn-search-box__submit {
+      right: 0.375rem;
+      width: 2rem;
+      height: 2rem;
+      color: var(--wrn-color-on-primary);
+      background: linear-gradient(180deg, color-mix(in srgb, var(--wrn-color-primary) 92%, white), var(--wrn-color-primary));
+      border: 1px solid color-mix(in srgb, var(--wrn-color-primary) 82%, black) !important;
+      box-shadow: var(--wrn-highlight-edge, none);
+    }
     .wrn-search-box__submit:hover { background: var(--wrn-color-primary-hover); }
     .wrn-search-box__button:focus-visible { outline: 2px solid var(--wrn-color-focus); outline-offset: 2px; }
     .wrn-search-box__button-icon { width: 1rem; height: 1rem; }
diff --git a/packages/ui/components/Section.wrn b/packages/ui/components/Section.wrn
index 1f0ac6a0..0f969c27 100644
--- a/packages/ui/components/Section.wrn
+++ b/packages/ui/components/Section.wrn
@@ -112,6 +112,76 @@ component Section {
       --section-ink: var(--wrn-color-on-danger);
     }
 
+    .wrn-section[data-variant="solid"][data-color="secondary"] {
+      --section-tint: var(--wrn-color-secondary);
+      --section-ink: var(--wrn-color-on-secondary, #fff);
+    }
+
+    .wrn-section[data-variant="solid"][data-color="success"] {
+      --section-tint: var(--wrn-color-success);
+      --section-ink: #fff;
+    }
+
+    .wrn-section[data-variant="solid"][data-color="info"] {
+      --section-tint: var(--wrn-color-info);
+      --section-ink: #fff;
+    }
+
+    .wrn-section[data-variant="solid"][data-color="warning"] {
+      --section-tint: var(--wrn-color-warning);
+      --section-ink: #fff;
+    }
+
+    .wrn-section[data-spacing="none"] {
+      padding-block: 0;
+    }
+
+    /* Soft and raised read as bands: hairlines mark where they start and end. */
+    .wrn-section[data-variant="soft"],
+    .wrn-section[data-variant="tinted"] {
+      box-shadow:
+        inset 0 1px 0 color-mix(in srgb, var(--wrn-color-border) 70%, transparent),
+        inset 0 -1px 0 color-mix(in srgb, var(--wrn-color-border) 70%, transparent);
+    }
+
+    .wrn-section[data-variant="raised"] {
+      box-shadow:
+        inset 0 1px 0 var(--wrn-color-border),
+        inset 0 -1px 0 var(--wrn-color-border),
+        0 12px 32px -20px rgb(0 0 0 / 0.25);
+    }
+
+    /* Solid bands carry a faint dot texture so large fills do not look flat. */
+    .wrn-section[data-variant="solid"] {
+      background:
+        radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.12) 1px, transparent 0) 0 0 / 20px 20px,
+        var(--section-tint);
+    }
+
+    /* Panel: the section becomes a framed, rounded band inside the page gutter. */
+    .wrn-section[data-variant="panel"] {
+      --section-tint: var(--wrn-color-surface);
+      width: auto;
+      margin-inline: clamp(0.75rem, 3vw, 2rem);
+      border: 1px solid var(--wrn-color-border);
+      border-radius: var(--wrn-radius-lg, 1rem);
+      box-shadow: var(--wrn-shadow-1);
+    }
+
+    /* Grid: a blueprint backdrop that fades out toward the edges. */
+    .wrn-section[data-variant="grid"]::before {
+      position: absolute;
+      z-index: -1;
+      inset: 0;
+      background:
+        linear-gradient(var(--wrn-color-border) 1px, transparent 1px) 0 0 / 32px 32px,
+        linear-gradient(90deg, var(--wrn-color-border) 1px, transparent 1px) 0 0 / 32px 32px;
+      content: "";
+      -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 85%);
+      mask-image: radial-gradient(ellipse at center, #000 40%, transparent 85%);
+      pointer-events: none;
+    }
+
     .wrn-section[data-border-top="true"] {
       border-top: 1px solid var(--wrn-color-border);
     }
diff --git a/packages/ui/components/Sidebar.wrn b/packages/ui/components/Sidebar.wrn
index 2875fd04..9929eef4 100644
--- a/packages/ui/components/Sidebar.wrn
+++ b/packages/ui/components/Sidebar.wrn
@@ -319,19 +319,24 @@ component Sidebar {
 
     .wrn-sidebar__rail {
       width: 100%;
+      padding: 0.5rem;
+      border: 1px solid var(--wrn-color-border);
+      border-radius: var(--wrn-radius);
+      background: var(--wrn-color-surface-soft, var(--wrn-color-surface));
     }
 
     .wrn-sidebar__list,
     .wrn-sidebar__sublist {
       display: grid;
-      gap: 0.1rem;
+      gap: 0.125rem;
       margin: 0;
       padding: 0;
       list-style: none;
     }
 
     .wrn-sidebar__sublist {
-      margin-inline-start: 0.85rem;
+      margin-inline-start: 1rem;
+      margin-block: 0.125rem;
       padding-inline-start: 0.5rem;
       border-inline-start: 1px solid var(--wrn-color-border);
     }
@@ -346,6 +351,7 @@ component Sidebar {
       width: 1.05rem;
       height: 1.05rem;
       flex-shrink: 0;
+      color: var(--wrn-color-text-subtle, var(--wrn-color-text-muted));
     }
 
     .wrn-sidebar__entry[data-group="true"] + .wrn-sidebar__entry {
@@ -353,28 +359,32 @@ component Sidebar {
     }
 
     .wrn-sidebar__heading {
-      margin: 0.9rem 0 0.35rem;
-      color: var(--wrn-color-text-muted);
-      font-size: 0.7rem;
-      font-weight: 700;
+      margin: 0.875rem 0.625rem 0.375rem;
+      color: var(--wrn-color-text-subtle, var(--wrn-color-text-muted));
+      font-family: var(--wrn-font-mono, monospace);
+      font-size: 0.65rem;
+      font-weight: 600;
       letter-spacing: 0.08em;
       text-transform: uppercase;
     }
 
     .wrn-sidebar__link {
+      position: relative;
       display: flex;
       align-items: center;
       gap: 0.5rem;
-      padding: 0.45rem 0.6rem;
-      border-radius: var(--wrn-radius-sm);
+      min-height: 2rem;
+      padding: 0.375rem 0.625rem;
+      border-radius: calc(var(--wrn-radius-sm) - 1px);
       color: var(--wrn-color-text-muted);
-      font-size: 0.88rem;
-      font-weight: 600;
+      font-size: 0.8125rem;
+      font-weight: 550;
       text-decoration: none;
+      transition: background-color 120ms ease, color 120ms ease;
     }
 
     .wrn-sidebar__link:hover {
-      background: var(--wrn-color-surface-soft);
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-soft));
       color: var(--wrn-color-text);
     }
 
@@ -384,8 +394,10 @@ component Sidebar {
     }
 
     .wrn-sidebar__link[data-active="true"] {
-      background: color-mix(in srgb, var(--sidebar-accent) 16%, transparent);
-      color: var(--sidebar-accent);
+      background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
+      color: var(--wrn-color-text);
+      font-weight: 600;
+      box-shadow: 0 0 0 1px var(--wrn-color-border), var(--wrn-shadow-1);
     }
 
     .wrn-sidebar__link[aria-disabled="true"] {
@@ -399,24 +411,32 @@ component Sidebar {
 
     .wrn-sidebar__badge {
       margin-inline-start: auto;
-      padding: 0.05rem 0.4rem;
+      min-width: 1.25rem;
+      padding: 0.0625rem 0.4rem;
       border-radius: 999px;
-      background: color-mix(in srgb, var(--sidebar-accent) 16%, transparent);
-      color: var(--sidebar-accent);
-      font-size: 0.72rem;
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
+      color: var(--wrn-color-text-muted);
+      font-size: 0.68rem;
+      font-weight: 650;
+      font-variant-numeric: tabular-nums;
+      text-align: center;
     }
 
     .wrn-sidebar__launcher {
       display: none;
       align-items: center;
       gap: 0.5rem;
-      padding: 0.45rem 0.7rem;
+      min-height: 2.25rem;
+      padding: 0 0.75rem;
       border: 1px solid var(--wrn-color-border);
+      border-bottom-color: var(--wrn-color-border-strong, var(--wrn-color-border));
       border-radius: var(--wrn-radius-sm);
-      background: var(--wrn-color-surface);
+      background: linear-gradient(180deg, var(--wrn-color-surface), var(--wrn-color-surface-soft, var(--wrn-color-surface)));
+      box-shadow: var(--wrn-shadow-1);
       color: var(--wrn-color-text);
       font: inherit;
-      font-size: 0.9rem;
+      font-size: 0.8125rem;
+      font-weight: 600;
       cursor: pointer;
     }
 
@@ -443,5 +463,24 @@ component Sidebar {
         display: none;
       }
     }
+  
+    .wrn-sidebar__link[data-active="true"]::before {
+      position: absolute;
+      inset-block: 0.4rem;
+      inset-inline-start: -0.5rem;
+      width: 3px;
+      border-radius: 0 3px 3px 0;
+      background: var(--sidebar-accent);
+      content: "";
+    }
+  
+    .wrn-sidebar__link[data-active="true"] .wrn-sidebar__icon {
+      color: var(--sidebar-accent);
+    }
+  
+    .wrn-sidebar__link[data-active="true"] .wrn-sidebar__badge {
+      background: color-mix(in srgb, var(--sidebar-accent) 14%, var(--wrn-color-surface));
+      color: var(--wrn-color-primary-text, var(--sidebar-accent));
+    }
   }
 }
diff --git a/packages/ui/components/SplitHero.wrn b/packages/ui/components/SplitHero.wrn
index 2823667e..98a9ec0f 100644
--- a/packages/ui/components/SplitHero.wrn
+++ b/packages/ui/components/SplitHero.wrn
@@ -268,14 +268,13 @@ component SplitHero {
     .wrn-split-hero[data-variant="soft"] {
       background:
         radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--split-accent) 16%, transparent), transparent 30%),
-        linear-gradient(135deg, var(--split-accent-soft), transparent 64%),
         var(--wrn-color-background);
     }
 
     .wrn-split-hero[data-variant="raised"] {
       background: var(--wrn-color-surface-raised);
       border-block: 1px solid var(--split-border);
-      box-shadow: 0 22px 70px color-mix(in srgb, black 14%, transparent);
+      box-shadow: var(--wrn-shadow-3);
     }
 
     .wrn-split-hero[data-variant="outline"] {
@@ -635,13 +634,10 @@ component SplitHero {
     .wrn-split-hero__visual {
       overflow: hidden;
       background:
-        linear-gradient(145deg, color-mix(in srgb, var(--split-accent) 7%, transparent), transparent 58%),
         var(--wrn-color-surface-raised);
       border: 1px solid var(--split-border);
       border-radius: 1.5rem;
-      box-shadow:
-        0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
-        0 30px 76px color-mix(in srgb, black 18%, transparent);
+      box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
     }
 
     .wrn-split-hero[data-visual-style="plain"] .wrn-split-hero__visual {
@@ -654,7 +650,6 @@ component SplitHero {
 
     .wrn-split-hero[data-visual-style="soft"] .wrn-split-hero__visual {
       background:
-        linear-gradient(145deg, var(--split-accent-soft), transparent 72%),
         var(--wrn-color-surface-raised);
       box-shadow: none;
     }
diff --git a/packages/ui/components/StatsBar.wrn b/packages/ui/components/StatsBar.wrn
index 116b3555..475f9138 100644
--- a/packages/ui/components/StatsBar.wrn
+++ b/packages/ui/components/StatsBar.wrn
@@ -111,8 +111,8 @@ component StatsBar {
       padding: 1.25rem;
       color: var(--wrn-color-text-muted);
       background: var(--wrn-color-surface-soft);
-      border: 1px dashed var(--wrn-color-border);
-      border-radius: 0.9rem;
+      border: 1px dashed var(--wrn-color-border-strong, var(--wrn-color-border));
+      border-radius: var(--wrn-radius);
       text-align: center;
     }
     .wrn-stats-bar {
@@ -174,8 +174,11 @@ component StatsBar {
       --stats-gutter-width: 6rem;
     }
     .wrn-stats-bar[data-outer-spacing="md"] { margin-block: 2rem; }
-    .wrn-stats-bar[data-radius="xl"] .wrn-stats-bar__surface { overflow: hidden; border-radius: 1.25rem; }
-    .wrn-stats-bar[data-shadow="sm"] .wrn-stats-bar__surface { box-shadow: 0 10px 30px rgb(15 23 42 / 0.05); }
+    .wrn-stats-bar[data-radius="xl"] .wrn-stats-bar__surface {
+      overflow: hidden;
+      border-radius: var(--wrn-radius-lg);
+    }
+    .wrn-stats-bar[data-shadow="sm"] .wrn-stats-bar__surface { box-shadow: var(--wrn-shadow-2); }
     .wrn-stats-bar[data-variant="card"] .wrn-stats-bar__surface { border: 1px solid var(--wrn-color-border); background: var(--wrn-color-surface); }
 
     .wrn-stats-bar[data-max-width="compact"] .wrn-stats-bar__inner {
@@ -200,18 +203,10 @@ component StatsBar {
       display: grid;
       grid-template-columns: minmax(0, 1fr);
       overflow: hidden;
-      background:
-        linear-gradient(
-          135deg,
-          color-mix(in srgb, var(--stats-accent) 7%, transparent),
-          transparent 42%
-        ),
-        var(--wrn-color-surface-raised);
-      border: 1px solid var(--stats-border);
-      border-radius: 1.25rem;
-      box-shadow:
-        0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
-        0 18px 48px color-mix(in srgb, black 16%, transparent);
+      background: var(--wrn-color-surface-raised);
+      border: 1px solid var(--wrn-color-border);
+      border-radius: var(--wrn-radius-lg);
+      box-shadow: var(--wrn-shadow-2);
     }
 
     .wrn-stats-bar[data-variant="default"] .wrn-stats-bar__surface {
@@ -221,7 +216,6 @@ component StatsBar {
 
     .wrn-stats-bar[data-variant="soft"] .wrn-stats-bar__surface {
       background:
-        linear-gradient(135deg, var(--stats-soft), transparent 58%),
         var(--wrn-color-surface-raised);
       box-shadow: none;
     }
@@ -241,10 +235,9 @@ component StatsBar {
     .wrn-stats-bar[data-variant="solid"] .wrn-stats-bar__surface {
       color: var(--stats-contrast);
       background:
-        linear-gradient(135deg, color-mix(in srgb, white 8%, transparent), transparent 52%),
         var(--stats-accent);
       border-color: color-mix(in srgb, white 24%, transparent);
-      box-shadow: 0 20px 56px color-mix(in srgb, var(--stats-accent) 28%, transparent);
+      box-shadow: var(--wrn-shadow-3);
     }
 
     .wrn-stats-bar__item {
@@ -295,7 +288,7 @@ component StatsBar {
     }
 
     .wrn-stats-bar__item:hover {
-      background: color-mix(in srgb, var(--item-accent) 6%, transparent);
+      background: var(--wrn-color-surface-soft);
     }
 
     .wrn-stats-bar[data-variant="solid"] .wrn-stats-bar__item:hover {
@@ -309,10 +302,9 @@ component StatsBar {
     .wrn-stats-bar__label {
       margin: 0;
       color: var(--wrn-color-text-muted);
-      font-size: 0.78rem;
-      font-weight: 600;
+      font-size: 0.8125rem;
+      font-weight: 550;
       line-height: 1.4;
-      letter-spacing: 0.01em;
     }
 
     .wrn-stats-bar__value-row {
@@ -325,10 +317,11 @@ component StatsBar {
     .wrn-stats-bar__value {
       margin: 0;
       color: var(--wrn-color-text);
-      font-size: clamp(1.75rem, 2.4vw, 2.35rem);
+      font-size: clamp(1.75rem, 2.4vw, 2.25rem);
       font-weight: 650;
       line-height: 1;
-      letter-spacing: -0.035em;
+      letter-spacing: -0.04em;
+      font-variant-numeric: tabular-nums;
     }
 
     .wrn-stats-bar[data-compact="true"] .wrn-stats-bar__value {
@@ -336,9 +329,9 @@ component StatsBar {
     }
 
     .wrn-stats-bar__suffix {
-      color: var(--item-accent);
+      color: var(--wrn-color-text-subtle, var(--wrn-color-text-muted));
       font-size: 0.95rem;
-      font-weight: 700;
+      font-weight: 600;
     }
 
     .wrn-stats-bar__description {
@@ -358,11 +351,12 @@ component StatsBar {
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      width: 2.65rem;
-      height: 2.65rem;
+      width: 2.5rem;
+      height: 2.5rem;
       color: var(--item-accent);
-      background: color-mix(in srgb, var(--item-accent) 11%, transparent);
-      border-radius: 0.85rem;
+      background: color-mix(in srgb, var(--item-accent) 10%, var(--wrn-color-surface));
+      border: 1px solid color-mix(in srgb, var(--item-accent) 18%, transparent);
+      border-radius: var(--wrn-radius-sm);
     }
 
     .wrn-stats-bar__icon > span {
@@ -381,21 +375,25 @@ component StatsBar {
       align-items: center;
       gap: 0.3rem;
       width: fit-content;
-      margin-top: 0.7rem;
-      padding: 0.25rem 0.5rem;
+      margin-top: 0.75rem;
+      padding: 0.2rem 0.5rem;
       color: var(--wrn-color-text-muted);
       font-size: 0.7rem;
+      font-weight: 600;
       line-height: 1;
-      background: color-mix(in srgb, var(--wrn-color-text) 5%, transparent);
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
       border-radius: 999px;
+      font-variant-numeric: tabular-nums;
     }
 
     .wrn-stats-bar__trend[data-direction="up"] {
-      color: var(--wrn-color-success);
+      color: var(--wrn-color-success-text, var(--wrn-color-success));
+      background: color-mix(in srgb, var(--wrn-color-success) 10%, var(--wrn-color-surface));
     }
 
     .wrn-stats-bar__trend[data-direction="down"] {
-      color: var(--wrn-color-danger);
+      color: var(--wrn-color-danger-text, var(--wrn-color-danger));
+      background: color-mix(in srgb, var(--wrn-color-danger) 10%, var(--wrn-color-surface));
     }
 
     .wrn-stats-bar__trend-icon {
diff --git a/packages/ui/components/Stepper.wrn b/packages/ui/components/Stepper.wrn
index 72001913..9c29affd 100644
--- a/packages/ui/components/Stepper.wrn
+++ b/packages/ui/components/Stepper.wrn
@@ -314,25 +314,31 @@ component Stepper {
       align-items: center;
       justify-content: center;
       flex: 0 0 auto;
-      width: 2rem;
-      height: 2rem;
-      border: 1px solid var(--wrn-color-border);
+      width: 1.75rem;
+      height: 1.75rem;
+      border: 1.5px solid var(--wrn-color-border-strong, var(--wrn-color-border));
       border-radius: 999px;
       background: var(--wrn-color-surface);
-      font-size: 0.85rem;
-      font-weight: 700;
+      color: var(--wrn-color-text-muted);
+      font-family: var(--wrn-font-mono, monospace);
+      font-size: 0.75rem;
+      font-weight: 650;
+      font-variant-numeric: tabular-nums;
+      transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
     }
 
     .wrn-stepper__step[data-status="complete"] .wrn-stepper__marker {
-      border-color: var(--stepper-accent);
+      border-color: color-mix(in srgb, var(--stepper-accent) 82%, black);
       background: var(--stepper-accent);
       color: var(--wrn-color-primary-contrast);
+      box-shadow: var(--wrn-highlight-edge, none);
     }
 
     .wrn-stepper__step[data-status="current"] .wrn-stepper__marker {
       border-color: var(--stepper-accent);
-      color: var(--stepper-accent);
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--stepper-accent) 22%, transparent);
+      background: var(--wrn-color-surface);
+      color: var(--wrn-color-primary-text, var(--stepper-accent));
+      box-shadow: 0 0 0 4px color-mix(in srgb, var(--stepper-accent) 16%, transparent);
     }
 
     .wrn-stepper__step[data-status="upcoming"] .wrn-stepper__marker {
@@ -346,13 +352,15 @@ component Stepper {
     }
 
     .wrn-stepper__label {
-      font-size: 0.9rem;
+      font-size: 0.875rem;
       font-weight: 600;
+      letter-spacing: -0.005em;
     }
 
     .wrn-stepper__description {
       color: var(--wrn-color-text-muted);
       font-size: 0.78rem;
+      line-height: 1.45;
     }
 
     .wrn-stepper__step[data-status="upcoming"] .wrn-stepper__label {
@@ -364,17 +372,19 @@ component Stepper {
     }
 
     .wrn-stepper__panel {
-      padding: 1rem;
+      padding: 1.125rem 1.25rem;
       border: 1px solid var(--wrn-color-border);
-      border-radius: var(--wrn-radius-md);
+      border-radius: var(--wrn-radius);
       background: var(--wrn-color-surface);
+      box-shadow: var(--wrn-shadow-1);
       animation: wrn-stepper-in 200ms ease both;
     }
 
     .wrn-stepper__panel-title {
-      margin: 0 0 0.35rem;
-      font-size: 0.95rem;
-      font-weight: 700;
+      margin: 0 0 0.25rem;
+      font-size: 0.9375rem;
+      font-weight: 620;
+      letter-spacing: -0.01em;
     }
 
     .wrn-stepper__panel-body {
@@ -396,19 +406,22 @@ component Stepper {
 
     .wrn-stepper__button-control {
       appearance: none;
-      padding: 0.45rem 0.9rem;
+      min-height: var(--wrn-control-height, 2.5rem);
+      padding: 0 0.95rem;
       border: 1px solid var(--wrn-color-border);
+      border-bottom-color: var(--wrn-color-border-strong, var(--wrn-color-border));
       border-radius: var(--wrn-radius-sm);
-      background: var(--wrn-color-surface);
+      background: linear-gradient(180deg, var(--wrn-color-surface), var(--wrn-color-surface-soft, var(--wrn-color-surface)));
+      box-shadow: var(--wrn-shadow-1);
       color: var(--wrn-color-text);
       font: inherit;
-      font-size: 0.86rem;
+      font-size: 0.875rem;
       font-weight: 600;
       cursor: pointer;
     }
 
     .wrn-stepper__button-control:hover:not(:disabled) {
-      background: var(--wrn-color-surface-soft);
+      background: var(--wrn-color-surface);
     }
 
     .wrn-stepper__button-control:focus-visible {
@@ -417,8 +430,10 @@ component Stepper {
     }
 
     .wrn-stepper__button-control[data-primary="true"] {
-      border-color: var(--stepper-accent);
-      background: var(--stepper-accent);
+      border-color: color-mix(in srgb, var(--stepper-accent) 82%, black);
+      border-bottom-color: color-mix(in srgb, var(--stepper-accent) 64%, black);
+      background: linear-gradient(180deg, color-mix(in srgb, var(--stepper-accent) 92%, white), var(--stepper-accent));
+      box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--stepper-accent) 30%, transparent);
       color: var(--wrn-color-primary-contrast);
     }
 
@@ -445,5 +460,62 @@ component Stepper {
         flex-direction: column;
       }
     }
+
+    /* --- Connectors ---------------------------------------------------------
+       Horizontal: a line fills the rest of each step after its text.
+       Vertical: a rail runs down from each marker to the next. Both fill with
+       the accent once the step is complete. :last-of-type, not :last-child,
+       because the loop leaves <template> markers after the last step. */
+    .wrn-stepper:not([data-orientation="vertical"]) .wrn-stepper__button::after {
+      flex: 1 1 1.5rem;
+      min-width: 1rem;
+      height: 2px;
+      margin-inline-start: 0.25rem;
+      border-radius: 999px;
+      background: var(--wrn-color-border);
+      content: "";
+      transition: background-color 200ms ease;
+    }
+    .wrn-stepper:not([data-orientation="vertical"]) .wrn-stepper__step:last-of-type .wrn-stepper__button::after {
+      display: none;
+    }
+    .wrn-stepper[data-orientation="vertical"] .wrn-stepper__step {
+      position: relative;
+    }
+    .wrn-stepper[data-orientation="vertical"] .wrn-stepper__step:not(:last-of-type)::before {
+      position: absolute;
+      top: calc(0.5rem + 1.75rem + 0.25rem);
+      bottom: calc(-0.5rem + 0.25rem);
+      inset-inline-start: calc(0.5rem + 0.875rem - 1px);
+      width: 2px;
+      border-radius: 999px;
+      background: var(--wrn-color-border);
+      content: "";
+    }
+    .wrn-stepper__step[data-status="complete"] .wrn-stepper__button::after,
+    .wrn-stepper[data-orientation="vertical"] .wrn-stepper__step[data-status="complete"]::before {
+      background: var(--stepper-accent);
+    }
+    .wrn-stepper[data-orientation="vertical"] .wrn-stepper__list {
+      gap: 0.5rem;
+    }
+
+    /* Completed numbered steps show a check instead of the number. */
+    .wrn-stepper__step[data-status="complete"] .wrn-stepper__number {
+      display: none;
+    }
+    .wrn-stepper__step[data-status="complete"] .wrn-stepper__marker:has(.wrn-stepper__number:not([data-show="false"]))::after,
+    .wrn-stepper__step[data-status="complete"] .wrn-stepper__marker:not(:has(.wrn-stepper__icon:not([data-show="false"])))::after {
+      width: 0.8rem;
+      height: 0.8rem;
+      background: currentColor;
+      content: "";
+      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / contain no-repeat;
+      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / contain no-repeat;
+    }
+    .wrn-stepper__icon {
+      width: 0.9rem;
+      height: 0.9rem;
+    }
   }
 }
diff --git a/packages/ui/components/StrongPassword.wrn b/packages/ui/components/StrongPassword.wrn
index d6b72a7c..300c533a 100644
--- a/packages/ui/components/StrongPassword.wrn
+++ b/packages/ui/components/StrongPassword.wrn
@@ -257,8 +257,8 @@ component StrongPassword {
     }
 
     .wrn-next--strong-password > label {
-      font-size: 0.82em;
-      font-weight: 700;
+      font-size: 0.8125rem;
+      font-weight: 600;
     }
 
     .wrn-next__strong-password-anchor {
@@ -267,18 +267,17 @@ component StrongPassword {
 
     .wrn-next--strong-password input {
       width: 100%;
-      min-height: 3rem;
-      padding: 0.75rem 3rem 0.75rem 2.75rem;
-      border: 1px solid var(--wrn-color-border);
+      min-height: var(--wrn-control-height, 2.5rem);
+      padding: 0.55rem 3rem 0.55rem 2.5rem;
+      border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
       border-radius: var(--wrn-radius-sm);
       outline: 0;
       color: var(--wrn-color-text);
-      background: var(--wrn-color-surface);
+      background: var(--wrn-color-input-background, var(--wrn-color-surface));
+      box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
       font: inherit;
       font-size: 0.875rem;
-      transition:
-        border-color 160ms ease,
-        box-shadow 160ms ease;
+      transition: border-color 160ms ease, box-shadow 160ms ease;
     }
 
     .wrn-next__strong-password-leading-icon,
@@ -312,8 +311,8 @@ component StrongPassword {
     }
     .wrn-next__strong-password-toggle:hover,
     .wrn-next__strong-password-toggle:focus-visible {
-      color: var(--wrn-component-color);
-      background: color-mix(in srgb, var(--wrn-component-color) 10%, transparent);
+      color: var(--wrn-color-text);
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
       outline: 0;
     }
     .wrn-next__strong-password-toggle > span {
@@ -335,7 +334,7 @@ component StrongPassword {
 
     .wrn-next--strong-password input:focus-visible {
       border-color: var(--wrn-component-color);
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-component-color) 16%, transparent);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-component-color) 18%, transparent);
     }
 
     .wrn-next__strong-password-details {
@@ -358,10 +357,11 @@ component StrongPassword {
 
     .wrn-next__strong-password-meter {
       width: 100%;
-      height: 0.42rem;
+      height: 0.3125rem;
       overflow: hidden;
       border-radius: 999px;
-      background: color-mix(in srgb, var(--wrn-color-border) 72%, transparent);
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
+      box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.08);
     }
 
     .wrn-next__strong-password-meter > span {
@@ -401,8 +401,8 @@ component StrongPassword {
       min-width: 0;
       align-items: flex-start;
       gap: 0.45rem;
-      color: var(--wrn-color-muted);
-      font-size: 0.72em;
+      color: var(--wrn-color-text-muted);
+      font-size: 0.75rem;
       line-height: 1.45;
     }
 
@@ -442,7 +442,7 @@ component StrongPassword {
     }
 
     .wrn-next__strong-password-requirements li[data-met="true"] {
-      color: var(--wrn-color-success);
+      color: var(--wrn-color-success-text, var(--wrn-color-success));
     }
 
     .wrn-next__strong-password-requirements li[data-met="true"] > span[aria-hidden="true"] {
@@ -462,22 +462,19 @@ component StrongPassword {
 
     .wrn-next__strong-password-popover {
       position: absolute;
-      top: calc(100% + 0.7rem);
+      top: calc(100% + 0.5rem);
       left: 0;
       z-index: 30;
       width: min(28rem, 100%);
-      padding: 1rem;
+      padding: 0.875rem 1rem;
       border: 1px solid var(--wrn-color-border);
       border-radius: var(--wrn-radius);
       opacity: 0;
       visibility: hidden;
-      background: var(--wrn-color-surface);
-      box-shadow: var(--wrn-shadow-2);
-      transform: translateY(-0.35rem);
-      transition:
-        opacity 140ms ease,
-        transform 140ms ease,
-        visibility 140ms ease;
+      background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
+      box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
+      transform: translateY(-0.25rem);
+      transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
     }
 
     .wrn-next__strong-password-popover[data-open="true"] {
@@ -569,7 +566,7 @@ component StrongPassword {
 
         .wrn-component p {
           margin: 0;
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-muted, var(--wrn-color-muted));
           line-height: 1.6;
         }
 
@@ -584,8 +581,9 @@ component StrongPassword {
           display: block;
           min-height: 1em;
           margin-top: 0.25rem;
-          color: var(--wrn-color-danger);
-          font-size: 0.8rem;
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
+          font-size: 0.78rem;
+          font-weight: 550;
         }
 
         .wrn-next--choice {
@@ -612,13 +610,14 @@ component StrongPassword {
           width: 100%;
           min-height: var(--wrn-control-height, 2.5rem);
           padding: 0.5rem 0.75rem;
-          border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-sm, 6px);
+          border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
+          border-radius: var(--wrn-radius-sm, 8px);
           outline: 0;
           color: var(--wrn-color-text);
-          background: var(--wrn-color-bg);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
           font: inherit;
           font-weight: 500;
+          transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
         }
         .wrn-auth-form form > .wrn-next--field,
         .wrn-auth-form form > .wrn-field {
@@ -632,8 +631,8 @@ component StrongPassword {
       box-shadow: none;
         }
         .wrn-next--field :where(input, textarea, select):focus-visible {
-          border-color: var(--wrn-color-primary);
-          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
+          border-color: var(--wrn-field-color, var(--wrn-color-primary));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04), 0 0 0 3px color-mix(in srgb, var(--wrn-field-color, var(--wrn-color-primary)) 18%, transparent);
         }
         .wrn-next--field textarea {
           resize: vertical;
@@ -667,12 +666,14 @@ component StrongPassword {
           font-size: 0.8125rem;
           font-weight: 600;
           line-height: 1.35;
+          letter-spacing: -0.005em;
         }
         .wrn-next__field-hint,
         .wrn-next__field-help {
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
           font-size: 0.75rem;
-          font-weight: 500;
+          font-weight: 450;
+          line-height: 1.45;
         }
         .wrn-next__field-control {
           position: relative;
@@ -680,10 +681,11 @@ component StrongPassword {
         }
         .wrn-next__field-control > :is(input, textarea, select) {
           padding-inline: 0.85rem;
-          border-color: var(--wrn-color-border);
+          border-color: var(--wrn-color-input-border, var(--wrn-color-border));
           border-radius: var(--wrn-radius-sm);
-          background: var(--wrn-color-surface);
-          font-size: 0.8125rem;
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
+          font-size: 0.875rem;
         }
         .wrn-next__field-control[data-has-icon="true"][data-icon-position="start"] > :is(input, textarea, select) {
           padding-inline-start: 2.5rem;
@@ -724,7 +726,8 @@ component StrongPassword {
         }
         .wrn-next--field[data-variant="ghost"] .wrn-next__field-control > :is(input, textarea, select) {
           border-color: transparent;
-          background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
+          box-shadow: none;
         }
         .wrn-next__field-floating-label {
           position: absolute;
@@ -765,9 +768,9 @@ component StrongPassword {
         }
         .wrn-next__field-error {
           min-height: 1em;
-          color: var(--wrn-color-danger);
-          font-size: 0.82em;
-          font-weight: 600;
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
+          font-size: 0.78rem;
+          font-weight: 550;
         }
         .wrn-next__field-error:empty {
           display: none;
@@ -775,14 +778,16 @@ component StrongPassword {
         .wrn-next--field[data-invalid="true"] :is(input, textarea, select),
         .wrn-next--choice-field[data-invalid="true"] input {
           border-color: var(--wrn-color-danger);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-danger) 12%, transparent);
         }
         .wrn-next--field :is(input, textarea, select):disabled,
         .wrn-next--choice-field input:disabled {
           cursor: not-allowed;
-          opacity: 0.58;
+          opacity: 0.55;
+          background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
         }
         .wrn-next--field :is(input, textarea, select):read-only {
-          background: var(--wrn-color-surface-2);
+          background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
         }
         .wrn-next--field[data-inline="true"],
         .wrn-next--choice-field[data-inline="true"] {
@@ -839,11 +844,13 @@ component StrongPassword {
           display: flex;
           min-width: 0;
           align-items: center;
-          gap: 0.65rem;
+          gap: 0.625rem;
           color: var(--wrn-color-text);
           width: 100%;
-          font-size: 0.75rem;
+          font-size: 0.875rem;
           font-weight: 500;
+          line-height: 1.4;
+          cursor: pointer;
         }
         .wrn-next__checkbox-content > .wrn-next__choice {
           width: 100%;
@@ -858,12 +865,13 @@ component StrongPassword {
         .wrn-next__choice-copy {
           display: grid;
           min-width: 0;
-          gap: 0.15rem;
-          line-height: 1.35;
+          gap: 0.125rem;
+          line-height: 1.4;
         }
         .wrn-next__choice-copy small {
-          color: var(--wrn-color-muted);
-          font-weight: 500;
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+          font-size: 0.78rem;
+          font-weight: 450;
         }
         .wrn-next__radio-group,
         .wrn-next__checkbox-group {
@@ -883,15 +891,18 @@ component StrongPassword {
         .wrn-next--radio-field[data-card="true"] .wrn-next--radio,
         .wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox {
           min-height: 4.5rem;
-          padding: 0.85rem;
+          padding: 0.9rem 1rem;
           border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-sm);
+          border-radius: var(--wrn-radius);
           background: var(--wrn-color-surface);
+          box-shadow: var(--wrn-shadow-1);
+          transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
         }
         .wrn-next--radio-field[data-card="true"] .wrn-next--radio:has(input:checked),
         .wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox:has(input:checked) {
           border-color: var(--wrn-field-color);
-          box-shadow: 0 0 0 1px var(--wrn-field-color);
+          background: color-mix(in srgb, var(--wrn-field-color) 5%, var(--wrn-color-surface));
+          box-shadow: 0 0 0 1px var(--wrn-field-color), var(--wrn-shadow-1);
         }
         .wrn-next--radio-field[data-list="true"] .wrn-next--radio,
         .wrn-next--checkbox-field[data-list="true"] .wrn-next--checkbox {
@@ -912,19 +923,21 @@ component StrongPassword {
         }
         .wrn-next__choice[data-variant="outlined"],
         .wrn-next__choice[data-variant="floating"] {
-          padding: 0.65rem 0.8rem;
+          padding: 0.7rem 0.85rem;
           border: 1px solid var(--wrn-color-border);
           border-radius: var(--wrn-radius-sm);
+          background: var(--wrn-color-surface);
         }
         .wrn-next__choice[data-variant="pill"] {
-          padding: 0.65rem 1rem;
+          padding: 0.6rem 1rem;
+          border: 1px solid color-mix(in srgb, var(--wrn-field-color) 22%, var(--wrn-color-border));
           border-radius: 999px;
-          background: color-mix(in srgb, var(--wrn-field-color) 9%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface));
         }
         .wrn-next__choice[data-variant="ghost"] {
-          padding: 0.65rem 0.8rem;
+          padding: 0.65rem 0.85rem;
           border-radius: var(--wrn-radius-sm);
-          background: color-mix(in srgb, var(--wrn-field-color) 7%, transparent);
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, transparent);
         }
         .wrn-next__choice[data-variant="underline"] {
           padding-block: 0.5rem;
@@ -958,25 +971,35 @@ component StrongPassword {
           align-items: center;
           justify-content: space-between;
           gap: 0.75rem;
-          padding: 0.7rem 0.85rem;
-          border: 1px solid var(--wrn-color-border);
+          padding: 0.55rem 0.85rem;
+          border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
           border-radius: var(--wrn-radius-sm);
-          background: var(--wrn-color-surface);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
           color: var(--wrn-color-text);
           font: inherit;
+          font-size: 0.875rem;
+          font-variant-numeric: tabular-nums;
           text-align: left;
+          cursor: pointer;
+          transition: border-color 120ms ease, box-shadow 120ms ease;
         }
         .wrn-next__calendar,
         .wrn-next__time-panel {
-          z-index: 20;
+          position: absolute;
+          z-index: 40;
+          top: 100%;
+          left: 0;
           display: grid;
-          width: min(100%, 22rem);
+          width: min(calc(100vw - 2rem), 19.5rem);
           gap: 0.75rem;
-          padding: 0.85rem;
+          margin-top: 0.375rem;
+          padding: 0.75rem;
           border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-md);
-          background: var(--wrn-color-surface);
-          box-shadow: var(--wrn-shadow-3);
+          border-radius: var(--wrn-radius);
+          background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
+          box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
+          animation: wrn-popover-enter var(--wrn-motion-base, 160ms) var(--wrn-ease-emphasized, ease) both;
         }
         .wrn-next--date-picker[data-expanded="false"] .wrn-next__calendar,
         .wrn-next--time-picker[data-expanded="false"] .wrn-next__time-panel {
@@ -986,29 +1009,42 @@ component StrongPassword {
         .wrn-next__time-panel button {
           min-height: 2.25rem;
           border: 0;
-          border-radius: var(--wrn-radius-sm);
+          border-radius: calc(var(--wrn-radius-sm) - 2px);
           background: transparent;
           color: inherit;
+          font: inherit;
+          font-size: 0.8125rem;
+          font-variant-numeric: tabular-nums;
+          cursor: pointer;
+          transition: background-color 120ms ease, color 120ms ease;
         }
         .wrn-next__calendar-weekdays,
         .wrn-next__calendar-grid {
           display: grid;
           grid-template-columns: repeat(7, 1fr);
-          gap: 0.2rem;
+          gap: 0.125rem;
           text-align: center;
         }
         .wrn-next__calendar-weekdays {
-          color: var(--wrn-color-muted);
-          font-size: 0.75rem;
+          padding-bottom: 0.375rem;
+          border-bottom: 1px solid var(--wrn-color-border);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+          font-family: var(--wrn-font-mono, monospace);
+          font-size: 0.625rem;
+          font-weight: 600;
+          letter-spacing: 0.06em;
+          text-transform: uppercase;
         }
         .wrn-next__calendar-grid button:hover,
         .wrn-next__time-panel button:hover {
-          background: var(--wrn-color-surface-2);
+          background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
         }
         .wrn-next__calendar-grid button[aria-pressed="true"],
         .wrn-next__time-panel button[aria-pressed="true"] {
           background: var(--wrn-field-color);
           color: var(--wrn-color-primary-contrast, #fff);
+          box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--wrn-field-color) 35%, transparent);
+          font-weight: 650;
         }
         .wrn-next__time-period {
           display: flex;
@@ -1042,7 +1078,7 @@ component StrongPassword {
         .wrn-next--field[data-variant="ghost"]
           :is(.wrn-next__input-group-control, .wrn-next__file-control, .wrn-next__color-control) {
           border-color: transparent;
-          background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
         }
         @media (max-width: 640px) {
           .wrn-next--field[data-inline="true"],
diff --git a/packages/ui/components/TimePicker.wrn b/packages/ui/components/TimePicker.wrn
index 6c864046..61adc0ca 100644
--- a/packages/ui/components/TimePicker.wrn
+++ b/packages/ui/components/TimePicker.wrn
@@ -43,7 +43,7 @@ size: string = "default"
   state expanded: boolean = false
   functions {
     client function commit(part, nextValue, sourceEvent, next, detail) { if (part === "hour") { selectedHour = String(nextValue).padStart(2, "0") } if (part === "minute") { selectedMinute = String(nextValue).padStart(2, "0") } next = selectedHour + ":" + selectedMinute; if ((min && next < min) || (max && next > max)) { return } currentValue = next; detail = { value: currentValue, hour: selectedHour, minute: selectedMinute, name: name, sourceEvent: sourceEvent }; output.input(detail); output.change(detail) }
-    client function selectTimePart(sourceEvent, root, input, parts, hourValue, minuteValue, next, trigger, detail) { root = sourceEvent.currentTarget.closest(".wrn-next--time-picker"); input = root.querySelector(".wrn-next__time-value"); parts = String(input.value || value || "00:00").split(":"); hourValue = sourceEvent.currentTarget.dataset.part === "hour" ? sourceEvent.currentTarget.dataset.value : parts[0]; minuteValue = sourceEvent.currentTarget.dataset.part === "minute" ? sourceEvent.currentTarget.dataset.value : parts[1]; next = hourValue + ":" + minuteValue; if ((min && next < min) || (max && next > max)) { return } currentValue = next; input.setAttribute("value", next); trigger = root.querySelector(".wrn-next__time-trigger span"); if (trigger) { trigger.replaceChildren(next) } sourceEvent.currentTarget.setAttribute("aria-pressed", "true"); detail = { value: next, hour: hourValue, minute: minuteValue, name: name, sourceEvent: sourceEvent }; output.input(detail); output.change(detail) }
+    client function selectTimePart(sourceEvent, root, input, parts, hourValue, minuteValue, next, trigger, detail, buttons, index) { root = sourceEvent.currentTarget.closest(".wrn-next--time-picker"); input = root.querySelector(".wrn-next__time-value"); parts = String(input.value || value || "00:00").split(":"); hourValue = sourceEvent.currentTarget.dataset.part === "hour" ? sourceEvent.currentTarget.dataset.value : parts[0]; minuteValue = sourceEvent.currentTarget.dataset.part === "minute" ? sourceEvent.currentTarget.dataset.value : parts[1]; next = hourValue + ":" + minuteValue; if ((min && next < min) || (max && next > max)) { return } currentValue = next; input.setAttribute("value", next); trigger = root.querySelector(".wrn-next__time-trigger span"); if (trigger) { trigger.replaceChildren(next) } selectedHour = hourValue; selectedMinute = minuteValue; buttons = root.querySelectorAll(".wrn-next__time-options button[data-part=\"" + sourceEvent.currentTarget.dataset.part + "\"]"); for (index = 0; index < buttons.length; index++) { buttons[index].setAttribute("aria-pressed", buttons[index] === sourceEvent.currentTarget ? "true" : "false") } detail = { value: next, hour: hourValue, minute: minuteValue, name: name, sourceEvent: sourceEvent }; output.input(detail); output.change(detail) }
     client function openPicker(sourceEvent) { expanded = !expanded; output.open({ value: currentValue, name: name, sourceEvent: sourceEvent }) }
     client function closePicker(sourceEvent) { expanded = false; output.close({ value: currentValue, name: name, sourceEvent: sourceEvent }) }
     client function handleFocus(sourceEvent) { output.focus({ value: currentValue, name: name, sourceEvent: sourceEvent }) }
@@ -58,7 +58,7 @@ size: string = "default"
         <input id="{id || name}" class="wrn-next__sr-only wrn-next__time-value" type="text" name="{name}" value="{currentValue}" required="{required}" readonly aria-hidden="true" tabindex="-1" @invalid="handleInvalid(event)" />
         <button type="button" class="wrn-next__time-trigger" disabled="{disabled || readonly}" aria-haspopup="dialog" aria-expanded="{expanded}" @click="openPicker(event)" @focus="handleFocus(event)" @blur="handleBlur(event)"><span>{currentValue || placeholder || "Select time"}</span><i class="{icon}" aria-hidden="true"></i></button>
       </div>
-      <button type="button" class="wrn-time-dismiss" aria-label="Close time picker" data-show="expanded" @click="closePicker(event)"></button><div data-show="expanded" class="wrn-next__time-panel" role="dialog" aria-label="{label}"><div><strong>Hour</strong><div class="wrn-next__time-options">{#each hours as hour}<button type="button" data-part="hour" data-value="{hour}" aria-pressed="{String(hour) === selectedHour}" @click="selectTimePart(event)">{hour}</button>{/each}</div></div><div><strong>Minute</strong><div class="wrn-next__time-options">{#each minutes as minute}<button type="button" data-part="minute" data-value="{minute}" aria-pressed="{String(minute) === selectedMinute}" @click="selectTimePart(event)">{minute}</button>{/each}</div></div><button type="button" class="wrn-next__time-done" @click="closePicker(event)">Done</button></div>
+      <button type="button" class="wrn-time-dismiss" aria-label="Close time picker" data-show="expanded" @click="closePicker(event)"></button><div data-show="expanded" class="wrn-next__time-panel" role="dialog" aria-label="{label}"><div><strong>Hour</strong><div class="wrn-next__time-options">{#each hours as hour}<button type="button" data-part="hour" data-value="{hour}" aria-pressed="{!!currentValue && String(hour) === selectedHour}" @click="selectTimePart(event)">{hour}</button>{/each}</div></div><div><strong>Minute</strong><div class="wrn-next__time-options">{#each minutes as minute}<button type="button" data-part="minute" data-value="{minute}" aria-pressed="{!!currentValue && String(minute) === selectedMinute}" @click="selectTimePart(event)">{minute}</button>{/each}</div></div><button type="button" class="wrn-next__time-done" @click="closePicker(event)">Done</button></div>
       {#if helperText}<small class="wrn-next__field-help">{helperText}</small>{/if}
       <small class="wrn-next__field-error" data-error="{name}">{error}</small>
     </div>
@@ -68,20 +68,30 @@ size: string = "default"
     .wrn-time-dismiss { position:fixed; inset:0; z-index:39; opacity:0; border:0; }
     .wrn-next__time-panel {
       grid-template-columns: 1fr 1fr;
+      width: min(calc(100vw - 2rem), 14rem);
     }
 
     .wrn-next__time-options {
       display: grid;
-      max-height: 12rem;
-      margin-top: 0.4rem;
+      max-height: 11rem;
+      margin-top: 0.375rem;
       overflow-y: auto;
-      gap: 0.2rem;
+      gap: 0.125rem;
+      padding-right: 0.125rem;
+      scrollbar-width: thin;
+      scrollbar-color: var(--wrn-color-border-strong, var(--wrn-color-border)) transparent;
+      scroll-snap-type: y proximity;
     }
 
     .wrn-next__time-done {
-      align-self: end;
-      background: var(--wrn-field-color) !important;
+      grid-column: 1 / -1;
+      min-height: 2.25rem;
+      border: 1px solid color-mix(in srgb, var(--wrn-field-color) 82%, black) !important;
+      border-bottom-color: color-mix(in srgb, var(--wrn-field-color) 64%, black) !important;
+      background: linear-gradient(180deg, color-mix(in srgb, var(--wrn-field-color) 92%, white), var(--wrn-field-color)) !important;
+      box-shadow: var(--wrn-highlight-edge, none);
       color: var(--wrn-color-primary-contrast, #fff) !important;
+      font-weight: 600;
     }
 
     @media (max-width: 640px) {
@@ -155,7 +165,7 @@ size: string = "default"
 
         .wrn-component p {
           margin: 0;
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-muted, var(--wrn-color-muted));
           line-height: 1.6;
         }
 
@@ -170,8 +180,9 @@ size: string = "default"
           display: block;
           min-height: 1em;
           margin-top: 0.25rem;
-          color: var(--wrn-color-danger);
-          font-size: 0.8rem;
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
+          font-size: 0.78rem;
+          font-weight: 550;
         }
 
         .wrn-next--choice {
@@ -198,13 +209,14 @@ size: string = "default"
           width: 100%;
           min-height: var(--wrn-control-height, 2.5rem);
           padding: 0.5rem 0.75rem;
-          border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-sm, 6px);
+          border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
+          border-radius: var(--wrn-radius-sm, 8px);
           outline: 0;
           color: var(--wrn-color-text);
-          background: var(--wrn-color-bg);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
           font: inherit;
           font-weight: 500;
+          transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
         }
         .wrn-auth-form form > .wrn-next--field,
         .wrn-auth-form form > .wrn-field {
@@ -218,8 +230,8 @@ size: string = "default"
       box-shadow: none;
         }
         .wrn-next--field :where(input, textarea, select):focus-visible {
-          border-color: var(--wrn-color-primary);
-          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
+          border-color: var(--wrn-field-color, var(--wrn-color-primary));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04), 0 0 0 3px color-mix(in srgb, var(--wrn-field-color, var(--wrn-color-primary)) 18%, transparent);
         }
         .wrn-next--field textarea {
           resize: vertical;
@@ -253,12 +265,14 @@ size: string = "default"
           font-size: 0.8125rem;
           font-weight: 600;
           line-height: 1.35;
+          letter-spacing: -0.005em;
         }
         .wrn-next__field-hint,
         .wrn-next__field-help {
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
           font-size: 0.75rem;
-          font-weight: 500;
+          font-weight: 450;
+          line-height: 1.45;
         }
         .wrn-next__field-control {
           position: relative;
@@ -266,10 +280,11 @@ size: string = "default"
         }
         .wrn-next__field-control > :is(input, textarea, select) {
           padding-inline: 0.85rem;
-          border-color: var(--wrn-color-border);
+          border-color: var(--wrn-color-input-border, var(--wrn-color-border));
           border-radius: var(--wrn-radius-sm);
-          background: var(--wrn-color-surface);
-          font-size: 0.8125rem;
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
+          font-size: 0.875rem;
         }
         .wrn-next__field-control[data-has-icon="true"][data-icon-position="start"] > :is(input, textarea, select) {
           padding-inline-start: 2.5rem;
@@ -310,7 +325,8 @@ size: string = "default"
         }
         .wrn-next--field[data-variant="ghost"] .wrn-next__field-control > :is(input, textarea, select) {
           border-color: transparent;
-          background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
+          box-shadow: none;
         }
         .wrn-next__field-floating-label {
           position: absolute;
@@ -351,9 +367,9 @@ size: string = "default"
         }
         .wrn-next__field-error {
           min-height: 1em;
-          color: var(--wrn-color-danger);
-          font-size: 0.82em;
-          font-weight: 600;
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
+          font-size: 0.78rem;
+          font-weight: 550;
         }
         .wrn-next__field-error:empty {
           display: none;
@@ -361,14 +377,16 @@ size: string = "default"
         .wrn-next--field[data-invalid="true"] :is(input, textarea, select),
         .wrn-next--choice-field[data-invalid="true"] input {
           border-color: var(--wrn-color-danger);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-danger) 12%, transparent);
         }
         .wrn-next--field :is(input, textarea, select):disabled,
         .wrn-next--choice-field input:disabled {
           cursor: not-allowed;
-          opacity: 0.58;
+          opacity: 0.55;
+          background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
         }
         .wrn-next--field :is(input, textarea, select):read-only {
-          background: var(--wrn-color-surface-2);
+          background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
         }
         .wrn-next--field[data-inline="true"],
         .wrn-next--choice-field[data-inline="true"] {
@@ -425,11 +443,13 @@ size: string = "default"
           display: flex;
           min-width: 0;
           align-items: center;
-          gap: 0.65rem;
+          gap: 0.625rem;
           color: var(--wrn-color-text);
           width: 100%;
-          font-size: 0.75rem;
+          font-size: 0.875rem;
           font-weight: 500;
+          line-height: 1.4;
+          cursor: pointer;
         }
         .wrn-next__checkbox-content > .wrn-next__choice {
           width: 100%;
@@ -444,12 +464,13 @@ size: string = "default"
         .wrn-next__choice-copy {
           display: grid;
           min-width: 0;
-          gap: 0.15rem;
-          line-height: 1.35;
+          gap: 0.125rem;
+          line-height: 1.4;
         }
         .wrn-next__choice-copy small {
-          color: var(--wrn-color-muted);
-          font-weight: 500;
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+          font-size: 0.78rem;
+          font-weight: 450;
         }
         .wrn-next__radio-group,
         .wrn-next__checkbox-group {
@@ -469,15 +490,18 @@ size: string = "default"
         .wrn-next--radio-field[data-card="true"] .wrn-next--radio,
         .wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox {
           min-height: 4.5rem;
-          padding: 0.85rem;
+          padding: 0.9rem 1rem;
           border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-sm);
+          border-radius: var(--wrn-radius);
           background: var(--wrn-color-surface);
+          box-shadow: var(--wrn-shadow-1);
+          transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
         }
         .wrn-next--radio-field[data-card="true"] .wrn-next--radio:has(input:checked),
         .wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox:has(input:checked) {
           border-color: var(--wrn-field-color);
-          box-shadow: 0 0 0 1px var(--wrn-field-color);
+          background: color-mix(in srgb, var(--wrn-field-color) 5%, var(--wrn-color-surface));
+          box-shadow: 0 0 0 1px var(--wrn-field-color), var(--wrn-shadow-1);
         }
         .wrn-next--radio-field[data-list="true"] .wrn-next--radio,
         .wrn-next--checkbox-field[data-list="true"] .wrn-next--checkbox {
@@ -498,19 +522,21 @@ size: string = "default"
         }
         .wrn-next__choice[data-variant="outlined"],
         .wrn-next__choice[data-variant="floating"] {
-          padding: 0.65rem 0.8rem;
+          padding: 0.7rem 0.85rem;
           border: 1px solid var(--wrn-color-border);
           border-radius: var(--wrn-radius-sm);
+          background: var(--wrn-color-surface);
         }
         .wrn-next__choice[data-variant="pill"] {
-          padding: 0.65rem 1rem;
+          padding: 0.6rem 1rem;
+          border: 1px solid color-mix(in srgb, var(--wrn-field-color) 22%, var(--wrn-color-border));
           border-radius: 999px;
-          background: color-mix(in srgb, var(--wrn-field-color) 9%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface));
         }
         .wrn-next__choice[data-variant="ghost"] {
-          padding: 0.65rem 0.8rem;
+          padding: 0.65rem 0.85rem;
           border-radius: var(--wrn-radius-sm);
-          background: color-mix(in srgb, var(--wrn-field-color) 7%, transparent);
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, transparent);
         }
         .wrn-next__choice[data-variant="underline"] {
           padding-block: 0.5rem;
@@ -544,29 +570,36 @@ size: string = "default"
           align-items: center;
           justify-content: space-between;
           gap: 0.75rem;
-          padding: 0.7rem 0.85rem;
-          border: 1px solid var(--wrn-color-border);
+          padding: 0.55rem 0.85rem;
+          border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
           border-radius: var(--wrn-radius-sm);
-          background: var(--wrn-color-surface);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
           color: var(--wrn-color-text);
           font: inherit;
+          font-size: 0.875rem;
+          font-variant-numeric: tabular-nums;
           text-align: left;
+          cursor: pointer;
+          transition: border-color 120ms ease, box-shadow 120ms ease;
         }
         .wrn-next--date-picker, .wrn-next--time-picker { position: relative; }
         .wrn-next__calendar,
         .wrn-next__time-panel {
           position: absolute;
-          inset-block-start: calc(100% + .4rem);
-          inset-inline-start: 0;
           z-index: 40;
+          top: 100%;
+          left: 0;
           display: grid;
-          width: min(100%, 22rem);
+          width: min(calc(100vw - 2rem), 19.5rem);
           gap: 0.75rem;
-          padding: 0.85rem;
+          margin-top: 0.375rem;
+          padding: 0.75rem;
           border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-md);
-          background: var(--wrn-color-surface);
-          box-shadow: var(--wrn-shadow-3);
+          border-radius: var(--wrn-radius);
+          background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
+          box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
+          animation: wrn-popover-enter var(--wrn-motion-base, 160ms) var(--wrn-ease-emphasized, ease) both;
         }
         .wrn-next--date-picker[data-expanded="false"] .wrn-next__calendar,
         .wrn-next--time-picker[data-expanded="false"] .wrn-next__time-panel {
@@ -576,29 +609,42 @@ size: string = "default"
         .wrn-next__time-panel button {
           min-height: 2.25rem;
           border: 0;
-          border-radius: var(--wrn-radius-sm);
+          border-radius: calc(var(--wrn-radius-sm) - 2px);
           background: transparent;
           color: inherit;
+          font: inherit;
+          font-size: 0.8125rem;
+          font-variant-numeric: tabular-nums;
+          cursor: pointer;
+          transition: background-color 120ms ease, color 120ms ease;
         }
         .wrn-next__calendar-weekdays,
         .wrn-next__calendar-grid {
           display: grid;
           grid-template-columns: repeat(7, 1fr);
-          gap: 0.2rem;
+          gap: 0.125rem;
           text-align: center;
         }
         .wrn-next__calendar-weekdays {
-          color: var(--wrn-color-muted);
-          font-size: 0.75rem;
+          padding-bottom: 0.375rem;
+          border-bottom: 1px solid var(--wrn-color-border);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+          font-family: var(--wrn-font-mono, monospace);
+          font-size: 0.625rem;
+          font-weight: 600;
+          letter-spacing: 0.06em;
+          text-transform: uppercase;
         }
         .wrn-next__calendar-grid button:hover,
         .wrn-next__time-panel button:hover {
-          background: var(--wrn-color-surface-2);
+          background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
         }
         .wrn-next__calendar-grid button[aria-pressed="true"],
         .wrn-next__time-panel button[aria-pressed="true"] {
           background: var(--wrn-field-color);
           color: var(--wrn-color-primary-contrast, #fff);
+          box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--wrn-field-color) 35%, transparent);
+          font-weight: 650;
         }
         .wrn-next__time-period {
           display: flex;
@@ -632,7 +678,7 @@ size: string = "default"
         .wrn-next--field[data-variant="ghost"]
           :is(.wrn-next__input-group-control, .wrn-next__file-control, .wrn-next__color-control) {
           border-color: transparent;
-          background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
         }
         @media (max-width: 640px) {
           .wrn-next--field[data-inline="true"],
@@ -654,5 +700,34 @@ size: string = "default"
         .wrn-next--strong-password input.wrn-invalid {
           border-color: var(--wrn-color-danger);
         }
+  
+    .wrn-next__time-panel > div > strong {
+      display: block;
+      padding: 0 0.25rem 0.375rem;
+      border-bottom: 1px solid var(--wrn-color-border);
+      color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+      font-family: var(--wrn-font-mono, monospace);
+      font-size: 0.625rem;
+      font-weight: 600;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+    }
+  
+    .wrn-next__time-options > button {
+      scroll-snap-align: start;
+      font-family: var(--wrn-font-mono, monospace);
+    }
+  
+    .wrn-next--time-picker[data-expanded="true"] .wrn-next__time-trigger {
+      border-color: var(--wrn-field-color);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-field-color) 18%, transparent);
+    }
+  
+    .wrn-next__time-trigger > i {
+      width: 1rem;
+      height: 1rem;
+      flex: none;
+      color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+    }
   }
 }
diff --git a/packages/ui/components/Timeline.wrn b/packages/ui/components/Timeline.wrn
index 6c4dab2e..d7aaf8bc 100644
--- a/packages/ui/components/Timeline.wrn
+++ b/packages/ui/components/Timeline.wrn
@@ -14,6 +14,21 @@ component Timeline {
     class: string = ""
   }
 
+  functions {
+    // Explicit status wins; otherwise the item flagged current is "current"
+    // and everything after it is "upcoming".
+    shared function statusOf(item, index, currentIndex) {
+      if (item.status) { return item.status }
+      if (item.current) { return "current" }
+      currentIndex = -1
+      for (var position = 0; position < items.length; position++) {
+        if (currentIndex < 0 && items[position] && items[position].current) { currentIndex = position }
+      }
+      if (currentIndex >= 0 && index > currentIndex) { return "upcoming" }
+      return "default"
+    }
+  }
+
   view {
     <section
       data-ui-component="Timeline"
@@ -38,12 +53,13 @@ component Timeline {
         {#each items as item, index}
           <li
             class="wrn-timeline__item"
+            data-status='{statusOf(item, index)}'
             data-interactive='{item.href ? "true" : "false"}'
             @click='output.select({ item: item, index: index })'
           >
             <span
               class="wrn-timeline__marker"
-              data-status='{item.status || "default"}'
+              data-status='{statusOf(item, index)}'
             >
               {#if numbered}
                 <span class="wrn-timeline__number" aria-hidden="true">{index + 1}</span>
@@ -73,8 +89,8 @@ component Timeline {
                     <p class="wrn-timeline__subtitle">{item.subtitle}</p>
                   {/if}
                 </div>
-                {#if item.date || item.meta}
-                  <time class="wrn-timeline__time">{item.date || item.meta}</time>
+                {#if item.date || item.time || item.meta}
+                  <time class="wrn-timeline__time">{item.date || item.time || item.meta}</time>
                 {/if}
               </div>
 
@@ -104,31 +120,94 @@ component Timeline {
     .wrn-timeline[data-color="success"] { --wrn-timeline-accent: var(--wrn-color-success); }
     .wrn-timeline[data-color="info"] { --wrn-timeline-accent: var(--wrn-color-info); }
     .wrn-timeline__header { margin-bottom: 1.5rem; }
-    .wrn-timeline__title { color: var(--wrn-color-text); font-size: 1.25rem; font-weight: 700; }
+    .wrn-timeline__title {
+      color: var(--wrn-color-text);
+      font-size: 1.25rem;
+      font-weight: 650;
+      letter-spacing: -0.02em;
+    }
     .wrn-timeline__description { max-width: 42rem; margin-top: 0.5rem; color: var(--wrn-color-text-muted); line-height: 1.75rem; }
     .wrn-timeline__list { position: relative; display: grid; gap: 1rem; margin: 0; padding: 0 0 0 3rem; list-style: none; }
-    .wrn-timeline__list::before { position: absolute; inset-block: 1rem; inset-inline-start: 1rem; width: 2px; border-radius: 999px; background: color-mix(in srgb, var(--wrn-timeline-accent) 30%, var(--wrn-color-border)); content: ""; }
+    .wrn-timeline__list::before {
+      position: absolute;
+      inset-block: 1rem;
+      inset-inline-start: 0.9375rem;
+      width: 2px;
+      border-radius: 999px;
+      background: var(--wrn-color-border);
+      content: "";
+    }
     .wrn-timeline__item { position: relative; min-width: 0; }
     .wrn-timeline__item:last-child { padding-bottom: 0; }
     .wrn-timeline__marker {
-      position: absolute; z-index: 1; top: 1rem; inset-inline-start: -3rem; display: flex; width: 2rem; height: 2rem;
-      align-items: center; justify-content: center; border: 4px solid var(--wrn-color-background);
-      border-radius: 50%; color: var(--wrn-color-on-primary); background: var(--wrn-timeline-accent); box-shadow: var(--wrn-shadow-1);
+      position: absolute;
+      z-index: 1;
+      top: 1.125rem;
+      inset-inline-start: -3rem;
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      align-items: center;
+      justify-content: center;
+      border: 3px solid var(--wrn-color-bg);
+      border-radius: 50%;
+      color: var(--wrn-color-on-primary);
+      background: var(--wrn-timeline-accent);
+      box-shadow: 0 0 0 1px color-mix(in srgb, var(--wrn-timeline-accent) 40%, var(--wrn-color-border)), var(--wrn-highlight-edge, none);
     }
     .wrn-timeline__marker:is([data-status="complete"], [data-status="success"]) { background: var(--wrn-color-success); }
     .wrn-timeline__marker:is([data-status="warning"], [data-status="pending"]) { background: var(--wrn-color-warning); }
     .wrn-timeline__marker:is([data-status="danger"], [data-status="failed"]) { background: var(--wrn-color-danger); }
-    .wrn-timeline__number { font-size: 0.75rem; font-weight: 800; }
-    .wrn-timeline__card { min-width: 0; padding: 1.25rem; border: 1px solid var(--wrn-color-border); border-radius: calc(var(--wrn-radius) * 1.5); background: var(--wrn-color-surface-raised); box-shadow: var(--wrn-shadow-1); transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
+    .wrn-timeline__number {
+      font-family: var(--wrn-font-mono, monospace);
+      font-size: 0.72rem;
+      font-weight: 650;
+    }
+    .wrn-timeline__card {
+      min-width: 0;
+      padding: 1.125rem 1.25rem;
+      border: 1px solid var(--wrn-color-border);
+      border-radius: var(--wrn-radius);
+      background: var(--wrn-color-surface-raised);
+      box-shadow: var(--wrn-shadow-1);
+      transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
+    }
     .wrn-timeline__item[data-interactive="true"] { cursor: pointer; }
-    .wrn-timeline__item[data-interactive="true"]:hover .wrn-timeline__card { border-color: color-mix(in srgb, var(--wrn-timeline-accent) 45%, var(--wrn-color-border)); transform: translateY(-2px); box-shadow: var(--wrn-shadow-2); }
+    .wrn-timeline__item[data-interactive="true"]:hover .wrn-timeline__card {
+      border-color: var(--wrn-color-border-strong, var(--wrn-color-border));
+      transform: translateY(-1px);
+      box-shadow: var(--wrn-shadow-2);
+    }
     .wrn-timeline__card[data-variant="minimal"] { padding: 0; border-color: transparent; background: transparent; box-shadow: none; }
     .wrn-timeline__card-header { display: flex; flex-direction: column; gap: 0.5rem; }
-    .wrn-timeline__item-title { color: var(--wrn-color-text); font-weight: 700; }
-    .wrn-timeline__subtitle { margin-top: 0.25rem; color: var(--wrn-color-primary); font-size: 0.875rem; font-weight: 500; }
-    .wrn-timeline__time { flex: none; color: var(--wrn-color-text-muted); font-size: 0.875rem; }
+    .wrn-timeline__item-title {
+      color: var(--wrn-color-text);
+      font-weight: 620;
+      letter-spacing: -0.01em;
+    }
+    .wrn-timeline__subtitle {
+      margin-top: 0.125rem;
+      color: var(--wrn-color-primary-text, var(--wrn-color-primary));
+      font-size: 0.8125rem;
+      font-weight: 550;
+    }
+    .wrn-timeline__time {
+      flex: none;
+      color: var(--wrn-color-text-subtle, var(--wrn-color-text-muted));
+      font-family: var(--wrn-font-mono, monospace);
+      font-size: 0.72rem;
+      font-variant-numeric: tabular-nums;
+    }
     .wrn-timeline__copy { margin-top: 0.75rem; color: var(--wrn-color-text-muted); font-size: 0.875rem; line-height: 1.5rem; }
-    .wrn-timeline__action { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1rem; color: var(--wrn-color-primary); font-size: 0.875rem; font-weight: 600; }
+    .wrn-timeline__action {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.375rem;
+      margin-top: 0.875rem;
+      color: var(--wrn-color-primary-text, var(--wrn-color-primary));
+      font-size: 0.8125rem;
+      font-weight: 600;
+    }
     .wrn-timeline__action:hover { color: var(--wrn-color-primary-hover); }
     .wrn-timeline__action-icon { width: 1rem; height: 1rem; }
     .wrn-timeline__empty { padding-left: 2rem; color: var(--wrn-color-text-muted); font-size: 0.875rem; }
@@ -141,5 +220,84 @@ component Timeline {
       .wrn-timeline__marker { inset-inline-start: -2.5rem; }
       .wrn-timeline__card { padding: 1rem; }
     }
+
+    /* --- Status: current rings and pulses, upcoming goes hollow ------------ */
+    .wrn-timeline__marker[data-status="current"] {
+      box-shadow: 0 0 0 1px var(--wrn-timeline-accent), 0 0 0 5px color-mix(in srgb, var(--wrn-timeline-accent) 20%, transparent);
+      animation: wrn-timeline-pulse 2.2s ease-in-out infinite;
+    }
+    .wrn-timeline__marker[data-status="upcoming"] {
+      color: var(--wrn-color-text-subtle, var(--wrn-color-text-muted));
+      background: var(--wrn-color-surface);
+      box-shadow: inset 0 0 0 1.5px var(--wrn-color-border-strong, var(--wrn-color-border));
+    }
+    .wrn-timeline__item[data-status="current"] .wrn-timeline__card {
+      border-color: color-mix(in srgb, var(--wrn-timeline-accent) 45%, var(--wrn-color-border));
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-timeline-accent) 10%, transparent), var(--wrn-shadow-1);
+    }
+    .wrn-timeline__item[data-status="upcoming"] .wrn-timeline__card { opacity: 0.72; }
+    .wrn-timeline__item[data-status="upcoming"] .wrn-timeline__item-title { color: var(--wrn-color-text-muted); }
+    @keyframes wrn-timeline-pulse {
+      50% { box-shadow: 0 0 0 1px var(--wrn-timeline-accent), 0 0 0 8px color-mix(in srgb, var(--wrn-timeline-accent) 6%, transparent); }
+    }
+
+    /* --- Card variants ----------------------------------------------------- */
+    .wrn-timeline[data-variant="soft"] .wrn-timeline__card {
+      border-color: transparent;
+      background: color-mix(in srgb, var(--wrn-timeline-accent) 5%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
+      box-shadow: none;
+    }
+    .wrn-timeline[data-variant="raised"] .wrn-timeline__card {
+      border-color: var(--wrn-color-border);
+      box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-2);
+    }
+    .wrn-timeline[data-variant="outline"] .wrn-timeline__card {
+      background: transparent;
+      border-style: dashed;
+      box-shadow: none;
+    }
+
+    /* Compact: a dense dot rail with the time inline, for drawers and panels. */
+    .wrn-timeline[data-variant="compact"] .wrn-timeline__list { gap: 0; padding-inline-start: 1.75rem; }
+    .wrn-timeline[data-variant="compact"] .wrn-timeline__list::before { inset-block: 0.5rem; inset-inline-start: 0.4375rem; width: 1px; }
+    .wrn-timeline[data-variant="compact"] .wrn-timeline__marker {
+      top: 0.625rem; inset-inline-start: -1.75rem; width: 0.875rem; height: 0.875rem; border-width: 2px;
+      box-shadow: 0 0 0 1px color-mix(in srgb, var(--wrn-timeline-accent) 40%, var(--wrn-color-border));
+    }
+    .wrn-timeline[data-variant="compact"] .wrn-timeline__marker > * { display: none; }
+    .wrn-timeline[data-variant="compact"] .wrn-timeline__card {
+      padding: 0.4rem 0 0.9rem; border: 0; border-radius: 0; background: transparent; box-shadow: none;
+    }
+    .wrn-timeline[data-variant="compact"] .wrn-timeline__card-header { flex-direction: row; align-items: baseline; justify-content: space-between; }
+    .wrn-timeline[data-variant="compact"] .wrn-timeline__item-title { font-size: 0.875rem; font-weight: 550; }
+    .wrn-timeline[data-variant="compact"] .wrn-timeline__copy { margin-top: 0.125rem; font-size: 0.8125rem; }
+
+    /* Alternate: a centred spine with cards alternating sides once the
+       timeline itself is wide enough (container query, not viewport). */
+    .wrn-timeline[data-variant="alternate"] { container: wrn-timeline / inline-size; }
+    @container wrn-timeline (min-width: 40rem) {
+      .wrn-timeline[data-variant="alternate"] .wrn-timeline__list { padding-inline-start: 0; gap: 1.5rem; }
+      .wrn-timeline[data-variant="alternate"] .wrn-timeline__list::before { inset-inline-start: calc(50% - 1px); }
+      .wrn-timeline[data-variant="alternate"] .wrn-timeline__item { width: calc(50% - 2rem); }
+      .wrn-timeline[data-variant="alternate"] .wrn-timeline__item:nth-of-type(even) { margin-inline-start: auto; }
+      .wrn-timeline[data-variant="alternate"] .wrn-timeline__item:nth-of-type(odd) .wrn-timeline__marker { inset-inline-start: auto; inset-inline-end: -3rem; }
+      .wrn-timeline[data-variant="alternate"] .wrn-timeline__item:nth-of-type(even) .wrn-timeline__marker { inset-inline-start: -3rem; }
+      .wrn-timeline[data-variant="alternate"] .wrn-timeline__item:nth-of-type(odd) .wrn-timeline__card { text-align: end; }
+      .wrn-timeline[data-variant="alternate"] .wrn-timeline__item:nth-of-type(odd) .wrn-timeline__card-header { flex-direction: row-reverse; }
+    }
+
+    /* --- Sizes --------------------------------------------------------------- */
+    .wrn-timeline[data-size="sm"] .wrn-timeline__title { font-size: 1rem; }
+    .wrn-timeline[data-size="sm"] .wrn-timeline__card { padding: 0.75rem 0.875rem; }
+    .wrn-timeline[data-size="sm"] .wrn-timeline__item-title { font-size: 0.875rem; }
+    .wrn-timeline[data-size="sm"] .wrn-timeline__list { gap: 0.625rem; }
+    .wrn-timeline[data-size="lg"] .wrn-timeline__title { font-size: 1.5rem; }
+    .wrn-timeline[data-size="lg"] .wrn-timeline__card { padding: 1.375rem 1.5rem; }
+    .wrn-timeline[data-size="lg"] .wrn-timeline__item-title { font-size: 1.0625rem; }
+    .wrn-timeline[data-size="lg"] .wrn-timeline__list { gap: 1.25rem; }
+
+    @media (prefers-reduced-motion: reduce) {
+      .wrn-timeline__marker[data-status="current"] { animation: none; }
+    }
   }
 }
diff --git a/packages/ui/components/Toaster.wrn b/packages/ui/components/Toaster.wrn
index 8c6917cc..92254e58 100644
--- a/packages/ui/components/Toaster.wrn
+++ b/packages/ui/components/Toaster.wrn
@@ -699,12 +699,12 @@ component Toaster {
       align-items: flex-start;
       gap: 0.7rem;
       overflow: hidden;
-      padding: 0.85rem 0.9rem;
+      padding: 0.8rem 0.875rem;
       color: var(--wrn-color-text);
       background: var(--wrn-color-surface-raised);
       border: 1px solid var(--wrn-color-border);
-      border-radius: 0.9rem;
-      box-shadow: 0 18px 40px color-mix(in srgb, black 28%, transparent);
+      border-radius: var(--wrn-radius);
+      box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
       pointer-events: auto;
       animation: wrn-toast-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
     }
@@ -725,7 +725,7 @@ component Toaster {
 
     .wrn-toast__indicator {
       flex: 0 0 auto;
-      width: 0.4rem;
+      width: 3px;
       align-self: stretch;
       border-radius: 999px;
       background: var(--toast-accent, var(--wrn-color-primary));
@@ -784,14 +784,15 @@ component Toaster {
 
     .wrn-toast__title {
       color: var(--wrn-color-text);
-      font-size: 0.85rem;
-      font-weight: 650;
+      font-size: 0.875rem;
+      font-weight: 620;
+      letter-spacing: -0.008em;
       line-height: 1.35;
     }
 
     .wrn-toast__message {
       color: var(--wrn-color-text-muted);
-      font-size: 0.82rem;
+      font-size: 0.8125rem;
       line-height: 1.5;
     }
 
@@ -822,14 +823,16 @@ component Toaster {
       min-height: 1.75rem;
       display: inline-flex;
       align-items: center;
-      padding: 0 0.6rem;
-      color: var(--toast-accent, var(--wrn-color-primary));
-      background: transparent;
-      border: 1px solid color-mix(in srgb, var(--toast-accent, var(--wrn-color-primary)) 40%, transparent);
-      border-radius: 0.55rem;
+      padding: 0 0.625rem;
+      color: var(--wrn-color-text);
+      background: linear-gradient(180deg, var(--wrn-color-surface), var(--wrn-color-surface-soft, var(--wrn-color-surface)));
+      border: 1px solid var(--wrn-color-border);
+      border-bottom-color: var(--wrn-color-border-strong, var(--wrn-color-border));
+      border-radius: calc(var(--wrn-radius-sm) - 2px);
+      box-shadow: var(--wrn-shadow-1);
       font: inherit;
       font-size: 0.78rem;
-      font-weight: 650;
+      font-weight: 600;
       cursor: pointer;
     }
 
@@ -852,14 +855,14 @@ component Toaster {
       color: var(--wrn-color-text-muted);
       background: transparent;
       border: 0;
-      border-radius: 999px;
+      border-radius: calc(var(--wrn-radius-sm) - 2px);
       cursor: pointer;
       transition: color 150ms ease, background 150ms ease;
     }
 
     .wrn-toast__close:hover {
       color: var(--wrn-color-text);
-      background: var(--wrn-color-surface-soft);
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-soft));
     }
 
     .wrn-toast__close svg {
diff --git a/packages/ui/components/ToggleCount.wrn b/packages/ui/components/ToggleCount.wrn
index fef6cddb..cc095d5a 100644
--- a/packages/ui/components/ToggleCount.wrn
+++ b/packages/ui/components/ToggleCount.wrn
@@ -310,32 +310,31 @@ component ToggleCount {
 
     .wrn-next__toggle-count-segmented {
       display: inline-flex;
-      gap: 0.2rem;
-      padding: 0.2rem;
-      border-radius: calc(var(--wrn-radius-sm) + 0.15rem);
-      background: var(--wrn-color-surface-2);
-      box-shadow: inset 0 0 0 1px var(--wrn-color-border);
+      gap: 0.125rem;
+      padding: 0.1875rem;
+      border-radius: calc(var(--wrn-radius-sm) + 0.1875rem);
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
+      box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.06), inset 0 0 0 1px var(--wrn-color-border);
     }
 
     .wrn-next__toggle-count-segmented button {
-      min-height: 2.35rem;
-      padding: 0.45rem 0.8rem;
+      min-height: 2rem;
+      padding: 0.35rem 0.8rem;
       border: 0;
       border-radius: var(--wrn-radius-sm);
       background: transparent;
-      color: var(--wrn-color-muted);
+      color: var(--wrn-color-text-muted);
       font: inherit;
-      font-size: 0.78rem;
-      font-weight: 700;
+      font-size: 0.8125rem;
+      font-weight: 600;
       cursor: pointer;
+      transition: color 120ms ease, background-color 120ms ease;
     }
 
     .wrn-next__toggle-count-segmented button[aria-pressed="true"] {
-      background: var(--wrn-color-surface);
+      background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
       color: var(--wrn-color-text);
-      box-shadow:
-        var(--wrn-shadow-1),
-        inset 0 -2px var(--wrn-toggle-count-accent);
+      box-shadow: 0 0 0 1px var(--wrn-color-border), var(--wrn-shadow-1);
     }
 
     .wrn-next__toggle-count-segmented button:focus-visible,
@@ -366,14 +365,15 @@ component ToggleCount {
 
     .wrn-next__toggle-count-switch {
       position: relative;
-      width: 2.65rem;
-      height: 1.45rem;
-      padding: 0.15rem;
-      border: 1px solid var(--wrn-color-border);
+      width: 2.375rem;
+      height: 1.375rem;
+      padding: 0.125rem;
+      border: 1px solid color-mix(in srgb, var(--wrn-color-border-strong, var(--wrn-color-border)) 70%, transparent);
       border-radius: 999px;
-      background: var(--wrn-color-surface-2);
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
+      box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.1);
       cursor: pointer;
-      transition: background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
+      transition: background-color var(--wrn-motion-base) var(--wrn-ease-standard);
     }
 
     .wrn-next__toggle-count-switch > span {
@@ -381,19 +381,19 @@ component ToggleCount {
       width: 1rem;
       height: 1rem;
       border-radius: 50%;
-      background: var(--wrn-color-text);
-      box-shadow: var(--wrn-shadow-1);
-      transition: transform var(--wrn-motion-fast) var(--wrn-ease-standard);
+      background: #fff;
+      box-shadow: 0 1px 2px rgb(0 0 0 / 0.22), 0 0 0 0.5px rgb(0 0 0 / 0.06);
+      transition: transform var(--wrn-motion-base) var(--wrn-ease-emphasized);
     }
 
     .wrn-next__toggle-count-switch[aria-checked="true"] {
-      border-color: var(--wrn-toggle-count-accent);
+      border-color: color-mix(in srgb, var(--wrn-toggle-count-accent) 80%, black);
       background: var(--wrn-toggle-count-accent);
     }
 
     .wrn-next__toggle-count-switch[aria-checked="true"] > span {
-      background: white;
-      transform: translateX(1.15rem);
+      background: #fff;
+      transform: translateX(1rem);
     }
 
     .wrn-next__toggle-count-items {
@@ -401,8 +401,9 @@ component ToggleCount {
       grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
       overflow: hidden;
       border: 1px solid var(--wrn-color-border);
-      border-radius: var(--wrn-radius-md);
+      border-radius: var(--wrn-radius);
       background: var(--wrn-color-surface);
+      box-shadow: var(--wrn-shadow-1);
     }
 
     .wrn-next__toggle-count-items article {
@@ -427,7 +428,9 @@ component ToggleCount {
       display: flex;
       align-items: baseline;
       gap: 0.2rem;
-      font-size: 1.5rem;
+      font-size: 1.625rem;
+      font-weight: 650;
+      letter-spacing: -0.035em;
       line-height: 1;
     }
 
@@ -533,7 +536,7 @@ component ToggleCount {
 
         .wrn-component p {
           margin: 0;
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-muted, var(--wrn-color-muted));
           line-height: 1.6;
         }
   }
diff --git a/packages/ui/components/TogglePassword.wrn b/packages/ui/components/TogglePassword.wrn
index 0f6977c9..a6d952d6 100644
--- a/packages/ui/components/TogglePassword.wrn
+++ b/packages/ui/components/TogglePassword.wrn
@@ -189,7 +189,7 @@ component TogglePassword {
 
     .wrn-next--toggle-password > label {
       color: var(--wrn-color-text);
-      font-size: 0.75rem;
+      font-size: 0.8125rem;
       font-weight: 600;
     }
 
@@ -200,14 +200,14 @@ component TogglePassword {
       justify-content: space-between;
       gap: 1rem;
       color: var(--wrn-color-text);
-      font-size: 0.75rem;
+      font-size: 0.8125rem;
       font-weight: 600;
     }
 
     .wrn-next__password-heading > :is(a, span) {
-      color: var(--wrn-component-color);
-      font-size: 0.75rem;
-      font-weight: 500;
+      color: var(--wrn-color-primary-text, var(--wrn-component-color));
+      font-size: 0.78rem;
+      font-weight: 550;
       text-decoration: none;
     }
 
@@ -227,8 +227,8 @@ component TogglePassword {
 
     .wrn-next__password-field > label {
       color: var(--wrn-color-text);
-      font-size: 0.82em;
-      font-weight: 750;
+      font-size: 0.8125rem;
+      font-weight: 600;
     }
 
     .wrn-next__password-control {
@@ -244,16 +244,15 @@ component TogglePassword {
       min-width: 0;
       min-height: var(--wrn-control-height);
       padding: 0.55rem 3rem 0.55rem 0.85rem;
-      border: 1px solid var(--wrn-color-border);
+      border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
       border-radius: var(--wrn-radius-sm);
       outline: 0;
       color: var(--wrn-color-text);
-      background: var(--wrn-color-surface);
+      background: var(--wrn-color-input-background, var(--wrn-color-surface));
+      box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
       font: inherit;
       font-size: 0.875rem;
-      transition:
-        border-color var(--wrn-motion-base) var(--wrn-ease-standard),
-        box-shadow var(--wrn-motion-base) var(--wrn-ease-standard);
+      transition: border-color var(--wrn-motion-base) var(--wrn-ease-standard), box-shadow var(--wrn-motion-base) var(--wrn-ease-standard);
     }
 
     .wrn-next__password-leading-icon {
@@ -292,8 +291,8 @@ component TogglePassword {
 
     .wrn-next__password-toggle:hover,
     .wrn-next__password-toggle:focus-visible {
-      color: var(--wrn-component-color);
-      background: color-mix(in srgb, var(--wrn-component-color) 10%, transparent);
+      color: var(--wrn-color-text);
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
       outline: 0;
     }
 
@@ -326,9 +325,9 @@ component TogglePassword {
       display: inline-flex;
       width: fit-content;
       align-items: center;
-      gap: 0.55rem;
-      color: var(--wrn-color-muted);
-      font-size: 0.78em;
+      gap: 0.5rem;
+      color: var(--wrn-color-text-muted);
+      font-size: 0.8125rem;
       cursor: pointer;
     }
 
@@ -409,7 +408,7 @@ component TogglePassword {
 
         .wrn-component p {
           margin: 0;
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-muted, var(--wrn-color-muted));
           line-height: 1.6;
         }
 
@@ -424,8 +423,9 @@ component TogglePassword {
           display: block;
           min-height: 1em;
           margin-top: 0.25rem;
-          color: var(--wrn-color-danger);
-          font-size: 0.8rem;
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
+          font-size: 0.78rem;
+          font-weight: 550;
         }
 
         .wrn-next--choice {
@@ -452,13 +452,14 @@ component TogglePassword {
           width: 100%;
           min-height: var(--wrn-control-height, 2.5rem);
           padding: 0.5rem 0.75rem;
-          border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-sm, 6px);
+          border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
+          border-radius: var(--wrn-radius-sm, 8px);
           outline: 0;
           color: var(--wrn-color-text);
-          background: var(--wrn-color-bg);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
           font: inherit;
           font-weight: 500;
+          transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
         }
         .wrn-auth-form form > .wrn-next--field,
         .wrn-auth-form form > .wrn-field {
@@ -472,8 +473,8 @@ component TogglePassword {
       box-shadow: none;
         }
         .wrn-next--field :where(input, textarea, select):focus-visible {
-          border-color: var(--wrn-color-primary);
-          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
+          border-color: var(--wrn-field-color, var(--wrn-color-primary));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04), 0 0 0 3px color-mix(in srgb, var(--wrn-field-color, var(--wrn-color-primary)) 18%, transparent);
         }
         .wrn-next--field textarea {
           resize: vertical;
@@ -507,12 +508,14 @@ component TogglePassword {
           font-size: 0.8125rem;
           font-weight: 600;
           line-height: 1.35;
+          letter-spacing: -0.005em;
         }
         .wrn-next__field-hint,
         .wrn-next__field-help {
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
           font-size: 0.75rem;
-          font-weight: 500;
+          font-weight: 450;
+          line-height: 1.45;
         }
         .wrn-next__field-control {
           position: relative;
@@ -520,10 +523,11 @@ component TogglePassword {
         }
         .wrn-next__field-control > :is(input, textarea, select) {
           padding-inline: 0.85rem;
-          border-color: var(--wrn-color-border);
+          border-color: var(--wrn-color-input-border, var(--wrn-color-border));
           border-radius: var(--wrn-radius-sm);
-          background: var(--wrn-color-surface);
-          font-size: 0.8125rem;
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
+          font-size: 0.875rem;
         }
         .wrn-next__field-control[data-has-icon="true"][data-icon-position="start"] > :is(input, textarea, select) {
           padding-inline-start: 2.5rem;
@@ -564,7 +568,8 @@ component TogglePassword {
         }
         .wrn-next--field[data-variant="ghost"] .wrn-next__field-control > :is(input, textarea, select) {
           border-color: transparent;
-          background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
+          box-shadow: none;
         }
         .wrn-next__field-floating-label {
           position: absolute;
@@ -605,9 +610,9 @@ component TogglePassword {
         }
         .wrn-next__field-error {
           min-height: 1em;
-          color: var(--wrn-color-danger);
-          font-size: 0.82em;
-          font-weight: 600;
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
+          font-size: 0.78rem;
+          font-weight: 550;
         }
         .wrn-next__field-error:empty {
           display: none;
@@ -615,14 +620,16 @@ component TogglePassword {
         .wrn-next--field[data-invalid="true"] :is(input, textarea, select),
         .wrn-next--choice-field[data-invalid="true"] input {
           border-color: var(--wrn-color-danger);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-danger) 12%, transparent);
         }
         .wrn-next--field :is(input, textarea, select):disabled,
         .wrn-next--choice-field input:disabled {
           cursor: not-allowed;
-          opacity: 0.58;
+          opacity: 0.55;
+          background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
         }
         .wrn-next--field :is(input, textarea, select):read-only {
-          background: var(--wrn-color-surface-2);
+          background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
         }
         .wrn-next--field[data-inline="true"],
         .wrn-next--choice-field[data-inline="true"] {
@@ -679,11 +686,13 @@ component TogglePassword {
           display: flex;
           min-width: 0;
           align-items: center;
-          gap: 0.65rem;
+          gap: 0.625rem;
           color: var(--wrn-color-text);
           width: 100%;
-          font-size: 0.75rem;
+          font-size: 0.875rem;
           font-weight: 500;
+          line-height: 1.4;
+          cursor: pointer;
         }
         .wrn-next__checkbox-content > .wrn-next__choice {
           width: 100%;
@@ -698,12 +707,13 @@ component TogglePassword {
         .wrn-next__choice-copy {
           display: grid;
           min-width: 0;
-          gap: 0.15rem;
-          line-height: 1.35;
+          gap: 0.125rem;
+          line-height: 1.4;
         }
         .wrn-next__choice-copy small {
-          color: var(--wrn-color-muted);
-          font-weight: 500;
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+          font-size: 0.78rem;
+          font-weight: 450;
         }
         .wrn-next__radio-group,
         .wrn-next__checkbox-group {
@@ -723,15 +733,18 @@ component TogglePassword {
         .wrn-next--radio-field[data-card="true"] .wrn-next--radio,
         .wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox {
           min-height: 4.5rem;
-          padding: 0.85rem;
+          padding: 0.9rem 1rem;
           border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-sm);
+          border-radius: var(--wrn-radius);
           background: var(--wrn-color-surface);
+          box-shadow: var(--wrn-shadow-1);
+          transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
         }
         .wrn-next--radio-field[data-card="true"] .wrn-next--radio:has(input:checked),
         .wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox:has(input:checked) {
           border-color: var(--wrn-field-color);
-          box-shadow: 0 0 0 1px var(--wrn-field-color);
+          background: color-mix(in srgb, var(--wrn-field-color) 5%, var(--wrn-color-surface));
+          box-shadow: 0 0 0 1px var(--wrn-field-color), var(--wrn-shadow-1);
         }
         .wrn-next--radio-field[data-list="true"] .wrn-next--radio,
         .wrn-next--checkbox-field[data-list="true"] .wrn-next--checkbox {
@@ -752,19 +765,21 @@ component TogglePassword {
         }
         .wrn-next__choice[data-variant="outlined"],
         .wrn-next__choice[data-variant="floating"] {
-          padding: 0.65rem 0.8rem;
+          padding: 0.7rem 0.85rem;
           border: 1px solid var(--wrn-color-border);
           border-radius: var(--wrn-radius-sm);
+          background: var(--wrn-color-surface);
         }
         .wrn-next__choice[data-variant="pill"] {
-          padding: 0.65rem 1rem;
+          padding: 0.6rem 1rem;
+          border: 1px solid color-mix(in srgb, var(--wrn-field-color) 22%, var(--wrn-color-border));
           border-radius: 999px;
-          background: color-mix(in srgb, var(--wrn-field-color) 9%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface));
         }
         .wrn-next__choice[data-variant="ghost"] {
-          padding: 0.65rem 0.8rem;
+          padding: 0.65rem 0.85rem;
           border-radius: var(--wrn-radius-sm);
-          background: color-mix(in srgb, var(--wrn-field-color) 7%, transparent);
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, transparent);
         }
         .wrn-next__choice[data-variant="underline"] {
           padding-block: 0.5rem;
@@ -798,25 +813,35 @@ component TogglePassword {
           align-items: center;
           justify-content: space-between;
           gap: 0.75rem;
-          padding: 0.7rem 0.85rem;
-          border: 1px solid var(--wrn-color-border);
+          padding: 0.55rem 0.85rem;
+          border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
           border-radius: var(--wrn-radius-sm);
-          background: var(--wrn-color-surface);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
           color: var(--wrn-color-text);
           font: inherit;
+          font-size: 0.875rem;
+          font-variant-numeric: tabular-nums;
           text-align: left;
+          cursor: pointer;
+          transition: border-color 120ms ease, box-shadow 120ms ease;
         }
         .wrn-next__calendar,
         .wrn-next__time-panel {
-          z-index: 20;
+          position: absolute;
+          z-index: 40;
+          top: 100%;
+          left: 0;
           display: grid;
-          width: min(100%, 22rem);
+          width: min(calc(100vw - 2rem), 19.5rem);
           gap: 0.75rem;
-          padding: 0.85rem;
+          margin-top: 0.375rem;
+          padding: 0.75rem;
           border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-md);
-          background: var(--wrn-color-surface);
-          box-shadow: var(--wrn-shadow-3);
+          border-radius: var(--wrn-radius);
+          background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
+          box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
+          animation: wrn-popover-enter var(--wrn-motion-base, 160ms) var(--wrn-ease-emphasized, ease) both;
         }
         .wrn-next--date-picker[data-expanded="false"] .wrn-next__calendar,
         .wrn-next--time-picker[data-expanded="false"] .wrn-next__time-panel {
@@ -826,29 +851,42 @@ component TogglePassword {
         .wrn-next__time-panel button {
           min-height: 2.25rem;
           border: 0;
-          border-radius: var(--wrn-radius-sm);
+          border-radius: calc(var(--wrn-radius-sm) - 2px);
           background: transparent;
           color: inherit;
+          font: inherit;
+          font-size: 0.8125rem;
+          font-variant-numeric: tabular-nums;
+          cursor: pointer;
+          transition: background-color 120ms ease, color 120ms ease;
         }
         .wrn-next__calendar-weekdays,
         .wrn-next__calendar-grid {
           display: grid;
           grid-template-columns: repeat(7, 1fr);
-          gap: 0.2rem;
+          gap: 0.125rem;
           text-align: center;
         }
         .wrn-next__calendar-weekdays {
-          color: var(--wrn-color-muted);
-          font-size: 0.75rem;
+          padding-bottom: 0.375rem;
+          border-bottom: 1px solid var(--wrn-color-border);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+          font-family: var(--wrn-font-mono, monospace);
+          font-size: 0.625rem;
+          font-weight: 600;
+          letter-spacing: 0.06em;
+          text-transform: uppercase;
         }
         .wrn-next__calendar-grid button:hover,
         .wrn-next__time-panel button:hover {
-          background: var(--wrn-color-surface-2);
+          background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
         }
         .wrn-next__calendar-grid button[aria-pressed="true"],
         .wrn-next__time-panel button[aria-pressed="true"] {
           background: var(--wrn-field-color);
           color: var(--wrn-color-primary-contrast, #fff);
+          box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--wrn-field-color) 35%, transparent);
+          font-weight: 650;
         }
         .wrn-next__time-period {
           display: flex;
@@ -882,7 +920,7 @@ component TogglePassword {
         .wrn-next--field[data-variant="ghost"]
           :is(.wrn-next__input-group-control, .wrn-next__file-control, .wrn-next__color-control) {
           border-color: transparent;
-          background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
         }
         @media (max-width: 640px) {
           .wrn-next--field[data-inline="true"],
diff --git a/packages/ui/components/TreeView.wrn b/packages/ui/components/TreeView.wrn
index 7efaa717..484b6e30 100644
--- a/packages/ui/components/TreeView.wrn
+++ b/packages/ui/components/TreeView.wrn
@@ -87,17 +87,50 @@ component TreeView {
     .wrn-tree-view { display: grid; gap: 0.5rem; color: var(--wrn-color-text); }
     .wrn-tree-view__title { font-size: 0.95rem; }
     .wrn-tree-view__description, .wrn-tree-view__empty { margin: 0; color: var(--wrn-color-muted); font-size: 0.8rem; }
-    .wrn-tree-view__tree { display: grid; gap: 0.15rem; padding: 0.4rem; border: 1px solid var(--wrn-color-border); border-radius: var(--wrn-radius); background: var(--wrn-color-surface); }
+    .wrn-tree-view__tree {
+      display: grid;
+      gap: 0.0625rem;
+      padding: 0.3rem;
+      border: 1px solid var(--wrn-color-border);
+      border-radius: var(--wrn-radius);
+      background: var(--wrn-color-surface);
+      box-shadow: var(--wrn-shadow-1);
+    }
     .wrn-tree-view__row { display: flex; min-width: 0; align-items: center; gap: 0.2rem; border-radius: var(--wrn-radius-sm); }
-    .wrn-tree-view__row[aria-selected="true"] { background: var(--wrn-color-primary-soft); }
+    .wrn-tree-view__row[aria-selected="true"] {
+      background: color-mix(in srgb, var(--wrn-color-primary) 9%, var(--wrn-color-surface));
+      box-shadow: inset 2px 0 0 var(--wrn-color-primary);
+    }
     .wrn-tree-view__toggle { display: inline-grid; width: 1.8rem; height: 1.8rem; flex: none; padding: 0; place-items: center; border: 0; border-radius: 0.35rem; color: var(--wrn-color-muted); background: transparent; }
     button.wrn-tree-view__toggle { cursor: pointer; }
     .wrn-tree-view__toggle > span { width: 0.9rem; height: 0.9rem; transition: transform var(--wrn-motion-fast); }
     .wrn-tree-view__row[aria-expanded="true"] > .wrn-tree-view__toggle > span { transform: rotate(90deg); }
-    .wrn-tree-view__node { display: flex; min-width: 0; flex: 1; align-items: center; gap: 0.45rem; padding: 0.45rem 0.5rem; border: 0; border-radius: var(--wrn-radius-sm); color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; }
-    .wrn-tree-view__node:hover, button.wrn-tree-view__toggle:hover { background: var(--wrn-color-surface-2); }
+    .wrn-tree-view__node {
+      display: flex;
+      min-width: 0;
+      flex: 1;
+      align-items: center;
+      gap: 0.45rem;
+      padding: 0.375rem 0.5rem;
+      border: 0;
+      border-radius: calc(var(--wrn-radius-sm) - 2px);
+      color: inherit;
+      background: transparent;
+      font: inherit;
+      font-size: 0.8125rem;
+      text-align: left;
+      cursor: pointer;
+    }
+    .wrn-tree-view__node:hover, button.wrn-tree-view__toggle:hover {
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
+    }
     .wrn-tree-view__node:focus-visible, button.wrn-tree-view__toggle:focus-visible { outline: 2px solid var(--wrn-color-focus); outline-offset: -2px; }
-    .wrn-tree-view__node > [class*="icon-"] { width: 1rem; height: 1rem; flex: none; color: var(--wrn-color-primary); }
+    .wrn-tree-view__node > [class*="icon-"] {
+      width: 1rem;
+      height: 1rem;
+      flex: none;
+      color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+    }
     .wrn-tree-view__group { display: grid; margin-left: 1.8rem; padding-left: 0.45rem; border-left: 1px solid var(--wrn-color-border); }
   }
 }
diff --git a/packages/ui/components/alert.wrn b/packages/ui/components/alert.wrn
index 748b1179..ba265bc1 100644
--- a/packages/ui/components/alert.wrn
+++ b/packages/ui/components/alert.wrn
@@ -145,11 +145,14 @@ component Alert {
   }
 
   style {
+    /* Soft: a quiet tinted panel with an accent rail on the leading edge. The
+       rail is a background layer so it never fights the shadow prop. */
     .wrn-next--alert-soft {
-      border-color: color-mix(in srgb, var(--wrn-alert-color) 45%, var(--wrn-color-border));
-      background: var(--wrn-alert-soft);
+      border-color: color-mix(in srgb, var(--wrn-alert-color) 24%, var(--wrn-color-border));
+      background:
+        linear-gradient(var(--wrn-alert-color), var(--wrn-alert-color)) left / 3px 100% no-repeat,
+        var(--wrn-alert-soft);
     }
-    .wrn-next--alert-soft .wrn-next__alert-title,
     .wrn-next--alert-soft .wrn-next__alert-icon,
     .wrn-next--alert-soft .wrn-next__alert-actions a {
       color: var(--wrn-alert-ink, var(--wrn-color-primary-text));
@@ -179,7 +182,6 @@ component Alert {
       border-color: var(--wrn-alert-ink, var(--wrn-color-primary-text));
       background: var(--wrn-color-surface);
     }
-    .wrn-next--alert-bordered .wrn-next__alert-title,
     .wrn-next--alert-bordered .wrn-next__alert-icon,
     .wrn-next--alert-bordered .wrn-next__alert-actions a {
       color: var(--wrn-alert-ink, var(--wrn-color-primary-text));
@@ -189,7 +191,6 @@ component Alert {
       border-left: 4px solid var(--wrn-alert-color);
       background: var(--wrn-alert-soft);
     }
-    .wrn-next--alert-accent .wrn-next__alert-title,
     .wrn-next--alert-accent .wrn-next__alert-icon,
     .wrn-next--alert-accent .wrn-next__alert-actions a {
       color: var(--wrn-alert-ink, var(--wrn-color-primary-text));
@@ -197,12 +198,13 @@ component Alert {
 
     .wrn-next--alert {
       --wrn-alert-color: var(--wrn-component-color);
-      --wrn-alert-soft: color-mix(in srgb, var(--wrn-alert-color) 16%, var(--wrn-color-surface));
+      --wrn-alert-soft: color-mix(in srgb, var(--wrn-alert-color) 7%, var(--wrn-color-surface));
       display: grid;
       grid-template-columns: auto minmax(0, 1fr) auto;
-      gap: 0.8rem;
+      align-items: start;
+      gap: 0.75rem;
       width: 100%;
-      padding: 1rem;
+      padding: 0.875rem 1rem 0.875rem 1.125rem;
       border: 1px solid transparent;
       border-radius: var(--wrn-radius, 0.75rem);
       color: var(--wrn-color-text);
@@ -229,19 +231,15 @@ component Alert {
     }
 
     .wrn-next--alert[data-shadow="sm"] {
-      box-shadow: 0 6px 16px color-mix(in srgb, #000 14%, transparent);
+      box-shadow: var(--wrn-shadow-1);
     }
 
     .wrn-next--alert[data-shadow="md"] {
-      box-shadow:
-        0 2px 6px color-mix(in srgb, #000 10%, transparent),
-        0 12px 28px color-mix(in srgb, #000 18%, transparent);
+      box-shadow: var(--wrn-shadow-2);
     }
 
     .wrn-next--alert[data-shadow="lg"] {
-      box-shadow:
-        0 4px 10px color-mix(in srgb, #000 12%, transparent),
-        0 20px 48px color-mix(in srgb, #000 24%, transparent);
+      box-shadow: var(--wrn-shadow-3);
     }
 
     .wrn-next--alert[data-color="secondary"] {
@@ -298,13 +296,19 @@ component Alert {
 
     .wrn-next__alert-icon {
       display: inline-grid;
-      width: 1.25rem;
-      height: 1.25rem;
+      width: 1.75rem;
+      height: 1.75rem;
       place-items: center;
-      margin-top: 0.05rem;
+      margin-top: -0.125rem;
+      border-radius: var(--wrn-radius-sm, 0.5rem);
+      background: color-mix(in srgb, var(--wrn-alert-color) 14%, transparent);
       color: var(--wrn-alert-ink, var(--wrn-color-primary-text));
     }
 
+    .wrn-next--alert-solid .wrn-next__alert-icon {
+      background: rgb(255 255 255 / 0.18);
+    }
+
     .wrn-next__alert-icon > span {
       width: 1rem;
       height: 1rem;
@@ -313,18 +317,21 @@ component Alert {
     .wrn-next__alert-body {
       display: grid;
       min-width: 0;
-      gap: 0.35rem;
+      gap: 0.25rem;
     }
 
     .wrn-next__alert-title {
-      font-size: 0.88rem;
+      color: var(--wrn-color-text);
+      font-size: 0.875rem;
+      font-weight: 620;
+      letter-spacing: -0.01em;
       line-height: 1.45;
     }
 
     .wrn-next__alert-body > p,
     .wrn-next__alert-body li {
-      color: inherit;
-      font-size: 0.8rem;
+      color: var(--wrn-color-text-muted, var(--wrn-color-muted));
+      font-size: 0.8125rem;
       line-height: 1.55;
     }
 
@@ -459,7 +466,7 @@ component Alert {
 
         .wrn-component p {
           margin: 0;
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-muted, var(--wrn-color-muted));
           line-height: 1.6;
         }
   }
diff --git a/packages/ui/components/avatar.wrn b/packages/ui/components/avatar.wrn
index 363b59da..17a21fed 100644
--- a/packages/ui/components/avatar.wrn
+++ b/packages/ui/components/avatar.wrn
@@ -102,7 +102,7 @@ src: string = ""
     }
 
     .wrn-next__avatar-wrap {
-      --wrn-avatar-size: 3rem;
+      --wrn-avatar-size: 2.5rem;
       --wrn-avatar-color: var(--wrn-color-primary);
       position: relative;
       display: inline-grid;
@@ -115,24 +115,24 @@ src: string = ""
     }
 
     .wrn-next__avatar-wrap[data-size="xs"] {
-      --wrn-avatar-size: 1.75rem;
+      --wrn-avatar-size: 1.5rem;
     }
 
     .wrn-next__avatar-wrap[data-size="sm"] {
-      --wrn-avatar-size: 2.25rem;
+      --wrn-avatar-size: 2rem;
     }
 
     .wrn-next__avatar-wrap[data-size="md"],
     .wrn-next__avatar-wrap[data-size="default"] {
-      --wrn-avatar-size: 3rem;
+      --wrn-avatar-size: 2.5rem;
     }
 
     .wrn-next__avatar-wrap[data-size="lg"] {
-      --wrn-avatar-size: 4rem;
+      --wrn-avatar-size: 3.25rem;
     }
 
     .wrn-next__avatar-wrap[data-size="xl"] {
-      --wrn-avatar-size: 5rem;
+      --wrn-avatar-size: 4.5rem;
     }
 
     .wrn-next__avatar-wrap[data-color="secondary"] {
@@ -169,17 +169,15 @@ src: string = ""
       height: 100%;
       overflow: hidden;
       place-items: center;
-      color: white;
-      border: 1px solid color-mix(in srgb, var(--wrn-avatar-color) 58%, var(--wrn-color-border));
+      color: color-mix(in srgb, var(--wrn-avatar-color) 78%, var(--wrn-color-text));
+      border: 1px solid color-mix(in srgb, var(--wrn-avatar-color) 22%, transparent);
       border-radius: inherit;
-      background: var(--wrn-avatar-color);
-      box-shadow:
-        0 0 0 2px var(--wrn-color-bg),
-        0 5px 14px rgb(0 0 0 / 0.16);
+      background: color-mix(in srgb, var(--wrn-avatar-color) 14%, var(--wrn-color-surface));
+      box-shadow: 0 0 0 2px var(--wrn-color-surface), var(--wrn-shadow-1);
     }
 
     .wrn-next__avatar-wrap[data-shape="rounded"] {
-      border-radius: calc(var(--wrn-radius-sm, 0.5rem) * 0.72);
+      border-radius: calc(var(--wrn-avatar-size) * 0.28);
     }
 
     .wrn-next__avatar-wrap[data-shape="square"] {
@@ -193,10 +191,10 @@ src: string = ""
     }
 
     .wrn-next__avatar-initials {
-      font-size: calc(var(--wrn-avatar-size) * 0.32);
-      font-weight: 750;
+      font-size: calc(var(--wrn-avatar-size) * 0.36);
+      font-weight: 650;
       line-height: 1;
-      letter-spacing: -0.02em;
+      letter-spacing: -0.01em;
     }
 
     .wrn-next__avatar-placeholder {
@@ -413,7 +411,7 @@ src: string = ""
 
         .wrn-component p {
           margin: 0;
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-muted, var(--wrn-color-muted));
           line-height: 1.6;
         }
   }
diff --git a/packages/ui/components/badge.wrn b/packages/ui/components/badge.wrn
index d2013691..8f7ad4e7 100644
--- a/packages/ui/components/badge.wrn
+++ b/packages/ui/components/badge.wrn
@@ -127,21 +127,23 @@ component Badge {
       isolation: isolate;
       display: inline-flex;
       min-width: 0;
-      min-height: 1.65rem;
+      min-height: 1.5rem;
       align-items: center;
       justify-content: center;
-      gap: 0.35rem;
+      gap: 0.3rem;
       max-width: var(--wrn-badge-max-width);
-      padding: 0.25rem 0.6rem;
-      color: white;
-      border: 1px solid var(--wrn-badge-color);
+      padding: 0.2rem 0.55rem;
+      color: var(--wrn-color-primary-contrast, #fff);
+      border: 1px solid color-mix(in srgb, var(--wrn-badge-color) 80%, black);
       border-radius: 999px;
       background: var(--wrn-badge-color);
-      box-shadow: none;
+      box-shadow: var(--wrn-highlight-edge, none);
       font-size: 0.75rem;
       font-weight: 600;
+      letter-spacing: -0.003em;
       line-height: 1;
       white-space: nowrap;
+      font-variant-numeric: tabular-nums;
     }
 
     .wrn-next__badge-label {
@@ -206,13 +208,14 @@ component Badge {
 
     .wrn-next__badge[data-variant="soft"] {
       color: var(--wrn-badge-ink, var(--wrn-badge-color));
-      border-color: transparent;
-      background: color-mix(in srgb, var(--wrn-badge-color) 15%, var(--wrn-color-surface));
+      border-color: color-mix(in srgb, var(--wrn-badge-color) 22%, transparent);
+      background: color-mix(in srgb, var(--wrn-badge-color) 10%, var(--wrn-color-surface));
       box-shadow: none;
     }
 
     .wrn-next__badge[data-variant="outline"] {
       color: var(--wrn-badge-ink, var(--wrn-badge-color));
+      border-color: color-mix(in srgb, var(--wrn-badge-color) 45%, var(--wrn-color-border));
       background: transparent;
       box-shadow: none;
     }
@@ -221,11 +224,11 @@ component Badge {
       color: var(--wrn-color-text);
       border-color: var(--wrn-color-border);
       background: var(--wrn-color-surface);
-      box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
+      box-shadow: var(--wrn-shadow-1);
     }
 
     .wrn-next__badge[data-shape="rounded"] {
-      border-radius: 0.4rem;
+      border-radius: 0.375rem;
     }
 
     .wrn-next__badge[data-shape="square"] {
@@ -309,18 +312,20 @@ component Badge {
 
     .wrn-next__badge-anchor {
       display: inline-flex;
-      min-height: 2.75rem;
+      min-height: 2.5rem;
       align-items: center;
       justify-content: center;
       gap: 0.5rem;
-      padding: 0.65rem 0.9rem;
+      padding: 0.55rem 0.9rem;
       color: var(--wrn-color-text);
       border: 1px solid var(--wrn-color-border);
-      border-radius: 0.5rem;
+      border-bottom-color: var(--wrn-color-border-strong, var(--wrn-color-border));
+      border-radius: var(--wrn-radius-sm);
       background: var(--wrn-color-surface);
+      box-shadow: var(--wrn-shadow-1);
       font: inherit;
       font-size: 0.875rem;
-      font-weight: 700;
+      font-weight: 600;
     }
 
     .wrn-next__badge-anchor > [class*="icon-"] {
@@ -424,7 +429,7 @@ component Badge {
 
         .wrn-component p {
           margin: 0;
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-muted, var(--wrn-color-muted));
           line-height: 1.6;
         }
   }
diff --git a/packages/ui/components/checkbox.wrn b/packages/ui/components/checkbox.wrn
index 08eb55bd..3a464699 100644
--- a/packages/ui/components/checkbox.wrn
+++ b/packages/ui/components/checkbox.wrn
@@ -79,7 +79,6 @@ size: string = "default"
           {#each options as option}
             <label
               class="wrn-next__choice wrn-next--checkbox"
-              for="{id || name}-{option.value}"
               data-variant="{variant}"
               data-disabled="{disabled || option.disabled}"
             >
@@ -116,7 +115,6 @@ size: string = "default"
         >
           <label
             class="wrn-next__choice wrn-next--checkbox"
-            for="{id || name}"
             data-variant="{variant}"
             data-icon-position="{iconPosition}"
           >
@@ -175,6 +173,71 @@ size: string = "default"
   }
 
   style {
+    /* Drawn checkbox: recessed well at rest, raised accent keycap when on. */
+    .wrn-next--checkbox input[type="checkbox"] {
+      appearance: none;
+      display: inline-grid;
+      place-content: center;
+      flex: 0 0 auto;
+      width: 1.125rem;
+      height: 1.125rem;
+      margin: 0.0625rem 0 0;
+      border: 1.5px solid var(--wrn-color-border-strong, var(--wrn-color-border));
+      border-radius: 0.3125rem;
+      background: var(--wrn-color-input-background, var(--wrn-color-surface));
+      box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.05);
+      cursor: pointer;
+      transition:
+        background-color var(--wrn-motion-fast) var(--wrn-ease-standard),
+        border-color var(--wrn-motion-fast) var(--wrn-ease-standard),
+        box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard);
+    }
+    .wrn-next--checkbox input[type="checkbox"]::after {
+      width: 0.7rem;
+      height: 0.7rem;
+      background: var(--wrn-color-primary-contrast, #fff);
+      content: "";
+      transform: scale(0.4);
+      opacity: 0;
+      transition:
+        transform var(--wrn-motion-fast) var(--wrn-ease-emphasized),
+        opacity var(--wrn-motion-fast) var(--wrn-ease-standard);
+      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / contain no-repeat;
+      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / contain no-repeat;
+    }
+    .wrn-next--checkbox input[type="checkbox"]:hover:not(:disabled) {
+      border-color: color-mix(in srgb, var(--wrn-field-color) 60%, var(--wrn-color-border-strong, var(--wrn-color-border)));
+    }
+    .wrn-next--checkbox input[type="checkbox"]:checked,
+    .wrn-next--checkbox input[type="checkbox"][aria-checked="mixed"] {
+      border-color: color-mix(in srgb, var(--wrn-field-color) 80%, black);
+      background: var(--wrn-field-color);
+      box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--wrn-field-color) 30%, transparent);
+    }
+    .wrn-next--checkbox input[type="checkbox"]:checked::after {
+      transform: scale(1);
+      opacity: 1;
+    }
+    .wrn-next--checkbox input[type="checkbox"][aria-checked="mixed"]::after {
+      height: 0.125rem;
+      border-radius: 1px;
+      transform: scale(1);
+      opacity: 1;
+      -webkit-mask: none;
+      mask: none;
+    }
+    .wrn-next--checkbox input[type="checkbox"]:focus-visible {
+      outline: 2px solid var(--wrn-field-color);
+      outline-offset: 2px;
+    }
+    .wrn-next--checkbox-field[data-invalid="true"] input[type="checkbox"] {
+      border-color: var(--wrn-color-danger);
+    }
+    .wrn-next--checkbox:has(input:disabled) {
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+
     .wrn-next__checkbox-content {
       display: grid;
       width: 100%;
@@ -265,7 +328,7 @@ size: string = "default"
 
         .wrn-component p {
           margin: 0;
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-muted, var(--wrn-color-muted));
           line-height: 1.6;
         }
 
@@ -280,8 +343,9 @@ size: string = "default"
           display: block;
           min-height: 1em;
           margin-top: 0.25rem;
-          color: var(--wrn-color-danger);
-          font-size: 0.8rem;
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
+          font-size: 0.78rem;
+          font-weight: 550;
         }
 
         .wrn-next--choice {
@@ -308,13 +372,14 @@ size: string = "default"
           width: 100%;
           min-height: var(--wrn-control-height, 2.5rem);
           padding: 0.5rem 0.75rem;
-          border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-sm, 6px);
+          border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
+          border-radius: var(--wrn-radius-sm, 8px);
           outline: 0;
           color: var(--wrn-color-text);
-          background: var(--wrn-color-bg);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
           font: inherit;
           font-weight: 500;
+          transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
         }
         .wrn-auth-form form > .wrn-next--field,
         .wrn-auth-form form > .wrn-field {
@@ -328,8 +393,8 @@ size: string = "default"
       box-shadow: none;
         }
         .wrn-next--field :where(input, textarea, select):focus-visible {
-          border-color: var(--wrn-color-primary);
-          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
+          border-color: var(--wrn-field-color, var(--wrn-color-primary));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04), 0 0 0 3px color-mix(in srgb, var(--wrn-field-color, var(--wrn-color-primary)) 18%, transparent);
         }
         .wrn-next--field textarea {
           resize: vertical;
@@ -363,12 +428,14 @@ size: string = "default"
           font-size: 0.8125rem;
           font-weight: 600;
           line-height: 1.35;
+          letter-spacing: -0.005em;
         }
         .wrn-next__field-hint,
         .wrn-next__field-help {
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
           font-size: 0.75rem;
-          font-weight: 500;
+          font-weight: 450;
+          line-height: 1.45;
         }
         .wrn-next__field-control {
           position: relative;
@@ -376,10 +443,11 @@ size: string = "default"
         }
         .wrn-next__field-control > :is(input, textarea, select) {
           padding-inline: 0.85rem;
-          border-color: var(--wrn-color-border);
+          border-color: var(--wrn-color-input-border, var(--wrn-color-border));
           border-radius: var(--wrn-radius-sm);
-          background: var(--wrn-color-surface);
-          font-size: 0.8125rem;
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
+          font-size: 0.875rem;
         }
         .wrn-next__field-control[data-has-icon="true"][data-icon-position="start"] > :is(input, textarea, select) {
           padding-inline-start: 2.5rem;
@@ -420,7 +488,8 @@ size: string = "default"
         }
         .wrn-next--field[data-variant="ghost"] .wrn-next__field-control > :is(input, textarea, select) {
           border-color: transparent;
-          background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
+          box-shadow: none;
         }
         .wrn-next__field-floating-label {
           position: absolute;
@@ -461,9 +530,9 @@ size: string = "default"
         }
         .wrn-next__field-error {
           min-height: 1em;
-          color: var(--wrn-color-danger);
-          font-size: 0.82em;
-          font-weight: 600;
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
+          font-size: 0.78rem;
+          font-weight: 550;
         }
         .wrn-next__field-error:empty {
           display: none;
@@ -471,14 +540,16 @@ size: string = "default"
         .wrn-next--field[data-invalid="true"] :is(input, textarea, select),
         .wrn-next--choice-field[data-invalid="true"] input {
           border-color: var(--wrn-color-danger);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-danger) 12%, transparent);
         }
         .wrn-next--field :is(input, textarea, select):disabled,
         .wrn-next--choice-field input:disabled {
           cursor: not-allowed;
-          opacity: 0.58;
+          opacity: 0.55;
+          background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
         }
         .wrn-next--field :is(input, textarea, select):read-only {
-          background: var(--wrn-color-surface-2);
+          background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
         }
         .wrn-next--field[data-inline="true"],
         .wrn-next--choice-field[data-inline="true"] {
@@ -535,11 +606,13 @@ size: string = "default"
           display: flex;
           min-width: 0;
           align-items: center;
-          gap: 0.65rem;
+          gap: 0.625rem;
           color: var(--wrn-color-text);
           width: 100%;
-          font-size: 0.75rem;
+          font-size: 0.875rem;
           font-weight: 500;
+          line-height: 1.4;
+          cursor: pointer;
         }
         .wrn-next__checkbox-content > .wrn-next__choice {
           width: 100%;
@@ -554,12 +627,13 @@ size: string = "default"
         .wrn-next__choice-copy {
           display: grid;
           min-width: 0;
-          gap: 0.15rem;
-          line-height: 1.35;
+          gap: 0.125rem;
+          line-height: 1.4;
         }
         .wrn-next__choice-copy small {
-          color: var(--wrn-color-muted);
-          font-weight: 500;
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+          font-size: 0.78rem;
+          font-weight: 450;
         }
         .wrn-next__radio-group,
         .wrn-next__checkbox-group {
@@ -579,15 +653,18 @@ size: string = "default"
         .wrn-next--radio-field[data-card="true"] .wrn-next--radio,
         .wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox {
           min-height: 4.5rem;
-          padding: 0.85rem;
+          padding: 0.9rem 1rem;
           border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-sm);
+          border-radius: var(--wrn-radius);
           background: var(--wrn-color-surface);
+          box-shadow: var(--wrn-shadow-1);
+          transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
         }
         .wrn-next--radio-field[data-card="true"] .wrn-next--radio:has(input:checked),
         .wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox:has(input:checked) {
           border-color: var(--wrn-field-color);
-          box-shadow: 0 0 0 1px var(--wrn-field-color);
+          background: color-mix(in srgb, var(--wrn-field-color) 5%, var(--wrn-color-surface));
+          box-shadow: 0 0 0 1px var(--wrn-field-color), var(--wrn-shadow-1);
         }
         .wrn-next--radio-field[data-list="true"] .wrn-next--radio,
         .wrn-next--checkbox-field[data-list="true"] .wrn-next--checkbox {
@@ -608,19 +685,21 @@ size: string = "default"
         }
         .wrn-next__choice[data-variant="outlined"],
         .wrn-next__choice[data-variant="floating"] {
-          padding: 0.65rem 0.8rem;
+          padding: 0.7rem 0.85rem;
           border: 1px solid var(--wrn-color-border);
           border-radius: var(--wrn-radius-sm);
+          background: var(--wrn-color-surface);
         }
         .wrn-next__choice[data-variant="pill"] {
-          padding: 0.65rem 1rem;
+          padding: 0.6rem 1rem;
+          border: 1px solid color-mix(in srgb, var(--wrn-field-color) 22%, var(--wrn-color-border));
           border-radius: 999px;
-          background: color-mix(in srgb, var(--wrn-field-color) 9%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface));
         }
         .wrn-next__choice[data-variant="ghost"] {
-          padding: 0.65rem 0.8rem;
+          padding: 0.65rem 0.85rem;
           border-radius: var(--wrn-radius-sm);
-          background: color-mix(in srgb, var(--wrn-field-color) 7%, transparent);
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, transparent);
         }
         .wrn-next__choice[data-variant="underline"] {
           padding-block: 0.5rem;
@@ -654,25 +733,35 @@ size: string = "default"
           align-items: center;
           justify-content: space-between;
           gap: 0.75rem;
-          padding: 0.7rem 0.85rem;
-          border: 1px solid var(--wrn-color-border);
+          padding: 0.55rem 0.85rem;
+          border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
           border-radius: var(--wrn-radius-sm);
-          background: var(--wrn-color-surface);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
           color: var(--wrn-color-text);
           font: inherit;
+          font-size: 0.875rem;
+          font-variant-numeric: tabular-nums;
           text-align: left;
+          cursor: pointer;
+          transition: border-color 120ms ease, box-shadow 120ms ease;
         }
         .wrn-next__calendar,
         .wrn-next__time-panel {
-          z-index: 20;
+          position: absolute;
+          z-index: 40;
+          top: 100%;
+          left: 0;
           display: grid;
-          width: min(100%, 22rem);
+          width: min(calc(100vw - 2rem), 19.5rem);
           gap: 0.75rem;
-          padding: 0.85rem;
+          margin-top: 0.375rem;
+          padding: 0.75rem;
           border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-md);
-          background: var(--wrn-color-surface);
-          box-shadow: var(--wrn-shadow-3);
+          border-radius: var(--wrn-radius);
+          background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
+          box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
+          animation: wrn-popover-enter var(--wrn-motion-base, 160ms) var(--wrn-ease-emphasized, ease) both;
         }
         .wrn-next--date-picker[data-expanded="false"] .wrn-next__calendar,
         .wrn-next--time-picker[data-expanded="false"] .wrn-next__time-panel {
@@ -682,29 +771,42 @@ size: string = "default"
         .wrn-next__time-panel button {
           min-height: 2.25rem;
           border: 0;
-          border-radius: var(--wrn-radius-sm);
+          border-radius: calc(var(--wrn-radius-sm) - 2px);
           background: transparent;
           color: inherit;
+          font: inherit;
+          font-size: 0.8125rem;
+          font-variant-numeric: tabular-nums;
+          cursor: pointer;
+          transition: background-color 120ms ease, color 120ms ease;
         }
         .wrn-next__calendar-weekdays,
         .wrn-next__calendar-grid {
           display: grid;
           grid-template-columns: repeat(7, 1fr);
-          gap: 0.2rem;
+          gap: 0.125rem;
           text-align: center;
         }
         .wrn-next__calendar-weekdays {
-          color: var(--wrn-color-muted);
-          font-size: 0.75rem;
+          padding-bottom: 0.375rem;
+          border-bottom: 1px solid var(--wrn-color-border);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+          font-family: var(--wrn-font-mono, monospace);
+          font-size: 0.625rem;
+          font-weight: 600;
+          letter-spacing: 0.06em;
+          text-transform: uppercase;
         }
         .wrn-next__calendar-grid button:hover,
         .wrn-next__time-panel button:hover {
-          background: var(--wrn-color-surface-2);
+          background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
         }
         .wrn-next__calendar-grid button[aria-pressed="true"],
         .wrn-next__time-panel button[aria-pressed="true"] {
           background: var(--wrn-field-color);
           color: var(--wrn-color-primary-contrast, #fff);
+          box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--wrn-field-color) 35%, transparent);
+          font-weight: 650;
         }
         .wrn-next__time-period {
           display: flex;
@@ -738,7 +840,7 @@ size: string = "default"
         .wrn-next--field[data-variant="ghost"]
           :is(.wrn-next__input-group-control, .wrn-next__file-control, .wrn-next__color-control) {
           border-color: transparent;
-          background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
         }
         @media (max-width: 640px) {
           .wrn-next--field[data-inline="true"],
diff --git a/packages/ui/components/input.wrn b/packages/ui/components/input.wrn
index c5e673b4..e68807a2 100644
--- a/packages/ui/components/input.wrn
+++ b/packages/ui/components/input.wrn
@@ -233,7 +233,7 @@ component Input {
 
     .wrn-component p {
       margin: 0;
-      color: var(--wrn-color-muted);
+      color: var(--wrn-color-text-muted, var(--wrn-color-muted));
       line-height: 1.6;
     }
 
@@ -248,8 +248,9 @@ component Input {
       display: block;
       min-height: 1em;
       margin-top: 0.25rem;
-      color: var(--wrn-color-danger);
-      font-size: 0.8rem;
+      color: var(--wrn-color-danger-text, var(--wrn-color-danger));
+      font-size: 0.78rem;
+      font-weight: 550;
     }
 
     .wrn-next--choice {
@@ -276,13 +277,14 @@ component Input {
       width: 100%;
       min-height: var(--wrn-control-height, 2.5rem);
       padding: 0.5rem 0.75rem;
-      border: 1px solid var(--wrn-color-border);
-      border-radius: var(--wrn-radius-sm, 6px);
+      border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
+      border-radius: var(--wrn-radius-sm, 8px);
       outline: 0;
       color: var(--wrn-color-text);
-      background: var(--wrn-color-bg);
+      background: var(--wrn-color-input-background, var(--wrn-color-surface));
       font: inherit;
       font-weight: 500;
+      transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
     }
     .wrn-auth-form form > .wrn-next--field,
     .wrn-auth-form form > .wrn-field {
@@ -299,10 +301,8 @@ component Input {
       border-color: var(--wrn-color-input-border-hover, var(--wrn-color-border-strong));
     }
     .wrn-next--field :where(input, textarea, select):focus-visible {
-      border-color: var(--wrn-color-primary);
-      box-shadow:
-        inset 0 1px 2px rgb(0 0 0 / 0.04),
-        0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 18%, transparent);
+      border-color: var(--wrn-field-color, var(--wrn-color-primary));
+      box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04), 0 0 0 3px color-mix(in srgb, var(--wrn-field-color, var(--wrn-color-primary)) 18%, transparent);
     }
     .wrn-next--field textarea {
       resize: vertical;
@@ -342,25 +342,26 @@ component Input {
       font-size: 0.8125rem;
       font-weight: 600;
       line-height: 1.35;
+      letter-spacing: -0.005em;
     }
     .wrn-next__field-hint,
     .wrn-next__field-help {
-      color: var(--wrn-color-muted);
+      color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
       font-size: 0.75rem;
-      font-weight: 500;
+      font-weight: 450;
+      line-height: 1.45;
     }
     .wrn-next__field-control {
       position: relative;
       min-width: 0;
     }
     .wrn-next__field-control > :is(input, textarea, select) {
-      /* Recessed well: the inverse of the raised keycap button. */
       padding-inline: 0.85rem;
       border-color: var(--wrn-color-input-border, var(--wrn-color-border));
       border-radius: var(--wrn-radius-sm);
       background: var(--wrn-color-input-background, var(--wrn-color-surface));
       box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
-      font-size: 0.8125rem;
+      font-size: 0.875rem;
     }
     .wrn-next__field-control > :is(input, textarea)::placeholder {
       color: var(--wrn-color-input-placeholder, var(--wrn-color-muted));
@@ -423,7 +424,8 @@ component Input {
     }
     .wrn-next--field[data-variant="ghost"] .wrn-next__field-control > :is(input, textarea, select) {
       border-color: transparent;
-      background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
+      background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
+      box-shadow: none;
     }
     .wrn-next__field-floating-label {
       position: absolute;
@@ -464,9 +466,9 @@ component Input {
     }
     .wrn-next__field-error {
       min-height: 1em;
-      color: var(--wrn-color-danger);
-      font-size: 0.82em;
-      font-weight: 600;
+      color: var(--wrn-color-danger-text, var(--wrn-color-danger));
+      font-size: 0.78rem;
+      font-weight: 550;
     }
     .wrn-next__field-error:empty {
       display: none;
@@ -478,14 +480,16 @@ component Input {
     .wrn-next--field[data-invalid="true"] :is(input, textarea, select),
     .wrn-next--choice-field[data-invalid="true"] input {
       border-color: var(--wrn-color-danger);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-danger) 12%, transparent);
     }
     .wrn-next--field :is(input, textarea, select):disabled,
     .wrn-next--choice-field input:disabled {
       cursor: not-allowed;
-      opacity: 0.58;
+      opacity: 0.55;
+      background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
     }
     .wrn-next--field :is(input, textarea, select):read-only {
-      background: var(--wrn-color-surface-2);
+      background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
     }
     .wrn-next--field[data-inline="true"],
     .wrn-next--choice-field[data-inline="true"] {
@@ -542,11 +546,13 @@ component Input {
       display: flex;
       min-width: 0;
       align-items: center;
-      gap: 0.65rem;
+      gap: 0.625rem;
       color: var(--wrn-color-text);
       width: 100%;
-      font-size: 0.75rem;
+      font-size: 0.875rem;
       font-weight: 500;
+      line-height: 1.4;
+      cursor: pointer;
     }
     .wrn-next__checkbox-content > .wrn-next__choice {
       width: 100%;
@@ -561,12 +567,13 @@ component Input {
     .wrn-next__choice-copy {
       display: grid;
       min-width: 0;
-      gap: 0.15rem;
-      line-height: 1.35;
+      gap: 0.125rem;
+      line-height: 1.4;
     }
     .wrn-next__choice-copy small {
-      color: var(--wrn-color-muted);
-      font-weight: 500;
+      color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+      font-size: 0.78rem;
+      font-weight: 450;
     }
     .wrn-next__radio-group,
     .wrn-next__checkbox-group {
@@ -586,15 +593,18 @@ component Input {
     .wrn-next--radio-field[data-card="true"] .wrn-next--radio,
     .wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox {
       min-height: 4.5rem;
-      padding: 0.85rem;
+      padding: 0.9rem 1rem;
       border: 1px solid var(--wrn-color-border);
-      border-radius: var(--wrn-radius-sm);
+      border-radius: var(--wrn-radius);
       background: var(--wrn-color-surface);
+      box-shadow: var(--wrn-shadow-1);
+      transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
     }
     .wrn-next--radio-field[data-card="true"] .wrn-next--radio:has(input:checked),
     .wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox:has(input:checked) {
       border-color: var(--wrn-field-color);
-      box-shadow: 0 0 0 1px var(--wrn-field-color);
+      background: color-mix(in srgb, var(--wrn-field-color) 5%, var(--wrn-color-surface));
+      box-shadow: 0 0 0 1px var(--wrn-field-color), var(--wrn-shadow-1);
     }
     .wrn-next--radio-field[data-list="true"] .wrn-next--radio,
     .wrn-next--checkbox-field[data-list="true"] .wrn-next--checkbox {
@@ -615,19 +625,21 @@ component Input {
     }
     .wrn-next__choice[data-variant="outlined"],
     .wrn-next__choice[data-variant="floating"] {
-      padding: 0.65rem 0.8rem;
+      padding: 0.7rem 0.85rem;
       border: 1px solid var(--wrn-color-border);
       border-radius: var(--wrn-radius-sm);
+      background: var(--wrn-color-surface);
     }
     .wrn-next__choice[data-variant="pill"] {
-      padding: 0.65rem 1rem;
+      padding: 0.6rem 1rem;
+      border: 1px solid color-mix(in srgb, var(--wrn-field-color) 22%, var(--wrn-color-border));
       border-radius: 999px;
-      background: color-mix(in srgb, var(--wrn-field-color) 9%, var(--wrn-color-surface));
+      background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface));
     }
     .wrn-next__choice[data-variant="ghost"] {
-      padding: 0.65rem 0.8rem;
+      padding: 0.65rem 0.85rem;
       border-radius: var(--wrn-radius-sm);
-      background: color-mix(in srgb, var(--wrn-field-color) 7%, transparent);
+      background: color-mix(in srgb, var(--wrn-field-color) 6%, transparent);
     }
     .wrn-next__choice[data-variant="underline"] {
       padding-block: 0.5rem;
@@ -661,25 +673,35 @@ component Input {
       align-items: center;
       justify-content: space-between;
       gap: 0.75rem;
-      padding: 0.7rem 0.85rem;
-      border: 1px solid var(--wrn-color-border);
+      padding: 0.55rem 0.85rem;
+      border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
       border-radius: var(--wrn-radius-sm);
-      background: var(--wrn-color-surface);
+      background: var(--wrn-color-input-background, var(--wrn-color-surface));
+      box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
       color: var(--wrn-color-text);
       font: inherit;
+      font-size: 0.875rem;
+      font-variant-numeric: tabular-nums;
       text-align: left;
+      cursor: pointer;
+      transition: border-color 120ms ease, box-shadow 120ms ease;
     }
     .wrn-next__calendar,
     .wrn-next__time-panel {
-      z-index: 20;
+      position: absolute;
+      z-index: 40;
+      top: 100%;
+      left: 0;
       display: grid;
-      width: min(100%, 22rem);
+      width: min(calc(100vw - 2rem), 19.5rem);
       gap: 0.75rem;
-      padding: 0.85rem;
+      margin-top: 0.375rem;
+      padding: 0.75rem;
       border: 1px solid var(--wrn-color-border);
-      border-radius: var(--wrn-radius-md);
-      background: var(--wrn-color-surface);
-      box-shadow: var(--wrn-shadow-3);
+      border-radius: var(--wrn-radius);
+      background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
+      box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
+      animation: wrn-popover-enter var(--wrn-motion-base, 160ms) var(--wrn-ease-emphasized, ease) both;
     }
     .wrn-next--date-picker[data-expanded="false"] .wrn-next__calendar,
     .wrn-next--time-picker[data-expanded="false"] .wrn-next__time-panel {
@@ -689,29 +711,42 @@ component Input {
     .wrn-next__time-panel button {
       min-height: 2.25rem;
       border: 0;
-      border-radius: var(--wrn-radius-sm);
+      border-radius: calc(var(--wrn-radius-sm) - 2px);
       background: transparent;
       color: inherit;
+      font: inherit;
+      font-size: 0.8125rem;
+      font-variant-numeric: tabular-nums;
+      cursor: pointer;
+      transition: background-color 120ms ease, color 120ms ease;
     }
     .wrn-next__calendar-weekdays,
     .wrn-next__calendar-grid {
       display: grid;
       grid-template-columns: repeat(7, 1fr);
-      gap: 0.2rem;
+      gap: 0.125rem;
       text-align: center;
     }
     .wrn-next__calendar-weekdays {
-      color: var(--wrn-color-muted);
-      font-size: 0.75rem;
+      padding-bottom: 0.375rem;
+      border-bottom: 1px solid var(--wrn-color-border);
+      color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+      font-family: var(--wrn-font-mono, monospace);
+      font-size: 0.625rem;
+      font-weight: 600;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
     }
     .wrn-next__calendar-grid button:hover,
     .wrn-next__time-panel button:hover {
-      background: var(--wrn-color-surface-2);
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
     }
     .wrn-next__calendar-grid button[aria-pressed="true"],
     .wrn-next__time-panel button[aria-pressed="true"] {
       background: var(--wrn-field-color);
       color: var(--wrn-color-primary-contrast, #fff);
+      box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--wrn-field-color) 35%, transparent);
+      font-weight: 650;
     }
     .wrn-next__time-period {
       display: flex;
@@ -745,7 +780,7 @@ component Input {
     .wrn-next--field[data-variant="ghost"]
     :is(.wrn-next__input-group-control, .wrn-next__file-control, .wrn-next__color-control) {
       border-color: transparent;
-      background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
+      background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
     }
     @media (max-width: 640px) {
       .wrn-next--field[data-inline="true"],
diff --git a/packages/ui/components/progress.wrn b/packages/ui/components/progress.wrn
index 3cf2db77..df948141 100644
--- a/packages/ui/components/progress.wrn
+++ b/packages/ui/components/progress.wrn
@@ -36,22 +36,51 @@ component Progress {
 
     .wrn-progress-component__row {
       display: flex;
+      align-items: baseline;
       justify-content: space-between;
       gap: 1rem;
+      font-weight: 550;
     }
 
+    .wrn-progress-component__row > strong {
+      color: var(--wrn-color-text-muted, var(--wrn-color-muted));
+      font-family: var(--wrn-font-mono, monospace);
+      font-size: 0.8em;
+      font-weight: 600;
+      font-variant-numeric: tabular-nums;
+    }
+
+    /* Recessed track, raised fill: the same keycap-on-well pairing as the
+       button and field. */
     .wrn-progress-component__track {
+      appearance: none;
       width: 100%;
-      height: 0.6rem;
+      height: 0.5rem;
       overflow: hidden;
       border: 0;
       border-radius: 999px;
-      background: var(--wrn-color-surface-2);
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
+      box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.1);
       accent-color: var(--wrn-progress-color);
     }
+    .wrn-progress-component[data-size="xs"] .wrn-progress-component__track,
+    .wrn-progress-component[data-size="sm"] .wrn-progress-component__track { height: 0.3125rem; }
+    .wrn-progress-component[data-size="lg"] .wrn-progress-component__track,
+    .wrn-progress-component[data-size="xl"] .wrn-progress-component__track { height: 0.75rem; }
 
-    .wrn-progress-component__track::-webkit-progress-bar { background: var(--wrn-color-surface-2); }
-    .wrn-progress-component__track::-webkit-progress-value { background: var(--wrn-progress-color); }
-    .wrn-progress-component__track::-moz-progress-bar { background: var(--wrn-progress-color); }
+    .wrn-progress-component__track::-webkit-progress-bar {
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
+      border-radius: 999px;
+    }
+    .wrn-progress-component__track::-webkit-progress-value {
+      border-radius: 999px;
+      background: linear-gradient(180deg, color-mix(in srgb, var(--wrn-progress-color) 88%, white), var(--wrn-progress-color));
+      box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25);
+      transition: width var(--wrn-motion-slow) var(--wrn-ease-emphasized);
+    }
+    .wrn-progress-component__track::-moz-progress-bar {
+      border-radius: 999px;
+      background: linear-gradient(180deg, color-mix(in srgb, var(--wrn-progress-color) 88%, white), var(--wrn-progress-color));
+    }
   }
 }
diff --git a/packages/ui/components/radio.wrn b/packages/ui/components/radio.wrn
index b85fdec3..09844d43 100644
--- a/packages/ui/components/radio.wrn
+++ b/packages/ui/components/radio.wrn
@@ -44,14 +44,14 @@ size: string = "default"
       {#if options.length}
         <div class="wrn-next__radio-group" role="radiogroup" aria-label="{hiddenLabel ? label : ''}" aria-invalid="{error ? 'true' : 'false'}">
           {#each options as option}
-            <label class="wrn-next__choice wrn-next--radio" for="{id || name}-{option.value}" data-variant="{variant}" data-disabled="{disabled || option.disabled}">
+            <label class="wrn-next__choice wrn-next--radio" data-variant="{variant}" data-disabled="{disabled || option.disabled}">
               <input id="{id || name}-{option.value}" type="radio" name="{name}" value="{option.value}" checked="{option.value === value || option.checked}" disabled="{disabled || option.disabled}" required="{required}" readonly="{readonly}" @click="preventReadonly(event)" @input="emitField('input', event)" @change="emitField('change', event)" @focus="emitField('focus', event)" @blur="emitField('blur', event)" @invalid="emitField('invalid', event)" />
               <span class="wrn-next__choice-copy"><strong>{option.label}</strong>{#if option.description}<small>{option.description}</small>{/if}</span>
             </label>
           {/each}
         </div>
       {:else}
-        <label class="wrn-next__choice wrn-next--radio" for="{id || name}" data-variant="{variant}" data-icon-position="{iconPosition}"><input id="{id || name}" type="radio" name="{name}" value="{value}" checked="{checked}" disabled="{disabled}" required="{required}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" @click="preventReadonly(event)" @input="emitField('input', event)" @change="emitField('change', event)" @focus="emitField('focus', event)" @blur="emitField('blur', event)" @invalid="emitField('invalid', event)" />{#if icon}<span class="{icon}" aria-hidden="true"></span>{/if}<span class="{hiddenLabel || cornerHint ? 'wrn-next__sr-only' : ''}">{label}</span></label>
+        <label class="wrn-next__choice wrn-next--radio" data-variant="{variant}" data-icon-position="{iconPosition}"><input id="{id || name}" type="radio" name="{name}" value="{value}" checked="{checked}" disabled="{disabled}" required="{required}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" @click="preventReadonly(event)" @input="emitField('input', event)" @change="emitField('change', event)" @focus="emitField('focus', event)" @blur="emitField('blur', event)" @invalid="emitField('invalid', event)" />{#if icon}<span class="{icon}" aria-hidden="true"></span>{/if}<span class="{hiddenLabel || cornerHint ? 'wrn-next__sr-only' : ''}">{label}</span></label>
       {/if}
       {#if helperText}<small class="wrn-next__field-help">{helperText}</small>{/if}<small class="wrn-next__field-error" data-error="{name}">{error}</small>
     </div>
@@ -61,6 +61,57 @@ size: string = "default"
     .wrn-next--radio-field { width: 100%; min-width: 0; }
     .wrn-next--radio-field[data-invalid="true"] { --wrn-component-color: var(--wrn-color-danger); }
 
+    /* Drawn radio: recessed well; selected is an accent ring round a raised dot. */
+    .wrn-next--radio input[type="radio"] {
+      appearance: none;
+      display: inline-grid;
+      place-content: center;
+      flex: 0 0 auto;
+      width: 1.125rem;
+      height: 1.125rem;
+      margin: 0.0625rem 0 0;
+      border: 1.5px solid var(--wrn-color-border-strong, var(--wrn-color-border));
+      border-radius: 999px;
+      background: var(--wrn-color-input-background, var(--wrn-color-surface));
+      box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.05);
+      cursor: pointer;
+      transition:
+        background-color var(--wrn-motion-fast) var(--wrn-ease-standard),
+        border-color var(--wrn-motion-fast) var(--wrn-ease-standard);
+    }
+    .wrn-next--radio input[type="radio"]::after {
+      width: 0.4375rem;
+      height: 0.4375rem;
+      border-radius: 999px;
+      background: var(--wrn-color-primary-contrast, #fff);
+      box-shadow: 0 1px 1px rgb(0 0 0 / 0.2);
+      content: "";
+      transform: scale(0);
+      transition: transform var(--wrn-motion-fast) var(--wrn-ease-emphasized);
+    }
+    .wrn-next--radio input[type="radio"]:hover:not(:disabled) {
+      border-color: color-mix(in srgb, var(--wrn-field-color) 60%, var(--wrn-color-border-strong, var(--wrn-color-border)));
+    }
+    .wrn-next--radio input[type="radio"]:checked {
+      border-color: color-mix(in srgb, var(--wrn-field-color) 80%, black);
+      background: var(--wrn-field-color);
+      box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--wrn-field-color) 30%, transparent);
+    }
+    .wrn-next--radio input[type="radio"]:checked::after {
+      transform: scale(1);
+    }
+    .wrn-next--radio input[type="radio"]:focus-visible {
+      outline: 2px solid var(--wrn-field-color);
+      outline-offset: 2px;
+    }
+    .wrn-next--radio-field[data-invalid="true"] input[type="radio"] {
+      border-color: var(--wrn-color-danger);
+    }
+    .wrn-next--radio:has(input:disabled) {
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+
     /* Shared component foundation. */
 
         .wrn-component {
@@ -126,7 +177,7 @@ size: string = "default"
 
         .wrn-component p {
           margin: 0;
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-muted, var(--wrn-color-muted));
           line-height: 1.6;
         }
 
@@ -141,8 +192,9 @@ size: string = "default"
           display: block;
           min-height: 1em;
           margin-top: 0.25rem;
-          color: var(--wrn-color-danger);
-          font-size: 0.8rem;
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
+          font-size: 0.78rem;
+          font-weight: 550;
         }
 
         .wrn-next--choice {
@@ -169,13 +221,14 @@ size: string = "default"
           width: 100%;
           min-height: var(--wrn-control-height, 2.5rem);
           padding: 0.5rem 0.75rem;
-          border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-sm, 6px);
+          border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
+          border-radius: var(--wrn-radius-sm, 8px);
           outline: 0;
           color: var(--wrn-color-text);
-          background: var(--wrn-color-bg);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
           font: inherit;
           font-weight: 500;
+          transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
         }
         .wrn-auth-form form > .wrn-next--field,
         .wrn-auth-form form > .wrn-field {
@@ -189,8 +242,8 @@ size: string = "default"
       box-shadow: none;
         }
         .wrn-next--field :where(input, textarea, select):focus-visible {
-          border-color: var(--wrn-color-primary);
-          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
+          border-color: var(--wrn-field-color, var(--wrn-color-primary));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04), 0 0 0 3px color-mix(in srgb, var(--wrn-field-color, var(--wrn-color-primary)) 18%, transparent);
         }
         .wrn-next--field textarea {
           resize: vertical;
@@ -224,12 +277,14 @@ size: string = "default"
           font-size: 0.8125rem;
           font-weight: 600;
           line-height: 1.35;
+          letter-spacing: -0.005em;
         }
         .wrn-next__field-hint,
         .wrn-next__field-help {
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
           font-size: 0.75rem;
-          font-weight: 500;
+          font-weight: 450;
+          line-height: 1.45;
         }
         .wrn-next__field-control {
           position: relative;
@@ -237,10 +292,11 @@ size: string = "default"
         }
         .wrn-next__field-control > :is(input, textarea, select) {
           padding-inline: 0.85rem;
-          border-color: var(--wrn-color-border);
+          border-color: var(--wrn-color-input-border, var(--wrn-color-border));
           border-radius: var(--wrn-radius-sm);
-          background: var(--wrn-color-surface);
-          font-size: 0.8125rem;
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
+          font-size: 0.875rem;
         }
         .wrn-next__field-control[data-has-icon="true"][data-icon-position="start"] > :is(input, textarea, select) {
           padding-inline-start: 2.5rem;
@@ -281,7 +337,8 @@ size: string = "default"
         }
         .wrn-next--field[data-variant="ghost"] .wrn-next__field-control > :is(input, textarea, select) {
           border-color: transparent;
-          background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
+          box-shadow: none;
         }
         .wrn-next__field-floating-label {
           position: absolute;
@@ -322,9 +379,9 @@ size: string = "default"
         }
         .wrn-next__field-error {
           min-height: 1em;
-          color: var(--wrn-color-danger);
-          font-size: 0.82em;
-          font-weight: 600;
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
+          font-size: 0.78rem;
+          font-weight: 550;
         }
         .wrn-next__field-error:empty {
           display: none;
@@ -332,14 +389,16 @@ size: string = "default"
         .wrn-next--field[data-invalid="true"] :is(input, textarea, select),
         .wrn-next--choice-field[data-invalid="true"] input {
           border-color: var(--wrn-color-danger);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-danger) 12%, transparent);
         }
         .wrn-next--field :is(input, textarea, select):disabled,
         .wrn-next--choice-field input:disabled {
           cursor: not-allowed;
-          opacity: 0.58;
+          opacity: 0.55;
+          background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
         }
         .wrn-next--field :is(input, textarea, select):read-only {
-          background: var(--wrn-color-surface-2);
+          background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
         }
         .wrn-next--field[data-inline="true"],
         .wrn-next--choice-field[data-inline="true"] {
@@ -396,11 +455,13 @@ size: string = "default"
           display: flex;
           min-width: 0;
           align-items: center;
-          gap: 0.65rem;
+          gap: 0.625rem;
           color: var(--wrn-color-text);
           width: 100%;
-          font-size: 0.75rem;
+          font-size: 0.875rem;
           font-weight: 500;
+          line-height: 1.4;
+          cursor: pointer;
         }
         .wrn-next__checkbox-content > .wrn-next__choice {
           width: 100%;
@@ -415,12 +476,13 @@ size: string = "default"
         .wrn-next__choice-copy {
           display: grid;
           min-width: 0;
-          gap: 0.15rem;
-          line-height: 1.35;
+          gap: 0.125rem;
+          line-height: 1.4;
         }
         .wrn-next__choice-copy small {
-          color: var(--wrn-color-muted);
-          font-weight: 500;
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+          font-size: 0.78rem;
+          font-weight: 450;
         }
         .wrn-next__radio-group,
         .wrn-next__checkbox-group {
@@ -440,15 +502,18 @@ size: string = "default"
         .wrn-next--radio-field[data-card="true"] .wrn-next--radio,
         .wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox {
           min-height: 4.5rem;
-          padding: 0.85rem;
+          padding: 0.9rem 1rem;
           border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-sm);
+          border-radius: var(--wrn-radius);
           background: var(--wrn-color-surface);
+          box-shadow: var(--wrn-shadow-1);
+          transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
         }
         .wrn-next--radio-field[data-card="true"] .wrn-next--radio:has(input:checked),
         .wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox:has(input:checked) {
           border-color: var(--wrn-field-color);
-          box-shadow: 0 0 0 1px var(--wrn-field-color);
+          background: color-mix(in srgb, var(--wrn-field-color) 5%, var(--wrn-color-surface));
+          box-shadow: 0 0 0 1px var(--wrn-field-color), var(--wrn-shadow-1);
         }
         .wrn-next--radio-field[data-list="true"] .wrn-next--radio,
         .wrn-next--checkbox-field[data-list="true"] .wrn-next--checkbox {
@@ -469,19 +534,21 @@ size: string = "default"
         }
         .wrn-next__choice[data-variant="outlined"],
         .wrn-next__choice[data-variant="floating"] {
-          padding: 0.65rem 0.8rem;
+          padding: 0.7rem 0.85rem;
           border: 1px solid var(--wrn-color-border);
           border-radius: var(--wrn-radius-sm);
+          background: var(--wrn-color-surface);
         }
         .wrn-next__choice[data-variant="pill"] {
-          padding: 0.65rem 1rem;
+          padding: 0.6rem 1rem;
+          border: 1px solid color-mix(in srgb, var(--wrn-field-color) 22%, var(--wrn-color-border));
           border-radius: 999px;
-          background: color-mix(in srgb, var(--wrn-field-color) 9%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface));
         }
         .wrn-next__choice[data-variant="ghost"] {
-          padding: 0.65rem 0.8rem;
+          padding: 0.65rem 0.85rem;
           border-radius: var(--wrn-radius-sm);
-          background: color-mix(in srgb, var(--wrn-field-color) 7%, transparent);
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, transparent);
         }
         .wrn-next__choice[data-variant="underline"] {
           padding-block: 0.5rem;
@@ -515,25 +582,35 @@ size: string = "default"
           align-items: center;
           justify-content: space-between;
           gap: 0.75rem;
-          padding: 0.7rem 0.85rem;
-          border: 1px solid var(--wrn-color-border);
+          padding: 0.55rem 0.85rem;
+          border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
           border-radius: var(--wrn-radius-sm);
-          background: var(--wrn-color-surface);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
           color: var(--wrn-color-text);
           font: inherit;
+          font-size: 0.875rem;
+          font-variant-numeric: tabular-nums;
           text-align: left;
+          cursor: pointer;
+          transition: border-color 120ms ease, box-shadow 120ms ease;
         }
         .wrn-next__calendar,
         .wrn-next__time-panel {
-          z-index: 20;
+          position: absolute;
+          z-index: 40;
+          top: 100%;
+          left: 0;
           display: grid;
-          width: min(100%, 22rem);
+          width: min(calc(100vw - 2rem), 19.5rem);
           gap: 0.75rem;
-          padding: 0.85rem;
+          margin-top: 0.375rem;
+          padding: 0.75rem;
           border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-md);
-          background: var(--wrn-color-surface);
-          box-shadow: var(--wrn-shadow-3);
+          border-radius: var(--wrn-radius);
+          background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
+          box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
+          animation: wrn-popover-enter var(--wrn-motion-base, 160ms) var(--wrn-ease-emphasized, ease) both;
         }
         .wrn-next--date-picker[data-expanded="false"] .wrn-next__calendar,
         .wrn-next--time-picker[data-expanded="false"] .wrn-next__time-panel {
@@ -543,29 +620,42 @@ size: string = "default"
         .wrn-next__time-panel button {
           min-height: 2.25rem;
           border: 0;
-          border-radius: var(--wrn-radius-sm);
+          border-radius: calc(var(--wrn-radius-sm) - 2px);
           background: transparent;
           color: inherit;
+          font: inherit;
+          font-size: 0.8125rem;
+          font-variant-numeric: tabular-nums;
+          cursor: pointer;
+          transition: background-color 120ms ease, color 120ms ease;
         }
         .wrn-next__calendar-weekdays,
         .wrn-next__calendar-grid {
           display: grid;
           grid-template-columns: repeat(7, 1fr);
-          gap: 0.2rem;
+          gap: 0.125rem;
           text-align: center;
         }
         .wrn-next__calendar-weekdays {
-          color: var(--wrn-color-muted);
-          font-size: 0.75rem;
+          padding-bottom: 0.375rem;
+          border-bottom: 1px solid var(--wrn-color-border);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+          font-family: var(--wrn-font-mono, monospace);
+          font-size: 0.625rem;
+          font-weight: 600;
+          letter-spacing: 0.06em;
+          text-transform: uppercase;
         }
         .wrn-next__calendar-grid button:hover,
         .wrn-next__time-panel button:hover {
-          background: var(--wrn-color-surface-2);
+          background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
         }
         .wrn-next__calendar-grid button[aria-pressed="true"],
         .wrn-next__time-panel button[aria-pressed="true"] {
           background: var(--wrn-field-color);
           color: var(--wrn-color-primary-contrast, #fff);
+          box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--wrn-field-color) 35%, transparent);
+          font-weight: 650;
         }
         .wrn-next__time-period {
           display: flex;
@@ -599,7 +689,7 @@ size: string = "default"
         .wrn-next--field[data-variant="ghost"]
           :is(.wrn-next__input-group-control, .wrn-next__file-control, .wrn-next__color-control) {
           border-color: transparent;
-          background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
         }
         @media (max-width: 640px) {
           .wrn-next--field[data-inline="true"],
diff --git a/packages/ui/components/select.wrn b/packages/ui/components/select.wrn
index e1ed426f..5940a1a0 100644
--- a/packages/ui/components/select.wrn
+++ b/packages/ui/components/select.wrn
@@ -74,7 +74,16 @@ size: string = "default"
       padding-inline-end: 2.5rem;
       line-height: 1.35;
       color: var(--wrn-color-text);
-      background-color: var(--wrn-color-surface);
+      background-color: var(--wrn-color-input-background, var(--wrn-color-surface));
+      cursor: pointer;
+    }
+    /* Chrome matches every <select> as :read-only, which painted the shared
+       read-only fill on all selects. Selects are never text-read-only. */
+    .wrn-next--select .wrn-next__field-control > select:read-only:not(:disabled) {
+      background-color: var(--wrn-color-input-background, var(--wrn-color-surface));
+    }
+    .wrn-next--select .wrn-next__field-control:hover > select:not(:disabled):not(:focus-visible) {
+      border-color: var(--wrn-color-input-border-hover, var(--wrn-color-border-strong));
     }
 
     .wrn-next__select-indicator {
@@ -153,7 +162,7 @@ size: string = "default"
 
         .wrn-component p {
           margin: 0;
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-muted, var(--wrn-color-muted));
           line-height: 1.6;
         }
 
@@ -168,8 +177,9 @@ size: string = "default"
           display: block;
           min-height: 1em;
           margin-top: 0.25rem;
-          color: var(--wrn-color-danger);
-          font-size: 0.8rem;
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
+          font-size: 0.78rem;
+          font-weight: 550;
         }
 
         .wrn-next--choice {
@@ -196,13 +206,14 @@ size: string = "default"
           width: 100%;
           min-height: var(--wrn-control-height, 2.5rem);
           padding: 0.5rem 0.75rem;
-          border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-sm, 6px);
+          border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
+          border-radius: var(--wrn-radius-sm, 8px);
           outline: 0;
           color: var(--wrn-color-text);
-          background: var(--wrn-color-bg);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
           font: inherit;
           font-weight: 500;
+          transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
         }
         .wrn-auth-form form > .wrn-next--field,
         .wrn-auth-form form > .wrn-field {
@@ -216,8 +227,8 @@ size: string = "default"
       box-shadow: none;
         }
         .wrn-next--field :where(input, textarea, select):focus-visible {
-          border-color: var(--wrn-color-primary);
-          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
+          border-color: var(--wrn-field-color, var(--wrn-color-primary));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04), 0 0 0 3px color-mix(in srgb, var(--wrn-field-color, var(--wrn-color-primary)) 18%, transparent);
         }
         .wrn-next--field textarea {
           resize: vertical;
@@ -251,12 +262,14 @@ size: string = "default"
           font-size: 0.8125rem;
           font-weight: 600;
           line-height: 1.35;
+          letter-spacing: -0.005em;
         }
         .wrn-next__field-hint,
         .wrn-next__field-help {
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
           font-size: 0.75rem;
-          font-weight: 500;
+          font-weight: 450;
+          line-height: 1.45;
         }
         .wrn-next__field-control {
           position: relative;
@@ -264,10 +277,11 @@ size: string = "default"
         }
         .wrn-next__field-control > :is(input, textarea, select) {
           padding-inline: 0.85rem;
-          border-color: var(--wrn-color-border);
+          border-color: var(--wrn-color-input-border, var(--wrn-color-border));
           border-radius: var(--wrn-radius-sm);
-          background: var(--wrn-color-surface);
-          font-size: 0.8125rem;
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
+          font-size: 0.875rem;
         }
         .wrn-next__field-control[data-has-icon="true"][data-icon-position="start"] > :is(input, textarea, select) {
           padding-inline-start: 2.5rem;
@@ -308,7 +322,8 @@ size: string = "default"
         }
         .wrn-next--field[data-variant="ghost"] .wrn-next__field-control > :is(input, textarea, select) {
           border-color: transparent;
-          background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
+          box-shadow: none;
         }
         .wrn-next__field-floating-label {
           position: absolute;
@@ -349,9 +364,9 @@ size: string = "default"
         }
         .wrn-next__field-error {
           min-height: 1em;
-          color: var(--wrn-color-danger);
-          font-size: 0.82em;
-          font-weight: 600;
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
+          font-size: 0.78rem;
+          font-weight: 550;
         }
         .wrn-next__field-error:empty {
           display: none;
@@ -359,14 +374,16 @@ size: string = "default"
         .wrn-next--field[data-invalid="true"] :is(input, textarea, select),
         .wrn-next--choice-field[data-invalid="true"] input {
           border-color: var(--wrn-color-danger);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-danger) 12%, transparent);
         }
         .wrn-next--field :is(input, textarea, select):disabled,
         .wrn-next--choice-field input:disabled {
           cursor: not-allowed;
-          opacity: 0.58;
+          opacity: 0.55;
+          background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
         }
         .wrn-next--field :is(input, textarea, select):read-only {
-          background: var(--wrn-color-surface-2);
+          background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
         }
         .wrn-next--field[data-inline="true"],
         .wrn-next--choice-field[data-inline="true"] {
@@ -423,11 +440,13 @@ size: string = "default"
           display: flex;
           min-width: 0;
           align-items: center;
-          gap: 0.65rem;
+          gap: 0.625rem;
           color: var(--wrn-color-text);
           width: 100%;
-          font-size: 0.75rem;
+          font-size: 0.875rem;
           font-weight: 500;
+          line-height: 1.4;
+          cursor: pointer;
         }
         .wrn-next__checkbox-content > .wrn-next__choice {
           width: 100%;
@@ -442,12 +461,13 @@ size: string = "default"
         .wrn-next__choice-copy {
           display: grid;
           min-width: 0;
-          gap: 0.15rem;
-          line-height: 1.35;
+          gap: 0.125rem;
+          line-height: 1.4;
         }
         .wrn-next__choice-copy small {
-          color: var(--wrn-color-muted);
-          font-weight: 500;
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+          font-size: 0.78rem;
+          font-weight: 450;
         }
         .wrn-next__radio-group,
         .wrn-next__checkbox-group {
@@ -467,15 +487,18 @@ size: string = "default"
         .wrn-next--radio-field[data-card="true"] .wrn-next--radio,
         .wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox {
           min-height: 4.5rem;
-          padding: 0.85rem;
+          padding: 0.9rem 1rem;
           border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-sm);
+          border-radius: var(--wrn-radius);
           background: var(--wrn-color-surface);
+          box-shadow: var(--wrn-shadow-1);
+          transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
         }
         .wrn-next--radio-field[data-card="true"] .wrn-next--radio:has(input:checked),
         .wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox:has(input:checked) {
           border-color: var(--wrn-field-color);
-          box-shadow: 0 0 0 1px var(--wrn-field-color);
+          background: color-mix(in srgb, var(--wrn-field-color) 5%, var(--wrn-color-surface));
+          box-shadow: 0 0 0 1px var(--wrn-field-color), var(--wrn-shadow-1);
         }
         .wrn-next--radio-field[data-list="true"] .wrn-next--radio,
         .wrn-next--checkbox-field[data-list="true"] .wrn-next--checkbox {
@@ -496,19 +519,21 @@ size: string = "default"
         }
         .wrn-next__choice[data-variant="outlined"],
         .wrn-next__choice[data-variant="floating"] {
-          padding: 0.65rem 0.8rem;
+          padding: 0.7rem 0.85rem;
           border: 1px solid var(--wrn-color-border);
           border-radius: var(--wrn-radius-sm);
+          background: var(--wrn-color-surface);
         }
         .wrn-next__choice[data-variant="pill"] {
-          padding: 0.65rem 1rem;
+          padding: 0.6rem 1rem;
+          border: 1px solid color-mix(in srgb, var(--wrn-field-color) 22%, var(--wrn-color-border));
           border-radius: 999px;
-          background: color-mix(in srgb, var(--wrn-field-color) 9%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface));
         }
         .wrn-next__choice[data-variant="ghost"] {
-          padding: 0.65rem 0.8rem;
+          padding: 0.65rem 0.85rem;
           border-radius: var(--wrn-radius-sm);
-          background: color-mix(in srgb, var(--wrn-field-color) 7%, transparent);
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, transparent);
         }
         .wrn-next__choice[data-variant="underline"] {
           padding-block: 0.5rem;
@@ -542,25 +567,35 @@ size: string = "default"
           align-items: center;
           justify-content: space-between;
           gap: 0.75rem;
-          padding: 0.7rem 0.85rem;
-          border: 1px solid var(--wrn-color-border);
+          padding: 0.55rem 0.85rem;
+          border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
           border-radius: var(--wrn-radius-sm);
-          background: var(--wrn-color-surface);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
           color: var(--wrn-color-text);
           font: inherit;
+          font-size: 0.875rem;
+          font-variant-numeric: tabular-nums;
           text-align: left;
+          cursor: pointer;
+          transition: border-color 120ms ease, box-shadow 120ms ease;
         }
         .wrn-next__calendar,
         .wrn-next__time-panel {
-          z-index: 20;
+          position: absolute;
+          z-index: 40;
+          top: 100%;
+          left: 0;
           display: grid;
-          width: min(100%, 22rem);
+          width: min(calc(100vw - 2rem), 19.5rem);
           gap: 0.75rem;
-          padding: 0.85rem;
+          margin-top: 0.375rem;
+          padding: 0.75rem;
           border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-md);
-          background: var(--wrn-color-surface);
-          box-shadow: var(--wrn-shadow-3);
+          border-radius: var(--wrn-radius);
+          background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
+          box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
+          animation: wrn-popover-enter var(--wrn-motion-base, 160ms) var(--wrn-ease-emphasized, ease) both;
         }
         .wrn-next--date-picker[data-expanded="false"] .wrn-next__calendar,
         .wrn-next--time-picker[data-expanded="false"] .wrn-next__time-panel {
@@ -570,29 +605,42 @@ size: string = "default"
         .wrn-next__time-panel button {
           min-height: 2.25rem;
           border: 0;
-          border-radius: var(--wrn-radius-sm);
+          border-radius: calc(var(--wrn-radius-sm) - 2px);
           background: transparent;
           color: inherit;
+          font: inherit;
+          font-size: 0.8125rem;
+          font-variant-numeric: tabular-nums;
+          cursor: pointer;
+          transition: background-color 120ms ease, color 120ms ease;
         }
         .wrn-next__calendar-weekdays,
         .wrn-next__calendar-grid {
           display: grid;
           grid-template-columns: repeat(7, 1fr);
-          gap: 0.2rem;
+          gap: 0.125rem;
           text-align: center;
         }
         .wrn-next__calendar-weekdays {
-          color: var(--wrn-color-muted);
-          font-size: 0.75rem;
+          padding-bottom: 0.375rem;
+          border-bottom: 1px solid var(--wrn-color-border);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+          font-family: var(--wrn-font-mono, monospace);
+          font-size: 0.625rem;
+          font-weight: 600;
+          letter-spacing: 0.06em;
+          text-transform: uppercase;
         }
         .wrn-next__calendar-grid button:hover,
         .wrn-next__time-panel button:hover {
-          background: var(--wrn-color-surface-2);
+          background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
         }
         .wrn-next__calendar-grid button[aria-pressed="true"],
         .wrn-next__time-panel button[aria-pressed="true"] {
           background: var(--wrn-field-color);
           color: var(--wrn-color-primary-contrast, #fff);
+          box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--wrn-field-color) 35%, transparent);
+          font-weight: 650;
         }
         .wrn-next__time-period {
           display: flex;
@@ -626,7 +674,7 @@ size: string = "default"
         .wrn-next--field[data-variant="ghost"]
           :is(.wrn-next__input-group-control, .wrn-next__file-control, .wrn-next__color-control) {
           border-color: transparent;
-          background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
         }
         @media (max-width: 640px) {
           .wrn-next--field[data-inline="true"],
diff --git a/packages/ui/components/skeleton.wrn b/packages/ui/components/skeleton.wrn
index b7d2b48b..20d3dfb9 100644
--- a/packages/ui/components/skeleton.wrn
+++ b/packages/ui/components/skeleton.wrn
@@ -7,42 +7,86 @@ component Skeleton {
     class: string = ""
   }
   view {
-    <div class="wrn-skeleton-component {class}" data-color="{color}" data-size="{size}" role="status" aria-label="{label}">
-      {#each Array(lines).fill(0) as line}<span class="wrn-skeleton-component__line"></span>{/each}
+    <div class="wrn-skeleton-component {class}" data-color="{color}" data-size="{size}" role="status" aria-label="{label}" aria-busy="true">
+      <div class="wrn-skeleton-component__head" aria-hidden="true">
+        <span class="wrn-skeleton-component__avatar"></span>
+        <span class="wrn-skeleton-component__heading">
+          <span class="wrn-skeleton-component__bar wrn-skeleton-component__bar--title"></span>
+          <span class="wrn-skeleton-component__bar wrn-skeleton-component__bar--meta"></span>
+        </span>
+      </div>
+      <div class="wrn-skeleton-component__body" aria-hidden="true">
+        {#each Array(lines).fill(0) as line}<span class="wrn-skeleton-component__line wrn-skeleton-component__bar"></span>{/each}
+      </div>
     </div>
   }
 
   style {
     .wrn-skeleton-component {
-      --wrn-skeleton-highlight: var(--wrn-color-border);
+      --wrn-skeleton-base: color-mix(in srgb, var(--wrn-color-text) 11%, var(--wrn-color-surface));
+      --wrn-skeleton-shine: color-mix(in srgb, var(--wrn-color-text) 3%, var(--wrn-color-surface));
+      --wrn-skeleton-line: 0.625rem;
       display: grid;
       width: min(100%, 24rem);
-      gap: 0.55rem;
+      gap: 1rem;
     }
-
-    .wrn-skeleton-component[data-size="xs"] { gap: 0.35rem; }
+    .wrn-skeleton-component[data-color="primary"] {
+      --wrn-skeleton-base: color-mix(in srgb, var(--wrn-color-primary) 17%, var(--wrn-color-surface));
+      --wrn-skeleton-shine: color-mix(in srgb, var(--wrn-color-primary) 4%, var(--wrn-color-surface));
+    }
+    .wrn-skeleton-component[data-color="secondary"] {
+      --wrn-skeleton-base: color-mix(in srgb, var(--wrn-color-secondary) 17%, var(--wrn-color-surface));
+      --wrn-skeleton-shine: color-mix(in srgb, var(--wrn-color-secondary) 4%, var(--wrn-color-surface));
+    }
+    .wrn-skeleton-component[data-size="xs"],
+    .wrn-skeleton-component[data-size="sm"] { --wrn-skeleton-line: 0.5rem; gap: 0.75rem; }
     .wrn-skeleton-component[data-size="lg"],
-    .wrn-skeleton-component[data-size="xl"] { gap: 0.75rem; }
-    .wrn-skeleton-component[data-color="secondary"] { --wrn-skeleton-highlight: var(--wrn-color-secondary-soft); }
-    .wrn-skeleton-component[data-color="primary"] { --wrn-skeleton-highlight: var(--wrn-color-primary-soft); }
+    .wrn-skeleton-component[data-size="xl"] { --wrn-skeleton-line: 0.75rem; gap: 1.25rem; }
 
-    .wrn-skeleton-component__line {
-      height: 0.8rem;
+    .wrn-skeleton-component__head {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+    }
+    .wrn-skeleton-component__avatar {
+      width: calc(var(--wrn-skeleton-line) * 4);
+      height: calc(var(--wrn-skeleton-line) * 4);
+      flex: none;
       border-radius: 999px;
-      background: linear-gradient(90deg, var(--wrn-color-surface-2), var(--wrn-skeleton-highlight), var(--wrn-color-surface-2));
-      background-size: 200% 100%;
-      animation: wrn-skeleton-component-shimmer 1.4s infinite;
+    }
+    .wrn-skeleton-component__heading,
+    .wrn-skeleton-component__body {
+      display: grid;
+      flex: 1;
+      min-width: 0;
+      gap: calc(var(--wrn-skeleton-line) * 0.8);
     }
 
-    .wrn-skeleton-component__line:last-child { width: 68%; }
+    /* Every block shares one shimmer; background-attachment: fixed keeps the
+       sweep continuous across blocks instead of restarting per bar. */
+    .wrn-skeleton-component__avatar,
+    .wrn-skeleton-component__bar {
+      display: block;
+      background:
+        linear-gradient(100deg, transparent 30%, var(--wrn-skeleton-shine) 50%, transparent 70%) 0 0 / 200% 100% fixed,
+        var(--wrn-skeleton-base);
+      animation: wrn-skeleton-component-shimmer 1.6s ease-in-out infinite;
+    }
+    .wrn-skeleton-component__bar {
+      height: var(--wrn-skeleton-line);
+      border-radius: 999px;
+    }
+    .wrn-skeleton-component__bar--title { width: 55%; height: calc(var(--wrn-skeleton-line) * 1.25); }
+    .wrn-skeleton-component__bar--meta { width: 32%; }
+    .wrn-skeleton-component__line:last-child:not(:first-child) { width: 64%; }
 
     @keyframes wrn-skeleton-component-shimmer {
-      from { background-position: 200% 0; }
-      to { background-position: -200% 0; }
+      from { background-position: 150% 0, 0 0; }
+      to { background-position: -50% 0, 0 0; }
     }
-
     @media (prefers-reduced-motion: reduce) {
-      .wrn-skeleton-component__line { animation: none; }
+      .wrn-skeleton-component__avatar,
+      .wrn-skeleton-component__bar { animation: none; }
     }
   }
 }
diff --git a/packages/ui/components/spinner.wrn b/packages/ui/components/spinner.wrn
index a1983a28..5de3f87c 100644
--- a/packages/ui/components/spinner.wrn
+++ b/packages/ui/components/spinner.wrn
@@ -34,10 +34,11 @@ component Spinner {
       display: block;
       width: var(--wrn-spinner-size);
       height: var(--wrn-spinner-size);
-      border: 2px solid var(--wrn-color-border);
+      border: 2px solid color-mix(in srgb, var(--wrn-spinner-color) 16%, transparent);
       border-top-color: var(--wrn-spinner-color);
+      border-right-color: var(--wrn-spinner-color);
       border-radius: 50%;
-      animation: wrn-spinner-component-spin 700ms linear infinite;
+      animation: wrn-spinner-component-spin 650ms cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
     }
 
     @keyframes wrn-spinner-component-spin { to { transform: rotate(360deg); } }
diff --git a/packages/ui/components/switch.wrn b/packages/ui/components/switch.wrn
index a758be03..eb581137 100644
--- a/packages/ui/components/switch.wrn
+++ b/packages/ui/components/switch.wrn
@@ -42,15 +42,31 @@ component Switch {
   }
 
   style {
+    /* Recessed track with a raised white thumb; the track fills with the
+       accent when on. */
     .wrn-next--switch input {
       appearance: none;
       position: relative;
-      width: 2.5rem;
-      height: 1.4rem;
-      border: 1px solid var(--wrn-color-border);
+      flex: 0 0 auto;
+      width: 2.375rem;
+      height: 1.375rem;
+      margin: 0;
+      border: 1px solid color-mix(in srgb, var(--wrn-color-border-strong, var(--wrn-color-border)) 70%, transparent);
       border-radius: 999px;
-      background: var(--wrn-color-surface-2);
-      transition: background var(--wrn-motion-fast) var(--wrn-ease-standard);
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
+      box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.1);
+      cursor: pointer;
+      transition:
+        background-color var(--wrn-motion-base) var(--wrn-ease-standard),
+        border-color var(--wrn-motion-base) var(--wrn-ease-standard);
+    }
+    .wrn-next--switch input:focus-visible {
+      outline: 2px solid var(--wrn-field-color);
+      outline-offset: 2px;
+    }
+    .wrn-next--switch input:disabled {
+      cursor: not-allowed;
+      opacity: 0.55;
     }
 
     .wrn-next--switch {
@@ -64,24 +80,28 @@ component Switch {
 
     .wrn-next--switch input::after {
       position: absolute;
-      top: 0.15rem;
-      left: 0.15rem;
-      width: 1rem;
-      height: 1rem;
+      top: 50%;
+      left: 0.125rem;
+      width: 1.0625rem;
+      height: 1.0625rem;
+      margin-top: -0.53125rem;
       border-radius: 999px;
-      background: var(--wrn-color-text);
+      background: #fff;
+      box-shadow:
+        0 1px 2px rgb(0 0 0 / 0.22),
+        0 0 0 0.5px rgb(0 0 0 / 0.06);
       content: "";
-      transition: transform var(--wrn-motion-fast) var(--wrn-ease-standard);
+      transition: transform var(--wrn-motion-base) var(--wrn-ease-emphasized);
     }
 
     .wrn-next--switch input:checked {
-      border-color: var(--wrn-field-color);
+      border-color: color-mix(in srgb, var(--wrn-field-color) 80%, black);
       background: var(--wrn-field-color);
+      box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.12);
     }
 
     .wrn-next--switch input:checked::after {
-      background: var(--wrn-color-primary-contrast, #fff);
-      transform: translateX(1.1rem);
+      transform: translateX(1rem);
     }
 
     /* Shared component foundation. */
@@ -149,7 +169,7 @@ component Switch {
 
         .wrn-component p {
           margin: 0;
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-muted, var(--wrn-color-muted));
           line-height: 1.6;
         }
 
@@ -164,8 +184,9 @@ component Switch {
           display: block;
           min-height: 1em;
           margin-top: 0.25rem;
-          color: var(--wrn-color-danger);
-          font-size: 0.8rem;
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
+          font-size: 0.78rem;
+          font-weight: 550;
         }
 
         .wrn-next--choice {
@@ -192,13 +213,14 @@ component Switch {
           width: 100%;
           min-height: var(--wrn-control-height, 2.5rem);
           padding: 0.5rem 0.75rem;
-          border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-sm, 6px);
+          border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
+          border-radius: var(--wrn-radius-sm, 8px);
           outline: 0;
           color: var(--wrn-color-text);
-          background: var(--wrn-color-bg);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
           font: inherit;
           font-weight: 500;
+          transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
         }
         .wrn-auth-form form > .wrn-next--field,
         .wrn-auth-form form > .wrn-field {
@@ -212,8 +234,8 @@ component Switch {
       box-shadow: none;
         }
         .wrn-next--field :where(input, textarea, select):focus-visible {
-          border-color: var(--wrn-color-primary);
-          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
+          border-color: var(--wrn-field-color, var(--wrn-color-primary));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04), 0 0 0 3px color-mix(in srgb, var(--wrn-field-color, var(--wrn-color-primary)) 18%, transparent);
         }
         .wrn-next--field textarea {
           resize: vertical;
@@ -247,12 +269,14 @@ component Switch {
           font-size: 0.8125rem;
           font-weight: 600;
           line-height: 1.35;
+          letter-spacing: -0.005em;
         }
         .wrn-next__field-hint,
         .wrn-next__field-help {
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
           font-size: 0.75rem;
-          font-weight: 500;
+          font-weight: 450;
+          line-height: 1.45;
         }
         .wrn-next__field-control {
           position: relative;
@@ -260,10 +284,11 @@ component Switch {
         }
         .wrn-next__field-control > :is(input, textarea, select) {
           padding-inline: 0.85rem;
-          border-color: var(--wrn-color-border);
+          border-color: var(--wrn-color-input-border, var(--wrn-color-border));
           border-radius: var(--wrn-radius-sm);
-          background: var(--wrn-color-surface);
-          font-size: 0.8125rem;
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
+          font-size: 0.875rem;
         }
         .wrn-next__field-control[data-has-icon="true"][data-icon-position="start"] > :is(input, textarea, select) {
           padding-inline-start: 2.5rem;
@@ -304,7 +329,8 @@ component Switch {
         }
         .wrn-next--field[data-variant="ghost"] .wrn-next__field-control > :is(input, textarea, select) {
           border-color: transparent;
-          background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
+          box-shadow: none;
         }
         .wrn-next__field-floating-label {
           position: absolute;
@@ -345,9 +371,9 @@ component Switch {
         }
         .wrn-next__field-error {
           min-height: 1em;
-          color: var(--wrn-color-danger);
-          font-size: 0.82em;
-          font-weight: 600;
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
+          font-size: 0.78rem;
+          font-weight: 550;
         }
         .wrn-next__field-error:empty {
           display: none;
@@ -355,14 +381,16 @@ component Switch {
         .wrn-next--field[data-invalid="true"] :is(input, textarea, select),
         .wrn-next--choice-field[data-invalid="true"] input {
           border-color: var(--wrn-color-danger);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-danger) 12%, transparent);
         }
         .wrn-next--field :is(input, textarea, select):disabled,
         .wrn-next--choice-field input:disabled {
           cursor: not-allowed;
-          opacity: 0.58;
+          opacity: 0.55;
+          background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
         }
         .wrn-next--field :is(input, textarea, select):read-only {
-          background: var(--wrn-color-surface-2);
+          background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
         }
         .wrn-next--field[data-inline="true"],
         .wrn-next--choice-field[data-inline="true"] {
@@ -419,11 +447,13 @@ component Switch {
           display: flex;
           min-width: 0;
           align-items: center;
-          gap: 0.65rem;
+          gap: 0.625rem;
           color: var(--wrn-color-text);
           width: 100%;
-          font-size: 0.75rem;
+          font-size: 0.875rem;
           font-weight: 500;
+          line-height: 1.4;
+          cursor: pointer;
         }
         .wrn-next__checkbox-content > .wrn-next__choice {
           width: 100%;
@@ -438,12 +468,13 @@ component Switch {
         .wrn-next__choice-copy {
           display: grid;
           min-width: 0;
-          gap: 0.15rem;
-          line-height: 1.35;
+          gap: 0.125rem;
+          line-height: 1.4;
         }
         .wrn-next__choice-copy small {
-          color: var(--wrn-color-muted);
-          font-weight: 500;
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+          font-size: 0.78rem;
+          font-weight: 450;
         }
         .wrn-next__radio-group,
         .wrn-next__checkbox-group {
@@ -463,15 +494,18 @@ component Switch {
         .wrn-next--radio-field[data-card="true"] .wrn-next--radio,
         .wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox {
           min-height: 4.5rem;
-          padding: 0.85rem;
+          padding: 0.9rem 1rem;
           border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-sm);
+          border-radius: var(--wrn-radius);
           background: var(--wrn-color-surface);
+          box-shadow: var(--wrn-shadow-1);
+          transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
         }
         .wrn-next--radio-field[data-card="true"] .wrn-next--radio:has(input:checked),
         .wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox:has(input:checked) {
           border-color: var(--wrn-field-color);
-          box-shadow: 0 0 0 1px var(--wrn-field-color);
+          background: color-mix(in srgb, var(--wrn-field-color) 5%, var(--wrn-color-surface));
+          box-shadow: 0 0 0 1px var(--wrn-field-color), var(--wrn-shadow-1);
         }
         .wrn-next--radio-field[data-list="true"] .wrn-next--radio,
         .wrn-next--checkbox-field[data-list="true"] .wrn-next--checkbox {
@@ -492,19 +526,21 @@ component Switch {
         }
         .wrn-next__choice[data-variant="outlined"],
         .wrn-next__choice[data-variant="floating"] {
-          padding: 0.65rem 0.8rem;
+          padding: 0.7rem 0.85rem;
           border: 1px solid var(--wrn-color-border);
           border-radius: var(--wrn-radius-sm);
+          background: var(--wrn-color-surface);
         }
         .wrn-next__choice[data-variant="pill"] {
-          padding: 0.65rem 1rem;
+          padding: 0.6rem 1rem;
+          border: 1px solid color-mix(in srgb, var(--wrn-field-color) 22%, var(--wrn-color-border));
           border-radius: 999px;
-          background: color-mix(in srgb, var(--wrn-field-color) 9%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface));
         }
         .wrn-next__choice[data-variant="ghost"] {
-          padding: 0.65rem 0.8rem;
+          padding: 0.65rem 0.85rem;
           border-radius: var(--wrn-radius-sm);
-          background: color-mix(in srgb, var(--wrn-field-color) 7%, transparent);
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, transparent);
         }
         .wrn-next__choice[data-variant="underline"] {
           padding-block: 0.5rem;
@@ -538,25 +574,35 @@ component Switch {
           align-items: center;
           justify-content: space-between;
           gap: 0.75rem;
-          padding: 0.7rem 0.85rem;
-          border: 1px solid var(--wrn-color-border);
+          padding: 0.55rem 0.85rem;
+          border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
           border-radius: var(--wrn-radius-sm);
-          background: var(--wrn-color-surface);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
           color: var(--wrn-color-text);
           font: inherit;
+          font-size: 0.875rem;
+          font-variant-numeric: tabular-nums;
           text-align: left;
+          cursor: pointer;
+          transition: border-color 120ms ease, box-shadow 120ms ease;
         }
         .wrn-next__calendar,
         .wrn-next__time-panel {
-          z-index: 20;
+          position: absolute;
+          z-index: 40;
+          top: 100%;
+          left: 0;
           display: grid;
-          width: min(100%, 22rem);
+          width: min(calc(100vw - 2rem), 19.5rem);
           gap: 0.75rem;
-          padding: 0.85rem;
+          margin-top: 0.375rem;
+          padding: 0.75rem;
           border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-md);
-          background: var(--wrn-color-surface);
-          box-shadow: var(--wrn-shadow-3);
+          border-radius: var(--wrn-radius);
+          background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
+          box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
+          animation: wrn-popover-enter var(--wrn-motion-base, 160ms) var(--wrn-ease-emphasized, ease) both;
         }
         .wrn-next--date-picker[data-expanded="false"] .wrn-next__calendar,
         .wrn-next--time-picker[data-expanded="false"] .wrn-next__time-panel {
@@ -566,29 +612,42 @@ component Switch {
         .wrn-next__time-panel button {
           min-height: 2.25rem;
           border: 0;
-          border-radius: var(--wrn-radius-sm);
+          border-radius: calc(var(--wrn-radius-sm) - 2px);
           background: transparent;
           color: inherit;
+          font: inherit;
+          font-size: 0.8125rem;
+          font-variant-numeric: tabular-nums;
+          cursor: pointer;
+          transition: background-color 120ms ease, color 120ms ease;
         }
         .wrn-next__calendar-weekdays,
         .wrn-next__calendar-grid {
           display: grid;
           grid-template-columns: repeat(7, 1fr);
-          gap: 0.2rem;
+          gap: 0.125rem;
           text-align: center;
         }
         .wrn-next__calendar-weekdays {
-          color: var(--wrn-color-muted);
-          font-size: 0.75rem;
+          padding-bottom: 0.375rem;
+          border-bottom: 1px solid var(--wrn-color-border);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+          font-family: var(--wrn-font-mono, monospace);
+          font-size: 0.625rem;
+          font-weight: 600;
+          letter-spacing: 0.06em;
+          text-transform: uppercase;
         }
         .wrn-next__calendar-grid button:hover,
         .wrn-next__time-panel button:hover {
-          background: var(--wrn-color-surface-2);
+          background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
         }
         .wrn-next__calendar-grid button[aria-pressed="true"],
         .wrn-next__time-panel button[aria-pressed="true"] {
           background: var(--wrn-field-color);
           color: var(--wrn-color-primary-contrast, #fff);
+          box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--wrn-field-color) 35%, transparent);
+          font-weight: 650;
         }
         .wrn-next__time-period {
           display: flex;
@@ -622,7 +681,7 @@ component Switch {
         .wrn-next--field[data-variant="ghost"]
           :is(.wrn-next__input-group-control, .wrn-next__file-control, .wrn-next__color-control) {
           border-color: transparent;
-          background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
         }
         @media (max-width: 640px) {
           .wrn-next--field[data-inline="true"],
diff --git a/packages/ui/components/textarea.wrn b/packages/ui/components/textarea.wrn
index 09d1a7fd..04306cb4 100644
--- a/packages/ui/components/textarea.wrn
+++ b/packages/ui/components/textarea.wrn
@@ -130,7 +130,7 @@ size: string = "default"
 
         .wrn-component p {
           margin: 0;
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-muted, var(--wrn-color-muted));
           line-height: 1.6;
         }
 
@@ -145,8 +145,9 @@ size: string = "default"
           display: block;
           min-height: 1em;
           margin-top: 0.25rem;
-          color: var(--wrn-color-danger);
-          font-size: 0.8rem;
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
+          font-size: 0.78rem;
+          font-weight: 550;
         }
 
         .wrn-next--choice {
@@ -173,13 +174,14 @@ size: string = "default"
           width: 100%;
           min-height: var(--wrn-control-height, 2.5rem);
           padding: 0.5rem 0.75rem;
-          border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-sm, 6px);
+          border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
+          border-radius: var(--wrn-radius-sm, 8px);
           outline: 0;
           color: var(--wrn-color-text);
-          background: var(--wrn-color-bg);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
           font: inherit;
           font-weight: 500;
+          transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
         }
         .wrn-auth-form form > .wrn-next--field,
         .wrn-auth-form form > .wrn-field {
@@ -193,8 +195,8 @@ size: string = "default"
       box-shadow: none;
         }
         .wrn-next--field :where(input, textarea, select):focus-visible {
-          border-color: var(--wrn-color-primary);
-          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
+          border-color: var(--wrn-field-color, var(--wrn-color-primary));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04), 0 0 0 3px color-mix(in srgb, var(--wrn-field-color, var(--wrn-color-primary)) 18%, transparent);
         }
         .wrn-next--field textarea {
           resize: vertical;
@@ -228,12 +230,14 @@ size: string = "default"
           font-size: 0.8125rem;
           font-weight: 600;
           line-height: 1.35;
+          letter-spacing: -0.005em;
         }
         .wrn-next__field-hint,
         .wrn-next__field-help {
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
           font-size: 0.75rem;
-          font-weight: 500;
+          font-weight: 450;
+          line-height: 1.45;
         }
         .wrn-next__field-control {
           position: relative;
@@ -241,10 +245,11 @@ size: string = "default"
         }
         .wrn-next__field-control > :is(input, textarea, select) {
           padding-inline: 0.85rem;
-          border-color: var(--wrn-color-border);
+          border-color: var(--wrn-color-input-border, var(--wrn-color-border));
           border-radius: var(--wrn-radius-sm);
-          background: var(--wrn-color-surface);
-          font-size: 0.8125rem;
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
+          font-size: 0.875rem;
         }
         .wrn-next__field-control[data-has-icon="true"][data-icon-position="start"] > :is(input, textarea, select) {
           padding-inline-start: 2.5rem;
@@ -285,7 +290,8 @@ size: string = "default"
         }
         .wrn-next--field[data-variant="ghost"] .wrn-next__field-control > :is(input, textarea, select) {
           border-color: transparent;
-          background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
+          box-shadow: none;
         }
         .wrn-next__field-floating-label {
           position: absolute;
@@ -326,9 +332,9 @@ size: string = "default"
         }
         .wrn-next__field-error {
           min-height: 1em;
-          color: var(--wrn-color-danger);
-          font-size: 0.82em;
-          font-weight: 600;
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
+          font-size: 0.78rem;
+          font-weight: 550;
         }
         .wrn-next--field[data-invalid="false"] > .wrn-next__field-error {
           display: none;
@@ -336,14 +342,16 @@ size: string = "default"
         .wrn-next--field[data-invalid="true"] :is(input, textarea, select),
         .wrn-next--choice-field[data-invalid="true"] input {
           border-color: var(--wrn-color-danger);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-danger) 12%, transparent);
         }
         .wrn-next--field :is(input, textarea, select):disabled,
         .wrn-next--choice-field input:disabled {
           cursor: not-allowed;
-          opacity: 0.58;
+          opacity: 0.55;
+          background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
         }
         .wrn-next--field :is(input, textarea, select):read-only {
-          background: var(--wrn-color-surface-2);
+          background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
         }
         .wrn-next--field[data-inline="true"],
         .wrn-next--choice-field[data-inline="true"] {
@@ -400,11 +408,13 @@ size: string = "default"
           display: flex;
           min-width: 0;
           align-items: center;
-          gap: 0.65rem;
+          gap: 0.625rem;
           color: var(--wrn-color-text);
           width: 100%;
-          font-size: 0.75rem;
+          font-size: 0.875rem;
           font-weight: 500;
+          line-height: 1.4;
+          cursor: pointer;
         }
         .wrn-next__checkbox-content > .wrn-next__choice {
           width: 100%;
@@ -419,12 +429,13 @@ size: string = "default"
         .wrn-next__choice-copy {
           display: grid;
           min-width: 0;
-          gap: 0.15rem;
-          line-height: 1.35;
+          gap: 0.125rem;
+          line-height: 1.4;
         }
         .wrn-next__choice-copy small {
-          color: var(--wrn-color-muted);
-          font-weight: 500;
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+          font-size: 0.78rem;
+          font-weight: 450;
         }
         .wrn-next__radio-group,
         .wrn-next__checkbox-group {
@@ -444,15 +455,18 @@ size: string = "default"
         .wrn-next--radio-field[data-card="true"] .wrn-next--radio,
         .wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox {
           min-height: 4.5rem;
-          padding: 0.85rem;
+          padding: 0.9rem 1rem;
           border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-sm);
+          border-radius: var(--wrn-radius);
           background: var(--wrn-color-surface);
+          box-shadow: var(--wrn-shadow-1);
+          transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
         }
         .wrn-next--radio-field[data-card="true"] .wrn-next--radio:has(input:checked),
         .wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox:has(input:checked) {
           border-color: var(--wrn-field-color);
-          box-shadow: 0 0 0 1px var(--wrn-field-color);
+          background: color-mix(in srgb, var(--wrn-field-color) 5%, var(--wrn-color-surface));
+          box-shadow: 0 0 0 1px var(--wrn-field-color), var(--wrn-shadow-1);
         }
         .wrn-next--radio-field[data-list="true"] .wrn-next--radio,
         .wrn-next--checkbox-field[data-list="true"] .wrn-next--checkbox {
@@ -473,19 +487,21 @@ size: string = "default"
         }
         .wrn-next__choice[data-variant="outlined"],
         .wrn-next__choice[data-variant="floating"] {
-          padding: 0.65rem 0.8rem;
+          padding: 0.7rem 0.85rem;
           border: 1px solid var(--wrn-color-border);
           border-radius: var(--wrn-radius-sm);
+          background: var(--wrn-color-surface);
         }
         .wrn-next__choice[data-variant="pill"] {
-          padding: 0.65rem 1rem;
+          padding: 0.6rem 1rem;
+          border: 1px solid color-mix(in srgb, var(--wrn-field-color) 22%, var(--wrn-color-border));
           border-radius: 999px;
-          background: color-mix(in srgb, var(--wrn-field-color) 9%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface));
         }
         .wrn-next__choice[data-variant="ghost"] {
-          padding: 0.65rem 0.8rem;
+          padding: 0.65rem 0.85rem;
           border-radius: var(--wrn-radius-sm);
-          background: color-mix(in srgb, var(--wrn-field-color) 7%, transparent);
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, transparent);
         }
         .wrn-next__choice[data-variant="underline"] {
           padding-block: 0.5rem;
@@ -519,25 +535,35 @@ size: string = "default"
           align-items: center;
           justify-content: space-between;
           gap: 0.75rem;
-          padding: 0.7rem 0.85rem;
-          border: 1px solid var(--wrn-color-border);
+          padding: 0.55rem 0.85rem;
+          border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
           border-radius: var(--wrn-radius-sm);
-          background: var(--wrn-color-surface);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
+          box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
           color: var(--wrn-color-text);
           font: inherit;
+          font-size: 0.875rem;
+          font-variant-numeric: tabular-nums;
           text-align: left;
+          cursor: pointer;
+          transition: border-color 120ms ease, box-shadow 120ms ease;
         }
         .wrn-next__calendar,
         .wrn-next__time-panel {
-          z-index: 20;
+          position: absolute;
+          z-index: 40;
+          top: 100%;
+          left: 0;
           display: grid;
-          width: min(100%, 22rem);
+          width: min(calc(100vw - 2rem), 19.5rem);
           gap: 0.75rem;
-          padding: 0.85rem;
+          margin-top: 0.375rem;
+          padding: 0.75rem;
           border: 1px solid var(--wrn-color-border);
-          border-radius: var(--wrn-radius-md);
-          background: var(--wrn-color-surface);
-          box-shadow: var(--wrn-shadow-3);
+          border-radius: var(--wrn-radius);
+          background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
+          box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
+          animation: wrn-popover-enter var(--wrn-motion-base, 160ms) var(--wrn-ease-emphasized, ease) both;
         }
         .wrn-next--date-picker[data-expanded="false"] .wrn-next__calendar,
         .wrn-next--time-picker[data-expanded="false"] .wrn-next__time-panel {
@@ -547,29 +573,42 @@ size: string = "default"
         .wrn-next__time-panel button {
           min-height: 2.25rem;
           border: 0;
-          border-radius: var(--wrn-radius-sm);
+          border-radius: calc(var(--wrn-radius-sm) - 2px);
           background: transparent;
           color: inherit;
+          font: inherit;
+          font-size: 0.8125rem;
+          font-variant-numeric: tabular-nums;
+          cursor: pointer;
+          transition: background-color 120ms ease, color 120ms ease;
         }
         .wrn-next__calendar-weekdays,
         .wrn-next__calendar-grid {
           display: grid;
           grid-template-columns: repeat(7, 1fr);
-          gap: 0.2rem;
+          gap: 0.125rem;
           text-align: center;
         }
         .wrn-next__calendar-weekdays {
-          color: var(--wrn-color-muted);
-          font-size: 0.75rem;
+          padding-bottom: 0.375rem;
+          border-bottom: 1px solid var(--wrn-color-border);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+          font-family: var(--wrn-font-mono, monospace);
+          font-size: 0.625rem;
+          font-weight: 600;
+          letter-spacing: 0.06em;
+          text-transform: uppercase;
         }
         .wrn-next__calendar-grid button:hover,
         .wrn-next__time-panel button:hover {
-          background: var(--wrn-color-surface-2);
+          background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
         }
         .wrn-next__calendar-grid button[aria-pressed="true"],
         .wrn-next__time-panel button[aria-pressed="true"] {
           background: var(--wrn-field-color);
           color: var(--wrn-color-primary-contrast, #fff);
+          box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--wrn-field-color) 35%, transparent);
+          font-weight: 650;
         }
         .wrn-next__time-period {
           display: flex;
@@ -603,7 +642,7 @@ size: string = "default"
         .wrn-next--field[data-variant="ghost"]
           :is(.wrn-next__input-group-control, .wrn-next__file-control, .wrn-next__color-control) {
           border-color: transparent;
-          background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
+          background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
         }
         @media (max-width: 640px) {
           .wrn-next--field[data-inline="true"],
diff --git a/packages/ui/components/tooltip.wrn b/packages/ui/components/tooltip.wrn
index f3480505..98d0e3e5 100644
--- a/packages/ui/components/tooltip.wrn
+++ b/packages/ui/components/tooltip.wrn
@@ -172,16 +172,17 @@ id: string = ""
       left: 50%;
       bottom: calc(100% + var(--wrn-tooltip-offset));
       display: grid;
-      gap: 0.22rem;
+      gap: 0.2rem;
       width: max-content;
       max-width: min(var(--wrn-tooltip-max-width), calc(100vw - 1rem));
-      padding: 0.58rem 0.72rem;
-      color: white;
-      background: color-mix(in srgb, black 88%, var(--tooltip-accent) 12%);
-      border: 1px solid color-mix(in srgb, white 12%, transparent);
-      border-radius: 0.65rem;
-      box-shadow: 0 14px 38px color-mix(in srgb, black 28%, transparent);
-      font-size: 0.73rem;
+      padding: 0.45rem 0.65rem;
+      color: #f4f5f7;
+      background: #16181d;
+      border: 1px solid rgb(255 255 255 / 0.08);
+      border-radius: var(--wrn-radius-sm, 0.5rem);
+      box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 8px 24px -4px rgb(0 0 0 / 0.35);
+      font-size: 0.75rem;
+      font-weight: 500;
       line-height: 1.45;
       text-align: left;
       transform: translateX(-50%);
@@ -194,8 +195,9 @@ id: string = ""
 
     .wrn-tooltip[data-variant="soft"] .wrn-tooltip__content {
       color: var(--wrn-color-text);
-      background: var(--tooltip-soft);
-      border-color: color-mix(in srgb, var(--tooltip-accent) 24%, var(--wrn-color-border));
+      background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
+      border-color: var(--wrn-color-border);
+      box-shadow: var(--wrn-shadow-2);
     }
 
     .wrn-tooltip[data-variant="light"] .wrn-tooltip__content {
diff --git a/packages/ui/package.json b/packages/ui/package.json
index c577380d..93463a30 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ui",
-  "version": "0.8.86",
+  "version": "0.8.87",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/ui/styles/SelectStyles.wrn b/packages/ui/styles/SelectStyles.wrn
index 26ac71b8..278fd1db 100644
--- a/packages/ui/styles/SelectStyles.wrn
+++ b/packages/ui/styles/SelectStyles.wrn
@@ -16,8 +16,8 @@ component SelectStyles {
     .wrn-next--advanced-select > label:first-child,
     .wrn-next--advanced-select .wrn-next__row > label {
       color: var(--wrn-color-text);
-      font-size: 0.82em;
-      font-weight: 700;
+      font-size: 0.8125rem;
+      font-weight: 600;
     }
     .wrn-next--advanced-select .wrn-next__row {
       display: flex;
@@ -26,33 +26,35 @@ component SelectStyles {
       gap: 1rem;
     }
     .wrn-next--advanced-select small {
-      color: var(--wrn-color-muted);
-      font-size: 0.72em;
+      color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+      font-size: 0.75rem;
     }
     .wrn-next__select-search input,
     .wrn-next--advanced-select select {
       width: 100%;
-      min-height: 2.6em;
-      padding: 0.62em 0.75em;
-      border: 1px solid var(--wrn-color-border);
-      border-radius: var(--wrn-radius-sm);
+      min-height: 2.25rem;
+      padding: 0.45em 0.75em;
+      border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
+      border-radius: calc(var(--wrn-radius-sm) - 2px);
       color: var(--wrn-color-text);
-      background: var(--wrn-color-surface);
+      background: var(--wrn-color-input-background, var(--wrn-color-surface));
+      box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
       font: inherit;
+      font-size: 0.8125rem;
     }
     .wrn-next__search-icon {
       position: absolute;
       top: 50%;
       left: 0.75em;
       z-index: 1;
-      color: var(--wrn-component-color);
+      color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
       transform: translateY(-50%);
     }
     .wrn-next--advanced-select select:focus-visible,
     .wrn-next__select-search input:focus-visible {
       border-color: var(--wrn-component-color);
-      outline: 2px solid color-mix(in srgb, var(--wrn-component-color) 24%, transparent);
-      outline-offset: 1px;
+      outline: 0;
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-component-color) 18%, transparent);
     }
     .wrn-next--advanced-select select[multiple] {
       min-height: 8rem;
@@ -69,11 +71,11 @@ component SelectStyles {
       width: fit-content;
       padding: 0;
       border: 0;
-      color: var(--wrn-component-color);
+      color: var(--wrn-color-primary-text, var(--wrn-component-color));
       background: transparent;
       font: inherit;
-      font-size: 0.75em;
-      font-weight: 700;
+      font-size: 0.78rem;
+      font-weight: 600;
       cursor: pointer;
     }
     .wrn-next--invalid :is(input, select) {
@@ -114,18 +116,17 @@ component SelectStyles {
       align-items: center;
       justify-content: space-between;
       gap: 0.75rem;
-      padding: 0.55em 2.75em 0.55em 0.8em;
-      border: 1px solid var(--wrn-color-border);
+      padding: 0.45em 2.75em 0.45em 0.85em;
+      border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
       border-radius: var(--wrn-radius-sm);
       color: var(--wrn-color-text);
-      background: var(--wrn-color-bg);
+      background: var(--wrn-color-input-background, var(--wrn-color-surface));
+      box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
       font: inherit;
       font-size: 0.875rem;
       text-align: left;
       cursor: pointer;
-      transition:
-        border-color var(--wrn-motion-base) var(--wrn-ease-standard),
-        box-shadow var(--wrn-motion-base) var(--wrn-ease-standard);
+      transition: border-color var(--wrn-motion-base) var(--wrn-ease-standard), box-shadow var(--wrn-motion-base) var(--wrn-ease-standard);
     }
     .wrn-next--open .wrn-next__select-trigger,
     .wrn-next__select-trigger:focus-visible {
@@ -159,19 +160,20 @@ component SelectStyles {
     }
     .wrn-next__select-dropdown {
       position: absolute;
-      top: calc(100% + 0.4rem);
+      top: calc(100% + 0.375rem);
       left: 0;
       z-index: 80;
       display: grid;
       width: 100%;
       min-width: min(20rem, 92vw);
-      gap: 0.45rem;
-      padding: 0.5rem;
+      gap: 0.375rem;
+      padding: 0.3rem;
       overflow: hidden;
       border: 1px solid var(--wrn-color-border);
-      border-radius: var(--wrn-radius-sm);
-      background: var(--wrn-color-surface);
-      box-shadow: 0 1.25rem 3rem rgb(0 0 0 / 18%);
+      border-radius: var(--wrn-radius);
+      background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
+      box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
+      animation: wrn-popover-enter var(--wrn-motion-base, 160ms) var(--wrn-ease-emphasized, ease) both;
     }
     .wrn-next[data-placement="top"] .wrn-next__select-dropdown {
       top: auto;
@@ -194,10 +196,11 @@ component SelectStyles {
       gap: 0.15rem;
     }
     .wrn-next__group-label {
-      padding: 0.55rem 0.7rem 0.3rem;
-      color: var(--wrn-component-color);
-      font-size: 0.68em;
-      font-weight: 800;
+      padding: 0.5rem 0.625rem 0.25rem;
+      color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
+      font-family: var(--wrn-font-mono, monospace);
+      font-size: 0.65rem;
+      font-weight: 600;
       letter-spacing: 0.08em;
       text-transform: uppercase;
     }
@@ -207,15 +210,16 @@ component SelectStyles {
       width: 100%;
       grid-template-columns: minmax(0, 1fr);
       align-items: center;
-      gap: 0.65rem;
-      padding: 0.58rem 2.5rem 0.58rem 0.7rem;
+      gap: 0.625rem;
+      padding: 0.5rem 2.25rem 0.5rem 0.625rem;
       border: 0;
-      border-radius: calc(var(--wrn-radius-sm) * 0.72);
+      border-radius: calc(var(--wrn-radius-sm) - 2px);
       color: var(--wrn-color-text);
       background: transparent;
       font: inherit;
       text-align: left;
       cursor: pointer;
+      transition: background-color 100ms ease;
     }
     .wrn-next__select-option:has(> img),
     .wrn-next__select-option:has(> i:not(.wrn-next__check)) {
@@ -228,14 +232,15 @@ component SelectStyles {
     }
     .wrn-next__select-option strong {
       overflow: hidden;
-      font-size: 0.82em;
-      font-weight: 650;
+      font-size: 0.8125rem;
+      font-weight: 550;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
     .wrn-next__select-option small {
       overflow: hidden;
-      font-size: 0.68em;
+      color: var(--wrn-color-text-muted);
+      font-size: 0.72rem;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
@@ -247,10 +252,10 @@ component SelectStyles {
       object-fit: cover;
     }
     .wrn-next__select-option--active {
-      background: var(--wrn-color-surface-2);
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
     }
     .wrn-next__select-option--selected {
-      color: var(--wrn-color-primary-text);
+      color: var(--wrn-color-text);
     }
     .wrn-next__select-option:disabled {
       opacity: 0.45;
@@ -259,10 +264,10 @@ component SelectStyles {
     .wrn-next__check {
       position: absolute;
       top: 50%;
-      right: 0.8rem;
+      right: 0.75rem;
       width: 1rem;
       height: 1rem;
-      color: var(--wrn-component-color);
+      color: var(--wrn-color-primary-text, var(--wrn-component-color));
       transform: translateY(-50%);
     }
     .wrn-next__select-message {
@@ -272,15 +277,17 @@ component SelectStyles {
       justify-content: center;
       gap: 0.5rem;
       padding: 1rem;
-      color: var(--wrn-color-muted);
-      font-size: 0.78em;
+      color: var(--wrn-color-text-muted);
+      font-size: 0.8125rem;
       text-align: center;
     }
     .wrn-next__create-option,
     .wrn-next__load-more {
-      width: 100%;
-      padding: 0.65rem;
+      width: calc(100% + 0.6rem);
+      margin: 0 -0.3rem -0.3rem;
+      padding: 0.625rem 0.925rem;
       border-top: 1px solid var(--wrn-color-border);
+      background: var(--wrn-color-surface-soft);
       text-align: left;
     }
     .wrn-next--disabled {
diff --git a/packages/ui/test/component-audit.test.ts b/packages/ui/test/component-audit.test.ts
index 119da603..8e95c03a 100644
--- a/packages/ui/test/component-audit.test.ts
+++ b/packages/ui/test/component-audit.test.ts
@@ -109,8 +109,8 @@ test("map embeds a geographic provider and requires a Google key", async () => {
 
 test("chart accepts data arrays and chooses line rendering", async () => {
  const dom = await mount("Chart", {type:"line",data:[{label:"Mon",value:12},{label:"Tue",value:18}]});
- expect(dom.querySelector('polyline')).not.toBeNull();
- expect(dom.querySelectorAll('.wrn-chart__point-labels button').length).toBe(2);
+ expect(dom.querySelector('path.wrn-chart__line')).not.toBeNull();
+ expect(dom.querySelectorAll('.wrn-chart__hit').length).toBe(2);
 });
 
 test("calendar Done and outside dismiss both close the panel", async () => {
diff --git a/packages/ui/test/ui.test.ts b/packages/ui/test/ui.test.ts
index 5d54e689..91928a39 100644
--- a/packages/ui/test/ui.test.ts
+++ b/packages/ui/test/ui.test.ts
@@ -898,7 +898,7 @@ test("alert exposes configurable radius and elevation treatments", async () => {
   expect(css).toContain('.wrn-next--alert[data-radius="xl"]');
   expect(css).toContain('.wrn-next--alert[data-shadow="lg"]');
   expect(css).toContain("border-radius: calc(var(--wrn-radius, 0.75rem) * 1.75)");
-  expect(css).toContain("0 20px 48px color-mix(in srgb, #000 24%, transparent)");
+  expect(css).toContain("box-shadow: var(--wrn-shadow-3)");
 });
 
 test("avatar renders images, fallbacks, presence, badges, tooltips, and media copy", async () => {
@@ -1430,7 +1430,7 @@ test("basic fields suppress native popups and render package constraint messages
 
   const selectSource = readFileSync(uiComponentPath("Select"), "utf8");
   expect(selectSource).toContain("appearance: none");
-  expect(selectSource).toContain("background-color: var(--wrn-color-surface)");
+  expect(selectSource).toContain("background-color: var(--wrn-color-input-background, var(--wrn-color-surface))");
   expect(selectSource).toContain("wrn-next__select-indicator");
 });
 
@@ -3854,8 +3854,9 @@ test("chart renders accessible SVG bars and emits point and legend outputs", asy
   for (const name of ["dataPointClick", "select", "legendToggle"]) {
     root.addEventListener(name, () => events.push(name));
   }
-  expect(root.querySelectorAll("svg rect")).toHaveLength(2);
-  (root.querySelector("svg rect") as SVGElement).dispatchEvent(
+  expect(root.querySelectorAll("svg path.wrn-chart__bar")).toHaveLength(2);
+  expect(root.querySelectorAll("button.wrn-chart__hit")).toHaveLength(2);
+  (root.querySelector("button.wrn-chart__hit") as HTMLElement).dispatchEvent(
     new (dom.window as { Event: typeof Event }).Event("click", { bubbles: true }),
   );
   (root.querySelector(".wrn-chart__legend button") as HTMLButtonElement).click();