@konomi-app/ui 5.0.0 → 5.2.1

package/dist/index.js

@@ -86,12 +86,13 @@ var DialogController = class {
   // ─── Alert ───────────────────────────────────────────────
   alert(optionsOrLabel) {
     __privateMethod(this, _DialogController_instances, clearTimer_fn).call(this);
-    const opts = typeof optionsOrLabel === "string" ? { label: optionsOrLabel } : optionsOrLabel;
+    const opts = typeof optionsOrLabel === "string" ? { title: optionsOrLabel } : optionsOrLabel;
     __privateMethod(this, _DialogController_instances, update_fn).call(this, {
       open: true,
       dialogType: "alert",
       icon: opts.type ?? "info",
-      label: opts.label ?? "",
+      title: opts.title ?? "",
+      label: "",
       description: opts.description ?? "",
       html: opts.html ?? "",
       showConfirmButton: true,
@@ -108,12 +109,13 @@ var DialogController = class {
   // ─── Confirm ─────────────────────────────────────────────
   confirm(optionsOrLabel) {
     __privateMethod(this, _DialogController_instances, clearTimer_fn).call(this);
-    const opts = typeof optionsOrLabel === "string" ? { label: optionsOrLabel } : optionsOrLabel;
+    const opts = typeof optionsOrLabel === "string" ? { title: optionsOrLabel } : optionsOrLabel;
     __privateMethod(this, _DialogController_instances, update_fn).call(this, {
       open: true,
       dialogType: "confirm",
       icon: opts.type ?? "warning",
-      label: opts.label ?? "",
+      title: opts.title ?? "",
+      label: "",
       description: opts.description ?? "",
       showConfirmButton: true,
       showCancelButton: true,
@@ -264,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
@@ -280,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;
@@ -360,8 +363,8 @@ var overlayStyles = css`
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
-    gap: 16px;
+    justify-content: flex-start;
+    gap: 0;
     padding: var(--dialog-card-padding);
     background-color: var(--dialog-card-bg);
     border-radius: 0;
@@ -370,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) {
@@ -382,10 +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: 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%;
@@ -426,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;
@@ -434,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 {
@@ -501,11 +608,11 @@ var overlayStyles = css`
   /* ─── Text ─── */
 
   .dialog-title {
-    font-size: 14px;
+    font-size: 18px;
     font-weight: 600;
     color: #374151;
     text-align: center;
-    margin: 0;
+    margin: 0 0 16px;
     word-break: break-word;
     width: 100%;
     padding-bottom: 12px;
@@ -513,8 +620,8 @@ var overlayStyles = css`
   }
 
   .label {
-    font-size: 18px;
-    font-weight: 600;
+    font-size: 16px;
+    font-weight: 400;
     color: #1f2937;
     text-align: center;
     margin: 0;
@@ -559,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) {
@@ -578,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;
   }
@@ -594,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 {
@@ -617,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 {
@@ -671,6 +818,7 @@ var overlayStyles = css`
 
   .task-label {
     color: #6b7280;
+    transition: color 250ms ease;
   }
 
   .task-label[data-status='active'] {
@@ -678,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'] {
@@ -688,7 +849,6 @@ var overlayStyles = css`
 
   .task-label[data-status='skipped'] {
     color: #9ca3af;
-    text-decoration: line-through;
   }
 
   /* ─── Queue ellipsis ─── */
@@ -724,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'] {
@@ -754,6 +951,7 @@ var overlayStyles = css`
     max-width: 24px;
     height: 2px;
     background-color: #e5e7eb;
+    transition: background-color 400ms ease;
   }
 `;
 
@@ -762,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) {
@@ -775,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);
@@ -790,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);
   }
@@ -865,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>
     `;
@@ -1030,7 +1244,7 @@ var OverlayDialog = class extends LitElement {
       case "alert":
       case "confirm":
         return html`
-          ${this._renderIcon(s.icon)} ${s.label ? html`<p class="label">${s.label}</p>` : nothing}
+          ${this._renderIcon(s.icon)} ${s.title ? html`<p class="label">${s.title}</p>` : nothing}
           ${s.description ? html`<p class="description">${s.description}</p>` : nothing}
           ${s.html ? html`<div class="html-content">${unsafeHTML(s.html)}</div>` : nothing}
           ${this._renderButtons()}
@@ -1051,10 +1265,14 @@ var OverlayDialog = class extends LitElement {
   }
   render() {
     const s = this._state;
+    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">
-          ${s.title ? html`<p class="dialog-title">${s.title}</p>` : nothing} ${this._renderBody()}
+        <div class="card" ?data-closing=${this._isClosing}>
+          ${showHeaderTitle ? html`<p class="dialog-title">${s.title}</p>` : nothing}
+          <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}"
@@ -1071,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);