Docs updating content from prior repo

docs/api/event.md

@@ -7,57 +7,42 @@ description:
     page: "The `@event` methods page . By letting you write your interactions in either JavaScript or Typescript you can do all sorts of wonderful and fully interactive user interactions."
     meta: "XElement takes your HTML element and lets you 'do' things with it on the client. By passing through JS/TS to the client, we let you write client-side interactions without the need for an external UI framework or renderer in Astro"
 page: 
-    next     : "api/event"
-    previous : "api/is"
+    number   : 5
+    next     : "../api/event"
+    previous : "../api/is"
 ---
 
-# `@event` : HTMLEventTarget
+# XElement Event Handlers
 
+XElement is able to react to any `Event` possible.
 
-## Arguments
+The vast majority of events are able to be subscribed too by using the `@` decorator followed by the `EventName` of the event you wish the callback function to execute on.
 
-Events are written out in the manner displayed below.
+Certain events only work on certain elements.
 
-```js
-@event={(event, store, options={option:value})=>{
-    // Act upon event
-}}
-@event={async(event, store, options={option:value})=>{ }}
-@event={function(event, store, options={option:value})=>{ }}
-@event={async function(event, store, options={option:value})=>{ }}
-```
+Given that we wont restrict you from writing out all the 180+ different events known, not including the synthetic ones that can be use, in a single component. We suggest you use the `Events` with some care and diligence.
 
