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>

examples/component-showcase/app/pages/components/drawer.wrn

@@ -179,6 +179,44 @@ page DrawerDetail {
   <div data-slot="footer">
     <div class="showcase-slot">footer slot</div>
   </div>
+&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">