@birdapi/velinstyle 0.7.0 → 0.9.0

package/src/themes/soft.css

@@ -8,17 +8,14 @@
     --velin-radius-lg: 1rem;
     --velin-radius-xl: 1.5rem;
     --velin-radius-2xl: 2rem;
-
     --velin-color-primary: oklch(58% 0.14 280);
     --velin-color-primary-hover: oklch(52% 0.14 280);
     --velin-color-primary-active: oklch(46% 0.14 280);
     --velin-color-primary-subtle: oklch(95% 0.03 280);
     --velin-color-on-primary: oklch(100% 0 0);
-
     --velin-color-secondary: oklch(62% 0.1 340);
     --velin-color-secondary-hover: oklch(55% 0.1 340);
     --velin-color-secondary-subtle: oklch(95% 0.02 340);
-
     --velin-color-surface: oklch(98% 0.008 280);
     --velin-color-surface-dim: oklch(94% 0.008 280);
     --velin-color-surface-bright: oklch(100% 0.002 280);
@@ -26,20 +23,16 @@
     --velin-color-text-muted: oklch(50% 0.01 280);
     --velin-color-border: oklch(88% 0.01 280);
     --velin-color-border-strong: oklch(72% 0.01 280);
-
     --velin-shadow-sm: 0 1px 4px oklch(0% 0 0 / 0.04);
     --velin-shadow-md: 0 4px 12px oklch(0% 0 0 / 0.06);
     --velin-shadow-lg: 0 8px 24px oklch(0% 0 0 / 0.08);
     --velin-shadow-xl: 0 16px 40px oklch(0% 0 0 / 0.1);
-
     --velin-font-heading: "Nunito", "Quicksand", var(--velin-font-sans);
     --velin-font-body: "Nunito", "Quicksand", var(--velin-font-sans);
-
     --velin-weight-normal: 400;
     --velin-weight-medium: 600;
     --velin-weight-semibold: 700;
     --velin-weight-bold: 800;
-
     --velin-duration-normal: 250ms;
     --velin-ease-default: cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }

package/src/themes/sunset.css

@@ -11,18 +11,15 @@
     --velin-radius-2xl: 2rem;
     --velin-radius-full: 9999px;
     --velin-radius-pill: 9999px;
-
-    --velin-color-primary: oklch(70% 0.2 50);
+    --velin-color-primary: oklch(40% 0.18 50);
     --velin-color-primary-hover: oklch(63% 0.2 50);
     --velin-color-primary-active: oklch(57% 0.2 50);
     --velin-color-primary-subtle: oklch(95% 0.04 50);
     --velin-color-on-primary: oklch(100% 0 0);
-
     --velin-color-secondary: oklch(60% 0.2 350);
     --velin-color-secondary-hover: oklch(53% 0.2 350);
     --velin-color-secondary-subtle: oklch(94% 0.04 350);
     --velin-color-on-secondary: oklch(100% 0 0);
-
     --velin-color-surface: oklch(97% 0.01 60);
     --velin-color-surface-dim: oklch(93% 0.015 60);
     --velin-color-surface-bright: oklch(100% 0.005 60);
@@ -30,29 +27,23 @@
     --velin-color-text-muted: oklch(42% 0.04 40);
     --velin-color-border: oklch(85% 0.04 55);
     --velin-color-border-strong: oklch(65% 0.08 50);
-
     --velin-shadow-sm: 0 1px 4px oklch(50% 0.05 50 / 0.1);
     --velin-shadow-md: 0 4px 10px oklch(50% 0.05 50 / 0.14);
     --velin-shadow-lg: 0 8px 20px oklch(50% 0.05 50 / 0.16);
     --velin-shadow-xl: 0 12px 28px oklch(50% 0.05 50 / 0.2);
     --velin-shadow-2xl: 0 20px 44px oklch(50% 0.05 50 / 0.25);
-
     --velin-font-heading: "Outfit", sans-serif;
     --velin-font-body: "Inter", sans-serif;
-
     --velin-weight-normal: 400;
     --velin-weight-medium: 500;
     --velin-weight-semibold: 600;
     --velin-weight-bold: 700;
     --velin-weight-extrabold: 800;
