@konomi-app/ui 5.4.1 → 5.6.0

package/dist/index.js

@@ -2528,13 +2528,14 @@ var toastStyles = css2`
     /* Container */
     --toast-gap: 12px;
     --toast-padding: 16px;
+    --toast-min-width: 360px;
     --toast-max-width: 420px;
 
     /* Card */
     --toast-card-bg: #fff;
     --toast-card-border: #f3f4f6;
     --toast-card-shadow: 0 4px 12px rgb(0 0 0 / 0.08), 0 1px 3px rgb(0 0 0 / 0.06);
-    --toast-card-radius: 8px;
+    --toast-card-radius: 4px;
     --toast-card-padding: 14px 16px;
 
     /* Colors (inherit from dialog when available) */
@@ -2546,9 +2547,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;
@@ -2574,6 +2572,7 @@ var toastStyles = css2`
     padding: var(--toast-padding);
     pointer-events: none;
     max-height: 100vh;
+    min-width: var(--toast-min-width);
     max-width: var(--toast-max-width);
     box-sizing: border-box;
   }
@@ -2613,6 +2612,7 @@ var toastStyles = css2`
   @media (max-width: 639px) {
     .container {
       max-width: 100%;
+      min-width: 0;
       width: 100%;
       left: 0;
       right: 0;
@@ -2705,21 +2705,29 @@ var toastStyles = css2`
     pointer-events: none;
   }
 
-  /* Type-based left accent */
-  .toast-card[data-type='success'] {
-    border-left: 3px solid var(--toast-success);
+  /* Type-based top stripe */
+  .toast-card::before {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+  }
+  .toast-card[data-type='success']::before {
+    background: var(--toast-success);
   }
-  .toast-card[data-type='error'] {
-    border-left: 3px solid var(--toast-error);
+  .toast-card[data-type='error']::before {
+    background: var(--toast-error);
   }
-  .toast-card[data-type='warning'] {
-    border-left: 3px solid var(--toast-warning);
+  .toast-card[data-type='warning']::before {
+    background: var(--toast-warning);
   }
-  .toast-card[data-type='info'] {
-    border-left: 3px solid var(--toast-info);
+  .toast-card[data-type='info']::before {
+    background: var(--toast-info);
   }
-  .toast-card[data-type='loading'] {
-    border-left: 3px solid var(--toast-loading);
+  .toast-card[data-type='loading']::before {
+    background: var(--toast-loading);
   }
 
   /* ─── Animations ─── */
@@ -2879,9 +2887,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 +2963,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 +2981,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 +3103,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>
     `;