From e16ab3eb4e8c122f727192e55621f2d7782a9a49 Mon Sep 17 00:00:00 2001
From: Guille Paz <guille87paz@gmail.com>
Date: Tue, 29 Oct 2013 12:51:01 -0300
Subject: [PATCH] #1093 Rename widget to component.

---
 Gruntfile.js                              |   8 +-
 README.md                                 |   4 +-
 extensions/carousel.autoSliding.js        |   4 +-
 libs/doc-template/publish.js              |   2 +-
 libs/doc-template/static/css/v5.css       |  22 ++---
 libs/doc-template/tmpl/container.tmpl     |   2 +-
 libs/files/mobile.js                      |  10 +--
 libs/files/ui.js                          |  10 +--
 libs/jsdoc/conf.json                      |   4 +-
 package.json                              |   2 +-
 src/shared/css/Carousel.css               |   4 +-
 src/shared/js/Autocomplete.js             |  20 ++---
 src/shared/js/Bubble.js                   |  10 +--
 src/shared/js/Calendar.js                 |   8 +-
 src/shared/js/Carousel.js                 |  30 +++----
 src/shared/js/Collapsible.js              |  18 ++--
 src/shared/js/{Widget.js => Component.js} | 104 +++++++++++-----------
 src/shared/js/Condition.js                |   6 +-
 src/shared/js/Content.js                  |  22 ++---
 src/shared/js/Countdown.js                |   8 +-
 src/shared/js/Custom.js                   |   2 +-
 src/shared/js/Dropdown.js                 |  10 +--
 src/shared/js/Email.js                    |   2 +-
 src/shared/js/EventEmitter.js             |  12 +--
 src/shared/js/Expandable.js               |  20 ++---
 src/shared/js/Form.js                     |  10 +--
 src/shared/js/Layer.js                    |  16 ++--
 src/shared/js/Max.js                      |   2 +-
 src/shared/js/MaxLength.js                |   2 +-
 src/shared/js/Menu.js                     |   8 +-
 src/shared/js/Min.js                      |   2 +-
 src/shared/js/MinLength.js                |   2 +-
 src/shared/js/Modal.js                    |  10 +--
 src/shared/js/Number.js                   |   2 +-
 src/shared/js/Popover.js                  |  28 +++---
 src/shared/js/Required.js                 |   2 +-
 src/shared/js/String.js                   |   2 +-
 src/shared/js/Tooltip.js                  |   6 +-
 src/shared/js/Transition.js               |   6 +-
 src/shared/js/URL.js                      |   2 +-
 src/shared/js/Validation.js               |   6 +-
 src/shared/js/Viewport.js                 |   1 -
 src/shared/js/factory.js                  |  36 ++++----
 src/shared/js/util.js                     |   2 +-
 src/ui/js/Datepicker.js                   |  10 +--
 src/ui/js/Tabs.js                         |   8 +-
 src/ui/js/Validation.js                   |   2 +-
 src/ui/js/Zoom.js                         |  10 +--
 src/ui/js/shortcuts.js                    |  16 ++--
 tests/autocomplete/spect.js               |  10 +--
 tests/calendar/spect.js                   |  12 +--
 tests/content/spect.js                    |   2 +-
 tests/datePicker/spect.js                 |  12 +--
 tests/expandable/spect.js                 |  12 +--
 tests/factory/spect.js                    |  76 ++++++++--------
 tests/form/spect.js                       |   8 +-
 tests/menu/spect.js                       |   8 +-
 tests/popover/spect.js                    |  16 ++--
 tests/tabs/spect.js                       |   6 +-
 tests/validation/spect.js                 |   8 +-
 views/m-compatible.html                   |  40 ++++-----
 views/mobile.html                         |  36 ++++----
 62 files changed, 390 insertions(+), 391 deletions(-)
 rename src/shared/js/{Widget.js => Component.js} (57%)

diff --git a/Gruntfile.js b/Gruntfile.js
index 54ece4d57..9ce22e92c 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -47,7 +47,7 @@ module.exports = function (grunt) {
             },
 
             'js': {
-                'src': ['temp/' + environment + '/core.tmp.js'].concat(files.JS.abilities).concat(files.JS.widgets),
+                'src': ['temp/' + environment + '/core.tmp.js'].concat(files.JS.abilities).concat(files.JS.components),
                 'dest': destination + '/' + environment + '/chico.js'
             },
 
@@ -55,7 +55,7 @@ module.exports = function (grunt) {
                 'options': {
                     'banner': '<%= banner.full %>'
                 },
-                'src': files.CSS.resetML.concat(files.CSS.core).concat(files.CSS.widgets),
+                'src': files.CSS.resetML.concat(files.CSS.core).concat(files.CSS.components),
                 'dest': destination + '/' + environment + '/chico.css'
             }
         },