-
     --velin-tracking-normal: 0;
     --velin-tracking-wide: 0.03em;
     --velin-tracking-wider: 0.06em;
-
     --velin-leading-tight: 1.2;
     --velin-leading-normal: 1.55;
-
     --velin-duration-normal: 200ms;
     --velin-duration-slow: 350ms;
   }

package/src/tokens/color.css

@@ -1,9 +1,10 @@
 @layer tokens {
   :root {
-    /* Primary palette */
-    --velin-color-primary: oklch(55% 0.15 250);
-    --velin-color-primary-hover: oklch(48% 0.15 250);
-    --velin-color-primary-active: oklch(42% 0.15 250);
+    /* Primary palette (AAA text/link contrast on light surfaces) */
+    --velin-color-primary: oklch(38% 0.18 250);
+    --velin-color-primary-text: oklch(38% 0.18 250);
+    --velin-color-primary-hover: oklch(32% 0.18 250);
+    --velin-color-primary-active: oklch(32% 0.18 250);
     --velin-color-primary-subtle: oklch(92% 0.04 250);
     --velin-color-on-primary: oklch(100% 0 0);
 
@@ -18,24 +19,27 @@
     --velin-color-surface: oklch(98% 0.005 250);
     --velin-color-surface-dim: oklch(93% 0.005 250);
     --velin-color-surface-bright: oklch(100% 0 0);
-    --velin-color-text: oklch(15% 0.01 250);
-    --velin-color-text-muted: oklch(45% 0.01 250);
-    --velin-color-text-subtle: oklch(60% 0.005 250);
-    --velin-color-border: oklch(82% 0.01 250);
-    --velin-color-border-strong: oklch(65% 0.01 250);
+    --velin-color-text: oklch(8% 0.01 250);
+    --velin-color-text-muted: oklch(28% 0.01 250);
+    --velin-color-text-subtle: oklch(38% 0.005 250);
+    --velin-color-border: oklch(35% 0.01 250);
+    --velin-color-border-strong: oklch(20% 0.01 250);
 
     /* Semantic: success */
     --velin-color-success: oklch(55% 0.16 145);
+    --velin-color-success-text: oklch(38% 0.16 145);
     --velin-color-success-subtle: oklch(92% 0.04 145);
     --velin-color-on-success: oklch(100% 0 0);
 
     /* Semantic: warning */
     --velin-color-warning: oklch(75% 0.15 85);
+    --velin-color-warning-text: oklch(42% 0.14 85);
     --velin-color-warning-subtle: oklch(95% 0.04 85);
     --velin-color-on-warning: oklch(20% 0.02 85);
 
     /* Semantic: danger */
     --velin-color-danger: oklch(55% 0.2 25);
+    --velin-color-danger-text: oklch(40% 0.2 25);
     --velin-color-danger-hover: oklch(48% 0.2 25);
     --velin-color-danger-subtle: oklch(92% 0.04 25);
     --velin-color-on-danger: oklch(100% 0 0);
@@ -48,51 +52,48 @@
     /* Overlay */
     --velin-color-overlay: oklch(0% 0 0 / 0.4);
 
-    /* Focus ring */
-    --velin-color-focus: oklch(60% 0.2 250);
+    /* Focus ring (AAA 2.4.13) */
+    --velin-color-focus: oklch(35% 0.22 250);
   }
 
   /* Dark mode: automatic via system preference */
   @media (prefers-color-scheme: dark) {
     :root:not([data-velin-theme="light"]) {
-      --velin-color-primary: oklch(72% 0.12 250);
-      --velin-color-primary-hover: oklch(78% 0.12 250);
-      --velin-color-primary-active: oklch(65% 0.12 250);
+      --velin-color-primary: oklch(48% 0.14 250);
+      --velin-color-primary-hover: oklch(55% 0.14 250);
+      --velin-color-primary-active: oklch(42% 0.14 250);
       --velin-color-primary-subtle: oklch(25% 0.06 250);
-      --velin-color-on-primary: oklch(10% 0.01 250);
-
+      --velin-color-on-primary: oklch(98% 0 0);
       --velin-color-secondary: oklch(72% 0.1 320);
       --velin-color-secondary-hover: oklch(78% 0.1 320);
       --velin-color-secondary-active: oklch(65% 0.1 320);
       --velin-color-secondary-subtle: oklch(25% 0.04 320);
       --velin-color-on-secondary: oklch(10% 0.01 320);
-
       --velin-color-surface: oklch(15% 0.01 250);
       --velin-color-surface-dim: oklch(10% 0.01 250);
       --velin-color-surface-bright: oklch(22% 0.01 250);
       --velin-color-text: oklch(92% 0.005 250);
-      --velin-color-text-muted: oklch(70% 0.005 250);
-      --velin-color-text-subtle: oklch(55% 0.005 250);
+      --velin-color-text-muted: oklch(85% 0.005 250);
+      --velin-color-text-subtle: oklch(72% 0.005 250);
       --velin-color-border: oklch(30% 0.01 250);
       --velin-color-border-strong: oklch(45% 0.01 250);
-
+      --velin-color-primary-text: oklch(82% 0.12 250);
       --velin-color-success: oklch(72% 0.14 145);
+      --velin-color-success-text: oklch(82% 0.14 145);
       --velin-color-success-subtle: oklch(25% 0.06 145);
       --velin-color-on-success: oklch(10% 0.01 145);
-
       --velin-color-warning: oklch(80% 0.12 85);
+      --velin-color-warning-text: oklch(80% 0.12 85);
       --velin-color-warning-subtle: oklch(25% 0.06 85);
       --velin-color-on-warning: oklch(10% 0.02 85);
-
-      --velin-color-danger: oklch(70% 0.16 25);
-      --velin-color-danger-hover: oklch(76% 0.16 25);
+      --velin-color-danger: oklch(52% 0.16 25);
+      --velin-color-danger-text: oklch(82% 0.16 25);
+      --velin-color-danger-hover: oklch(58% 0.16 25);
       --velin-color-danger-subtle: oklch(25% 0.06 25);
-      --velin-color-on-danger: oklch(10% 0.01 25);
-
+      --velin-color-on-danger: oklch(98% 0 0);
       --velin-color-info: oklch(72% 0.1 240);
       --velin-color-info-subtle: oklch(25% 0.04 240);
       --velin-color-on-info: oklch(10% 0.01 240);
-
       --velin-color-overlay: oklch(0% 0 0 / 0.6);
       --velin-color-focus: oklch(72% 0.18 250);
     }
@@ -100,45 +101,43 @@
 
   /* Dark mode: explicit attribute */
   [data-velin-theme="dark"] {
-    --velin-color-primary: oklch(72% 0.12 250);
-    --velin-color-primary-hover: oklch(78% 0.12 250);
-    --velin-color-primary-active: oklch(65% 0.12 250);
+    --velin-color-primary: oklch(48% 0.12 250);
+    --velin-color-primary-text: oklch(82% 0.12 250);
+    --velin-color-primary-hover: oklch(55% 0.12 250);
+    --velin-color-primary-active: oklch(42% 0.12 250);
     --velin-color-primary-subtle: oklch(25% 0.06 250);
-    --velin-color-on-primary: oklch(10% 0.01 250);
-
+    --velin-color-on-primary: oklch(98% 0 0);
     --velin-color-secondary: oklch(72% 0.1 320);
     --velin-color-secondary-hover: oklch(78% 0.1 320);
     --velin-color-secondary-active: oklch(65% 0.1 320);
     --velin-color-secondary-subtle: oklch(25% 0.04 320);
     --velin-color-on-secondary: oklch(10% 0.01 320);
-
     --velin-color-surface: oklch(15% 0.01 250);
     --velin-color-surface-dim: oklch(10% 0.01 250);
     --velin-color-surface-bright: oklch(22% 0.01 250);
     --velin-color-text: oklch(92% 0.005 250);
-    --velin-color-text-muted: oklch(70% 0.005 250);
-    --velin-color-text-subtle: oklch(55% 0.005 250);
-    --velin-color-border: oklch(30% 0.01 250);
-    --velin-color-border-strong: oklch(45% 0.01 250);
-
+      --velin-color-text-muted: oklch(88% 0.005 250);
+      --velin-color-text-subtle: oklch(78% 0.005 250);
+      --velin-color-border: oklch(30% 0.01 250);
+      --velin-color-border-strong: oklch(45% 0.01 250);
+      --velin-color-primary-text: oklch(82% 0.12 250);
     --velin-color-success: oklch(72% 0.14 145);
+    --velin-color-success-text: oklch(82% 0.14 145);
     --velin-color-success-subtle: oklch(25% 0.06 145);
     --velin-color-on-success: oklch(10% 0.01 145);
-
     --velin-color-warning: oklch(80% 0.12 85);
+    --velin-color-warning-text: oklch(80% 0.12 85);
     --velin-color-warning-subtle: oklch(25% 0.06 85);
     --velin-color-on-warning: oklch(10% 0.02 85);
-
-    --velin-color-danger: oklch(70% 0.16 25);
+    --velin-color-danger: oklch(52% 0.16 25);
+    --velin-color-danger-text: oklch(82% 0.16 25);
     --velin-color-danger-hover: oklch(76% 0.16 25);
     --velin-color-danger-subtle: oklch(25% 0.06 25);
-    --velin-color-on-danger: oklch(10% 0.01 25);
-
+    --velin-color-on-danger: oklch(98% 0 0);
     --velin-color-info: oklch(72% 0.1 240);
     --velin-color-info-subtle: oklch(25% 0.04 240);
-    --velin-color-on-info: oklch(10% 0.01 240);
-
+    --velin-color-on-info: oklch(98% 0 0);
     --velin-color-overlay: oklch(0% 0 0 / 0.6);
-    --velin-color-focus: oklch(72% 0.18 250);
+    --velin-color-focus: oklch(82% 0.18 250);
   }
 }

package/src/tokens/fonts.css

@@ -0,0 +1,10 @@
+@layer tokens {
+  :root {
+    --velin-font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    --velin-font-text: var(--velin-font-display);
+    --velin-font-code: "JetBrains Mono", "Cascadia Code", "Fira Code", Consolas, monospace;
+    --velin-font-features: "cv02", "ss01";
+    --velin-font-optical: auto;
+    --velin-font-size-adjust-fallback: 0.52;
+  }
+}

package/src/tokens/motion.css

@@ -6,6 +6,8 @@
     --velin-duration-normal: 200ms;
     --velin-duration-slow: 300ms;
     --velin-duration-slower: 500ms;
+    --velin-duration-slowest: 800ms;
+    --velin-duration-cinematic: 1200ms;
 
     /* Easing curves */
     --velin-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
@@ -13,6 +15,11 @@
     --velin-ease-out: cubic-bezier(0, 0, 0.2, 1);
     --velin-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --velin-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --velin-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1.4);
