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>

packages/ui/components/skeleton.wrn

@@ -7,42 +7,86 @@ component Skeleton {
     class: string = ""
   }
   view {
-    <div class="wrn-skeleton-component {class}" data-color="{color}" data-size="{size}" role="status" aria-label="{label}">
-      {#each Array(lines).fill(0) as line}<span class="wrn-skeleton-component__line"></span>{/each}
+    <div class="wrn-skeleton-component {class}" data-color="{color}" data-size="{size}" role="status" aria-label="{label}" aria-busy="true">
+      <div class="wrn-skeleton-component__head" aria-hidden="true">
+        <span class="wrn-skeleton-component__avatar"></span>
+        <span class="wrn-skeleton-component__heading">
+          <span class="wrn-skeleton-component__bar wrn-skeleton-component__bar--title"></span>
+          <span class="wrn-skeleton-component__bar wrn-skeleton-component__bar--meta"></span>
+        </span>
+      </div>
+      <div class="wrn-skeleton-component__body" aria-hidden="true">
+        {#each Array(lines).fill(0) as line}<span class="wrn-skeleton-component__line wrn-skeleton-component__bar"></span>{/each}
+      </div>
     </div>
   }
 
   style {
     .wrn-skeleton-component {
-      --wrn-skeleton-highlight: var(--wrn-color-border);
+      --wrn-skeleton-base: color-mix(in srgb, var(--wrn-color-text) 11%, var(--wrn-color-surface));
+      --wrn-skeleton-shine: color-mix(in srgb, var(--wrn-color-text) 3%, var(--wrn-color-surface));
+      --wrn-skeleton-line: 0.625rem;
       display: grid;
       width: min(100%, 24rem);
-      gap: 0.55rem;
+      gap: 1rem;
     }
-
-    .wrn-skeleton-component[data-size="xs"] { gap: 0.35rem; }
+    .wrn-skeleton-component[data-color="primary"] {
+      --wrn-skeleton-base: color-mix(in srgb, var(--wrn-color-primary) 17%, var(--wrn-color-surface));
+      --wrn-skeleton-shine: color-mix(in srgb, var(--wrn-color-primary) 4%, var(--wrn-color-surface));
+    }
+    .wrn-skeleton-component[data-color="secondary"] {
+      --wrn-skeleton-base: color-mix(in srgb, var(--wrn-color-secondary) 17%, var(--wrn-color-surface));
+      --wrn-skeleton-shine: color-mix(in srgb, var(--wrn-color-secondary) 4%, var(--wrn-color-surface));
+    }
+    .wrn-skeleton-component[data-size="xs"],
+    .wrn-skeleton-component[data-size="sm"] { --wrn-skeleton-line: 0.5rem; gap: 0.75rem; }
     .wrn-skeleton-component[data-size="lg"],
-    .wrn-skeleton-component[data-size="xl"] { gap: 0.75rem; }
-    .wrn-skeleton-component[data-color="secondary"] { --wrn-skeleton-highlight: var(--wrn-color-secondary-soft); }
-    .wrn-skeleton-component[data-color="primary"] { --wrn-skeleton-highlight: var(--wrn-color-primary-soft); }
+    .wrn-skeleton-component[data-size="xl"] { --wrn-skeleton-line: 0.75rem; gap: 1.25rem; }
 
-    .wrn-skeleton-component__line {
-      height: 0.8rem;
+    .wrn-skeleton-component__head {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+    }
+    .wrn-skeleton-component__avatar {
+      width: calc(var(--wrn-skeleton-line) * 4);
+      height: calc(var(--wrn-skeleton-line) * 4);
+      flex: none;
       border-radius: 999px;
-      background: linear-gradient(90deg, var(--wrn-color-surface-2), var(--wrn-skeleton-highlight), var(--wrn-color-surface-2));
-      background-size: 200% 100%;
-      animation: wrn-skeleton-component-shimmer 1.4s infinite;
+    }
+    .wrn-skeleton-component__heading,
+    .wrn-skeleton-component__body {
+      display: grid;
+      flex: 1;
+      min-width: 0;
+      gap: calc(var(--wrn-skeleton-line) * 0.8);
     }
 
-    .wrn-skeleton-component__line:last-child { width: 68%; }
+    /* Every block shares one shimmer; background-attachment: fixed keeps the
+       sweep continuous across blocks instead of restarting per bar. */
+    .wrn-skeleton-component__avatar,
+    .wrn-skeleton-component__bar {
+      display: block;
+      background:
+        linear-gradient(100deg, transparent 30%, var(--wrn-skeleton-shine) 50%, transparent 70%) 0 0 / 200% 100% fixed,
+        var(--wrn-skeleton-base);
+      animation: wrn-skeleton-component-shimmer 1.6s ease-in-out infinite;
+    }
+    .wrn-skeleton-component__bar {
+      height: var(--wrn-skeleton-line);
+      border-radius: 999px;
+    }
+    .wrn-skeleton-component__bar--title { width: 55%; height: calc(var(--wrn-skeleton-line) * 1.25); }
+    .wrn-skeleton-component__bar--meta { width: 32%; }
+    .wrn-skeleton-component__line:last-child:not(:first-child) { width: 64%; }
 
     @keyframes wrn-skeleton-component-shimmer {
-      from { background-position: 200% 0; }
-      to { background-position: -200% 0; }
+      from { background-position: 150% 0, 0 0; }
+      to { background-position: -50% 0, 0 0; }
     }
-
     @media (prefers-reduced-motion: reduce) {
-      .wrn-skeleton-component__line { animation: none; }
+      .wrn-skeleton-component__avatar,
+      .wrn-skeleton-component__bar { animation: none; }
     }
   }
 }