@portel/photon 1.16.1 → 1.17.0

package/dist/beam-form.bundle.js

@@ -1394,6 +1394,91 @@ var motion = i`
     }
   }
 
+  /* ═══ SKELETON LOADING ═══ */
+
+  @keyframes skeleton-shimmer {
+    0% {
+      background-position: -200% 0;
+    }
+    100% {
+      background-position: 200% 0;
+    }
+  }
+
+  .skeleton {
+    background: linear-gradient(
+      90deg,
+      var(--bg-glass, rgba(255, 255, 255, 0.03)) 25%,
+      var(--bg-tertiary, rgba(255, 255, 255, 0.06)) 50%,
+      var(--bg-glass, rgba(255, 255, 255, 0.03)) 75%
+    );
+    background-size: 200% 100%;
+    animation: skeleton-shimmer 1.8s ease-in-out infinite;
+    border-radius: var(--radius-sm, 4px);
+  }
+
+  .skeleton-line {
+    height: 14px;
+    margin-bottom: 8px;
+  }
+
+  .skeleton-line.short {
+    width: 40%;
+  }
+  .skeleton-line.medium {
+    width: 65%;
+  }
+  .skeleton-line.long {
+    width: 90%;
+  }
+
+  .skeleton-block {
+    height: 100px;
+    margin-bottom: 12px;
+  }
+
+  .skeleton-circle {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+  }
+
+  /* Pre-built skeleton layouts */
+  .skeleton-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    padding: 4px 0;
+  }
+
+  .skeleton-list-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 12px;
+  }
+
+  .skeleton-list-item .skeleton-line {
+    margin-bottom: 0;
+  }
+
+  .skeleton-table {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .skeleton-table-row {
+    display: flex;
+    gap: 12px;
+    padding: 8px 12px;
+  }
+
+  .skeleton-table-row .skeleton-line {
+    flex: 1;
+    margin-bottom: 0;
+  }
+
   /* ═══ SLIDE TRANSITIONS (for @format slides) ═══ */
 
   .motion-slide-transition-fade {
@@ -1495,6 +1580,10 @@ var ToastManager = class extends i4 {
                   <path d="M18 6L6 18M6 6l12 12" />
                 </svg>
               </button>
+              ${toast.duration > 0 ? b2`<div
+                    class="toast-progress"
+                    style="animation-duration:${toast.duration}ms"
+                  ></div>` : ""}
             </div>
           `
     )}
@@ -1638,6 +1727,48 @@ ToastManager.styles = [
         background: var(--bg-glass);
         border-color: var(--accent-secondary);
       }
+
+      /* Progress countdown bar */
+      .toast-progress {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        height: 2px;
+        border-radius: 0 0 var(--radius-sm) var(--radius-sm);
+        animation: toast-countdown linear forwards;
+      }
+
+      @keyframes toast-countdown {
+        from {
+          width: 100%;
+        }
+        to {
+          width: 0%;
+        }
+      }
+
+      .toast.success .toast-progress {
+        background: var(--color-success);
+      }
+      .toast.error .toast-progress {
+        background: var(--color-error);
+      }
+      .toast.info .toast-progress {
+        background: var(--accent-secondary);
+      }
+      .toast.warning .toast-progress {
+        background: var(--color-warning);
+      }
+
+      .toast {
+        position: relative;
+        overflow: hidden;
+      }
+
+      /* Pause countdown on hover */
+      .toast:hover .toast-progress {
+        animation-play-state: paused;
+      }
     `
 ];
 ToastManager.instance = null;