motionrail 0.1.1 → 0.1.3

package/README.md

@@ -2,7 +2,7 @@
 
 > ⚠️ **Not Ready for Production** - This library is currently in development and not yet ready for production use.
 
-A lightweight, smooth carousel library with momentum-based scrolling, snap alignment, and responsive breakpoints.
+A lightweight, smooth carousel library with momentum-based scrolling, snap alignment, and responsive breakpoints. Works with vanilla JavaScript or your favorite framework.
 
 ## Features
 
@@ -14,7 +14,8 @@ A lightweight, smooth carousel library with momentum-based scrolling, snap align
 - 🎨 **CSS Grid based** - Modern layout with customizable styling
 - 🪶 **Lightweight** - Zero dependencies, minimal bundle size
 - 🎮 **Full control API** - Programmatic navigation and playback control
-- 🧩 **Extension system** - Modular architecture with built-in extensions (Arrows, Logger)
+- 🧩 **Extension system** - Modular architecture with built-in extensions
+- ⚛️ **Framework integrations** - React, Solid, Vue, Svelte components
 
 ## Installation
 
@@ -24,6 +25,8 @@ npm install motionrail
 
 ## Quick Start
 
+### Vanilla JavaScript
+
 ```js
 import { MotionRail } from 'motionrail';
 import 'motionrail/style.css';
@@ -37,14 +40,101 @@ const carousel = new MotionRail(document.getElementById('carousel'), {
 });
 ```
 
+### React
+
+```jsx
+import { MotionRail } from 'motionrail/react';
+import 'motionrail/style.css';
+
+function App() {
+  return (
+    <MotionRail options={{ breakpoints: [{ columns: 3, gap: '20px' }] }}>
+      <div>Item 1</div>
+      <div>Item 2</div>
+      <div>Item 3</div>
+    </MotionRail>
+  );
+}
+```
+
+### Solid.js
+
+```jsx
+import { MotionRail } from 'motionrail/solid';
+import 'motionrail/style.css';
+
+function App() {
+  return (
+    <MotionRail options={{ breakpoints: [{ columns: 3, gap: '20px' }] }}>
+      <div>Item 1</div>
+      <div>Item 2</div>
+      <div>Item 3</div>
+    </MotionRail>
+  );
+}
+```
+
+### Vue
+
+```vue
+<script setup>
+import { MotionRail } from 'motionrail/vue';
+import 'motionrail/style.css';
+
+const options = { breakpoints: [{ columns: 3, gap: '20px' }] };
+</script>
+
+<template>
+  <MotionRail :options="options">
+    <div>Item 1</div>
+    <div>Item 2</div>
+    <div>Item 3</div>
+  </MotionRail>
+</template>
+```
+
+### Svelte
+
+```svelte
+<script>
+  import { MotionRail } from 'motionrail/svelte';
+  import 'motionrail/style.css';
+
+  const options = { breakpoints: [{ columns: 3, gap: '20px' }] };
+</script>
+
+<MotionRail {options}>
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</MotionRail>
+```
+
+### Svelte 5 (with Runes)
+
+```svelte
+<script>
+  import { MotionRail } from 'motionrail/svelte5';
+  import 'motionrail/style.css';
+
+  const options = { breakpoints: [{ columns: 3, gap: '20px' }] };
+</script>
+
+<MotionRail {options}>
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</MotionRail>
+```
+
 ## Usage
 
 ### HTML Structure
 
 ```html
-<div data-motion-rail id="carousel">
-  <div data-motion-rail-scrollable>
-    <div data-motion-rail-grid>
+<div data-motionrail id="carousel">
+  <div data-motionrail-scrollable>
+    <div data-motionrail-grid>
       <div>Item 1</div>
       <div>Item 2</div>
       <div>Item 3</div>
@@ -55,9 +145,9 @@ const carousel = new MotionRail(document.getElementById('carousel'), {
 ```
 
 **Structure layers:**
-- `[data-motion-rail]` - Wrapper element (receives the ID)
-- `[data-motion-rail-scrollable]` - Scrollable container with overflow and snap behavior
-- `[data-motion-rail-grid]` - Grid layout container
+- `[data-motionrail]` - Wrapper element (receives the ID)
+- `[data-motionrail-scrollable]` - Scrollable container with overflow and snap behavior
+- `[data-motionrail-grid]` - Grid layout container
 - Direct children - Carousel items (no specific class or attribute required)
 
 ### CSS Import