+    --velin-ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);
+    --velin-ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);
+    --velin-ease-back-out: cubic-bezier(0.34, 1.4, 0.64, 1);
+    --velin-ease-snappy: cubic-bezier(0.2, 0.8, 0.2, 1);
 
     /* Common transitions */
     --velin-transition-colors: color var(--velin-duration-normal) var(--velin-ease-default),

package/src/tokens/typography.css

@@ -1,16 +1,15 @@
 @layer tokens {
   :root {
     /* Font families */
-    --velin-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    --velin-font-sans: var(--velin-font-text, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
     --velin-font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
-    --velin-font-mono: "Cascadia Code", "Fira Code", Consolas, "Courier New", monospace;
-    --velin-font-heading: var(--velin-font-sans);
-    --velin-font-body: var(--velin-font-sans);
+    --velin-font-mono: var(--velin-font-code, "Cascadia Code", "Fira Code", Consolas, "Courier New", monospace);
+    --velin-font-heading: var(--velin-font-display, var(--velin-font-sans));
+    --velin-font-body: var(--velin-font-text, var(--velin-font-sans));
 
     /* Fluid Type Scale -- clamp(min, preferred, max) */
     --velin-fluid-min-vw: 20;  /* 320px */
     --velin-fluid-max-vw: 90;  /* 1440px */
-
     --velin-text-xs: clamp(0.625rem, 0.6rem + 0.1vw, 0.75rem);
     --velin-text-sm: clamp(0.8rem, 0.76rem + 0.15vw, 0.875rem);
     --velin-text-base: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);

package/src/utilities/animation.css

@@ -186,10 +186,10 @@
   }
 
   @keyframes velin-flip {
-    from { opacity: 0; transform: perspective(400px) rotateY(90deg); }
+    0% { opacity: 0; transform: perspective(400px) rotateY(90deg); }
     40% { transform: perspective(400px) rotateY(-15deg); }
     70% { transform: perspective(400px) rotateY(15deg); }
-    to { opacity: 1; transform: perspective(400px) rotateY(0); }
+    100% { opacity: 1; transform: perspective(400px) rotateY(0); }
   }
 
   @keyframes velin-drop-in {
@@ -259,5 +259,101 @@
 
   /* === Hover trigger === */
   .velin-animate-hover { animation-play-state: paused; }
-  .velin-animate-hover:hover { animation-play-state: running; }
+  @media (hover: hover) and (pointer: fine) {
+    .velin-animate-hover:hover { animation-play-state: running; }
+  }
+
+  /* === 0.7.5 Animations === */
+  .velin-animate-blur-in {
+    animation: velin-blur-in var(--velin-duration-normal) var(--velin-ease-out) both;
+  }
+  .velin-animate-blur-out {
+    animation: velin-blur-out var(--velin-duration-normal) var(--velin-ease-in) both;
+  }
+  .velin-animate-rotate-in {
+    animation: velin-rotate-in var(--velin-duration-normal) var(--velin-ease-out) both;
+  }
+  .velin-animate-float {
+    animation: velin-float 3s var(--velin-ease-in-out) infinite;
+  }
+  .velin-animate-flash {
+    animation: velin-flash 0.6s var(--velin-ease-default) both;
+  }
+  .velin-animate-reveal-up {
+    animation: velin-reveal-up var(--velin-duration-normal) var(--velin-ease-out) both;
+  }
+  .velin-animate-reveal-down {
+    animation: velin-reveal-down var(--velin-duration-normal) var(--velin-ease-out) both;
+  }
+  .velin-animate-glow {
+    animation: velin-glow 2s var(--velin-ease-in-out) infinite;
+  }
+  .velin-animate-slide-fade-left {
+    animation: velin-slide-fade-left var(--velin-duration-normal) var(--velin-ease-out) both;
+  }
+  .velin-animate-slide-fade-right {
+    animation: velin-slide-fade-right var(--velin-duration-normal) var(--velin-ease-out) both;
+  }
+
+  @keyframes velin-blur-in {
+    from { opacity: 0; filter: blur(8px); }
+    to { opacity: 1; filter: blur(0); }
+  }
+  @keyframes velin-blur-out {
+    from { opacity: 1; filter: blur(0); }
+    to { opacity: 0; filter: blur(8px); }
+  }
+  @keyframes velin-rotate-in {
+    from { opacity: 0; transform: rotate(-8deg) scale(0.95); }
+    to { opacity: 1; transform: rotate(0) scale(1); }
+  }
+  @keyframes velin-float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-0.35rem); }
+  }
+  @keyframes velin-flash {
+    0%, 50%, 100% { opacity: 1; }
+    25%, 75% { opacity: 0.35; }
+  }
+  @keyframes velin-reveal-up {
+    from { clip-path: inset(100% 0 0 0); opacity: 0; }
+    to { clip-path: inset(0 0 0 0); opacity: 1; }
+  }
+  @keyframes velin-reveal-down {
+    from { clip-path: inset(0 0 100% 0); opacity: 0; }
+    to { clip-path: inset(0 0 0 0); opacity: 1; }
+  }
+  @keyframes velin-glow {
+    0%, 100% { box-shadow: 0 0 0 0 transparent; }
+    50% { box-shadow: 0 0 1rem 0 color-mix(in oklch, var(--velin-color-primary, #2563eb) 35%, transparent); }
+  }
+  @keyframes velin-slide-fade-left {
+    from { opacity: 0; transform: translateX(1rem); }
+    to { opacity: 1; transform: translateX(0); }
+  }
+  @keyframes velin-slide-fade-right {
+    from { opacity: 0; transform: translateX(-1rem); }
+    to { opacity: 1; transform: translateX(0); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .velin-animate-blur-in,
+    .velin-animate-blur-out,
+    .velin-animate-rotate-in,
+    .velin-animate-reveal-up,
+    .velin-animate-reveal-down,
+    .velin-animate-slide-fade-left,
+    .velin-animate-slide-fade-right {
+      animation: none;
+      opacity: 1;
+      filter: none;
+      transform: none;
+      clip-path: none;
+    }
+    .velin-animate-float,
+    .velin-animate-glow,
+    .velin-animate-flash {
+      animation: none;
+    }
+  }
 }

package/src/utilities/chart-animation.css

@@ -0,0 +1,101 @@
+/*
+ * Chart animation utilities — keyframes and helpers for sparkline draw-in,
+ * value bumps, live pulses, and count-up fades. Consumed by the
+ * <velin-sparkline>, <velin-counter>, <velin-live-dot> Web Components plus
+ * any plain SVG/HTML that wants a "live" feel without a chart library.
+ *
+ * Each animated class is gated by `prefers-reduced-motion: reduce` so the
+ * baseline experience stays calm. CSS custom properties exposed so authors
+ * can re-skin without forking selectors.
+ */
+
+@layer utilities {
+  /* === Keyframes === */
+  @keyframes velin-stroke-draw {
+    from { stroke-dashoffset: var(--velin-chart-len, 1000); }
+    to { stroke-dashoffset: 0; }
+  }
+
+  @keyframes velin-sparkline-glow {
+    0%, 100% {
+      filter: drop-shadow(0 0 0 transparent);
+    }
+    50% {
+      filter: drop-shadow(0 0 0.5rem color-mix(in oklch, var(--velin-chart-glow-color, var(--velin-color-primary, #2563eb)) 50%, transparent));
+    }
+  }
+
+  @keyframes velin-value-bump {
+    0% { transform: scale(1); }
+    35% { transform: scale(1.06); color: var(--velin-chart-bump-color, var(--velin-color-primary, #2563eb)); }
+    100% { transform: scale(1); }
+  }
+
+  @keyframes velin-live-pulse {
+    0% {
+      box-shadow: 0 0 0 0 color-mix(in oklch, var(--velin-live-color, var(--velin-color-success, oklch(60% 0.16 145))) 65%, transparent);
+    }
+    70% {
+      box-shadow: 0 0 0 0.65rem color-mix(in oklch, var(--velin-live-color, var(--velin-color-success, oklch(60% 0.16 145))) 0%, transparent);
+    }
+    100% {
+      box-shadow: 0 0 0 0 transparent;
+    }
+  }
+
+  @keyframes velin-count-fade {
+    from { opacity: 0; transform: translateY(0.4rem); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  /* === Utility classes === */
+  .velin-chart-line {
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-dasharray: var(--velin-chart-len, 1000);
+    stroke-dashoffset: 0;
+    animation: velin-stroke-draw var(--velin-duration-cinematic, 1200ms) var(--velin-ease-expo-out, ease-out) both;
+  }
+
+  .velin-chart-area {
+    fill: var(--velin-chart-area-fill, currentColor);
+    opacity: 0;
+    animation: velin-count-fade var(--velin-duration-slowest, 800ms) var(--velin-ease-expo-out, ease-out) 200ms forwards;
+  }
+
+  .velin-chart-glow {
+    animation: velin-sparkline-glow 2.4s var(--velin-ease-in-out, ease-in-out) infinite;
+  }
+
+  .velin-spark-tick {
+    animation: velin-value-bump var(--velin-duration-slow, 300ms) var(--velin-ease-spring, ease-out) both;
+  }
+
+  .velin-live-pulse {
+    animation: velin-live-pulse 1.8s var(--velin-ease-out, ease-out) infinite;
+    border-radius: 50%;
+  }
+
+  .velin-count-fade {
+    animation: velin-count-fade var(--velin-duration-slow, 300ms) var(--velin-ease-expo-out, ease-out) both;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .velin-chart-line,
+    .velin-chart-area,
+    .velin-chart-glow,
+    .velin-spark-tick,
+    .velin-live-pulse,
+    .velin-count-fade {
+      animation: none;
+      stroke-dashoffset: 0;
+      opacity: 1;
+      transform: none;
+      filter: none;
+      box-shadow: none;
+    }
+  }
+}

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); }