luda 0.1.11 → 0.1.12

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 91a048c5663af9e7ef41077fb3beae38a9d29d4c32c4be13c9792069174e2f05
-  data.tar.gz: 956745faf94d11f80c54f74b690e77298447687407a8e41ab7443055abcfa40d
+  metadata.gz: 1054ce023a6863675d67d8ecccb446ff7518e4e7cb4e5f6f9128afdd577ddcd2
+  data.tar.gz: dcd03dd757ca3d475f69358f096beaff38a219b356080e948f5183df75e867a2
 SHA512:
-  metadata.gz: 7167e80427ee22d190828c4cacf9774bc76063d3f26eb9560523765e4f27cffd709c8ee10641a1abb02c3f803888e4abe295c1d0d68b619cca0cfc3dd5cbdecd
-  data.tar.gz: 92d0ee54504708539c74827d2ad6a0edd2b259d07cbe295a9f4b95e6602fecbd4793b9b142a06a7892bd3e0d7301a78ffc1fe78151c18ddd1a2cd1b784993c10
+  metadata.gz: 2c8c265427e255b307f7f43f44de490b8e1d2429cb7482b75b05c28b051de20b6741ab744e873b589489175f6c53b361a885f1cb7e0fd070eb796345a804e564
+  data.tar.gz: 5d63d0d5a87a6dda234e346c01a3dd62787813feb64db91dadae948998b65ff3ba97f7a218356f2de548792e9b47a8c43e45d80dabfa26234fb1d47a0f72e330

data/assets/javascripts/luda-degradation.js

@@ -1,6 +1,6 @@
 /*! 
- * Luda degradation script 0.1.11 | https://luda.dev
- * Copyright 2018 oatw | https://oatw.blog
+ * Luda degradation script 0.1.12 | https://luda.dev
+ * Copyright 2019 Oatw | https://oatw.blog
  * MIT license | http://opensource.org/licenses/MIT
  */
 (function (global, factory) {

data/assets/javascripts/luda-degradation.min.js

@@ -1,6 +1,6 @@
 /*! 
- * Luda degradation script 0.1.11 | https://luda.dev
- * Copyright 2018 oatw | https://oatw.blog
+ * Luda degradation script 0.1.12 | https://luda.dev
+ * Copyright 2019 Oatw | https://oatw.blog
  * MIT license | http://opensource.org/licenses/MIT
  */
 (function(global,factory){typeof exports==="object"&&typeof module!=="undefined"?factory():typeof define==="function"&&define.amd?define(factory):factory()})(this,function(){"use strict";var Degradation;Degradation={_URL_ATTRIBUTE:"data-degradation-url",_HTML:['<div id="luda-degradation-html" ','style="padding:100px 30px;text-align:center">',"<h1>Your Browser Is Too Old!</h1>","<p>","Please visit this site with a modern browser ",'<a target="_blank" href="https://www.google.com/chrome/">',"(Chrome recommended)","</a>",".</p>","</div>"].join(""),_CSS_PROPERTIES:[{display:"flex",position:["sticky||-webkit-sticky","fixed"]},"transition","animation"],_JS_PROPERTIES:{es6Class:"class X {}",es6ArrowFunction:"((x) => x)()",mutationObserver:"new MutationObserver(function(){})"},_NOTIFY_MILLSECONDS:500,check:function(){this._checkEnv();this._checkJS(this._JS_PROPERTIES);return this._checkCSS(this._CSS_PROPERTIES)},_eval:eval,_checkEnv:function(){if(typeof document!=="undefined"){if(typeof window!=="undefined"){return window}if(typeof global!=="undefined"){return global}}throw new Error("Unsupported runtime environment.")},_checkJS:function(properties){var err,property,results,value;results=[];for(property in properties){value=properties[property];try{results.push(this._eval(value))}catch(error){err=error;this._notify();throw new Error(property+" "+err)}}return results},_checkCSS:function(properties){var ele,i,len,name,property,results,value,valueEle;ele=document.createElement("div");results=[];for(i=0,len=properties.length;i<len;i++){property=properties[i];if(typeof property==="string"){results.push(this._CSSPropertySupported(ele,property))}else{results.push(function(){var results1;results1=[];for(name in property){value=property[name];this._CSSPropertySupported(ele,name);if(value instanceof Array){results1.push(function(){var j,len1,results2;results2=[];for(j=0,len1=value.length;j<len1;j++){valueEle=value[j];results2.push(this._CSSValueSupported(ele,name,valueEle))}return results2}.call(this))}else{results1.push(this._CSSValueSupported(ele,name,value))}}return results1}.call(this))}}return results},_CSSPropertySupported:function(ele,property){if(typeof ele.style[property]!=="string"){this._notify();throw new Error("Unsupported CSS property: "+property)}},_CSSValueSupported:function(ele,property,valueStr){var i,len,value,values;values=valueStr.split("||");for(i=0,len=values.length;i<len;i++){value=values[i];ele.style[property]=value;if(ele.style[property]===value){return}}this._notify();throw new Error("Unsupported CSS property value: "+property+" "+valueStr)},_notify:function(){var _self,i,len,redirectUrl,ref,script;redirectUrl=document.documentElement.getAttribute(this._URL_ATTRIBUTE);if(redirectUrl){return location.href=redirectUrl}ref=document.scripts;for(i=0,len=ref.length;i<len;i++){script=ref[i];redirectUrl=script.getAttribute(this._URL_ATTRIBUTE);if(redirectUrl){return location.href=redirectUrl}}_self=this;return setInterval(function(){if(!document.getElementById("luda-degradation-html")){if(document.body){return document.body.innerHTML=_self._HTML}}},this._NOTIFY_MILLSECONDS)}};Degradation.check()});

data/assets/javascripts/luda-sprockets.js

@@ -1,6 +1,6 @@
-//= require luda/behaviors/enter-click
+//= require luda/behaviors/enter
 //= require luda/behaviors/focus
-//= require luda/behaviors/radio-tab
+//= require luda/behaviors/tabulate
 //= require luda/behaviors/readonly
 //= require luda/behaviors/toggle
 //= require luda/elements/form-file

data/assets/javascripts/luda.js

@@ -1,6 +1,6 @@
 /*! 
-   * Luda 0.1.11 | https://luda.dev
-   * Copyright 2018 oatw | https://oatw.blog
+   * Luda 0.1.12 | https://luda.dev
+   * Copyright 2019 Oatw | https://oatw.blog
    * MIT license | http://opensource.org/licenses/MIT
    */
 (function (global, factory) {
@@ -152,6 +152,68 @@
     },
     reflow: function($element) {
       return $element.offsetHeight;
+    },
+    _getTransitionDurations: function(style, propertyLength) {
+      var durationArray;
+      durationArray = style.split(',');
+      while (durationArray.length < propertyLength) {
+        durationArray = durationArray.concat(durationArray);
+      }
+      if (durationArray.length > propertyLength) {
+        durationArray = durationArray.slice(0, propertyLength);
+      }
+      return durationArray.map(function(durationStr) {
+        var duration;
+        duration = parseFloat(durationStr);
+        if (!duration) {
+          return 0;
+        }
+        if (durationStr.match('ms')) {
+          return duration;
+        } else {
+          return duration * 1000;
+        }
+      });
+    },
+    getTransitionDuration: function($element) {
+      var delays, durations, finalDurations, length, styles;
+      styles = window.getComputedStyle($element);
+      length = styles.transitionProperty.split(',').length;
+      if (!length) {
+        return 0;
+      }
+      delays = this._getTransitionDurations(styles.transitionDelay, length);
+      durations = this._getTransitionDurations(styles.transitionDuration, length);
+      finalDurations = durations.map(function(duration, index) {
+        return duration + delays[index];
+      });
+      return Math.max.apply(null, finalDurations);
+    },
+    _observeDom: function(onNodeAdded, onNodeRemoved) {
+      var observer, observerConfig;
+      observerConfig = {
+        childList: true,
+        subtree: true
+      };
+      observer = new MutationObserver(function(mutations) {
+        return mutations.forEach(function(mutation) {
+          var $addedNodes, $removedNodes;
+          $removedNodes = Array.from(mutation.removedNodes);
+          $addedNodes = Array.from(mutation.addedNodes);
+          $removedNodes.forEach(function($node) {
+            if ($node instanceof Element && onNodeRemoved) {
+              return onNodeRemoved($node);
+            }
+          });
+          return $addedNodes.forEach(function($node) {
+            if ($node instanceof Element && onNodeAdded) {
+              return onNodeAdded($node);
+            }
+          });
+        });
+      });
+      observer.observe(document.documentElement, observerConfig);
+      return observer;
     }
   });
 
@@ -210,7 +272,7 @@
         }
       });
     },
