@konomi-app/ui 5.4.0 → 5.5.0

package/dist/index.js

@@ -2296,7 +2296,7 @@ var dialog = new DialogSingleton();
 // src/toast/types.ts
 var createInitialToastState = () => ({
   items: [],
-  position: "top-right",
+  position: "bottom-right",
   maxVisible: 3,
   defaultDuration: 4e3
 });
@@ -2546,9 +2546,6 @@ var toastStyles = css2`
     --toast-spinner-track: rgb(59 130 246 / 0.2);
     --toast-spinner-arc: var(--toast-loading);
 
-    /* Progress bar */
-    --toast-progress-height: 3px;
-
     /* Close button */
     --toast-close-color: #9ca3af;
     --toast-close-hover-color: #374151;
@@ -2879,9 +2876,75 @@ var toastStyles = css2`
     color: var(--dialog-primary-hover, #2563eb);
   }
 
+  /* ─── Close Wrap + Timer Ring ─── */
+
+  .toast-close-wrap {
+    position: relative;
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .toast-timer-ring {
+    position: absolute;
+    inset: 0;
+    width: 24px;
+    height: 24px;
+    transform: rotate(-90deg);
+    pointer-events: none;
+  }
+
+  .toast-timer-track {
+    fill: none;
+    stroke: rgb(0 0 0 / 0.08);
+    stroke-width: 2;
+  }
+
+  .toast-timer-fill {
+    fill: none;
+    stroke-width: 2;
+    stroke-linecap: round;
+    /* 周長 = 2π × 10 ≈ 62.83 */
+    stroke-dasharray: 62.83;
+    stroke-dashoffset: 62.83;
+    animation: toast-ring-fill linear forwards;
+    animation-play-state: running;
+  }
+
+  @keyframes toast-ring-fill {
+    from {
+      stroke-dashoffset: 62.83;
+    }
+    to {
+      stroke-dashoffset: 0;
+    }
+  }
+
+  .toast-card[data-type='success'] .toast-timer-fill {
+    stroke: var(--toast-success);
+  }
+  .toast-card[data-type='error'] .toast-timer-fill {
+    stroke: var(--toast-error);
+  }
+  .toast-card[data-type='warning'] .toast-timer-fill {
+    stroke: var(--toast-warning);
+  }
+  .toast-card[data-type='info'] .toast-timer-fill {
+    stroke: var(--toast-info);
+  }
+
+  .toast-card[data-paused] .toast-timer-fill {
+    animation-play-state: paused;
+  }
+
   /* ─── Close Button ─── */
 
   .toast-close {
+    position: relative;
+    z-index: 1;
     width: 20px;
     height: 20px;
     padding: 0;
@@ -2889,18 +2952,17 @@ var toastStyles = css2`
     border: none;
     background: none;
     cursor: pointer;
-    flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--toast-close-color);
     transition: color 150ms ease;
-    border-radius: 4px;
+    border-radius: 50%;
   }
 
   .toast-close svg {
-    width: 14px;
-    height: 14px;
+    width: 12px;
+    height: 12px;
   }
 
   .toast-close:hover {
@@ -2908,55 +2970,14 @@ var toastStyles = css2`
   }
 
   @media (min-width: 640px) {
-    .toast-close {
+    .toast-close-wrap {
       opacity: 0.5;
-      transition:
-        opacity 150ms ease,
-        color 150ms ease;
+      transition: opacity 150ms ease;
     }
-    .toast-card:hover .toast-close {
+    .toast-card:hover .toast-close-wrap {
       opacity: 1;
     }
   }
-
-  /* ─── Progress Bar ─── */
-
-  .toast-progress {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    height: var(--toast-progress-height);
-    width: 100%;
-    border-radius: 0 0 var(--toast-card-radius) var(--toast-card-radius);
-    animation: toast-progress-countdown linear forwards;
-    animation-play-state: running;
-  }
-
-  .toast-card[data-paused] .toast-progress {
-    animation-play-state: paused;
-  }
-
-  @keyframes toast-progress-countdown {
-    from {
-      width: 100%;
-    }
-    to {
-      width: 0%;
-    }
-  }
-
-  .toast-progress[data-type='success'] {
-    background-color: var(--toast-success);
-  }
-  .toast-progress[data-type='error'] {
-    background-color: var(--toast-error);
-  }
-  .toast-progress[data-type='warning'] {
-    background-color: var(--toast-warning);
-  }
-  .toast-progress[data-type='info'] {
-    background-color: var(--toast-info);
-  }
 `;
 
 // src/toast/toast-container.ts
@@ -3071,29 +3092,40 @@ var ToastContainer = class extends LitElement2 {
                     ${item.action.label}
                   </button>` : nothing2}
             </div>
-            <button
-              class="toast-close"
-              @click=${() => this.controller.dismiss(item.id)}
-              aria-label="閉じる"
-            >
-              <svg
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
+            <div class="toast-close-wrap">
+              ${item.duration > 0 && item.type !== "loading" ? html2`<svg
+                    class="toast-timer-ring"
+                    viewBox="0 0 24 24"
+                    aria-hidden="true"
+                  >
+                    <circle class="toast-timer-track" cx="12" cy="12" r="10" />
+                    <circle
+                      class="toast-timer-fill"
+                      cx="12"
+                      cy="12"
+                      r="10"
+                      style="animation-duration:${item.duration}ms"
+                    />
+                  </svg>` : nothing2}
+              <button
+                class="toast-close"
+                @click=${() => this.controller.dismiss(item.id)}
+                aria-label="閉じる"
               >
-                <line x1="18" y1="6" x2="6" y2="18" />
-                <line x1="6" y1="6" x2="18" y2="18" />
-              </svg>
-            </button>
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <line x1="18" y1="6" x2="6" y2="18" />
+                  <line x1="6" y1="6" x2="18" y2="18" />
+                </svg>
+              </button>
+            </div>
           </div>
-          ${item.duration > 0 && item.type !== "loading" ? html2`<div
-                class="toast-progress"
-                style="animation-duration:${item.duration}ms"
-                data-type=${item.type}
-              ></div>` : nothing2}
         </div>
       </div>
     `;