@konomi-app/ui 5.8.0 → 5.10.3

package/dist/index.js

@@ -673,8 +673,9 @@ 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 { property, state } from "lit/decorators.js";
 import { keyed } from "lit/directives/keyed.js";
+import { repeat } from "lit/directives/repeat.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 
 // src/styles.ts
@@ -686,8 +687,8 @@ var overlayStyles = css`
       'Yu Gothic Medium', '游ゴシック', YuGothic, 'メイリオ', 'Hiragino Kaku Gothic ProN', Meiryo,
       sans-serif;
     --dialog-text-color: #356;
-    --dialog-font-size: 14px;
-    --dialog-font-size-desktop: 16px;
+    --dialog-font-size: 15px;
+    --dialog-font-size-desktop: 17px;
     --dialog-z-index: 1000;
     --dialog-backdrop-color: rgb(255 255 255 / 0.73);
     --dialog-backdrop-blur: 4px;
@@ -699,6 +700,7 @@ var overlayStyles = css`
     --dialog-card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
     --dialog-card-radius: 4px;
     --dialog-card-width: 400px;
+    --dialog-alert-width: 480px;
     --dialog-card-min-height: 200px;
     --dialog-card-padding: 24px;
     --dialog-card-padding-desktop: 32px;
@@ -719,7 +721,7 @@ var overlayStyles = css`
     /* Button */
     --dialog-btn-radius: 6px;
     --dialog-btn-padding: 8px 24px;
-    --dialog-btn-font-size: 14px;
+    --dialog-btn-font-size: 15px;
 
     /* Spinner */
     --dialog-spinner-size: 60px;
@@ -732,14 +734,14 @@ var overlayStyles = css`
     --dialog-form-gap: 16px;
     --dialog-form-columns: 1;
     --dialog-form-label-color: #374151;
-    --dialog-form-label-size: 13px;
+    --dialog-form-label-size: 14px;
     --dialog-form-label-weight: 500;
     --dialog-form-input-bg: #fff;
     --dialog-form-input-border: #d1d5db;
     --dialog-form-input-border-focus: var(--dialog-primary);
     --dialog-form-input-radius: 6px;
     --dialog-form-input-padding: 8px 12px;
-    --dialog-form-input-font-size: 14px;
+    --dialog-form-input-font-size: 15px;
     --dialog-form-error-color: var(--dialog-error);
     --dialog-form-hint-color: #9ca3af;
     --dialog-form-required-color: var(--dialog-error);
@@ -807,9 +809,27 @@ var overlayStyles = css`
       max-width: 90vw;
       border-radius: var(--dialog-card-radius);
       padding: var(--dialog-card-padding-desktop);
+      transition: width 360ms cubic-bezier(0.16, 1, 0.3, 1);
+    }
+  }
+
+  /* ─── Alert / Confirm specific sizing ─── */
+
+  @media (min-width: 640px) {
+    .card[data-type='alert'],
+    .card[data-type='confirm'] {
+      width: var(--dialog-alert-width);
     }
   }
 
+  .card[data-type='alert'] .label,
+  .card[data-type='confirm'] .label {
+    font-size: 22px;
+    font-weight: 700;
+    color: #0f172a;
+    letter-spacing: -0.01em;
+  }
+
   /* ─── Card Open / Close Animations ─── */
 
   @keyframes card-enter {
@@ -1032,9 +1052,9 @@ var overlayStyles = css`
   /* ─── Text ─── */
 
   .dialog-title {
-    font-size: 18px;
+    font-size: 20px;
     font-weight: 600;
-    color: #374151;
+    color: #1f2937;
     text-align: center;
     margin: 0 0 16px;
     word-break: break-word;
@@ -1044,29 +1064,29 @@ var overlayStyles = css`
   }
 
   .label {
-    font-size: 16px;
-    font-weight: 400;
-    color: #1f2937;
+    font-size: 17px;
+    font-weight: 500;
+    color: #111827;
     text-align: center;
     margin: 0;
     word-break: break-word;
   }
 
   .description {
-    font-size: 14px;
-    color: #6b7280;
+    font-size: 15px;
+    color: #4b5563;
     text-align: center;
     margin: 0;
     word-break: break-word;
-    line-height: 1.6;
+    line-height: 1.65;
   }
 
   .html-content {
-    font-size: 14px;
-    color: #6b7280;
+    font-size: 15px;
+    color: #4b5563;
     text-align: center;
     word-break: break-word;
-    line-height: 1.6;
+    line-height: 1.65;
     width: 100%;
   }
 
@@ -1166,10 +1186,31 @@ var overlayStyles = css`
     display: flex;
     align-items: center;
     gap: 12px;
-    font-size: 14px;
+    font-size: 15px;
+    border-radius: 6px;
+    transition: background 200ms ease;
     animation: task-item-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
   }
 