-Events accepts three optional arguments: `event`, [`store`](/docs/api/methods/store) and `options`. It then executes a callback function on the `@event` being targeted.
+For a full list of Events that are available and which elements they are fired on, please visit [MDN's Event Reference guide](https://developer.mozilla.org/en-US/docs/Web/Events)
 
-To obtain the XElement inside the scope of the event callback function, you can declare it simply by utilizing `this`
+It works by applying the relevant `add` or `removeEventListeners` in JavaScript over using inline html [`GlobalEventTargets`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers).
 
-### `this`
+We have created additional methods and exposed all the options on customizing the nature of the Event Handler itself, providing you with control over the Event [bubbling and capturing](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling_and_capture) better known as propagation phases for each the event action.
 
-Normally inside an event `this` would infer the `global` context. However with XElement `this` would always return a reference to the XElement.
+-------
 
-```astro
-@event={()=>{
-    console.log(this)
-}}
-```
-
-*This* should make it easier to write your instructions for the element, simply referencing `this` property or by using [`event.currentTarget`](https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget)
-
-------
+## `@event`
 
-## `@event` Methods
+**Type** : `EventTarget`
 
-Here we illustrate the main mechanism for interacting with the `Event` Interface, along with the options that are associated to controlling the behavior with the `@event` handler.
+**Params** : ` Callback(event,store,options={...}) `
 
-### `@event` : EventTarget < Callback(event , store, options) >
-
-The `@eventTarget` property is `@` followed by an event name that indicates the given `Event` that XElement should listen for.
+The `@event` method is indicates that XElement should listen for that given `Event` executing a callback function when triggered.
 
 ```js
-@click | @fullscreenchange | @mouseenter ......
+@click | @fullscreenchange | @mouseenter | all 180+ Events......
 ```
 
-You can apply any event you wish to any element, however events that don't apply to certain elements will silently fail.
+You can apply any event you wish to any element, however only certain events apply to certain elements, those that don't apply will silently fail.
 
 You can find out more about these events and where best they apply [here](https://developer.mozilla.org/en-US/docs/Web/Events)
 
@@ -74,49 +59,74 @@ To apply an event on an element simply apply the `@event` method inside your XEl
 
 This behavior comes without any Event capturing properties attached, so it would propagate through the branch that it is attached to.
 
-To direct for the propagation properties you can do by passing in the third optional parameter `options={once:'true',}`.
+To direct for the propagation properties you can do by passing in the third optional parameter `options = { capture : true,}`.
 
-You can apply as many events as you wish to on your element, you are not limited to using only one event listener per element.
+You can apply as many events as you wish to on your element, you are not limited at all.
 
-------
+-------
 
-## Controls & Options
+## Arguments
 
-XElement provides you with extra levels of fine-grained control over your `@event` listener.
+Events accepts three optional arguments: `event`, [`store`](../api/store) and [`options`](#controls--options). It then executes a callback function on the `@event` being targeted.
 
-### `@event:remove` : EventTarget < Callback(event,store,options) >
+```jsx
+@event={(event,store,options={ ... })=>{
+    //Act upon Event
+}}
+@event={async(event,store,options={ ... })=>{
+    ...
+    }}
+@event={function(event,store,options={ ... })=>{
+    ...
+    }}
+@event={async function(event,store,options={ ... })=>{
+    ...
+    }}
+```
 
-The `@event:remove` property is the **removal of event listeners** of a given type from an element.
+To obtain the XElement inside the scope of the event callback function, you can declare it simply by utilizing `this`
 
-```js
-@click:remove={() => console.log("Removed the click event!")}
+### `event`
+
+Returns the corresponding `EventInterface`
+
+```jsx
+@event={(event)=>{
+    console.log(event)
+}}
 ```
 
-This is the equivalent to using [`removeEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener).
+Depending on which event you wish to react to, XElement would only return the event's `interface` object if it is called.
 
-### `@event:once` : EventTarget < Callback(event,store,options) >
+This is normally the object that would contain the information relating to the `event`.
 
-The `@event:once` property instructs XElement that the given `Event` should **fire only once**, removing itself when done.
+### `store`
 
-```js
-@click:once={() => console.log('Im a one time deal')}
+Passing through the store as the second parameter, gives you access to XElements internal Data Object. This is a transient data object that which acts like a global store letting you pass through variables, functions, objects, etc. out from the scope of the method and into other elements.
+
+```jsx
+ @event={(element,store)=>console.log(store)} //{}
 ```
 
-### `@event:prevent` : EventTarget < Callback(event,store,options) >
+### `this`
 
-The `@event:prevent` property followed by an event name indicates that the given function should **prevent the default behavior** of that particular event listeners effects.
+Normally inside an event `this` would infer the `global` context. However with XElement `this` would always return a reference to the XElement.
 
-```js
-@click:prevent={() => console.log('Prevent default behavior in full effect')}
+```jsx
+@event={()=>{
+    console.log(this)
+}}
 ```
 
+*This* should make it easier to write your instructions for the element, simply referencing `this` property or by using [`event.currentTarget`](https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget)
+
 ### `options={}` : Object
 
 Certain Events have certain effects on the DOM, where one event might bubble up through to the parent or another event might be captured only on the element.
 
 To exert your own control over the event itself, you can pass in the third optional argument: `options={}`.
 
-Below describes the options that this can take and their respective inputs. For adding Event Listeners, this is the options that are available to you. 
+Below describes the options that this can take and their respective inputs. For adding Event Listeners, this is the options that are available to you.
 
 ```js
 options={
@@ -135,4 +145,63 @@ options={
 }
 ```
 
+------
+
+## Additional Methods
+
+XElement provides you with extra levels of fine-grained control over your `@event` listener.
+
+### `@event:remove`
+
+**Type** : `EventTarget`
+
+**Params** : `Callback(event,store,options={...})`
+
+The `@event:remove` property is the **removal of event listeners** of a given type from an element.
+
+```jsx
+@event:remove={() => console.log("Removed the event!")}
+
+@click:remove={() => console.log("Removed the click event!")}
+```
+
+This is the equivalent to using [`removeEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener) inside your JS code.
+
+### `@event:once`
+
+**Type** : `EventTarget`
+
+**Params** : `Callback(event,store,options={...})`
+
+The `@event:once` property instructs XElement that the given `Event` should **fire only once**, removing itself when done.
+
+```js
+@event:once={() => console.log('Only Executed Once')}
+
+@click:once={() => console.log('Im a one time deal')}
+```
+
+This is an easier way of applying the `options = { once : true }` to your `@event`.
+
+### `@event:prevent`
+
+**Type** : `EventTarget`
+
+**Params** : `Callback(event,store,options={...})`
+
+The `@event:prevent` property followed by an event name indicates that the given function should **prevent the default behavior** of that particular event listeners effects.
+
+```js
+
+@event:prevent={() => console.log('Prevent the events default behavior')}
+
+@click:prevent={() => console.log('Prevent click behavior in full effect')}
+```
+
+This convenient additional method is the equivalent to the following in JS:
+
+```js
+element.addEventListener('click',(event)=>event.preventDefault())
+```
+
 ------

docs/api/timings.md

@@ -14,73 +14,4 @@ page:
 
 # `@timings` : Object
 
-The `@timings` method is the twin to the `@animate` method. These two methods are fully dependent upon each other and hence cannot operate without their counterparts.
 
-Since an animation is a series of movements defined by a set of key-frames over a period of time.
-
-This page seeks to provide you with more information about the properties that are associated with the `@timings` method.
-
-
-------
-## `@timings` : Object
-
-The `@timings` method accepts a single `Object`. Within the object contains the timing parameters for the `@animate` method.
-
-```jsx
-//Define the Timing properties 
-@timings={
-    [delay:number]    : ,
-    [direction:string]: ,
-    [duration:number] : ,
-    [easing:string]   : ,
-    [endDelay:number] : ,
-    [fill:string]     : ,
-    [iterationStart:number] : ,
-    [iterations: number | Infinity] : ,
-    [composite: string] : ,
-    [compositeIteration: string] : ,
-}
-```
-
-## Properties
-
-The `@timings` properties are very similar to the CSS `animation` property.
-
-Here it accepts the following properties:
-
-- **iterations** : number | Infinity
-
-  Equivalent to `CSS.animation-iteration-count`. To have an animation run forever as long as the element exists simply specify the JS keyword of `Infinity` or it can be a `number`. It defaults to `1`
-
-- **iterationStart** : number
-
-    Informs XElement at what point in the iteration the animation should start. defaults to `0.0`
-
-- **delay** : number
-
-    Provides a time delay in milliseconds `ms` (1x10<sup>^-3</sup>seconds)
-
-- **endDelay**
-
-    The number of milliseconds to delay after the end of an animation. Used when sequencing animations together based on the end time of another animation
-
-- **direction** : "normal" | "reverse" | "alternate" | "alternate-reverse"
-
-    Determines which direction the animation runs.
-
-- **duration** : number
-
-    The number of `ms` each iteration of the animation takes to complete. Defaults to 0, `duration >= 0` for the animation to run.
-
-- **fill** : "forwards" | "backwards" | "both"
-
-    Determine if the animations effects should be persistent after the animation or should it result in its prior state.
-
-- **easing** 
-    Equivalent to `CSS.animation-timing-function`. Here you define the easing properties of the animation. This can take either a string, or a `cubic-bezier` value
-
-- **composite** : "add" | "accumulate" | "replace"
-
-    Instructs how values are combined between animations.
-
-----