@@ -66,7 +156,7 @@ const carousel = new MotionRail(document.getElementById('carousel'), {
 import 'motionrail/style.css';
 ```
 
-### JavaScript
+### Vanilla JavaScript
 
 ```js
 import { MotionRail } from 'motionrail';
@@ -88,6 +178,235 @@ const carousel = new MotionRail(element, {
 });
 ```
 
+## Framework Integrations
+
+MotionRail provides first-class framework integrations for React, Solid.js, Vue, and Svelte. All integrations are lightweight and use the same API.
+
+### Bundle Sizes
+
+- **React**: 0.87 kB (gzipped: 0.42 kB)
+- **Solid.js**: 0.89 kB (gzipped: 0.48 kB)
+- **Vue**: 1.22 kB (gzipped: 0.62 kB)
+- **Svelte**: 2.21 kB (gzipped: 0.94 kB)
+- **Svelte 5**: 1.80 kB (gzipped: 0.82 kB)
+
+### React Integration
+
+```jsx
+import { MotionRail } from 'motionrail/react';
+import 'motionrail/style.css';
+
+function MyCarousel() {
+  const carouselRef = useRef(null);
+  const containerRef = useRef(null);
+
+  const handleNext = () => {
+    carouselRef.current?.next();
+  };
+
+  return (
+    <>
+      <MotionRail
+        ref={carouselRef}
+        divRef={containerRef}
+        options={{
+          autoplay: true,
+          delay: 3000,
+          breakpoints: [
+            { columns: 1, gap: '16px' },
+            { width: 768, columns: 2, gap: '16px' },
+            { width: 1024, columns: 3, gap: '20px' }
+          ],
+          onChange: (state) => console.log(state)
+        }}
+      >
+        <div>Item 1</div>
+        <div>Item 2</div>
+        <div>Item 3</div>
+      </MotionRail>
+      <button onClick={handleNext}>Next</button>
+    </>
+  );
+}
+```
+
+**Props:**
+- `options`: MotionRailOptions object
+- `ref`: Receives the MotionRail instance
+- `divRef`: Receives the container HTMLDivElement
+- `children`: Carousel items
+
+### Solid.js Integration
+
+```jsx
+import { MotionRail } from 'motionrail/solid';
+import 'motionrail/style.css';
+
+function MyCarousel() {
+  let carousel;
+  let container;
+
+  const handleNext = () => {
+    carousel?.next();
+  };
+
+  return (
+    <>
+      <MotionRail
+        ref={(instance) => carousel = instance}
+        divRef={(el) => container = el}
+        options={{
+          autoplay: true,
+          delay: 3000,
+          breakpoints: [
+            { columns: 1, gap: '16px' },
+            { width: 768, columns: 2, gap: '16px' },
+            { width: 1024, columns: 3, gap: '20px' }
+          ],
+          onChange: (state) => console.log(state)
+        }}
+      >
+        <div>Item 1</div>
+        <div>Item 2</div>
+        <div>Item 3</div>
+      </MotionRail>
+      <button onClick={handleNext}>Next</button>
+    </>
+  );
+}
+```
+
+**Props:**
+- `options`: MotionRailOptions object
+- `ref`: Callback that receives the MotionRail instance
+- `divRef`: Callback that receives the container HTMLDivElement
+- `children`: Carousel items
+
+### Vue Integration
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { MotionRail } from 'motionrail/vue';
+import 'motionrail/style.css';
+
+const carouselRef = ref(null);
+
+const options = {
+  autoplay: true,
+  delay: 3000,
+  breakpoints: [
+    { columns: 1, gap: '16px' },
+    { width: 768, columns: 2, gap: '16px' },
+    { width: 1024, columns: 3, gap: '20px' }
+  ],
+  onChange: (state) => console.log(state)
+};
+
+const handleNext = () => {
+  carouselRef.value?.instance?.next();
+};
+</script>
+
+<template>
+  <div>
+    <MotionRail ref="carouselRef" :options="options">
+      <div>Item 1</div>
+      <div>Item 2</div>
+      <div>Item 3</div>
+    </MotionRail>
+    <button @click="handleNext">Next</button>
+  </div>
+</template>
+```
+
+**Props:**
+- `options`: MotionRailOptions object
+
+**Template Ref Access:**
+- `instance`: MotionRail instance
+- `container`: Container HTMLDivElement
+
+### Svelte Integration
+
+```svelte
+<script>
+  import { MotionRail } from 'motionrail/svelte';
+  import 'motionrail/style.css';
+
+  let instance;
+  let container;
+
+  const options = {
+    autoplay: true,
+    delay: 3000,
+    breakpoints: [
+      { columns: 1, gap: '16px' },
+      { width: 768, columns: 2, gap: '16px' },
+      { width: 1024, columns: 3, gap: '20px' }
+    ],
+    onChange: (state) => console.log(state)
+  };
+
+  function handleNext() {
+    instance?.next();
+  }
+</script>
+
+<MotionRail {options} bind:instance bind:container>
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</MotionRail>
+<button on:click={handleNext}>Next</button>
+```
+
+**Props:**
+- `options`: MotionRailOptions object
+- `bind:instance`: Binds the MotionRail instance
+- `bind:container`: Binds the container HTMLDivElement
+
+### Svelte 5 Integration (Runes)
+
+```svelte
+<script>
+  import { MotionRail } from 'motionrail/svelte5';
+  import 'motionrail/style.css';
+
+  let instance = $state();
+  let container = $state();
+
+  const options = {
+    autoplay: true,
+    delay: 3000,
+    breakpoints: [
+      { columns: 1, gap: '16px' },
+      { width: 768, columns: 2, gap: '16px' },
+      { width: 1024, columns: 3, gap: '20px' }
+    ],
+    onChange: (state) => console.log(state)
+  };
+
+  function handleNext() {
+    instance?.next();
+  }
+</script>
+
+<MotionRail {options} bind:instance bind:container>
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</MotionRail>
+<button onclick={handleNext}>Next</button>
+```
+
+**Props:**
+- `options`: MotionRailOptions object
+- `bind:instance`: Binds the MotionRail instance (using $bindable)
+- `bind:container`: Binds the container HTMLDivElement (using $bindable)
+
+**Note:** All framework integrations automatically handle dynamic children updates using the `update()` method. No manual reinitialization needed when items change.
+
 ## Configuration Options
 
 | Option | Type | Default | Description |
@@ -215,7 +534,7 @@ Refresh the carousel after dynamically adding or removing items from the DOM. Th
 
 ```js
 // Add items to the DOM
-const grid = document.querySelector('[data-motion-rail-grid]');
+const grid = document.querySelector('[data-motionrail-grid]');
 const newItem = document.createElement('div');
 newItem.textContent = 'New Item';
 grid.appendChild(newItem);
@@ -452,9 +771,9 @@ const carousel = new MotionRail(
 ### With Navigation Controls
 
 ```html
-<div data-motion-rail id="carousel">
-  <div data-motion-rail-scrollable>
-    <div data-motion-rail-grid>
+<div data-motionrail id="carousel">
+  <div data-motionrail-scrollable>
+    <div data-motionrail-grid>
       <div>Item 1</div>
       <div>Item 2</div>
       <div>Item 3</div>
@@ -492,9 +811,9 @@ document.getElementById('pause').addEventListener('click', () => carousel.pause(
 ### Dynamic Content
 
 ```html
-<div data-motion-rail id="carousel">
-  <div data-motion-rail-scrollable>
-    <div data-motion-rail-grid id="carousel-grid">
+<div data-motionrail id="carousel">
+  <div data-motionrail-scrollable>
+    <div data-motionrail-grid id="carousel-grid">
       <div>Item 1</div>
       <div>Item 2</div>
       <div>Item 3</div>
@@ -540,11 +859,11 @@ document.getElementById('remove-item').addEventListener('click', () => {
 The library includes base styles via `motionrail/style.css`. You can customize the appearance of items with your own CSS:
 
 ```css
-[data-motion-rail] {
+[data-motionrail] {
   height: 400px; /* Set carousel height */
 }
 
-[data-motion-rail-grid] > * {
+[data-motionrail-grid] > * {
   /* Style your carousel items */
   background: #f0f0f0;
   border-radius: 8px;
@@ -554,10 +873,10 @@ The library includes base styles via `motionrail/style.css`. You can customize t
 ```
 
 **Key selectors:**
-- `[data-motion-rail]` - Wrapper element
-- `[data-motion-rail-scrollable]` - Scrollable container (has overflow and snap type)
-- `[data-motion-rail-grid]` - Grid layout container
-- `[data-motion-rail-grid] > *` - Direct children (carousel items)
+- `[data-motionrail]` - Wrapper element
+- `[data-motionrail-scrollable]` - Scrollable container (has overflow and snap type)
+- `[data-motionrail-grid]` - Grid layout container
+- `[data-motionrail-grid] > *` - Direct children (carousel items)
 
 ## Browser Support
 

package/dist/extensions/arrows.js

@@ -1,4 +1,4 @@
-import "../motionrail-Dq8joDtA.js";
+import "../motionrail-DsLqZe8W.js";
 function Arrows(e) {
 	let t = document.createElement("button"), n = document.createElement("button"), { leftIcon: r = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-chevron-left-icon lucide-chevron-left\"><path d=\"m15 18-6-6 6-6\"/></svg>", rightIcon: i = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-chevron-right-icon lucide-chevron-right\"><path d=\"m9 18 6-6-6-6\"/></svg>", loop: a = !0, log: o = !1 } = e || {};
 	return {

package/dist/extensions/arrows.umd.cjs

@@ -1,2 +1,2 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.MotionRailArrows={}))})(this,function(e){var t=document.createElement(`style`);t.textContent=`[data-motion-rail-scrollable]::-webkit-scrollbar{display:none}[data-motion-rail]{position:relative}[data-motion-rail] [data-motion-rail-scrollable]{anchor-name:--motionrail-scrollable;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;position:relative;overflow:scroll hidden;container-type:inline-size}[data-motion-rail] [data-motion-rail-scrollable]:active{cursor:grabbing}[data-motion-rail] [data-motion-rail-scrollable] [data-motion-rail-grid]{grid-auto-flow:column;height:100%;display:grid}[data-motion-rail] [data-motion-rail-scrollable] [data-motion-rail-grid]>*{pointer-events:none;scroll-snap-align:start}
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.MotionRailArrows={}))})(this,function(e){var t=document.createElement(`style`);t.textContent=`[data-motionrail-scrollable]::-webkit-scrollbar{display:none}[data-motionrail]{position:relative}[data-motionrail] [data-motionrail-scrollable]{anchor-name:--motionrail-scrollable;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;position:relative;overflow:scroll hidden;container-type:inline-size}[data-motionrail] [data-motionrail-scrollable]:active{cursor:grabbing}[data-motionrail] [data-motionrail-scrollable] [data-motionrail-grid]{grid-auto-flow:column;height:100%;display:grid}[data-motionrail] [data-motionrail-scrollable] [data-motionrail-grid]>*{pointer-events:none;scroll-snap-align:start}
 /*$vite$:1*/`,document.head.appendChild(t);function n(e){let t=document.createElement(`button`),n=document.createElement(`button`),{leftIcon:r=`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-left-icon lucide-chevron-left"><path d="m15 18-6-6 6-6"/></svg>`,rightIcon:i=`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right-icon lucide-chevron-right"><path d="m9 18 6-6-6-6"/></svg>`,loop:a=!0,log:o=!1}=e||{};return{name:`ArrowExtension`,onInit(e,a){let{totalItems:o}=a;if(o===0)return;let{rtl:s}=e.getOptions();t.innerHTML=r,t.className=`motionrail-arrow motionrail-arrow-left`,t.addEventListener(`click`,()=>{s?e.next():e.prev()}),n.innerHTML=i,n.className=`motionrail-arrow motionrail-arrow-right`,n.addEventListener(`click`,()=>{s?e.prev():e.next()}),e.element.appendChild(t),e.element.appendChild(n)},onUpdate(e,r){let{isFirstItemVisible:i,isLastItemVisible:s,totalItems:c,visibleItemIndexes:l}=r;a||(t.disabled=i,n.disabled=s),l.length<c?(t.style.removeProperty(`display`),n.style.removeProperty(`display`)):(t.style.display=`none`,n.style.display=`none`),c||(t.style.display=`none`,n.style.display=`none`),o&&console.log(`ArrowExtension updated`,r)},onDestroy(e,r){t.remove(),n.remove()}}}e.Arrows=n});

package/dist/extensions/dots.js

@@ -1,4 +1,4 @@
-import "../motionrail-Dq8joDtA.js";
+import "../motionrail-DsLqZe8W.js";
 function Dots(e) {
 	let t = document.createElement("div"), n = [], { showIndex: r = !1, dotSize: i = 44, log: a = !1 } = e || {};
 	return {

package/dist/extensions/dots.umd.cjs

@@ -1,2 +1,2 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.MotionRailDots={}))})(this,function(e){var t=document.createElement(`style`);t.textContent=`[data-motion-rail-scrollable]::-webkit-scrollbar{display:none}[data-motion-rail]{position:relative}[data-motion-rail] [data-motion-rail-scrollable]{anchor-name:--motionrail-scrollable;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;position:relative;overflow:scroll hidden;container-type:inline-size}[data-motion-rail] [data-motion-rail-scrollable]:active{cursor:grabbing}[data-motion-rail] [data-motion-rail-scrollable] [data-motion-rail-grid]{grid-auto-flow:column;height:100%;display:grid}[data-motion-rail] [data-motion-rail-scrollable] [data-motion-rail-grid]>*{pointer-events:none;scroll-snap-align:start}
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.MotionRailDots={}))})(this,function(e){var t=document.createElement(`style`);t.textContent=`[data-motionrail-scrollable]::-webkit-scrollbar{display:none}[data-motionrail]{position:relative}[data-motionrail] [data-motionrail-scrollable]{anchor-name:--motionrail-scrollable;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;position:relative;overflow:scroll hidden;container-type:inline-size}[data-motionrail] [data-motionrail-scrollable]:active{cursor:grabbing}[data-motionrail] [data-motionrail-scrollable] [data-motionrail-grid]{grid-auto-flow:column;height:100%;display:grid}[data-motionrail] [data-motionrail-scrollable] [data-motionrail-grid]>*{pointer-events:none;scroll-snap-align:start}
 /*$vite$:1*/`,document.head.appendChild(t);function n(e){let t=document.createElement(`div`),n=[],{showIndex:r=!1,dotSize:i=44,log:a=!1}=e||{};return{name:`DotsExtension`,onInit(e,a){let{totalItems:o}=a;if(o!==0){t.className=`motionrail-dots`,t.style.setProperty(`--dot-size`,`${i}px`);for(let i=0;i<o;i++){let a=document.createElement(`button`);a.className=`motionrail-dot`,a.setAttribute(`aria-label`,`Go to item ${i+1}`),r&&(a.textContent=(i+1).toString()),a.addEventListener(`click`,()=>{e.scrollToIndex(i)}),n.push(a),t.appendChild(a)}e.element.appendChild(t)}},onUpdate(e,r){let{visibleItemIndexes:i,totalItems:o}=r;if(!o){t.style.display=`none`;return}if(t.style.removeProperty(`display`),n.forEach((e,t)=>{i.includes(t)?e.classList.add(`motionrail-dot-active`):e.classList.remove(`motionrail-dot-active`)}),i.length>0){let e=n[i[0]];if(e){let n=t.offsetWidth,r=e.offsetLeft,i=e.offsetWidth,a=r-n/2+i/2;t.scrollTo({left:a,behavior:`smooth`})}}a&&console.log(`DotsExtension updated`,r)},onDestroy(e,r){t.remove(),n.length=0}}}e.Dots=n});

package/dist/extensions/logger.js

@@ -1,4 +1,4 @@
-import "../motionrail-Dq8joDtA.js";
+import "../motionrail-DsLqZe8W.js";
 function Logger() {
 	return {
 		name: "LoggerExtension",

package/dist/extensions/logger.umd.cjs

@@ -1,2 +1,2 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.MotionRailLogger={}))})(this,function(e){var t=document.createElement(`style`);t.textContent=`[data-motion-rail-scrollable]::-webkit-scrollbar{display:none}[data-motion-rail]{position:relative}[data-motion-rail] [data-motion-rail-scrollable]{anchor-name:--motionrail-scrollable;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;position:relative;overflow:scroll hidden;container-type:inline-size}[data-motion-rail] [data-motion-rail-scrollable]:active{cursor:grabbing}[data-motion-rail] [data-motion-rail-scrollable] [data-motion-rail-grid]{grid-auto-flow:column;height:100%;display:grid}[data-motion-rail] [data-motion-rail-scrollable] [data-motion-rail-grid]>*{pointer-events:none;scroll-snap-align:start}
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.MotionRailLogger={}))})(this,function(e){var t=document.createElement(`style`);t.textContent=`[data-motionrail-scrollable]::-webkit-scrollbar{display:none}[data-motionrail]{position:relative}[data-motionrail] [data-motionrail-scrollable]{anchor-name:--motionrail-scrollable;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;position:relative;overflow:scroll hidden;container-type:inline-size}[data-motionrail] [data-motionrail-scrollable]:active{cursor:grabbing}[data-motionrail] [data-motionrail-scrollable] [data-motionrail-grid]{grid-auto-flow:column;height:100%;display:grid}[data-motionrail] [data-motionrail-scrollable] [data-motionrail-grid]>*{pointer-events:none;scroll-snap-align:start}
 /*$vite$:1*/`,document.head.appendChild(t);function n(){return{name:`LoggerExtension`,onInit(e,t){console.debug(`[LoggerExtension] MotionRail initialized`,t),console.debug(e)},onUpdate(e,t){console.debug(`[LoggerExtension] MotionRail updated`,t),console.debug(e)},onDestroy(e,t){console.debug(`[LoggerExtension] MotionRail destroyed`,t),console.debug(e)}}}e.Logger=n});

