@konomi-app/ui 5.1.0 → 5.2.1

package/dist/index.js

@@ -266,6 +266,7 @@ updateItemStatus_fn = function(key, itemKey, status) {
 // src/overlay-dialog.ts
 import { LitElement, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+import { keyed } from "lit/directives/keyed.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 
 // src/styles.ts
@@ -282,7 +283,7 @@ var overlayStyles = 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;
@@ -372,7 +373,6 @@ var overlayStyles = css`
     min-height: var(--dialog-card-min-height);
     position: relative;
     overflow: hidden;
-    transition: all var(--dialog-transition-duration) ease;
   }
 
   @media (min-width: 640px) {
@@ -384,22 +384,101 @@ var overlayStyles = 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%;
@@ -440,6 +519,19 @@ var overlayStyles = 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;
@@ -448,6 +540,7 @@ var overlayStyles = 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 {
@@ -573,6 +666,7 @@ var overlayStyles = 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) {
@@ -592,7 +686,8 @@ var overlayStyles = 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;
   }
@@ -608,6 +703,7 @@ var overlayStyles = css`
 
   .btn-confirm:hover {
     background-color: var(--dialog-primary-hover);
+    box-shadow: 0 4px 12px rgb(59 130 246 / 0.35);
   }
 
   .btn-cancel {
@@ -631,11 +727,48 @@ var overlayStyles = 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 {
@@ -685,6 +818,7 @@ var overlayStyles = css`
 
   .task-label {
     color: #6b7280;
+    transition: color 250ms ease;
   }
 
   .task-label[data-status='active'] {
@@ -692,8 +826,21 @@ var overlayStyles = 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'] {
@@ -702,7 +849,6 @@ var overlayStyles = css`
 
   .task-label[data-status='skipped'] {
     color: #9ca3af;
-    text-decoration: line-through;
   }
 
   /* ─── Queue ellipsis ─── */
@@ -738,17 +884,54 @@ var overlayStyles = 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'] {
@@ -768,6 +951,7 @@ var overlayStyles = css`
     max-width: 24px;
     height: 2px;
     background-color: #e5e7eb;
+    transition: background-color 400ms ease;
   }
 `;
 
@@ -776,6 +960,8 @@ var OverlayDialog = class extends 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) {
@@ -789,13 +975,24 @@ var OverlayDialog = class extends 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);
@@ -804,6 +1001,7 @@ var OverlayDialog = class extends LitElement {
     super.disconnectedCallback();
     this._unsubscribe?.();
     this._syncBodyScroll(false);
+    clearTimeout(this._closeTimer);
     window.removeEventListener("beforeunload", this._beforeUnloadHandler);
     window.removeEventListener("keydown", this._onKeyDown);
   }
@@ -879,9 +1077,11 @@ var OverlayDialog = class extends LitElement {
   }
   _renderSpinner() {
     return 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>
     `;
@@ -1068,9 +1268,11 @@ var OverlayDialog = class extends LitElement {
     const showHeaderTitle = s.title && s.dialogType !== "alert" && s.dialogType !== "confirm";
     return html`
       <div class="backdrop" ?data-open=${s.open} @click=${this._onBackdropClick}>
-        <div class="card">
+        <div class="card" ?data-closing=${this._isClosing}>
           ${showHeaderTitle ? html`<p class="dialog-title">${s.title}</p>` : nothing}
-          <div class="card-body">${this._renderBody()}</div>
+          <div class="card-body">
+            ${keyed(this._bodyKey, html`<div class="body-inner">${this._renderBody()}</div>`)}
+          </div>
           <div
             class="progress-bar"
             style="width:${s.progress ?? 0}%;opacity:${s.progress !== null ? 1 : 0}"
@@ -1087,6 +1289,12 @@ __decorateClass([
 __decorateClass([
   state()
 ], OverlayDialog.prototype, "_state", 2);
+__decorateClass([
+  state()
+], OverlayDialog.prototype, "_bodyKey", 2);
+__decorateClass([
+  state()
+], OverlayDialog.prototype, "_isClosing", 2);
 OverlayDialog = __decorateClass([
   customElement("overlay-dialog")
 ], OverlayDialog);