@konomi-app/ui 5.1.0 → 5.2.1

package/dist/index.cjs

@@ -291,6 +291,7 @@ updateItemStatus_fn = function(key, itemKey, status) {
 // src/overlay-dialog.ts
 var import_lit2 = require("lit");
 var import_decorators = require("lit/decorators.js");
+var import_keyed = require("lit/directives/keyed.js");
 var import_unsafe_html = require("lit/directives/unsafe-html.js");
 
 // src/styles.ts
@@ -307,7 +308,7 @@ var overlayStyles = import_lit.css`
     --dialog-z-index: 1000;
     --dialog-backdrop-color: rgb(255 255 255 / 0.73);
     --dialog-backdrop-blur: 4px;
-    --dialog-transition-duration: 250ms;
+    --dialog-transition-duration: 280ms;
 
     /* Card */
     --dialog-card-bg: #fff;
@@ -397,7 +398,6 @@ var overlayStyles = import_lit.css`
     min-height: var(--dialog-card-min-height);
     position: relative;
     overflow: hidden;
-    transition: all var(--dialog-transition-duration) ease;
   }
 
   @media (min-width: 640px) {
@@ -409,22 +409,101 @@ var overlayStyles = import_lit.css`
     }
   }
 
+  /* ─── Card Open / Close Animations ─── */
+
+  @keyframes card-enter {
+    from {
+      opacity: 0;
+      transform: translateY(28px) scale(0.96);
+      filter: blur(6px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+      filter: blur(0);
+    }
+  }
+
+  @keyframes card-exit {
+    from {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+      filter: blur(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateY(14px) scale(0.97);
+      filter: blur(4px);
+    }
+  }
+
+  .backdrop[data-open] .card {
+    animation: card-enter 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
+  }
+
+  .card[data-closing] {
+    animation: card-exit 300ms cubic-bezier(0.4, 0, 1, 1) both;
+    pointer-events: none;
+  }
+
   /* ─── Card Body ─── */
 
   .card-body {
     flex: 1;
     display: flex;
     flex-direction: column;
-    align-items: center;
+    align-items: stretch;
     justify-content: center;
+    width: 100%;
+  }
+
+  /* ─── Body Inner (animated content wrapper) ─── */
+
+  @keyframes body-enter {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+      filter: blur(3px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+      filter: blur(0);
+    }
+  }
+
+  .body-inner {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     gap: 16px;
     width: 100%;
+    animation: body-enter 380ms 60ms cubic-bezier(0.16, 1, 0.3, 1) both;
   }
 
   /* ─── Spinner ─── */
 
-  .spinner {
+  @keyframes spinner-enter {
+    from {
+      opacity: 0;
+      transform: scale(0.5);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  /* spin と spinner-enter は同じ transform を書き換えるため衝突する。
+     ラッパーでスケール/フェードを担い、.spinner は回転専用にする。 */
+  .spinner-wrap {
     font-size: var(--dialog-spinner-size);
+    width: 1em;
+    height: 1em;
+    animation: spinner-enter 450ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
+  }
+
+  .spinner {
     width: 1em;
     height: 1em;
     border-radius: 50%;
@@ -465,6 +544,19 @@ var overlayStyles = import_lit.css`
 
   /* ─── Icon ─── */
 
+  @keyframes icon-enter {
+    from {
+      opacity: 0;
+      transform: scale(0.4) rotate(-12deg);
+      filter: blur(4px);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1) rotate(0deg);
+      filter: blur(0);
+    }
+  }
+
   .icon-container {
     width: 64px;
     height: 64px;
@@ -473,6 +565,7 @@ var overlayStyles = import_lit.css`
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
+    animation: icon-enter 500ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
   }
 
   .icon-container svg {
@@ -598,6 +691,7 @@ var overlayStyles = import_lit.css`
     gap: 8px;
     width: 100%;
     margin-top: 8px;
+    animation: body-enter 320ms 160ms cubic-bezier(0.16, 1, 0.3, 1) both;
   }
 
   @media (min-width: 640px) {
@@ -617,7 +711,8 @@ var overlayStyles = import_lit.css`
     font-weight: 500;
     transition:
       background-color 150ms ease,
-      transform 80ms ease;
+      transform 80ms ease,
+      box-shadow 150ms ease;
     min-width: 100px;
     text-align: center;
   }
@@ -633,6 +728,7 @@ var overlayStyles = import_lit.css`
 
   .btn-confirm:hover {
     background-color: var(--dialog-primary-hover);
+    box-shadow: 0 4px 12px rgb(59 130 246 / 0.35);
   }
 
   .btn-cancel {
@@ -656,11 +752,48 @@ var overlayStyles = import_lit.css`
     list-style: none;
   }
 
+  @keyframes task-item-enter {
+    from {
+      opacity: 0;
+      transform: translateX(-8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
   .task-item {
     display: flex;
     align-items: center;
     gap: 12px;
     font-size: 14px;
+    animation: task-item-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
+  }
+
+  .task-item:nth-child(1) {
+    animation-delay: 40ms;
+  }
+  .task-item:nth-child(2) {
+    animation-delay: 80ms;
+  }
+  .task-item:nth-child(3) {
+    animation-delay: 120ms;
+  }
+  .task-item:nth-child(4) {
+    animation-delay: 160ms;
+  }
+  .task-item:nth-child(5) {
+    animation-delay: 200ms;
+  }
+  .task-item:nth-child(6) {
+    animation-delay: 240ms;
+  }
+  .task-item:nth-child(7) {
+    animation-delay: 280ms;
+  }
+  .task-item:nth-child(8) {
+    animation-delay: 320ms;
   }
 
   .task-icon {
@@ -710,6 +843,7 @@ var overlayStyles = import_lit.css`
 
   .task-label {
     color: #6b7280;
+    transition: color 250ms ease;
   }
 
   .task-label[data-status='active'] {
@@ -717,8 +851,21 @@ var overlayStyles = import_lit.css`
     font-weight: 500;
   }
 
+  @keyframes task-done-flash {
+    0% {
+      transform: translateX(0);
+    }
+    30% {
+      transform: translateX(4px);
+    }
+    100% {
+      transform: translateX(0);
+    }
+  }
+
   .task-label[data-status='done'] {
     color: var(--dialog-success);
+    animation: task-done-flash 350ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
   }
 
   .task-label[data-status='error'] {
@@ -727,7 +874,6 @@ var overlayStyles = import_lit.css`
 
   .task-label[data-status='skipped'] {
     color: #9ca3af;
-    text-decoration: line-through;
   }
 
   /* ─── Queue ellipsis ─── */
@@ -763,17 +909,54 @@ var overlayStyles = import_lit.css`
     margin-bottom: 8px;
   }
 
+  @keyframes step-dot-enter {
+    from {
+      opacity: 0;
+      transform: scale(0.4);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes step-pulse {
+    0% {
+      box-shadow:
+        0 0 0 0 rgb(59 130 246 / 0.5),
+        0 0 0 3px rgb(59 130 246 / 0.2);
+    }
+    70% {
+      box-shadow:
+        0 0 0 7px rgb(59 130 246 / 0),
+        0 0 0 3px rgb(59 130 246 / 0.2);
+    }
+    100% {
+      box-shadow:
+        0 0 0 0 rgb(59 130 246 / 0),
+        0 0 0 3px rgb(59 130 246 / 0.2);
+    }
+  }
+
   .step-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background-color: #d1d5db;
-    transition: background-color 200ms ease;
+    transition:
+      background-color 250ms ease,
+      transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
+      width 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
+    animation: step-dot-enter 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
   }
 
   .step-dot[data-status='active'] {
     background-color: var(--dialog-primary);
-    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.2);
+    width: 20px;
+    border-radius: 4px;
+    animation:
+      step-dot-enter 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both,
+      step-pulse 2s 400ms infinite;
   }
 
   .step-dot[data-status='done'] {
@@ -793,6 +976,7 @@ var overlayStyles = import_lit.css`
     max-width: 24px;
     height: 2px;
     background-color: #e5e7eb;
+    transition: background-color 400ms ease;
   }
 `;
 
@@ -801,6 +985,8 @@ var OverlayDialog = class extends import_lit2.LitElement {
   constructor() {
     super(...arguments);
     this._state = createInitialState();
+    this._bodyKey = 0;
+    this._isClosing = false;
     this._beforeUnloadHandler = (e) => e.preventDefault();
     this._onKeyDown = (e) => {
       if (e.key === "Escape" && this._state.open) {
@@ -814,13 +1000,24 @@ var OverlayDialog = class extends import_lit2.LitElement {
       this._state = { ...this.controller.state };
       this._unsubscribe = this.controller.subscribe((s) => {
         const wasOpen = this._state.open;
-        this._state = s;
-        this._syncBodyScroll(s.open);
+        const prevDialogType = this._state.dialogType;
         if (s.open && !wasOpen) {
+          this._isClosing = false;
+          clearTimeout(this._closeTimer);
           window.addEventListener("beforeunload", this._beforeUnloadHandler);
         } else if (!s.open && wasOpen) {
+          this._isClosing = true;
+          clearTimeout(this._closeTimer);
+          this._closeTimer = setTimeout(() => {
+            this._isClosing = false;
+          }, 320);
           window.removeEventListener("beforeunload", this._beforeUnloadHandler);
         }
+        if (s.open && s.dialogType !== prevDialogType) {
+          this._bodyKey++;
+        }
+        this._state = s;
+        this._syncBodyScroll(s.open);
       });
     }
     window.addEventListener("keydown", this._onKeyDown);
@@ -829,6 +1026,7 @@ var OverlayDialog = class extends import_lit2.LitElement {
     super.disconnectedCallback();
     this._unsubscribe?.();
     this._syncBodyScroll(false);
+    clearTimeout(this._closeTimer);
     window.removeEventListener("beforeunload", this._beforeUnloadHandler);
     window.removeEventListener("keydown", this._onKeyDown);
   }
@@ -904,9 +1102,11 @@ var OverlayDialog = class extends import_lit2.LitElement {
   }
   _renderSpinner() {
     return import_lit2.html`
-      <div class="spinner">
-        <div class="spinner-half">
-          <div class="spinner-inner"></div>
+      <div class="spinner-wrap">
+        <div class="spinner">
+          <div class="spinner-half">
+            <div class="spinner-inner"></div>
+          </div>
         </div>
       </div>
     `;
@@ -1093,9 +1293,11 @@ var OverlayDialog = class extends import_lit2.LitElement {
     const showHeaderTitle = s.title && s.dialogType !== "alert" && s.dialogType !== "confirm";
     return import_lit2.html`
       <div class="backdrop" ?data-open=${s.open} @click=${this._onBackdropClick}>
-        <div class="card">
+        <div class="card" ?data-closing=${this._isClosing}>
           ${showHeaderTitle ? import_lit2.html`<p class="dialog-title">${s.title}</p>` : import_lit2.nothing}
-          <div class="card-body">${this._renderBody()}</div>
+          <div class="card-body">
+            ${(0, import_keyed.keyed)(this._bodyKey, import_lit2.html`<div class="body-inner">${this._renderBody()}</div>`)}
+          </div>
           <div
             class="progress-bar"
             style="width:${s.progress ?? 0}%;opacity:${s.progress !== null ? 1 : 0}"
@@ -1112,6 +1314,12 @@ __decorateClass([
 __decorateClass([
   (0, import_decorators.state)()
 ], OverlayDialog.prototype, "_state", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], OverlayDialog.prototype, "_bodyKey", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], OverlayDialog.prototype, "_isClosing", 2);
 OverlayDialog = __decorateClass([
   (0, import_decorators.customElement)("overlay-dialog")
 ], OverlayDialog);