release: WRNexusJS 0.2.56

packages/ui/README.md

@@ -108,6 +108,23 @@ are `.wrn` files rendered server-side.
 The framework serves this stylesheet once at `/__wrnexus/ui.css`, so pages get all
 component styles from a single request.
 
+### Tailwind and motion
+
+Components use static Tailwind utility classes alongside the shared `.wire-*`
+layer. If the package is consumed by a separate Tailwind build, include its
+component sources so every utility is generated:
+
+```css
+@import "tailwindcss";
+@source "../node_modules/@wrnexus/ui/components/*.wrn";
+```
+
+The shared stylesheet gives all component boundaries consistent, GPU-friendly
+entry and interaction motion. Override `--wire-motion-fast`,
+`--wire-motion-base`, `--wire-motion-slow`, `--wire-ease-standard`, or
+`--wire-ease-emphasized` to tune it. Hover lift is limited to precise pointing
+devices and `prefers-reduced-motion` is honored automatically.
+
 ## Usage
 
 ### Auto-discovery

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ui",
-  "version": "0.2.55",
+  "version": "0.2.56",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/ui/test/ui.test.ts

@@ -57,6 +57,11 @@ test("component-system CSS includes responsive, theme-token, focus, and reduced-
   expect(css).toContain(":focus-visible");
   expect(css).toContain("var(--wire-color-surface)");
   expect(css).toContain("min-height: 44px");
+  expect(css).toContain("--wire-motion-base");
+  expect(css).toContain("--wire-ease-emphasized");
+  expect(css).toContain("@keyframes wire-component-enter");
+  expect(css).toContain("@keyframes wire-dialog-enter");
+  expect(css).toContain("@media (hover: hover) and (pointer: fine)");
 });
 
 test.each(uiComponentNames())("bundled UI component %s compiles", (name) => {

packages/ui/ui.css

@@ -937,6 +937,127 @@
     position: static;
   }
 }
+
+/* --- Motion system -------------------------------------------------------
+ * Applies to both Tailwind-authored and token-authored components. Motion is
+ * intentionally limited to composited properties so interaction stays fluid.
+ */
+:root {
+  --wire-motion-fast: 120ms;
+  --wire-motion-base: 200ms;
+  --wire-motion-slow: 320ms;
+  --wire-ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --wire-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+[data-component] {
+  animation: wire-component-enter var(--wire-motion-slow) var(--wire-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;
+  transition-duration: var(--wire-motion-base);
+  transition-timing-function: var(--wire-ease-standard);
+}
+
+[data-component] :where(input, select, textarea, .wire-input, .wire-select) {
+  transition-duration: var(--wire-motion-fast);
+}
+
+[data-component] :where(.wire-card, .wire-panel, .wire-surface, .wire-catalog-card, article) {
+  transition-property: border-color, background-color, box-shadow, transform;
+  transition-duration: var(--wire-motion-base);
+  transition-timing-function: var(--wire-ease-emphasized);
+}
+
+[data-component] :where(.wire-overlay, [role="dialog"]) {
+  animation: wire-overlay-enter var(--wire-motion-base) var(--wire-ease-standard) both;
+}
+
+[data-component] :where(.wire-dialog, [role="dialog"] > :first-child) {
+  animation: wire-dialog-enter var(--wire-motion-slow) var(--wire-ease-emphasized) both;
+}
+
+[data-component] :where([role="menu"], [role="listbox"], [role="tooltip"], .wire-mega-menu__panel) {
+  transform-origin: top center;
+  animation: wire-popover-enter var(--wire-motion-base) var(--wire-ease-emphasized) both;
+}
+
+[data-component] :where([role="progressbar"], progress) {
+  transition: inline-size var(--wire-motion-slow) var(--wire-ease-emphasized);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  [data-component] :where(button, .wire-btn, [role="button"]):not(:disabled):hover {
+    transform: translateY(-1px);
+  }
+
+  [data-component] :where(.wire-card, .wire-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, .wire-btn, [role="button"]):not(:disabled):active {
+  transform: translateY(0) scale(0.98);
+  transition-duration: var(--wire-motion-fast);
+}
+
+@keyframes wire-component-enter {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes wire-overlay-enter {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes wire-dialog-enter {
+  from {
+    opacity: 0;
+    transform: translateY(12px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes wire-popover-enter {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-component],
+  [data-component] *,
+  [data-component] *::before,
+  [data-component] *::after {
+    scroll-behavior: auto !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    transition-delay: 0ms !important;
+  }
+}
 @media (max-width: 480px) {
   .wire-form-row {
     grid-template-columns: 1fr;