@birdapi/velinstyle 0.8.0 → 0.9.0

package/src/utilities/display.css

@@ -28,7 +28,7 @@
   .velin-opacity-100 { opacity: 1; }
 
   /* Responsive display via min-width */
-  @media (min-width: 36rem) {
+  @media (width >= 36rem) {
     .velin-sm-block { display: block; }
     .velin-sm-flex { display: flex; }
     .velin-sm-grid { display: grid; }
@@ -36,7 +36,7 @@
     .velin-sm-inline { display: inline; }
   }
 
-  @media (min-width: 48rem) {
+  @media (width >= 48rem) {
     .velin-md-block { display: block; }
     .velin-md-flex { display: flex; }
     .velin-md-grid { display: grid; }
@@ -44,7 +44,7 @@
     .velin-md-inline { display: inline; }
   }
 
-  @media (min-width: 62rem) {
+  @media (width >= 62rem) {
     .velin-lg-block { display: block; }
     .velin-lg-flex { display: flex; }
     .velin-lg-grid { display: grid; }

package/src/utilities/divide.css

@@ -8,15 +8,11 @@
   }
 
   .velin-divide-y-2 > * + * {
-    border-block-start-width: 2px;
-    border-block-start-style: solid;
-    border-block-start-color: var(--velin-color-border);
+    border-block-start: 2px solid var(--velin-color-border);
   }
 
   .velin-divide-x-2 > * + * {
-    border-inline-start-width: 2px;
-    border-inline-start-style: solid;
-    border-inline-start-color: var(--velin-color-border);
+    border-inline-start: 2px solid var(--velin-color-border);
   }
 
   .velin-divide-primary > * + * { border-color: var(--velin-color-primary); }

package/src/utilities/responsive.css

@@ -6,7 +6,7 @@
      =================================================================== */
 
   /* --- SM (min-width: 36rem / 576px) --- */
-  @media (min-width: 36rem) {
+  @media (width >= 36rem) {
     /* Display (extending existing) */
     .velin-sm-inline-block { display: inline-block; }
     .velin-sm-inline-flex { display: inline-flex; }
@@ -81,7 +81,7 @@
   }
 
   /* --- MD (min-width: 48rem / 768px) --- */
-  @media (min-width: 48rem) {
+  @media (width >= 48rem) {
     /* Display */
     .velin-md-inline-block { display: inline-block; }
     .velin-md-inline-flex { display: inline-flex; }
@@ -174,7 +174,7 @@
   }
 
   /* --- LG (min-width: 62rem / 992px) --- */
-  @media (min-width: 62rem) {
+  @media (width >= 62rem) {
     /* Display */
     .velin-lg-inline-block { display: inline-block; }
     .velin-lg-inline-flex { display: inline-flex; }
@@ -259,7 +259,7 @@
   }
 
   /* --- XL (min-width: 80rem / 1280px) --- */
-  @media (min-width: 80rem) {
+  @media (width >= 80rem) {
     /* Display */
     .velin-xl-block { display: block; }
     .velin-xl-flex { display: flex; }

package/src/utilities/safe-area.css

@@ -27,7 +27,7 @@
     display: none;
   }
 
-  @media (min-width: 48rem) {
+  @media (width >= 48rem) {
     .velin-mobile-only {
       display: none;
     }

package/src/utilities/scroll-animation.css

@@ -74,6 +74,40 @@
     to { transform: translateY(5%); }
   }
 
+  /* JS motion runtime (initMotion) — IntersectionObserver + .velin-in-view */
+  @supports not (animation-timeline: view()) {
+    .velin-animate-on-scroll:not(.velin-in-view) {
+      opacity: 0;
+      transform: translateY(1.5rem);
+    }
+    .velin-animate-on-scroll--fade:not(.velin-in-view) {
+      opacity: 0;
+      transform: none;
+    }
+    .velin-animate-on-scroll--slide-up:not(.velin-in-view) {
+      opacity: 0;
+      transform: translateY(2rem);
+    }
+    .velin-animate-on-scroll--scale:not(.velin-in-view) {
+      opacity: 0;
+      transform: scale(0.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 {
+      opacity: 1;
+      transform: none;
+      transition:
+        opacity var(--velin-duration-normal, 400ms) var(--velin-ease-out, ease-out),
+        transform var(--velin-duration-normal, 400ms) var(--velin-ease-out, ease-out);
+    }
+  }
+
+  .velin-stagger-item {
+    transition-delay: var(--velin-stagger-delay, 0ms);
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .velin-animate-on-scroll,
     .velin-animate-on-scroll--fade,

package/src/utilities/spacing.css

@@ -9,14 +9,23 @@
   .velin-m-8 { margin: var(--velin-space-8); }
   .velin-m-auto { margin: auto; }
 
-  /* Margin - block (top/bottom via logical props) */
-  .velin-mb-0 { margin-block: var(--velin-space-0); }
-  .velin-mb-1 { margin-block: var(--velin-space-1); }
-  .velin-mb-2 { margin-block: var(--velin-space-2); }
-  .velin-mb-3 { margin-block: var(--velin-space-3); }
-  .velin-mb-4 { margin-block: var(--velin-space-4); }
-  .velin-mb-6 { margin-block: var(--velin-space-6); }
-  .velin-mb-8 { margin-block: var(--velin-space-8); }
+  /* Margin - bottom */
+  .velin-mb-0 { margin-bottom: var(--velin-space-0); }
+  .velin-mb-1 { margin-bottom: var(--velin-space-1); }
+  .velin-mb-2 { margin-bottom: var(--velin-space-2); }
+  .velin-mb-3 { margin-bottom: var(--velin-space-3); }
+  .velin-mb-4 { margin-bottom: var(--velin-space-4); }
+  .velin-mb-6 { margin-bottom: var(--velin-space-6); }
+  .velin-mb-8 { margin-bottom: var(--velin-space-8); }
+
+  /* Margin - block axis (top + bottom) */
+  .velin-my-0 { margin-block: var(--velin-space-0); }
+  .velin-my-1 { margin-block: var(--velin-space-1); }
+  .velin-my-2 { margin-block: var(--velin-space-2); }
+  .velin-my-3 { margin-block: var(--velin-space-3); }
+  .velin-my-4 { margin-block: var(--velin-space-4); }
+  .velin-my-6 { margin-block: var(--velin-space-6); }
+  .velin-my-8 { margin-block: var(--velin-space-8); }
 
   /* Margin - inline (left/right via logical props) */
   .velin-mi-0 { margin-inline: var(--velin-space-0); }

package/src/utilities/text.css

@@ -22,6 +22,10 @@
   .velin-font-sans { font-family: var(--velin-font-sans); }
   .velin-font-serif { font-family: var(--velin-font-serif); }
   .velin-font-mono { font-family: var(--velin-font-mono); }
+  .velin-font-display { font-family: var(--velin-font-display); }
+  .velin-font-text { font-family: var(--velin-font-text); }
+  .velin-tabular-nums { font-variant-numeric: tabular-nums; }
+  .velin-text-pretty { text-wrap: pretty; }
 
   /* Text align */
   .velin-text-start { text-align: start; }
@@ -85,7 +89,6 @@
 
   /* Text-wrap */
   .velin-text-balance { text-wrap: balance; }
-  .velin-text-pretty { text-wrap: pretty; }
   .velin-text-nowrap { text-wrap: nowrap; }
 
   /* Extended line-clamp */

package/src/velinstyle.css

@@ -7,6 +7,7 @@
 /* Design Tokens */
 @import "tokens/color.css";
 @import "tokens/spacing.css";
+@import "tokens/fonts.css";
 @import "tokens/typography.css";
 @import "tokens/radius.css";
 @import "tokens/shadow.css";
@@ -16,6 +17,7 @@
 
 /* Base */
 @import "base/reset.css";
+@import "base/wc-placeholder.css";
 @import "base/focus.css";
 @import "base/content.css";
 
@@ -29,6 +31,10 @@
 @import "a11y/focus-not-obscured.css";
 @import "a11y/target-size.css";
 @import "a11y/high-contrast-aaa.css";
+@import "a11y/authentication.css";
+@import "a11y/consistent-help.css";
+@import "a11y/dragging-alternatives.css";
+@import "a11y/focus-appearance.css";
 
 /* Layout */
 @import "layout/breakpoints.css";
@@ -63,6 +69,9 @@
 @import "components/input-group.css";
 @import "components/form-validation.css";
 @import "components/collapse.css";
+@import "components/search.css";
+@import "components/attributes.css";
+@import "components/highlight.css";
 
 /* Utilities */
 @import "utilities/color.css";