From 81d3139c0553cbd44b0c34284a2e18ce068eb9b4 Mon Sep 17 00:00:00 2001
From: Valexr <valexr@gmail.com>
Date: Tue, 30 Aug 2022 13:47:17 +0300
Subject: [PATCH] @slidy/element - improve init, optimise & cleanup

---
 packages/element/public/api.js     | 15 +++--
 packages/element/public/env.js     | 12 ++--
 packages/element/public/index.html | 70 +++++++++++++++---------
 packages/element/public/index.js   |  2 +-
 packages/element/src/component.ts  | 88 ------------------------------
 packages/element/src/index.ts      |  3 +-
 packages/element/src/options.ts    | 29 ----------
 packages/element/src/slidy.ts      | 71 ++++++++++++++++--------
 packages/element/src/types.ts      | 87 +----------------------------
 packages/element/src/utils.ts      | 16 +++++-
 packages/element/tsconfig.json     |  2 +-
 11 files changed, 126 insertions(+), 269 deletions(-)
 delete mode 100644 packages/element/src/component.ts
 delete mode 100644 packages/element/src/options.ts

diff --git a/packages/element/public/api.js b/packages/element/public/api.js
index 1da6d6de..f7040323 100644
--- a/packages/element/public/api.js
+++ b/packages/element/public/api.js
@@ -1,18 +1,21 @@
-export async function getPhotos(node, page, limit) {
+export async function getPhotos(page = 9, limit = 9) {
     node.innerHTML = `<span style="display: grid; place-items: center">Loading... 🚀</span>`;
+    if (node._slidy && thumbs._slidy) {
+        // node.setAttribute('length', node.children.length);
+        // thumbs.setAttribute('length', thumbs.children.length);
+    }
     //page: 38 - END,  61 - START, 28
     try {
-        const res = await fetch(`https://picsum.photos/v2/list?limit=${limit}&page=${page}`, {
-            mode: 'cors',
-        });
+        const res = await fetch(`https://picsum.photos/v2/list?limit=${limit}&page=${page}`);
         const photos = await res.json();
+
         if (photos.length === limit && node.isConnected) {
             node.innerHTML = createSlides(node, photos);
             thumbs.innerHTML = createSlides(thumbs, photos);
             dots.innerHTML = createSlides(dots, photos);
 
-            if (node.children.length === limit) {
-                const mounted = Array.from(node.children).every(
+            if (limit === node.children.length && limit === thumbs.children.length) {
+                const mounted = Array.from(thumbs.children).every(
                     (child) => child && child.isConnected
                 );
                 if (mounted) {
diff --git a/packages/element/public/env.js b/packages/element/public/env.js
index 8589f96d..bdfda945 100644
--- a/packages/element/public/env.js
+++ b/packages/element/public/env.js
@@ -10,7 +10,7 @@ export function setEvents() {
                         if (options[button.id]) {
                             button.classList.add('active');
                         } else if (!isNaN(button.id)) {
-                            button.onclick = (e) => updateAttribute('index', () => e.target.id);
+                            button.onclick = (e) => node.setAttribute('index', e.target.id);
                         }
                     }
 
@@ -92,10 +92,10 @@ export function setEvents() {
                     options.animation = animations[animation.value];
                     break;
 
-                case 'resize':
-                    // slidyT.to(options.index);
-                    // console.log(e.detail);
-                    break;
+                // case 'resize':
+                //     // slidyT.to(options.index);
+                //     // console.log(e.detail);
+                //     break;
 
                 case 'move':
                     utils.moving(e.detail);
@@ -129,7 +129,7 @@ export function setEvents() {
                         }
                     }
                     break;
-                case 'keys':
+                // case 'keys':
                 // console.log(e);
                 default:
                     // console.log(e);
diff --git a/packages/element/public/index.html b/packages/element/public/index.html
index f8041d3f..2fb62fa8 100644
--- a/packages/element/public/index.html
+++ b/packages/element/public/index.html
@@ -52,7 +52,7 @@
         <link rel="stylesheet" defer href="dev.css" />
         <link rel="stylesheet" href="build/element.css" />
         <!-- <script type="text/javascript" src="index.js"></script> -->
-        <!-- <script type="text/javascript" src="https://unpkg.com/@slidy/core/dist/index.js"></script> -->
+        <script type="text/javascript" src="https://unpkg.com/@slidy/easing/dist/index.js"></script>
         <script type="text/javascript" src="https://unpkg.com/@slidy/animation/dist/index.js"></script>
 
         <title id="title"></title>
@@ -72,7 +72,7 @@
                 index: 4,
                 clamp: 0,
                 indent: 1,
-                length: 9,
+                // length: 9,
                 sensity: 5,
                 gravity: 1.2,
                 duration: 375,
@@ -83,25 +83,26 @@
                 easing: easings.lenear,
             };
             window.position = 0;
+            window.page = () => utils.randomQ(1, 99);
             window.getPhotos = getPhotos;
-            window.updateAttribute = (attribute, cb) => {
+            window.setEvents = setEvents;
+            window.updateAttribute = (node, attribute, cb) => {
                 const value = node.getAttribute(attribute);
                 node.setAttribute(attribute, cb(JSON.parse(value)));
             };
-            // node.update({ animation: animations.stairs });
-            // updateAttribute('animation', () => animations.stairs);
+            // node.options = { animation: animations.stairs };
             console.log('module window:', window);
 
-            fetch('https://unpkg.com/@slidy/element/package.json', {
-                mode: 'cors',
-            })
-                .then(async (res) => await res.json())
-                .then(({ version }) => {
-                    title.innerText = `Slidy ${version} - Element`;
-                    header.innerHTML = `Slidy <span>${version}</span><sub>Element</sub><sub id="stats" />`;
-                    getPhotos(node, utils.randomQ(1, 99), options.length)
-                        .then((length) => length && setEvents());
-                });
+            // fetch('https://unpkg.com/@slidy/element/package.json', {
+            //     mode: 'cors',
+            // })
+            //     .then(async (res) => await res.json())
+            //     .then(({ version }) => {
+            //         title.innerText = `Slidy ${version} - Element`;
+            //         header.innerHTML = `Slidy <span>${version}</span><sub>Element</sub><sub id="stats" />`;
+            //         getPhotos(page(), options.length)
+            //             .then((length) => length && setEvents());
+            //     });
         </script>
     </head>
 
@@ -113,35 +114,50 @@ <h3 id="header"></h3>
         </header>
 
         <main id="main" style="--gap: 2rem; --flow: row; --width: auto; --height: 375px">
-            <slidy-element id="node" tabindex="0" index="2" snap="center" loop="false">
-                <!-- <img src="https://picsum.photos/id/13/1280/800.jpg" />
-                <img src="https://picsum.photos/id/14/1280/800.jpg" />
-                <img src="https://picsum.photos/id/15/1280/800.jpg" />
-                <img src="https://picsum.photos/id/16/1280/800.jpg" />
-                <img src="https://picsum.photos/id/17/1280/800.jpg" /> -->
+            <slidy-element id="node" tabindex="0" index="4" snap="center">
             </slidy-element>
-            <slidy-element id="thumbs" style="--width: 100px; --height: 100px; --gap: 1rem; --flow: row;">
+            <!-- <img width="1280" height="800" src="https://picsum.photos/id/13/1280/800.jpg" />
+            <img width="1280" height="800" src="https://picsum.photos/id/14/1280/800.jpg" />
+            <img width="1280" height="800" src="https://picsum.photos/id/15/1280/800.jpg" />
+            <img width="1280" height="800" src="https://picsum.photos/id/16/1280/800.jpg" />
+            <img width="1280" height="800" src="https://picsum.photos/id/17/1280/800.jpg" /> -->
+            <slidy-element id="thumbs" index="4" style="--width: 100px; --height: 100px; --gap: 1rem; --flow: row;">
             </slidy-element>
+
         </main>
         <script>
             const element = document.querySelector('#node');
             console.log('script window:', window);
-            element.options = { index: 4, animation: SlidyAnimation.stairs };
+            fetch('https://unpkg.com/@slidy/element/package.json', {
+                mode: 'cors',
+            })
+                .then(async (res) => await res.json())
+                .then(({ version }) => {
+                    title.innerText = `Slidy ${version} - Element`;
+                    header.innerHTML = `Slidy <span>${version}</span><sub>Element</sub><sub id="stats" />`;
+                    getPhotos(page(), options.length)
+                        .then((length) => length && setEvents());
+                });
+            // element.options = { snap: 'center', animation: SlidyAnimation.stairs, easing: SlidyEasing.back };
+            // animation.value = 'stairs';
+            // easing.value = 'back';
+            element.setAttribute('easing', SlidyEasing.back.toString());
+            element.setAttribute('animation', SlidyAnimation.stairs.toString());
         </script>
 
         <footer>
             <nav>
-                <button id="prev" onclick="updateAttribute('index', (val) => val-1)">←</button>
-                <button id="reload" onclick="getPhotos(node, utils.randomQ(1, 99), options.length)">
+                <button id="prev" onclick="updateAttribute(node,'index', (val) => val-1)">←</button>
+                <button id="reload" onclick="getPhotos(page(), options.length);">
                     <i class="icon icon-refresh"></i>
                 </button>
-                <button id="next" onclick="updateAttribute('index', (val) => val+1)">→</button>
+                <button id="next" onclick="updateAttribute(node,'index', (val) => val+1)">→</button>
             </nav>
 
             <nav id="dots"></nav>
 
             <nav id="buttons">
-                <button id="loop" onclick="updateAttribute('loop', (val) => val = !val)">
+                <button id="loop" onclick="updateAttribute(node,'loop', (val) => val = !val)">
                     loop
                 </button>
             </nav>
diff --git a/packages/element/public/index.js b/packages/element/public/index.js
index f2eb010c..8b037e34 100644
--- a/packages/element/public/index.js
+++ b/packages/element/public/index.js
@@ -1 +1 @@
-"use strict";var Slidy=(()=>{var Y=Object.defineProperty;var Nt=Object.getOwnPropertyDescriptor;var qt=Object.getOwnPropertyNames;var Pt=Object.prototype.hasOwnProperty;var Ct=(t,n,e)=>n in t?Y(t,n,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[n]=e;var R=(t,n)=>{for(var e in n)Y(t,e,{get:n[e],enumerable:!0})},Dt=(t,n,e,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let a of qt(n))!Pt.call(t,a)&&a!==e&&Y(t,a,{get:()=>n[a],enumerable:!(s=Nt(n,a))||s.enumerable});return t};var Xt=t=>Dt(Y({},"__esModule",{value:!0}),t);var et=(t,n,e)=>(Ct(t,typeof n!="symbol"?n+"":n,e),e);var Wt={};R(Wt,{animation:()=>Z,easing:()=>G,element:()=>q,media:()=>B});function O(t,n,e){return Math.min(e,Math.max(t,n))}function H(t,n,e,s,a){return e?r=>{s||(t(r),s=!0,clearTimeout(a),a=setTimeout(()=>s=!1,n))}:r=>t(r)}function S(t,n){for(let e=0;e<t.length;e++)n(t[e],e);return t}function st(t){return new Promise((n,e)=>{let s=0,a=setInterval(()=>{s++,s>=69?(clearInterval(a),e("few slides")):t.children.length>1&&(clearInterval(a),n(Ut(t)))},16)})}function Ut(t){return S(t.children,(n,e)=>n.index=e)}function Q(t,n,e){let s=t.children.length;return n.loop?(e+s)%s:O(0,e,s-1)}function X(t,n){if(t.type==="wheel")return Math.abs(t.deltaX)>=Math.abs(t.deltaY)?t.deltaX:t.shiftKey||n.axis==="y"?t.deltaY:0;{let e=s=>s.touches&&s.touches[0]||s;return n.axis==="y"?e(t).pageY:e(t).pageX}}function L(t,n,e){t.dispatchEvent(new CustomEvent(n,{detail:e}))}function N(t,n,e=!0){S(n,s=>{let a=e?"addEventListener":"removeEventListener",[r,b,f]=s;t[a](r,b,f)})}function ot(t,n){let e=[...t.children],s=e.length,a=[...Array(s).keys()],r=s-1,b=Math.floor(s/2),f=e[1].offsetTop-e[0].offsetTop,g=f?"offsetTop":"offsetLeft",m=f?"offsetHeight":"offsetWidth",i=Math.sign(e[r][g]),d=s>1?e[r][g]*i-e[r-1][g]*i-e[r-Math.max(i,0)][m]:0,k=T(i<0?r:0,"start"),w=T(i<0?0:r,"end"),M=Math.abs(w-k)>d*2,$=n.loop?!1:(i<0?n.index===r:!n.index)&&n.direction<=0&&n.position<k||(i<0?!n.index:n.index===r)&&n.direction>0&&n.position>w;function T(c,x=n.snap){let l=I=>e.find(A=>A.index===I)||e[0],u=I=>t[m]-l(I)[m],C=l(c)[m]+d*2<t[m]?n.indent:u(c)/2/d||0,U=z(c,x)<=z(i<0?r:0,"start"),h=z(c,x)>=z(i<0?0:r,"end"),W=U?"start":h?"end":n.snap;return z(c,n.snap&&n.snap!=="deck"&&!n.loop?W:x);function z(I,A){let K=A==="start"?0:A==="end"?1:.5,_=A==="start"?-C:A==="end"?C:0;return l(I)[g]-u(I)*K+d*_}}return{end:w,start:k,edges:$,distance:T,scrollable:M,index(c){let x=l=>Math.abs(T(l)-c);return a.reduce((l,u)=>x(u)<x(l)?u:l,0)},position(c=n.loop){if(c){let x=n.index,l=e.slice(x-b).concat(e.slice(0,x-b));t.replaceChildren(...l)}return M?T(n.index):0},swap(c){let x=s%c?Math.sign(-c):c,l=x>0?0:r;return l?t.prepend(e[l]):t.append(e[l]),(e[l][m]+d)*(x*i)},animate(){S(e,(c,x)=>{c.i=x,c.active=n.loop?b:n.index,c.size=c[m]+d,c.dist=T(c.index),c.track=n.position-c.dist,c.turn=O(-1,c.track/c.size,1),c.exp=O(0,(c.size-Math.abs(c.track))/c.size,1);let l=n.snap==="deck"?c.dist:n.position,u=f?`translateY(${-l}px)`:`translateX(${-l}px)`,P=n.animation?n.animation({node:t,child:c,options:Object.assign(n,{vertical:f,reverse:i}),translate:u}):{transform:u};Object.assign(c.style,P)})}}}function V(t,n){let e={index:0,clamp:0,indent:1,sensity:5,gravity:1.2,duration:375,animation:void 0,easing:void 0,snap:void 0,axis:void 0,loop:!1,...n},s=0,a=0,r=0,b=0,f=0,g=!1,m,i=s=e.index,d=e.position,k=e.duration/2,w=e.sensity,M=e.gravity,$=e.clamp,T=[["touchmove",z,{passive:!1}],["mousemove",z],["touchend",I],["mouseup",I]],c=[["wheel",K,{passive:!1,capture:!0}]],x=[["touchstart",W,{passive:!1}],["mousedown",W],["keydown",_],["contextmenu",()=>h(i)],["dragstart",o=>o.preventDefault()]],l=new ResizeObserver(o=>{h(i),d=u().position(!1),L(t,"resize",{ROE:o})});function u(){return ot(t,e)}function P(o,p){return e.axis==="y"&&o.type==="touchmove"?!u().edges:Math.abs(p)>=w}st(t).then(()=>{t.style.outline="0",t.style.overflow="hidden",t.style.userSelect="none",t.onwheel=H(A,k,$),d=u().position(),l.observe(t),N(t,x),N(window,c),L(t,"mount",{options:e})}).catch(o=>console.error("Slidy:",o));function C(o,p){e.direction=Math.sign(o),d+=v(o),d=e.position=E(d),i=e.index=u().index(d),M=u().edges?1.8:e.gravity,w=0,u().animate(),L(t,"move",{index:i,position:d});function v(y){return i-s&&(y-=e.loop?u().swap(i-s):0,s=i,L(t,"index",{index:p})),u().scrollable?y:0}function E(y){let F=O(u().start,y,u().end);return!e.snap&&!e.loop?F:y}}function U(o,p){let v=performance.now(),y=e.snap||e.loop||u().edges?u().distance(o):O(u().start,d+p,u().end),F=k*O(1,Math.abs(o-s),2);p=y-d,requestAnimationFrame(function j(){let Lt=v-performance.now(),tt=Math.exp(Lt/F),Ft=e.easing?e.easing(tt):tt,nt=p*Ft,St=(e.loop?u().distance(o):y)-d-nt;C(St,o),Math.round(nt)?r=requestAnimationFrame(j):(w=e.sensity,D())})}function h(o=0){D(),o=Q(t,e,o);let p=u().distance(o)-d;U(o,p)}function W(o){D(),w=e.sensity,a=X(o,e),b=o.timeStamp,f=0,N(window,T),!u().edges&&o.stopPropagation()}function z(o){let p=(a-X(o,e))*(2-M),v=o.timeStamp-b,E=1e3*p/(M+v);b=o.timeStamp,a=X(o,e),f=(2-M)*E+(M-1)*f,window.onscroll=()=>{h(i),M=2},P(o,p)&&(C(p,i),o.preventDefault())}function I(){D();let o=f*(2-M),p=u().index(d+o);U(v(p,e),o);function v(E,y){let F=$*y.direction;return E=$&&E-s?i+F:E,Q(t,y,E)}}function A(o){D();let p=X(o,e)*(2-M),v=i+Math.sign(p)*($||1),E=$||o.shiftKey,y=u().edges?p/5:p,F=E?v:i,j=E?0:k/2;!E&&P(o,y)&&C(y,i),m=(e.snap||E)&&P(o,y)?setTimeout(()=>h(F),j):void 0,!u().edges&&o.stopPropagation()}function K(o){o.composedPath().includes(t)&&((Math.abs(o.deltaX)>=Math.abs(o.deltaY)||o.shiftKey||e.axis==="y"&&!u().edges)&&o.preventDefault(),o.shiftKey!==g&&(t.onwheel=H(A,k,o.shiftKey),g=o.shiftKey))}function _(o){let p=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"],v=(p.indexOf(o.key)%2-1||1)*($||1);p.indexOf(o.key)>=0&&(h(i+v),o.preventDefault()),L(t,"keys",o.key)}function D(){clearTimeout(m),cancelAnimationFrame(r),N(window,T,!1)}function It(o){S(Object.entries(o),([p,v])=>{if(v!==e[p]){switch(p){case"index":i=e[p]=Q(t,e,v),h(i);break;case"gravity":M=e[p]=O(0,v,2);break;case"duration":e[p]=v,k=v/2;break;case"sensity":w=e[p]=v;break;case"clamp":$=e[p]=v,t.onwheel=H(A,k,v);break;default:e[p]=v,d=e.position=u().position(!1),h(i);break}L(t,"update",o)}})}function zt(){D(),l.disconnect(),N(t,x,!1),N(window,c,!1),L(t,"destroy",t)}return{update:It,destroy:zt,to:h}}var J={index:0,clamp:0,indent:1,sensity:5,gravity:1.2,duration:375,animation:void 0,easing:void 0,snap:void 0,axis:void 0,loop:!1};function at(t){return!isNaN(t)||["true","false"].includes(t)?JSON.parse(t):t}var q=class extends HTMLElement{slidy;_options;constructor(){super(),this.setUpAccessors(),this._options={}}set options(n){this._options=n}get options(){return this._options}setUpAccessors(){this.getAttributeNames().forEach(n=>{Object.defineProperty(this,n,{set:e=>this.setAttribute(n,e),get:()=>this.getAttribute(n)})})}connectedCallback(){let n=this.getAttributeNames().reduce((e,s)=>{let a=this[s];return s in J&&a&&(e[s]=at(a)),e},{});this.isConnected&&(console.log(this.options,n),this.slidy=V(this,{...this.options,...n}))}attributeChangedCallback(n,e,s){let a={[n]:s};this.slidy?.update(a)}};et(q,"observedAttributes",Object.keys(J));customElements.define("slidy-element",q);var Z={};R(Z,{blur:()=>ct,deck:()=>xt,fade:()=>it,flip:()=>bt,matrix:()=>lt,perspective:()=>mt,rotate:()=>pt,scale:()=>ut,shade:()=>rt,shuffle:()=>ft,stairs:()=>vt,translate:()=>dt});var it=({child:t,translate:n})=>({opacity:t.exp,transform:n}),rt=({child:t,translate:n})=>{let e=t.i===t.active,s=Math.abs(t.track)<=t.size,a=e?0:1,r=`${t.track/.5}px, 0`;return t.index===4&&console.log(t.index,s),{transform:e?`${n} translate(${r})`:n,zIndex:a}},ct=({child:t,translate:n})=>{let s=t.i===t.active?t.active:t.i>t.active?t.active-t.i:t.i-t.active;return{opacity:t.exp,filter:`blur(${1-t.exp}ex`,transform:n,zIndex:s}},ut=({child:t,translate:n})=>({transform:`${n} scale(${t.exp})`}),pt=({child:t,options:n,translate:e})=>{let a=t.index===n.index?0:-1;return{transform:`${e} rotate(${t.turn}turn)`,zIndex:a}},mt=({child:t,translate:n})=>({transform:`${n} perspective(${-t.turn}px)`}),ft=({node:t,child:n,options:e,translate:s})=>{let a=Math.sign(n.track),r=Math.abs(n.track)<n.size&&n.i===n.active,f=Math.abs(n.track)<n.size/2?-n.track:Math.abs(n.track)-n.size,g=e.vertical?`0, ${-n.track}px`:`${f}px, ${a}px`,m=n.i===n.active?n.active:n.i>n.active?n.active-n.i:-(n.i-n.active+t.children.length);return{transform:r?`${s} translate(${g})`:`${s}`,zIndex:m}},dt=({translate:t})=>({transform:t}),lt=({node:t,child:n,options:e})=>{let s=n.index===e.index,a=n.exp,r=-n.turn,b=-n.turn,f=n.exp,g=-e.position,m=-n.turn,i=s?t.children.length-n.index:n.index<e.index?n.index-t.children.length:t.children.length-n.index-1;return{transform:`matrix(${a}, ${r}, ${b}, ${f}, ${g}, ${m})`,zIndex:i}},vt=({node:t,child:n,options:e,translate:s})=>{t.style.perspective=`${t.offsetWidth}px`;let a=e.snap==="deck",b=n.i===n.active?n.active:n.i>n.active?n.active-n.i:n.i-t.children.length+1,f=a?`scale(${n.exp})`:`translateZ(${-Math.abs(n.track)}px)`;return{transform:s+f,zIndex:b}},bt=({node:t,child:n,options:e,translate:s})=>{t.style.perspective=`${t.offsetWidth}px`;let a=e.snap==="deck",r=n.turn/(a?-2:-4),b=e.vertical?`rotateX(${r}turn)`:`rotateY(${-r}turn)`,f=Math.abs(r)<.25;return{transform:s+b,zIndex:f?0:-1,opacity:f||!a?1:0}},xt=({node:t,child:n,options:e,translate:s})=>{t.style.perspective=`${t.offsetWidth}px`;let a=n.index===e.index,r=n.size/10,b=Math.abs(n.track*2)>=n.size/2,f=a?b?n.size+n.track:-n.track*2:-n.track/r,g=e.vertical?0:f,m=e.vertical?f:0,i=-Math.abs(n.track)/(r/2),d=a?-n.track/r:-n.track/(r*2),k=a?(n.size-Math.abs(n.track/2))/n.size:1,w=a?n.active:n.i>n.active?n.active-n.i:1-t.children.length-n.i;return{transform:s+`translate3d(${g}px, ${m}px, ${i}px) rotateZ(${d}deg) scale(${k})`,zIndex:w}};var G={};R(G,{back:()=>Tt,bounce:()=>wt,circ:()=>$t,cubic:()=>Et,elastic:()=>Ot,expo:()=>At,linear:()=>gt,quad:()=>yt,quart:()=>kt,quint:()=>Mt,sine:()=>ht});var gt=t=>t,yt=t=>t*t,Et=t=>t*t*t,kt=t=>t*t*t*t,Mt=t=>t*t*t*t*t,wt=t=>1-(e=>e<.36363636363636365?7.5625*e*e:e<.7272727272727273?7.5625*(e-=.5454545454545454)*e+.75:e<.9090909090909091?7.5625*(e-=.8181818181818182)*e+.9375:7.5625*(e-=.9545454545454546)*e+.984375)(1-t),ht=t=>1-Math.cos(t*Math.PI/2),At=t=>t===0?0:Math.pow(2,10*t-10),Ot=t=>{let n=2*Math.PI/3;return t===0?0:t===1?1:-Math.pow(2,10*t-10)*Math.sin((t*10-10.75)*n)},$t=t=>1-Math.sqrt(1-Math.pow(t,2)),Tt=t=>2.70158*t*t*t-1.70158*t*t;function B({queries:t,getter:n,cookie:e}){let s=new Set,a={};if(typeof window=="object")for(let m in t){let i=window.matchMedia(t[m]);r(i,m),i.onchange=d=>r(d,m)}function r(m,i){a[i]=m.matches,b(a),n&&n(a),e&&(document.cookie=`media=${JSON.stringify(a)}`)}function b(m){s.forEach(i=>i(m))}function f(m){return m(a),s.add(m),()=>g(m)}let g=m=>s.delete(m);return{matches:a,subscribe:f}}return Xt(Wt);})();
+"use strict";var Slidy=(()=>{var W=Object.defineProperty;var Pt=Object.getOwnPropertyDescriptor;var qt=Object.getOwnPropertyNames;var Ut=Object.prototype.hasOwnProperty;var Ct=(t,n,e)=>n in t?W(t,n,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[n]=e;var j=(t,n)=>{for(var e in n)W(t,e,{get:n[e],enumerable:!0})},Dt=(t,n,e,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let i of qt(n))!Ut.call(t,i)&&i!==e&&W(t,i,{get:()=>n[i],enumerable:!(s=Pt(n,i))||s.enumerable});return t};var Xt=t=>Dt(W({},"__esModule",{value:!0}),t);var et=(t,n,e)=>(Ct(t,typeof n!="symbol"?n+"":n,e),e);var Wt={};j(Wt,{animation:()=>Z,easing:()=>G,element:()=>P,media:()=>B});function A(t,n,e){return Math.min(e,Math.max(t,n))}function Y(t,n,e,s,i){return e?a=>{s||(t(a),s=!0,clearTimeout(i),i=setTimeout(()=>s=!1,n))}:a=>t(a)}function S(t,n){for(let e=0;e<t.length;e++)n(t[e],e);return t}function st(t){return new Promise((n,e)=>{let s=0,i=setInterval(()=>{s++,s>=69?(clearInterval(i),e("few slides")):t.children.length>1&&(clearInterval(i),n(_t(t)))},16)})}function _t(t){return S(t.children,(n,e)=>n.index=e)}function H(t,n,e){let s=t.children.length;return n.loop?(e+s)%s:A(0,e,s-1)}function D(t,n){if(t.type==="wheel")return Math.abs(t.deltaX)>=Math.abs(t.deltaY)?t.deltaX:t.shiftKey||n.axis==="y"?t.deltaY:0;{let e=s=>s.touches&&s.touches[0]||s;return n.axis==="y"?e(t).pageY:e(t).pageX}}function L(t,n,e){t.dispatchEvent(new CustomEvent(n,{detail:e}))}function N(t,n,e=!0){S(n,s=>{let i=e?"addEventListener":"removeEventListener",[a,v,f]=s;t[i](a,v,f)})}function ot(t,n){let e=[...t.children],s=e.length,i=[...Array(s).keys()],a=s-1,v=Math.floor(s/2),f=e[1].offsetTop-e[0].offsetTop,x=f?"offsetTop":"offsetLeft",m=f?"offsetHeight":"offsetWidth",r=Math.sign(e[a][x]),d=s>1?e[a][x]*r-e[a-1][x]*r-e[a-Math.max(r,0)][m]:0,k=T(r<0?a:0,"start"),h=T(r<0?0:a,"end"),w=Math.abs(h-k)>d*2,$=n.loop?!1:(r<0?n.index===a:!n.index)&&n.direction<=0&&n.position<k||(r<0?!n.index:n.index===a)&&n.direction>0&&n.position>h;function T(c,b=n.snap){let l=I=>e.find(O=>O.index===I)||e[0],u=I=>t[m]-l(I)[m],U=l(c)[m]+d*2<t[m]?n.indent:u(c)/2/d||0,X=z(c,b)<=z(r<0?a:0,"start"),M=z(c,b)>=z(r<0?0:a,"end"),_=X?"start":M?"end":n.snap;return z(c,n.snap&&n.snap!=="deck"&&!n.loop?_:b);function z(I,O){let K=O==="start"?0:O==="end"?1:.5,R=O==="start"?-U:O==="end"?U:0;return l(I)[x]-u(I)*K+d*R}}return{end:h,start:k,edges:$,distance:T,scrollable:w,index(c){let b=l=>Math.abs(T(l)-c);return i.reduce((l,u)=>b(u)<b(l)?u:l,0)},position(c=n.loop){if(c){let b=n.index,l=e.slice(b-v).concat(e.slice(0,b-v));t.replaceChildren(...l)}return w?T(n.index):0},swap(c){let b=s%c?Math.sign(-c):c,l=b>0?0:a;return l?t.prepend(e[l]):t.append(e[l]),(e[l][m]+d)*(b*r)},animate(){S(e,(c,b)=>{c.i=b,c.active=n.loop?v:n.index,c.size=c[m]+d,c.dist=T(c.index),c.track=n.position-c.dist,c.turn=A(-1,c.track/c.size,1),c.exp=A(0,(c.size-Math.abs(c.track))/c.size,1);let l=n.snap==="deck"?c.dist:n.position,u=f?`translateY(${-l}px)`:`translateX(${-l}px)`,q=n.animation?n.animation({node:t,child:c,options:Object.assign(n,{vertical:f,reverse:r}),translate:u}):{transform:u};Object.assign(c.style,q)})}}}function J(t,n){let e={index:0,clamp:0,indent:1,sensity:5,gravity:1.2,duration:375,animation:void 0,easing:void 0,snap:void 0,axis:void 0,loop:!1,...n},s=0,i=0,a=0,v=0,f=0,x=!1,m,r=s=e.index,d=e.position,k=e.duration/2,h=e.sensity,w=e.gravity,$=e.clamp,T=[["touchmove",z,{passive:!1}],["mousemove",z],["touchend",I],["mouseup",I]],c=[["wheel",K,{passive:!1,capture:!0}]],b=[["touchstart",_,{passive:!1}],["mousedown",_],["keydown",R],["contextmenu",()=>M(r)],["dragstart",o=>o.preventDefault()]],l=new ResizeObserver(o=>{M(r),d=u().position(!1),L(t,"resize",{ROE:o})});function u(){return ot(t,e)}function q(o,p){return e.axis==="y"&&o.type==="touchmove"?!u().edges:Math.abs(p)>=h}st(t).then(()=>{t.style.cssText+="outline:0;overflow:hidden;user-select:none;-webkit-user-select:none;",t.onwheel=Y(O,k,$),d=u().position(),l.observe(t),N(t,b),N(window,c),L(t,"mount",{options:e})}).catch(o=>console.error("Slidy:",o));function U(o,p){e.direction=Math.sign(o),d+=g(o),d=e.position=E(d),r=e.index=u().index(d),w=u().edges?1.8:e.gravity,h=0,u().animate(),L(t,"move",{index:r,position:d});function g(y){return r-s&&(y-=e.loop?u().swap(r-s):0,s=r,L(t,"index",{index:p})),u().scrollable?y:0}function E(y){let F=A(u().start,y,u().end);return!e.snap&&!e.loop?F:y}}function X(o,p){let g=performance.now(),y=e.snap||e.loop||u().edges?u().distance(o):A(u().start,d+p,u().end),F=k*A(1,Math.abs(o-s),2);p=y-d,requestAnimationFrame(function V(){let Ft=g-performance.now(),tt=Math.exp(Ft/F),St=e.easing?e.easing(tt):tt,nt=p*St,Nt=(e.loop?u().distance(o):y)-d-nt;U(Nt,o),Math.round(nt)?a=requestAnimationFrame(V):(h=e.sensity,C())})}function M(o=0){C(),o=H(t,e,o);let p=u().distance(o)-d;X(o,p)}function _(o){C(),h=e.sensity,i=D(o,e),v=o.timeStamp,f=0,N(window,T),!u().edges&&o.stopPropagation()}function z(o){let p=(i-D(o,e))*(2-w),g=o.timeStamp-v,E=1e3*p/(w+g);v=o.timeStamp,i=D(o,e),f=(2-w)*E+(w-1)*f,window.onscroll=()=>{M(r),w=2},q(o,p)&&(U(p,r),o.preventDefault())}function I(){C();let o=f*(2-w),p=u().index(d+o);X(g(p,e),o);function g(E,y){let F=$*y.direction;return E=$&&E-s?r+F:E,H(t,y,E)}}function O(o){C();let p=D(o,e)*(2-w),g=r+Math.sign(p)*($||1),E=$||o.shiftKey,y=u().edges?p/5:p,F=E?g:r,V=E?0:k/2;!E&&q(o,y)&&U(y,r),m=(e.snap||E)&&q(o,y)?setTimeout(()=>M(F),V):void 0,!u().edges&&o.stopPropagation()}function K(o){o.composedPath().includes(t)&&((Math.abs(o.deltaX)>=Math.abs(o.deltaY)||o.shiftKey||e.axis==="y"&&!u().edges)&&o.preventDefault(),o.shiftKey!==x&&(t.onwheel=Y(O,k,o.shiftKey),x=o.shiftKey))}function R(o){let p=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"],g=(p.indexOf(o.key)%2-1||1)*($||1);p.indexOf(o.key)>=0&&(M(r+g),o.preventDefault()),L(t,"keys",o.key)}function C(){clearTimeout(m),cancelAnimationFrame(a),N(window,T,!1)}function zt(o){S(Object.entries(o),([p,g])=>{if(g!==e[p]){switch(p){case"index":r=e[p]=H(t,e,g),M(r);break;case"gravity":w=e[p]=A(0,g,2);break;case"duration":e[p]=g,k=g/2;break;case"sensity":h=e[p]=g;break;case"clamp":$=e[p]=g,t.onwheel=Y(O,k,g);break;default:e[p]=g,d=e.position=u().position(!1),M(r);break}L(t,"update",o)}})}function Lt(){C(),l.disconnect(),N(t,b,!1),N(window,c,!1),L(t,"destroy",t)}return{update:zt,destroy:Lt,to:M}}function it(t){return!isNaN(t)||["true","false"].includes(t)?JSON.parse(t):t}function rt(t){return Function(`const fn = ${t}; return fn`)()}var Q=class extends HTMLElement{_slidy;_options;constructor(){super(),this.setUpAccessors(Q.observedAttributes)}set options(n){this._options=n}get options(){return this._options}setUpAccessors(n){n.forEach(e=>{Object.defineProperty(this,e,{set:s=>this.setAttribute(e,s),get:()=>this.getAttribute(e)})})}setUpOptions(n){return n.reduce((e,s)=>{let i=this[s];return s!=="length"&&i&&(["animation","easing"].includes(s)?e[s]=rt(i):e[s]=it(i)),e},{})}connectedCallback(){this._options=this.setUpOptions(Q.observedAttributes),this.isConnected&&(console.log(this.id,this.options),this.init(this._options))}attributeChangedCallback(n,e,s){if(n!=="length"){let i={[n]:s};this.update(i)}else this.init(this._options)}init(n={}){this._slidy=J(this,n)}goto(n){this._slidy?.to(n)}update(n){this._slidy?.update(n)}destroy(){this._slidy?.destroy()}},P=Q;et(P,"observedAttributes",["index","clamp","indent","sensity","gravity","duration","animation","easing","snap","axis","loop","length"]);"customElements"in window&&customElements.define("slidy-element",P);var Z={};j(Z,{blur:()=>ut,deck:()=>xt,fade:()=>at,flip:()=>bt,matrix:()=>gt,perspective:()=>ft,rotate:()=>mt,scale:()=>pt,shade:()=>ct,shuffle:()=>dt,stairs:()=>vt,translate:()=>lt});var at=({child:t,translate:n})=>({opacity:t.exp,transform:n}),ct=({child:t,translate:n})=>{let e=t.i===t.active,s=Math.abs(t.track)<=t.size,i=e?0:1,a=`${t.track/.5}px, 0`;return t.index===4&&console.log(t.index,s),{transform:e?`${n} translate(${a})`:n,zIndex:i}},ut=({child:t,translate:n})=>{let s=t.i===t.active?t.active:t.i>t.active?t.active-t.i:t.i-t.active;return{opacity:t.exp,filter:`blur(${1-t.exp}ex`,transform:n,zIndex:s}},pt=({child:t,translate:n})=>({transform:`${n} scale(${t.exp})`}),mt=({child:t,options:n,translate:e})=>{let i=t.index===n.index?0:-1;return{transform:`${e} rotate(${t.turn}turn)`,zIndex:i}},ft=({child:t,translate:n})=>({transform:`${n} perspective(${-t.turn}px)`}),dt=({node:t,child:n,options:e,translate:s})=>{let i=Math.sign(n.track),a=Math.abs(n.track)<n.size&&n.i===n.active,f=Math.abs(n.track)<n.size/2?-n.track:Math.abs(n.track)-n.size,x=e.vertical?`0, ${-n.track}px`:`${f}px, ${i}px`,m=n.i===n.active?n.active:n.i>n.active?n.active-n.i:-(n.i-n.active+t.children.length);return{transform:a?`${s} translate(${x})`:`${s}`,zIndex:m}},lt=({translate:t})=>({transform:t}),gt=({node:t,child:n,options:e})=>{let s=n.index===e.index,i=n.exp,a=-n.turn,v=-n.turn,f=n.exp,x=-e.position,m=-n.turn,r=s?t.children.length-n.index:n.index<e.index?n.index-t.children.length:t.children.length-n.index-1;return{transform:`matrix(${i}, ${a}, ${v}, ${f}, ${x}, ${m})`,zIndex:r}},vt=({node:t,child:n,options:e,translate:s})=>{t.style.perspective=`${t.offsetWidth}px`;let i=e.snap==="deck",v=n.i===n.active?n.active:n.i>n.active?n.active-n.i:n.i-t.children.length+1,f=i?`scale(${n.exp})`:`translateZ(${-Math.abs(n.track)}px)`;return{transform:s+f,zIndex:v}},bt=({node:t,child:n,options:e,translate:s})=>{t.style.perspective=`${t.offsetWidth}px`;let i=e.snap==="deck",a=n.turn/(i?-2:-4),v=e.vertical?`rotateX(${a}turn)`:`rotateY(${-a}turn)`,f=Math.abs(a)<.25;return{transform:s+v,zIndex:f?0:-1,opacity:f||!i?1:0}},xt=({node:t,child:n,options:e,translate:s})=>{t.style.perspective=`${t.offsetWidth}px`;let i=n.index===e.index,a=n.size/10,v=Math.abs(n.track*2)>=n.size/2,f=i?v?n.size+n.track:-n.track*2:-n.track/a,x=e.vertical?0:f,m=e.vertical?f:0,r=-Math.abs(n.track)/(a/2),d=i?-n.track/a:-n.track/(a*2),k=i?(n.size-Math.abs(n.track/2))/n.size:1,h=i?n.active:n.i>n.active?n.active-n.i:1-t.children.length-n.i;return{transform:s+`translate3d(${x}px, ${m}px, ${r}px) rotateZ(${d}deg) scale(${k})`,zIndex:h}};var G={};j(G,{back:()=>It,bounce:()=>Mt,circ:()=>Tt,cubic:()=>kt,elastic:()=>$t,expo:()=>At,linear:()=>yt,quad:()=>Et,quart:()=>wt,quint:()=>ht,sine:()=>Ot});var yt=t=>t,Et=t=>t*t,kt=t=>t*t*t,wt=t=>t*t*t*t,ht=t=>t*t*t*t*t,Mt=t=>1-(e=>e<.36363636363636365?7.5625*e*e:e<.7272727272727273?7.5625*(e-=.5454545454545454)*e+.75:e<.9090909090909091?7.5625*(e-=.8181818181818182)*e+.9375:7.5625*(e-=.9545454545454546)*e+.984375)(1-t),Ot=t=>1-Math.cos(t*Math.PI/2),At=t=>t===0?0:Math.pow(2,10*t-10),$t=t=>{let n=2*Math.PI/3;return t===0?0:t===1?1:-Math.pow(2,10*t-10)*Math.sin((t*10-10.75)*n)},Tt=t=>1-Math.sqrt(1-Math.pow(t,2)),It=t=>2.70158*t*t*t-1.70158*t*t;function B({queries:t,getter:n,cookie:e}){let s=new Set,i={};if(typeof window=="object")for(let m in t){let r=window.matchMedia(t[m]);a(r,m),r.onchange=d=>a(d,m)}function a(m,r){i[r]=m.matches,v(i),n&&n(i),e&&(document.cookie=`media=${JSON.stringify(i)}`)}function v(m){s.forEach(r=>r(m))}function f(m){return m(i),s.add(m),()=>x(m)}let x=m=>s.delete(m);return{matches:i,subscribe:f}}return Xt(Wt);})();
diff --git a/packages/element/src/component.ts b/packages/element/src/component.ts
deleted file mode 100644
index bfc1082e..00000000
--- a/packages/element/src/component.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import { slidy } from '@slidy/core';
-import type { Options, SlidyInstance } from '@slidy/core';
-
-export default class Component extends HTMLElement {
-    instance?: SlidyInstance;
-    // mainComp: HTMLElement
-    customStyle: string;
-    __style: HTMLStyleElement;
-    // shadowRoot!: ShadowRoot
-
-    constructor() {
-        super();
-        console.log('My custom component got instantiated!');
-
-        const shadow = this.attachShadow({ mode: 'open' });
-        // this.mainComp = document.createElement('ul')
-        // this.mainComp.setAttribute('class', 'slidy');
-        // this.mainComp.id = 'node';
-
-        this.customStyle = '';
-        this.__style = document.createElement('style');
-        this.__style.textContent = '';
-
-        shadow.appendChild(this.__style);
-        // shadow.appendChild(this.mainComp);
-    }
-
-    /**
-     * Lifecycle method, called whenever an observed property changes
-     */
-    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
-        this.display();
-    }
-
-    /**
-     * To be implemented by the child class
-     */
-    render() {
-        return null;
-    }
-
-    display() {
-        this.__style.textContent = this.customStyle;
-        while (this.mainComp.children.length > 0) {
-            this.mainComp.removeChild(this.mainComp.childNodes[0]);
-        }
-        const nodes = this.render();
-        if (nodes) this.mainComp.appendChild(nodes);
-    }
-
-    /**
-     * Turns a string split with "-" into camel case notation
-     */
-    sanitizeName(name: string) {
-        let parts = name.split('-');
-        return [parts.shift(), ...parts.map((n) => n[0].toUpperCase() + n.slice(1))].join('');
-    }
-
-    /**
-     * Creates one property on this class for every
-     * HTML property defined on the element
-     */
-    setUpAccessors() {
-        let attrs = this.getAttributeNames();
-        attrs.forEach((name) => {
-            Object.defineProperty(this, this.sanitizeName(name), {
-                set: (value) => this.setAttribute(name, value),
-                get: () => this.getAttribute(name),
-            });
-        });
-    }
-
-    /**
-     * Lifecycle method, called once the component is connected to the DOM
-     */
-    connectedCallback() {
-        this.setUpAccessors();
-        this.display();
-        if (this.isConnected) {
-            console.log(this.children.length);
-            this.instance = slidy(this.mainComp, {
-                index: +this.index,
-                snap: this.snap as Options['snap'],
-                loop: JSON.parse(this.loop) as Options['loop'],
-            });
-        }
-    }
-}
diff --git a/packages/element/src/index.ts b/packages/element/src/index.ts
index 497c54cc..049ab0ad 100644
--- a/packages/element/src/index.ts
+++ b/packages/element/src/index.ts
@@ -1,3 +1,2 @@
 export { default as slidy } from './slidy';
-export { options } from './options'
-export type { Child, Delta, Options, Parent, UniqEvent } from './types';
+export type { Options, SlidyInstance } from './types';
diff --git a/packages/element/src/options.ts b/packages/element/src/options.ts
deleted file mode 100644
index 6aa012ee..00000000
--- a/packages/element/src/options.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import type { Options } from '@slidy/core';
-
-export const options: Options = {
-    index: 0,
-    clamp: 0,
-    indent: 1,
-    sensity: 5,
-    gravity: 1.2,
-    duration: 375,
-    animation: undefined,
-    easing: undefined,
-    snap: undefined,
-    axis: undefined,
-    loop: false,
-};
-
-export const keys = [
-    'index',
-    'clamp',
-    'indent',
-    'sensity',
-    'gravity',
-    'duration',
-    'animation',
-    'easing',
-    'snap',
-    'axis',
-    'loop',
-]
\ No newline at end of file
diff --git a/packages/element/src/slidy.ts b/packages/element/src/slidy.ts
index 8e12605a..a4f61a39 100644
--- a/packages/element/src/slidy.ts
+++ b/packages/element/src/slidy.ts
@@ -1,19 +1,33 @@
-import { slidy, type Options, SlidyInstance, AnimationFunc, EasingFunc } from '@slidy/core';
-import { options } from './options'
-import { valued } from './utils'
+import { slidy } from '@slidy/core';
+import { prepareValue } from './utils'
+
+import type { Options, SlidyInstance } from './types'
 
 import './slidy.css'
 
 export default class Slidy extends HTMLElement {
     _slidy?: SlidyInstance;
-    _options?: Options;
+    _options?: Partial<Options>;
 
-    static observedAttributes = Object.keys(options);
+    static observedAttributes = [
+        'index',
+        'clamp',
+        'indent',
+        'sensity',
+        'gravity',
+        'duration',
+        'animation',
+        'easing',
+        'snap',
+        'axis',
+        'loop',
+        'length'
+    ];
 
     constructor() {
         super();
-        this.setUpAccessors();
-        this._options = {}
+        this.setUpAccessors(Slidy.observedAttributes);
+        this._options = this.setUpOptions(Slidy.observedAttributes)
     }
 
     set options(value) {
@@ -24,8 +38,8 @@ export default class Slidy extends HTMLElement {
         return this._options;
     }
 
-    setUpAccessors() {
-        Slidy.observedAttributes.forEach((name) => {
+    setUpAccessors(attributes: string[]) {
+        attributes.forEach((name) => {
             Object.defineProperty(this, name, {
                 set: (value) => this.setAttribute(name, value),
                 get: () => this.getAttribute(name),
@@ -33,27 +47,38 @@ export default class Slidy extends HTMLElement {
         });
     }
 
+    setUpOptions(attributes: string[]) {
+        const attributeOptions = attributes
+            .reduce((acc: Partial<Options>, attribute) => {
+                const value = this[attribute as keyof Slidy] as string
+                if (value) {
+                    acc[attribute as keyof Options] = prepareValue(attribute, value)
+                }
+                return acc
+            }, {})
+        return { ...attributeOptions, ...this.options }
+    }
+
     connectedCallback() {
-        const opts = this.getAttributeNames().reduce((acc: Partial<Options>, attribute) => {
-            const value = this[attribute as keyof Slidy]
-            if (attribute in options && value)
-                acc[attribute as keyof Options] = valued(value)
-            return acc
-        }, {})
         if (this.isConnected) {
-            console.log(this.id, this.options, opts)
-            this.init(opts);
+            console.log(this.id, this._options)
+            this.init(this._options);
         }
     }
 
     attributeChangedCallback(name: string, oldValue: string, newValue: string) {
-        const option = { [name]: newValue };
-        this.update(option);
+        if (name === 'length') {
+            this.init(this._options);
+        } else {
+            const value = prepareValue(name, newValue as string);
+            const option = { [name]: value }
+            this.update(option);
+        }
     }
 
-    init(opts: Partial<Options>) {
+    init(options: Partial<Options> = {}) {
         this.destroy()
-        this._slidy = slidy(this, { ...this.options, ...opts });
+        this._slidy = slidy(this, options);
     }
 
     goto(index: number) {
@@ -69,4 +94,6 @@ export default class Slidy extends HTMLElement {
     }
 }
 
-customElements.define('slidy-element', Slidy);
+if ('customElements' in window) {
+    customElements.define('slidy-element', Slidy);
+}
diff --git a/packages/element/src/types.ts b/packages/element/src/types.ts
index 579f5fda..4f6175a5 100644
--- a/packages/element/src/types.ts
+++ b/packages/element/src/types.ts
@@ -1,86 +1 @@
-export interface Options {
-    index?: number;
-    length?: number;
-    gravity?: number;
-    duration?: number;
-    snap?: 'start' | 'center' | 'end';
-    vertical?: boolean;
-    clamp?: boolean;
-    loop?: boolean;
-}
-
-export interface Parent extends HTMLElement {
-    style: CSSStyleDeclaration;
-    offsetTop: number;
-    offsetLeft: number;
-    offsetWidth: number;
-    offsetHeight: number;
-}
-
-export interface Slidy extends HTMLElement {
-    parentNode: ParentNode | null;
-    childNodes: NodeListOf<ChildNode> | NodeListOf<Child>;
-    style: CSSStyleDeclaration;
-    offsetTop: number;
-    offsetLeft: number;
-    offsetWidth: number;
-    offsetHeight: number;
-    scrollWidth: number;
-    scrollHeight: number;
-    replaceChildren: (...nodes: (string | Node)[]) => void;
-    append: (...nodes: (string | Node)[]) => void;
-    prepend: (...nodes: (string | Node)[]) => void;
-}
-
-export interface Child extends ChildNode {
-    index: number;
-    offsetTop: number;
-    offsetLeft: number;
-    offsetWidth: number;
-    offsetHeight: number;
-}
-
-export interface CssRules {
-    willChange?: string;
-    userSelect?: string;
-    webkitUserSelect?: string;
-    pointerEvents?: string;
-    outline?: string;
-    overflow?: string;
-    transform?: string;
-    transition?: string;
-}
-
-export interface Delta {
-    target: number;
-    amplitude: number;
-}
-
-export interface Scroll {
-    target: number;
-    amplitude: number;
-    duration: number;
-    timestamp: number;
-}
-
-export interface UniqEvent extends Event {
-    changedTouches: Array<{ [key: string]: number }>;
-    deltaMode: number;
-    deltaX: number;
-    deltaY: number;
-    clientX: number;
-    clientY: number;
-    shiftKey: boolean;
-    target: EventTarget;
-}
-
-export type DispathDetail =
-    | { [key: string]: any }
-    | CustomEventInit<unknown>
-    | NodeListOf<Child>
-    | Options
-    | Slidy
-    | string
-    | undefined;
-
-type EventsMap = [string, ((e: UniqEvent) => void) | ((e: KeyboardEvent) => void), boolean?];
+export type { Options, SlidyInstance } from '@slidy/core';
\ No newline at end of file
diff --git a/packages/element/src/utils.ts b/packages/element/src/utils.ts
index 7c35c69a..e4e7ae10 100644
--- a/packages/element/src/utils.ts
+++ b/packages/element/src/utils.ts
@@ -1,6 +1,20 @@
-export function valued(value: unknown) {
+export function prepareValue(name: string, value: string): any {
+    if (name !== 'length') {
+        if (['animation', 'easing'].includes(name)) {
+            return functioned(value as string)
+        } else {
+            return valued(value)
+        }
+    }
+}
+
+export function valued(value: unknown): any {
     return !isNaN(value as number)
         || ['true', 'false'].includes(value as string)
         ? JSON.parse(value as string)
         : value
+}
+
+export function functioned(value: string): any {
+    return Function(`const fn = ${value as string}; return fn`)()
 }
\ No newline at end of file
diff --git a/packages/element/tsconfig.json b/packages/element/tsconfig.json
index d94873ad..1332abdd 100644
--- a/packages/element/tsconfig.json
+++ b/packages/element/tsconfig.json
@@ -7,7 +7,7 @@
         "src/*"
     ],
     "exclude": [
-        "src/utils/*",
+        "src/lib/*",
         "src/iife.ts"
     ]
 }
\ No newline at end of file