-    dispatch: function($target, type, detail, options = {}) {
+    dispatch: function($target, type, detail, delayMilliseconds, options = {}) {
       var evt;
       if (typeof options.bubbles !== 'boolean') {
         options.bubbles = true;
@@ -223,8 +285,16 @@
       }
       evt = new Event(`${this._EVENT_TYPE_PREFIX}:${type}`, options);
       evt.detail = detail;
-      $target.dispatchEvent(evt);
-      return evt;
+      if (typeof delayMilliseconds === 'number') {
+        return setTimeout(function() {
+          if ($target) {
+            return $target.dispatchEvent(evt);
+          }
+        }, delayMilliseconds);
+      } else {
+        $target.dispatchEvent(evt);
+        return evt;
+      }
     },
     _onDocReady: function(handler) {
       if (document.readyState === 'loading') {
@@ -347,16 +417,32 @@
     }
   });
 
-  var Singleton;
+  var Static;
 
-  luda(Singleton = (function() {
-    class Singleton {
-      static active() {
-        return this._actived = true;
+  luda(Static = (function() {
+    class Static {
+      static _ACTIVATE_EVENT_TYPE() {
+        return `${this._SCOPE}:activate`;
       }
 
-      static deactive() {
-        return this._actived = false;
+      static _ACTIVATED_EVENT_TYPE() {
+        return `${this._SCOPE}:activated`;
+      }
+
+      static _DEACTIVATE_EVENT_TYPE() {
+        return `${this._SCOPE}:deactivate`;
+      }
+
+      static _DEACTIVATED_EVENT_TYPE() {
+        return `${this._SCOPE}:deactivated`;
+      }
+
+      static _ACTIVATING_MARK_ATTRIBUTE() {
+        return `data-${this._SCOPE}-activating`;
+      }
+
+      static _DEACTIVATING_MARK_ATTRIBUTE() {
+        return `data-${this._SCOPE}-deactivating`;
       }
 
       static _add(selector) {
@@ -381,9 +467,133 @@
         return this._selector = this._SELECTORS.join(',');
       }
 
+      static _activatePrevented($ele, detail) {
+        var activateEvent;
+        activateEvent = luda.dispatch($ele, this._ACTIVATE_EVENT_TYPE(), detail);
+        return activateEvent.defaultPrevented;
+      }
+
+      static _deactivatePrevented($ele, detail) {
+        var deactivateEvent;
+        deactivateEvent = luda.dispatch($ele, this._DEACTIVATE_EVENT_TYPE(), detail);
+        return deactivateEvent.defaultPrevented;
+      }
+
+      static _handleActivateEnd($ele, detail) {
+        var activateDuration;
+        this._setActivatingMark($ele, detail);
+        activateDuration = luda.getTransitionDuration($ele);
+        luda.dispatch($ele, this._ACTIVATED_EVENT_TYPE(), detail, activateDuration);
+        setTimeout(() => {
+          if ($ele) {
+            return this._removeActivatingMark($ele);
+          }
+        }, activateDuration);
+        return activateDuration;
+      }
+
+      static _handleDeactivateEnd($ele, detail) {
+        var deactivateDuration;
+        this._setDeactivatingMark($ele, detail);
+        deactivateDuration = luda.getTransitionDuration($ele);
+        luda.dispatch($ele, this._DEACTIVATED_EVENT_TYPE(), detail, deactivateDuration);
+        setTimeout(() => {
+          if ($ele) {
+            return this._removeDeactivatingMark($ele);
+          }
+        }, deactivateDuration);
+        return deactivateDuration;
+      }
+
+      static _handleActivateCancel($ele, detail) {
+        if (this._isActivating($ele)) {
+          luda.dispatch($ele, this._ACTIVATED_EVENT_TYPE(), detail);
+          return this._removeActivatingMark($ele);
+        }
+      }
+
+      static _handleDeactivateCancel($ele, detail) {
+        if (this._isDeactivating($ele)) {
+          luda.dispatch($ele, this._DEACTIVATED_EVENT_TYPE(), detail);
+          return this._removeDeactivatingMark($ele);
+        }
+      }
+
+      static _isActivating($ele) {
+        return $ele.hasAttribute(this._ACTIVATING_MARK_ATTRIBUTE());
+      }
+
+      static _isDeactivating($ele) {
+        return $ele.hasAttribute(this._DEACTIVATING_MARK_ATTRIBUTE());
+      }
+
+      static _isTransitioning($ele) {
+        return this._isActivating($ele) || this._isDeactivating($ele);
+      }
+
+      static _getActivatingMark($ele) {
+        return $ele.getAttribute(this._ACTIVATING_MARK_ATTRIBUTE());
+      }
+
+      static _getDeactivatingMark($ele) {
+        return $ele.getAttribute(this._DEACTIVATING_MARK_ATTRIBUTE());
+      }
+
+      static _removeActivatingMark($ele) {
+        return $ele.removeAttribute(this._ACTIVATING_MARK_ATTRIBUTE());
+      }
+
+      static _removeDeactivatingMark($ele) {
+        return $ele.removeAttribute(this._DEACTIVATING_MARK_ATTRIBUTE());
+      }
+
+      static _setActivatingMark($ele, value) {
+        return $ele.setAttribute(this._ACTIVATING_MARK_ATTRIBUTE(), value);
+      }
+
+      static _setDeactivatingMark($ele, value) {
+        return $ele.setAttribute(this._DEACTIVATING_MARK_ATTRIBUTE(), value);
+      }
+
+      static _onEleAdded($ele) {
+        return Static._onEleAddedOrRemoved($ele, '_onElementAdded');
+      }
+
+      static _onEleRemoved($ele) {
+        return Static._onEleAddedOrRemoved($ele, '_onElementRemoved');
+      }
+
+      static _onEleAddedOrRemoved($ele, action) {
+        return Static._Observed.forEach(function(Observed) {
+          var $matched;
+          if (!Observed[action]) {
+            return;
+          }
+          $matched = luda.$children(Observed._selector, $ele);
+          if ($ele.matches(Observed._selector)) {
+            $matched.unshift($ele);
+          }
+          return $matched.forEach(function($target) {
+            return Observed[action]($target);
+          });
+        });
+      }
+
+      static _observe(classObj) {
+        if (!Static._observer) {
+          Static._observer = luda._observeDom(Static._onEleAdded, Static._onEleRemoved);
+        }
+        if (classObj._onElementAdded || classObj._onElementRemoved && classObj._selector) {
+          if (!Static._Observed.includes(classObj)) {
+            return Static._Observed.push(classObj);
+          }
+        }
+      }
+
       static _install() {
-        var exposed;
-        if (this === Singleton) {
+        var exposed, self;
+        self = this;
+        if (this === Static) {
           return this;
         }
         if (!this.hasOwnProperty('_SELECTORS')) {
@@ -393,6 +603,9 @@
         if (typeof this._init === 'function') {
           exposed = this._init();
         }
+        luda.on(luda._DOC_READY, function() {
+          return Static._observe(self);
+        });
         if (exposed) {
           return exposed;
         } else {
@@ -401,29 +614,31 @@
       }
 
     }
-    Singleton._SCOPE = 'Singleton';
+    Static._SCOPE = 'Static';
+
+    Static._SELECTOR_INVALID_ERROR = '@param selector must be a css selector string';
 
-    Singleton._SELECTOR_INVALID_ERROR = '@param selector must be a css selector string';
+    Static._SELECTORS = [];
 
-    Singleton._SELECTORS = [];
+    Static._Observed = [];
 
-    Singleton._selector = '';
+    Static._observer = null;
 
-    Singleton._actived = true;
+    Static._selector = '';
 
-    return Singleton;
+    return Static;
 
   }).call(this));
 
   luda((function() {
     var _Class;
 
-    _Class = class extends luda.Singleton {
+    _Class = class extends luda.Static {
       static _init() {
         var self;
         self = this;
         return luda.on('keydown', function(e) {
-          if (self._actived && e.keyCode === luda.KEY_ENTER && e.target.matches(self._selector)) {
+          if (!document.documentElement.hasAttribute(self._DISABLED_ATTRIBUTE) && e.keyCode === luda.KEY_ENTER && e.target.matches(self._selector)) {
             e.preventDefault();
             return setTimeout(function() {
               return e.target.click();
@@ -434,10 +649,12 @@
 
     };
 
-    _Class._SCOPE = 'enterClick';
+    _Class._SCOPE = 'enter';
 
     _Class._SELECTORS = ['input[type=checkbox]', 'input[type=radio]', '[tabindex]'];
 
+    _Class._DISABLED_ATTRIBUTE = 'data-enter-disabled';
+
     return _Class;
 
   }).call(this));
@@ -445,7 +662,11 @@
   luda((function() {
     var _Class;
 
-    _Class = class extends luda.Singleton {
+    _Class = class extends luda.Static {
+      static _isActive() {
+        return !document.documentElement.hasAttribute(this._DISABLED_ATTRIBUTE);
+      }
+
       static _removeFocusClassExcept($exception) {
         return Array.from(this._$focus).forEach(($focus) => {
           if ($focus !== $exception) {
@@ -461,7 +682,7 @@
       }
 
       static _changeFocusStateOnKeyEvent(e) {
-        if (this._actived) {
+        if (this._isActive()) {
           this._removeFocusClassExcept(e.target);
           return this._addFocusClassExceptHtmlAndBody(e.target);
         }
@@ -469,7 +690,7 @@
 
       static _changeFocusStateOnMouseDownEvent(e) {
         var target;
-        if (this._actived) {
+        if (this._isActive()) {
           if (e.target.matches(this._PARENT_FOCUS_CHILDREN_SELECTOR)) {
             target = luda.$parent(this._PARENT_FOCUS_SELECTOR, e.target);
           } else {
@@ -491,14 +712,14 @@
         self = this;
         HTMLElement.prototype.focus = function() {
           focus.apply(this, arguments);
-          if (self._actived && document.activeElement === this) {
+          if (self._isActive() && document.activeElement === this) {
             self._removeFocusClassExcept(this);
             return self._addFocusClassExceptHtmlAndBody(this);
           }
         };
         return HTMLElement.prototype.blur = function() {
           blur.apply(this, arguments);
-          if (self._actived) {
+          if (self._isActive()) {
             return this.classList.remove(self._CSS_CLASS);
           }
         };
@@ -528,6 +749,8 @@
 
     _Class._PARENT_FOCUS_CHILDREN_SELECTOR = `${_Class._PARENT_FOCUS_SELECTOR} *`;
 
+    _Class._DISABLED_ATTRIBUTE = 'data-focus-disabled';
+
     _Class._$focus = document.getElementsByClassName(_Class._CSS_CLASS);
 
     return _Class;
@@ -537,7 +760,7 @@
   luda((function() {
     var _Class;
 
-    _Class = class extends luda.Singleton {
+    _Class = class extends luda.Static {
       static _querySameName$radios($radio) {
         var $inputs, selector;
         if ($radio.name) {
@@ -565,7 +788,7 @@
         self = this;
         return luda.on('keydown', function(e) {
           var $next, $prev;
-          if (self._actived && e.keyCode === luda.KEY_TAB && e.target.nodeName.toUpperCase() === 'INPUT' && e.target.type === 'radio') {
+          if (!document.documentElement.hasAttribute(self._DISABLED_ATTRIBUTE) && e.keyCode === luda.KEY_TAB && e.target.nodeName.toUpperCase() === 'INPUT' && e.target.type === 'radio') {
             if (e.shiftKey) {
               if ($prev = self._query$prev$next(e.target).$prev) {
                 e.preventDefault();
@@ -583,18 +806,44 @@
 
     };
 
-    _Class._SCOPE = 'radioTab';
+    _Class._SCOPE = 'tabulate';
 
     _Class._SELECTORS = ['input[type=radio]:not([disabled])'];
 
+    _Class._DISABLED_ATTRIBUTE = 'data-tabulate-disabled';
+
     return _Class;
 
   }).call(this));
 
-  var Component;
+  var Factory;
+
+  luda(Factory = (function() {
+    class Factory {
+      static _ACTIVATE_EVENT_TYPE() {
+        return `${this._SCOPE}:activate`;
+      }
+
+      static _ACTIVATED_EVENT_TYPE() {
+        return `${this._SCOPE}:activated`;
+      }
+
+      static _DEACTIVATE_EVENT_TYPE() {
+        return `${this._SCOPE}:deactivate`;
+      }
+
+      static _DEACTIVATED_EVENT_TYPE() {
+        return `${this._SCOPE}:deactivated`;
+      }
+
+      static _ACTIVATING_MARK_ATTRIBUTE() {
+        return `data-${this._SCOPE}-activating`;
+      }
+
+      static _DEACTIVATING_MARK_ATTRIBUTE() {
+        return `data-${this._SCOPE}-deactivating`;
+      }
 
-  luda(Component = (function() {
-    class Component {
       _hasDescendant(descendant) {
         if (this._children.length && descendant) {
           if (this._children.includes(descendant)) {
@@ -618,6 +867,94 @@
         return this._observer = null;
       }
 
+      _activatePrevented($ele, detail) {
+        var activateEvent;
+        activateEvent = luda.dispatch($ele, this.constructor._ACTIVATE_EVENT_TYPE(), detail);
+        return activateEvent.defaultPrevented;
+      }
+
+      _deactivatePrevented($ele, detail) {
+        var deactivateEvent;
+        deactivateEvent = luda.dispatch($ele, this.constructor._DEACTIVATE_EVENT_TYPE(), detail);
+        return deactivateEvent.defaultPrevented;
+      }
+
+      _handleActivateEnd($ele, detail) {
+        var activateDuration;
+        this._setActivatingMark(detail);
+        activateDuration = luda.getTransitionDuration($ele);
+        luda.dispatch($ele, this.constructor._ACTIVATED_EVENT_TYPE(), detail, activateDuration);
+        setTimeout(() => {
+          if (this._$component) {
+            return this._removeActivatingMark();
+          }
+        }, activateDuration);
+        return activateDuration;
+      }
+
+      _handleDeactivateEnd($ele, detail) {
+        var deactivateDuration;
+        this._setDeactivatingMark(detail);
+        deactivateDuration = luda.getTransitionDuration($ele);
+        luda.dispatch($ele, this.constructor._DEACTIVATED_EVENT_TYPE(), detail, deactivateDuration);
+        setTimeout(() => {
+          if (this._$component) {
+            return this._removeDeactivatingMark();
+          }
+        }, deactivateDuration);
+        return deactivateDuration;
+      }
+
+      _handleActivateCancel($ele, detail) {
+        if (this._isActivating()) {
+          luda.dispatch($ele, this.constructor._ACTIVATED_EVENT_TYPE(), detail);
+          return this._removeActivatingMark();
+        }
+      }
+
+      _handleDeactivateCancel($ele, detail) {
+        if (this._isDeactivating()) {
+          luda.dispatch($ele, this.constructor._DEACTIVATED_EVENT_TYPE(), detail);
+          return this._removeDeactivatingMark();
+        }
+      }
+
+      _isActivating() {
+        return this._$component.hasAttribute(this.constructor._ACTIVATING_MARK_ATTRIBUTE());
+      }
+
+      _isDeactivating() {
+        return this._$component.hasAttribute(this.constructor._DEACTIVATING_MARK_ATTRIBUTE());
+      }
+
+      _isTransitioning() {
+        return this._isActivating() || this._isDeactivating();
+      }
+
+      _getActivatingMark() {
+        return this._$component.getAttribute(this.constructor._ACTIVATING_MARK_ATTRIBUTE());
+      }
+
+      _getDeactivatingMark() {
+        return this._$component.getAttribute(this.constructor._DEACTIVATING_MARK_ATTRIBUTE());
+      }
+
+      _removeActivatingMark() {
+        return this._$component.removeAttribute(this.constructor._ACTIVATING_MARK_ATTRIBUTE());
+      }
+
+      _removeDeactivatingMark() {
+        return this._$component.removeAttribute(this.constructor._DEACTIVATING_MARK_ATTRIBUTE());
+      }
+
+      _setActivatingMark(value) {
+        return this._$component.setAttribute(this.constructor._ACTIVATING_MARK_ATTRIBUTE(), value);
+      }
+
+      _setDeactivatingMark(value) {
+        return this._$component.setAttribute(this.constructor._DEACTIVATING_MARK_ATTRIBUTE(), value);
+      }
+
       static create($component) {
         var $family, componentIsElementInstance, instance, parent;
         componentIsElementInstance = $component instanceof Element;
@@ -722,56 +1059,38 @@
         return instance;
       }
 
-      static _observe(classObj) {
-        if (!Component._observer) {
-          Component._observer = new MutationObserver(function(mutations) {
-            return mutations.forEach(function(mutation) {
-              var $addedNodes, $removedNodes;
-              $removedNodes = Array.from(mutation.removedNodes);
-              $addedNodes = Array.from(mutation.addedNodes);
-              $removedNodes.forEach(function($node) {
-                if ($node instanceof Element) {
-                  return Component._Observed.forEach(function(Observed) {
-                    var $destroies;
-                    if ($node.matches(Observed._SELECTOR)) {
-                      return Observed.destroy($node);
-                    } else {
-                      $destroies = luda.$children(Observed._SELECTOR, $node);
-                      return $destroies.forEach(function($destroy) {
-                        return Observed.destroy($destroy);
-                      });
-                    }
-                  });
-                }
-              });
-              return $addedNodes.forEach(function($node) {
-                if ($node instanceof Element) {
-                  return Component._Observed.forEach(function(Observed) {
-                    var $creates;
-                    if ($node.matches(Observed._SELECTOR)) {
-                      return Observed.create($node);
-                    } else {
-                      $creates = luda.$children(Observed._SELECTOR, $node);
-                      return $creates.forEach(function($create) {
-                        return Observed.create($create);
-                      });
-                    }
-                  });
-                }
-              });
-            });
+      static _onEleAdded($ele) {
+        return Factory._onEleAddedOrRemoved($ele, 'create');
+      }
+
+      static _onEleRemoved($ele) {
+        return Factory._onEleAddedOrRemoved($ele, 'destroy');
+      }
+
+      static _onEleAddedOrRemoved($ele, action) {
+        return Factory._Observed.forEach(function(Observed) {
+          if ($ele.matches(Observed._SELECTOR)) {
+            return Observed[action]($ele);
+          }
+          return luda.$children(Observed._SELECTOR, $ele).forEach(function($child) {
+            return Observed[action]($child);
           });
-          Component._observer.observe(document.documentElement, Component._observerConfig);
+        });
+      }
+
+      static _observe(classObj) {
+        if (!Factory._observer) {
+          Factory._observer = luda._observeDom(Factory._onEleAdded, Factory._onEleRemoved);
         }
-        if (!Component._Observed.includes(classObj)) {
-          return Component._Observed.push(classObj);
+        if (!Factory._Observed.includes(classObj)) {
+          return Factory._Observed.push(classObj);
         }
       }
 
       static _install() {
         var exposed, self;
         self = this;
-        if (this === Component) {
+        if (this === Factory) {
           return this;
         }
         if (!(this._SELECTOR || typeof this._SELECTOR !== 'string')) {
@@ -787,7 +1106,7 @@
           luda.$children(self._SELECTOR).forEach(function($component) {
             return self.create($component);
           });
-          return Component._observe(self);
+          return Factory._observe(self);
         });
         if (exposed) {
           return exposed;
@@ -797,33 +1116,33 @@
       }
 
     }
-    Component._SCOPE = 'Component';
+    Factory._SCOPE = 'Factory';
 
-    Component._COMPONENT_NO_SELECTOR_ERROR = 'Extended component must has a css selector';
+    Factory._COMPONENT_NO_SELECTOR_ERROR = 'Extended component must has a css selector';
 
-    Component._$COMPONENT_INVALID_ERROR = '@param $component must be an instance of Element';
+    Factory._$COMPONENT_INVALID_ERROR = '@param $component must be an instance of Element';
 
-    Component._SELECTOR = '';
+    Factory._SELECTOR = '';
 
-    Component._instances = [];
+    Factory._instances = [];
 
-    Component._Observed = [];
+    Factory._Observed = [];
 
-    Component._observer = null;
+    Factory._observer = null;
 
-    Component._observerConfig = {
+    Factory._observerConfig = {
       childList: true,
       subtree: true
     };
 
-    return Component;
+    return Factory;
 
   }).call(this));
 
   luda((function() {
     var _Class;
 
-    _Class = class extends luda.Component {
+    _Class = class extends luda.Factory {
       _getConfig() {
         var _isReadonly, _originalTabIndex, readonly;
         readonly = this._$component.getAttribute(this.constructor._READONLY_ATTRIBUTE);
@@ -871,31 +1190,77 @@
   luda((function() {
     var _Class;
 
-    _Class = class extends luda.Singleton {
-      static active(name$target) {
+    _Class = class extends luda.Static {
+      static activate(name$target) {
         return this._query$targets(name$target).forEach(($target) => {
+          if ($target.classList.contains(this._ACTIVE_CSS_CLASS)) {
+            return;
+          }
+          if (this._isTransitioning($target)) {
+            return;
+          }
+          if (this._activatePrevented($target)) {
+            return;
+          }
           $target.classList.add(this._ACTIVE_CSS_CLASS);
-          return luda.dispatch($target, this._ACTIVED_EVENT_TYPE);
+          this._handleActivateEnd($target);
+          if (this._shouldAutoDeactivate($target)) {
+            return this._delayDeactivate($target);
+          }
         });
       }
 
-      static deactive(name$target) {
+      static deactivate(name$target) {
         return this._query$targets(name$target).forEach(($target) => {
+          if (!$target.classList.contains(this._ACTIVE_CSS_CLASS)) {
+            return;
+          }
+          if (this._isTransitioning($target)) {
+            return;
+          }
+          if (this._deactivatePrevented($target)) {
+            return;
+          }
           $target.classList.remove(this._ACTIVE_CSS_CLASS);
-          return luda.dispatch($target, this._DEACTIVED_EVENT_TYPE);
+          return this._handleDeactivateEnd($target);
         });
       }
 
       static toggle(name$target) {
         return this._query$targets(name$target).forEach(($target) => {
           if ($target.classList.contains(this._ACTIVE_CSS_CLASS)) {
-            return this.deactive($target);
+            return this.deactivate($target);
           } else {
-            return this.active($target);
+            return this.activate($target);
           }
         });
       }
 
+      static _onElementAdded($ele) {
+        this._handleActivateCancel($ele);
+        this._handleDeactivateCancel($ele);
+        if (this._shouldAutoDeactivate($ele)) {
+          return this._delayDeactivate($ele);
+        }
+      }
+
+      static _shouldAutoDeactivate($target) {
+        return $target.hasAttribute(this._AUTO_DEACTIVATE_ATTRIBUTE);
+      }
+
+      static _delayDeactivate($target) {
+        var delay;
+        delay = parseInt($target.getAttribute(this._AUTO_DEACTIVATE_ATTRIBUTE), 10);
+        if (!delay) {
+          delay = this._AUTO_DEACTIVATE_DURATION;
+        }
+        return setTimeout(() => {
+          if ($target) {
+            return this.deactivate($target);
+          }
+        }, delay);
+      }
+
       static _query$targets(name$target) {
         if (name$target instanceof Element) {
           return [name$target];
@@ -905,9 +1270,17 @@
       }
 
       static _init() {
-        var self;
+        var clickEventSelector, self;
         self = this;
-        return luda.on('click', this._selector, function(e) {
+        clickEventSelector = `[${this._TOGGLE_FOR_ATTRIBUTE}],[${this._TOGGLE_ATTRIBUTE}]`;
+        luda.on(luda._DOC_READY, function() {
+          return luda.$children(self._selector).forEach(function($target) {
+            if (self._shouldAutoDeactivate($target)) {
+              return self._delayDeactivate($target);
+            }
+          });
+        });
+        return luda.on('click', clickEventSelector, function(e) {
           var toggleChecked;
           toggleChecked = false;
           return luda.eventPath(e).some(function($path) {
@@ -929,7 +1302,7 @@
                     return toggleChecked = true;
                   }
                 }
-              } else if ($path.hasAttribute(self._NONE_TOGGLE_ATTRIBUTE)) {
+              } else if ($path.hasAttribute(self._TOGGLE_DISABLED_ATTRIBUTE)) {
                 return toggleChecked = true;
               }
             }
@@ -947,15 +1320,15 @@
 
     _Class._TOGGLE_FOR_ATTRIBUTE = 'data-toggle-for';
 
-    _Class._NONE_TOGGLE_ATTRIBUTE = 'data-toggle-disabled';
+    _Class._TOGGLE_DISABLED_ATTRIBUTE = 'data-toggle-disabled';
 
-    _Class._ACTIVE_CSS_CLASS = 'toggle-active';
+    _Class._AUTO_DEACTIVATE_ATTRIBUTE = 'data-toggle-auto-deactivate';
 
-    _Class._SELECTORS = [`[${_Class._TOGGLE_FOR_ATTRIBUTE}]`, `[${_Class._TOGGLE_ATTRIBUTE}]`];
+    _Class._AUTO_DEACTIVATE_DURATION = 3000;
 
-    _Class._ACTIVED_EVENT_TYPE = `${_Class._SCOPE}:actived`;
+    _Class._ACTIVE_CSS_CLASS = 'toggle-active';
 
-    _Class._DEACTIVED_EVENT_TYPE = `${_Class._SCOPE}:deactived`;
+    _Class._SELECTORS = [`[${_Class._TOGGLE_TARGET_ATTRIBUTE}]`];
 
     return _Class;
 
@@ -964,7 +1337,12 @@
   luda((function() {
     var _Class;
 
-    _Class = class extends luda.Component {
+    _Class = class extends luda.Factory {
+      reset() {
+        this._$file.value = '';
+        return this._$simulator.value = '';
+      }
+
       _getConfig() {
         var _$file, _$simulator;
         _$file = luda.$child(this.constructor._FILE_SELECTOR, this._$component);
@@ -1016,6 +1394,10 @@
         }
       }
 
+      static reset($file) {
+        return this.query($file).reset();
+      }
+
       static _init() {
         var self;
         self = this;
@@ -1057,7 +1439,7 @@
   luda((function() {
     var _Class;
 
-    _Class = class extends luda.Component {
+    _Class = class extends luda.Factory {
       select(indexOrIndexArray) {
         var selectedIndexes;
         if (this._$select.multiple) {
@@ -1073,7 +1455,7 @@
           });
           return this._markSelectedOption();
         } else {
-          this._$select.selectedIndex = selectedIndex;
+          this._$select.selectedIndex = indexOrIndexArray;
           this._setSingleSelectSimulatorValue();
           return this._markSelectedOption();
         }
@@ -1208,6 +1590,10 @@
         }
       }
 
+      static select($select, indexOrIndexArray) {
+        return this.query($select).select(indexOrIndexArray);
+      }
+
       static _init() {
         var self;
         self = this;
@@ -1258,55 +1644,58 @@
   luda((function() {
     var _Class;
 
-    _Class = class extends luda.Component {
+    _Class = class extends luda.Factory {
       
       // public
-      active(index) {
-        var action, activedIndex;
-        if (this._$items.length && !this._transiting) {
-          activedIndex = this._activeIndex;
-          if ((index != null) && index !== this._activeIndex && (0 <= index && index <= this._$items.length - 1)) {
-            this._transiting = true;
+      activate(index) {
+        var action, activatedIndex;
+        if (this._$items.length && !this._isTransitioning()) {
+          activatedIndex = this._activeIndex;
+          if ((index != null) && index !== this._activeIndex && (0 <= index && index <= this._$items.length - 1) && this._canTransition(index, activatedIndex)) {
             this._activeIndex = index;
-            action = index < activedIndex ? '_slidePrev' : '_slideNext';
-            return this[action](this._$items[activedIndex], activedIndex);
+            action = index < activatedIndex ? '_slidePrev' : '_slideNext';
+            return this[action](activatedIndex);
           }
         }
       }
 
       next() {
-        var activedIndex, index;
-        if (this._$items.length && !this._transiting) {
-          activedIndex = this._activeIndex;
-          index = activedIndex + 1;
+        var activatedIndex, index;
+        if (this._$items.length && !this._isTransitioning()) {
+          activatedIndex = this._activeIndex;
+          index = activatedIndex + 1;
           if (index > this._$items.length - 1) {
             if (!this._wrap) {
               return;
             }
             index = 0;
           }
-          this._transiting = true;
+          if (!this._canTransition(index, activatedIndex)) {
+            return;
+          }
           this._activeIndex = index;
-          this._slideNext(this._$items[activedIndex], activedIndex);
+          this._slideNext(activatedIndex);
           this._playTimeStamp = Date.now();
           return this._pausedRemainTime = this._interval;
         }
       }
 
       prev() {
-        var activedIndex, index;
-        if (this._$items.length && !this._transiting) {
-          activedIndex = this._activeIndex;
-          index = activedIndex - 1;
+        var activatedIndex, index;
+        if (this._$items.length && !this._isTransitioning()) {
+          activatedIndex = this._activeIndex;
+          index = activatedIndex - 1;
           if (index < 0) {
             if (!this._wrap) {
               return;
             }
             index = this._$items.length - 1;
           }
-          this._transiting = true;
+          if (!this._canTransition(index, activatedIndex)) {
+            return;
+          }
           this._activeIndex = index;
-          this._slidePrev(this._$items[activedIndex], activedIndex);
+          this._slidePrev(activatedIndex);
           this._playTimeStamp = Date.now();
           return this._pausedRemainTime = this._interval;
         }
@@ -1357,11 +1746,11 @@
 
       _constructor() {
         ({_$items: this._$items, _$indicators: this._$indicators, _$prevControl: this._$prevControl, _$nextControl: this._$nextControl, _activeIndex: this._activeIndex, _interval: this._interval, _wrap: this._wrap} = this._getConfig());
-        this._transiting = false;
         this._intervaling = null;
         this._playTimeStamp = 0;
         this._pausedRemainTime = this._interval;
         this._layout();
+        this._handleTransitionCancel();
         return this.play();
       }
 
@@ -1388,7 +1777,6 @@
             $item.classList.remove(this.constructor._ITEM_NEXT_CSS_CLASS);
             $item.classList.remove(this.constructor._ITEM_ACTIVE_CSS_CLASS);
           } else {
-            luda.dispatch($item, this.constructor._ACTIVED_EVENT_TYPE, index);
             $item.classList.add(this.constructor._ITEM_ACTIVE_CSS_CLASS);
             $item.classList.remove(this.constructor._ITEM_NEXT_CSS_CLASS);
             $item.classList.remove(this.constructor._ITEM_PREV_CSS_CLASS);
@@ -1400,11 +1788,11 @@
         return this._setDirectionControlState();
       }
 
-      _slideNext($activedItem, activedIndex) {
-        var $item;
+      _slideNext(activatedIndex) {
+        var $activatedItem, $item;
         if (this._$items.length > 1) {
           $item = this._$items[this._activeIndex];
-          luda.dispatch($item, this.constructor._ACTIVE_EVENT_TYPE, this._activeIndex);
+          $activatedItem = this._$items[activatedIndex];
           $item.style.transition = 'none';
           $item.classList.remove(this.constructor._ITEM_PREV_CSS_CLASS);
           $item.classList.add(this.constructor._ITEM_NEXT_CSS_CLASS);
@@ -1412,19 +1800,19 @@
           $item.style.transition = '';
           $item.classList.remove(this.constructor._ITEM_NEXT_CSS_CLASS);
           $item.classList.add(this.constructor._ITEM_ACTIVE_CSS_CLASS);
-          luda.dispatch($activedItem, this.constructor._DEACTIVE_EVENT_TYPE, activedIndex);
-          $activedItem.classList.remove(this.constructor._ITEM_ACTIVE_CSS_CLASS);
-          $activedItem.classList.add(this.constructor._ITEM_PREV_CSS_CLASS);
+          $activatedItem.classList.remove(this.constructor._ITEM_ACTIVE_CSS_CLASS);
+          $activatedItem.classList.add(this.constructor._ITEM_PREV_CSS_CLASS);
+          this._handleTransitionEnd(this._activeIndex, activatedIndex);
           this._setIndicatorsState();
           return this._setDirectionControlState();
         }
       }
 
-      _slidePrev($activedItem, activedIndex) {
-        var $item;
+      _slidePrev(activatedIndex) {
+        var $activatedItem, $item;
         if (this._$items.length > 1) {
           $item = this._$items[this._activeIndex];
-          luda.dispatch($item, this.constructor._ACTIVE_EVENT_TYPE, this._activeIndex);
+          $activatedItem = this._$items[activatedIndex];
           $item.style.transition = 'none';
           $item.classList.remove(this.constructor._ITEM_NEXT_CSS_CLASS);
           $item.classList.add(this.constructor._ITEM_PREV_CSS_CLASS);
@@ -1432,14 +1820,36 @@
           $item.style.transition = '';
           $item.classList.remove(this.constructor._ITEM_PREV_CSS_CLASS);
           $item.classList.add(this.constructor._ITEM_ACTIVE_CSS_CLASS);
-          luda.dispatch($activedItem, this.constructor._DEACTIVE_EVENT_TYPE, activedIndex);
-          $activedItem.classList.remove(this.constructor._ITEM_ACTIVE_CSS_CLASS);
-          $activedItem.classList.add(this.constructor._ITEM_NEXT_CSS_CLASS);
+          $activatedItem.classList.remove(this.constructor._ITEM_ACTIVE_CSS_CLASS);
+          $activatedItem.classList.add(this.constructor._ITEM_NEXT_CSS_CLASS);
+          this._handleTransitionEnd(this._activeIndex, activatedIndex);
           this._setIndicatorsState();
           return this._setDirectionControlState();
         }
       }
 
+      _canTransition(activeIndex, activatedIndex) {
+        return !this._activatePrevented(this._$items[activeIndex], activeIndex) && !this._deactivatePrevented(this._$items[activatedIndex], activatedIndex);
+      }
+
+      _handleTransitionEnd(activeIndex, activatedIndex) {
+        var activateDuration, deactivateDuration;
+        activateDuration = this._handleActivateEnd(this._$items[activeIndex], activeIndex);
+        return deactivateDuration = this._handleDeactivateEnd(this._$items[activatedIndex], activatedIndex);
+      }
+
+      _handleTransitionCancel() {
+        var activatedIndex, index;
+        if (this._isActivating()) {
+          index = parseInt(this._getActivatingMark(), 10);
+          this._handleActivateCancel(this._$items[index], index);
+        }
+        if (this._isDeactivating()) {
+          activatedIndex = parseInt(this._getDeactivatingMark(), 10);
+          return this._handleDeactivateCancel(this._$items[activatedIndex], activatedIndex);
+        }
+      }
+
       _setIndicatorsState() {
         return this._$indicators.forEach(($indicator, index) => {
           return $indicator.disabled = index === this._activeIndex;
@@ -1458,26 +1868,34 @@
         }
       }
 
-      
+      static activate($carousel, index) {
+        return this.query($carousel).activate(index);
+      }
+
+      static next($carousel) {
+        return this.query($carousel).next();
+      }
+
+      static prev($carousel) {
+        return this.query($carousel).prev();
+      }
+
+      static pause($carousel) {
+        return this.query($carousel).pause();
+      }
+
+      static play($carousel) {
+        return this.query($carousel).play();
+      }
+
       // static private
       static _init() {
         var self;
         self = this;
-        luda.on('transitionend', this._ITEMS_SELECTOR, function(e) {
-          var index, instance;
-          instance = self.query(luda.$parent(self._SELECTOR, this));
-          instance._transiting = false;
-          index = instance._$items.indexOf(this);
-          if (this.classList.contains(self._ITEM_ACTIVE_CSS_CLASS)) {
-            return luda.dispatch(this, self._ACTIVED_EVENT_TYPE, index);
-          } else {
-            return luda.dispatch(this, self._DEACTIVED_EVENT_TYPE, index);
-          }
-        });
         luda.on('click', this._INDICATORS_SELECTOR, function(e) {
           var instance;
           instance = self.query(luda.$parent(self._SELECTOR, this));
-          return instance.active(instance._$indicators.indexOf(this));
+          return instance.activate(instance._$indicators.indexOf(this));
         });
         luda.on('touchstart', this._SELECTOR, function(e) {
           return self.query(this).pause();
@@ -1525,6 +1943,8 @@
 
     _Class._WRAP_ATTRIBUTE = 'data-carousel-wrap';
 
+    _Class._ACTIVATED_INDEX_ATTRIBUTE = 'data-carousel-activated-index';
+
     _Class._ITEM_ACTIVE_CSS_CLASS = 'carousel-item-active';
 
     _Class._ITEM_NEXT_CSS_CLASS = 'carousel-item-next';
@@ -1539,14 +1959,6 @@
 
     _Class._FALSE = 'false';
 
-    _Class._ACTIVE_EVENT_TYPE = `${_Class._SCOPE}:active`;
-
-    _Class._ACTIVED_EVENT_TYPE = `${_Class._SCOPE}:actived`;
-
-    _Class._DEACTIVE_EVENT_TYPE = `${_Class._SCOPE}:deactive`;
-
-    _Class._DEACTIVED_EVENT_TYPE = `${_Class._SCOPE}:deactived`;
-
     _Class._observerConfig = {
       childList: true,
       attributes: true,
@@ -1561,47 +1973,55 @@
   luda((function() {
     var _Class;
 
-    _Class = class extends luda.Component {
-      active() {
+    _Class = class extends luda.Factory {
+      activate() {
         var ref;
-        if (!this._actived()) {
-          this._$component.classList.add(this.constructor._ACTIVE_CSS_CLASS);
-          this.constructor._$focused.push(document.activeElement);
-          if ((ref = this._parent) != null) {
-            ref.active();
-          }
-          return luda.dispatch(this._$component, this.constructor._ACTIVED_EVENT_TYPE);
+        if (this._isActive() || this._isTransitioning()) {
+          return;
         }
+        if (this._activatePrevented(this._$menu)) {
+          return;
+        }
+        this._$component.classList.add(this.constructor._ACTIVE_CSS_CLASS);
+        this.constructor._$focused.push(document.activeElement);
+        if ((ref = this._parent) != null) {
+          ref.activate();
+        }
+        return this._handleActivateEnd(this._$menu);
       }
 
-      deactive(focus) {
+      deactivate(focus) {
         var ref;
-        if (this._actived()) {
-          this._$component.classList.remove(this.constructor._ACTIVE_CSS_CLASS);
-          this._children.forEach(function(child) {
-            return child.deactive();
-          });
-          if (focus) {
-            if ((ref = this.constructor._$focused[this.constructor._$focused.length - 1]) != null) {
-              ref.focus();
-            }
+        if (!(this._isActive() && !this._isTransitioning())) {
+          return;
+        }
+        if (this._deactivatePrevented(this._$menu)) {
+          return;
+        }
+        this._$component.classList.remove(this.constructor._ACTIVE_CSS_CLASS);
+        this._children.forEach(function(child) {
+          return child.deactivate();
+        });
+        if (focus) {
+          if ((ref = this.constructor._$focused[this.constructor._$focused.length - 1]) != null) {
+            ref.focus();
           }
-          this.constructor._$focused.splice(this.constructor._$focused.length - 1, 1);
-          return luda.dispatch(this._$component, this.constructor._DEACTIVED_EVENT_TYPE);
         }
+        this.constructor._$focused.splice(this.constructor._$focused.length - 1, 1);
+        return this._handleDeactivateEnd(this._$menu);
       }
 
       toggle(focus) {
-        if (this._actived()) {
-          return this.deactive(focus);
+        if (this._isActive()) {
+          return this.deactivate(focus);
         } else {
-          return this.active();
+          return this.activate();
         }
       }
 
-      prev() {
+      _prev() {
         var focusIndex;
-        if (this._$items.length && this._actived()) {
+        if (this._$items.length && this._isActive()) {
           focusIndex = this._$items.indexOf(document.activeElement) - 1;
           if (focusIndex < 0) {
             focusIndex = 0;
@@ -1610,9 +2030,9 @@
         }
       }
 
-      next() {
+      _next() {
         var focusIndex;
-        if (this._$items.length && this._actived()) {
+        if (this._$items.length && this._isActive()) {
           focusIndex = this._$items.indexOf(document.activeElement) + 1;
           if (focusIndex > this._$items.length - 1) {
             focusIndex = this._$items.length - 1;
@@ -1628,41 +2048,55 @@
         _$noneSwitches = luda.$unnested(this.constructor._NONE_SWITCHES_SELECTOR, this._$component, this.constructor._SELECTOR).concat(luda.$unnested(this.constructor._NONE_SWITCHES_SELECTOR, _$menu, this.constructor._MENU_SELECTOR));
         _$items = luda.$unnested(this.constructor._ITEMS_SELECTOR, _$menu, this.constructor._MENU_SELECTOR);
         _isStandalone = this._$component.hasAttribute(this.constructor._STANDALONE_ATTRIBUTE);
-        return {_$items, _$switches, _$noneSwitches, _isStandalone};
+        return {_$menu, _$items, _$switches, _$noneSwitches, _isStandalone};
       }
 
       _constructor() {
-        return ({_$items: this._$items, _$switches: this._$switches, _$noneSwitches: this._$noneSwitches, _isStandalone: this._isStandalone} = this._getConfig());
+        this._onMutations();
+        this._handleActivateCancel(this._$menu);
+        return this._handleDeactivateCancel(this._$menu);
       }
 
       _onMutations(mutations) {
-        return this._constructor();
+        return ({_$menu: this._$menu, _$items: this._$items, _$switches: this._$switches, _$noneSwitches: this._$noneSwitches, _isStandalone: this._isStandalone} = this._getConfig());
       }
 
-      _actived() {
+      _isActive() {
         return this._$component.classList.contains(this.constructor._ACTIVE_CSS_CLASS);
       }
 
-      _deactiveChildrenExcept(exceptions) {
+      _deactivateChildrenExcept(exceptions) {
         if (exceptions && !(exceptions instanceof Array)) {
           exceptions = [exceptions];
         }
         if (exceptions) {
           return this._children.forEach(function(child) {
-            if (child._actived() && !exceptions.includes(child)) {
-              return child.deactive();
+            if (child._isActive() && !exceptions.includes(child)) {
+              return child.deactivate();
             }
           });
         } else {
           return this._children.forEach(function(child) {
-            if (child._actived()) {
-              return child.deactive();
+            if (child._isActive()) {
+              return child.deactivate();
             }
           });
         }
       }
 
-      static deactiveExcept(instances$dropdowns) {
+      static activate($dropdown) {
+        return this.query($dropdown).activate();
+      }
+
+      static deactivate($dropdown, focus) {
+        return this.query($dropdown).deactivate(focus);
+      }
+
+      static toggle($dropdown, focus) {
+        return this.query($dropdown).toggle(focus);
+      }
+
+      static deactivateExcept(instances$dropdowns) {
         var exceptions;
         exceptions = [];
         if (instances$dropdowns && !(instances$dropdowns instanceof Array)) {
@@ -1683,14 +2117,14 @@
             instanceHasntExceptionChild = exceptions.every(function(exception) {
               return !instance._hasDescendant(exception);
             });
-            if (instance._actived() && instanceIsntInExceptions && instanceHasntExceptionChild) {
-              return instance.deactive();
+            if (instance._isActive() && instanceIsntInExceptions && instanceHasntExceptionChild) {
+              return instance.deactivate();
             }
           });
         } else {
           return this._instances.forEach(function(instance) {
-            if (instance._actived()) {
-              return instance.deactive();
+            if (instance._isActive()) {
+              return instance.deactivate();
             }
           });
         }
@@ -1708,17 +2142,17 @@
         var self;
         self = this;
         luda.onOpposite('click', this._SELECTOR, function(e) {
-          return self.deactiveExcept(self._standaloneInstances());
+          return self.deactivateExcept(self._standaloneInstances());
         });
         luda.on('click', this._SELECTOR, function(e) {
           var focus, instance, toggleChecked;
           if (instance = self.query(this)) {
             toggleChecked = false;
             focus = !e.detail;
-            self.deactiveExcept(self._standaloneInstances().concat(instance));
-            instance._deactiveChildrenExcept();
+            self.deactivateExcept(self._standaloneInstances().concat(instance));
+            instance._deactivateChildrenExcept();
             if (instance._parent) {
-              instance._parent._deactiveChildrenExcept(instance);
+              instance._parent._deactivateChildrenExcept(instance);
             }
             if (instance._$switches.length || instance._$noneSwitches.length) {
               luda.eventPath(e).some(function($path) {
@@ -1736,23 +2170,23 @@
           }
         });
         luda.onOpposite('keyup', this._SELECTOR, function(e) {
-          return self.deactiveExcept();
+          return self.deactivateExcept();
         });
         luda.on('keyup', this._SELECTOR, function(e) {
           var instance;
           if (e.keyCode === luda.KEY_TAB && (instance = self.query(this))) {
-            self.deactiveExcept(instance);
-            return instance.active();
+            self.deactivateExcept(instance);
+            return instance.activate();
           }
         });
         luda.on('keydown', this._SELECTOR, function(e) {
           var instance, ref;
           if (e.keyCode === luda.KEY_ESC && (instance = self.query(this))) {
             e.preventDefault();
-            if (instance._actived()) {
-              return instance.deactive(true);
+            if (instance._isActive()) {
+              return instance.deactivate(true);
             } else {
-              return (ref = instance._parent) != null ? ref.deactive(true) : void 0;
+              return (ref = instance._parent) != null ? ref.deactivate(true) : void 0;
             }
           }
         });
@@ -1760,17 +2194,17 @@
           var instance, ref, ref1;
           if ([luda.KEY_LEFT, luda.KEY_UP].includes(e.keyCode) && (instance = self.query(this))) {
             e.preventDefault();
-            if (instance._actived()) {
-              return instance.prev();
+            if (instance._isActive()) {
+              return instance._prev();
             } else {
-              return (ref = instance._parent) != null ? ref.prev() : void 0;
+              return (ref = instance._parent) != null ? ref._prev() : void 0;
             }
           } else if ([luda.KEY_RIGHT, luda.KEY_DOWN].includes(e.keyCode) && (instance = self.query(this))) {
             e.preventDefault();
-            if (instance._actived()) {
-              return instance.next();
+            if (instance._isActive()) {
+              return instance._next();
             } else {
-              return (ref1 = instance._parent) != null ? ref1.next() : void 0;
+              return (ref1 = instance._parent) != null ? ref1._next() : void 0;
             }
           }
         });
@@ -1788,25 +2222,21 @@
 
     _Class._TOGGLE_ATTRIBUTE = 'data-dropdown-toggle';
 
-    _Class._NONE_TOGGLE_ATTRIBUTE = 'data-dropdown-toggle-disabled';
+    _Class._TOGGLE_DISABLED_ATTRIBUTE = 'data-dropdown-toggle-disabled';
 
     _Class._STANDALONE_ATTRIBUTE = 'data-dropdown-standalone';
 
     _Class._SWITCHES_SELECTOR = `[${_Class._TOGGLE_ATTRIBUTE}]`;
 
-    _Class._NONE_SWITCHES_SELECTOR = `[${_Class._NONE_TOGGLE_ATTRIBUTE}]`;
+    _Class._NONE_SWITCHES_SELECTOR = `[${_Class._TOGGLE_DISABLED_ATTRIBUTE}]`;
 
     _Class._ACTIVE_CSS_CLASS = 'dropdown-active';
 
-    _Class._ACTIVED_EVENT_TYPE = `${_Class._SCOPE}:actived`;
-
-    _Class._DEACTIVED_EVENT_TYPE = `${_Class._SCOPE}:deactived`;
-
     _Class._observerConfig = {
       childList: true,
       attributes: true,
       subtree: true,
-      attributeFilter: [_Class._TOGGLE_ATTRIBUTE, _Class._NONE_TOGGLE_ATTRIBUTE, _Class._STANDALONE_ATTRIBUTE]
+      attributeFilter: [_Class._TOGGLE_ATTRIBUTE, _Class._TOGGLE_DISABLED_ATTRIBUTE, _Class._STANDALONE_ATTRIBUTE]
     };
 
     _Class._$focused = [];
@@ -1818,7 +2248,7 @@
   luda((function() {
     var _Class;
 
-    _Class = class extends luda.Component {
+    _Class = class extends luda.Factory {
       _getConfig() {
         var _$defaultValues, _$valueHolder, _$values;
         _$values = luda.$children(this.constructor._VALUE_SELECTOR, this._$component);
@@ -1867,7 +2297,7 @@
       static _init() {
         var self;
         self = this;
-        luda.enterClick._add(this._ENTER_CLICK_VALUE_HOLDER_SELECTOR);
+        luda.enter._add(this._ENTER_BEHAVIOR_SELECTOR);
         luda.on('change', `${this._SELECTOR} ${this._VALUE_SELECTOR}`, function(e) {
           return self.query(luda.$parent(self._SELECTOR, this))._setValueHolderValue();
         });
@@ -1878,7 +2308,7 @@
         });
         // prevent ios device pop out wired navigation pannel
         if (/iphone/i.test(navigator.userAgent) || /ipad/i.test(navigator.userAgent)) {
-          return luda.on('focusin', this._ENTER_CLICK_VALUE_HOLDER_SELECTOR, function(e) {
+          return luda.on('focusin', this._ENTER_BEHAVIOR_SELECTOR, function(e) {
             this.blur();
             return this.classList.add(luda.focus._CSS_CLASS);
           });
@@ -1901,7 +2331,7 @@
 
     _Class._VALUE_HOLDER_SELECTOR = '.fm input';
 
-    _Class._ENTER_CLICK_VALUE_HOLDER_SELECTOR = '.fm-dropdown .fm input';
+    _Class._ENTER_BEHAVIOR_SELECTOR = '.fm-dropdown .fm input';
 
     _Class._observerConfig = {
       childList: true,
@@ -1917,16 +2347,19 @@
   luda((function() {
     var _Class;
 
-    _Class = class extends luda.Component {
+    _Class = class extends luda.Factory {
       
       // public
-      active(index) {
-        var activedIndex;
-        if (this._$panes.length) {
-          activedIndex = this._activeIndex;
+      activate(index) {
+        var activatedIndex;
+        if (this._$panes.length && !this._isTransitioning()) {
+          activatedIndex = this._activeIndex;
           if ((index != null) && index !== this._activeIndex && (0 <= index && index <= this._$panes.length - 1)) {
+            if (!this._canTransition(index, activatedIndex)) {
+              return;
+            }
             this._activeIndex = index;
-            return this._active(activedIndex);
+            return this._activate(activatedIndex);
           }
         }
       }
@@ -1948,38 +2381,77 @@
 
       _constructor() {
         ({_$panes: this._$panes, _$indicators: this._$indicators, _activeIndex: this._activeIndex} = this._getConfig());
-        return this._active();
+        this._layout();
+        return this._handleTransitionCancel();
       }
 
       _onMutations(mutations) {
-        return this._constructor();
+        ({_$panes: this._$panes, _$indicators: this._$indicators, _activeIndex: this._activeIndex} = this._getConfig());
+        return this._setIndicatorsState();
       }
 
-      _active(activedIndex) {
+      _layout() {
         this._$panes.forEach(($pane, index) => {
+          $pane.style.transition = 'none';
           if (index === this._activeIndex) {
             $pane.classList.add(this.constructor._PANE_ACTIVE_CSS_CLASS);
-            return luda.dispatch($pane, this.constructor._ACTIVED_EVENT_TYPE, index);
           } else {
             $pane.classList.remove(this.constructor._PANE_ACTIVE_CSS_CLASS);
-            if (index === activedIndex) {
-              return luda.dispatch($pane, this.constructor._DEACTIVED_EVENT_TYPE, index);
-            }
           }
+          luda.reflow($pane);
+          return $pane.style.transition = '';
         });
         return this._setIndicatorsState();
       }
 
+      _activate(activatedIndex) {
+        var $activatedPane, $pane;
+        $pane = this._$panes[this._activeIndex];
+        $activatedPane = this._$panes[activatedIndex];
+        $pane.classList.add(this.constructor._PANE_ACTIVE_CSS_CLASS);
+        $activatedPane.classList.remove(this.constructor._PANE_ACTIVE_CSS_CLASS);
+        this._handleTransitionEnd(this._activeIndex, activatedIndex);
+        return this._setIndicatorsState();
+      }
+
+      _canTransition(activeIndex, activatedIndex) {
+        return !this._activatePrevented(this._$panes[activeIndex], activeIndex) && !this._deactivatePrevented(this._$panes[activatedIndex], activatedIndex);
+      }
+
+      _handleTransitionEnd(activeIndex, activatedIndex) {
+        var activateDuration, deactivateDuration;
+        activateDuration = this._handleActivateEnd(this._$panes[activeIndex], activeIndex);
+        return deactivateDuration = this._handleDeactivateEnd(this._$panes[activatedIndex], activatedIndex);
+      }
+
+      _handleTransitionCancel() {
+        var activatedIndex, index;
+        if (this._isActivating()) {
+          index = parseInt(this._getActivatingMark(), 10);
+          this._handleActivateCancel(this._$panes[index], index);
+        }
+        if (this._isDeactivating()) {
+          activatedIndex = parseInt(this._getDeactivatingMark(), 10);
+          return this._handleDeactivateCancel(this._$panes[activatedIndex], activatedIndex);
+        }
+      }
+
       _setIndicatorsState() {
         return this._$indicators.forEach(($indicator, index) => {
           if (index === this._activeIndex) {
-            return $indicator.setAttribute('checked', '');
+            $indicator.setAttribute('checked', '');
+            return $indicator.checked = true;
           } else {
-            return $indicator.removeAttribute('checked');
+            $indicator.removeAttribute('checked');
+            return $indicator.checked = false;
           }
         });
       }
 
+      static activate($tab, index) {
+        return this.query($tab).activate(index);
+      }
+
       // static private
       static _init() {
         var self;
@@ -1988,7 +2460,8 @@
           var instance;
           if (this.checked) {
             instance = self.query(luda.$parent(self._SELECTOR, this));
-            return instance.active(instance._$indicators.indexOf(this));
+            instance._setIndicatorsState();
+            return instance.activate(instance._$indicators.indexOf(this));
           }
         });
       }
@@ -2007,10 +2480,6 @@
 
     _Class._ACTIVE_INDEX = 0;
 
-    _Class._ACTIVED_EVENT_TYPE = `${_Class._SCOPE}:actived`;
-
-    _Class._DEACTIVED_EVENT_TYPE = `${_Class._SCOPE}:deactived`;
-
     _Class._observerConfig = {
       childList: true,
       subtree: true