+  .task-item[data-status='active'] {
+  }
+
+  @keyframes task-item-enter-below {
+    from {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  /* Queue items slide in from below (steps keep the left-slide default) */
+  .task-item[data-status] {
+    animation-name: task-item-enter-below;
+  }
+
   .task-item:nth-child(1) {
     animation-delay: 40ms;
   }
@@ -1219,6 +1260,26 @@ var overlayStyles = css`
     animation: spin 1.2s infinite linear;
   }
 
+  .task-item[data-status='active'] .task-icon .mini-spinner {
+    animation:
+      spin 1.2s infinite linear,
+      queue-spinner-pulse 2s infinite ease-in-out;
+  }
+
+  @keyframes queue-spinner-pulse {
+    0%,
+    100% {
+      box-shadow:
+        inset 0 0 0 1px var(--dialog-spinner-track),
+        0 0 0 0 color-mix(in srgb, var(--dialog-accent, #3b82f6) 40%, transparent);
+    }
+    50% {
+      box-shadow:
+        inset 0 0 0 1px var(--dialog-spinner-track),
+        0 0 0 4px color-mix(in srgb, var(--dialog-accent, #3b82f6) 0%, transparent);
+    }
+  }
+
   .task-icon .mini-spinner-half {
     position: absolute;
     left: 50%;
@@ -1240,6 +1301,23 @@ var overlayStyles = css`
     box-shadow: inset 0 0 0 1px var(--dialog-spinner-arc);
   }
 
+  @keyframes task-icon-pop {
+    from {
+      transform: scale(0.4);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  .task-item[data-status='done'] .task-icon svg,
+  .task-item[data-status='error'] .task-icon svg,
+  .task-item[data-status='skipped'] .task-icon svg {
+    animation: task-icon-pop 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
+  }
+
   .task-label {
     color: #6b7280;
     transition: color 250ms ease;
@@ -1275,21 +1353,80 @@ var overlayStyles = css`
     color: #9ca3af;
   }
 
+  /* ─── Queue layout & progress ─── */
+
+  .queue-layout {
+    display: flex;
+    align-items: stretch;
+    gap: 10px;
+    width: 100%;
+  }
+
+  .queue-layout .task-list {
+    flex: 1;
+  }
+
+  .queue-progress-v {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex-shrink: 0;
+    width: 14px;
+    animation: task-item-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
+  }
+
+  .queue-progress-track-v {
+    flex: 1;
+    width: 2px;
+    background: rgba(156, 163, 175, 0.2);
+    border-radius: 1px;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .queue-progress-fill-v {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    background: var(--dialog-accent, #3b82f6);
+    border-radius: 1px;
+    transition: height 600ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .queue-progress-count-v {
+    font-size: 10px;
+    font-weight: 500;
+    color: #9ca3af;
+    margin-top: 5px;
+    writing-mode: vertical-rl;
+    letter-spacing: 0.04em;
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+  }
+
   /* ─── Queue ellipsis ─── */
 
   .queue-ellipsis {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+    list-style: none;
+  }
+
+  .queue-ellipsis-dots {
     display: flex;
     flex-direction: column;
     align-items: center;
+    justify-content: center;
     gap: 3px;
+    width: 24px;
     padding: 4px 0;
-    /* アイコン列 (24px) の中央に配置: (24px - 4px dot) / 2 = 10px */
-    padding-left: 10px;
-    align-self: flex-start;
-    list-style: none;
+    flex-shrink: 0;
   }
 
-  .queue-ellipsis span {
+  .queue-ellipsis-dots span {
     display: block;
     width: 4px;
     height: 4px;
@@ -1297,6 +1434,16 @@ var overlayStyles = css`
     background-color: #d1d5db;
   }
 
+  .queue-ellipsis-badge {
+    font-size: 11px;
+    font-weight: 500;
+    color: #9ca3af;
+    background: rgba(156, 163, 175, 0.12);
+    border-radius: 10px;
+    padding: 2px 7px;
+    letter-spacing: 0.01em;
+  }
+
   /* ─── Steps indicator ─── */
 
   .steps-header {
@@ -1462,13 +1609,13 @@ var overlayStyles = css`
   }
 
   .form-error {
-    font-size: 12px;
+    font-size: 13px;
     color: var(--dialog-form-error-color);
     min-height: 1em;
   }
 
   .form-hint {
-    font-size: 12px;
+    font-size: 13px;
     color: var(--dialog-form-hint-color);
   }
 
@@ -1520,7 +1667,7 @@ var overlayStyles = css`
   }
 
   .step-form-counter {
-    font-size: 12px;
+    font-size: 13px;
     color: var(--dialog-form-hint-color);
     text-align: center;
     margin: 0 0 4px;
@@ -1553,7 +1700,9 @@ var overlayStyles = css`
     border: 1px solid var(--dialog-form-input-border);
     background: transparent;
     color: var(--dialog-text-color);
-    transition: background-color 120ms ease, border-color 120ms ease;
+    transition:
+      background-color 120ms ease,
+      border-color 120ms ease;
   }
 
   .btn-prev:hover {
@@ -1800,23 +1949,40 @@ var OverlayDialog = class extends LitElement {
     const total = items.length;
     const { start, end } = this._getQueueWindow(items);
     const visible = items.slice(start, end + 1);
+    const finishedStatuses = /* @__PURE__ */ new Set(["done", "skipped", "error"]);
+    const doneCount = items.filter((i) => finishedStatuses.has(i.status)).length;
+    const pct = total > 0 ? Math.round(doneCount / total * 100) : 0;
+    const topHidden = start;
+    const bottomHidden = total - 1 - end;
     return html`
-      <ul class="task-list">
-        ${start > 0 ? html`<li class="queue-ellipsis" aria-hidden="true">
-              <span></span><span></span><span></span>
-            </li>` : nothing}
-        ${visible.map(
+      <div class="queue-layout">
+        <div class="queue-progress-v">
+          <div class="queue-progress-track-v">
+            <div class="queue-progress-fill-v" style="height: ${pct}%"></div>
+          </div>
+          <span class="queue-progress-count-v">${doneCount}/${total}</span>
+        </div>
+        <ul class="task-list">
+          ${topHidden > 0 ? html`<li class="queue-ellipsis" aria-hidden="true">
+                <div class="queue-ellipsis-dots"><span></span><span></span><span></span></div>
+                <span class="queue-ellipsis-badge">+${topHidden}</span>
+              </li>` : nothing}
+          ${repeat(
+      visible,
+      (item) => item.key,
       (item) => html`
-            <li class="task-item">
-              <span class="task-icon">${this._renderTaskIcon(item.status)}</span>
-              <span class="task-label" data-status=${item.status}>${item.label}</span>
-            </li>
-          `
+              <li class="task-item" data-status=${item.status}>
+                <span class="task-icon">${this._renderTaskIcon(item.status)}</span>
+                <span class="task-label" data-status=${item.status}>${item.label}</span>
+              </li>
+            `
     )}
-        ${end < total - 1 ? html`<li class="queue-ellipsis" aria-hidden="true">
-              <span></span><span></span><span></span>
-            </li>` : nothing}
-      </ul>
+          ${bottomHidden > 0 ? html`<li class="queue-ellipsis" aria-hidden="true">
+                <div class="queue-ellipsis-dots"><span></span><span></span><span></span></div>
+                <span class="queue-ellipsis-badge">+${bottomHidden}</span>
+              </li>` : nothing}
+        </ul>
+      </div>
     `;
   }
   _renderStepsHeader(items) {
@@ -2166,9 +2332,9 @@ __decorateClass([
 __decorateClass([
   state()
 ], OverlayDialog.prototype, "_isClosing", 2);
-OverlayDialog = __decorateClass([
-  customElement("overlay-dialog")
-], OverlayDialog);
+if (!customElements.get("overlay-dialog")) {
+  customElements.define("overlay-dialog", OverlayDialog);
+}
 
 // src/dialog.ts
 var _controller, _element, _DialogSingleton_instances, ensureElement_fn;
@@ -2517,8 +2683,8 @@ enforceMaxVisible_fn = function() {
 
 // src/toast/toast-container.ts
 import { LitElement as LitElement2, html as html2, nothing as nothing2 } from "lit";
-import { customElement as customElement2, property as property2, state as state2 } from "lit/decorators.js";
-import { repeat } from "lit/directives/repeat.js";
+import { property as property2, state as state2 } from "lit/decorators.js";
+import { repeat as repeat2 } from "lit/directives/repeat.js";
 
 // src/toast/styles.ts
 import { css as css2 } from "lit";
@@ -3156,7 +3322,7 @@ var ToastContainer = class extends LitElement2 {
     const s = this._state;
     return html2`
       <div class="container" data-position=${s.position} role="region" aria-label="通知">
-        ${repeat(
+        ${repeat2(
       s.items,
       (item) => item.id,
       (item) => this._renderToast(item)
@@ -3172,9 +3338,9 @@ __decorateClass([
 __decorateClass([
   state2()
 ], ToastContainer.prototype, "_state", 2);
-ToastContainer = __decorateClass([
-  customElement2("toast-container")
-], ToastContainer);
+if (!customElements.get("toast-container")) {
+  customElements.define("toast-container", ToastContainer);
+}
 
 // src/toast/toast.ts
 var _controller2, _element2, _ToastSingleton_instances, ensureElement_fn2;