@shift-css/core 0.6.0 → 0.7.0

package/dist/utils/scroll.css

@@ -0,0 +1,233 @@
+[s-scroll-progress] {
+  --_scroll-progress-z: var(--s-scroll-progress-z, 1000);
+  height: 3px;
+  z-index: var(--_scroll-progress-z);
+  background: var(--s-interactive-primary);
+  transform-origin: 0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  transform: scaleX(0);
+}
+
+@supports (animation-timeline: scroll()) {
+  [s-scroll-progress] {
+    animation-name: s-scroll-progress-grow;
+    animation-duration: 1ms;
+    animation-timing-function: linear;
+    animation-fill-mode: both;
+    animation-timeline: scroll();
+  }
+
+  @keyframes s-scroll-progress-grow {
+    from {
+      transform: scaleX(0);
+    }
+
+    to {
+      transform: scaleX(1);
+    }
+  }
+}
+
+[s-scroll-progress="secondary"] {
+  background: var(--s-secondary-500);
+}
+
+[s-scroll-progress="accent"] {
+  background: var(--s-accent-500);
+}
+
+[s-scroll-progress="gradient"] {
+  background: linear-gradient(90deg,
+    var(--s-primary-500),
+    var(--s-secondary-500),
+    var(--s-accent-500));
+}
+
+[s-scroll-reveal] {
+  opacity: 1;
+}
+
+@supports (animation-timeline: view()) {
+  [s-scroll-reveal] {
+    animation: linear both s-scroll-fade-in view();
+    animation-range: entry;
+  }
+
+  @keyframes s-scroll-fade-in {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  [s-scroll-reveal="slide-up"] {
+    animation-name: s-scroll-slide-up;
+  }
+
+  @keyframes s-scroll-slide-up {
+    from {
+      opacity: 0;
+      transform: translateY(2rem);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  [s-scroll-reveal="slide-down"] {
+    animation-name: s-scroll-slide-down;
+  }
+
+  @keyframes s-scroll-slide-down {
+    from {
+      opacity: 0;
+      transform: translateY(-2rem);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  [s-scroll-reveal="slide-left"] {
+    animation-name: s-scroll-slide-left;
+  }
+
+  @keyframes s-scroll-slide-left {
+    from {
+      opacity: 0;
+      transform: translateX(2rem);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  [s-scroll-reveal="slide-right"] {
+    animation-name: s-scroll-slide-right;
+  }
+
+  @keyframes s-scroll-slide-right {
+    from {
+      opacity: 0;
+      transform: translateX(-2rem);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  [s-scroll-reveal="scale"] {
+    animation-name: s-scroll-scale-up;
+  }
+
+  @keyframes s-scroll-scale-up {
+    from {
+      opacity: 0;
+      transform: scale(.9);
+    }
+
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+}
+
+@supports (animation-timeline: scroll()) {
+  [s-scroll-parallax] {
+    animation: linear s-scroll-parallax-slow scroll();
+  }
+
+  @keyframes s-scroll-parallax-slow {
+    from {
+      transform: translateY(0);
+    }
+
+    to {
+      transform: translateY(-10%);
+    }
+  }
+
+  [s-scroll-parallax="fast"] {
+    animation-name: s-scroll-parallax-fast;
+  }
+
+  @keyframes s-scroll-parallax-fast {
+    from {
+      transform: translateY(0);
+    }
+
+    to {
+      transform: translateY(-25%);
+    }
+  }
+
+  [s-scroll-parallax="reverse"] {
+    animation-name: s-scroll-parallax-reverse;
+  }
+
+  @keyframes s-scroll-parallax-reverse {
+    from {
+      transform: translateY(0);
+    }
+
+    to {
+      transform: translateY(10%);
+    }
+  }
+
+  [s-scroll-rotate] {
+    animation: linear s-scroll-rotate scroll();
+  }
+
+  @keyframes s-scroll-rotate {
+    from {
+      transform: rotate(0);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  [s-scroll-rotate="reverse"] {
+    animation-name: s-scroll-rotate-reverse;
+  }
+
+  @keyframes s-scroll-rotate-reverse {
+    from {
+      transform: rotate(0);
+    }
+
+    to {
+      transform: rotate(-360deg);
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [s-scroll-reveal], [s-scroll-parallax], [s-scroll-rotate] {
+    opacity: 1 !important;
+    animation: none !important;
+    transform: none !important;
+  }
+
+  [s-scroll-progress] {
+    transform: scaleX(1);
+    animation: none !important;
+  }
+}

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@shift-css/core",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Zero-runtime, OKLCH-native CSS framework with cascade layers and native light-dark() theming",
   "type": "module",
   "main": "./dist/shift.css",
   "types": "./types/index.d.ts",
   "exports": {
-    ".": "./dist/shift.css",
+    ".": {
+      "style": "./dist/shift.css",
+      "default": "./dist/shift.css"
+    },
     "./min": "./dist/shift.min.css",
     "./reset": "./dist/reset.css",
     "./tokens": "./dist/tokens.css",
@@ -24,6 +27,8 @@
     "./utils/flex": "./dist/utils/flex.css",
     "./utils/typography": "./dist/utils/typography.css",
     "./utils/visibility": "./dist/utils/visibility.css",
+    "./utils/scroll": "./dist/utils/scroll.css",
+    "./utils/functions": "./dist/utils/functions.css",
     "./types": "./types/index.d.ts",
     "./types/react": "./types/react.d.ts",
     "./types/vue": "./types/vue.d.ts",
@@ -54,7 +59,7 @@
     "@playwright/test": "^1.50.1",
     "@types/bun": "^1.3.6",
     "@types/node": "^22.10.5",
-    "lightningcss": "^1.30.2",
+    "lightningcss": "^1.31.1",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3"
   },