@@ -87,7 +87,7 @@ module.exports = function (grunt) {
         'clean': ["temp/**/*.tmp.js"],
 
         'jslint': { // configure the task
-            'files': files.JS.abilities.concat(files.JS.widgets),
+            'files': files.JS.abilities.concat(files.JS.components),
             'directives': {
                 'nomen': true,
                 'todo': true
@@ -101,7 +101,7 @@ module.exports = function (grunt) {
 
         'jsdoc': {
             'dist': {
-                'src': files.JS.core.concat(files.JS.abilities).concat(files.JS.widgets),
+                'src': files.JS.core.concat(files.JS.abilities).concat(files.JS.components),
                 'options': {
                     'template': './libs/doc-template',
                     'destination': './doc/' + environment,
diff --git a/README.md b/README.md
index 75f664fd0..1adad588f 100644
--- a/README.md
+++ b/README.md
@@ -1,10 +1,10 @@
 # Chico UI - Get things done, quickly.
 
-Chico UI is a free and open source collection of easy-to-use web tools for designers and developers.
+Chico UI is a free and open source collection of easy-to-use web components for designers and developers.
 
 ## Features
 
-- UI Widgets
+- UI Components
 - Grids
 
 ## Get in touch
diff --git a/extensions/carousel.autoSliding.js b/extensions/carousel.autoSliding.js
index 559dc92bc..ffeacb06f 100644
--- a/extensions/carousel.autoSliding.js
+++ b/extensions/carousel.autoSliding.js
@@ -29,13 +29,13 @@
             this.pause();
         }
 
-        // Stop the automatic movement when the user interacts with the widget
+        // Stop the automatic movement when the user interacts with the component
         this._$el.one(pointertap, function () {
             that.pause();
         });
 
         /**
-         * Interval used to animate the widget autamatically.
+         * Interval used to animate the component autamatically.
          * @private
          * @type {Number}
          */
diff --git a/libs/doc-template/publish.js b/libs/doc-template/publish.js
index f78579d19..d2cd698ef 100644
--- a/libs/doc-template/publish.js
+++ b/libs/doc-template/publish.js
@@ -229,7 +229,7 @@ function buildNav(members) {
         });
 
         if (classNav !== '') {
-            nav += '<h2>Widgets</h2><ul>';
+            nav += '<h2>Components</h2><ul>';
             nav += classNav;
             nav += '</ul>';
         }
diff --git a/libs/doc-template/static/css/v5.css b/libs/doc-template/static/css/v5.css
index 75cc2d65c..3f586a396 100644
--- a/libs/doc-template/static/css/v5.css
+++ b/libs/doc-template/static/css/v5.css
@@ -524,23 +524,23 @@ nav .ch-rightcolumn ul {
 }
 
 /*
-*   CSS Widgets
+*   CSS Components
 */
 
-#heading-widget h1,
-#heading-widget h2,
-#heading-widget h3,
-#heading-widget h4,
-#heading-widget h5,
-#heading-widget h6 {
+#heading-component h1,
+#heading-component h2,
+#heading-component h3,
+#heading-component h4,
+#heading-component h5,
+#heading-component h6 {
     font-family: Arial;
     margin: 1em 0 0.5em 0;
 }
 
-#heading-widget h1 { font-size: 20px; }
-#heading-widget h2 { font-size: 18px; }
-#heading-widget h3 { font-size: 16px; }
-#heading-widget h4 { font-size: 14px; }
+#heading-component h1 { font-size: 20px; }
+#heading-component h2 { font-size: 18px; }
+#heading-component h3 { font-size: 16px; }
+#heading-component h4 { font-size: 14px; }
 section.main h4.ch-form-subtitle { font-size: 13px; }
 
 /* Demo forms */
diff --git a/libs/doc-template/tmpl/container.tmpl b/libs/doc-template/tmpl/container.tmpl
index 658c439de..4edc63914 100644
--- a/libs/doc-template/tmpl/container.tmpl
+++ b/libs/doc-template/tmpl/container.tmpl
@@ -63,7 +63,7 @@
     var classes = self.find({kind: 'class', memberof: doc.longname});
     if (doc.kind !== 'globalobj' && classes && classes.length) {
 ?>
-    <h2 class="api-title">Widgets</h2>
+    <h2 class="api-title">Components</h2>
 
     <dl><?js classes.forEach(function(c) { ?>
         <dt><?js= self.linkto(c.longname, c.name) ?></dt>
diff --git a/libs/files/mobile.js b/libs/files/mobile.js
index bc7ec6b37..43500dce5 100644
--- a/libs/files/mobile.js
+++ b/libs/files/mobile.js
@@ -29,10 +29,10 @@ JS.abilities = [
 ];
 
 /*
- * JS: Widgets
+ * JS: Components
  */
-JS.widgets = [
-    "src/shared/js/Widget.js",
+JS.components = [
+    "src/shared/js/Component.js",
     "src/shared/js/Expandable.js",
     "src/shared/js/Menu.js",
     "src/shared/js/Popover.js",
@@ -90,9 +90,9 @@ CSS.core = [
 ];
 
 /*
- * CSS: Widgets
+ * CSS: Components
  */
-CSS.widgets = [
+CSS.components = [
     "src/shared/css/buttons.css",
     "src/mobile/css/buttons.css",
     "src/shared/css/datagrid.css",
diff --git a/libs/files/ui.js b/libs/files/ui.js
index 8b7d72a02..524518e0e 100644
--- a/libs/files/ui.js
+++ b/libs/files/ui.js
@@ -30,11 +30,11 @@ JS.abilities = [
 ];
 
 /*
- * JS: Widgets
+ * JS: Components
  */
-JS.widgets = [
+JS.components = [
     "src/shared/js/onImagesLoads.js",
-    "src/shared/js/Widget.js",
+    "src/shared/js/Component.js",
     "src/shared/js/Form.js",
     "src/shared/js/Condition.js",
     "src/shared/js/Validation.js",
@@ -98,9 +98,9 @@ CSS.core = [
 ];
 
 /*
- * CSS: Widgets
+ * CSS: Components
  */
-CSS.widgets = [
+CSS.components = [
     "src/shared/css/buttons.css",
     "src/ui/css/buttons.css",
     "src/shared/css/datagrid.css",
diff --git a/libs/jsdoc/conf.json b/libs/jsdoc/conf.json
index 63d3a22e5..23abc0196 100644
--- a/libs/jsdoc/conf.json
+++ b/libs/jsdoc/conf.json
@@ -8,7 +8,7 @@
 		"../../src/ui/js/ch.support.js",
 		"../../src/ui/js/ch.keyboard.js",
 		"../../src/shared/js/ch.factory.js",
-		"../../src/shared/js/ch.Widget.js",
+		"../../src/shared/js/ch.Component.js",
 		"../../src/shared/js/ch.exports.js",
 		"../../src/ui/js/ch.init.js"
 	],
@@ -20,7 +20,7 @@
 		"../../src/shared/js/ch.events.js",
 		"../../src/mobile/js/ch.events.js",
 		"../../src/shared/js/ch.factory.js",
-		"../../src/shared/js/ch.Widget.js",
+		"../../src/shared/js/ch.Component.js",
 		"../../src/shared/js/ch.exports.js",
 		"../../src/mobile/js/ch.init.js"
 	],
diff --git a/package.json b/package.json
index b3be5697a..4d1c902c1 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "Chico",
   "version": "1.0.0",
-  "description": "Chico UI is a free and open source collection of easy-to-use web tools for developers and designers.",
+  "description": "Chico UI is a free and open source collection of easy-to-use web components for developers and designers.",
   "author": "<chico@mercadolibre.com>",
   "contributors": [
     {
diff --git a/src/shared/css/Carousel.css b/src/shared/css/Carousel.css
index b5944aaf1..b036a045c 100644
--- a/src/shared/css/Carousel.css
+++ b/src/shared/css/Carousel.css
@@ -13,7 +13,7 @@
     margin: 0 50px;
 }
 
-/* Both are the same elements, but it can apply styles before the widget initialization */
+/* Both are the same elements, but it can apply styles before the component initialization */
 .ch-carousel > ul,
 .ch-carousel-list {
     overflow: hidden;
@@ -32,7 +32,7 @@
     transition: none;
 }
 
-/* Both are the same elements, but it can apply styles before the widget initialization */
+/* Both are the same elements, but it can apply styles before the component initialization */
 .ch-carousel > ul > li,
 .ch-carousel-item {
     display: inline-block;
diff --git a/src/shared/js/Autocomplete.js b/src/shared/js/Autocomplete.js
index e3ade0ecb..95b4e7c57 100644
--- a/src/shared/js/Autocomplete.js
+++ b/src/shared/js/Autocomplete.js
@@ -2,17 +2,17 @@
     'use strict';
 
     /**
-     * Autocomplete widget shows a list of suggestions for a HTMLInputElement.
+     * Autocomplete Component shows a list of suggestions for a HTMLInputElement.
      * @memberof ch
      * @constructor
-     * @augments ch.Widget
+     * @augments ch.Component
      * @requires ch.Popover
      * @param {(jQuerySelector | ZeptoSelector)} $el A jQuery or Zepto Selector to create an instance of ch.Autocomplete.
      * @param {Object} [options] Options to customize an instance.
      * @param {String} [options.loadingClass] Default: "ch-autocomplete-loading".
      * @param {String} [options.highlightedClass] Default: "ch-autocomplete-highlighted".
      * @param {String} [options.itemClass] Default: "ch-autocomplete-item".
-     * @param {String} [options.addClass] CSS class names that will be added to the container on the widget initialization. Default: "ch-box-lite ch-autocomplete".
+     * @param {String} [options.addClass] CSS class names that will be added to the container on the component initialization. Default: "ch-box-lite ch-autocomplete".
      * @param {Number} [options.keystrokesTime] Default: 150.
      * @param {Boolean} [options.html] Default: false.
      * @param {String} [options.side] The side option where the target element will be positioned. You must use: "left", "right", "top", "bottom" or "center". Default: "bottom".
@@ -37,7 +37,7 @@
         this._init($el, options);
 
         /**
-         * Event emitted when the widget is ready to use.
+         * Event emitted when the component is ready to use.
          * @event ch.Autocomplete#ready
          * @example
          * // Subscribe to "ready" event.
@@ -52,10 +52,10 @@
     }
 
     // Inheritance
-    var parent = ch.util.inherits(Autocomplete, ch.Widget);
+    var parent = ch.util.inherits(Autocomplete, ch.Component);
 
     /**
-     * The name of the widget.
+     * The name of the component.
      * @type {String}
      */
     Autocomplete.prototype.name = 'autocomplete';
@@ -378,7 +378,7 @@
             // get the term to be replaced
             term = suggestions[suggestedItem];
 
-            // for the html configured widget doesn't highlight the term matched it must be done by the user
+            // for the html configured component doesn't highlight the term matched it must be done by the user
             if (!that._options.html) {
                 term = term.replace(matchedRegExp, '<strong>$1</strong>');
                 itemTemplate = this._options._itemTemplate.replace('{{suggestedData}}', ' data-suggested="' + suggestions[suggestedItem] + '"');
@@ -415,7 +415,7 @@
     };
 
     /**
-     * Hides widget's container.
+     * Hides component's container.
      * @memberof! ch.Autocomplete.prototype
      * @function
      * @returns {autocomplete}
@@ -446,12 +446,12 @@
     };
 
     /**
-     * Returns a Boolean if the widget's core behavior is shown. That means it will return 'true' if the widget is on and it will return false otherwise.
+     * Returns a Boolean if the component's core behavior is shown. That means it will return 'true' if the component is on and it will return false otherwise.
      * @memberof! ch.Autocomplete.prototype
      * @function
      * @returns {Boolean}
      * @example
-     * // Execute a function if the widget is shown.
+     * // Execute a function if the component is shown.
      * if (autocomplete.isShown()) {
      *     fn();
      * }
diff --git a/src/shared/js/Bubble.js b/src/shared/js/Bubble.js
index ebca32529..69669a8e2 100644
--- a/src/shared/js/Bubble.js
+++ b/src/shared/js/Bubble.js
@@ -5,18 +5,18 @@
      * Bubble is a dialog window with alert/error skin.
      * @memberof ch
      * @constructor
-     * @augments ch.Widget
+     * @augments ch.Component
      * @mixes ch.Collapsible
      * @mixes ch.Content
      * @requires ch.Positioner
      * @param {(jQuerySelector | ZeptoSelector)} $el A jQuery or Zepto Selector to create an instance of ch.Bubble.
      * @param {Object} [options] Options to customize an instance.
-     * @param {String} [options.addClass] CSS class names that will be added to the container on the widget initialization.
+     * @param {String} [options.addClass] CSS class names that will be added to the container on the component initialization.
      * @param {String} [options.fx] Enable or disable UI effects. You must use: "slideDown", "fadeIn" or "none". Default: "fadeIn".
      * @param {String} [options.width] Set a width for the container. Default: "auto".
      * @param {String} [options.height] Set a height for the container. Default: "auto".
      * @param {String} [options.shownby] Determines how to interact with the trigger to show the container. You must use: "pointertap", "pointerenter" or "none". Default: "none".
-     * @param {String} [options.hiddenby] Determines how to hide the widget. You must use: "button", "pointers", "pointerleave", "all" or "none". Default: "none".
+     * @param {String} [options.hiddenby] Determines how to hide the component. You must use: "button", "pointers", "pointerleave", "all" or "none". Default: "none".
      * @param {(jQuerySelector | ZeptoSelector)} [options.reference] It's a reference to position and size of element that will be considered to carry out the position. Default: the trigger element.
      * @param {String} [options.side] The side option where the target element will be positioned. Its value can be: "left", "right", "top", "bottom" or "center". Default: "right".
      * @param {String} [options.align] The align options where the target element will be positioned. Its value can be: "left", "right", "top", "bottom" or "center". Default: "top".
@@ -56,7 +56,7 @@
         this._init($el, options);
 
         /**
-         * Event emitted when the widget is ready to use.
+         * Event emitted when the component is ready to use.
          * @event ch.Bubble#ready
          * @example
          * // Subscribe to "ready" event.
@@ -71,7 +71,7 @@
     var parent = ch.util.inherits(Bubble, ch.Popover);
 
     /**
-     * The name of the widget.
+     * The name of the component.
      * @memberof! ch.Bubble.prototype
      * @type {String}
      */
diff --git a/src/shared/js/Calendar.js b/src/shared/js/Calendar.js
index c521ec977..145df22b6 100644
--- a/src/shared/js/Calendar.js
+++ b/src/shared/js/Calendar.js
@@ -14,7 +14,7 @@
      * Calendar shows months, and lets you move across the months of the year. Calendar lets you set one or many dates as selected.
      * @memberof ch
      * @constructor
-     * @augments ch.Widget
+     * @augments ch.Component
      * @param {(jQuerySelector | ZeptoSelector)} $el A jQuery or Zepto Selector to create an instance of ch.Calendar.
      * @param {Object} [options] Options to customize an instance.
      * @param {String} [options.format] Sets the date format. You must use "DD/MM/YYYY", "MM/DD/YYYY" or "YYYY/MM/DD". Default: "DD/MM/YYYY".
@@ -56,7 +56,7 @@
         this._init($el, options);
 
         /**
-         * Event emitted when the widget is ready to use.
+         * Event emitted when the component is ready to use.
          * @event ch.Calendar#ready
          * @example
          * // Subscribe to "ready" event.
@@ -191,10 +191,10 @@
         },
 
         // Inheritance
-        parent = ch.util.inherits(Calendar, ch.Widget);
+        parent = ch.util.inherits(Calendar, ch.Component);
 
     /**
-     * The name of the widget.
+     * The name of the component.
      * @type {String}
      */
     Calendar.prototype.name = 'calendar';
diff --git a/src/shared/js/Carousel.js b/src/shared/js/Carousel.js
index e8059e418..72637d43d 100644
--- a/src/shared/js/Carousel.js
+++ b/src/shared/js/Carousel.js
@@ -7,7 +7,7 @@
      * @constructor
      * @param {(jQuerySelector | ZeptoSelector)} $el A jQuery or Zepto Selector to create an instance of ch.Carousel.
      * @param {Object} [options] Options to customize an instance.
-     * @param {Number} [options.async] Defines the number of future asynchronous items to add to the widget. Default: 0.
+     * @param {Number} [options.async] Defines the number of future asynchronous items to add to the component. Default: 0.
      * @param {Boolean} [options.arrows] Defines if the arrow-buttons must be created or not at initialization. Default: true.
      * @param {Boolean} [options.pagination] Defines if a pagination must be created or not at initialization. Default: false.
      * @param {Boolean} [options.fx] Enable or disable the slide effect. Default: true.
@@ -46,7 +46,7 @@
         this._init($el, options);
 
         /**
-         * Event emitted when the widget is ready to use.
+         * Event emitted when the component is ready to use.
          * @event ch.Carousel#ready
          * @example
          * // Subscribe to "ready" event.
@@ -61,10 +61,10 @@
         Math = window.Math,
         setTimeout = window.setTimeout,
         // Inheritance
-        parent = ch.util.inherits(Carousel, ch.Widget);
+        parent = ch.util.inherits(Carousel, ch.Component);
 
     /**
-     * The name of the widget.
+     * The name of the component.
      * @memberof! ch.Carousel.prototype
      * @type {String}
      */
@@ -117,7 +117,7 @@
         this._snippet = this._el.cloneNode(true);
 
         /**
-         * Element that moves (slides) across the widget (inside the mask).
+         * Element that moves (slides) across the component (inside the mask).
          * @private
          * @type {(jQuerySelector | ZeptoSelector)}
          */
@@ -289,7 +289,7 @@
      */
     Carousel.prototype._updateARIA = function () {
         /**
-         * Reference to an internal widget instance, saves all the information and configuration properties.
+         * Reference to an internal component instance, saves all the information and configuration properties.
          * @type {Object}
          * @private
          */
@@ -370,7 +370,7 @@
         this._async -= amount;
 
         /**
-         * Event emitted when the widget creates new asynchronous empty items.
+         * Event emitted when the component creates new asynchronous empty items.
          * @event ch.Carousel#itemsadd
          * @example
          * // Create a new Carousel with items asynchronously loaded.
@@ -387,7 +387,7 @@
     };
 
     /**
-     * Creates the pagination of the widget.
+     * Creates the pagination of the component.
      * @memberof! ch.Carousel.prototype
      * @private
      * @function
@@ -437,7 +437,7 @@
     };
 
     /**
-     * Deletes the pagination from the widget.
+     * Deletes the pagination from the component.
      * @memberof! ch.Carousel.prototype
      * @private
      * @function
@@ -601,7 +601,7 @@
     };
 
     /**
-     * Adds arrows to the widget.
+     * Adds arrows to the component.
      * @memberof! ch.Carousel.prototype
      * @private
      * @function
@@ -720,7 +720,7 @@
             this._updateDistribution();
 
             /**
-             * Event emitted when the widget makes all the necessary recalculations to be up-to-date.
+             * Event emitted when the component makes all the necessary recalculations to be up-to-date.
              * @event ch.Carousel#refresh
              * @example
              * // Subscribe to "refresh" event.
@@ -746,7 +746,7 @@
             }
 
             /**
-             * Event emitted when the widget makes all the necessary recalculations to be up-to-date.
+             * Event emitted when the component makes all the necessary recalculations to be up-to-date.
              * @event ch.Carousel#refresh
              * @example
              * // Subscribe to "refresh" event.
@@ -793,7 +793,7 @@
         this._loadAsyncItems();
 
         /**
-         * Event emitted when the widget moves to another page.
+         * Event emitted when the component moves to another page.
          * @event ch.Carousel#select
          * @example
          * // Subscribe to "select" event.
@@ -817,7 +817,7 @@
         this.select(this._currentPage - 1);
 
         /**
-         * Event emitted when the widget moves to the previous page.
+         * Event emitted when the component moves to the previous page.
          * @event ch.Carousel#prev
          * @example
          * carousel.on('prev', function () {
@@ -840,7 +840,7 @@
         this.select(this._currentPage + 1);
 
         /**
-         * Event emitted when the widget moves to the next page.
+         * Event emitted when the component moves to the next page.
          * @event ch.Carousel#next
          * @example
          * carousel.on('next', function () {
diff --git a/src/shared/js/Collapsible.js b/src/shared/js/Collapsible.js
index 49f80ccf1..421a0ffb3 100644
--- a/src/shared/js/Collapsible.js
+++ b/src/shared/js/Collapsible.js
@@ -9,7 +9,7 @@
     };
 
     /**
-     * The Collapsible class gives to widgets the ability to shown or hidden its container.
+     * The Collapsible class gives to components the ability to shown or hidden its container.
      * @memberOf ch
      * @mixin
      * @returns {Function} Returns a private funciton.
@@ -30,12 +30,12 @@
             that.$container.removeClass('ch-hide').attr('aria-hidden', 'false');
 
             /**
-             * Event emitted when the widget container is shown.
+             * Event emitted when the component container is shown.
              * @event ch.Collapsible#show
              * @example
              * // Subscribe to "show" event.
-             * widget.on('show', function () {
-             *  // Some code here!
+             * component.on('show', function () {
+             *     // Some code here!
              * });
              */
             that.emit('show');
@@ -45,11 +45,11 @@
             that.$container.addClass('ch-hide').attr('aria-hidden', 'true');
 
             /**
-             * Event emitted when the widget container is hidden.
+             * Event emitted when the component container is hidden.
              * @event ch.Collapsible#hide
              * @example
              * // Subscribe to "hide" event.
-             * widget.on('hide', function () {
+             * component.on('hide', function () {
              *  // Some code here!
              * });
              */
@@ -59,7 +59,7 @@
         this._shown = false;
 
         /**
-         * Shows the widget container.
+         * Shows the component container.
          * @function
          * @private
          */
@@ -84,7 +84,7 @@
         };
 
         /**
-         * Hides the widget container.
+         * Hides the component container.
          * @function
          * @private
          */
@@ -107,7 +107,7 @@
         };
 
         /**
-         * Shows or hides the widget container.
+         * Shows or hides the component container.
          * @function
          * @private
          */
diff --git a/src/shared/js/Widget.js b/src/shared/js/Component.js
similarity index 57%
rename from src/shared/js/Widget.js
rename to src/shared/js/Component.js
index 6fefc3e2b..d506131f8 100644
--- a/src/shared/js/Widget.js
+++ b/src/shared/js/Component.js
@@ -5,45 +5,45 @@
         uid = 0;
 
     /**
-     * Base class for all widgets.
+     * Base class for all components.
      * @memberof ch
      * @constructor
      * @augments ch.EventEmitter
      * @param {(jQuerySelector | ZeptoSelector)} $el jQuery or Zepto Selector.
      * @param {Object} [options] Configuration options.
-     * @returns {widget} Returns a new instance of Widget.
+     * @returns {component} Returns a new instance of Component.
      */
-    function Widget($el, options) {
+    function Component($el, options) {
         this._init($el, options);
     }
 
-    ch.util.inherits(Widget, ch.EventEmitter);
+    ch.util.inherits(Component, ch.EventEmitter);
 
     /**
-     * The name of a widget.
-     * @memberof! ch.Widget.prototype
+     * The name of a component.
+     * @memberof! ch.Component.prototype
      * @type {String}
      * @example
      * // You can reach the instance associated.
-     * var widget = $(selector).data(name);
+     * var component = $(selector).data(name);
      */
-    Widget.prototype.name = 'widget';
+    Component.prototype.name = 'component';
 
     /**
      * Returns a reference to the constructor function.
-     * @memberof! ch.Widget.prototype
+     * @memberof! ch.Component.prototype
      * @function
      */
-    Widget.prototype.constructor = Widget;
+    Component.prototype.constructor = Component;
 
     /**
-     * Initialize a new instance of Widget and merge custom options with defaults options.
-     * @memberof! ch.Widget.prototype
+     * Initialize a new instance of Component and merge custom options with defaults options.
+     * @memberof! ch.Component.prototype
      * @function
      * @private
-     * @returns {instance} Returns an instance of Widget.
+     * @returns {instance} Returns an instance of Component.
      */
-    Widget.prototype._init = function ($el, options) {
+    Component.prototype._init = function ($el, options) {
 
         // Clones defaults or creates a defaults object
         var defaults = (this._defaults) ? util.clone(this._defaults) : {};
@@ -79,13 +79,13 @@
         }
 
         /**
-         * A unique id to identify the instance of a widget.
+         * A unique id to identify the instance of a component.
          * @type {Number}
          */
         this.uid = (uid += 1);
 
         /**
-         * Indicates if a widget is enabled.
+         * Indicates if a component is enabled.
          * @type {Boolean}
          * @private
          */
@@ -95,17 +95,17 @@
 
     /**
      * Adds functionality or abilities from other classes.
-     * @memberof! ch.Widget.prototype
+     * @memberof! ch.Component.prototype
      * @function
-     * @returns {instance} Returns an instance of Widget.
+     * @returns {instance} Returns an instance of Component.
      * @params {...String} var_args The name of the abilities to will be used.
      * @example
-     * // You can require some abilitiest to use in your widget.
+     * // You can require some abilitiest to use in your component.
      * // For example you should require the collpasible abitliy.
-     * var widget = new Widget(element, options);
-     * widget.require('Collapsible');
+     * var component = new Component(element, options);
+     * component.require('Collapsible');
      */
-    Widget.prototype.require = function () {
+    Component.prototype.require = function () {
 
         var arg,
             i = 0,
@@ -123,24 +123,24 @@
     };
 
     /**
-     * Enables an instance of Widget.
-     * @memberof! ch.Widget.prototype
+     * Enables an instance of Component.
+     * @memberof! ch.Component.prototype
      * @function
-     * @returns {instance} Returns an instance of Widget.
+     * @returns {instance} Returns an instance of Component.
      * @example
-     * // Enabling an instance of Widget.
-     * widget.enable();
+     * // Enabling an instance of Component.
+     * component.enable();
      */
-    Widget.prototype.enable = function () {
+    Component.prototype.enable = function () {
         this._enabled = true;
 
         /**
-         * Emits when a widget is enable.
-         * @event ch.Widget#enable
+         * Emits when a component is enable.
+         * @event ch.Component#enable
          * @example
          * // Subscribe to "enable" event.
-         * widget.on('enable', function () {
-         *  // Some code here!
+         * component.on('enable', function () {
+         *     // Some code here!
          * });
          */
         this.emit('enable');
@@ -149,24 +149,24 @@
     };
 
     /**
-     * Disables an instance of Widget.
-     * @memberof! ch.Widget.prototype
+     * Disables an instance of Component.
+     * @memberof! ch.Component.prototype
      * @function
-     * @return {instance} Returns an instance of Widget.
+     * @return {instance} Returns an instance of Component.
      * @example
-     * // Disabling an instance of Widget.
-     * widget.disable();
+     * // Disabling an instance of Component.
+     * component.disable();
      */
-    Widget.prototype.disable = function () {
+    Component.prototype.disable = function () {
         this._enabled = false;
 
         /**
-         * Emits when a widget is disable.
-         * @event ch.Widget#disable
+         * Emits when a component is disable.
+         * @event ch.Component#disable
          * @example
          * // Subscribe to "disable" event.
-         * widget.on('disable', function () {
-         *  // Some code here!
+         * component.on('disable', function () {
+         *     // Some code here!
          * });
          */
         this.emit('disable');
@@ -175,14 +175,14 @@
     };
 
     /**
-     * Destroys an instance of Widget and remove its data from asociated element.
-     * @memberof! ch.Widget.prototype
+     * Destroys an instance of Component and remove its data from asociated element.
+     * @memberof! ch.Component.prototype
      * @function
      * @example
-     * // Destroying an instance of Widget.
-     * widget.destroy();
+     * // Destroying an instance of Component.
+     * component.destroy();
      */
-    Widget.prototype.destroy = function () {
+    Component.prototype.destroy = function () {
 
         this.disable();
 
@@ -191,18 +191,18 @@
         }
 
         /**
-         * Emits when a widget is destroyed.
-         * @event ch.Widget#destroy
+         * Emits when a component is destroyed.
+         * @event ch.Component#destroy
          * @exampleDescription
          * @example
          * // Subscribe to "destroy" event.
-         * widget.on('destroy', function () {
-         *  // Some code here!
+         * component.on('destroy', function () {
+         *     // Some code here!
          * });
          */
         this.emit('destroy');
     };
 
-    ch.Widget = Widget;
+    ch.Component = Component;
 
 }(this, this.ch.$, this.ch));
\ No newline at end of file
diff --git a/src/shared/js/Condition.js b/src/shared/js/Condition.js
index f7651a6ab..b2c6d7edf 100644
--- a/src/shared/js/Condition.js
+++ b/src/shared/js/Condition.js
@@ -88,14 +88,14 @@
      * @returns {condition} Returns a new instance of Condition.
      * @example
      * // Create a new condition object with patt.
-     * var widget = ch.condition({
+     * var component = ch.condition({
      *     "name": "string",
      *     "patt": /^([a-zA-Z\u00C0-\u00C4\u00C8-\u00CF\u00D2-\u00D6\u00D9-\u00DC\u00E0-\u00E4\u00E8-\u00EF\u00F2-\u00F6\u00E9-\u00FC\u00C7\u00E7\s]*)$/,
      *     "message": "Some message here!"
      * });
      * @example
      * //Create a new condition object with expr.
-     * var widget = ch.condition({
+     * var component = ch.condition({
      *     "name": "maxLength",
      *     "patt": function(a,b) { return a.length <= b },
      *     "message": "Some message here!",
@@ -103,7 +103,7 @@
      * });
      * @example
      * // Create a new condition object with func.
-     * var widget = ch.condition({
+     * var component = ch.condition({
      *     "name": "custom",
      *     "patt": function (value) {
      *         if (value === "ChicoUI") {
diff --git a/src/shared/js/Content.js b/src/shared/js/Content.js
index cc185fe84..6f4b109d3 100644
--- a/src/shared/js/Content.js
+++ b/src/shared/js/Content.js
@@ -2,7 +2,7 @@
     'use strict';
 
     /**
-     * Add a function to manage widgets content.
+     * Add a function to manage components content.
      * @memberOf ch
      * @mixin
      * @returns {Function}
@@ -24,7 +24,7 @@
             };
 
         /**
-         * Set async content into widget's container and emits the current event.
+         * Set async content into component's container and emits the current event.
          * @private
          */
         function setAsyncContent(event) {
@@ -43,7 +43,7 @@
              * @event ch.Content#contentdone
              * @example
              * // Subscribe to "contentdone" event.
-             * widget.on('contentdone', function (event) {
+             * component.on('contentdone', function (event) {
              *     // Some code here!
              * });
              */
@@ -53,7 +53,7 @@
              * @event ch.Content#contentwaiting
              * @example
              * // Subscribe to "contentwaiting" event.
-             * widget.on('contentwaiting', function (event) {
+             * component.on('contentwaiting', function (event) {
              *     // Some code here!
              * });
              */
@@ -63,7 +63,7 @@
              * @event ch.Content#contenterror
              * @example
              * // Subscribe to "contenterror" event.
-             * widget.on('contenterror', function (event) {
+             * component.on('contenterror', function (event) {
              *     // Some code here!
              * });
              */
@@ -72,7 +72,7 @@
         }
 
         /**
-         * Set content into widget's container and emits the contentdone event.
+         * Set content into component's container and emits the contentdone event.
          * @private
          */
         function setContent(content) {
@@ -93,7 +93,7 @@
              * @event ch.Content#contentdone
              * @example
              * // Subscribe to "contentdone" event.
-             * widget.on('contentdone', function (event) {
+             * component.on('contentdone', function (event) {
              *     // Some code here!
              * });
              */
@@ -159,10 +159,10 @@
         }
 
         /**
-         * Allows to manage the widgets content.
+         * Allows to manage the components content.
          * @function
          * @memberof! ch.Content#
-         * @param {(String | jQuerySelector | ZeptoSelector)} content The content that will be used by a widget.
+         * @param {(String | jQuerySelector | ZeptoSelector)} content The content that will be used by a component.
          * @param {Object} [options] A custom options to be used with content loaded by ajax.
          * @param {String} [options.method] The type of request ("POST" or "GET") to load content by ajax. Default: "GET".
          * @param {String} [options.params] Params like query string to be sent to the server.
@@ -171,10 +171,10 @@
          * @param {(String | jQuerySelector | ZeptoSelector)} [options.waiting] Temporary content to use while the ajax request is loading.
          * @example
          * // Update content with some string.
-         * widget.content('Some new content here!');
+         * component.content('Some new content here!');
          * @example
          * // Update content that will be loaded by ajax with custom options.
-         * widget.content('http://chico-ui.com.ar/ajax', {
+         * component.content('http://chico-ui.com.ar/ajax', {
          *     'cache': false,
          *     'params': 'x-request=true'
          * });
diff --git a/src/shared/js/Countdown.js b/src/shared/js/Countdown.js
index 6f8e7c42a..a04a84a8a 100644
--- a/src/shared/js/Countdown.js
+++ b/src/shared/js/Countdown.js
@@ -17,7 +17,7 @@
      * Countdown counts the maximum of characters that user can enter in a form control. Countdown could limit the possibility to continue inserting charset.
      * @memberof ch
      * @constructor
-     * @augments ch.Widget
+     * @augments ch.Component
      * @param {(jQuerySelector | ZeptoSelector)} $el A jQuery or Zepto Selector to create an instance of ch.Countdown.
      * @param {Object} [options] Options to customize an instance.
      * @param {Number} [options.max] Number of the maximum amount of characters user can input in form control. Default: 500.
@@ -53,7 +53,7 @@
         that._init($el, options);
 
         /**
-         * Event emitted when the widget is ready to use.
+         * Event emitted when the component is ready to use.
          * @event ch.Countdown#ready
          * @example
          * // Subscribe to "ready" event.
@@ -65,10 +65,10 @@
     }
 
     // Inheritance
-    var parent = ch.util.inherits(Countdown, ch.Widget);
+    var parent = ch.util.inherits(Countdown, ch.Component);
 
     /**
-     * The name of the widget.
+     * The name of the component.
      * @type {String}
      */
     Countdown.prototype.name = 'countdown';
diff --git a/src/shared/js/Custom.js b/src/shared/js/Custom.js
index 6a2d7e869..b2668808e 100644
--- a/src/shared/js/Custom.js
+++ b/src/shared/js/Custom.js
@@ -88,7 +88,7 @@
     }
 
     /**
-     * The name of the widget.
+     * The name of the component.
      * @memberof! ch.Custom.prototype
      * @type {String}
      */
diff --git a/src/shared/js/Dropdown.js b/src/shared/js/Dropdown.js
index 08186862d..18588d294 100644
--- a/src/shared/js/Dropdown.js
+++ b/src/shared/js/Dropdown.js
@@ -8,12 +8,12 @@
      * @augments ch.Layer
      * @param {(jQuerySelector | ZeptoSelector)} $el A jQuery or Zepto Selector to create an instance of ch.Dropdown.
      * @param {Object} [options] Options to customize an instance.
-     * @param {String} [options.addClass] CSS class names that will be added to the container on the widget initialization.
+     * @param {String} [options.addClass] CSS class names that will be added to the container on the component initialization.
      * @param {String} [options.fx] Enable or disable UI effects. You must use: "slideDown", "fadeIn" or "none". Default: "none".
      * @param {String} [options.width] Set a width for the container. Default: "auto".
      * @param {String} [options.height] Set a height for the container. Default: "auto".
      * @param {String} [options.shownby] Determines how to interact with the trigger to show the container. You must use: "pointertap", "pointerenter" or "none". Default: "pointertap".
-     * @param {String} [options.hiddenby] Determines how to hide the widget. You must use: "button", "pointers", "pointerleave", "all" or "none". Default: "pointers".
+     * @param {String} [options.hiddenby] Determines how to hide the component. You must use: "button", "pointers", "pointerleave", "all" or "none". Default: "pointers".
      * @param {(jQuerySelector | ZeptoSelector)} [options.reference] It's a reference to position and size of element that will be considered to carry out the position. Default: the trigger element.
      * @param {String} [options.side] The side option where the target element will be positioned. Its value can be: "left", "right", "top", "bottom" or "center". Default: "bottom".
      * @param {String} [options.align] The align options where the target element will be positioned. Its value can be: "left", "right", "top", "bottom" or "center". Default: "left".
@@ -52,7 +52,7 @@
         this._init($el, options);
 
         /**
-         * Event emitted when the widget is ready to use.
+         * Event emitted when the component is ready to use.
          * @event ch.Dropdown#ready
          * @example
          * // Subscribe to "ready" event.
@@ -69,7 +69,7 @@
         parent = ch.util.inherits(Dropdown, ch.Layer);
 
     /**
-     * The name of the widget.
+     * The name of the component.
      * @memberof! ch.Dropdown.prototype
      * @type {String}
      */
@@ -139,7 +139,7 @@
         }
 
         /**
-         * A list of links with the navigation options of the widget.
+         * A list of links with the navigation options of the component.
          * @type {(jQuerySelector | ZeptoSelector)}
          * @private
          */
diff --git a/src/shared/js/Email.js b/src/shared/js/Email.js
index 2e2a53ae0..d1fa35561 100644
--- a/src/shared/js/Email.js
+++ b/src/shared/js/Email.js
@@ -62,7 +62,7 @@
     }
 
     /**
-     * The name of the widget.
+     * The name of the component.
      * @memberof! ch.Email.prototype
      * @type {String}
      */
diff --git a/src/shared/js/EventEmitter.js b/src/shared/js/EventEmitter.js
index c3e02999e..c1f79ab42 100644
--- a/src/shared/js/EventEmitter.js
+++ b/src/shared/js/EventEmitter.js
@@ -11,7 +11,7 @@
      * var emitter = new ch.EventEmitter();
      * @example
      * // Inheriting from EventEmitter.
-     * ch.util.inherits(Widget, ch.EventEmitter);
+     * ch.util.inherits(Component, ch.EventEmitter);
      */
     function EventEmitter() {}
 
@@ -24,7 +24,7 @@
      * @param {Boolean} once Indicate if a listener function will be called only one time.
      * @example
      * // Will add an event listener to 'ready' event.
-     * widget.on('ready', listener);
+     * component.on('ready', listener);
      */
     EventEmitter.prototype.on = function (event, listener, once) {
 
@@ -58,7 +58,7 @@
      * @returns {Object}
      * @example
      * // Will add an event handler to 'contentLoad' event once.
-     * widget.once('contentLoad', listener);
+     * component.once('contentLoad', listener);
      */
     EventEmitter.prototype.once = function (event, listener) {
 
@@ -76,7 +76,7 @@
      * @returns {Object}
      * @example
      * // Will remove event listener to 'ready' event.
-     * widget.off('ready', listener);
+     * component.off('ready', listener);
      */
     EventEmitter.prototype.off = function (event, listener) {
 
@@ -113,7 +113,7 @@
      * @returns {Array}
      * @example
      * // Returns listeners from 'ready' event.
-     * widget.getListeners('ready');
+     * component.getListeners('ready');
      */
     EventEmitter.prototype.getListeners = function (event) {
         if (event === undefined) {
@@ -131,7 +131,7 @@
      * @param {...Object} var_args Data to pass to the listeners.
      * @example
      * // Will emit the 'ready' event with 'param1' and 'param2' as arguments.
-     * widget.emit('ready', 'param1', 'param2');
+     * component.emit('ready', 'param1', 'param2');
      */
     EventEmitter.prototype.emit = function () {
 
diff --git a/src/shared/js/Expandable.js b/src/shared/js/Expandable.js
index 90461611c..66f6e58ef 100644
--- a/src/shared/js/Expandable.js
+++ b/src/shared/js/Expandable.js
@@ -14,7 +14,7 @@
      * Expandable lets you show or hide content. Expandable needs a pair: a title and a container related to title.
      * @memberof ch
      * @constructor
-     * @augments ch.Widget
+     * @augments ch.Component
      * @mixes ch.Collapsible
      * @mixes ch.Content
      * @param {(jQuerySelector | ZeptoSelector)} $el A jQuery or Zepto Selector to create an instance of ch.Expandable.
@@ -54,7 +54,7 @@
         this._init($el, options);
 
         /**
-         * Event emitted when the widget is ready to use.
+         * Event emitted when the component is ready to use.
          * @event ch.Expandable#ready
          * @example
          * // Subscribe to "ready" event.
@@ -67,10 +67,10 @@
 
     // Inheritance
     var $document = $(window.document),
-        parent = ch.util.inherits(Expandable, ch.Widget);
+        parent = ch.util.inherits(Expandable, ch.Component);
 
     /**
-     * The name of the widget.
+     * The name of the component.
      * @type {String}
      */
     Expandable.prototype.name = 'expandable';
@@ -183,13 +183,13 @@
      * @returns {expandable}
      * @example
      * // Shows a basic expandable.
-     * widget.show();
+     * component.show();
      * @example
      * // Shows an expandable with new content.
-     * widget.show('Some new content here!');
+     * component.show('Some new content here!');
      * @example
      * // Shows an expandable with a new content that will be loaded by ajax and some custom options.
-     * widget.show('http://chico-ui.com.ar/ajax', {
+     * component.show('http://chico-ui.com.ar/ajax', {
      *     'cache': false,
      *     'params': 'x-request=true'
      * });
@@ -214,7 +214,7 @@
     };
 
     /**
-     * Hides widget's container.
+     * Hides component's container.
      * @memberof! ch.Expandable.prototype
      * @function
      * @returns {expandable}
@@ -237,12 +237,12 @@
 
 
     /**
-     * Returns a Boolean if the widget's core behavior is shown. That means it will return 'true' if the widget is on and it will return false otherwise.
+     * Returns a Boolean if the component's core behavior is shown. That means it will return 'true' if the component is on and it will return false otherwise.
      * @memberof! ch.Expandable.prototype
      * @function
      * @returns {Boolean}
      * @example
-     * // Execute a function if the widget is shown.
+     * // Execute a function if the component is shown.
      * if (expandable.isShown()) {
      *     fn();
      * }
diff --git a/src/shared/js/Form.js b/src/shared/js/Form.js
index b8c0dfaa0..19513e7f0 100644
--- a/src/shared/js/Form.js
+++ b/src/shared/js/Form.js
@@ -5,7 +5,7 @@
      * Form is a controller of DOM's HTMLFormElement.
      * @memberof ch
      * @constructor
-     * @augments ch.Widget
+     * @augments ch.Component
      * @requires ch.Validations
      * @param {(jQuerySelector | ZeptoSelector)} $el A jQuery or Zepto Selector to create an instance of ch.Form.
      * @param {Object} [options] Options to customize an instance.
@@ -61,14 +61,14 @@
     }
 
     // Inheritance
-    var parent = ch.util.inherits(Form, ch.Widget);
+    var parent = ch.util.inherits(Form, ch.Component);
 
     /**
      * Prototype
      */
 
     /**
-     * The name of the widget.
+     * The name of the component.
      * @type {String}
      */
     Form.prototype.name = 'form';
@@ -162,8 +162,8 @@
          * @event ch.Form#beforevalidate
          * @example
          * // Subscribe to "beforevalidate" event.
-         * widget.on('beforevalidate', function () {
-         *  // Some code here!
+         * component.on('beforevalidate', function () {
+         *     // Some code here!
          * });
          */
         this.emit('beforevalidate');
diff --git a/src/shared/js/Layer.js b/src/shared/js/Layer.js
index 7e15ee36d..624153411 100644
--- a/src/shared/js/Layer.js
+++ b/src/shared/js/Layer.js
@@ -8,12 +8,12 @@
      * @augments ch.Popover
      * @param {(jQuerySelector | ZeptoSelector)} $el A jQuery or Zepto Selector to create an instance of ch.Layer.
      * @param {Object} [options] Options to customize an instance.
-     * @param {String} [options.addClass] CSS class names that will be added to the container on the widget initialization.
+     * @param {String} [options.addClass] CSS class names that will be added to the container on the component initialization.
      * @param {String} [options.fx] Enable or disable UI effects. You must use: "slideDown", "fadeIn" or "none". Default: "fadeIn".
      * @param {String} [options.width] Set a width for the container. Default: "auto".
      * @param {String} [options.height] Set a height for the container. Default: "auto".
      * @param {String} [options.shownby] Determines how to interact with the trigger to show the container. You must use: "pointertap", "pointerenter" or "none". Default: "pointerenter".
-     * @param {String} [options.hiddenby] Determines how to hide the widget. You must use: "button", "pointers", "pointerleave", "all" or "none". Default: "pointerleave".
+     * @param {String} [options.hiddenby] Determines how to hide the component. You must use: "button", "pointers", "pointerleave", "all" or "none". Default: "pointerleave".
      * @param {(jQuerySelector | ZeptoSelector)} [options.reference] It's a reference to position and size of element that will be considered to carry out the position. Default: the trigger element.
      * @param {String} [options.side] The side option where the target element will be positioned. Its value can be: "left", "right", "top", "bottom" or "center". Default: "bottom".
      * @param {String} [options.align] The align options where the target element will be positioned. Its value can be: "left", "right", "top", "bottom" or "center". Default: "left".
@@ -53,7 +53,7 @@
         this._init($el, options);
 
         /**
-         * Event emitted when the widget is ready to use.
+         * Event emitted when the component is ready to use.
          * @event ch.Layer#ready
          * @example
          * // Subscribe to "ready" event.
@@ -64,14 +64,14 @@
         window.setTimeout(function () { that.emit('ready'); }, 50);
     }
 
-    // Reference to the last widget open. Allows to close and to deny to
-    // have 2 widgets open at the same time
+    // Reference to the last component open. Allows to close and to deny to
+    // have 2 components open at the same time
     var lastShown,
         // Inheritance
         parent = ch.util.inherits(Layer, ch.Popover);
 
     /**
-     * The name of the widget.
+     * The name of the component.
      * @memberof! ch.Layer.prototype
      * @type {String}
      */
@@ -128,12 +128,12 @@
             return this;
         }
 
-        // Only hide if there was a widget opened before
+        // Only hide if there was a component opened before
         if (lastShown !== undefined && lastShown.name === this.name && lastShown !== this) {
             lastShown.hide();
         }
 
-        // Only save to future close if this widget is closable
+        // Only save to future close if this component is closable
         if (this._options.hiddenby !== 'none' && this._options.hiddenby !== 'button') {
             lastShown = this;
         }
diff --git a/src/shared/js/Max.js b/src/shared/js/Max.js
index c00b23f08..dde71909b 100644
--- a/src/shared/js/Max.js
+++ b/src/shared/js/Max.js
@@ -81,7 +81,7 @@
     }
 
     /**
-     * The name of the widget.
+     * The name of the component.
      * @memberof! ch.Max.prototype
      * @type {String}
      */
diff --git a/src/shared/js/MaxLength.js b/src/shared/js/MaxLength.js
index cd32b8b69..f53e0ab11 100644
--- a/src/shared/js/MaxLength.js
+++ b/src/shared/js/MaxLength.js
@@ -81,7 +81,7 @@
     }
 
     /**
-     * The name of the widget.
+     * The name of the component.
      * @memberof! ch.MaxLength.prototype
      * @type {String}
      */
diff --git a/src/shared/js/Menu.js b/src/shared/js/Menu.js
index 0dc073efe..3acba7414 100644
--- a/src/shared/js/Menu.js
+++ b/src/shared/js/Menu.js
@@ -5,7 +5,7 @@
      * Menu lets you organize the links by categories.
      * @memberof ch
      * @constructor
-     * @augments ch.Widget
+     * @augments ch.Component
      * @requires ch.Expandable
      * @param {(jQuerySelector | ZeptoSelector)} $el A jQuery or Zepto Selector to create an instance of ch.Menu.
      * @param {Object} [options] Options to customize an instance.
@@ -35,7 +35,7 @@
         that._init($el, options);
 
         /**
-         * Event emitted when the widget is ready to use.
+         * Event emitted when the component is ready to use.
          * @event ch.Menu#ready
          * @example
          * // Subscribe to "ready" event.
@@ -47,7 +47,7 @@
     }
 
     // Inheritance
-    var parent = ch.util.inherits(Menu, ch.Widget),
+    var parent = ch.util.inherits(Menu, ch.Component),
 
         // Creates methods enable and disable into the prototype.
         methods = ['enable', 'disable'],
@@ -89,7 +89,7 @@
     }
 
     /**
-     * The name of the widget.
+     * The name of the component.
      * @type {String}
      */
     Menu.prototype.name = 'menu';
diff --git a/src/shared/js/Min.js b/src/shared/js/Min.js
index 41946f050..d71eaf55d 100644
--- a/src/shared/js/Min.js
+++ b/src/shared/js/Min.js
@@ -81,7 +81,7 @@
     }
 
     /**
-     * The name of the widget.
+     * The name of the component.
      * @memberof! ch.Min.prototype
      * @type {String}
      */
diff --git a/src/shared/js/MinLength.js b/src/shared/js/MinLength.js
index f997b8b6a..2271e3cd9 100644
--- a/src/shared/js/MinLength.js
+++ b/src/shared/js/MinLength.js
@@ -81,7 +81,7 @@
     }
 
     /**
-     * The name of the widget.
+     * The name of the component.
      * @memberof! ch.MinLength.prototype
      * @type {String}
      */
diff --git a/src/shared/js/Modal.js b/src/shared/js/Modal.js
index e45a223f4..c92aaf743 100644
--- a/src/shared/js/Modal.js
+++ b/src/shared/js/Modal.js
@@ -8,12 +8,12 @@
      * @augments ch.Popover
      * @param {(jQuerySelector | ZeptoSelector)} $el A jQuery or Zepto Selector to create an instance of ch.Modal.
      * @param {Object} [options] Options to customize an instance.
-     * @param {String} [options.addClass] CSS class names that will be added to the container on the widget initialization.
+     * @param {String} [options.addClass] CSS class names that will be added to the container on the component initialization.
      * @param {String} [options.fx] Enable or disable UI effects. You must use: "slideDown", "fadeIn" or "none". Default: "fadeIn".
      * @param {String} [options.width] Set a width for the container. Default: "50%".
      * @param {String} [options.height] Set a height for the container. Default: "auto".
      * @param {String} [options.shownby] Determines how to interact with the trigger to show the container. You must use: "pointertap", "pointerenter" or "none". Default: "pointertap".
-     * @param {String} [options.hiddenby] Determines how to hide the widget. You must use: "button", "pointers", "pointerleave", "all" or "none". Default: "all".
+     * @param {String} [options.hiddenby] Determines how to hide the component. You must use: "button", "pointers", "pointerleave", "all" or "none". Default: "all".
      * @param {(jQuerySelector | ZeptoSelector)} [options.reference] It's a reference to position and size of element that will be considered to carry out the position. Default: ch.viewport.
      * @param {String} [options.side] The side option where the target element will be positioned. Its value can be: "left", "right", "top", "bottom" or "center". Default: "center".
      * @param {String} [options.align] The align options where the target element will be positioned. Its value can be: "left", "right", "top", "bottom" or "center". Default: "center".
@@ -53,7 +53,7 @@
         this._init($el, options);
 
         /**
-         * Event emitted when the widget is ready to use.
+         * Event emitted when the component is ready to use.
          * @event ch.Modal#ready
          * @example
          * // Subscribe to "ready" event.
@@ -70,7 +70,7 @@
         parent = ch.util.inherits(Modal, ch.Popover);
 
     /**
-     * The name of the widget.
+     * The name of the component.
      * @memberof! ch.Modal.prototype
      * @type {String}
      */
@@ -163,7 +163,7 @@
          */
         var that = this;
 
-        // Add to the underlay the ability to hide the widget
+        // Add to the underlay the ability to hide the component
         if (this._options.hiddenby === 'all' || this._options.hiddenby === 'pointers') {
             // Allow only one click to analize the config every time and to close ONLY THIS modal
             $underlay.one(ch.onpointertap, function () {
diff --git a/src/shared/js/Number.js b/src/shared/js/Number.js
index 35a2bc025..e945c31c4 100644
--- a/src/shared/js/Number.js
+++ b/src/shared/js/Number.js
@@ -77,7 +77,7 @@
     }
 
     /**
-     * The name of the widget.
+     * The name of the component.
      * @memberof! ch.Number.prototype
      * @type {String}
      */
diff --git a/src/shared/js/Popover.js b/src/shared/js/Popover.js
index 37aaf9c67..64cf2e117 100644
--- a/src/shared/js/Popover.js
+++ b/src/shared/js/Popover.js
@@ -5,18 +5,18 @@
      * Popover is the basic unit of a dialog window.
      * @memberof ch
      * @constructor
-     * @augments ch.Widget
+     * @augments ch.Component
      * @mixes ch.Collapsible
      * @mixes ch.Content
      * @requires ch.Positioner
      * @param {(jQuerySelector | ZeptoSelector)} $el A jQuery or Zepto Selector to create an instance of ch.Popover.
      * @param {Object} [options] Options to customize an instance.
-     * @param {String} [options.addClass] CSS class names that will be added to the container on the widget initialization.
+     * @param {String} [options.addClass] CSS class names that will be added to the container on the component initialization.
      * @param {String} [options.fx] Enable or disable UI effects. You must use: "slideDown", "fadeIn" or "none". Default: "fadeIn".
      * @param {String} [options.width] Set a width for the container. Default: "auto".
      * @param {String} [options.height] Set a height for the container. Default: "auto".
      * @param {String} [options.shownby] Determines how to interact with the trigger to show the container. You must use: "pointertap", "pointerenter" or "none". Default: "pointertap".
-     * @param {String} [options.hiddenby] Determines how to hide the widget. You must use: "button", "pointers", "pointerleave", "all" or "none". Default: "button".
+     * @param {String} [options.hiddenby] Determines how to hide the component. You must use: "button", "pointers", "pointerleave", "all" or "none". Default: "button".
      * @param {(jQuerySelector | ZeptoSelector)} [options.reference] It's a reference to position and size of element that will be considered to carry out the position. Default: the trigger element.
      * @param {String} [options.side] The side option where the target element will be positioned. Its value can be: "left", "right", "top", "bottom" or "center". Default: "center".
      * @param {String} [options.align] The align options where the target element will be positioned. Its value can be: "left", "right", "top", "bottom" or "center". Default: "center".
@@ -56,7 +56,7 @@
         this._init($el, options);
 
         /**
-         * Event emitted when the widget is ready to use.
+         * Event emitted when the component is ready to use.
          * @event ch.Popover#ready
          * @example
          * // Subscribe to "ready" event.
@@ -70,14 +70,14 @@
     var $document = $(window.document),
         $body = $('body'),
         // Inheritance
-        parent = ch.util.inherits(Popover, ch.Widget),
+        parent = ch.util.inherits(Popover, ch.Component),
         shownbyEvent = {
             'pointertap': ch.onpointertap,
             'pointerenter': ch.onpointerenter
         };
 
     /**
-     * The name of the widget.
+     * The name of the component.
      * @memberof! ch.Popover.prototype
      * @type {String}
      */
@@ -189,7 +189,7 @@
             .once('_show', this._refreshPositionListener)
             // on content change
             .on('_contentchange', this._refreshPositionListener)
-            // Remove from DOM the widget container after hide
+            // Remove from DOM the component container after hide
             .on('hide', function () {
                 that.$container.remove(null, true);
             });
@@ -221,7 +221,7 @@
                 // Toggle as default
                 var fn = that._toggle;
                 // When a Popover is shown on pointerenter, it will set a timeout to manage when
-                // to close the widget. Avoid to toggle and let choise when to close to the timer
+                // to close the component. Avoid to toggle and let choise when to close to the timer
                 if (that._options.shownby === 'pointerenter' || that._options.hiddenby === 'none' || that._options.hiddenby === 'button') {
                     fn = function () {
                         if (!that._shown) {
@@ -283,7 +283,7 @@
     };
 
     /**
-     * Determines how to hide the widget.
+     * Determines how to hide the component.
      * @memberof! ch.Popover.prototype
      * @private
      * @function
@@ -309,7 +309,7 @@
         // Don't hide anytime
         if (hiddenby === 'none') { return; }
 
-        // Hide by leaving the widget
+        // Hide by leaving the component
         if (hiddenby === 'pointerleave' && this.$trigger !== undefined) {
 
             events[ch.onpointerenter + '.' + this.name] = function () {
@@ -442,10 +442,10 @@
      * @returns {(Number | popover)}
      * @example
      * // Set a new popover width
-     * widget.width('300px');
+     * component.width('300px');
      * @example
      * // Get the current popover width
-     * widget.width(); // '300px'
+     * component.width(); // '300px'
      */
     Popover.prototype.width = function (data) {
 
@@ -470,10 +470,10 @@
      * @returns {(Number | popover)}
      * @example
      * // Set a new popover height
-     * widget.height('300px');
+     * component.height('300px');
      * @example
      * // Get the current popover height
-     * widget.height(); // '300px'
+     * component.height(); // '300px'
      */
     Popover.prototype.height = function (data) {
 
diff --git a/src/shared/js/Required.js b/src/shared/js/Required.js
index c80e6a8bd..bce622979 100644
--- a/src/shared/js/Required.js
+++ b/src/shared/js/Required.js
@@ -62,7 +62,7 @@
     }
 
     /**
-     * The name of the widget.
+     * The name of the component.
      * @memberof! ch.Required.prototype
      * @type {String}
      */
diff --git a/src/shared/js/String.js b/src/shared/js/String.js
index 0fd26990f..c63acb5e3 100644
--- a/src/shared/js/String.js
+++ b/src/shared/js/String.js
@@ -77,7 +77,7 @@
     }
 
     /**
-     * The name of the widget.
+     * The name of the component.
      * @memberof! ch.String.prototype
      * @type {String}
      */
diff --git a/src/shared/js/Tooltip.js b/src/shared/js/Tooltip.js
index 421f3642b..22de5a7c0 100644
--- a/src/shared/js/Tooltip.js
+++ b/src/shared/js/Tooltip.js
@@ -8,12 +8,12 @@
      * @augments ch.Popover
      * @param {(jQuerySelector | ZeptoSelector)} $el A jQuery or Zepto Selector to create an instance of ch.Tooltip.
      * @param {Object} [options] Options to customize an instance.
-     * @param {String} [options.addClass] CSS class names that will be added to the container on the widget initialization.
+     * @param {String} [options.addClass] CSS class names that will be added to the container on the component initialization.
      * @param {String} [options.fx] Enable or disable UI effects. You must use: "slideDown", "fadeIn" or "none". Default: "fadeIn".
      * @param {String} [options.width] Set a width for the container. Default: "auto".
      * @param {String} [options.height] Set a height for the container. Default: "auto".
      * @param {String} [options.shownby] Determines how to interact with the trigger to show the container. You must use: "pointertap", "pointerenter" or "none". Default: "pointerenter".
-     * @param {String} [options.hiddenby] Determines how to hide the widget. You must use: "button", "pointers", "pointerleave", "all" or "none". Default: "pointerleave".
+     * @param {String} [options.hiddenby] Determines how to hide the component. You must use: "button", "pointers", "pointerleave", "all" or "none". Default: "pointerleave".
      * @param {(jQuerySelector | ZeptoSelector)} [options.reference] It's a reference to position and size of element that will be considered to carry out the position. Default: the trigger element.
      * @param {String} [options.side] The side option where the target element will be positioned. Its value can be: "left", "right", "top", "bottom" or "center". Default: "bottom".
      * @param {String} [options.align] The align options where the target element will be positioned. Its value can be: "left", "right", "top", "bottom" or "center". Default: "left".
@@ -55,7 +55,7 @@
     }
 
     /**
-     * The name of the widget.
+     * The name of the component.
      * @memberof! ch.Tooltip.prototype
      * @type {String}
      */
diff --git a/src/shared/js/Transition.js b/src/shared/js/Transition.js
index 6bb96e974..bfda5fbba 100644
--- a/src/shared/js/Transition.js
+++ b/src/shared/js/Transition.js
@@ -8,12 +8,12 @@
      * @augments ch.Popover
      * @param {(jQuerySelector | ZeptoSelector)} $el A jQuery or Zepto Selector to create an instance of ch.Transition.
      * @param {Object} [options] Options to customize an instance.
-     * @param {String} [options.addClass] CSS class names that will be added to the container on the widget initialization.
+     * @param {String} [options.addClass] CSS class names that will be added to the container on the component initialization.
      * @param {String} [options.fx] Enable or disable UI effects. You must use: "slideDown", "fadeIn" or "none". Default: "fadeIn".
      * @param {String} [options.width] Set a width for the container. Default: "50%".
      * @param {String} [options.height] Set a height for the container. Default: "auto".
      * @param {String} [options.shownby] Determines how to interact with the trigger to show the container. You must use: "pointertap", "pointerenter" or "none". Default: "pointertap".
-     * @param {String} [options.hiddenby] Determines how to hide the widget. You must use: "button", "pointers", "pointerleave", "all" or "none". Default: "none".
+     * @param {String} [options.hiddenby] Determines how to hide the component. You must use: "button", "pointers", "pointerleave", "all" or "none". Default: "none".
      * @param {(jQuerySelector | ZeptoSelector)} [options.reference] It's a reference to position and size of element that will be considered to carry out the position. Default: ch.viewport.
      * @param {String} [options.side] The side option where the target element will be positioned. Its value can be: "left", "right", "top", "bottom" or "center". Default: "center".
      * @param {String} [options.align] The align options where the target element will be positioned. Its value can be: "left", "right", "top", "bottom" or "center". Default: "center".
@@ -57,7 +57,7 @@
     }
 
     /**
-     * The name of the widget.
+     * The name of the component.
      * @memberof! ch.Transition.prototype
      * @type {String}
      */
diff --git a/src/shared/js/URL.js b/src/shared/js/URL.js
index 8d0dec8e5..b56d7eb55 100644
--- a/src/shared/js/URL.js
+++ b/src/shared/js/URL.js
@@ -76,7 +76,7 @@
     }
 
     /**
-     * The name of the widget.
+     * The name of the component.
      * @memberof! ch.Url.prototype
      * @type {String}
      */
diff --git a/src/shared/js/Validation.js b/src/shared/js/Validation.js
index 7b7d6871b..4f7c3e7cd 100644
--- a/src/shared/js/Validation.js
+++ b/src/shared/js/Validation.js
@@ -5,7 +5,7 @@
      * Validation is an engine to validate HTML forms elements.
      * @memberof ch
      * @constructor
-     * @augments ch.Widget
+     * @augments ch.Component
      * @requires ch.Condition
      * @requires ch.Form
      * @requires ch.Bubble
@@ -72,7 +72,7 @@
     }
 
     // Inheritance
-    var parent = ch.util.inherits(Validation, ch.Widget),
+    var parent = ch.util.inherits(Validation, ch.Component),
         // Creates methods enable and disable into the prototype.
         methods = ['enable', 'disable'],
         len = methods.length;
@@ -103,7 +103,7 @@
     }
 
     /**
-     * The name of the widget.
+     * The name of the component.
      * @memberof! ch.Validation.prototype
      * @type {String}
      */
diff --git a/src/shared/js/Viewport.js b/src/shared/js/Viewport.js
index 11552c32b..bc3b616ae 100644
--- a/src/shared/js/Viewport.js
+++ b/src/shared/js/Viewport.js
@@ -16,7 +16,6 @@
     function update() {
 
         var eve = resized ? ch.onresize : ch.onscroll;
-        console.log('yay');
 
         // Refresh viewport
         this.refresh();
diff --git a/src/shared/js/factory.js b/src/shared/js/factory.js
index dd85531cc..c80b6dae0 100644
--- a/src/shared/js/factory.js
+++ b/src/shared/js/factory.js
@@ -19,9 +19,9 @@
 
         /**
          * The class constructor exposed directly into the "ch" namespace.
-         * @exampleDescription Creating a widget instance by specifying a query selector and a configuration object.
+         * @exampleDescription Creating a component instance by specifying a query selector and a configuration object.
          * @example
-         * ch.Widget($('#example'), {
+         * ch.Component($('#example'), {
          *     'key': 'value'
          * });
          */
@@ -32,22 +32,22 @@
         /**
          * The class constructor exposed into the "$" namespace.
          * @ignore
-         * @exampleDescription Creating a widget instance by specifying a query selector and a configuration object.
+         * @exampleDescription Creating a component instance by specifying a query selector and a configuration object.
          * @example
-         * $.widget($('#example'), {
+         * $.component($('#example'), {
          *     'key': 'value'
          * });
-         * @exampleDescription Creating a widget instance by specifying only a query selector. The default options of each widget will be used.
+         * @exampleDescription Creating a component instance by specifying only a query selector. The default options of each component will be used.
          * @example
-         * $.widget($('#example')});
-         * @exampleDescription Creating a widget instance by specifying only a cofiguration object. It only works on compatible widgets, when those doesn't depends on a element to be created.
+         * $.component($('#example')});
+         * @exampleDescription Creating a component instance by specifying only a cofiguration object. It only works on compatible components, when those doesn't depends on a element to be created.
          * @example
-         * $.widget({
+         * $.component({
          *     'key': 'value'
          * });
-         * @exampleDescription Creating a widget instance by no specifying parameters. It only works on compatible widgets, when those doesn't depends on a element to be created. The default options of each widget will be used.
+         * @exampleDescription Creating a component instance by no specifying parameters. It only works on compatible components, when those doesn't depends on a element to be created. The default options of each component will be used.
          * @example
-         * $.widget();
+         * $.component();
          */
         $[name] = function ($el, options) {
             // Create a new instance of the constructor and return it
@@ -59,8 +59,8 @@
          */
         $.fn[name] = function (options) {
 
-            // Collection with each instanced widget
-            var widgets = [];
+            // Collection with each instanced component
+            var components = [];
 
             // Normalize options
             options = (fn !== undefined) ? fn.apply(this, arguments) : options;
@@ -69,10 +69,10 @@
             $.each(this, function () {
                 // Get into the "$" scope
                 var $el = $(this),
-                    // Try to get the "data" reference to this widget related to the element
+                    // Try to get the "data" reference to this component related to the element
                     data = $el.data(constructorName);
 
-                // When this widget isn't related to the element via data, create a new instance and save
+                // When this component isn't related to the element via data, create a new instance and save
                 if (data === undefined) {
 
                     // Save the reference to this instance into the element data
@@ -86,12 +86,12 @@
                     }
                 }
 
-                // Add the widget reference to the final collection
-                widgets.push(data);
+                // Add the component reference to the final collection
+                components.push(data);
 
             });
 
-            // Return the instance/instances of widgets
-            return (widgets.length > 1) ? widgets : widgets[0];
+            // Return the instance/instances of components
+            return (components.length > 1) ? components : components[0];
         };
     };
\ No newline at end of file
diff --git a/src/shared/js/util.js b/src/shared/js/util.js
index 7b3d063be..aaa1e6028 100644
--- a/src/shared/js/util.js
+++ b/src/shared/js/util.js
@@ -1,5 +1,5 @@
     /**
-     * Provides varies utilities and commons functions that are used across all widgets.
+     * Provides varies utilities and commons functions that are used across all components.
      * @namespace
      */
     ch.util = {
diff --git a/src/ui/js/Datepicker.js b/src/ui/js/Datepicker.js
index ad2779574..98ba0021b 100644
--- a/src/ui/js/Datepicker.js
+++ b/src/ui/js/Datepicker.js
@@ -5,7 +5,7 @@
      * Datepicker lets you select dates.
      * @memberof ch
      * @constructor
-     * @augments ch.Widget
+     * @augments ch.Component
      * @requires ch.Calendar
      * @param {(jQuerySelector | ZeptoSelector)} $el A jQuery or Zepto Selector to create an instance of ch.Datepicker.
      * @param {Object} [options] Options to customize an instance.
@@ -15,7 +15,7 @@
      * @param {String} [options.to] Set a maximum selectable date. The format of the given date should be "YYYY/MM/DD".
      * @param {Array} [options.monthsNames] A collection of months names. Default: ["Enero", ... , "Diciembre"].
      * @param {Array} [options.weekdays] A collection of weekdays. Default: ["Dom", ... , "Sab"].
-     * @param {Boolean} [conf.hiddenby] Determines how to hide the widget. You must use: "button", "pointers", "pointerleave", "all" or "none". Default: "pointers".
+     * @param {Boolean} [conf.hiddenby] Determines how to hide the component. You must use: "button", "pointers", "pointerleave", "all" or "none". Default: "pointers".
      * @param {(jQuerySelector | ZeptoSelector)} [options.context] It's a reference to position and size of element that will be considered to carry out the position.
      * @param {String} [options.side] The side option where the target element will be positioned. You must use: "left", "right", "top", "bottom" or "center". Default: "bottom".
      * @param {String} [options.align] The align options where the target element will be positioned. You must use: "left", "right", "top", "bottom" or "center". Default: "center".
@@ -52,7 +52,7 @@
         this._init($el, options);
 
         /**
-         * Event emitted when the widget is ready to use.
+         * Event emitted when the component is ready to use.
          * @event ch.Datepicker#ready
          * @example
          * // Subscribe to "ready" event.
@@ -64,7 +64,7 @@
     }
 
     // Inheritance
-    var parent = ch.util.inherits(Datepicker, ch.Widget),
+    var parent = ch.util.inherits(Datepicker, ch.Component),
         // Creates methods enable and disable into the prototype.
         methods = ['enable', 'disable'],
         len = methods.length;
@@ -81,7 +81,7 @@
     }
 
     /**
-     * The name of the widget.
+     * The name of the component.
      * @type {String}
      */
     Datepicker.prototype.name = 'datepicker';
diff --git a/src/ui/js/Tabs.js b/src/ui/js/Tabs.js
index 335e8915f..b1204b4ea 100644
--- a/src/ui/js/Tabs.js
+++ b/src/ui/js/Tabs.js
@@ -5,7 +5,7 @@
      * Tabs lets you create tabs for static and dynamic content.
      * @memberof ch
      * @constructor
-     * @augments ch.Widget
+     * @augments ch.Component
      * @requires ch.Expandable
      * @param {(jQuerySelector | ZeptoSelector)} $el A jQuery or Zepto Selector to create an instance of ch.Tabs.
      * @returns {tabs} Returns a new instance of Tabs.
@@ -28,7 +28,7 @@
         this._init($el, options);
 
         /**
-         * Emits the event 'ready' when the widget is ready to use.
+         * Emits the event 'ready' when the component is ready to use.
          * @event ch.Tabs#ready
          * @example
          * // Subscribe to "ready" event.
@@ -42,7 +42,7 @@
     /**
      * Inheritance
      */
-    var parent = ch.util.inherits(Tabs, ch.Widget),
+    var parent = ch.util.inherits(Tabs, ch.Component),
 
         location = window.location,
 
@@ -83,7 +83,7 @@
     }
 
     /**
-     * The name of the widget.
+     * The name of the component.
      * @type {String}
      */
     Tabs.prototype.name = 'tabs';
diff --git a/src/ui/js/Validation.js b/src/ui/js/Validation.js
index a434388fb..2ac531832 100644
--- a/src/ui/js/Validation.js
+++ b/src/ui/js/Validation.js
@@ -13,7 +13,7 @@
         var that = this;
 
         /**
-         * Is the little sign that popover showing the validation message. It's a Popover widget, so you can change it's content, width or height and change its visibility state.
+         * Is the little sign that popover showing the validation message. It's a Popover component, so you can change it's content, width or height and change its visibility state.
          * @type {Bubble}
          * @see ch.Bubble
          */
diff --git a/src/ui/js/Zoom.js b/src/ui/js/Zoom.js
index 800e85bf8..f1b3f664d 100644
--- a/src/ui/js/Zoom.js
+++ b/src/ui/js/Zoom.js
@@ -9,12 +9,12 @@
      * @requires ch.OnImagesLoads
      * @param {(jQuerySelector | ZeptoSelector)} $el A jQuery or Zepto Selector to create an instance of ch.Zoom.
      * @param {Object} [options] Options to customize an instance.
-     * @param {String} [options.addClass] CSS class names that will be added to the container on the widget initialization.
+     * @param {String} [options.addClass] CSS class names that will be added to the container on the component initialization.
      * @param {String} [options.fx] Enable or disable UI effects. You must use: "slideDown", "fadeIn" or "none". Default: "none".
      * @param {String} [options.width] Set a width for the container. Default: "300px".
      * @param {String} [options.height] Set a height for the container. Default: "300px".
      * @param {String} [options.shownby] Determines how to interact with the trigger to show the container. You must use: "pointertap", "pointerenter" or "none". Default: "pointerenter".
-     * @param {String} [options.hiddenby] Determines how to hide the widget. You must use: "button", "pointers", "pointerleave", "all" or "none". Default: "pointerleave".
+     * @param {String} [options.hiddenby] Determines how to hide the component. You must use: "button", "pointers", "pointerleave", "all" or "none". Default: "pointerleave".
      * @param {(jQuerySelector | ZeptoSelector)} [options.reference] It's a reference to position and size of element that will be considered to carry out the position. Default: the trigger element.
      * @param {String} [options.side] The side option where the target element will be positioned. Its value can be: "left", "right", "top", "bottom" or "center". Default: "right".
      * @param {String} [options.align] The align options where the target element will be positioned. Its value can be: "left", "right", "top", "bottom" or "center". Default: "top".
@@ -51,7 +51,7 @@
         this._init($el, options);
 
         /**
-         * Event emitted when the widget is ready to use.
+         * Event emitted when the component is ready to use.
          * @event ch.Zoom#ready
          * @example
          * // Subscribe to "ready" event.
@@ -66,7 +66,7 @@
     var parent = ch.util.inherits(Zoom, ch.Layer);
 
     /**
-     * The name of the widget.
+     * The name of the component.
      * @memberof! ch.Zoom.prototype
      * @type {String}
      */
@@ -439,7 +439,7 @@
      * @returns {zoom}
      * @example
      * // Load the zoomed image on demand.
-     * widget.loadImage();
+     * component.loadImage();
      */
     Zoom.prototype.loadImage = function () {
 
diff --git a/src/ui/js/shortcuts.js b/src/ui/js/shortcuts.js
index 70d390f40..af1834611 100644
--- a/src/ui/js/shortcuts.js
+++ b/src/ui/js/shortcuts.js
@@ -33,8 +33,8 @@
              * @param {Function} callback A given function.
              * @returns {Object} Retuns the ch.shortcuts.
              * @example
-             * // Add a callback to ESC key with "widget" name.
-             * ch.shortcuts.add(ch.onkeyesc, 'widget', widget.hide);
+             * // Add a callback to ESC key with "component" name.
+             * ch.shortcuts.add(ch.onkeyesc, 'component', component.hide);
              */
             'add': function (shortcut, name, callback) {
 
@@ -59,8 +59,8 @@
              * @param {Function} callback A given function.
              * @returns {Object} Retuns the ch.shortcuts.
              * @example
-             * // Remove a callback from ESC key with "widget" name.
-             * ch.shortcuts.remove(ch.onkeyesc, 'widget', widget.hide);
+             * // Remove a callback from ESC key with "component" name.
+             * ch.shortcuts.remove(ch.onkeyesc, 'component', component.hide);
              */
             'remove': function (name, shortcut, callback) {
                 var evt,
@@ -101,8 +101,8 @@
              * @param {String} name A given name from the collection.
              * @returns {Object} Retuns the ch.shortcuts.
              * @example
-             * // Turn on shortcuts associated to "widget" name.
-             * ch.shortcuts.on('widget');
+             * // Turn on shortcuts associated to "component" name.
+             * ch.shortcuts.on('component');
              */
             'on': function (name) {
                 var queueLength = this._queue.length,
@@ -126,8 +126,8 @@
              * @param {String} name A given name from the collection.
              * @returns {Object} Retuns the ch.shortcuts.
              * @example
-             * // Turn off shortcuts associated to "widget" name.
-             * ch.shortcuts.off('widget');
+             * // Turn off shortcuts associated to "component" name.
+             * ch.shortcuts.off('component');
              */
             'off': function (name) {
                 var queueLength = this._queue.length,
diff --git a/tests/autocomplete/spect.js b/tests/autocomplete/spect.js
index b30869f9e..f366f9302 100644
--- a/tests/autocomplete/spect.js
+++ b/tests/autocomplete/spect.js
@@ -226,7 +226,7 @@ describe('Its hide() method', function () {
         expect(hideEvent).toHaveBeenCalled();
     });
 
-    it('should return the same instance than initialized widget', function () {
+    it('should return the same instance than initialized component', function () {
         expect(instance).toEqual(autoComplete);
     });
 
@@ -235,7 +235,7 @@ describe('Its hide() method', function () {
 describe('Its isShown() method', function () {
     var isShown;
 
-    it('should return "true" when the widget is shown', function () {
+    it('should return "true" when the component is shown', function () {
         autoComplete._el.focus();
         autoComplete.emit('type', autoComplete._el.value);
         isShown = autoComplete.isShown();
@@ -244,7 +244,7 @@ describe('Its isShown() method', function () {
         expect(isShown).toBeTruthy();
     });
 
-    it('should return "false" when the widget is hidden', function () {
+    it('should return "false" when the component is hidden', function () {
         autoComplete.hide();
         isShown = autoComplete.isShown();
 
@@ -266,7 +266,7 @@ describe('Its disable() method', function () {
         expect(autoComplete.isShown()).toBeFalsy();
     });
 
-    it('should return the same instance than initialized widget', function () {
+    it('should return the same instance than initialized component', function () {
         expect(instance).toEqual(autoComplete);
     });
 });
@@ -282,7 +282,7 @@ describe('Its enable() method', function () {
         expect(autoComplete.isShown()).toBeTruthy();
     });
 
-    it('should return the same instance than initialized widget', function () {
+    it('should return the same instance than initialized component', function () {
         expect(instance).toEqual(autoComplete);
     });
 
diff --git a/tests/calendar/spect.js b/tests/calendar/spect.js
index 334edf539..3e0aaf1c1 100644
--- a/tests/calendar/spect.js
+++ b/tests/calendar/spect.js
@@ -238,7 +238,7 @@ describe('Its nextMonth() method', function(){
         expect(nextmonthEvent).toHaveBeenCalled();
     });
 
-    it('should return the same instance than initialized widget', function () {
+    it('should return the same instance than initialized component', function () {
         expect(instance).toEqual(calendar1);
     });
 });
@@ -260,7 +260,7 @@ describe('Its prevMonth() method', function(){
         expect(prevmonthEvent).toHaveBeenCalled();
     });
 
-    it('should return the same instance than initialized widget', function () {
+    it('should return the same instance than initialized component', function () {
         expect(instance).toEqual(calendar1);
     });
 });
@@ -282,7 +282,7 @@ describe('Its nextYear() method', function(){
         expect(nextyearEvent).toHaveBeenCalled();
     });
 
-    it('should return the same instance than initialized widget', function () {
+    it('should return the same instance than initialized component', function () {
         expect(instance).toEqual(calendar1);
     });
 });
@@ -304,7 +304,7 @@ describe('Its prevYear() method', function(){
         expect(prevyearEvent).toHaveBeenCalled();
     });
 
-    it('should return the same instance than initialized widget', function () {
+    it('should return the same instance than initialized component', function () {
         expect(instance).toEqual(calendar1);
     });
 });
@@ -340,7 +340,7 @@ describe('Its setFrom() method', function () {
         expect(function(){ calendar4.from('20/10/2012'); }).toThrow();
     });
 
-    it('should return the same instance than initialized widget', function () {
+    it('should return the same instance than initialized component', function () {
         expect(instance).toEqual(calendar1);
     });
 });
@@ -380,7 +380,7 @@ describe('Its setTo() method', function(){
         expect(function(){ calendar4.to('25/10/2012'); }).toThrow();
     });
 
-    it('should return the same instance than initialized widget', function () {
+    it('should return the same instance than initialized component', function () {
         expect(instance).toEqual(calendar1);
     });
 });
diff --git a/tests/content/spect.js b/tests/content/spect.js
index 67a3d5af9..b3424844b 100644
--- a/tests/content/spect.js
+++ b/tests/content/spect.js
@@ -8,7 +8,7 @@ describe('Content', function () {
         expect(typeof ch.Content).toEqual('function');
     });
 
-    it('should be into test widget', function () {
+    it('should be into test component', function () {
         expect(test).toBeDefined();
         expect(test.hasOwnProperty('content')).toBeTruthy();
     });
diff --git a/tests/datePicker/spect.js b/tests/datePicker/spect.js
index 294196e8b..54fb23334 100644
--- a/tests/datePicker/spect.js
+++ b/tests/datePicker/spect.js
@@ -197,7 +197,7 @@ describe('Its nextMonth() method', function(){
         expect(nextmonthEvent).toHaveBeenCalled();
     });
 
-    it('should return the same instance than initialized widget', function () {
+    it('should return the same instance than initialized component', function () {
         expect(instance).toEqual(datepicker1);
     });
 });
@@ -209,7 +209,7 @@ describe('Its prevMonth() method', function(){
         expect(prevmonthEvent).toHaveBeenCalled();
     });
 
-    it('should return the same instance than initialized widget', function () {
+    it('should return the same instance than initialized component', function () {
         expect(instance).toEqual(datepicker1);
     });
 });
@@ -221,7 +221,7 @@ describe('Its nextYear() method', function(){
         expect(nextyearEvent).toHaveBeenCalled();
     });
 
-    it('should return the same instance than initialized widget', function () {
+    it('should return the same instance than initialized component', function () {
         expect(instance).toEqual(datepicker1);
     });
 });
@@ -233,19 +233,19 @@ describe('Its prevYear() method', function(){
         expect(prevyearEvent).toHaveBeenCalled();
     });
 
-    it('should return the same instance than initialized widget', function () {
+    it('should return the same instance than initialized component', function () {
         expect(instance).toEqual(datepicker1);
     });
 });
 
 describe('Its setFrom() method', function () {
-    it('should return the same instance than initialized widget', function () {
+    it('should return the same instance than initialized component', function () {
         expect(datepicker1.setFrom(DATE.FORMAT['yyyymmdd'])).toEqual(datepicker1);
     });
 });
 
 describe('Its setTo() method', function(){
-    it('should return the same instance than initialized widget', function () {
+    it('should return the same instance than initialized component', function () {
         expect(datepicker1.setTo(DATE.TODAY.year + 1 + '/' + DATE.TODAY.month + '/' + DATE.TODAY.day)).toEqual(datepicker1);
     });
 });
diff --git a/tests/expandable/spect.js b/tests/expandable/spect.js
index eb4d703b3..88af156c9 100644
--- a/tests/expandable/spect.js
+++ b/tests/expandable/spect.js
@@ -173,7 +173,7 @@ describe('Its show() method', function () {
         expect(showEvent).toHaveBeenCalled();
     });
 
-    it('should return the same instance than initialized widget', function () {
+    it('should return the same instance than initialized component', function () {
         expect(instance).toEqual(expandable1);
     });
 });
@@ -200,7 +200,7 @@ describe('Its hide() method', function () {
         expect(showEvent).toHaveBeenCalled();
     });
 
-    it('should return the same instance than initialized widget', function () {
+    it('should return the same instance than initialized component', function () {
         expect(instance).toEqual(expandable1);
     });
 });
@@ -208,7 +208,7 @@ describe('Its hide() method', function () {
 describe('Its isShown() method', function () {
     var isShown;
 
-    it('should return "true" when the widget is shown', function () {
+    it('should return "true" when the component is shown', function () {
         expandable1.show();
         isShown = expandable1.isShown();
 
@@ -216,7 +216,7 @@ describe('Its isShown() method', function () {
         expect(isShown).toBeTruthy();
     });
 
-    it('should return "false" when the widget is hidden', function () {
+    it('should return "false" when the component is hidden', function () {
         expandable1.hide();
         isShown = expandable1.isShown();
 
@@ -236,7 +236,7 @@ describe('Its disable() method', function () {
         expect(expandable1.$trigger.hasClass('ch-expandable-trigger-on')).toBeFalsy();
     });
 
-    it('should return the same instance than initialized widget', function () {
+    it('should return the same instance than initialized component', function () {
         expect(instance).toEqual(expandable1);
     });
 });
@@ -250,7 +250,7 @@ describe('Its enable() method', function () {
         expect(expandable1.$trigger.hasClass('ch-expandable-trigger-on')).toBeTruthy();
     });
 
-    it('should return the same instance than initialized widget', function () {
+    it('should return the same instance than initialized component', function () {
         expect(instance).toEqual(expandable1);
     });
 
diff --git a/tests/factory/spect.js b/tests/factory/spect.js
index 048a8fc57..6ee7961eb 100644
--- a/tests/factory/spect.js
+++ b/tests/factory/spect.js
@@ -1,21 +1,21 @@
-var widget,
-    widget2;
+var component,
+    component2;
 
-function WidgetTest ($el, options) {
+function ComponentTest ($el, options) {
     this.$el = $el;
     this.options = options;
 
     return this;
 }
-WidgetTest.prototype.name = 'widgetTest';
-WidgetTest.prototype.constructor = WidgetTest;
+ComponentTest.prototype.name = 'componentTest';
+ComponentTest.prototype.constructor = ComponentTest;
 
-ch.factory(WidgetTest);
+ch.factory(ComponentTest);
 
 describe('Factory', function () {
 
     beforeEach(function () {
-        widget = undefined;
+        component = undefined;
     });
 
     it('should be defined', function () {
@@ -23,75 +23,75 @@ describe('Factory', function () {
         expect(typeof ch.factory).toEqual('function');
     });
 
-    it('should export \'WidgetTest\' class into ch namespace', function () {
-        expect(ch.WidgetTest).toBeDefined();
+    it('should export \'ComponentTest\' class into ch namespace', function () {
+        expect(ch.ComponentTest).toBeDefined();
     });
 
-    it('should attach \'.widgetTest()\' function property to the $ object', function () {
-        expect($.widgetTest).toBeDefined();
+    it('should attach \'.componentTest()\' function property to the $ object', function () {
+        expect($.componentTest).toBeDefined();
     });
 
-    it('should add \'.widgetTest()\' function property to the $.fn object (create a plugin)', function () {
-        expect($.fn.widgetTest).toBeDefined();
+    it('should add \'.componentTest()\' function property to the $.fn object (create a plugin)', function () {
+        expect($.fn.componentTest).toBeDefined();
     });
 
-    it('should create a new instance using new \'ch.WidgetTest\' method', function () {
-        expect(widget).not.toBeDefined();
+    it('should create a new instance using new \'ch.ComponentTest\' method', function () {
+        expect(component).not.toBeDefined();
 
         expect(function () {
-            widget = new ch.WidgetTest($('body'), {'foo': 'bar'});
+            component = new ch.ComponentTest($('body'), {'foo': 'bar'});
         }).not.toThrow();
 
-        expect(widget).toBeDefined();
+        expect(component).toBeDefined();
 
-        expect(widget instanceof WidgetTest).toBeTruthy();
+        expect(component instanceof ComponentTest).toBeTruthy();
     });
 
-    it('should create a new instance using \'$.widgetTest\' jQuery/Zepto method', function () {
-        expect(widget).not.toBeDefined();
+    it('should create a new instance using \'$.componentTest\' jQuery/Zepto method', function () {
+        expect(component).not.toBeDefined();
 
         expect(function () {
-            widget = $.widgetTest($('body'), {'foo': 'bar'});
+            component = $.componentTest($('body'), {'foo': 'bar'});
         }).not.toThrow();
 
-        expect(widget).toBeDefined();
+        expect(component).toBeDefined();
 
-        expect(widget instanceof WidgetTest).toBeTruthy();
+        expect(component instanceof ComponentTest).toBeTruthy();
     });
 
     it('should create a new instance using the jQuery/Zepto plugin', function () {
-        expect(widget).not.toBeDefined();
+        expect(component).not.toBeDefined();
 
         expect(function () {
-            widget = $('body').widgetTest({'foo': 'bar'});
+            component = $('body').componentTest({'foo': 'bar'});
         }).not.toThrow();
 
-        expect(widget).toBeDefined();
+        expect(component).toBeDefined();
 
-        expect(widget instanceof WidgetTest).toBeTruthy();
+        expect(component instanceof ComponentTest).toBeTruthy();
     });
 
     it('should create a new instance for each query selector and return a collection of instances', function () {
 
-        widget = $('body, div').widgetTest({'foo': 'bar'});
+        component = $('body, div').componentTest({'foo': 'bar'});
 
-        expect(Array.isArray(widget)).toBeTruthy();
-        expect(widget[0] instanceof WidgetTest).toBeTruthy();
-        expect(widget[0] !== widget[1]).toBeTruthy();
+        expect(Array.isArray(component)).toBeTruthy();
+        expect(component[0] instanceof ComponentTest).toBeTruthy();
+        expect(component[0] !== component[1]).toBeTruthy();
 
     });
 
     it('should return the same intance for the same DOMElement', function () {
-        widget = $('body').widgetTest({'foo': 'bar'});
-        widget2 = $('body').widgetTest({'foo': 'bar'});
+        component = $('body').componentTest({'foo': 'bar'});
+        component2 = $('body').componentTest({'foo': 'bar'});
 
-        expect(widget).toBeDefined();
-        expect(widget2).toBeDefined();
-        expect(widget).toEqual(widget2);
+        expect(component).toBeDefined();
+        expect(component2).toBeDefined();
+        expect(component).toEqual(component2);
     });
 
     it('should save the intance into the DOMElement', function () {
-        widget = $('body').widgetTest();
-        expect(widget).toEqual($('body').data('widgetTest'));
+        component = $('body').componentTest();
+        expect(component).toEqual($('body').data('componentTest'));
     });
 });
\ No newline at end of file
diff --git a/tests/form/spect.js b/tests/form/spect.js
index 10d3629f6..156a4a4b5 100644
--- a/tests/form/spect.js
+++ b/tests/form/spect.js
@@ -169,7 +169,7 @@ describe('Its clear() method', function () {
         expect(clearEvent).toHaveBeenCalled();
     });
 
-    it('should return the same instance than initialized widget', function () {
+    it('should return the same instance than initialized component', function () {
         expect(instance).toEqual(form);
     });
 });
@@ -182,7 +182,7 @@ describe('Its reset() method', function () {
         expect(resetEvent).toHaveBeenCalled();
     });
 
-    it('should return the same instance than initialized widget', function () {
+    it('should return the same instance than initialized component', function () {
         expect(instance).toEqual(form);
     });
 });
@@ -195,7 +195,7 @@ describe('Its disable() method', function () {
         expect(form.hasError()).toBeFalsy();
     });
 
-    it('should return the same instance than initialized widget', function () {
+    it('should return the same instance than initialized component', function () {
         expect(instance).toEqual(form);
     });
 });
@@ -208,7 +208,7 @@ describe('Its enable() method', function () {
         expect(form.hasError()).toBeTruthy();
     });
 
-    it('should return the same instance than initialized widget', function () {
+    it('should return the same instance than initialized component', function () {
         expect(instance).toEqual(form);
     });
 
diff --git a/tests/menu/spect.js b/tests/menu/spect.js
index a43fdbc83..0414075d4 100644
--- a/tests/menu/spect.js
+++ b/tests/menu/spect.js
@@ -135,7 +135,7 @@ describe('Its show() method', function () {
         expect(showEvent).toHaveBeenCalled();
     });
 
-    it('should return the same instance than initialized widget', function () {
+    it('should return the same instance than initialized component', function () {
         expect(instance).toEqual(menu1);
     });
 });
@@ -154,7 +154,7 @@ describe('Its hide() method', function () {
         expect(hideEvent).toHaveBeenCalled();
     });
 
-    it('should return the same instance than initialized widget', function () {
+    it('should return the same instance than initialized component', function () {
         expect(instance).toEqual(menu1);
     });
 });
@@ -180,7 +180,7 @@ describe('Its disable() method', function () {
         expect(menu1.folds[1].$trigger.hasClass('ch-expandable-trigger-on')).toBeFalsy();
     });
 
-    it('should return the same instance than initialized widget', function () {
+    it('should return the same instance than initialized component', function () {
         expect(instance).toEqual(menu1);
     });
 });
@@ -200,7 +200,7 @@ describe('Its enable() method', function () {
         expect(menu1.folds[1].$trigger.hasClass('ch-expandable-trigger-on')).toBeTruthy();
     });
 
-    it('should return the same instance than initialized widget', function () {
+    it('should return the same instance than initialized component', function () {
         expect(instance).toEqual(menu1);
         menu1.show(1);
     });
diff --git a/tests/popover/spect.js b/tests/popover/spect.js
index be926ca04..31509905a 100644
--- a/tests/popover/spect.js
+++ b/tests/popover/spect.js
@@ -183,7 +183,7 @@ describe('Its show() method', function () {
         });
     });
 
-    it('should return the same instance than initialized widget', function () {
+    it('should return the same instance than initialized component', function () {
         expect(popover1.show()).toEqual(popover1);
     });
 });
@@ -214,7 +214,7 @@ describe('Its hide() method', function () {
         expect(hideEvent).toHaveBeenCalled();
     });
 
-	it('should return the same instance than initialized widget', function () {
+	it('should return the same instance than initialized component', function () {
 		expect(popover1.hide()).toEqual(popover1);
 	});
 });
@@ -225,18 +225,18 @@ describe('Its isShown() method', function () {
         expect(typeof popover1.isShown()).toEqual('boolean');
     });
 
-    it('should return "true" when the widget is shown', function () {
+    it('should return "true" when the component is shown', function () {
         expect(popover1.show().isShown()).toBeTruthy();
     });
 
-    it('should return "false" when the widget is hidden', function () {
+    it('should return "false" when the component is hidden', function () {
         expect(popover1.hide().isShown()).toBeFalsy();
     });
 });
 
 describe('Its disable() method', function () {
 
-    it('should return the same instance than initialized widget', function () {
+    it('should return the same instance than initialized component', function () {
         expect(popover1.disable()).toEqual(popover1);
     });
 
@@ -247,7 +247,7 @@ describe('Its disable() method', function () {
 
 describe('Its enable() method', function () {
 
-    it('should return the same instance than initialized widget', function () {
+    it('should return the same instance than initialized component', function () {
         expect(popover1.enable()).toEqual(popover1);
     });
 
@@ -279,7 +279,7 @@ describe('Its width() method', function () {
             expect(popover1.width()).toEqual(w);
         });
 
-        it('should return the same instance than initialized widget', function () {
+        it('should return the same instance than initialized component', function () {
             expect(popover1.width(321)).toEqual(popover1);
         });
 	});
@@ -308,7 +308,7 @@ describe('Its height() method', function () {
             expect(popover1.height()).toEqual(h);
         });
 
-        it('should return the same instance than initialized widget', function () {
+        it('should return the same instance than initialized component', function () {
             expect(popover1.height(321)).toEqual(popover1);
         });
     });
diff --git a/tests/tabs/spect.js b/tests/tabs/spect.js
index 2aa9f5243..2dd23b74e 100644
--- a/tests/tabs/spect.js
+++ b/tests/tabs/spect.js
@@ -172,7 +172,7 @@ describe('Its show() method', function () {
         expect(showEvent).toHaveBeenCalled();
     });
 
-    it('should return the same instance than initialized widget', function () {
+    it('should return the same instance than initialized component', function () {
         expect(instance).toEqual(tabs1);
     });
 });
@@ -200,7 +200,7 @@ describe('Its disable() method', function () {
         expect(tabs1.tabpanels[1].$trigger.hasClass('ch-expandable-trigger-on')).toBeFalsy();
     });
 
-    it('should return the same instance than initialized widget', function () {
+    it('should return the same instance than initialized component', function () {
         expect(instance).toEqual(tabs1);
     });
 });
@@ -220,7 +220,7 @@ describe('Its enable() method', function () {
         expect(tabs1.tabpanels[1].$trigger.hasClass('ch-expandable-trigger-on')).toBeTruthy();
     });
 
-    it('should return the same instance than initialized widget', function () {
+    it('should return the same instance than initialized component', function () {
         expect(instance).toEqual(tabs1);
         tabs1.show(1);
     });
diff --git a/tests/validation/spect.js b/tests/validation/spect.js
index 62d53ff27..df0eb10c7 100644
--- a/tests/validation/spect.js
+++ b/tests/validation/spect.js
@@ -230,7 +230,7 @@ describe('Its clear() method', function () {
         expect(clearEvent).toHaveBeenCalled();
     });
 
-    it('should return the same instance than initialized widget', function () {
+    it('should return the same instance than initialized component', function () {
         expect(instance).toEqual(validation1);
     });
 });
@@ -267,7 +267,7 @@ describe('Its message() method', function () {
         expect(validation1.bubble.content()).toEqual(msg);
     });
 
-    it('should return the same instance than initialized widget', function () {
+    it('should return the same instance than initialized component', function () {
         expect(instance).toEqual(validation1);
     });
 });
@@ -280,7 +280,7 @@ describe('Its disable() method', function () {
         expect(validation1.hasError()).toBeFalsy();
     });
 
-    it('should return the same instance than initialized widget', function () {
+    it('should return the same instance than initialized component', function () {
         expect(instance).toEqual(validation1);
     });
 });
@@ -293,7 +293,7 @@ describe('Its enable() method', function () {
         expect(validation1.hasError()).toBeTruthy();
     });
 
-    it('should return the same instance than initialized widget', function () {
+    it('should return the same instance than initialized component', function () {
         expect(instance).toEqual(validation1);
     });
 
diff --git a/views/m-compatible.html b/views/m-compatible.html
index 781b29ac4..0a7e427e7 100644
--- a/views/m-compatible.html
+++ b/views/m-compatible.html
@@ -49,7 +49,7 @@
 			line-height: 2em;
 		}
 
-		.widgets {
+		.components {
 			border-bottom: 1px dotted #EEEEEE;
 			padding-bottom: 20px;
 			margin-bottom: 20px;
@@ -60,7 +60,7 @@
 <body>
 	<div data-page="index" role="region" aria-hidden="false">
 		<h1>Chico Mobile</h1>
-		<div class="widgets">
+		<div class="components">
 			<h2>List of components</h2>
 			<ul class="ch-list">
 				<li><a href="#headers">Headers</a></li>
@@ -101,7 +101,7 @@ <h1>Pregunta</h1>
 		</div>
 
 		<div class="ch-layout" role="main">
-			<div class="widgets">
+			<div class="components">
 				<h2 id="headings">Headings</h2>
 				<div class="ch-box-lite">
 					<h1>Header 1</h1>
@@ -113,7 +113,7 @@ <h6>Header 6</h6>
 				</div>
 			</div>
 
-			<div class="widgets">
+			<div class="components">
 				<h2 id="links">Links</h2>
 				<p><a href="http://www.mercadolibre.com">MercadoLibre</a></p>
 				<p><a href="http://www.mercadopago.com">MercadoPago</a></p>
@@ -121,7 +121,7 @@ <h2 id="links">Links</h2>
 				<p><a href="http://www.mercadoclics.com">MercadoClics</a></p>
 			</div>
 
-			<div class="widgets ch-clearfix">
+			<div class="components ch-clearfix">
 				<h2 id="buttons">Buttons</h2>
 				<div class="ch-g1-2">
 					<h3>Default Buttons</h3>
@@ -143,7 +143,7 @@ <h3>Disabled Buttons</h3>
 				</div>
 			</div>
 
-			<div class="widgets">
+			<div class="components">
 				<h2 id="boxes">Boxes</h2>
 				<div class="ch-box-container">
 					<h2>Container Box</h2>
@@ -160,7 +160,7 @@ <h2>Box</h2>
 				</div>
 			</div>
 
-			<div class="widgets">
+			<div class="components">
 				<h2 id="message-boxes">Message boxes</h2>
 				<div class="ch-box-error">Oops, something wrong happened</div>
 				<div class="ch-box-help">Do you need any help?</div>
@@ -169,7 +169,7 @@ <h2 id="message-boxes">Message boxes</h2>
 				<div class="ch-box-ok">Everything is great!</div>
 			</div>
 
-			<div class="widgets">
+			<div class="components">
 				<h2 id="big-message-boxes">Big message boxes</h2>
 				<div class="ch-box-attention">
 					<h2>Warning!</h2>
@@ -181,7 +181,7 @@ <h2>Congratulations!</h2>
 				</div>
 			</div>
 
-			<div class="widgets">
+			<div class="components">
 				<h2 id="lists">Lists</h2>
 				<h3>Unstyled</h3>
 				<ul>
@@ -211,7 +211,7 @@ <h3>Ordered</h3>
 				</ol>
 			</div>
 
-			<div class="widgets">
+			<div class="components">
 				<h2 id="list-options">List Options</h2>
 				<div>
 					<ul class="ch-list-options">
@@ -222,7 +222,7 @@ <h2 id="list-options">List Options</h2>
 				</div>
 			</div>
 
-			<div class="widgets">
+			<div class="components">
 				<h2 id="list-options-icon">List Options with icons</h2>
 				<div>
 					<ul class="ch-list-options">
@@ -251,7 +251,7 @@ <h2 id="list-options-icon">List Options with icons</h2>
 				</div>
 			</div>
 
-			<div class="widgets">
+			<div class="components">
 				<h2 id="transitions">Transitions <span class="ch-loading">Cargando...</span></h2>
 				<div class="body">
 					<div class="ch-loading-wrap">
@@ -260,13 +260,13 @@ <h2 id="transitions">Transitions <span class="ch-loading">Cargando...</span></h2
 				</div>
 			</div>
 
-			<div class="widgets">
+			<div class="components">
 				<h2 id="tags">Tags</h2>
 				<a class="ch-tag" href="#">Chico</a>
 				<a class="ch-tag" href="#">Mobile</a>
 			</div>
 
-			<div class="widgets">
+			<div class="components">
 				<h2 id="pagination">Pagination</h2>
 				<ul class="ch-pagination">
 				  <li><a type="prev" href="#">Previous</a></li>
@@ -277,7 +277,7 @@ <h2 id="pagination">Pagination</h2>
 				</ul>
 			</div>
 
-			<div class="widgets">
+			<div class="components">
 				<h2 id="tables">Tables</h2>
 				<table class="ch-datagrid" summary="Listado de cobros en MercadoPago">
 					<caption>Summary</caption>
@@ -309,7 +309,7 @@ <h2 id="tables">Tables</h2>
 			</div>
 
 
-			<div class="widgets">
+			<div class="components">
 				<h2 id="layer">Layer</h2>
 				<div class="myLayer">
 					<p><a href="#asd">It's a Layer</a></p>
@@ -321,7 +321,7 @@ <h2 id="layer">Layer</h2>
 				</div>
 			</div>
 
-			<div class="widgets">
+			<div class="components">
 				<h2 id="expandable">Expandable</h2>
 				<div class="categories">
 					<h3>Expandable</h3>
@@ -339,7 +339,7 @@ <h3>Expandable</h3>
 				</div>
 			</div>
 
-			<div class="widgets">
+			<div class="components">
 				<h2 id="menu">Menu</h2>
 				<ul class="myMenu">
 					<li>
@@ -372,7 +372,7 @@ <h3>Plain text</h3>
 				</ul>
 			</div>
 
-			<div class="widgets">
+			<div class="components">
 				<h2 id="forms">Forms</h2>
 				<form action="http://ui.ml.com:3000/test/post" class="ch-form myForm" method="POST">
 					<fieldset>
@@ -620,7 +620,7 @@ <h4 class="ch-form-subtitle">Unique checkbox:</h4>
 				</form>
 			</div>
 
-			<div class="widgets">
+			<div class="components">
 				<h2 id="icons">Icons</h2>
 				<ul class="showroomIcons">
 					<li><i class="ch-icon-search"></i> ch-icon-search</li>
diff --git a/views/mobile.html b/views/mobile.html
index 0f5bf835a..9367164fb 100644
--- a/views/mobile.html
+++ b/views/mobile.html
@@ -39,7 +39,7 @@
             line-height: 2em;
         }
 
-        .widgets {
+        .components {
             border-bottom: 1px dotted #EEEEEE;
             padding-bottom: 20px;
             margin-bottom: 20px;
@@ -77,7 +77,7 @@
 <body>
     <div data-page="index" role="region" aria-hidden="false">
         <h1>Chico Mobile</h1>
-        <div class="widgets">
+        <div class="components">
             <h2>List of components</h2>
             <ul class="ch-list">
                 <li><a href="#headers">Headers</a></li>
@@ -126,7 +126,7 @@ <h1>Pregunta</h1>
         </div>
 
         <div class="ch-layout" role="main">
-            <div class="widgets">
+            <div class="components">
                 <h2 id="headings">Headings</h2>
                 <div class="ch-box-container">
                     <h1>Header 1</h1>
@@ -138,7 +138,7 @@ <h6>Header 6</h6>
                 </div>
             </div>
 
-            <div class="widgets">
+            <div class="components">
                 <h2 id="links">Links</h2>
                 <p><a href="http://www.mercadolibre.com">MercadoLibre</a></p>
                 <p><a href="http://www.mercadopago.com">MercadoPago</a></p>
@@ -146,7 +146,7 @@ <h2 id="links">Links</h2>
                 <p><a href="http://www.mercadoclics.com">MercadoClics</a></p>
             </div>
 
-            <div class="widgets ch-clearfix">
+            <div class="components ch-clearfix">
                 <h2 id="buttons">Buttons</h2>
                 <div class="ch-g1-2">
                     <h3>Default Buttons</h3>
@@ -199,7 +199,7 @@ <h2 id="autocomplete">autocomplete</h2>
                 </form>
             </div>
 
-            <div class="widgets">
+            <div class="components">
                 <h2 id="boxes">Boxes</h2>
                 <div class="ch-box-container">
                     <h2>Container Box</h2>
@@ -241,7 +241,7 @@ <h2>Box Ok</h2>
                 </div>
             </div>
 
-            <div class="widgets">
+            <div class="components">
                 <h2 id="message-boxes">Messages boxes (with icons)</h2>
                 <div class="ch-box-icon">
                     <i class="ch-icon-truck"></i>
@@ -259,7 +259,7 @@ <h2>Warning!</h2>
                 <div class="ch-box-icon ch-box-ok"><i class="ch-icon-ok-sign"></i> Everything is great!</div>
             </div>
 
-            <div class="widgets">
+            <div class="components">
                 <h2 id="lists">Lists</h2>
                 <h3>Unstyled</h3>
                 <ul>
@@ -289,7 +289,7 @@ <h3>Ordered</h3>
                 </ol>
             </div>
 
-            <div class="widgets">
+            <div class="components">
                 <h2 id="list-options">List Options</h2>
                 <div>
                     <ul class="ch-list-options">
@@ -300,7 +300,7 @@ <h2 id="list-options">List Options</h2>
                 </div>
             </div>
 
-            <div class="widgets">
+            <div class="components">
                 <h2 id="list-options-icon">List Options with icons</h2>
                 <div>
                     <ul class="ch-list-options">
@@ -329,7 +329,7 @@ <h2 id="list-options-icon">List Options with icons</h2>
                 </div>
             </div>
 
-            <div class="widgets">
+            <div class="components">
                 <h2 id="transitions">Transitions <span class="ch-loading">Cargando...</span></h2>
                 <div class="body">
                     <div class="ch-loading-wrap">
@@ -338,13 +338,13 @@ <h2 id="transitions">Transitions <span class="ch-loading">Cargando...</span></h2
                 </div>
             </div>
 
-            <div class="widgets">
+            <div class="components">
                 <h2 id="tags">Tags</h2>
                 <a class="ch-tag" href="#">Chico</a>
                 <a class="ch-tag" href="#">Mobile</a>
             </div>
 
-            <div class="widgets">
+            <div class="components">
                 <h2 id="pagination">Pagination</h2>
                 <ul class="ch-pagination">
                   <li><a type="prev" href="#">Previous</a></li>
@@ -355,7 +355,7 @@ <h2 id="pagination">Pagination</h2>
                 </ul>
             </div>
 
-            <div class="widgets">
+            <div class="components">
                 <h2 id="tables">Tables</h2>
                 <table class="ch-datagrid" summary="Listado de cobros en MercadoPago">
                     <caption>Summary</caption>
@@ -386,7 +386,7 @@ <h2 id="tables">Tables</h2>
                 </table>
             </div>
 
-            <div class="widgets">
+            <div class="components">
                 <h2 id="expandable">Expandable</h2>
                 <ul class="ch-list-options">
                     <li><a href="#" data-categ-id="1743">Autos, Motos y Otros</a></li>
@@ -400,7 +400,7 @@ <h3 class="categories">Expandable</h3>
                 </div>
             </div>
 
-            <div class="widgets">
+            <div class="components">
                 <h2 id="menu">Menu</h2>
                 <ul class="myMenu">
                     <li>
@@ -604,7 +604,7 @@ <h2>Countdown</h2>
                 </form>
             </div>
 
-            <div class="widgets">
+            <div class="components">
                 <h2 id="forms">Forms and Validations</h2>
                 <form action="http://ui.ml.com:3000/test/post" class="ch-form myForm" method="POST">
                     <fieldset>
@@ -860,7 +860,7 @@ <h4 class="ch-form-subtitle">Unique checkbox:</h4>
                 </form>
             </div>
 
-            <div class="widgets">
+            <div class="components">
                 <h2 id="icons">Icons</h2>
                 <ul class="showroomIcons">
                     <li><i class="ch-icon-search"></i> ch-icon-search</li>