Refresh UI components and showcase; release updated framework packages

packages/ui/ui.css

@@ -127,9 +127,9 @@
   letter-spacing: -0.04em;
 }
 .wrn-type--heading {
-  font-size: clamp(1.75rem, 4vw, 3rem);
+  font-size: clamp(1.25rem, 2vw, 1.75rem);
   line-height: 1.1;
-  font-weight: 750;
+  font-weight: 600;
   letter-spacing: -0.025em;
 }
 .wrn-type--lead {
@@ -337,8 +337,8 @@
  */
 :root {
   --wrn-motion-fast: 120ms;
-  --wrn-motion-base: 200ms;
-  --wrn-motion-slow: 320ms;
+  --wrn-motion-base: 160ms;
+  --wrn-motion-slow: 240ms;
   --wrn-ease-standard: cubic-bezier(0.2, 0, 0, 1);
   --wrn-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
 }
@@ -428,9 +428,6 @@
 .wrn-border {
   border-color: var(--wrn-color-border);
 }
-[data-component] {
-  animation: wrn-component-enter var(--wrn-motion-slow) var(--wrn-ease-emphasized) both;
-}
 [data-component]
   :where(button, a, input, select, textarea, summary, [role="button"], [role="tab"]) {
   transition-property: color, background-color, border-color, opacity, box-shadow, transform;
@@ -454,20 +451,7 @@
 [data-component] :where([role="progressbar"], progress) {
   transition: inline-size var(--wrn-motion-slow) var(--wrn-ease-emphasized);
 }
-@media (hover: hover) and (pointer: fine) {
-  [data-component] :where(button, [role="button"]):not(:disabled):hover {
-    transform: translateY(-1px);
-  }
-
-  [data-component] :where(.wrn-catalog-card, article):has(a):hover {
-    transform: translateY(-2px);
-    box-shadow: 0 0.75rem 2rem rgb(15 23 42 / 0.12);
-  }
-}
-[data-component] :where(button, [role="button"]):not(:disabled):active {
-  transform: translateY(0) scale(0.98);
-  transition-duration: var(--wrn-motion-fast);
-}
+/* Hover elevation belongs to explicit component variants, never every control. */
 @keyframes wrn-component-enter {
   from {
     opacity: 0;
@@ -534,6 +518,14 @@
   }
 }
 /* --- Expanded foundation catalog ---------------------------------------- */
+/* Preserve comfortable touch targets while desktop controls stay compact. */
+@media (pointer: coarse) {
+  [data-component] {
+    --wrn-control-height-sm: 2.75rem;
+    --wrn-control-height: 2.75rem;
+    --wrn-control-height-lg: 3rem;
+  }
+}
 .wrn-container--narrow {
   max-width: 44rem;
 }
@@ -575,7 +567,7 @@
 .wrn-well,
 .wrn-inset-panel {
   min-width: 0;
-  padding: clamp(1rem, 3vw, 1.5rem);
+  padding: var(--wrn-space-panel, 1.25rem);
   color: var(--wrn-color-text);
   border: 1px solid var(--wrn-color-border);
   border-radius: var(--wrn-radius);