@konomi-app/ui 5.5.0 → 5.7.0

package/dist/index.cjs

@@ -2425,7 +2425,12 @@ var ToastController = class {
     const isLeavingLoading = item.type === "loading" && rest.type != null && rest.type !== "loading";
     if (newDuration !== void 0) {
       __privateMethod(this, _ToastController_instances, clearTimer_fn2).call(this, id);
-      __privateMethod(this, _ToastController_instances, updateItem_fn).call(this, id, { ...rest, duration: newDuration, remainingMs: newDuration, paused: false });
+      __privateMethod(this, _ToastController_instances, updateItem_fn).call(this, id, {
+        ...rest,
+        duration: newDuration,
+        remainingMs: newDuration,
+        paused: false
+      });
       if (newDuration > 0) {
         __privateMethod(this, _ToastController_instances, startTimer_fn).call(this, id, newDuration);
       }
@@ -2556,13 +2561,14 @@ var toastStyles = import_lit3.css`
     /* 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) */
@@ -2599,6 +2605,7 @@ var toastStyles = import_lit3.css`
     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;
   }
@@ -2638,6 +2645,7 @@ var toastStyles = import_lit3.css`
   @media (max-width: 639px) {
     .container {
       max-width: 100%;
+      min-width: 0;
       width: 100%;
       left: 0;
       right: 0;
@@ -2730,21 +2738,29 @@ var toastStyles = import_lit3.css`
     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='error'] {
-    border-left: 3px solid var(--toast-error);
+  .toast-card[data-type='success']::before {
+    background: var(--toast-success);
   }
-  .toast-card[data-type='warning'] {
-    border-left: 3px solid var(--toast-warning);
+  .toast-card[data-type='error']::before {
+    background: var(--toast-error);
   }
-  .toast-card[data-type='info'] {
-    border-left: 3px solid var(--toast-info);
+  .toast-card[data-type='warning']::before {
+    background: var(--toast-warning);
   }
-  .toast-card[data-type='loading'] {
-    border-left: 3px solid var(--toast-loading);
+  .toast-card[data-type='info']::before {
+    background: var(--toast-info);
+  }
+  .toast-card[data-type='loading']::before {
+    background: var(--toast-loading);
   }
 
   /* ─── Animations ─── */
@@ -2875,6 +2891,10 @@ var toastStyles = import_lit3.css`
     line-height: 1.4;
   }
 
+  .toast-message[data-titled] {
+    font-weight: 600;
+  }
+
   .toast-description {
     font-size: 13px;
     color: #6b7280;
@@ -2895,8 +2915,6 @@ var toastStyles = import_lit3.css`
     color: var(--toast-info);
     cursor: pointer;
     align-self: flex-start;
-    text-decoration: underline;
-    text-underline-offset: 2px;
     transition: color 150ms ease;
   }
 
@@ -3108,7 +3126,7 @@ var ToastContainer = class extends import_lit4.LitElement {
           <div class="toast-body">
             <span class="toast-icon icon-${item.type}"> ${this._renderIcon(item.type)} </span>
             <div class="toast-text">
-              <p class="toast-message">${item.message}</p>
+              <p class="toast-message" ?data-titled=${!!item.description}>${item.message}</p>
               ${item.description ? import_lit4.html`<p class="toast-description">${item.description}</p>` : import_lit4.nothing}
               ${item.action ? import_lit4.html`<button
                     class="toast-action-btn"
@@ -3121,11 +3139,7 @@ var ToastContainer = class extends import_lit4.LitElement {
                   </button>` : import_lit4.nothing}
             </div>
             <div class="toast-close-wrap">
-              ${item.duration > 0 && item.type !== "loading" ? import_lit4.html`<svg
-                    class="toast-timer-ring"
-                    viewBox="0 0 24 24"
-                    aria-hidden="true"
-                  >
+              ${item.duration > 0 && item.type !== "loading" ? import_lit4.html`<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"