package/dist/extensions/thumbnails.js

@@ -1,15 +1,15 @@
-import "../motionrail-Dq8joDtA.js";
+import "../motionrail-DsLqZe8W.js";
 function Thumbnails(e) {
 	let t = document.createElement("div"), n = [], { thumbnailWidth: r = 80, thumbnailHeight: i = 80, log: a = !1 } = e || {};
 	return {
 		name: "ThumbnailsExtension",
 		onInit(e, a) {
 			let { totalItems: o } = a;
-			o !== 0 && (t.className = "motionrail-thumbnails", t.style.setProperty("--thumbnail-width", `${r}px`), t.style.setProperty("--thumbnail-height", `${i}px`), e.element.querySelectorAll("[data-motion-rail-grid] > *").forEach((r, i) => {
+			o !== 0 && (t.className = "motionrail-thumbnails", t.style.setProperty("--thumbnail-width", `${r}px`), t.style.setProperty("--thumbnail-height", `${i}px`), e.element.querySelectorAll("[data-motionrail-grid] > *").forEach((r, i) => {
 				let a = document.createElement("button");
 				a.className = "motionrail-thumbnail", a.setAttribute("aria-label", `Go to item ${i + 1}`);
 				let o = r.cloneNode(!0);
-				o.removeAttribute("data-motion-rail-item"), a.appendChild(o), a.addEventListener("click", () => {
+				o.removeAttribute("data-motionrail-item"), a.appendChild(o), a.addEventListener("click", () => {
 					e.scrollToIndex(i);
 				}), n.push(a), t.appendChild(a);
 			}), e.element.appendChild(t));

package/dist/extensions/thumbnails.umd.cjs

@@ -1,2 +1,2 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.MotionRailThumbnails={}))})(this,function(e){var t=document.createElement(`style`);t.textContent=`[data-motion-rail-scrollable]::-webkit-scrollbar{display:none}[data-motion-rail]{position:relative}[data-motion-rail] [data-motion-rail-scrollable]{anchor-name:--motionrail-scrollable;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;position:relative;overflow:scroll hidden;container-type:inline-size}[data-motion-rail] [data-motion-rail-scrollable]:active{cursor:grabbing}[data-motion-rail] [data-motion-rail-scrollable] [data-motion-rail-grid]{grid-auto-flow:column;height:100%;display:grid}[data-motion-rail] [data-motion-rail-scrollable] [data-motion-rail-grid]>*{pointer-events:none;scroll-snap-align:start}
-/*$vite$:1*/`,document.head.appendChild(t);function n(e){let t=document.createElement(`div`),n=[],{thumbnailWidth:r=80,thumbnailHeight:i=80,log:a=!1}=e||{};return{name:`ThumbnailsExtension`,onInit(e,a){let{totalItems:o}=a;o!==0&&(t.className=`motionrail-thumbnails`,t.style.setProperty(`--thumbnail-width`,`${r}px`),t.style.setProperty(`--thumbnail-height`,`${i}px`),e.element.querySelectorAll(`[data-motion-rail-grid] > *`).forEach((r,i)=>{let a=document.createElement(`button`);a.className=`motionrail-thumbnail`,a.setAttribute(`aria-label`,`Go to item ${i+1}`);let o=r.cloneNode(!0);o.removeAttribute(`data-motion-rail-item`),a.appendChild(o),a.addEventListener(`click`,()=>{e.scrollToIndex(i)}),n.push(a),t.appendChild(a)}),e.element.appendChild(t))},onUpdate(e,r){let{visibleItemIndexes:i,totalItems:o}=r;if(!o){t.style.display=`none`;return}if(t.style.removeProperty(`display`),n.forEach((e,t)=>{i.includes(t)?e.classList.add(`motionrail-thumbnail-active`):e.classList.remove(`motionrail-thumbnail-active`)}),i.length>0){let e=n[i[0]];if(e){let n=t.offsetWidth,r=e.offsetLeft,i=e.offsetWidth,a=r-n/2+i/2;t.scrollTo({left:a,behavior:`smooth`})}}a&&console.log(`ThumbnailsExtension updated`,r)},onDestroy(e,r){t.remove(),n.length=0}}}e.Thumbnails=n});
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.MotionRailThumbnails={}))})(this,function(e){var t=document.createElement(`style`);t.textContent=`[data-motionrail-scrollable]::-webkit-scrollbar{display:none}[data-motionrail]{position:relative}[data-motionrail] [data-motionrail-scrollable]{anchor-name:--motionrail-scrollable;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;position:relative;overflow:scroll hidden;container-type:inline-size}[data-motionrail] [data-motionrail-scrollable]:active{cursor:grabbing}[data-motionrail] [data-motionrail-scrollable] [data-motionrail-grid]{grid-auto-flow:column;height:100%;display:grid}[data-motionrail] [data-motionrail-scrollable] [data-motionrail-grid]>*{pointer-events:none;scroll-snap-align:start}
+/*$vite$:1*/`,document.head.appendChild(t);function n(e){let t=document.createElement(`div`),n=[],{thumbnailWidth:r=80,thumbnailHeight:i=80,log:a=!1}=e||{};return{name:`ThumbnailsExtension`,onInit(e,a){let{totalItems:o}=a;o!==0&&(t.className=`motionrail-thumbnails`,t.style.setProperty(`--thumbnail-width`,`${r}px`),t.style.setProperty(`--thumbnail-height`,`${i}px`),e.element.querySelectorAll(`[data-motionrail-grid] > *`).forEach((r,i)=>{let a=document.createElement(`button`);a.className=`motionrail-thumbnail`,a.setAttribute(`aria-label`,`Go to item ${i+1}`);let o=r.cloneNode(!0);o.removeAttribute(`data-motionrail-item`),a.appendChild(o),a.addEventListener(`click`,()=>{e.scrollToIndex(i)}),n.push(a),t.appendChild(a)}),e.element.appendChild(t))},onUpdate(e,r){let{visibleItemIndexes:i,totalItems:o}=r;if(!o){t.style.display=`none`;return}if(t.style.removeProperty(`display`),n.forEach((e,t)=>{i.includes(t)?e.classList.add(`motionrail-thumbnail-active`):e.classList.remove(`motionrail-thumbnail-active`)}),i.length>0){let e=n[i[0]];if(e){let n=t.offsetWidth,r=e.offsetLeft,i=e.offsetWidth,a=r-n/2+i/2;t.scrollTo({left:a,behavior:`smooth`})}}a&&console.log(`ThumbnailsExtension updated`,r)},onDestroy(e,r){t.remove(),n.length=0}}}e.Thumbnails=n});

