@nine-lab/nine-ux 0.1.55 → 0.1.57

package/dist/nine-ux.es.js

@@ -318,6 +318,57 @@ const wl = `
     :host(.rgb) div.head:hover {
         filter: unset;
     }
+    
+    
+    /* 1. 기본 애니메이션 설정 */
+:host {
+    --animation-duration: 0.3s;
+}
+
+dialog {
+    transition: opacity var(--animation-duration) ease, 
+                transform var(--animation-duration) cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+/* 2. Fade In 효과 */
+:host(.fade-in) dialog {
+    animation: fade-in var(--animation-duration) forwards;
+}
+
+@keyframes fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+/* 3. Zoom In 효과 */
+:host(.zoom-in) dialog {
+    animation: zoom-in var(--animation-duration) forwards;
+}
+
+@keyframes zoom-in {
+    from { opacity: 0; transform: scale(0.8); }
+    to { opacity: 1; transform: scale(1); }
+}
+
+/* 4. 닫기 애니메이션 (out 클래스 대응) */
+dialog.out {
+    animation: fade-out var(--animation-duration) forwards;
+    pointer-events: none;
+}
+
+@keyframes fade-out {
+    from { opacity: 1; transform: scale(1); }
+    to { opacity: 0; transform: scale(0.95); }
+}
+
+/* 5. 백드롭(배경) 애니메이션 */
+dialog::backdrop {
+    transition: opacity var(--animation-duration) ease;
+}
+
+:host(.fade-in) dialog::backdrop {
+    background: rgba(0, 0, 0, 0.3);
+}
 `;
 var Oe, j, Nn, An, Dn;
 class Cl extends HTMLElement {
@@ -14560,7 +14611,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.55/dist/css/nineEditor.css";
+				@import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-ux@0.1.57/dist/css/nineEditor.css";
 				${r}
 			</style>