release: WRNexusJS 0.2.56

2026-07-19 17:25:37 +05:30
parent 12beb6f4ba
commit 180239ef4c
59 changed files with 375 additions and 85 deletions
@@ -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;