@nine-lab/nine-ux 0.1.59 → 0.1.61

package/dist/nine-ux.es.js

@@ -349,32 +349,42 @@ dialog {
 @keyframes nx-move-left { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } }
 @keyframes nx-move-right { from { opacity: 0; transform: translateX(-100px); } to { opacity: 1; transform: translateY(0); } }
 
-/* 4. Shake (에러 시 흔들림) */
-:host(.shake) dialog { animation: nx-shake 0.4s linear forwards; opacity: 1; }
-@keyframes nx-shake {
-    0%, 100% { transform: translateX(0); }
-    25% { transform: translateX(-10px); }
-    50% { transform: translateX(10px); }
-    75% { transform: translateX(-10px); }
+/* 4. Shake (상하좌우 격렬한 진동 - 에러 인지용) */
+:host(.shake) dialog { 
+    animation: nx-heavy-shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
+    opacity: 1; 
+}
+
+@keyframes nx-heavy-shake {
+    10%, 90% { transform: translate3d(-1px, -2px, 0); }
+    20%, 80% { transform: translate3d(2px, 4px, 0); }
+    30%, 50%, 70% { transform: translate3d(-6px, -6px, 0); }
+    40%, 60% { transform: translate3d(6px, 6px, 0); }
+}
+
+/* 5. Road Runner (등장: 왼쪽에서 탄력 있게 / 퇴장: 움츠렸다가 광속 탈출) */
+:host(.roadRunner) dialog { 
+    animation: roadRunnerIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; 
 }
 
-/* 5. Road Runner (왼쪽에서 튀어나와 오른쪽으로 도망) */
-:host(.roadRunner) dialog { animation: roadRunnerIn 0.5s var(--nx-timing) forwards; }
 @keyframes roadRunnerIn {
     0% { transform: translateX(-1500px) skewX(30deg); opacity: 1; }
-    70% { transform: translateX(30px) skewX(0deg); opacity: 1; }
-    100% { transform: translateX(0); opacity: 1; }
+    70% { transform: translateX(30px) skewX(-10deg); opacity: 1; }
+    100% { transform: translateX(0) skewX(0deg); opacity: 1; }
 }
 
 /* --- Out Animations (닫힐 때) --- */
 dialog.out { pointer-events: none; }
 
-/* Road Runner 전용 퇴장 (오른쪽으로 광속 탈출) */
-:host(.roadRunner) dialog.out { animation: roadRunnerOut 0.5s ease-in forwards; }
+/* Road Runner 퇴장: 슥 움츠렸다가(Anticipation) 쌩~! */
+:host(.roadRunner) dialog.out { 
+    animation: roadRunnerOut 0.5s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards; 
+}
+
 @keyframes roadRunnerOut {
-    0% { transform: translateX(0); opacity: 1; }
-    30% { transform: translateX(-30px) skewX(-30deg); opacity: 1; }
-    100% { transform: translateX(1500px) skewX(-30deg); opacity: 0; }
+    0% { transform: translateX(0) scale(1) skewX(0deg); opacity: 1; }
+    30% { transform: translateX(50px) scaleX(1.2) scaleY(0.8) skewX(-20deg); opacity: 1; } /* 뒤로 힘 모으기 */
+    100% { transform: translateX(1500px) scaleX(2) scaleY(0.5) skewX(40deg); opacity: 0; } /* 광속 탈출 */
 }
 
 /* 일반 퇴장 (기본) */
@@ -14629,7 +14639,7 @@ Lr = function() {
   const t = Ae.getComponentCssPath("nineEditor.css"), r = t ? `@import "${t}";` : "";
   this.shadowRoot.innerHTML = `
 			<style>
-				@import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-ux@0.1.59/dist/css/nineEditor.css";
+				@import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-ux@0.1.61/dist/css/nineEditor.css";
 				${r}
 			</style>