package/dist/{motionrail-Dq8joDtA.js → motionrail-DsLqZe8W.js}

@@ -38,9 +38,9 @@ var MotionRail = class {
 			columns: 1,
 			gap: "0px"
 		}], this.element = e, this.extensions = t.extensions || [];
-		let n = this.element.querySelector("[data-motion-rail-scrollable]");
-		if (!n) throw Error("MotionRail: [data-motion-rail-scrollable] element not found");
-		this.scrollable = n, this.delay = t.delay || 3e3, this.resumeDelay = t.resumeDelay || 4e3, this.onChange = t.onChange, this.state.totalItems = this.element.querySelectorAll("[data-motion-rail-grid] > *").length, this.setBreakPoints(), this.setLogicalScroll(0), this.attachPointerEvents(), this.cacheSnapPoints(), this.observeResize(), this.observeEdgeItems(), this.autoplay && this.play();
+		let n = this.element.querySelector("[data-motionrail-scrollable]");
+		if (!n) throw Error("MotionRail: [data-motionrail-scrollable] element not found");
+		this.scrollable = n, this.delay = t.delay || 3e3, this.resumeDelay = t.resumeDelay || 4e3, this.onChange = t.onChange, this.state.totalItems = this.element.querySelectorAll("[data-motionrail-grid] > *").length, this.setBreakPoints(), this.setLogicalScroll(0), this.attachPointerEvents(), this.cacheSnapPoints(), this.observeResize(), this.observeEdgeItems(), this.autoplay && this.play();
 		let r = this.getState();
 		this.extensions.forEach((e) => {
 			e.onInit && e.onInit(this, r);
@@ -50,7 +50,7 @@ var MotionRail = class {
 		return `motion-rail-${Math.random().toString(36).substring(2, 11)}`;
 	}
 	setBreakPoints() {
-		let e = this.element.querySelector("[data-motion-rail-scrollable]");
+		let e = this.element.querySelector("[data-motionrail-scrollable]");
 		if (!e) return;
 		let t = "";
 		e.style.containerName ? t = e.style.containerName : (t = this.randomContainerName(), e.style.containerName = t);
@@ -59,7 +59,7 @@ var MotionRail = class {
 			let n = e.columns || 1, i = e.gap || "0px", o = `calc((100cqw - (${n - 1} * ${i})) / ${n})`, s = "";
 			s = e.width ? `(min-width: ${e.width}px)` : a ? `(max-width: ${a - 1}px)` : "(min-width: 0px)", r += `
       @container ${t} ${s} {
-        [data-motion-rail-grid] {
+        [data-motionrail-grid] {
           grid-template-columns: repeat(${this.state.totalItems}, ${o});
           gap: ${i};
         }
@@ -86,7 +86,7 @@ var MotionRail = class {
 	}
 	observeEdgeItems() {
 		if (typeof IntersectionObserver > "u") return;
-		let e = this.element.querySelectorAll("[data-motion-rail-grid] > *");
+		let e = this.element.querySelectorAll("[data-motionrail-grid] > *");
 		if (e.length === 0) return;
 		let t = e[0], n = e[e.length - 1];
 		this.intersectionObserver = new IntersectionObserver((r) => {
@@ -114,7 +114,7 @@ var MotionRail = class {
 		}), e.forEach((e) => this.intersectionObserver.observe(e));
 	}
 	cacheSnapPoints() {
-		let e = this.element.querySelectorAll("[data-motion-rail-grid] > *"), t = this.scrollable.scrollWidth - this.scrollable.clientWidth;
+		let e = this.element.querySelectorAll("[data-motionrail-grid] > *"), t = this.scrollable.scrollWidth - this.scrollable.clientWidth;
 		this.snapPoints = Array.from(e).map((e) => Math.min(e.offsetLeft, t));
 	}
 	findNearestSnapPoint(e) {
@@ -201,7 +201,7 @@ var MotionRail = class {
 		};
 	}
 	update() {
-		this.intersectionObserver &&= (this.intersectionObserver.disconnect(), null), this.state.totalItems = this.element.querySelectorAll("[data-motion-rail-grid] > *").length, this.state.visibleItemIndexes = [], this.state.isFirstItemVisible = !1, this.state.isLastItemVisible = !1, this.setBreakPoints(), this.cacheSnapPoints(), this.observeEdgeItems(), this.handleStateChange();
+		this.intersectionObserver &&= (this.intersectionObserver.disconnect(), null), this.state.totalItems = this.element.querySelectorAll("[data-motionrail-grid] > *").length, this.state.visibleItemIndexes = [], this.state.isFirstItemVisible = !1, this.state.isLastItemVisible = !1, this.setBreakPoints(), this.cacheSnapPoints(), this.observeEdgeItems(), this.handleStateChange();
 	}
 	destroy() {
 		let e = this.getState();

package/dist/motionrail.js

@@ -1,2 +1,2 @@
-import { t as MotionRail } from "./motionrail-Dq8joDtA.js";
+import { t as MotionRail } from "./motionrail-DsLqZe8W.js";
 export { MotionRail };

package/dist/motionrail.umd.cjs

@@ -1,9 +1,9 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.MotionRail={}))})(this,function(e){var t=document.createElement(`style`);t.textContent=`[data-motion-rail-scrollable]::-webkit-scrollbar{display:none}[data-motion-rail]{position:relative}[data-motion-rail] [data-motion-rail-scrollable]{anchor-name:--motionrail-scrollable;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;position:relative;overflow:scroll hidden;container-type:inline-size}[data-motion-rail] [data-motion-rail-scrollable]:active{cursor:grabbing}[data-motion-rail] [data-motion-rail-scrollable] [data-motion-rail-grid]{grid-auto-flow:column;height:100%;display:grid}[data-motion-rail] [data-motion-rail-scrollable] [data-motion-rail-grid]>*{pointer-events:none;scroll-snap-align:start}
-/*$vite$:1*/`,document.head.appendChild(t),e.MotionRail=class{element;scrollable;rtl=!1;autoplay=!1;delay=3e3;resumeDelay=4e3;onChange;handleStateChange=()=>{let e=this.getState();this.extensions.forEach(t=>{t.onUpdate&&t.onUpdate(this,e)}),this.onChange&&this.onChange(e)};extensions=[];breakpoints=[];autoPlayIntervalId=null;autoPlayTimeoutId=null;isDragging=!1;startX=0;startLogicalScroll=0;cancelScroll=null;lastPointerX=0;lastPointerTime=0;velocity=0;pointerId=null;snapPoints=[];resizeObserver=null;intersectionObserver=null;state={totalItems:0,visibleItemIndexes:[],isFirstItemVisible:!1,isLastItemVisible:!1};constructor(e,t){this.autoplay=t.autoplay||!1,this.rtl=t.rtl||!1,this.breakpoints=t.breakpoints||[{columns:1,gap:`0px`}],this.element=e,this.extensions=t.extensions||[];let n=this.element.querySelector(`[data-motion-rail-scrollable]`);if(!n)throw Error(`MotionRail: [data-motion-rail-scrollable] element not found`);this.scrollable=n,this.delay=t.delay||3e3,this.resumeDelay=t.resumeDelay||4e3,this.onChange=t.onChange,this.state.totalItems=this.element.querySelectorAll(`[data-motion-rail-grid] > *`).length,this.setBreakPoints(),this.setLogicalScroll(0),this.attachPointerEvents(),this.cacheSnapPoints(),this.observeResize(),this.observeEdgeItems(),this.autoplay&&this.play();let r=this.getState();this.extensions.forEach(e=>{e.onInit&&e.onInit(this,r)})}randomContainerName(){return`motion-rail-${Math.random().toString(36).substring(2,11)}`}setBreakPoints(){let e=this.element.querySelector(`[data-motion-rail-scrollable]`);if(!e)return;let t=``;e.style.containerName?t=e.style.containerName:(t=this.randomContainerName(),e.style.containerName=t);let n=document.createElement(`style`),r=``,i=this.breakpoints.filter(e=>e.width),a=i.length>0?Math.min(...i.map(e=>e.width)):null;return this.breakpoints.forEach(e=>{let n=e.columns||1,i=e.gap||`0px`,o=`calc((100cqw - (${n-1} * ${i})) / ${n})`,s=``;s=e.width?`(min-width: ${e.width}px)`:a?`(max-width: ${a-1}px)`:`(min-width: 0px)`,r+=`
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.MotionRail={}))})(this,function(e){var t=document.createElement(`style`);t.textContent=`[data-motionrail-scrollable]::-webkit-scrollbar{display:none}[data-motionrail]{position:relative}[data-motionrail] [data-motionrail-scrollable]{anchor-name:--motionrail-scrollable;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;position:relative;overflow:scroll hidden;container-type:inline-size}[data-motionrail] [data-motionrail-scrollable]:active{cursor:grabbing}[data-motionrail] [data-motionrail-scrollable] [data-motionrail-grid]{grid-auto-flow:column;height:100%;display:grid}[data-motionrail] [data-motionrail-scrollable] [data-motionrail-grid]>*{pointer-events:none;scroll-snap-align:start}
+/*$vite$:1*/`,document.head.appendChild(t),e.MotionRail=class{element;scrollable;rtl=!1;autoplay=!1;delay=3e3;resumeDelay=4e3;onChange;handleStateChange=()=>{let e=this.getState();this.extensions.forEach(t=>{t.onUpdate&&t.onUpdate(this,e)}),this.onChange&&this.onChange(e)};extensions=[];breakpoints=[];autoPlayIntervalId=null;autoPlayTimeoutId=null;isDragging=!1;startX=0;startLogicalScroll=0;cancelScroll=null;lastPointerX=0;lastPointerTime=0;velocity=0;pointerId=null;snapPoints=[];resizeObserver=null;intersectionObserver=null;state={totalItems:0,visibleItemIndexes:[],isFirstItemVisible:!1,isLastItemVisible:!1};constructor(e,t){this.autoplay=t.autoplay||!1,this.rtl=t.rtl||!1,this.breakpoints=t.breakpoints||[{columns:1,gap:`0px`}],this.element=e,this.extensions=t.extensions||[];let n=this.element.querySelector(`[data-motionrail-scrollable]`);if(!n)throw Error(`MotionRail: [data-motionrail-scrollable] element not found`);this.scrollable=n,this.delay=t.delay||3e3,this.resumeDelay=t.resumeDelay||4e3,this.onChange=t.onChange,this.state.totalItems=this.element.querySelectorAll(`[data-motionrail-grid] > *`).length,this.setBreakPoints(),this.setLogicalScroll(0),this.attachPointerEvents(),this.cacheSnapPoints(),this.observeResize(),this.observeEdgeItems(),this.autoplay&&this.play();let r=this.getState();this.extensions.forEach(e=>{e.onInit&&e.onInit(this,r)})}randomContainerName(){return`motion-rail-${Math.random().toString(36).substring(2,11)}`}setBreakPoints(){let e=this.element.querySelector(`[data-motionrail-scrollable]`);if(!e)return;let t=``;e.style.containerName?t=e.style.containerName:(t=this.randomContainerName(),e.style.containerName=t);let n=document.createElement(`style`),r=``,i=this.breakpoints.filter(e=>e.width),a=i.length>0?Math.min(...i.map(e=>e.width)):null;return this.breakpoints.forEach(e=>{let n=e.columns||1,i=e.gap||`0px`,o=`calc((100cqw - (${n-1} * ${i})) / ${n})`,s=``;s=e.width?`(min-width: ${e.width}px)`:a?`(max-width: ${a-1}px)`:`(min-width: 0px)`,r+=`
       @container ${t} ${s} {
-        [data-motion-rail-grid] {
+        [data-motionrail-grid] {
           grid-template-columns: repeat(${this.state.totalItems}, ${o});
           gap: ${i};
         }
       }
-    `}),n.textContent=r,document.head.appendChild(n),n}getLogicalScroll(){return this.scrollable.scrollLeft}setLogicalScroll(e){this.scrollable.scrollLeft=e}scrollToLogical(e,t=`auto`){this.scrollable.scrollTo({left:e,behavior:t})}observeResize(){typeof ResizeObserver>`u`||(this.resizeObserver=new ResizeObserver(()=>{this.cacheSnapPoints()}),this.resizeObserver.observe(this.scrollable))}observeEdgeItems(){if(typeof IntersectionObserver>`u`)return;let e=this.element.querySelectorAll(`[data-motion-rail-grid] > *`);if(e.length===0)return;let t=e[0],n=e[e.length-1];this.intersectionObserver=new IntersectionObserver(r=>{let i=!1;r.forEach(r=>{let a=Array.from(e).indexOf(r.target);if(a!==-1){if(r.isIntersecting)this.state.visibleItemIndexes.includes(a)||(this.state.visibleItemIndexes.push(a),this.state.visibleItemIndexes.sort((e,t)=>e-t),i=!0);else{let e=this.state.visibleItemIndexes.length;this.state.visibleItemIndexes=this.state.visibleItemIndexes.filter(e=>e!==a),this.state.visibleItemIndexes.length!==e&&(i=!0)}if(r.target===t){let e=r.isIntersecting;this.state.isFirstItemVisible!==e&&(this.state.isFirstItemVisible=e,i=!0)}else if(r.target===n){let e=r.isIntersecting;this.state.isLastItemVisible!==e&&(this.state.isLastItemVisible=e,i=!0)}}}),i&&this.handleStateChange()},{root:this.scrollable,threshold:.5}),e.forEach(e=>this.intersectionObserver.observe(e))}cacheSnapPoints(){let e=this.element.querySelectorAll(`[data-motion-rail-grid] > *`),t=this.scrollable.scrollWidth-this.scrollable.clientWidth;this.snapPoints=Array.from(e).map(e=>Math.min(e.offsetLeft,t))}findNearestSnapPoint(e){let t=0,n=1/0;for(let r of this.snapPoints){let i=Math.abs(r-e);i<n&&(n=i,t=r)}return t}attachPointerEvents(){window.matchMedia(`(pointer: fine)`).matches&&(this.scrollable.addEventListener(`pointerdown`,this.handlePointerDown),this.scrollable.addEventListener(`pointermove`,this.handlePointerMove),this.scrollable.addEventListener(`pointerup`,this.handlePointerUp),this.scrollable.addEventListener(`pointerleave`,this.handlePointerUp))}handlePointerDown=e=>{this.pointerId===null&&(this.pointerId=e.pointerId,this.scrollable.setPointerCapture(e.pointerId),this.isDragging=!0,this.startX=e.clientX,this.startLogicalScroll=this.getLogicalScroll(),this.lastPointerX=e.clientX,this.lastPointerTime=e.timeStamp,this.velocity=0,this.scrollable.style.userSelect=`none`,this.scrollable.style.scrollSnapType=`none`,this.pause(),this.cancelScroll&&this.cancelScroll(),this.autoPlayTimeoutId&&clearTimeout(this.autoPlayTimeoutId))};handlePointerMove=e=>{if(!this.isDragging||e.pointerId!==this.pointerId)return;e.preventDefault();let t=e.clientX-this.startX,n=this.startLogicalScroll-t;this.setLogicalScroll(n);let r=e.timeStamp-this.lastPointerTime;r>0&&(this.velocity=(e.clientX-this.lastPointerX)/r,this.lastPointerX=e.clientX,this.lastPointerTime=e.timeStamp)};handlePointerUp=e=>{if(!this.isDragging||e.pointerId!==this.pointerId)return;this.scrollable.releasePointerCapture(e.pointerId),this.pointerId=null,this.isDragging=!1,this.scrollable.style.userSelect=``;let t=Math.abs(this.velocity),n=Math.min(100+Math.sqrt(t)*50,200),r=-this.velocity*n,i=this.getLogicalScroll()+r;this.cancelScroll&&this.cancelScroll();let a=this.findNearestSnapPoint(i);this.cancelScroll=this.animateLogicalScroll(a,n,()=>{this.scrollable.style.scrollSnapType=`x mandatory`,this.cancelScroll=null,this.autoplay&&(this.autoPlayTimeoutId=window.setTimeout(()=>{this.play(),this.autoPlayTimeoutId=null},this.resumeDelay))}),this.velocity=0};animateLogicalScroll(e,t,n){let r=this.getLogicalScroll(),i=performance.now(),a=!1,o=s=>{if(a)return;let c=s-i,l=Math.min(c/t,1),u=1-(1-l)**3,d=r+(e-r)*u;this.setLogicalScroll(d),l<1?requestAnimationFrame(o):n()};return requestAnimationFrame(o),()=>{a=!0}}scrollByPage(e){if(this.state.visibleItemIndexes.length===0)return;let t,n=this.state.visibleItemIndexes[0],r=this.state.visibleItemIndexes[this.state.visibleItemIndexes.length-1],i=this.state.visibleItemIndexes.length;e===1?(t=r+1,this.rtl&&(t=r+i),t>=this.snapPoints.length-1&&this.state.isLastItemVisible?t=0:t>=this.snapPoints.length-1&&!this.state.isLastItemVisible&&(t=this.snapPoints.length-1)):(t=n-i,this.rtl&&(t=r-i),t<=0&&this.state.isFirstItemVisible?t=this.snapPoints.length-1:t<=0&&!this.state.isFirstItemVisible&&(t=0)),this.scrollToLogical(this.snapPoints[t],`smooth`)}play(){this.autoPlayIntervalId=window.setInterval(()=>{this.scrollByPage(1)},this.delay)}next(){this.pause(),this.scrollByPage(1)}prev(){this.pause(),this.scrollByPage(-1)}pause(){this.autoPlayIntervalId&&=(clearInterval(this.autoPlayIntervalId),null),this.autoPlayTimeoutId&&=(clearTimeout(this.autoPlayTimeoutId),null),!this.isDragging&&this.autoplay&&(this.autoPlayTimeoutId=window.setTimeout(()=>{this.play(),this.autoPlayTimeoutId=null},this.resumeDelay))}scrollToIndex(e){this.pause(),e>=0&&e<this.snapPoints.length&&this.scrollToLogical(this.snapPoints[e],`smooth`)}getState(){return{...this.state,visibleItemIndexes:[...this.state.visibleItemIndexes]}}getOptions(){return{autoplay:this.autoplay,rtl:this.rtl,delay:this.delay,resumeDelay:this.resumeDelay,breakpoints:this.breakpoints.map(e=>({...e}))}}update(){this.intersectionObserver&&=(this.intersectionObserver.disconnect(),null),this.state.totalItems=this.element.querySelectorAll(`[data-motion-rail-grid] > *`).length,this.state.visibleItemIndexes=[],this.state.isFirstItemVisible=!1,this.state.isLastItemVisible=!1,this.setBreakPoints(),this.cacheSnapPoints(),this.observeEdgeItems(),this.handleStateChange()}destroy(){let e=this.getState();this.extensions.forEach(t=>{t.onDestroy&&t.onDestroy(this,e)}),this.autoPlayIntervalId&&=(clearInterval(this.autoPlayIntervalId),null),this.cancelScroll&&=(this.cancelScroll(),null),this.autoPlayTimeoutId&&=(clearTimeout(this.autoPlayTimeoutId),null),this.resizeObserver&&=(this.resizeObserver.disconnect(),null),this.intersectionObserver&&=(this.intersectionObserver.disconnect(),null),this.scrollable.removeEventListener(`pointerdown`,this.handlePointerDown),this.scrollable.removeEventListener(`pointermove`,this.handlePointerMove),this.scrollable.removeEventListener(`pointerup`,this.handlePointerUp),this.scrollable.removeEventListener(`pointerleave`,this.handlePointerUp)}}});
+    `}),n.textContent=r,document.head.appendChild(n),n}getLogicalScroll(){return this.scrollable.scrollLeft}setLogicalScroll(e){this.scrollable.scrollLeft=e}scrollToLogical(e,t=`auto`){this.scrollable.scrollTo({left:e,behavior:t})}observeResize(){typeof ResizeObserver>`u`||(this.resizeObserver=new ResizeObserver(()=>{this.cacheSnapPoints()}),this.resizeObserver.observe(this.scrollable))}observeEdgeItems(){if(typeof IntersectionObserver>`u`)return;let e=this.element.querySelectorAll(`[data-motionrail-grid] > *`);if(e.length===0)return;let t=e[0],n=e[e.length-1];this.intersectionObserver=new IntersectionObserver(r=>{let i=!1;r.forEach(r=>{let a=Array.from(e).indexOf(r.target);if(a!==-1){if(r.isIntersecting)this.state.visibleItemIndexes.includes(a)||(this.state.visibleItemIndexes.push(a),this.state.visibleItemIndexes.sort((e,t)=>e-t),i=!0);else{let e=this.state.visibleItemIndexes.length;this.state.visibleItemIndexes=this.state.visibleItemIndexes.filter(e=>e!==a),this.state.visibleItemIndexes.length!==e&&(i=!0)}if(r.target===t){let e=r.isIntersecting;this.state.isFirstItemVisible!==e&&(this.state.isFirstItemVisible=e,i=!0)}else if(r.target===n){let e=r.isIntersecting;this.state.isLastItemVisible!==e&&(this.state.isLastItemVisible=e,i=!0)}}}),i&&this.handleStateChange()},{root:this.scrollable,threshold:.5}),e.forEach(e=>this.intersectionObserver.observe(e))}cacheSnapPoints(){let e=this.element.querySelectorAll(`[data-motionrail-grid] > *`),t=this.scrollable.scrollWidth-this.scrollable.clientWidth;this.snapPoints=Array.from(e).map(e=>Math.min(e.offsetLeft,t))}findNearestSnapPoint(e){let t=0,n=1/0;for(let r of this.snapPoints){let i=Math.abs(r-e);i<n&&(n=i,t=r)}return t}attachPointerEvents(){window.matchMedia(`(pointer: fine)`).matches&&(this.scrollable.addEventListener(`pointerdown`,this.handlePointerDown),this.scrollable.addEventListener(`pointermove`,this.handlePointerMove),this.scrollable.addEventListener(`pointerup`,this.handlePointerUp),this.scrollable.addEventListener(`pointerleave`,this.handlePointerUp))}handlePointerDown=e=>{this.pointerId===null&&(this.pointerId=e.pointerId,this.scrollable.setPointerCapture(e.pointerId),this.isDragging=!0,this.startX=e.clientX,this.startLogicalScroll=this.getLogicalScroll(),this.lastPointerX=e.clientX,this.lastPointerTime=e.timeStamp,this.velocity=0,this.scrollable.style.userSelect=`none`,this.scrollable.style.scrollSnapType=`none`,this.pause(),this.cancelScroll&&this.cancelScroll(),this.autoPlayTimeoutId&&clearTimeout(this.autoPlayTimeoutId))};handlePointerMove=e=>{if(!this.isDragging||e.pointerId!==this.pointerId)return;e.preventDefault();let t=e.clientX-this.startX,n=this.startLogicalScroll-t;this.setLogicalScroll(n);let r=e.timeStamp-this.lastPointerTime;r>0&&(this.velocity=(e.clientX-this.lastPointerX)/r,this.lastPointerX=e.clientX,this.lastPointerTime=e.timeStamp)};handlePointerUp=e=>{if(!this.isDragging||e.pointerId!==this.pointerId)return;this.scrollable.releasePointerCapture(e.pointerId),this.pointerId=null,this.isDragging=!1,this.scrollable.style.userSelect=``;let t=Math.abs(this.velocity),n=Math.min(100+Math.sqrt(t)*50,200),r=-this.velocity*n,i=this.getLogicalScroll()+r;this.cancelScroll&&this.cancelScroll();let a=this.findNearestSnapPoint(i);this.cancelScroll=this.animateLogicalScroll(a,n,()=>{this.scrollable.style.scrollSnapType=`x mandatory`,this.cancelScroll=null,this.autoplay&&(this.autoPlayTimeoutId=window.setTimeout(()=>{this.play(),this.autoPlayTimeoutId=null},this.resumeDelay))}),this.velocity=0};animateLogicalScroll(e,t,n){let r=this.getLogicalScroll(),i=performance.now(),a=!1,o=s=>{if(a)return;let c=s-i,l=Math.min(c/t,1),u=1-(1-l)**3,d=r+(e-r)*u;this.setLogicalScroll(d),l<1?requestAnimationFrame(o):n()};return requestAnimationFrame(o),()=>{a=!0}}scrollByPage(e){if(this.state.visibleItemIndexes.length===0)return;let t,n=this.state.visibleItemIndexes[0],r=this.state.visibleItemIndexes[this.state.visibleItemIndexes.length-1],i=this.state.visibleItemIndexes.length;e===1?(t=r+1,this.rtl&&(t=r+i),t>=this.snapPoints.length-1&&this.state.isLastItemVisible?t=0:t>=this.snapPoints.length-1&&!this.state.isLastItemVisible&&(t=this.snapPoints.length-1)):(t=n-i,this.rtl&&(t=r-i),t<=0&&this.state.isFirstItemVisible?t=this.snapPoints.length-1:t<=0&&!this.state.isFirstItemVisible&&(t=0)),this.scrollToLogical(this.snapPoints[t],`smooth`)}play(){this.autoPlayIntervalId=window.setInterval(()=>{this.scrollByPage(1)},this.delay)}next(){this.pause(),this.scrollByPage(1)}prev(){this.pause(),this.scrollByPage(-1)}pause(){this.autoPlayIntervalId&&=(clearInterval(this.autoPlayIntervalId),null),this.autoPlayTimeoutId&&=(clearTimeout(this.autoPlayTimeoutId),null),!this.isDragging&&this.autoplay&&(this.autoPlayTimeoutId=window.setTimeout(()=>{this.play(),this.autoPlayTimeoutId=null},this.resumeDelay))}scrollToIndex(e){this.pause(),e>=0&&e<this.snapPoints.length&&this.scrollToLogical(this.snapPoints[e],`smooth`)}getState(){return{...this.state,visibleItemIndexes:[...this.state.visibleItemIndexes]}}getOptions(){return{autoplay:this.autoplay,rtl:this.rtl,delay:this.delay,resumeDelay:this.resumeDelay,breakpoints:this.breakpoints.map(e=>({...e}))}}update(){this.intersectionObserver&&=(this.intersectionObserver.disconnect(),null),this.state.totalItems=this.element.querySelectorAll(`[data-motionrail-grid] > *`).length,this.state.visibleItemIndexes=[],this.state.isFirstItemVisible=!1,this.state.isLastItemVisible=!1,this.setBreakPoints(),this.cacheSnapPoints(),this.observeEdgeItems(),this.handleStateChange()}destroy(){let e=this.getState();this.extensions.forEach(t=>{t.onDestroy&&t.onDestroy(this,e)}),this.autoPlayIntervalId&&=(clearInterval(this.autoPlayIntervalId),null),this.cancelScroll&&=(this.cancelScroll(),null),this.autoPlayTimeoutId&&=(clearTimeout(this.autoPlayTimeoutId),null),this.resizeObserver&&=(this.resizeObserver.disconnect(),null),this.intersectionObserver&&=(this.intersectionObserver.disconnect(),null),this.scrollable.removeEventListener(`pointerdown`,this.handlePointerDown),this.scrollable.removeEventListener(`pointermove`,this.handlePointerMove),this.scrollable.removeEventListener(`pointerup`,this.handlePointerUp),this.scrollable.removeEventListener(`pointerleave`,this.handlePointerUp)}}});

package/dist/react.js

@@ -1,4 +1,4 @@
-import { t as MotionRail } from "./motionrail-Dq8joDtA.js";
+import { t as MotionRail } from "./motionrail-DsLqZe8W.js";
 import { useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 function MotionRailReact({ options: i, ref: a, divRef: o, ...s }) {
@@ -11,12 +11,12 @@ function MotionRailReact({ options: i, ref: a, divRef: o, ...s }) {
 		l.current && l.current.update();
 	}, [u]), /* @__PURE__ */ jsx("div", {
 		ref: c,
-		"data-motion-rail": !0,
+		"data-motionrail": !0,
 		...d,
 		children: /* @__PURE__ */ jsx("div", {
-			"data-motion-rail-scrollable": !0,
+			"data-motionrail-scrollable": !0,
 			children: /* @__PURE__ */ jsx("div", {
-				"data-motion-rail-grid": !0,
+				"data-motionrail-grid": !0,
 				children: u
 			})
 		})

package/dist/solid.js

@@ -1,7 +1,7 @@
-import { t as MotionRail } from "./motionrail-Dq8joDtA.js";
+import { t as MotionRail } from "./motionrail-DsLqZe8W.js";
 import { insert, spread, template, use } from "solid-js/web";
 import { createEffect, onCleanup, onMount, splitProps } from "solid-js";
-var _tmpl$ = /* @__PURE__ */ template("<div data-motion-rail><div data-motion-rail-scrollable><div data-motion-rail-grid>");
+var _tmpl$ = /* @__PURE__ */ template("<div data-motionrail><div data-motionrail-scrollable><div data-motionrail-grid>");
 function MotionRailSolid(c) {
 	let [u, d] = splitProps(c, [
 		"options",

package/dist/style.css

@@ -1 +1 @@
-[data-motion-rail-scrollable]::-webkit-scrollbar{display:none}[data-motion-rail]{position:relative}[data-motion-rail] [data-motion-rail-scrollable]{anchor-name:--motionrail-scrollable;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;position:relative;overflow:scroll hidden;container-type:inline-size}[data-motion-rail] [data-motion-rail-scrollable]:active{cursor:grabbing}[data-motion-rail] [data-motion-rail-scrollable] [data-motion-rail-grid]{grid-auto-flow:column;height:100%;display:grid}[data-motion-rail] [data-motion-rail-scrollable] [data-motion-rail-grid]>*{pointer-events:none;scroll-snap-align:start}
+[data-motionrail-scrollable]::-webkit-scrollbar{display:none}[data-motionrail]{position:relative}[data-motionrail] [data-motionrail-scrollable]{anchor-name:--motionrail-scrollable;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;position:relative;overflow:scroll hidden;container-type:inline-size}[data-motionrail] [data-motionrail-scrollable]:active{cursor:grabbing}[data-motionrail] [data-motionrail-scrollable] [data-motionrail-grid]{grid-auto-flow:column;height:100%;display:grid}[data-motionrail] [data-motionrail-scrollable] [data-motionrail-grid]>*{pointer-events:none;scroll-snap-align:start}

package/dist/svelte.js

@@ -1,8 +1,8 @@
-import { t as MotionRail } from "./motionrail-Dq8joDtA.js";
+import { t as MotionRail } from "./motionrail-DsLqZe8W.js";
 import { C as reset, S as push, T as enable_legacy_mode_flag, _ as child, a as bind_this, c as slot, d as from_html, f as deep_read_state, h as legacy_pre_effect_reset, i as init, m as legacy_pre_effect, n as prop, o as bind_prop, p as get, s as attribute_effect, t as legacy_rest_props, u as append, v as mutable_source, x as pop, y as set } from "./client-pmAKFFi-.js";
 import { onDestroy, onMount } from "svelte";
 enable_legacy_mode_flag();
-var root = from_html("<div><div data-motion-rail-scrollable=\"\"><div data-motion-rail-grid=\"\"><!></div></div></div>");
+var root = from_html("<div><div data-motionrail-scrollable=\"\"><div data-motionrail-grid=\"\"><!></div></div></div>");
 function Svelte(S, C) {
 	let w = legacy_rest_props(legacy_rest_props(C, [
 		"children",
@@ -27,7 +27,7 @@ function Svelte(S, C) {
 	onMount(() => {
 		if (!get(O)) return;
 		set(k, new MotionRail(get(O), T()));
-		let x = get(O).querySelector("[data-motion-rail-grid]");
+		let x = get(O).querySelector("[data-motionrail-grid]");
 		x && (A = new MutationObserver(() => {
 			get(k) && get(k).update();
 		}), A.observe(x, {
@@ -50,7 +50,7 @@ function Svelte(S, C) {
 	init();
 	var P = root();
 	attribute_effect(P, () => ({
-		"data-motion-rail": !0,
+		"data-motionrail": !0,
 		...w
 	}));
 	var F = child(P), I = child(F);

package/dist/svelte5.js

@@ -1,7 +1,7 @@
-import { t as MotionRail } from "./motionrail-Dq8joDtA.js";
+import { t as MotionRail } from "./motionrail-DsLqZe8W.js";
 import { C as reset, S as push, _ as child, a as bind_this, b as state, d as from_html, g as user_effect, l as snippet, n as prop, p as get, r as rest_props, s as attribute_effect, u as append, w as noop, x as pop, y as set } from "./client-pmAKFFi-.js";
 import { onMount } from "svelte";
-var root = from_html("<div><div data-motion-rail-scrollable=\"\"><div data-motion-rail-grid=\"\"><!></div></div></div>");
+var root = from_html("<div><div data-motionrail-scrollable=\"\"><div data-motionrail-grid=\"\"><!></div></div></div>");
 function Svelte5(v, y) {
 	push(y, !0);
 	let b = prop(y, "options", 19, () => ({})), x = prop(y, "instance", 15), S = prop(y, "container", 15), C = rest_props(y, [
@@ -27,7 +27,7 @@ function Svelte5(v, y) {
 	onMount(() => {
 		if (!get(w)) return;
 		set(T, new MotionRail(get(w), b()), !0);
-		let _ = get(w).querySelector("[data-motion-rail-grid]");
+		let _ = get(w).querySelector("[data-motionrail-grid]");
 		return _ && (set(E, new MutationObserver(() => {
 			get(T) && get(T).update();
 		}), !0), get(E).observe(_, {
@@ -44,7 +44,7 @@ function Svelte5(v, y) {
 		getContainer: O
 	}, A = root();
 	attribute_effect(A, () => ({
-		"data-motion-rail": !0,
+		"data-motionrail": !0,
 		...C
 	}));
 	var j = child(A), M = child(j);

package/dist/vue.js

@@ -1,6 +1,6 @@
-import { t as MotionRail } from "./motionrail-Dq8joDtA.js";
+import { t as MotionRail } from "./motionrail-DsLqZe8W.js";
 import { createElementBlock, createElementVNode, defineComponent, mergeProps, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, useSlots, watch } from "vue";
-var _hoisted_1 = { "data-motion-rail-scrollable": "" }, _hoisted_2 = { "data-motion-rail-grid": "" }, vue_default = /* @__PURE__ */ defineComponent({
+var _hoisted_1 = { "data-motionrail-scrollable": "" }, _hoisted_2 = { "data-motionrail-grid": "" }, vue_default = /* @__PURE__ */ defineComponent({
 	__name: "vue",
 	props: { options: { default: () => ({}) } },
 	emits: ["mounted"],
@@ -20,7 +20,7 @@ var _hoisted_1 = { "data-motion-rail-scrollable": "" }, _hoisted_2 = { "data-mot
 		}), (e, p) => (openBlock(), createElementBlock("div", mergeProps({
 			ref_key: "containerRef",
 			ref: y,
-			"data-motion-rail": ""
+			"data-motionrail": ""
 		}, e.$attrs), [createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [renderSlot(e.$slots, "default")])])], 16));
 	}
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motionrail",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "type": "module",
   "module": "./dist/motionrail.js",
   "types": "./dist/motionrail.d.ts",