feat(ui): component redesign pass and fixes, release ui 0.8.87

Redesign - Shared field foundation rules (duplicated across 15 form components and emitted globally) are now identical everywhere, so later copies no longer silently override earlier redesigns. - Drawn checkbox and radio controls, white switch thumbs (the thumb was the text colour, a black blob in light mode), recessed field wells, keycap actions in Modal, Drawer, Popover, Toaster, Pagination, Stepper, DataTable. - Menus (Dropdown, ContextMenu, Popover, Select dropdown, Navbar panels) share one flat raised panel with neutral hover rows and mono section labels. - Alerts with an accent rail and icon chip; card headers without the grey band; accordion, collapse, list, list group, timeline, stats, metrics, chat, skeleton, avatar group, clipboard, splitter, section, sidebar, navbar and upload progress restyled. - Chart rebuilt: nice y-axis ticks, gridlines, rounded bars, line and area modes, hover tooltips, hidden series leave the scale. Fixes - Checkbox and radio labels toggle their input again (empty for="" broke it). - TimePicker kept every clicked time pressed; only the chosen hour and minute are pressed now, and nothing is pressed before a value exists. - ColorPicker hex readout now follows the picked colour. - Disabled FileInput no longer shows the native file-input text. - Date and time panels float instead of pushing content. - ContextMenu opened at the pointer closes on scroll. - Drawer left/top/bottom placements slide from their own edge again. - Image-only Card no longer renders an empty body strip. - Timeline supports item.time, current/upcoming states, sizes and compact/alternate variants; showcase demos use distinct variants. - ChatBubble: delivery receipts (sending/sent/delivered/read/failed/error) and meta aligned to its bubble. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-09-30 16:18:13 +05:30
1 parent 5eae6f3b3c
commit 1bed8e4b74
@@ -749,7 +749,7 @@
    },
    "packages/ui": {
      "name": "@wrnexus/ui",
-      "version": "0.8.86",
+      "version": "0.8.87",
      "dependencies": {
        "@wrnexus/core": "workspace:*",
      },
@@ -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>
@@ -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>
@@ -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">
@@ -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"
@@ -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>
@@ -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>
  }
 }
@@ -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>
@@ -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">
@@ -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},
@@ -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: {
@@ -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"],
@@ -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);
+      color: var(--wrn-color-text-muted, var(--wrn-color-muted));
-      font-size: 0.86rem;
+      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: 1px solid var(--wrn-color-border);
-      border-radius: var(--wrn-radius-md);
+      border-radius: var(--wrn-radius);
-      background: var(--wrn-color-surface-2);
+      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;
        }
  }
@@ -497,13 +497,14 @@ component AdvancedSelect {
    .wrn-next__select-tags > span {
      display: inline-flex;
      align-items: center;
-      gap: 0.35rem;
+      gap: 0.3rem;
-      padding: 0.3rem 0.55rem;
+      padding: 0.15rem 0.5rem;
-      border-radius: 999px;
+      border: 1px solid var(--wrn-color-border);
-      color: var(--wrn-component-color);
+      border-radius: calc(var(--wrn-radius-sm) - 2px);
-      background: color-mix(in srgb, var(--wrn-component-color) 12%, transparent);
+      color: var(--wrn-color-text);
-      font-size: 0.75em;
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
-      font-weight: 700;
+      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;
        }
  }
@@ -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:
+      box-shadow: var(--wrn-shadow-2);
        0 1px 2px rgb(0 0 0 / 0.04),
        0 12px 32px rgb(0 0 0 / 0.08);
    }
    .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:
+      box-shadow: var(--wrn-shadow-2);
        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);
    }
    .wrn-announcement__accent {
@@ -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;
        }
  }
@@ -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;
        }
  }
@@ -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;
+      color: color-mix(in srgb, var(--wrn-avatar-group-color, var(--wrn-color-primary)) 78%, var(--wrn-color-text));
-      border: 2px solid var(--wrn-avatar-group-ring);
+      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));
+      background: color-mix(in srgb, var(--wrn-avatar-group-color, var(--wrn-color-primary)) 14%, var(--wrn-color-surface));
-      box-shadow: 0 5px 14px rgb(0 0 0 / 0.16);
+      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-size: calc(var(--wrn-avatar-group-size) * 0.36);
-      font-weight: 800;
+      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);
+      color: var(--wrn-color-text-muted);
-      background: var(--wrn-color-surface-2);
+      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;
+      padding: 0.375rem 0.6rem;
-      color: var(--wrn-color-bg);
+      color: #f4f5f7;
-      border-radius: 0.4rem;
+      border: 1px solid rgb(255 255 255 / 0.08);
-      background: var(--wrn-color-text);
+      border-radius: var(--wrn-radius-sm, 0.5rem);
-      box-shadow: 0 8px 22px rgb(0 0 0 / 0.22);
+      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;
+      gap: 0.125rem;
-      padding: 0.45rem;
+      padding: 0.3rem;
      color: var(--wrn-color-text);
      border: 1px solid var(--wrn-color-border);
-      border-radius: var(--wrn-radius-sm, 0.5rem);
+      border-radius: var(--wrn-radius);
-      background: var(--wrn-color-surface);
+      background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
-      box-shadow: 0 16px 38px rgb(0 0 0 / 0.22);
+      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;
+      padding: 0.4rem 0.55rem;
-      border-radius: 0.4rem;
+      border-radius: calc(var(--wrn-radius-sm) - 2px);
-      font-size: 0.82rem;
+      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;
        }
  }
@@ -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;
@@ -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;
        }
  }
@@ -178,20 +178,20 @@ label: string = "Breadcrumb"
    .wrn-breadcrumb[data-variant="soft"] {
      width: fit-content;
      max-width: 100%;
-      padding: 0.45rem 0.65rem;
+      padding: 0.25rem 0.5rem;
-      background: var(--breadcrumb-soft);
+      background: var(--wrn-color-surface-soft, var(--breadcrumb-soft));
-      border: 1px solid var(--breadcrumb-muted);
+      border: 1px solid var(--wrn-color-border);
-      border-radius: 0.75rem;
+      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;
+      border-radius: var(--wrn-radius-sm);
-      box-shadow: var(--wrn-shadow-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;
+      margin-inline: 0.25rem;
-      color: var(--wrn-color-text-subtle);
+      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;
+      min-height: 1.75rem;
-      padding: 0.25rem 0.4rem;
+      padding: 0.125rem 0.375rem;
-      border-radius: 0.55rem;
+      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;
+      font-weight: 500;
-      transition:
+      transition: color 120ms ease, background 120ms ease;
        color 160ms ease,
        background 160ms ease;
    }
    .wrn-breadcrumb__link:hover {
-      color: var(--breadcrumb-accent);
+      color: var(--wrn-color-text);
-      background: var(--breadcrumb-soft);
+      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);
+      color: var(--wrn-color-text);
-      background: var(--breadcrumb-soft);
+      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 {
@@ -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;
        }
  }
@@ -291,9 +291,7 @@ component CTASection {
        var(--wrn-color-surface-raised);
      border: 1px solid var(--cta-border);
      border-radius: 1.5rem;
-      box-shadow:
+      box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
        0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
        0 24px 70px color-mix(in srgb, black 15%, transparent);
    }
    .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 {
@@ -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;
        }
  }
@@ -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;
        }
  }
