@birdapi/velinstyle 1.2.1 → 1.3.0

package/dist/velinstyle.css

@@ -228,6 +228,11 @@
     --velin-duration-slower: .5s;
     --velin-duration-slowest: .8s;
     --velin-duration-cinematic: 1.2s;
+    --velin-motion-fast: var(--velin-duration-fast);
+    --velin-motion-normal: var(--velin-duration-normal);
+    --velin-motion-slow: var(--velin-duration-slow);
+    --velin-bounce: var(--velin-ease-bounce);
+    --velin-spring: var(--velin-ease-spring);
     --velin-ease-default: cubic-bezier(.4, 0, .2, 1);
     --velin-ease-in: cubic-bezier(.4, 0, 1, 1);
     --velin-ease-out: cubic-bezier(0, 0, .2, 1);
@@ -3176,30 +3181,35 @@
     font-size: var(--velin-text-sm);
   }
 
-  .velin-table-primary {
+  .velin-table-primary, .velin-table--primary {
     background-color: color-mix(in oklch, var(--velin-color-primary) 10%, transparent);
   }
 
-  .velin-table-secondary {
+  .velin-table-secondary, .velin-table--secondary {
     background-color: color-mix(in oklch, var(--velin-color-secondary) 10%, transparent);
   }
 
-  .velin-table-success {
+  .velin-table-success, .velin-table--success {
     background-color: color-mix(in oklch, var(--velin-color-success) 10%, transparent);
   }
 
-  .velin-table-warning {
+  .velin-table-warning, .velin-table--warning {
     background-color: color-mix(in oklch, var(--velin-color-warning) 10%, transparent);
   }
 
-  .velin-table-danger {
+  .velin-table-danger, .velin-table--danger {
     background-color: color-mix(in oklch, var(--velin-color-danger) 10%, transparent);
   }
 
-  .velin-table-info {
+  .velin-table-info, .velin-table--info {
     background-color: color-mix(in oklch, var(--velin-color-info) 10%, transparent);
   }
 
+  .velin-table--selected {
+    background-color: color-mix(in oklch, var(--velin-color-primary) 12%, transparent);
+    box-shadow: inset 3px 0 0 var(--velin-color-primary);
+  }
+
   .velin-table .velin-caption-top {
     caption-side: top;
     padding-block: var(--velin-space-2);
@@ -3306,6 +3316,21 @@
     text-align: center;
   }
 
+  .velin-data-table__row--danger, .velin-data-table tr[data-severity="danger"] {
+    background-color: color-mix(in oklch, var(--velin-color-danger) 12%, transparent);
+    box-shadow: inset 3px 0 0 var(--velin-color-danger);
+  }
+
+  .velin-data-table__row--warning, .velin-data-table tr[data-severity="warning"] {
+    background-color: color-mix(in oklch, var(--velin-color-warning) 12%, transparent);
+    box-shadow: inset 3px 0 0 var(--velin-color-warning);
+  }
+
+  .velin-data-table__row--selected, .velin-data-table tr[data-severity="selected"] {
+    background-color: color-mix(in oklch, var(--velin-color-primary) 12%, transparent);
+    box-shadow: inset 3px 0 0 var(--velin-color-primary);
+  }
+
   .velin-data-table__pagination {
     justify-content: space-between;
     align-items: center;
@@ -5222,6 +5247,34 @@
     inset-block-start: var(--velin-space-2);
     inset-inline-end: var(--velin-space-2);
   }
+
+  .velin-otp-input, .velin-password-strength {
+    display: block;
+  }
+
+  .velin-empty-state {
+    text-align: center;
+    padding: var(--velin-space-8) var(--velin-space-4);
+    display: block;
+  }
+
+  .velin-empty-state__title {
+    margin: 0 0 var(--velin-space-2);
+    font-size: var(--velin-text-xl);
+    font-weight: var(--velin-weight-bold);
+  }
+
+  .velin-empty-state__description {
+    margin: 0 0 var(--velin-space-4);
+    color: var(--velin-color-text-muted);
+  }
+
+  .velin-empty-state__actions {
+    gap: var(--velin-space-3);
+    flex-wrap: wrap;
+    justify-content: center;
+    display: flex;
+  }
 }
 
 @layer utilities {
@@ -6957,7 +7010,7 @@
   @keyframes velin-slide-up {
     from {
       opacity: 0;
-      transform: translateY(1rem);
+      transform: translateY(2rem);
     }
 
     to {
@@ -6969,7 +7022,7 @@
   @keyframes velin-slide-down {
     from {
       opacity: 0;
-      transform: translateY(-1rem);
+      transform: translateY(-2rem);
     }
 
     to {
@@ -6981,7 +7034,7 @@
   @keyframes velin-slide-left {
     from {
       opacity: 0;
-      transform: translateX(1rem);
+      transform: translateX(2rem);
     }
 
     to {
@@ -6993,7 +7046,7 @@
   @keyframes velin-slide-right {
     from {
       opacity: 0;
-      transform: translateX(-1rem);
+      transform: translateX(-2rem);
     }
 
     to {
@@ -7005,7 +7058,7 @@
   @keyframes velin-scale-in {
     from {
       opacity: 0;
-      transform: scale(.9);
+      transform: scale(.92);
     }
 
     to {
@@ -9194,6 +9247,21 @@
     animation-range: entry entry 60%;
   }
 
+  .velin-animate-on-scroll--slide-down {
+    animation: linear both velin-slide-down view();
+    animation-range: entry entry 60%;
+  }
+
+  .velin-animate-on-scroll--slide-left {
+    animation: linear both velin-slide-left view();
+    animation-range: entry entry 60%;
+  }
+
+  .velin-animate-on-scroll--slide-right {
+    animation: linear both velin-slide-right view();
+    animation-range: entry entry 60%;
+  }
+
   .velin-animate-on-scroll--scale {
     animation: linear both velin-scale-in view();
     animation-range: entry entry 80%;
@@ -9281,12 +9349,27 @@
       transform: translateY(2rem);
     }
 
+    .velin-animate-on-scroll--slide-down:not(.velin-in-view) {
+      opacity: 0;
+      transform: translateY(-2rem);
+    }
+
+    .velin-animate-on-scroll--slide-left:not(.velin-in-view) {
+      opacity: 0;
+      transform: translateX(2rem);
+    }
+
+    .velin-animate-on-scroll--slide-right:not(.velin-in-view) {
+      opacity: 0;
+      transform: translateX(-2rem);
+    }
+
     .velin-animate-on-scroll--scale:not(.velin-in-view) {
       opacity: 0;
       transform: scale(.92);
     }
 
-    .velin-animate-on-scroll.velin-in-view, .velin-animate-on-scroll--fade.velin-in-view, .velin-animate-on-scroll--slide-up.velin-in-view, .velin-animate-on-scroll--scale.velin-in-view {
+    .velin-animate-on-scroll.velin-in-view, .velin-animate-on-scroll--fade.velin-in-view, .velin-animate-on-scroll--slide-up.velin-in-view, .velin-animate-on-scroll--slide-down.velin-in-view, .velin-animate-on-scroll--slide-left.velin-in-view, .velin-animate-on-scroll--slide-right.velin-in-view, .velin-animate-on-scroll--scale.velin-in-view {
       opacity: 1;
       transition: opacity var(--velin-duration-normal, .4s) var(--velin-ease-out, ease-out),
         transform var(--velin-duration-normal, .4s) var(--velin-ease-out, ease-out);
@@ -9299,7 +9382,7 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .velin-animate-on-scroll, .velin-animate-on-scroll--fade, .velin-animate-on-scroll--slide-up, .velin-animate-on-scroll--scale, .velin-parallax, .velin-parallax--slow {
+    .velin-animate-on-scroll, .velin-animate-on-scroll--fade, .velin-animate-on-scroll--slide-up, .velin-animate-on-scroll--slide-down, .velin-animate-on-scroll--slide-left, .velin-animate-on-scroll--slide-right, .velin-animate-on-scroll--scale, .velin-parallax, .velin-parallax--slow {
       opacity: 1;
       animation: none;
       transform: none;

package/dist/velinstyle.d.ts

@@ -29,6 +29,7 @@ declare global {
     'velin-drawer': HTMLElement;
     'velin-dropdown': HTMLElement;
     'velin-email': HTMLElement;
+    'velin-empty-state': HTMLElement;
     'velin-file-dropzone': HTMLElement;
     'velin-form-summary': HTMLElement;
     'velin-icon': HTMLElement;
@@ -36,6 +37,8 @@ declare global {
     'velin-live-dot': HTMLElement;
     'velin-menubar': HTMLElement;
     'velin-modal': HTMLElement;
+    'velin-otp-input': HTMLElement;
+    'velin-password-strength': HTMLElement;
     'velin-persist': HTMLElement;
     'velin-popover': HTMLElement;
     'velin-progress-ring': HTMLElement;