@@ -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)) }
+    // Visible points keep their original index so events report the source item.
-    shared function barHeight(item) { return numericValue(item) / maximumValue() * 160 }
+    shared function points() {
-    shared function barY(item) { return 200 - barHeight(item) }
+      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()
+      next = []
-      if (next.includes(index)) {
+      for (var position = 0; position < hiddenIndexes.length; position++) {
-        next = next.filter(function (value) { return value !== index })
+        if (hiddenIndexes[position] !== index) { next.push(hiddenIndexes[position]) }
      } else {
        next.push(index)
      }
      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__stage" style="aspect-ratio: 600 / {Math.max(120, height)}">
-        <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>
+        <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}
-        <div class="wrn-chart__columns" style="height:{height}px" role="group" aria-label="{title}">
+            {#if chartKind() === "area"}<path class="wrn-chart__area" d="{areaPath()}"></path>{/if}
-          {#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)">
+            <path class="wrn-chart__line" d="{linePath()}"></path>
            {#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>
          {/if}
-      {#if showLegend}
+        </svg>
-        <div class="wrn-chart__legend" aria-label="Chart legend">
+
        <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>
        <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 {
-    .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-color: var(--wrn-color-primary);
-    .wrn-chart__column svg { width:100%; max-width:5rem; min-height:1px; }
+      display: grid;
-    .wrn-chart__column small { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--wrn-color-muted); }
+      gap: 0.875rem;
-    .wrn-chart__column[data-hidden="true"] { opacity:.2; }
+      min-width: 0;
-    .wrn-chart__line { width:100%; display:block; }
+      margin: 0;
-    .wrn-chart__point-labels { display:flex; justify-content:space-around; gap:.5rem; flex-wrap:wrap; }
+      padding: 1rem 1.125rem;
-    .wrn-chart__point-labels button { border:0; background:transparent; color:var(--wrn-color-muted); font:inherit; font-size:.8rem; cursor:pointer; }
+      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__header > strong { font-size: 0.9375rem; font-weight: 620; letter-spacing: -0.01em; }
-    .wrn-chart__plot { display: block; width: 100%; min-height: 12rem; overflow: visible; }
+    .wrn-chart__header > span { color: var(--wrn-color-text-muted, var(--wrn-color-muted)); font-size: 0.8125rem; }
-    .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; }
+    /* The stage reserves the SVG box; ticks, labels and hit targets sit over
-    .wrn-chart__bar:hover { opacity: 0.82; transform: scaleY(1.02); }
+       it in percentages so text never scales with the plot. */
-    .wrn-chart__bar:focus-visible { outline: 1.5px solid var(--wrn-color-focus); outline-offset: 1px; }
+    .wrn-chart__stage { position: relative; width: 100%; min-width: 0; }
-    .wrn-chart__plot g[data-hidden="true"] { opacity: 0.18; pointer-events: none; }
+    .wrn-chart__plot { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
-    .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__grid { stroke: var(--wrn-color-border); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 2 4; }
-    .wrn-chart__legend { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+    .wrn-chart__grid[data-baseline="true"] { stroke: var(--wrn-color-border-strong, var(--wrn-color-border)); stroke-dasharray: none; }
-    .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__bar { fill: var(--wrn-chart-color); transition: opacity var(--wrn-motion-fast); }
-    .wrn-chart__legend button[aria-pressed="false"] { opacity: 0.5; }
+    .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; }
    }
  }
 }
@@ -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)}
+              {#if showMetadata && (item.timestamp || item.status || item.receipt || item.actionLabel)}
-                <footer class="wrn-next__chat-meta" data-tone="{item.statusTone || 'muted'}">
+                <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;
+      align-items: flex-end;
-      gap: 0.75rem;
+      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);
+      border-color: color-mix(in srgb, var(--wrn-chat-color) 82%, black);
-      background: var(--wrn-chat-color);
+      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);
+      color: var(--wrn-color-primary-text, var(--wrn-chat-color));
-      font-weight: 650;
+      font-weight: 600;
      text-decoration: none;
    }
@@ -280,17 +318,21 @@ component ChatBubble {
    .wrn-next__chat-avatar {
      display: grid;
-      flex: 0 0 2.5rem;
+      flex: 0 0 2rem;
-      width: 2.5rem;
+      width: 2rem;
-      min-height: 2.5rem;
+      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));
+      background: color-mix(in srgb, var(--wrn-chat-color) 12%, var(--wrn-color-surface));
-      color: var(--wrn-color-text);
+      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);
+      padding-inline: 0.25rem;
-      color: var(--wrn-color-text-muted);
+      color: var(--wrn-color-text-subtle, var(--wrn-color-text-muted));
-      font-size: 0.78em;
+      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; }
    }
  }
 }
@@ -82,17 +82,91 @@ component Clipboard {
  }
  style {
-    .wrn-clipboard { display: grid; gap: 0.5rem; color: var(--wrn-color-text); }
+    .wrn-clipboard { display: grid; gap: 0.375rem; color: var(--wrn-color-text); }
-    .wrn-clipboard__title { font-size: 0.875rem; }
+    .wrn-clipboard__title { font-size: 0.8125rem; font-weight: 600; }
-    .wrn-clipboard__description { margin: 0; color: var(--wrn-color-muted); font-size: 0.8rem; }
+    .wrn-clipboard__description { margin: 0; color: var(--wrn-color-text-muted, var(--wrn-color-muted)); font-size: 0.78rem; }
-    .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; }
+    /* Plain values sit in a recessed field well; code values (the default)
-    .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; }
+       sit on the code surface so they read as something to paste. */
-    .wrn-clipboard__button:hover { background: var(--wrn-color-primary-soft); }
+    .wrn-clipboard__control {
-    .wrn-clipboard__button:focus-visible { outline: 2px solid var(--wrn-color-focus); outline-offset: -3px; }
+      display: flex;
-    .wrn-clipboard__button:disabled { cursor: not-allowed; opacity: 0.55; }
+      min-width: 0;
-    .wrn-clipboard[data-status="success"] .wrn-clipboard__button { color: var(--wrn-color-success); }
+      min-height: 2.75rem;
-    .wrn-clipboard[data-status="error"] .wrn-clipboard__button { color: var(--wrn-color-danger); }
+      align-items: center;
-    .wrn-clipboard__icon { width: 1rem; height: 1rem; flex: none; }
+      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; }
  }
 }
@@ -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;
+      display: flex;
-      min-height: 2.75rem;
+      width: 100%;
      min-height: 3rem;
      align-items: center;
-      justify-content: center;
+      justify-content: space-between;
-      gap: 0.55rem;
+      gap: 0.75rem;
-      padding: 0.7rem 1rem;
+      padding: 0.75rem 1rem;
-      border: 1px solid var(--wrn-collapse-color);
+      border: 0;
-      border-radius: var(--wrn-radius-sm);
+      border-radius: 0;
-      background: var(--wrn-collapse-color);
+      background: transparent;
-      color: var(--wrn-color-primary-contrast, #fff);
+      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:
+      transition: max-height 320ms var(--wrn-ease-emphasized), opacity 200ms var(--wrn-ease-standard);
        max-height 350ms var(--wrn-ease-emphasized),
        margin-top 300ms 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;
+      gap: 0.5rem;
-      padding: 1rem;
+      padding: 0.875rem 1rem 1rem;
-      border: 1px solid var(--wrn-color-border);
+      border: 0;
-      border-radius: var(--wrn-radius-md);
+      border-top: 1px solid var(--wrn-color-border);
-      background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
+      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);
+      color: var(--wrn-color-primary-text, var(--wrn-collapse-color));
-      font-weight: 650;
+      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;
    }
  }
 }
@@ -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;
+      flex: none;
-      padding: 0.2rem;
+      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);
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
-          font-size: 0.8rem;
+          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: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
-          border-radius: var(--wrn-radius-sm, 6px);
+          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);
+          border-color: var(--wrn-field-color, var(--wrn-color-primary));
-          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
+          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);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
-          font-size: 0.8125rem;
+          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);
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
-          font-size: 0.82em;
+          font-size: 0.78rem;
-          font-weight: 600;
+          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;
+          gap: 0.125rem;
-          line-height: 1.35;
+          line-height: 1.4;
        }
        .wrn-next__choice-copy small {
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
-          font-weight: 500;
+          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;
+          padding: 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);
-          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);
+          border-radius: var(--wrn-radius);
-          background: var(--wrn-color-surface);
+          background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
-          box-shadow: var(--wrn-shadow-3);
+          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);
+          padding-bottom: 0.375rem;
-          font-size: 0.75rem;
+          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"],
@@ -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;
        }
  }
@@ -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:
+      background: var(--wrn-color-surface-raised);
-        linear-gradient(145deg, color-mix(in srgb, var(--context-accent) 5%, transparent), transparent 58%),
+      border: 1px solid var(--wrn-color-border);
-        color-mix(in srgb, var(--wrn-color-surface-raised) 96%, transparent);
+      border-radius: var(--wrn-radius);
-      border: 1px solid color-mix(in srgb, var(--context-accent) 18%, var(--wrn-color-border));
+      box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
      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);
      transform-origin: top left;
    }
@@ -366,10 +371,8 @@ component ContextMenu {
    }
    .wrn-context-menu[data-variant="soft"] .wrn-context-menu__panel {
-      background:
+      background: color-mix(in srgb, var(--context-accent) 4%, var(--wrn-color-surface-raised));
-        linear-gradient(145deg, var(--context-soft), transparent 72%),
+      box-shadow: var(--wrn-shadow-3);
        var(--wrn-color-surface-raised);
      box-shadow: 0 18px 48px color-mix(in srgb, black 16%, transparent);
    }
    .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;
+      gap: 0.15rem;
-      padding: 0.65rem 0.75rem 0.75rem;
+      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-size: 0.8125rem;
-      font-weight: 650;
+      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;
+      padding: 0.5rem 0.625rem 0.25rem;
-      color: var(--wrn-color-text-muted);
+      color: var(--wrn-color-text-subtle, var(--wrn-color-text-muted));
-      font-size: 0.68rem;
+      font-family: var(--wrn-font-mono, monospace);
-      font-weight: 700;
+      font-size: 0.65rem;
-      letter-spacing: 0.12em;
+      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);
+      color: var(--wrn-color-text);
-      background: var(--context-soft);
+      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-size: 0.8125rem;
-      font-weight: 600;
+      font-weight: 550;
-      line-height: 1.3;
+      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;
+      padding: 0.125rem 0.35rem;
-      color: var(--wrn-color-text-muted);
+      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;
+      border-bottom-width: 2px;
-      font-size: 0.64rem;
+      border-radius: 0.3rem;
-      font-family: inherit;
+      font-size: 0.65rem;
      font-family: var(--wrn-font-mono, monospace);
    }
    .wrn-context-menu[data-size="sm"] .wrn-context-menu__item {
@@ -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;
+      gap: 0.375rem;
-      min-height: 2.1rem;
+      min-height: 2.125rem;
-      padding: 0 0.7rem;
+      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);
+      color: var(--wrn-color-text);
-      border-color: color-mix(in srgb, var(--table-accent) 45%, var(--wrn-color-border));
+      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);
+      color: var(--wrn-color-text-subtle, var(--wrn-color-text-muted));
-      background: var(--wrn-color-surface-soft);
+      background: var(--wrn-color-input-background, var(--wrn-color-surface));
-      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);
      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-family: var(--wrn-font-mono, monospace);
-      font-weight: 650;
+      font-size: 0.65rem;
-      letter-spacing: 0.02em;
+      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;
+      width: 1.125rem;
-      height: 1.05rem;
+      height: 1.125rem;
      color: transparent;
-      background: var(--wrn-color-surface-raised);
+      background: var(--wrn-color-input-background, var(--wrn-color-surface));
-      border: 1px solid var(--wrn-color-border);
+      border: 1.5px solid var(--wrn-color-border-strong, var(--wrn-color-border));
-      border-radius: 0.32rem;
+      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;
+      outline: 2px solid var(--table-accent);
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--table-accent) 35%, transparent);
+      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-size: 0.8125rem;
-      font-weight: 650;
+      font-weight: 600;
-      text-transform: uppercase;
+      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);
+      color: var(--wrn-color-text);
-      border-color: color-mix(in srgb, var(--table-accent) 40%, var(--wrn-color-border));
+      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);
+      background: linear-gradient(180deg, color-mix(in srgb, var(--table-accent) 92%, white), var(--table-accent));
-      border-color: 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;
        }
  }
@@ -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);
+      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
-      gap: 0.65rem;
+      gap: 0.5rem;
    }
    .wrn-next__date-selectors label {
      display: grid;
-      gap: 0.3rem;
+      gap: 0.25rem;
-      color: var(--wrn-color-muted);
+      color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
-      font-size: 0.78rem;
+      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;
+      min-height: 2.125rem;
-      padding: 0.45rem 0.65rem;
+      padding: 0.375rem 1.75rem 0.375rem 0.625rem;
-      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);
+      border-radius: calc(var(--wrn-radius-sm) - 2px);
-      background: var(--wrn-color-surface);
+      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);
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
-          font-size: 0.8rem;
+          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: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
-          border-radius: var(--wrn-radius-sm, 6px);
+          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);
+          border-color: var(--wrn-field-color, var(--wrn-color-primary));
-          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
+          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);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
-          font-size: 0.8125rem;
+          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);
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
-          font-size: 0.82em;
+          font-size: 0.78rem;
-          font-weight: 600;
+          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;
+          gap: 0.125rem;
-          line-height: 1.35;
+          line-height: 1.4;
        }
        .wrn-next__choice-copy small {
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
-          font-weight: 500;
+          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;
+          padding: 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);
-          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);
+          border-radius: var(--wrn-radius);
-          background: var(--wrn-color-surface);
+          background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
-          box-shadow: var(--wrn-shadow-2);
+          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);
+          padding-bottom: 0.375rem;
-          font-size: 0.75rem;
+          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);
    }
  }
 }
@@ -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;
        }
  }
@@ -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);
+      background: linear-gradient(180deg, color-mix(in srgb, var(--drawer-accent) 92%, white), var(--drawer-accent));
-      border: 0;
+      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-size: 0.875rem;
-      font-weight: 650;
+      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:
+      background: var(--wrn-color-surface-raised);
-        radial-gradient(
+      border-left: 1px solid var(--wrn-color-border);
-          circle at 100% 0%,
+      box-shadow: var(--wrn-shadow-3);
          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);
      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-top: 1px solid var(--wrn-color-border);
-      border-radius: 1.3rem 1.3rem 0 0;
+      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);
+      color: var(--wrn-color-text);
-      border-color: color-mix(in srgb, var(--drawer-accent) 34%, var(--wrn-color-border));
+      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 {
@@ -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);
+      color: var(--wrn-color-text);
-      background: var(--dropdown-soft);
+      background: var(--wrn-color-surface);
-      border-color: color-mix(in srgb, var(--dropdown-accent) 38%, var(--wrn-color-border));
+      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:
+      background: var(--wrn-color-surface-raised);
-        linear-gradient(145deg, color-mix(in srgb, var(--dropdown-accent) 5%, transparent), transparent 60%),
+      border: 1px solid var(--wrn-color-border);
-        color-mix(in srgb, var(--wrn-color-surface-raised) 97%, transparent);
+      border-radius: var(--wrn-radius);
-      border: 1px solid color-mix(in srgb, var(--dropdown-accent) 18%, var(--wrn-color-border));
+      box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
      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);
    }
    .wrn-dropdown[data-width="trigger"] .wrn-dropdown__panel {
@@ -440,10 +437,8 @@ items: unknown[] = []
    }
    .wrn-dropdown[data-variant="soft"] .wrn-dropdown__panel {
-      background:
+      background: color-mix(in srgb, var(--dropdown-accent) 4%, var(--wrn-color-surface-raised));
-        linear-gradient(145deg, var(--dropdown-soft), transparent 70%),
+      box-shadow: var(--wrn-shadow-3);
        var(--wrn-color-surface-raised);
      box-shadow: 0 18px 48px color-mix(in srgb, black 16%, transparent);
    }
    .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;
+      padding: 0.5rem 0.625rem 0.25rem;
-      color: var(--wrn-color-text-muted);
+      color: var(--wrn-color-text-subtle, var(--wrn-color-text-muted));
-      font-size: 0.68rem;
+      font-family: var(--wrn-font-mono, monospace);
-      font-weight: 700;
+      font-size: 0.65rem;
-      letter-spacing: 0.12em;
+      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);
+      color: var(--wrn-color-text);
-      background: var(--dropdown-soft);
+      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-size: 0.8125rem;
-      font-weight: 600;
+      font-weight: 550;
-      line-height: 1.3;
+      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;
+      padding: 0.125rem 0.4rem;
-      color: var(--dropdown-accent);
+      color: var(--wrn-color-primary-text, var(--dropdown-accent));
      background: var(--dropdown-soft);
      border-radius: 999px;
-      font-size: 0.64rem;
+      font-size: 0.65rem;
-      font-weight: 700;
+      font-weight: 650;
      font-variant-numeric: tabular-nums;
    }
    .wrn-dropdown kbd {
-      padding: 0.16rem 0.38rem;
+      padding: 0.125rem 0.35rem;
-      color: var(--wrn-color-text-muted);
+      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;
+      border-bottom-width: 2px;
-      font-size: 0.64rem;
+      border-radius: 0.3rem;
-      font-family: inherit;
+      font-size: 0.65rem;
      font-family: var(--wrn-font-mono, monospace);
    }
    .wrn-dropdown__empty {
@@ -160,9 +160,7 @@ component FeatureCard {
        var(--wrn-color-surface-raised);
      border: 1px solid var(--feature-border);
      border-radius: 1.25rem;
-      box-shadow:
+      box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-2);
        0 1px 0 color-mix(in srgb, white 4%, transparent) inset,
        0 10px 30px color-mix(in srgb, black 9%, transparent);
      transition:
        transform 180ms ease,
        border-color 180ms ease,
@@ -585,14 +583,11 @@ component FeatureCard {
    }
    .wrn-feature-card[data-variant="raised"] {
-      box-shadow:
+      box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
        0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
        0 20px 50px color-mix(in srgb, black 17%, transparent);
    }
    .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:
+      box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
        0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
        0 24px 58px color-mix(in srgb, black 20%, transparent);
    }
    .wrn-feature-card[data-hover="shadow"]:not([data-disabled="true"]):hover {
-      box-shadow:
+      box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
        0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
        0 24px 58px color-mix(in srgb, black 20%, transparent);
    }
    .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 {
@@ -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;
        }
  }
@@ -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;
+      display: flex;
-      min-height: 2.5rem;
+      align-items: center;
-      padding: 0.65rem 0.85rem;
+      gap: .6rem;
-      border: 1px dashed var(--wrn-color-border);
+      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);
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
-          font-size: 0.8rem;
+          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: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
-          border-radius: var(--wrn-radius-sm, 6px);
+          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);
+          border-color: var(--wrn-field-color, var(--wrn-color-primary));
-          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
+          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);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
-          font-size: 0.8125rem;
+          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);
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
-          font-size: 0.82em;
+          font-size: 0.78rem;
-          font-weight: 600;
+          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;
+          gap: 0.125rem;
-          line-height: 1.35;
+          line-height: 1.4;
        }
        .wrn-next__choice-copy small {
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
-          font-weight: 500;
+          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;
+          padding: 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);
-          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);
+          border-radius: var(--wrn-radius);
-          background: var(--wrn-color-surface);
+          background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
-          box-shadow: var(--wrn-shadow-3);
+          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);
+          padding-bottom: 0.375rem;
-          font-size: 0.75rem;
+          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; }
  }
 }
@@ -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;
+      min-height: 2rem;
-      padding-inline: 0.8rem;
+      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);
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
-          font-size: 0.8rem;
+          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: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
-          border-radius: var(--wrn-radius-sm, 6px);
+          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);
+          border-color: var(--wrn-field-color, var(--wrn-color-primary));
-          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
+          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);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
-          font-size: 0.8125rem;
+          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);
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
-          font-size: 0.82em;
+          font-size: 0.78rem;
-          font-weight: 600;
+          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;
+          gap: 0.125rem;
-          line-height: 1.35;
+          line-height: 1.4;
        }
        .wrn-next__choice-copy small {
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
-          font-weight: 500;
+          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;
+          padding: 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);
-          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);
+          border-radius: var(--wrn-radius);
-          background: var(--wrn-color-surface);
+          background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
-          box-shadow: var(--wrn-shadow-3);
+          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);
+          padding-bottom: 0.375rem;
-          font-size: 0.75rem;
+          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; }
    }
  }
 }
@@ -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);
    }
@@ -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);
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
-          font-size: 0.8rem;
+          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: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
-          border-radius: var(--wrn-radius-sm, 6px);
+          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);
+          border-color: var(--wrn-field-color, var(--wrn-color-primary));
-          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
+          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);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
-          font-size: 0.8125rem;
+          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);
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
-          font-size: 0.82em;
+          font-size: 0.78rem;
-          font-weight: 600;
+          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;
+          gap: 0.125rem;
-          line-height: 1.35;
+          line-height: 1.4;
        }
        .wrn-next__choice-copy small {
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
-          font-weight: 500;
+          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;
+          padding: 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);
-          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);
+          border-radius: var(--wrn-radius);
-          background: var(--wrn-color-surface);
+          background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
-          box-shadow: var(--wrn-shadow-3);
+          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);
+          padding-bottom: 0.375rem;
-          font-size: 0.75rem;
+          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);
    }
  }
 }
@@ -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; }
@@ -26,16 +26,18 @@ component Kbd {
      display: inline-flex;
      align-items: center;
      justify-content: center;
-      min-width: 1.6rem;
+      min-width: 1.5rem;
-      padding: 0.15rem 0.4rem;
+      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);
+      border-radius: 0.375rem;
-      background: var(--wrn-color-surface-soft);
+      background: linear-gradient(180deg, var(--wrn-color-surface), var(--wrn-color-surface-soft, var(--wrn-color-surface)));
-      color: var(--wrn-color-text);
+      box-shadow: var(--wrn-highlight-edge, none), 0 1px 1px rgb(0 0 0 / 0.05);
-      font-family: inherit;
+      color: var(--wrn-color-text-muted, var(--wrn-color-text));
-      font-size: 0.78rem;
+      font-family: var(--wrn-font-mono, monospace);
      font-size: 0.72rem;
      font-weight: 600;
      line-height: 1;
    }
@@ -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;
+      width: 0.375rem;
-      height: 100%;
+      height: 1.75rem;
-      min-height: 1.5rem;
+      min-height: 0;
      border: 1px solid var(--wrn-color-border-strong, var(--wrn-color-border));
      border-radius: 999px;
-      background: var(--wrn-color-border);
+      background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
-      transition: background 140ms ease;
+      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%;
+      width: 1.75rem;
-      min-width: 1.5rem;
+      min-width: 0;
-      height: 2px;
+      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));
    }
  }
 }
@@ -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 button {
-    .wrn-legend i { width:.65rem; height:.65rem; border-radius:50%; }
+      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;
        }
  }
@@ -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 {
-    .wrn-list__items:is([data-variant="default"], [data-variant="divided"]) > .wrn-list__item + .wrn-list__item { border-top: 1px solid var(--wrn-color-border); }
+      overflow: hidden;
-    .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: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__item[data-variant="separated"] {
-    .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); }
+      border: 1px solid var(--wrn-color-border);
-    a.wrn-list__row:hover { background: var(--wrn-color-surface-soft); }
+      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__item-title {
-    .wrn-list__meta { flex: none; color: var(--wrn-color-text-muted); font-size: 0.75rem; }
+      overflow: hidden;
-    .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; }
+      color: var(--wrn-color-text);
-    .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; }
+      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__row:hover .wrn-list__chevron {
-    .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; }
+      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);
    }
  }
 }
@@ -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__items {
-    .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; }
+      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; }
@@ -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);
+      border-radius: var(--wrn-radius);
-      box-shadow: none;
+      box-shadow: var(--wrn-shadow-1);
      overflow: hidden;
-      transition:
+      transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
        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:
+      box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
        0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
        0 24px 64px color-mix(in srgb, black 16%, transparent);
    }
    .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);
+      transform: translateY(-2px);
-      border-color: color-mix(in srgb, var(--metric-accent) 42%, var(--wrn-color-border));
+      border-color: var(--wrn-color-border-strong, var(--wrn-color-border));
-      box-shadow: 0 24px 56px color-mix(in srgb, black 16%, transparent);
+      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));
+      border-color: color-mix(in srgb, var(--metric-accent) 45%, var(--wrn-color-border));
-      box-shadow: 0 22px 58px color-mix(in srgb, var(--metric-accent) 18%, transparent);
+      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-size: 0.8125rem;
-      font-weight: 600;
+      font-weight: 550;
      line-height: 1.4;
    }
    .wrn-metric-card__badge {
      display: inline-flex;
      align-items: center;
-      min-height: 1.45rem;
+      min-height: 1.375rem;
-      padding: 0.2rem 0.55rem;
+      padding: 0.125rem 0.5rem;
-      color: var(--metric-accent);
+      color: var(--wrn-color-primary-text, 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) 24%, transparent);
+      border: 1px solid color-mix(in srgb, var(--metric-accent) 22%, transparent);
      border-radius: 999px;
-      font-size: 0.69rem;
+      font-size: 0.6875rem;
-      font-weight: 700;
+      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;
+      width: 2.5rem;
-      height: 2.75rem;
+      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;
+      border-radius: var(--wrn-radius-sm);
-      font-size: 1.25rem;
+      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-size: clamp(1.75rem, 3vw, 2.125rem);
-      font-weight: 700;
+      font-weight: 650;
-      line-height: 0.98;
+      line-height: 1;
-      letter-spacing: -0.045em;
+      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;
+      gap: 0.375rem;
-      margin-top: 1.15rem;
+      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;
+      gap: 0.375rem;
-      color: var(--metric-accent);
+      color: var(--wrn-color-primary-text, var(--metric-accent));
-      font-size: 0.82rem;
+      font-size: 0.8125rem;
-      font-weight: 700;
+      font-weight: 600;
      line-height: 1.3;
      text-decoration: none;
-      transition:
+      transition: color 160ms ease, gap 160ms ease;
        color 160ms ease,
        gap 160ms ease;
    }
    .wrn-metric-card__action:hover {
@@ -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: 1px dashed var(--wrn-color-border-strong, var(--wrn-color-border));
-      border-radius: 0.9rem;
+      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);
    }
@@ -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);
+      background: linear-gradient(180deg, color-mix(in srgb, var(--modal-accent) 92%, white), var(--modal-accent));
-      border: 0;
+      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-size: 0.875rem;
-      font-weight: 650;
+      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;
+      outline: 2px solid color-mix(in srgb, var(--modal-accent) 80%, transparent);
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--modal-accent) 40%, 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);
+      transform: scale(0.97) translateY(8px);
-      transition: opacity 180ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
+      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;
+      padding: 1.25rem 1.25rem 0.5rem;
      border-bottom: 1px solid var(--wrn-color-border);
    }
    .wrn-modal__heading {
@@ -509,9 +509,9 @@ component Modal {
    .wrn-modal__icon {
      flex: 0 0 auto;
-      width: 1.3rem;
+      width: 1.25rem;
-      height: 1.3rem;
+      height: 1.25rem;
-      margin-top: 0.15rem;
+      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-size: 0.875rem;
-      font-weight: 650;
+      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);
+      background: linear-gradient(180deg, color-mix(in srgb, var(--modal-accent) 92%, white), var(--modal-accent));
-      border: 1px solid transparent;
+      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);
    }
    /*
@@ -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-size: 0.875rem;
-      font-weight: 600;
+      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);
+      background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
-      color: var(--nav-accent);
+      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);
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
-      color: var(--nav-accent);
+      color: var(--wrn-color-text-muted);
-      font-size: 0.72rem;
+      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);
+      border-radius: var(--wrn-radius);
-      background: var(--wrn-color-surface);
+      background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
-      box-shadow: var(--wrn-shadow-1);
+      box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
      list-style: none;
      opacity: 0;
      visibility: hidden;
@@ -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);
+      box-shadow: var(--wrn-shadow-2);
-      backdrop-filter: blur(16px);
+      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);
+      padding: 0.3rem clamp(1rem, 4vw, 3rem);
-      color: var(--wrn-color-muted);
+      color: var(--wrn-color-text-muted);
-      background: var(--wrn-color-surface-2);
+      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;
+      width: 2.25rem;
-      height: 2.5rem;
+      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;
+      min-height: 2.25rem;
-      padding: 0.65rem 0.8rem;
+      padding: 0.4rem 0.75rem;
-      border-radius: 0.65rem;
+      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;
+      min-height: 2.25rem;
-      padding: 0.65rem 0.8rem;
+      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(
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
-        in srgb,
+      box-shadow: none;
        var(--wrn-component-color, var(--wrn-color-primary)) 12%,
        transparent
      );
      box-shadow: inset 0 -2px 0 var(--wrn-component-color, var(--wrn-color-primary));
    }
    .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));
+      color: var(--wrn-color-text);
-      background: color-mix(
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
        in srgb,
        var(--wrn-component-color, var(--wrn-color-primary)) 16%,
        transparent
      );
    }
    .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;
+      padding: 0.375rem;
-      gap: 0.45rem;
+      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);
+      background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
-      box-shadow: 0 18px 48px rgb(15 23 42 / 0.16);
+      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:
+      transition: opacity 180ms ease, transform 180ms cubic-bezier(0.22, 1, 0.36, 1), display 180ms allow-discrete;
        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;
+      padding: 0.5rem 0.625rem 0.25rem;
-      font-size: 0.7rem;
+      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;
+      min-height: 2.5rem;
-      padding: 0.65rem;
+      padding: 0.5rem 0.625rem;
      align-items: flex-start;
-      gap: 0.65rem;
+      gap: 0.625rem;
-      border-radius: var(--wrn-radius-sm, 6px);
+      border-radius: calc(var(--wrn-radius-sm) - 2px);
-      font-size: 0.8rem;
+      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);
+      color: var(--wrn-color-text-muted);
-      font-size: 0.7rem;
+      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;
+      width: 2.5rem;
-      height: 2.75rem;
+      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;
        }
  }
@@ -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);
    }
@@ -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;
+      gap: 0.3rem;
-      min-width: 2.25rem;
+      min-width: 2.125rem;
      min-height: 2.125rem;
      justify-content: center;
-      padding: 0.4rem 0.6rem;
+      padding: 0 0.55rem;
-      border: 1px solid var(--wrn-color-border);
+      border: 1px solid transparent;
      border-radius: var(--wrn-radius-sm);
-      background: var(--wrn-color-surface);
+      background: transparent;
-      color: var(--wrn-color-text);
+      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);
+      border-color: color-mix(in srgb, var(--pagination-accent) 82%, black);
-      background: var(--pagination-accent);
+      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);
    }
  }
 }
@@ -140,21 +140,21 @@ component PinInput {
    .wrn-next__pin-heading legend {
      padding: 0;
-      font-size: 0.82em;
+      font-size: 0.8125rem;
-      font-weight: 700;
+      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-size: 0.75rem;
-      font-weight: 750;
+      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;
+      flex: 0 1 2.75rem;
-      width: 2.5rem;
+      width: 2.75rem;
-      height: var(--wrn-control-height, 2.5rem);
+      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:
+      transition: border-color var(--wrn-motion-base) var(--wrn-ease-standard), box-shadow var(--wrn-motion-base) var(--wrn-ease-standard);
        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);
    }
    .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);
+      color: var(--wrn-color-border-strong, var(--wrn-color-muted));
-      font-size: 1.1rem;
+      font-size: 1rem;
-      font-weight: 800;
+      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));
+      border-color: color-mix(in srgb, var(--wrn-color-success) 60%, var(--wrn-color-border));
-      background: color-mix(in srgb, var(--wrn-component-color) 7%, var(--wrn-color-bg));
+      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;
        }
  }
@@ -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);
+      color: var(--wrn-color-text);
-      background: var(--popover-soft);
+      background: var(--wrn-color-surface);
-      border-color: color-mix(in srgb, var(--popover-accent) 38%, var(--wrn-color-border));
+      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:
+      background: var(--wrn-color-surface-raised);
-        linear-gradient(145deg, color-mix(in srgb, var(--popover-accent) 5%, transparent), transparent 62%),
+      border: 1px solid var(--wrn-color-border);
-        color-mix(in srgb, var(--wrn-color-surface-raised) 97%, transparent);
+      border-radius: var(--wrn-radius);
-      border: 1px solid color-mix(in srgb, var(--popover-accent) 18%, var(--wrn-color-border));
+      box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
      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);
    }
    .wrn-popover[data-width="sm"] .wrn-popover__panel {
@@ -364,10 +361,8 @@ component Popover {
    }
    .wrn-popover[data-variant="soft"] .wrn-popover__panel {
-      background:
+      background: color-mix(in srgb, var(--popover-accent) 4%, var(--wrn-color-surface-raised));
-        linear-gradient(145deg, var(--popover-soft), transparent 70%),
+      box-shadow: var(--wrn-shadow-3);
        var(--wrn-color-surface-raised);
      box-shadow: 0 18px 48px color-mix(in srgb, black 16%, transparent);
    }
    .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;
+      width: 0.625rem;
-      height: 0.7rem;
+      height: 0.625rem;
      background: inherit;
-      border-top: 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 color-mix(in srgb, var(--popover-accent) 18%, 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;
+      gap: 0.75rem;
-      padding: 1rem 1rem 0.8rem;
+      padding: 0.875rem 0.875rem 0.625rem;
      border-bottom: 1px solid var(--wrn-color-border);
    }
    .wrn-popover__heading {
@@ -458,13 +452,14 @@ component Popover {
    }
    .wrn-popover__heading-copy h3 {
-      font-size: 0.9rem;
+      font-size: 0.875rem;
-      font-weight: 650;
+      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;
+      gap: 0.4rem;
-      min-height: 2.35rem;
+      min-height: 2rem;
-      padding: 0.58rem 0.8rem;
+      padding: 0 0.75rem;
      color: var(--popover-contrast);
-      background: var(--popover-accent);
+      background: linear-gradient(180deg, color-mix(in srgb, var(--popover-accent) 92%, white), var(--popover-accent));
-      border: 0;
+      border: 1px solid color-mix(in srgb, var(--popover-accent) 82%, black);
-      border-radius: 0.7rem;
+      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-size: 0.8125rem;
-      font-weight: 650;
+      font-weight: 600;
      text-decoration: none;
      cursor: pointer;
    }
@@ -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;
        }
  }
@@ -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;
        }
  }
@@ -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);
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
-      box-shadow: inset 0 0 0 1px var(--wrn-color-border);
+      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;
+      width: 1.125rem;
-      height: 1.25rem;
+      height: 1.125rem;
-      border: 3px solid var(--wrn-field-color);
+      border: 1px solid rgb(0 0 0 / 0.12);
      border-radius: 50%;
-      background: var(--wrn-color-surface);
+      background: #fff;
-      box-shadow: var(--wrn-shadow-1);
+      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);
+      color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
-      font-size: 0.78em;
+      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;
+      width: 2rem;
-      height: 2.35rem;
+      height: 2rem;
      flex: 0 0 auto;
      place-items: center;
      border: 1px solid var(--wrn-color-border);
-      border-radius: 50%;
+      border-bottom-color: var(--wrn-color-border-strong, var(--wrn-color-border));
-      background: var(--wrn-color-surface);
+      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);
+      border-color: var(--wrn-color-border-strong, var(--wrn-color-border));
-      color: var(--wrn-field-color);
+      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);
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
-          font-size: 0.8rem;
+          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: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
-          border-radius: var(--wrn-radius-sm, 6px);
+          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);
+          border-color: var(--wrn-field-color, var(--wrn-color-primary));
-          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
+          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);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
-          font-size: 0.8125rem;
+          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);
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
-          font-size: 0.82em;
+          font-size: 0.78rem;
-          font-weight: 600;
+          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;
+          gap: 0.125rem;
-          line-height: 1.35;
+          line-height: 1.4;
        }
        .wrn-next__choice-copy small {
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
-          font-weight: 500;
+          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;
+          padding: 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);
-          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);
+          border-radius: var(--wrn-radius);
-          background: var(--wrn-color-surface);
+          background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
-          box-shadow: var(--wrn-shadow-3);
+          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);
+          padding-bottom: 0.375rem;
-          font-size: 0.75rem;
+          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);
    }
  }
 }
@@ -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; }
  }
 }
@@ -112,9 +112,10 @@ component Scrollspy {
    .wrn-scrollspy__heading {
      margin: 0 0 0.5rem;
-      color: var(--wrn-color-text-muted);
+      color: var(--wrn-color-text-subtle, var(--wrn-color-text-muted));
-      font-size: 0.72rem;
+      font-family: var(--wrn-font-mono, monospace);
-      font-weight: 700;
+      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;
    }
@@ -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;
+      left: 0.875rem;
-      width: 1.25rem;
+      width: 1.125rem;
-      height: 1.25rem;
+      height: 1.125rem;
      color: var(--wrn-color-input-placeholder);
      pointer-events: none;
    }
    .wrn-search-box__input {
      width: 100%;
-      height: 3rem;
+      height: 2.75rem;
-      padding: 0 6rem 0 3rem;
+      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; }
@@ -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);
    }
@@ -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;
+      margin: 0.875rem 0.625rem 0.375rem;
-      color: var(--wrn-color-text-muted);
+      color: var(--wrn-color-text-subtle, var(--wrn-color-text-muted));
-      font-size: 0.7rem;
+      font-family: var(--wrn-font-mono, monospace);
-      font-weight: 700;
+      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;
+      min-height: 2rem;
-      border-radius: var(--wrn-radius-sm);
+      padding: 0.375rem 0.625rem;
      border-radius: calc(var(--wrn-radius-sm) - 1px);
      color: var(--wrn-color-text-muted);
-      font-size: 0.88rem;
+      font-size: 0.8125rem;
-      font-weight: 600;
+      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);
+      background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
-      color: var(--sidebar-accent);
+      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);
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
-      color: var(--sidebar-accent);
+      color: var(--wrn-color-text-muted);
-      font-size: 0.72rem;
+      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));
    }
  }
 }
@@ -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:
+      box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
        0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
        0 30px 76px color-mix(in srgb, black 18%, transparent);
    }
    .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;
    }
@@ -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: 1px dashed var(--wrn-color-border-strong, var(--wrn-color-border));
-      border-radius: 0.9rem;
+      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-radius="xl"] .wrn-stats-bar__surface {
-    .wrn-stats-bar[data-shadow="sm"] .wrn-stats-bar__surface { box-shadow: 0 10px 30px rgb(15 23 42 / 0.05); }
+      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:
+      background: var(--wrn-color-surface-raised);
-        linear-gradient(
+      border: 1px solid var(--wrn-color-border);
-          135deg,
+      border-radius: var(--wrn-radius-lg);
-          color-mix(in srgb, var(--stats-accent) 7%, transparent),
+      box-shadow: var(--wrn-shadow-2);
          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);
    }
    .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-size: 0.8125rem;
-      font-weight: 600;
+      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;
+      width: 2.5rem;
-      height: 2.65rem;
+      height: 2.5rem;
      color: var(--item-accent);
-      background: color-mix(in srgb, var(--item-accent) 11%, transparent);
+      background: color-mix(in srgb, var(--item-accent) 10%, var(--wrn-color-surface));
-      border-radius: 0.85rem;
+      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;
+      margin-top: 0.75rem;
-      padding: 0.25rem 0.5rem;
+      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 {
@@ -314,25 +314,31 @@ component Stepper {
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
-      width: 2rem;
+      width: 1.75rem;
-      height: 2rem;
+      height: 1.75rem;
-      border: 1px solid var(--wrn-color-border);
+      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;
+      color: var(--wrn-color-text-muted);
-      font-weight: 700;
+      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);
+      background: var(--wrn-color-surface);
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--stepper-accent) 22%, transparent);
+      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;
+      margin: 0 0 0.25rem;
-      font-size: 0.95rem;
+      font-size: 0.9375rem;
-      font-weight: 700;
+      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);
+      border-color: color-mix(in srgb, var(--stepper-accent) 82%, black);
-      background: var(--stepper-accent);
+      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;
    }
  }
 }
@@ -257,8 +257,8 @@ component StrongPassword {
    }
    .wrn-next--strong-password > label {
-      font-size: 0.82em;
+      font-size: 0.8125rem;
-      font-weight: 700;
+      font-weight: 600;
    }
    .wrn-next__strong-password-anchor {
@@ -267,18 +267,17 @@ component StrongPassword {
    .wrn-next--strong-password input {
      width: 100%;
-      min-height: 3rem;
+      min-height: var(--wrn-control-height, 2.5rem);
-      padding: 0.75rem 3rem 0.75rem 2.75rem;
+      padding: 0.55rem 3rem 0.55rem 2.5rem;
-      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:
+      transition: border-color 160ms ease, box-shadow 160ms ease;
        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);
+      color: var(--wrn-color-text);
-      background: color-mix(in srgb, var(--wrn-component-color) 10%, transparent);
+      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);
+      color: var(--wrn-color-text-muted);
-      font-size: 0.72em;
+      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);
+      background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
-      box-shadow: var(--wrn-shadow-2);
+      box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
-      transform: translateY(-0.35rem);
+      transform: translateY(-0.25rem);
-      transition:
+      transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
        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);
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
-          font-size: 0.8rem;
+          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: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
-          border-radius: var(--wrn-radius-sm, 6px);
+          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);
+          border-color: var(--wrn-field-color, var(--wrn-color-primary));
-          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
+          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);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
-          font-size: 0.8125rem;
+          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);
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
-          font-size: 0.82em;
+          font-size: 0.78rem;
-          font-weight: 600;
+          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;
+          gap: 0.125rem;
-          line-height: 1.35;
+          line-height: 1.4;
        }
        .wrn-next__choice-copy small {
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
-          font-weight: 500;
+          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;
+          padding: 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);
-          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);
+          border-radius: var(--wrn-radius);
-          background: var(--wrn-color-surface);
+          background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
-          box-shadow: var(--wrn-shadow-3);
+          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);
+          padding-bottom: 0.375rem;
-          font-size: 0.75rem;
+          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"],
@@ -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;
+      max-height: 11rem;
-      margin-top: 0.4rem;
+      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;
+      grid-column: 1 / -1;
-      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: 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);
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
-          font-size: 0.8rem;
+          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: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
-          border-radius: var(--wrn-radius-sm, 6px);
+          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);
+          border-color: var(--wrn-field-color, var(--wrn-color-primary));
-          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
+          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);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
-          font-size: 0.8125rem;
+          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);
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
-          font-size: 0.82em;
+          font-size: 0.78rem;
-          font-weight: 600;
+          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;
+          gap: 0.125rem;
-          line-height: 1.35;
+          line-height: 1.4;
        }
        .wrn-next__choice-copy small {
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
-          font-weight: 500;
+          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;
+          padding: 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);
-          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);
+          border-radius: var(--wrn-radius);
-          background: var(--wrn-color-surface);
+          background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
-          box-shadow: var(--wrn-shadow-3);
+          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);
+          padding-bottom: 0.375rem;
-          font-size: 0.75rem;
+          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));
    }
  }
 }
@@ -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}
+                {#if item.date || item.time || item.meta}
-                  <time class="wrn-timeline__time">{item.date || item.meta}</time>
+                  <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;
+      position: absolute;
-      align-items: center; justify-content: center; border: 4px solid var(--wrn-color-background);
+      z-index: 1;
-      border-radius: 50%; color: var(--wrn-color-on-primary); background: var(--wrn-timeline-accent); box-shadow: var(--wrn-shadow-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__number {
-    .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; }
+      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__item-title {
-    .wrn-timeline__subtitle { margin-top: 0.25rem; color: var(--wrn-color-primary); font-size: 0.875rem; font-weight: 500; }
+      color: var(--wrn-color-text);
-    .wrn-timeline__time { flex: none; color: var(--wrn-color-text-muted); font-size: 0.875rem; }
+      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; }
    }
  }
 }
@@ -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;
+      border-radius: var(--wrn-radius);
-      box-shadow: 0 18px 40px color-mix(in srgb, black 28%, transparent);
+      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-size: 0.875rem;
-      font-weight: 650;
+      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;
+      padding: 0 0.625rem;
-      color: var(--toast-accent, var(--wrn-color-primary));
+      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 color-mix(in srgb, var(--toast-accent, var(--wrn-color-primary)) 40%, transparent);
+      border: 1px solid var(--wrn-color-border);
-      border-radius: 0.55rem;
+      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 {
@@ -310,32 +310,31 @@ component ToggleCount {
    .wrn-next__toggle-count-segmented {
      display: inline-flex;
-      gap: 0.2rem;
+      gap: 0.125rem;
-      padding: 0.2rem;
+      padding: 0.1875rem;
-      border-radius: calc(var(--wrn-radius-sm) + 0.15rem);
+      border-radius: calc(var(--wrn-radius-sm) + 0.1875rem);
-      background: var(--wrn-color-surface-2);
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
-      box-shadow: inset 0 0 0 1px var(--wrn-color-border);
+      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;
+      min-height: 2rem;
-      padding: 0.45rem 0.8rem;
+      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-size: 0.8125rem;
-      font-weight: 700;
+      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:
+      box-shadow: 0 0 0 1px var(--wrn-color-border), var(--wrn-shadow-1);
        var(--wrn-shadow-1),
        inset 0 -2px var(--wrn-toggle-count-accent);
    }
    .wrn-next__toggle-count-segmented button:focus-visible,
@@ -366,14 +365,15 @@ component ToggleCount {
    .wrn-next__toggle-count-switch {
      position: relative;
-      width: 2.65rem;
+      width: 2.375rem;
-      height: 1.45rem;
+      height: 1.375rem;
-      padding: 0.15rem;
+      padding: 0.125rem;
-      border: 1px solid var(--wrn-color-border);
+      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);
+      background: #fff;
-      box-shadow: var(--wrn-shadow-1);
+      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-fast) var(--wrn-ease-standard);
+      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;
+      background: #fff;
-      transform: translateX(1.15rem);
+      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;
        }
  }
@@ -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);
+      color: var(--wrn-color-primary-text, var(--wrn-component-color));
-      font-size: 0.75rem;
+      font-size: 0.78rem;
-      font-weight: 500;
+      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-size: 0.8125rem;
-      font-weight: 750;
+      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:
+      transition: border-color var(--wrn-motion-base) var(--wrn-ease-standard), box-shadow var(--wrn-motion-base) var(--wrn-ease-standard);
        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);
+      color: var(--wrn-color-text);
-      background: color-mix(in srgb, var(--wrn-component-color) 10%, transparent);
+      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;
+      gap: 0.5rem;
-      color: var(--wrn-color-muted);
+      color: var(--wrn-color-text-muted);
-      font-size: 0.78em;
+      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);
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
-          font-size: 0.8rem;
+          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: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
-          border-radius: var(--wrn-radius-sm, 6px);
+          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);
+          border-color: var(--wrn-field-color, var(--wrn-color-primary));
-          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
+          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);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
-          font-size: 0.8125rem;
+          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);
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
-          font-size: 0.82em;
+          font-size: 0.78rem;
-          font-weight: 600;
+          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;
+          gap: 0.125rem;
-          line-height: 1.35;
+          line-height: 1.4;
        }
        .wrn-next__choice-copy small {
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
-          font-weight: 500;
+          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;
+          padding: 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);
-          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);
+          border-radius: var(--wrn-radius);
-          background: var(--wrn-color-surface);
+          background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
-          box-shadow: var(--wrn-shadow-3);
+          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);
+          padding-bottom: 0.375rem;
-          font-size: 0.75rem;
+          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"],
@@ -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 {
-    .wrn-tree-view__node:hover, button.wrn-tree-view__toggle:hover { background: var(--wrn-color-surface-2); }
+      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); }
  }
 }
@@ -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));
+      border-color: color-mix(in srgb, var(--wrn-alert-color) 24%, var(--wrn-color-border));
-      background: var(--wrn-alert-soft);
+      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:
+      box-shadow: var(--wrn-shadow-2);
        0 2px 6px color-mix(in srgb, #000 10%, transparent),
        0 12px 28px color-mix(in srgb, #000 18%, transparent);
    }
    .wrn-next--alert[data-shadow="lg"] {
-      box-shadow:
+      box-shadow: var(--wrn-shadow-3);
        0 4px 10px color-mix(in srgb, #000 12%, transparent),
        0 20px 48px color-mix(in srgb, #000 24%, transparent);
    }
    .wrn-next--alert[data-color="secondary"] {
@@ -298,13 +296,19 @@ component Alert {
    .wrn-next__alert-icon {
      display: inline-grid;
-      width: 1.25rem;
+      width: 1.75rem;
-      height: 1.25rem;
+      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;
+      color: var(--wrn-color-text-muted, var(--wrn-color-muted));
-      font-size: 0.8rem;
+      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;
        }
  }
@@ -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;
+      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) 58%, var(--wrn-color-border));
+      border: 1px solid color-mix(in srgb, var(--wrn-avatar-color) 22%, transparent);
      border-radius: inherit;
-      background: var(--wrn-avatar-color);
+      background: color-mix(in srgb, var(--wrn-avatar-color) 14%, var(--wrn-color-surface));
-      box-shadow:
+      box-shadow: 0 0 0 2px var(--wrn-color-surface), var(--wrn-shadow-1);
        0 0 0 2px var(--wrn-color-bg),
        0 5px 14px rgb(0 0 0 / 0.16);
    }
    .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-size: calc(var(--wrn-avatar-size) * 0.36);
-      font-weight: 750;
+      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;
        }
  }
@@ -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;
+      padding: 0.2rem 0.55rem;
-      color: white;
+      color: var(--wrn-color-primary-contrast, #fff);
-      border: 1px solid var(--wrn-badge-color);
+      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;
+      border-color: color-mix(in srgb, var(--wrn-badge-color) 22%, transparent);
-      background: color-mix(in srgb, var(--wrn-badge-color) 15%, var(--wrn-color-surface));
+      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;
        }
  }
@@ -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);
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
-          font-size: 0.8rem;
+          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: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
-          border-radius: var(--wrn-radius-sm, 6px);
+          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);
+          border-color: var(--wrn-field-color, var(--wrn-color-primary));
-          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
+          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);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
-          font-size: 0.8125rem;
+          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);
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
-          font-size: 0.82em;
+          font-size: 0.78rem;
-          font-weight: 600;
+          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;
+          gap: 0.125rem;
-          line-height: 1.35;
+          line-height: 1.4;
        }
        .wrn-next__choice-copy small {
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
-          font-weight: 500;
+          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;
+          padding: 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);
-          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);
+          border-radius: var(--wrn-radius);
-          background: var(--wrn-color-surface);
+          background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
-          box-shadow: var(--wrn-shadow-3);
+          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);
+          padding-bottom: 0.375rem;
-          font-size: 0.75rem;
+          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"],
@@ -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);
+      color: var(--wrn-color-danger-text, var(--wrn-color-danger));
-      font-size: 0.8rem;
+      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: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
-      border-radius: var(--wrn-radius-sm, 6px);
+      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);
+      border-color: var(--wrn-field-color, var(--wrn-color-primary));
-      box-shadow:
+      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);
        inset 0 1px 2px rgb(0 0 0 / 0.04),
        0 0 0 3px color-mix(in srgb, 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);
+      color: var(--wrn-color-danger-text, var(--wrn-color-danger));
-      font-size: 0.82em;
+      font-size: 0.78rem;
-      font-weight: 600;
+      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;
+      gap: 0.125rem;
-      line-height: 1.35;
+      line-height: 1.4;
    }
    .wrn-next__choice-copy small {
-      color: var(--wrn-color-muted);
+      color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
-      font-weight: 500;
+      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;
+      padding: 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);
-      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);
+      border-radius: var(--wrn-radius);
-      background: var(--wrn-color-surface);
+      background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
-      box-shadow: var(--wrn-shadow-3);
+      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);
+      padding-bottom: 0.375rem;
-      font-size: 0.75rem;
+      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"],
@@ -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-bar {
-    .wrn-progress-component__track::-webkit-progress-value { background: var(--wrn-progress-color); }
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
-    .wrn-progress-component__track::-moz-progress-bar { background: var(--wrn-progress-color); }
+      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));
    }
  }
 }
@@ -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);
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
-          font-size: 0.8rem;
+          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: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
-          border-radius: var(--wrn-radius-sm, 6px);
+          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);
+          border-color: var(--wrn-field-color, var(--wrn-color-primary));
-          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
+          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);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
-          font-size: 0.8125rem;
+          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);
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
-          font-size: 0.82em;
+          font-size: 0.78rem;
-          font-weight: 600;
+          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;
+          gap: 0.125rem;
-          line-height: 1.35;
+          line-height: 1.4;
        }
        .wrn-next__choice-copy small {
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
-          font-weight: 500;
+          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;
+          padding: 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);
-          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);
+          border-radius: var(--wrn-radius);
-          background: var(--wrn-color-surface);
+          background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
-          box-shadow: var(--wrn-shadow-3);
+          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);
+          padding-bottom: 0.375rem;
-          font-size: 0.75rem;
+          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"],
@@ -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);
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
-          font-size: 0.8rem;
+          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: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
-          border-radius: var(--wrn-radius-sm, 6px);
+          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);
+          border-color: var(--wrn-field-color, var(--wrn-color-primary));
-          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
+          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);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
-          font-size: 0.8125rem;
+          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);
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
-          font-size: 0.82em;
+          font-size: 0.78rem;
-          font-weight: 600;
+          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;
+          gap: 0.125rem;
-          line-height: 1.35;
+          line-height: 1.4;
        }
        .wrn-next__choice-copy small {
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
-          font-weight: 500;
+          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;
+          padding: 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);
-          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);
+          border-radius: var(--wrn-radius);
-          background: var(--wrn-color-surface);
+          background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
-          box-shadow: var(--wrn-shadow-3);
+          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);
+          padding-bottom: 0.375rem;
-          font-size: 0.75rem;
+          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"],
@@ -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}">
+    <div class="wrn-skeleton-component {class}" data-color="{color}" data-size="{size}" role="status" aria-label="{label}" aria-busy="true">
-      {#each Array(lines).fill(0) as line}<span class="wrn-skeleton-component__line"></span>{/each}
+      <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-color="primary"] {
-    .wrn-skeleton-component[data-size="xs"] { gap: 0.35rem; }
+      --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-size="xl"] { --wrn-skeleton-line: 0.75rem; gap: 1.25rem; }
    .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__line {
+    .wrn-skeleton-component__head {
-      height: 0.8rem;
+      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%;
+    .wrn-skeleton-component__heading,
-      animation: wrn-skeleton-component-shimmer 1.4s infinite;
+    .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; }
+      from { background-position: 150% 0, 0 0; }
-      to { background-position: -200% 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; }
    }
  }
 }
@@ -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); } }
@@ -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;
+      flex: 0 0 auto;
-      height: 1.4rem;
+      width: 2.375rem;
-      border: 1px solid var(--wrn-color-border);
+      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);
+      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
-      transition: background var(--wrn-motion-fast) var(--wrn-ease-standard);
+      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;
+      top: 50%;
-      left: 0.15rem;
+      left: 0.125rem;
-      width: 1rem;
+      width: 1.0625rem;
-      height: 1rem;
+      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(1rem);
      transform: translateX(1.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);
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
-          font-size: 0.8rem;
+          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: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
-          border-radius: var(--wrn-radius-sm, 6px);
+          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);
+          border-color: var(--wrn-field-color, var(--wrn-color-primary));
-          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
+          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);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
-          font-size: 0.8125rem;
+          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);
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
-          font-size: 0.82em;
+          font-size: 0.78rem;
-          font-weight: 600;
+          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;
+          gap: 0.125rem;
-          line-height: 1.35;
+          line-height: 1.4;
        }
        .wrn-next__choice-copy small {
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
-          font-weight: 500;
+          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;
+          padding: 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);
-          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);
+          border-radius: var(--wrn-radius);
-          background: var(--wrn-color-surface);
+          background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
-          box-shadow: var(--wrn-shadow-3);
+          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);
+          padding-bottom: 0.375rem;
-          font-size: 0.75rem;
+          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"],
@@ -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);
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
-          font-size: 0.8rem;
+          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: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
-          border-radius: var(--wrn-radius-sm, 6px);
+          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);
+          border-color: var(--wrn-field-color, var(--wrn-color-primary));
-          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
+          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);
+          background: var(--wrn-color-input-background, var(--wrn-color-surface));
-          font-size: 0.8125rem;
+          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);
+          color: var(--wrn-color-danger-text, var(--wrn-color-danger));
-          font-size: 0.82em;
+          font-size: 0.78rem;
-          font-weight: 600;
+          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;
+          gap: 0.125rem;
-          line-height: 1.35;
+          line-height: 1.4;
        }
        .wrn-next__choice-copy small {
-          color: var(--wrn-color-muted);
+          color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
-          font-weight: 500;
+          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;
+          padding: 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);
-          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);
+          border-radius: var(--wrn-radius);
-          background: var(--wrn-color-surface);
+          background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
-          box-shadow: var(--wrn-shadow-3);
+          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);
+          padding-bottom: 0.375rem;
-          font-size: 0.75rem;
+          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"],
@@ -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;
+      padding: 0.45rem 0.65rem;
-      color: white;
+      color: #f4f5f7;
-      background: color-mix(in srgb, black 88%, var(--tooltip-accent) 12%);
+      background: #16181d;
-      border: 1px solid color-mix(in srgb, white 12%, transparent);
+      border: 1px solid rgb(255 255 255 / 0.08);
-      border-radius: 0.65rem;
+      border-radius: var(--wrn-radius-sm, 0.5rem);
-      box-shadow: 0 14px 38px color-mix(in srgb, black 28%, transparent);
+      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.73rem;
+      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);
+      background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
-      border-color: color-mix(in srgb, var(--tooltip-accent) 24%, var(--wrn-color-border));
+      border-color: var(--wrn-color-border);
      box-shadow: var(--wrn-shadow-2);
    }
    .wrn-tooltip[data-variant="light"] .wrn-tooltip__content {
@@ -1,6 +1,6 @@
 {
  "name": "@wrnexus/ui",
-  "version": "0.8.86",
+  "version": "0.8.87",
  "private": true,
  "type": "module",
  "main": "src/index.ts",
@@ -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-size: 0.8125rem;
-      font-weight: 700;
+      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);
+      color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
-      font-size: 0.72em;
+      font-size: 0.75rem;
    }
    .wrn-next__select-search input,
    .wrn-next--advanced-select select {
      width: 100%;
-      min-height: 2.6em;
+      min-height: 2.25rem;
-      padding: 0.62em 0.75em;
+      padding: 0.45em 0.75em;
-      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);
+      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: 0;
-      outline-offset: 1px;
+      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-size: 0.78rem;
-      font-weight: 700;
+      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;
+      padding: 0.45em 2.75em 0.45em 0.85em;
-      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.04);
      font: inherit;
      font-size: 0.875rem;
      text-align: left;
      cursor: pointer;
-      transition:
+      transition: border-color var(--wrn-motion-base) var(--wrn-ease-standard), box-shadow var(--wrn-motion-base) var(--wrn-ease-standard);
        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;
+      gap: 0.375rem;
-      padding: 0.5rem;
+      padding: 0.3rem;
      overflow: hidden;
      border: 1px solid var(--wrn-color-border);
-      border-radius: var(--wrn-radius-sm);
+      border-radius: var(--wrn-radius);
-      background: var(--wrn-color-surface);
+      background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
-      box-shadow: 0 1.25rem 3rem rgb(0 0 0 / 18%);
+      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;
+      padding: 0.5rem 0.625rem 0.25rem;
-      color: var(--wrn-component-color);
+      color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
-      font-size: 0.68em;
+      font-family: var(--wrn-font-mono, monospace);
-      font-weight: 800;
+      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;
+      gap: 0.625rem;
-      padding: 0.58rem 2.5rem 0.58rem 0.7rem;
+      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-size: 0.8125rem;
-      font-weight: 650;
+      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);
+      color: var(--wrn-color-text-muted);
-      font-size: 0.78em;
+      font-size: 0.8125rem;
      text-align: center;
    }
    .wrn-next__create-option,
    .wrn-next__load-more {
-      width: 100%;
+      width: calc(100% + 0.6rem);
-      padding: 0.65rem;
+      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 {
@@ -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.querySelector('path.wrn-chart__line')).not.toBeNull();
- expect(dom.querySelectorAll('.wrn-chart__point-labels button').length).toBe(2);
+ expect(dom.querySelectorAll('.wrn-chart__hit').length).toBe(2);
 });
 test("calendar Done and outside dismiss both close the panel", async () => {
@@ -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);
+  expect(root.querySelectorAll("svg path.wrn-chart__bar")).toHaveLength(2);
-  (root.querySelector("svg rect") as SVGElement).dispatchEvent(
+  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();