materialize-sass 1.0.0.alpha4 → 1.0.0.beta

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d663fb262bda28a9d3a301ff8b967e730b79d54befd25c33ee449c914a5209c5
-  data.tar.gz: 46a85c9259899296f1d0a55ee55cce924ebe3488b467b61e1ba677abbc481cde
+  metadata.gz: 4755204505bc3a5591234d26b238680d84484c3f938769b3f91facb5a5d07271
+  data.tar.gz: 9d78d633753c4a7dc26a2f263de490b25eae9219e00612bd27d9dd96c1230641
 SHA512:
-  metadata.gz: 5f9201a2252c0d1be8a9c886f64219ea53594a9c26c03bc542bb979c4108c9775794c6a8a4280d052faea073ff7c1c9d5a9a9a5a352afa5f183213dc3386e7ed
-  data.tar.gz: 661af14ace10a0779f7acdc0ed2c85e47e90d4713092aeaa837c80d9a9b9c5c37242940fab83234609b6a2277423c4c1f01f34031eee9c0ade6e2c745e32b643
+  metadata.gz: 2bce13964ed4bc9135583c28101ca1f1b97982a7bb1453bdcb9e056cc8bc4d69c32f28da44060387af99cfef922e536635b913e3d900b183be2258233284ceee
+  data.tar.gz: 455515535558551160a31c826d2fdec6c768b50ff59ee59cfc8e928d3eeb2ebeb17ac263d2f1eac739e61bea5f8e3ad73f9cace339b11344df1cbf1b9ee938a1

data/README.md

@@ -7,7 +7,7 @@ example: http://materialize.labs.my/
 source: https://github.com/mkhairi/materialize-rails
 
 # Notices
-This master branch now v1.0.0.alpha4
+This master branch now v1.0.0.beta
 
 Documentation for previous releases (v0.100.*) are available [this branch.](https://github.com/mkhairi/materialize-sass/tree/v0.100)
 
@@ -16,7 +16,7 @@ Documentation for previous releases (v0.100.*) are available [this branch.](http
 In your Gemfile you need to add the `materialize-sass` gem:
 
 ```ruby
-gem 'materialize-sass', '~> 1.0.0.alpha4'
+gem 'materialize-sass', '~> 1.0.0.beta'
 ```
 
 
@@ -53,7 +53,7 @@ $ rm app/assets/stylesheets/application.css
 Since materialize color scheme are declared in color.scss you should import the color.scss first. then you can override color variable just like this:
 
 ```scss
-@import "materialize/components/color";
+@import "materialize/components/color-variables";
 $primary-color: color("blue", "lighten-2") !default;
 $secondary-color: color("yellow", "base") !default;
 @import 'materialize';

data/Rakefile

@@ -32,8 +32,7 @@ namespace :javascripts do
   task :turbolinks_init do
     files =  Dir.glob('assets/javascripts/materialize/**/*.js').reject { |file| file.end_with?(".min.js") and File.file?(file) }
     files.each do |file|
-      selected_files = %w(buttons.js cards.js character_counter.js chips.js collapsible.js 
-                          dropdown.js forms.js materialbox.js scrollspy.js tabs.js tooltip.js transitions.js)
+      selected_files = %w(forms.js chips.js)
       file_name = File.basename file
       #only selected file
       if selected_files.include?(file_name)

data/assets/javascripts/materialize.js

@@ -1,5 +1,5 @@
 /*!
- * Materialize v1.0.0-alpha.4 (http://materializecss.com)
+ * Materialize v1.0.0-beta (http://materializecss.com)
  * Copyright 2014-2017 Materialize
  * MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE)
  */
@@ -1144,6 +1144,41 @@ M.initializeJqueryWrapper = function (plugin, pluginName, classRef) {
   };
 };
 
+/**
+ * Automatically initialize components
+ * @param {Element} context  DOM Element to search within for components
+ */
+M.AutoInit = function (context) {
+  // Use document.body if no context is given
+  var root = !!context ? context : document.body;
+
+  var registry = {
+    Autocomplete: root.querySelectorAll('.autocomplete:not(.no-autoinit)'),
+    Carousel: root.querySelectorAll('.carousel:not(.no-autoinit)'),
+    Chips: root.querySelectorAll('.chips:not(.no-autoinit)'),
+    Collapsible: root.querySelectorAll('.collapsible:not(.no-autoinit)'),
+    Datepicker: root.querySelectorAll('.datepicker:not(.no-autoinit)'),
+    Dropdown: root.querySelectorAll('.dropdown-trigger:not(.no-autoinit)'),
+    Materialbox: root.querySelectorAll('.materialboxed:not(.no-autoinit)'),
+    Modal: root.querySelectorAll('.modal:not(.no-autoinit)'),
+    Parallax: root.querySelectorAll('.parallax:not(.no-autoinit)'),
+    Pushpin: root.querySelectorAll('.pushpin:not(.no-autoinit)'),
+    ScrollSpy: root.querySelectorAll('.scrollspy:not(.no-autoinit)'),
+    FormSelect: root.querySelectorAll('select:not(.no-autoinit)'),
+    Sidenav: root.querySelectorAll('.sidenav:not(.no-autoinit)'),
+    Tabs: root.querySelectorAll('.tabs:not(.no-autoinit)'),
+    TapTarget: root.querySelectorAll('.tap-target:not(.no-autoinit)'),
+    Timepicker: root.querySelectorAll('.timepicker:not(.no-autoinit)'),
+    Tooltip: root.querySelectorAll('.tooltipped:not(.no-autoinit)'),
+    FloatingActionButton: root.querySelectorAll('.fixed-action-btn:not(.no-autoinit)')
+  };
+
+  for (var pluginName in registry) {
+    var plugin = M[pluginName];
+    plugin.init(registry[pluginName]);
+  }
+};
+
 /**
  * Generate approximated selector string for a jQuery object
  * @param {jQuery} obj  jQuery object to be parsed
@@ -1878,6 +1913,10 @@ $jscomp.polyfill = function (e, r, p, m) {
        */
       _this3.options = $.extend({}, Collapsible.defaults, options);
 
+      // Setup tab indices
+      _this3.$headers = _this3.$el.children('li').children('.collapsible-header');
+      _this3.$headers.attr('tabindex', 0);
+
       _this3._setupEventHandlers();
 
       // Open first active
@@ -1911,8 +1950,14 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_setupEventHandlers",
       value: function _setupEventHandlers() {
+        var _this4 = this;
+
         this._handleCollapsibleClickBound = this._handleCollapsibleClick.bind(this);
+        this._handleCollapsibleKeydownBound = this._handleCollapsibleKeydown.bind(this);
         this.el.addEventListener('click', this._handleCollapsibleClickBound);
+        this.$headers.each(function (header) {
+          header.addEventListener('keydown', _this4._handleCollapsibleKeydownBound);
+        });
       }
 
       /**
@@ -1951,6 +1996,19 @@ $jscomp.polyfill = function (e, r, p, m) {
         }
       }
 
+      /**
+       * Handle Collapsible Keydown
+       * @param {Event} e
+       */
+
+    }, {
+      key: "_handleCollapsibleKeydown",
+      value: function _handleCollapsibleKeydown(e) {
+        if (e.keyCode === 13) {
+          this._handleCollapsibleClickBound(e);
+        }
+      }
+
       /**
        * Animate in collapsible slide
        * @param {Number} index - 0th index of slide
@@ -1959,7 +2017,7 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_animateIn",
       value: function _animateIn(index) {
-        var _this4 = this;
+        var _this5 = this;
 
         var $collapsibleLi = this.$el.children('li').eq(index);
         if ($collapsibleLi.length) {
@@ -1998,8 +2056,8 @@ $jscomp.polyfill = function (e, r, p, m) {
               });
 
               // onOpenEnd callback
-              if (typeof _this4.options.onOpenEnd === 'function') {
-                _this4.options.onOpenEnd.call(_this4, $collapsibleLi[0]);
+              if (typeof _this5.options.onOpenEnd === 'function') {
+                _this5.options.onOpenEnd.call(_this5, $collapsibleLi[0]);
               }
             }
           });
@@ -2014,7 +2072,7 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_animateOut",
       value: function _animateOut(index) {
-        var _this5 = this;
+        var _this6 = this;
 
         var $collapsibleLi = this.$el.children('li').eq(index);
         if ($collapsibleLi.length) {
@@ -2037,8 +2095,8 @@ $jscomp.polyfill = function (e, r, p, m) {
               });
 
               // onCloseEnd callback
-              if (typeof _this5.options.onCloseEnd === 'function') {
-                _this5.options.onCloseEnd.call(_this5, $collapsibleLi[0]);
+              if (typeof _this6.options.onCloseEnd === 'function') {
+                _this6.options.onCloseEnd.call(_this6, $collapsibleLi[0]);
               }
             }
           });
@@ -2053,7 +2111,7 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "open",
       value: function open(index) {
-        var _this6 = this;
+        var _this7 = this;
 
         var $collapsibleLi = this.$el.children('li').eq(index);
         if ($collapsibleLi.length && !$collapsibleLi[0].classList.contains('active')) {
@@ -2069,7 +2127,7 @@ $jscomp.polyfill = function (e, r, p, m) {
             var $activeLis = this.$el.children('li.active');
             $activeLis.each(function (el) {
               var index = $collapsibleLis.index($(el));
-              _this6.close(index);
+              _this7.close(index);
             });
           }
 
@@ -2137,6 +2195,7 @@ $jscomp.polyfill = function (e, r, p, m) {
 
   var _defaults = {
     alignment: 'left',
+    autoFocus: true,
     constrainWidth: true,
     container: null,
     coverTrigger: true,
@@ -2160,19 +2219,20 @@ $jscomp.polyfill = function (e, r, p, m) {
     function Dropdown(el, options) {
       _classCallCheck(this, Dropdown);
 
-      var _this7 = _possibleConstructorReturn(this, (Dropdown.__proto__ || Object.getPrototypeOf(Dropdown)).call(this, Dropdown, el, options));
+      var _this8 = _possibleConstructorReturn(this, (Dropdown.__proto__ || Object.getPrototypeOf(Dropdown)).call(this, Dropdown, el, options));
 
-      _this7.el.M_Dropdown = _this7;
-      Dropdown._dropdowns.push(_this7);
+      _this8.el.M_Dropdown = _this8;
+      Dropdown._dropdowns.push(_this8);
 
-      _this7.id = M.getIdFromTrigger(el);
-      _this7.dropdownEl = document.getElementById(_this7.id);
-      _this7.$dropdownEl = $(_this7.dropdownEl);
+      _this8.id = M.getIdFromTrigger(el);
+      _this8.dropdownEl = document.getElementById(_this8.id);
+      _this8.$dropdownEl = $(_this8.dropdownEl);
 
       /**
        * Options for the dropdown
        * @member Dropdown#options
        * @prop {String} [alignment='left'] - Edge which the dropdown is aligned to
+       * @prop {Boolean} [autoFocus=true] - Automatically focus dropdown el for keyboard
        * @prop {Boolean} [constrainWidth=true] - Constrain width to width of the button
        * @prop {Element} container - Container element to attach dropdown to (optional)
        * @prop {Boolean} [coverTrigger=true] - Place dropdown over trigger
@@ -2185,31 +2245,44 @@ $jscomp.polyfill = function (e, r, p, m) {
        * @prop {Function} onCloseStart - Function called when dropdown starts closing
        * @prop {Function} onCloseEnd - Function called when dropdown finishes closing
        */
-      _this7.options = $.extend({}, Dropdown.defaults, options);
+      _this8.options = $.extend({}, Dropdown.defaults, options);
 
       /**
        * Describes open/close state of dropdown
        * @type {Boolean}
        */
-      _this7.isOpen = false;
+      _this8.isOpen = false;
 
-      _this7.focusedIndex = -1;
-      _this7.filterQuery = [];
+      /**
+       * Describes if dropdown content is scrollable
+       * @type {Boolean}
+       */
+      _this8.isScrollable = false;
+
+      /**
+       * Describes if touch moving on dropdown content
+       * @type {Boolean}
+       */
+      _this8.isTouchMoving = false;
+
+      _this8.focusedIndex = -1;
+      _this8.filterQuery = [];
 
       // Move dropdown-content after dropdown-trigger
-      if (!!_this7.options.container) {
-        $(_this7.options.container).append(_this7.dropdownEl);
+      if (!!_this8.options.container) {
+        $(_this8.options.container).append(_this8.dropdownEl);
       } else {
-        _this7.$el.after(_this7.dropdownEl);
+        _this8.$el.after(_this8.dropdownEl);
       }
 
-      _this7._makeDropdownFocusable();
-      _this7._resetFilterQueryBound = _this7._resetFilterQuery.bind(_this7);
-      _this7._handleDocumentClickBound = _this7._handleDocumentClick.bind(_this7);
-      _this7._handleDropdownKeydownBound = _this7._handleDropdownKeydown.bind(_this7);
-      _this7._handleTriggerKeydownBound = _this7._handleTriggerKeydown.bind(_this7);
-      _this7._setupEventHandlers();
-      return _this7;
+      _this8._makeDropdownFocusable();
+      _this8._resetFilterQueryBound = _this8._resetFilterQuery.bind(_this8);
+      _this8._handleDocumentClickBound = _this8._handleDocumentClick.bind(_this8);
+      _this8._handleDocumentTouchmoveBound = _this8._handleDocumentTouchmove.bind(_this8);
+      _this8._handleDropdownKeydownBound = _this8._handleDropdownKeydown.bind(_this8);
+      _this8._handleTriggerKeydownBound = _this8._handleTriggerKeydown.bind(_this8);
+      _this8._setupEventHandlers();
+      return _this8;
     }
 
     _createClass(Dropdown, [{
@@ -2275,6 +2348,7 @@ $jscomp.polyfill = function (e, r, p, m) {
         // Use capture phase event handler to prevent click
         document.body.addEventListener('click', this._handleDocumentClickBound, true);
         document.body.addEventListener('touchend', this._handleDocumentClickBound);
+        document.body.addEventListener('touchmove', this._handleDocumentTouchmoveBound);
         this.dropdownEl.addEventListener('keydown', this._handleDropdownKeydownBound);
       }
     }, {
@@ -2283,6 +2357,7 @@ $jscomp.polyfill = function (e, r, p, m) {
         // Use capture phase event handler to prevent click
         document.body.removeEventListener('click', this._handleDocumentClickBound, true);
         document.body.removeEventListener('touchend', this._handleDocumentClickBound);
+        document.body.removeEventListener('touchmove', this._handleDocumentTouchmoveBound);
         this.dropdownEl.removeEventListener('keydown', this._handleDropdownKeydownBound);
       }
     }, {
@@ -2316,18 +2391,20 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_handleDocumentClick",
       value: function _handleDocumentClick(e) {
-        var _this8 = this;
+        var _this9 = this;
 
         var $target = $(e.target);
-        if (this.options.closeOnClick && $target.closest('.dropdown-content').length) {
+        if (this.options.closeOnClick && $target.closest('.dropdown-content').length && !this.isTouchMoving) {
+          // isTouchMoving to check if scrolling on mobile.
           setTimeout(function () {
-            _this8.close();
+            _this9.close();
           }, 0);
         } else if ($target.closest('.dropdown-trigger').length || !$target.closest('.dropdown-content').length) {
           setTimeout(function () {
-            _this8.close();
+            _this9.close();
           }, 0);
         }
+        this.isTouchMoving = false;
       }
     }, {
       key: "_handleTriggerKeydown",
@@ -2339,6 +2416,20 @@ $jscomp.polyfill = function (e, r, p, m) {
         }
       }
 
+      /**
+       * Handle Document Touchmove
+       * @param {Event} e
+       */
+
+    }, {
+      key: "_handleDocumentTouchmove",
+      value: function _handleDocumentTouchmove(e) {
+        var $target = $(e.target);
+        if ($target.closest('.dropdown-content').length) {
+          this.isTouchMoving = true;
+        }
+      }
+
       /**
        * Handle Dropdown Keydown
        * @param {Event} e
@@ -2355,8 +2446,21 @@ $jscomp.polyfill = function (e, r, p, m) {
         } else if ((e.which === M.keys.ARROW_DOWN || e.which === M.keys.ARROW_UP) && this.isOpen) {
           e.preventDefault();
           var direction = e.which === M.keys.ARROW_DOWN ? 1 : -1;
-          this.focusedIndex = Math.max(Math.min(this.focusedIndex + direction, this.dropdownEl.children.length - 1), 0);
-          this._focusFocusedItem();
+          var newFocusedIndex = this.focusedIndex;
+          var foundNewIndex = false;
+          do {
+            newFocusedIndex = newFocusedIndex + direction;
+
+            if (!!this.dropdownEl.children[newFocusedIndex] && this.dropdownEl.children[newFocusedIndex].tabIndex !== -1) {
+              foundNewIndex = true;
+              break;
+            }
+          } while (newFocusedIndex < this.dropdownEl.children.length && newFocusedIndex >= 0);
+
+          if (foundNewIndex) {
+            this.focusedIndex = newFocusedIndex;
+            this._focusFocusedItem();
+          }
 
           // ENTER selects choice on focused item
         } else if (e.which === M.keys.ENTER && this.isOpen) {
@@ -2419,16 +2523,20 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_makeDropdownFocusable",
       value: function _makeDropdownFocusable() {
-        if (this.dropdownEl.tabIndex === -1) {
-          this.dropdownEl.tabIndex = 0;
-        }
+        // Needed for arrow key navigation
+        this.dropdownEl.tabIndex = 0;
 
-        $(this.dropdownEl).children().attr('tabindex', 0);
+        // Only set tabindex if it hasn't been set by user
+        $(this.dropdownEl).children().each(function (el) {
+          if (!el.getAttribute('tabindex')) {
+            el.setAttribute('tabindex', 0);
+          }
+        });
       }
     }, {
       key: "_focusFocusedItem",
       value: function _focusFocusedItem() {
-        if (this.focusedIndex >= 0 && this.focusedIndex < this.dropdownEl.children.length) {
+        if (this.focusedIndex >= 0 && this.focusedIndex < this.dropdownEl.children.length && this.options.autoFocus) {
           this.dropdownEl.children[this.focusedIndex].focus();
         }
       }
@@ -2458,10 +2566,16 @@ $jscomp.polyfill = function (e, r, p, m) {
         var verticalAlignment = 'top';
         var horizontalAlignment = this.options.alignment;
         idealYPos += this.options.coverTrigger ? 0 : triggerBRect.height;
+
+        // Reset isScrollable
+        this.isScrollable = false;
+
         if (!alignments.top) {
           if (alignments.bottom) {
             verticalAlignment = 'bottom';
           } else {
+            this.isScrollable = true;
+
             // Determine which side has most space and cutoff at correct height
             if (alignments.spaceOnTop > alignments.spaceOnBottom) {
               verticalAlignment = 'bottom';
@@ -2513,15 +2627,8 @@ $jscomp.polyfill = function (e, r, p, m) {
 
     }, {
       key: "_animateIn",
-      value: function _animateIn(positionInfo) {
-        var _this9 = this;
-
-        // Place dropdown
-        this.dropdownEl.style.left = positionInfo.x + 'px';
-        this.dropdownEl.style.top = positionInfo.y + 'px';
-        this.dropdownEl.style.height = positionInfo.height + 'px';
-        this.dropdownEl.style.width = positionInfo.width + 'px';
-        this.dropdownEl.style.transformOrigin = (positionInfo.horizontalAlignment === 'left' ? '0' : '100%') + " " + (positionInfo.verticalAlignment === 'top' ? '0' : '100%');
+      value: function _animateIn() {
+        var _this10 = this;
 
         anim.remove(this.dropdownEl);
         anim({
@@ -2535,12 +2642,14 @@ $jscomp.polyfill = function (e, r, p, m) {
           duration: this.options.inDuration,
           easing: 'easeOutQuint',
           complete: function (anim) {
-            _this9.dropdownEl.focus();
+            if (_this10.options.autoFocus) {
+              _this10.dropdownEl.focus();
+            }
 
             // onOpenEnd callback
-            if (typeof _this9.options.onOpenEnd === 'function') {
+            if (typeof _this10.options.onOpenEnd === 'function') {
               var elem = anim.animatables[0].target;
-              _this9.options.onOpenEnd.call(elem, _this9.el);
+              _this10.options.onOpenEnd.call(elem, _this10.el);
             }
           }
         });
@@ -2553,7 +2662,7 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_animateOut",
       value: function _animateOut() {
-        var _this10 = this;
+        var _this11 = this;
 
         anim.remove(this.dropdownEl);
         anim({
@@ -2567,17 +2676,36 @@ $jscomp.polyfill = function (e, r, p, m) {
           duration: this.options.outDuration,
           easing: 'easeOutQuint',
           complete: function (anim) {
-            _this10._resetDropdownStyles();
+            _this11._resetDropdownStyles();
 
             // onCloseEnd callback
-            if (typeof _this10.options.onCloseEnd === 'function') {
+            if (typeof _this11.options.onCloseEnd === 'function') {
               var elem = anim.animatables[0].target;
-              _this10.options.onCloseEnd.call(_this10, _this10.el);
+              _this11.options.onCloseEnd.call(_this11, _this11.el);
             }
           }
         });
       }
 
+      /**
+       * Place dropdown
+       */
+
+    }, {
+      key: "_placeDropdown",
+      value: function _placeDropdown() {
+        // Set width before calculating positionInfo
+        var idealWidth = this.options.constrainWidth ? this.el.getBoundingClientRect().width : this.dropdownEl.getBoundingClientRect().width;
+        this.dropdownEl.style.width = idealWidth + 'px';
+
+        var positionInfo = this._getDropdownPosition();
+        this.dropdownEl.style.left = positionInfo.x + 'px';
+        this.dropdownEl.style.top = positionInfo.y + 'px';
+        this.dropdownEl.style.height = positionInfo.height + 'px';
+        this.dropdownEl.style.width = positionInfo.width + 'px';
+        this.dropdownEl.style.transformOrigin = (positionInfo.horizontalAlignment === 'left' ? '0' : '100%') + " " + (positionInfo.verticalAlignment === 'top' ? '0' : '100%');
+      }
+
       /**
        * Open Dropdown
        */
@@ -2599,12 +2727,8 @@ $jscomp.polyfill = function (e, r, p, m) {
         this._resetDropdownStyles();
         this.dropdownEl.style.display = 'block';
 
-        // Set width before calculating positionInfo
-        var idealWidth = this.options.constrainWidth ? this.el.getBoundingClientRect().width : this.dropdownEl.getBoundingClientRect().width;
-        this.dropdownEl.style.width = idealWidth + 'px';
-
-        var positionInfo = this._getDropdownPosition();
-        this._animateIn(positionInfo);
+        this._placeDropdown();
+        this._animateIn();
         this._setupTemporaryEventHandlers();
       }
 
@@ -2628,7 +2752,29 @@ $jscomp.polyfill = function (e, r, p, m) {
 
         this._animateOut();
         this._removeTemporaryEventHandlers();
-        this.el.focus();
+
+        if (this.options.autoFocus) {
+          this.el.focus();
+        }
+      }
+
+      /**
+       * Recalculate dimensions
+       */
+
+    }, {
+      key: "recalculateDimensions",
+      value: function recalculateDimensions() {
+        if (this.isOpen) {
+          this.$dropdownEl.css({
+            width: '',
+            height: '',
+            left: '',
+            top: '',
+            'transform-origin': ''
+          });
+          this._placeDropdown();
+        }
       }
     }], [{
       key: "init",
@@ -2681,6 +2827,7 @@ $jscomp.polyfill = function (e, r, p, m) {
     onOpenEnd: null,
     onCloseStart: null,
     onCloseEnd: null,
+    preventScrolling: true,
     dismissible: true,
     startingTop: '4%',
     endingTop: '10%'
@@ -2703,9 +2850,9 @@ $jscomp.polyfill = function (e, r, p, m) {
     function Modal(el, options) {
       _classCallCheck(this, Modal);
 
-      var _this11 = _possibleConstructorReturn(this, (Modal.__proto__ || Object.getPrototypeOf(Modal)).call(this, Modal, el, options));
+      var _this12 = _possibleConstructorReturn(this, (Modal.__proto__ || Object.getPrototypeOf(Modal)).call(this, Modal, el, options));
 
-      _this11.el.M_Modal = _this11;
+      _this12.el.M_Modal = _this12;
 
       /**
        * Options for the modal
@@ -2721,21 +2868,22 @@ $jscomp.polyfill = function (e, r, p, m) {
        * @prop {String} [startingTop='4%'] - startingTop
        * @prop {String} [endingTop='10%'] - endingTop
        */
-      _this11.options = $.extend({}, Modal.defaults, options);
+      _this12.options = $.extend({}, Modal.defaults, options);
 
       /**
        * Describes open/close state of modal
        * @type {Boolean}
        */
-      _this11.isOpen = false;
+      _this12.isOpen = false;
 
-      _this11.id = _this11.$el.attr('id');
-      _this11._openingTrigger = undefined;
-      _this11.$overlay = $('<div class="modal-overlay"></div>');
+      _this12.id = _this12.$el.attr('id');
+      _this12._openingTrigger = undefined;
+      _this12.$overlay = $('<div class="modal-overlay"></div>');
+      _this12.el.tabIndex = 0;
 
       Modal._count++;
-      _this11._setupEventHandlers();
-      return _this11;
+      _this12._setupEventHandlers();
+      return _this12;
     }
 
     _createClass(Modal, [{
@@ -2843,6 +2991,19 @@ $jscomp.polyfill = function (e, r, p, m) {
         }
       }
 
+      /**
+       * Handle Focus
+       * @param {Event} e
+       */
+
+    }, {
+      key: "_handleFocus",
+      value: function _handleFocus(e) {
+        if (!this.el.contains(e.target)) {
+          this.el.focus();
+        }
+      }
+
       /**
        * Animate in modal
        */
@@ -2850,7 +3011,7 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_animateIn",
       value: function _animateIn() {
-        var _this12 = this;
+        var _this13 = this;
 
         // Set initial styles
         $.extend(this.el.style, {
@@ -2877,8 +3038,8 @@ $jscomp.polyfill = function (e, r, p, m) {
           easing: 'easeOutCubic',
           // Handle modal onOpenEnd callback
           complete: function () {
-            if (typeof _this12.options.onOpenEnd === 'function') {
-              _this12.options.onOpenEnd.call(_this12, _this12.el, _this12._openingTrigger);
+            if (typeof _this13.options.onOpenEnd === 'function') {
+              _this13.options.onOpenEnd.call(_this13, _this13.el, _this13._openingTrigger);
             }
           }
         };
@@ -2910,7 +3071,7 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_animateOut",
       value: function _animateOut() {
-        var _this13 = this;
+        var _this14 = this;
 
         // Animate overlay
         anim({
@@ -2927,12 +3088,12 @@ $jscomp.polyfill = function (e, r, p, m) {
           easing: 'easeOutCubic',
           // Handle modal ready callback
           complete: function () {
-            _this13.el.style.display = 'none';
-            _this13.$overlay.remove();
+            _this14.el.style.display = 'none';
+            _this14.$overlay.remove();
 
             // Call onCloseEnd callback
-            if (typeof _this13.options.onCloseEnd === 'function') {
-              _this13.options.onCloseEnd.call(_this13, _this13.el);
+            if (typeof _this14.options.onCloseEnd === 'function') {
+              _this14.options.onCloseEnd.call(_this14, _this14.el);
             }
           }
         };
@@ -2984,18 +3145,27 @@ $jscomp.polyfill = function (e, r, p, m) {
           this.options.onOpenStart.call(this, this.el, this._openingTrigger);
         }
 
-        document.body.style.overflow = 'hidden';
+        if (this.options.preventScrolling) {
+          document.body.style.overflow = 'hidden';
+        }
+
         this.el.classList.add('open');
         this.el.insertAdjacentElement('afterend', this.$overlay[0]);
 
         if (this.options.dismissible) {
           this._handleKeydownBound = this._handleKeydown.bind(this);
+          this._handleFocusBound = this._handleFocus.bind(this);
           document.addEventListener('keydown', this._handleKeydownBound);
+          document.addEventListener('focus', this._handleFocusBound, true);
         }
 
         anim.remove(this.el);
         anim.remove(this.$overlay[0]);
         this._animateIn();
+
+        // Focus modal
+        this.el.focus();
+
         return this;
       }
 
@@ -3027,6 +3197,7 @@ $jscomp.polyfill = function (e, r, p, m) {
 
         if (this.options.dismissible) {
           document.removeEventListener('keydown', this._handleKeydownBound);
+          document.removeEventListener('focus', this._handleFocusBound);
         }
 
         anim.remove(this.el);
@@ -3109,9 +3280,9 @@ $jscomp.polyfill = function (e, r, p, m) {
     function Materialbox(el, options) {
       _classCallCheck(this, Materialbox);
 
-      var _this14 = _possibleConstructorReturn(this, (Materialbox.__proto__ || Object.getPrototypeOf(Materialbox)).call(this, Materialbox, el, options));
+      var _this15 = _possibleConstructorReturn(this, (Materialbox.__proto__ || Object.getPrototypeOf(Materialbox)).call(this, Materialbox, el, options));
 
-      _this14.el.M_Materialbox = _this14;
+      _this15.el.M_Materialbox = _this15;
 
       /**
        * Options for the modal
@@ -3123,22 +3294,22 @@ $jscomp.polyfill = function (e, r, p, m) {
        * @prop {Function} onCloseStart - Callback function called before materialbox is closed
        * @prop {Function} onCloseEnd - Callback function called after materialbox is closed
        */
-      _this14.options = $.extend({}, Materialbox.defaults, options);
+      _this15.options = $.extend({}, Materialbox.defaults, options);
 
-      _this14.overlayActive = false;
-      _this14.doneAnimating = true;
-      _this14.placeholder = $('<div></div>').addClass('material-placeholder');
-      _this14.originalWidth = 0;
-      _this14.originalHeight = 0;
-      _this14.originInlineStyles = _this14.$el.attr('style');
-      _this14.caption = _this14.el.getAttribute('data-caption') || "";
+      _this15.overlayActive = false;
+      _this15.doneAnimating = true;
+      _this15.placeholder = $('<div></div>').addClass('material-placeholder');
+      _this15.originalWidth = 0;
+      _this15.originalHeight = 0;
+      _this15.originInlineStyles = _this15.$el.attr('style');
+      _this15.caption = _this15.el.getAttribute('data-caption') || "";
 
       // Wrap
-      _this14.$el.before(_this14.placeholder);
-      _this14.placeholder.append(_this14.$el);
+      _this15.$el.before(_this15.placeholder);
+      _this15.placeholder.append(_this15.$el);
 
-      _this14._setupEventHandlers();
-      return _this14;
+      _this15._setupEventHandlers();
+      return _this15;
     }
 
     _createClass(Materialbox, [{
@@ -3258,7 +3429,7 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_animateImageIn",
       value: function _animateImageIn() {
-        var _this15 = this;
+        var _this16 = this;
 
         var animOptions = {
           targets: this.el,
@@ -3269,11 +3440,11 @@ $jscomp.polyfill = function (e, r, p, m) {
           duration: this.options.inDuration,
           easing: 'easeOutQuad',
           complete: function () {
-            _this15.doneAnimating = true;
+            _this16.doneAnimating = true;
 
             // onOpenEnd callback
-            if (typeof _this15.options.onOpenEnd === 'function') {
-              _this15.options.onOpenEnd.call(_this15, _this15.el);
+            if (typeof _this16.options.onOpenEnd === 'function') {
+              _this16.options.onOpenEnd.call(_this16, _this16.el);
             }
           }
         };
@@ -3298,7 +3469,7 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_animateImageOut",
       value: function _animateImageOut() {
-        var _this16 = this;
+        var _this17 = this;
 
         var animOptions = {
           targets: this.el,
@@ -3309,7 +3480,7 @@ $jscomp.polyfill = function (e, r, p, m) {
           duration: this.options.outDuration,
           easing: 'easeOutQuad',
           complete: function () {
-            _this16.placeholder.css({
+            _this17.placeholder.css({
               height: '',
               width: '',
               position: '',
@@ -3318,28 +3489,28 @@ $jscomp.polyfill = function (e, r, p, m) {
             });
 
             // Revert to width or height attribute
-            if (_this16.attrWidth) {
-              _this16.$el.attr('width', _this16.attrWidth);
+            if (_this17.attrWidth) {
+              _this17.$el.attr('width', _this17.attrWidth);
             }
-            if (_this16.attrHeight) {
-              _this16.$el.attr('height', _this16.attrHeight);
+            if (_this17.attrHeight) {
+              _this17.$el.attr('height', _this17.attrHeight);
             }
 
-            _this16.$el.removeAttr('style');
-            _this16.$el.attr('style', _this16.originInlineStyles);
+            _this17.$el.removeAttr('style');
+            _this17.$el.attr('style', _this17.originInlineStyles);
 
             // Remove class
-            _this16.$el.removeClass('active');
-            _this16.doneAnimating = true;
+            _this17.$el.removeClass('active');
+            _this17.doneAnimating = true;
 
             // Remove overflow overrides on ancestors
-            if (_this16.ancestorsChanged.length) {
-              _this16.ancestorsChanged.css('overflow', '');
+            if (_this17.ancestorsChanged.length) {
+              _this17.ancestorsChanged.css('overflow', '');
             }
 
             // onCloseEnd callback
-            if (typeof _this16.options.onCloseEnd === 'function') {
-              _this16.options.onCloseEnd.call(_this16, _this16.el);
+            if (typeof _this17.options.onCloseEnd === 'function') {
+              _this17.options.onCloseEnd.call(_this17, _this17.el);
             }
           }
         };
@@ -3366,7 +3537,7 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "open",
       value: function open() {
-        var _this17 = this;
+        var _this18 = this;
 
         this._updateVars();
         this.originalWidth = this.el.getBoundingClientRect().width;
@@ -3416,8 +3587,8 @@ $jscomp.polyfill = function (e, r, p, m) {
         this.$overlay = $('<div id="materialbox-overlay"></div>').css({
           opacity: 0
         }).one('click', function () {
-          if (_this17.doneAnimating) {
-            _this17.close();
+          if (_this18.doneAnimating) {
+            _this18.close();
           }
         });
 
@@ -3498,7 +3669,7 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "close",
       value: function close() {
-        var _this18 = this;
+        var _this19 = this;
 
         this._updateVars();
         this.doneAnimating = false;
@@ -3526,8 +3697,8 @@ $jscomp.polyfill = function (e, r, p, m) {
           duration: this.options.outDuration,
           easing: 'easeOutQuad',
           complete: function () {
-            _this18.overlayActive = false;
-            _this18.$overlay.remove();
+            _this19.overlayActive = false;
+            _this19.$overlay.remove();
           }
         });
 
@@ -3541,7 +3712,7 @@ $jscomp.polyfill = function (e, r, p, m) {
             duration: this.options.outDuration,
             easing: 'easeOutQuad',
             complete: function () {
-              _this18.$photoCaption.remove();
+              _this19.$photoCaption.remove();
             }
           });
         }
@@ -3591,30 +3762,30 @@ $jscomp.polyfill = function (e, r, p, m) {
     function Parallax(el, options) {
       _classCallCheck(this, Parallax);
 
-      var _this19 = _possibleConstructorReturn(this, (Parallax.__proto__ || Object.getPrototypeOf(Parallax)).call(this, Parallax, el, options));
+      var _this20 = _possibleConstructorReturn(this, (Parallax.__proto__ || Object.getPrototypeOf(Parallax)).call(this, Parallax, el, options));
 
-      _this19.el.M_Parallax = _this19;
+      _this20.el.M_Parallax = _this20;
 
       /**
        * Options for the Parallax
        * @member Parallax#options
        * @prop {Number} responsiveThreshold
        */
-      _this19.options = $.extend({}, Parallax.defaults, options);
-      _this19._enabled = window.innerWidth > _this19.options.responsiveThreshold;
+      _this20.options = $.extend({}, Parallax.defaults, options);
+      _this20._enabled = window.innerWidth > _this20.options.responsiveThreshold;
 
-      _this19.$img = _this19.$el.find('img').first();
-      _this19.$img.each(function () {
+      _this20.$img = _this20.$el.find('img').first();
+      _this20.$img.each(function () {
         var el = this;
         if (el.complete) $(el).trigger("load");
       });
 
-      _this19._updateParallax();
-      _this19._setupEventHandlers();
-      _this19._setupStyles();
+      _this20._updateParallax();
+      _this20._setupEventHandlers();
+      _this20._setupStyles();
 
-      Parallax._parallaxes.push(_this19);
-      return _this19;
+      Parallax._parallaxes.push(_this20);
+      return _this20;
     }
 
     _createClass(Parallax, [{
@@ -3768,9 +3939,9 @@ $jscomp.polyfill = function (e, r, p, m) {
     function Tabs(el, options) {
       _classCallCheck(this, Tabs);
 
-      var _this20 = _possibleConstructorReturn(this, (Tabs.__proto__ || Object.getPrototypeOf(Tabs)).call(this, Tabs, el, options));
+      var _this21 = _possibleConstructorReturn(this, (Tabs.__proto__ || Object.getPrototypeOf(Tabs)).call(this, Tabs, el, options));
 
-      _this20.el.M_Tabs = _this20;
+      _this21.el.M_Tabs = _this21;
 
       /**
        * Options for the Tabs
@@ -3780,23 +3951,23 @@ $jscomp.polyfill = function (e, r, p, m) {
        * @prop {Boolean} swipeable
        * @prop {Number} responsiveThreshold
        */
-      _this20.options = $.extend({}, Tabs.defaults, options);
+      _this21.options = $.extend({}, Tabs.defaults, options);
 
       // Setup
-      _this20.$tabLinks = _this20.$el.children('li.tab').children('a');
-      _this20.index = 0;
-      _this20._setTabsAndTabWidth();
-      _this20._setupActiveTabLink();
-      _this20._createIndicator();
-
-      if (_this20.options.swipeable) {
-        _this20._setupSwipeableTabs();
+      _this21.$tabLinks = _this21.$el.children('li.tab').children('a');
+      _this21.index = 0;
+      _this21._setTabsAndTabWidth();
+      _this21._setupActiveTabLink();
+      _this21._createIndicator();
+
+      if (_this21.options.swipeable) {
+        _this21._setupSwipeableTabs();
       } else {
-        _this20._setupNormalTabs();
+        _this21._setupNormalTabs();
       }
 
-      _this20._setupEventHandlers();
-      return _this20;
+      _this21._setupEventHandlers();
+      return _this21;
     }
 
     _createClass(Tabs, [{
@@ -3867,7 +4038,7 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_handleTabClick",
       value: function _handleTabClick(e) {
-        var _this21 = this;
+        var _this22 = this;
 
         var tab = $(e.target).closest('li.tab');
         var tabLink = $(e.target).closest('a');
@@ -3907,8 +4078,8 @@ $jscomp.polyfill = function (e, r, p, m) {
         if (this.options.swipeable) {
           if (this._tabsCarousel) {
             this._tabsCarousel.set(this.index, function () {
-              if (typeof _this21.options.onShow === "function") {
-                _this21.options.onShow.call(_this21, _this21.$content[0]);
+              if (typeof _this22.options.onShow === "function") {
+                _this22.options.onShow.call(_this22, _this22.$content[0]);
               }
             });
           }
@@ -3941,7 +4112,7 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_createIndicator",
       value: function _createIndicator() {
-        var _this22 = this;
+        var _this23 = this;
 
         var indicator = document.createElement('li');
         indicator.classList.add('indicator');
@@ -3950,8 +4121,8 @@ $jscomp.polyfill = function (e, r, p, m) {
         this._indicator = indicator;
 
         setTimeout(function () {
-          _this22._indicator.style.left = _this22._calcLeftPos(_this22.$activeTabLink) + 'px';
-          _this22._indicator.style.right = _this22._calcRightPos(_this22.$activeTabLink) + 'px';
+          _this23._indicator.style.left = _this23._calcLeftPos(_this23.$activeTabLink) + 'px';
+          _this23._indicator.style.right = _this23._calcRightPos(_this23.$activeTabLink) + 'px';
         }, 0);
       }
 
@@ -3991,7 +4162,7 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_setupSwipeableTabs",
       value: function _setupSwipeableTabs() {
-        var _this23 = this;
+        var _this24 = this;
 
         // Change swipeable according to responsive threshold
         if (window.innerWidth > this.options.responsiveThreshold) {
@@ -4010,21 +4181,27 @@ $jscomp.polyfill = function (e, r, p, m) {
         $tabsWrapper.append($tabsContent);
         $tabsContent[0].style.display = '';
 
+        // Keep active tab index to set initial carousel slide
+        var activeTabIndex = this.$activeTabLink.closest('.tab').index();
+
         this._tabsCarousel = M.Carousel.init($tabsWrapper[0], {
           fullWidth: true,
           noWrap: true,
           onCycleTo: function (item) {
-            var prevIndex = _this23.index;
-            _this23.index = $(item).index();
-            _this23.$activeTabLink.removeClass('active');
-            _this23.$activeTabLink = _this23.$tabLinks.eq(_this23.index);
-            _this23.$activeTabLink.addClass('active');
-            _this23._animateIndicator(prevIndex);
-            if (typeof _this23.options.onShow === "function") {
-              _this23.options.onShow.call(_this23, _this23.$content[0]);
+            var prevIndex = _this24.index;
+            _this24.index = $(item).index();
+            _this24.$activeTabLink.removeClass('active');
+            _this24.$activeTabLink = _this24.$tabLinks.eq(_this24.index);
+            _this24.$activeTabLink.addClass('active');
+            _this24._animateIndicator(prevIndex);
+            if (typeof _this24.options.onShow === "function") {
+              _this24.options.onShow.call(_this24, _this24.$content[0]);
             }
           }
         });
+
+        // Set initial carousel slide to active tab
+        this._tabsCarousel.set(activeTabIndex);
       }
 
       /**
@@ -4227,16 +4404,17 @@ $jscomp.polyfill = function (e, r, p, m) {
     function Tooltip(el, options) {
       _classCallCheck(this, Tooltip);
 
-      var _this24 = _possibleConstructorReturn(this, (Tooltip.__proto__ || Object.getPrototypeOf(Tooltip)).call(this, Tooltip, el, options));
+      var _this25 = _possibleConstructorReturn(this, (Tooltip.__proto__ || Object.getPrototypeOf(Tooltip)).call(this, Tooltip, el, options));
 
-      _this24.el.M_Tooltip = _this24;
-      _this24.options = $.extend({}, Tooltip.defaults, options);
+      _this25.el.M_Tooltip = _this25;
+      _this25.options = $.extend({}, Tooltip.defaults, options);
 
-      _this24.isOpen = false;
-      _this24.isHovered = false;
-      _this24._appendTooltipEl();
-      _this24._setupEventHandlers();
-      return _this24;
+      _this25.isOpen = false;
+      _this25.isHovered = false;
+      _this25.isFocused = false;
+      _this25._appendTooltipEl();
+      _this25._setupEventHandlers();
+      return _this25;
     }
 
     _createClass(Tooltip, [{
@@ -4249,7 +4427,7 @@ $jscomp.polyfill = function (e, r, p, m) {
       value: function destroy() {
         $(this.tooltipEl).remove();
         this._removeEventHandlers();
-        this.$el[0].M_Tooltip = undefined;
+        this.el.M_Tooltip = undefined;
       }
     }, {
       key: "_appendTooltipEl",
@@ -4272,16 +4450,22 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_setupEventHandlers",
       value: function _setupEventHandlers() {
-        this.handleMouseEnterBound = this._handleMouseEnter.bind(this);
-        this.handleMouseLeaveBound = this._handleMouseLeave.bind(this);
-        this.$el[0].addEventListener('mouseenter', this.handleMouseEnterBound);
-        this.$el[0].addEventListener('mouseleave', this.handleMouseLeaveBound);
+        this._handleMouseEnterBound = this._handleMouseEnter.bind(this);
+        this._handleMouseLeaveBound = this._handleMouseLeave.bind(this);
+        this._handleFocusBound = this._handleFocus.bind(this);
+        this._handleBlurBound = this._handleBlur.bind(this);
+        this.el.addEventListener('mouseenter', this._handleMouseEnterBound);
+        this.el.addEventListener('mouseleave', this._handleMouseLeaveBound);
+        this.el.addEventListener('focus', this._handleFocusBound, true);
+        this.el.addEventListener('blur', this._handleBlurBound, true);
       }
     }, {
       key: "_removeEventHandlers",
       value: function _removeEventHandlers() {
-        this.$el[0].removeEventListener('mouseenter', this.handleMouseEnterBound);
-        this.$el[0].removeEventListener('mouseleave', this.handleMouseLeaveBound);
+        this.el.removeEventListener('mouseenter', this._handleMouseEnterBound);
+        this.el.removeEventListener('mouseleave', this._handleMouseLeaveBound);
+        this.el.removeEventListener('focus', this._handleFocusBound, true);
+        this.el.removeEventListener('blur', this._handleBlurBound, true);
       }
     }, {
       key: "open",
@@ -4314,16 +4498,16 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_setExitDelayTimeout",
       value: function _setExitDelayTimeout() {
-        var _this25 = this;
+        var _this26 = this;
 
         clearTimeout(this._exitDelayTimeout);
 
         this._exitDelayTimeout = setTimeout(function () {
-          if (_this25.isHovered) {
+          if (_this26.isHovered || _this26.isFocused) {
             return;
           }
 
-          _this25._animateOut();
+          _this26._animateOut();
         }, this.options.exitDelay);
       }
 
@@ -4334,22 +4518,22 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_setEnterDelayTimeout",
       value: function _setEnterDelayTimeout() {
-        var _this26 = this;
+        var _this27 = this;
 
         clearTimeout(this._enterDelayTimeout);
 
         this._enterDelayTimeout = setTimeout(function () {
-          if (!_this26.isHovered) {
+          if (!_this27.isHovered && !_this27.isFocused) {
             return;
           }
 
-          _this26._animateIn();
+          _this27._animateIn();
         }, this.options.enterDelay);
       }
     }, {
       key: "_positionTooltip",
       value: function _positionTooltip() {
-        var origin = this.$el[0],
+        var origin = this.el,
             tooltip = this.tooltipEl,
             originHeight = origin.offsetHeight,
             originWidth = origin.offsetWidth,
@@ -4464,12 +4648,24 @@ $jscomp.polyfill = function (e, r, p, m) {
         this.isHovered = false;
         this.close();
       }
+    }, {
+      key: "_handleFocus",
+      value: function _handleFocus() {
+        this.isFocused = true;
+        this.open();
+      }
+    }, {
+      key: "_handleBlur",
+      value: function _handleBlur() {
+        this.isFocused = false;
+        this.close();
+      }
     }, {
       key: "_getAttributeOptions",
       value: function _getAttributeOptions() {
         var attributeOptions = {};
-        var tooltipTextOption = this.$el[0].getAttribute('data-tooltip');
-        var positionOption = this.$el[0].getAttribute('data-position');
+        var tooltipTextOption = this.el.getAttribute('data-tooltip');
+        var positionOption = this.el.getAttribute('data-position');
 
         if (tooltipTextOption) {
           attributeOptions.html = tooltipTextOption;
@@ -4952,18 +5148,18 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_setTimer",
       value: function _setTimer() {
-        var _this27 = this;
+        var _this28 = this;
 
         if (this.timeRemaining !== Infinity) {
           this.counterInterval = setInterval(function () {
             // If toast is not being dragged, decrease its time remaining
-            if (!_this27.panning) {
-              _this27.timeRemaining -= 20;
+            if (!_this28.panning) {
+              _this28.timeRemaining -= 20;
             }
 
             // Animate toast out
-            if (_this27.timeRemaining <= 0) {
-              _this27.dismiss();
+            if (_this28.timeRemaining <= 0) {
+              _this28.dismiss();
             }
           }, 20);
         }
@@ -4976,7 +5172,7 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "dismiss",
       value: function dismiss() {
-        var _this28 = this;
+        var _this29 = this;
 
         window.clearInterval(this.counterInterval);
         var activationDistance = this.el.offsetWidth * this.options.activationPercent;
@@ -4995,12 +5191,12 @@ $jscomp.polyfill = function (e, r, p, m) {
           easing: 'easeOutExpo',
           complete: function () {
             // Call the optional callback
-            if (typeof _this28.options.completeCallback === 'function') {
-              _this28.options.completeCallback();
+            if (typeof _this29.options.completeCallback === 'function') {
+              _this29.options.completeCallback();
             }
             // Remove toast from DOM
-            _this28.el.parentNode.removeChild(_this28.el);
-            Toast._toasts.splice(Toast._toasts.indexOf(_this28), 1);
+            _this29.el.parentNode.removeChild(_this29.el);
+            Toast._toasts.splice(Toast._toasts.indexOf(_this29), 1);
             if (Toast._toasts.length === 0) {
               Toast._removeContainer();
             }
@@ -5206,7 +5402,8 @@ $jscomp.polyfill = function (e, r, p, m) {
     onOpenStart: null,
     onOpenEnd: null,
     onCloseStart: null,
-    onCloseEnd: null
+    onCloseEnd: null,
+    preventScrolling: true
   };
 
   /**
@@ -5225,10 +5422,10 @@ $jscomp.polyfill = function (e, r, p, m) {
     function Sidenav(el, options) {
       _classCallCheck(this, Sidenav);
 
-      var _this29 = _possibleConstructorReturn(this, (Sidenav.__proto__ || Object.getPrototypeOf(Sidenav)).call(this, Sidenav, el, options));
+      var _this30 = _possibleConstructorReturn(this, (Sidenav.__proto__ || Object.getPrototypeOf(Sidenav)).call(this, Sidenav, el, options));
 
-      _this29.el.M_Sidenav = _this29;
-      _this29.id = _this29.$el.attr('id');
+      _this30.el.M_Sidenav = _this30;
+      _this30.id = _this30.$el.attr('id');
 
       /**
        * Options for the Sidenav
@@ -5242,34 +5439,38 @@ $jscomp.polyfill = function (e, r, p, m) {
        * @prop {Function} onCloseStart - Function called when sidenav starts exiting
        * @prop {Function} onCloseEnd - Function called when sidenav finishes exiting
        */
-      _this29.options = $.extend({}, Sidenav.defaults, options);
+      _this30.options = $.extend({}, Sidenav.defaults, options);
 
       /**
        * Describes open/close state of Sidenav
        * @type {Boolean}
        */
-      _this29.isOpen = false;
+      _this30.isOpen = false;
 
       /**
        * Describes if Sidenav is fixed
        * @type {Boolean}
        */
-      _this29.isFixed = _this29.el.classList.contains('sidenav-fixed');
+      _this30.isFixed = _this30.el.classList.contains('sidenav-fixed');
 
       /**
        * Describes if Sidenav is being draggeed
        * @type {Boolean}
        */
-      _this29.isDragged = false;
+      _this30.isDragged = false;
+
+      // Window size variables for window resize checks
+      _this30.lastWindowWidth = window.innerWidth;
+      _this30.lastWindowHeight = window.innerHeight;
 
-      _this29._createOverlay();
-      _this29._createDragTarget();
-      _this29._setupEventHandlers();
-      _this29._setupClasses();
-      _this29._setupFixed();
+      _this30._createOverlay();
+      _this30._createDragTarget();
+      _this30._setupEventHandlers();
+      _this30._setupClasses();
+      _this30._setupFixed();
 
-      Sidenav._sidenavs.push(_this29);
-      return _this29;
+      Sidenav._sidenavs.push(_this30);
+      return _this30;
     }
 
     _createClass(Sidenav, [{
@@ -5386,6 +5587,8 @@ $jscomp.polyfill = function (e, r, p, m) {
         this._time = Date.now();
         this._width = this.el.getBoundingClientRect().width;
         this._overlay.style.display = 'block';
+        this._initialScrollTop = this.isOpen ? this.el.scrollTop : M.getDocumentScrollTop();
+        this._verticallyScrolling = false;
         anim.remove(this.el);
         anim.remove(this._overlay);
       }
@@ -5399,10 +5602,14 @@ $jscomp.polyfill = function (e, r, p, m) {
       key: "_dragMoveUpdate",
       value: function _dragMoveUpdate(e) {
         var clientX = e.targetTouches[0].clientX;
+        var currentScrollTop = this.isOpen ? this.el.scrollTop : M.getDocumentScrollTop();
         this.deltaX = Math.abs(this._xPos - clientX);
         this._xPos = clientX;
         this.velocityX = this.deltaX / (Date.now() - this._time);
         this._time = Date.now();
+        if (this._initialScrollTop !== currentScrollTop) {
+          this._verticallyScrolling = true;
+        }
       }
 
       /**
@@ -5414,7 +5621,7 @@ $jscomp.polyfill = function (e, r, p, m) {
       key: "_handleDragTargetDrag",
       value: function _handleDragTargetDrag(e) {
         // Check if draggable
-        if (!this.options.draggable || this._isCurrentlyFixed()) {
+        if (!this.options.draggable || this._isCurrentlyFixed() || this._verticallyScrolling) {
           return;
         }
 
@@ -5473,6 +5680,7 @@ $jscomp.polyfill = function (e, r, p, m) {
           }
 
           this.isDragged = false;
+          this._verticallyScrolling = false;
         }
       }
 
@@ -5486,7 +5694,7 @@ $jscomp.polyfill = function (e, r, p, m) {
       value: function _handleCloseDrag(e) {
         if (this.isOpen) {
           // Check if draggable
-          if (!this.options.draggable || this._isCurrentlyFixed()) {
+          if (!this.options.draggable || this._isCurrentlyFixed() || this._verticallyScrolling) {
             return;
           }
 
@@ -5539,6 +5747,7 @@ $jscomp.polyfill = function (e, r, p, m) {
           }
 
           this.isDragged = false;
+          this._verticallyScrolling = false;
         }
       }
 
@@ -5550,7 +5759,7 @@ $jscomp.polyfill = function (e, r, p, m) {
       key: "_handleCloseTriggerClick",
       value: function _handleCloseTriggerClick(e) {
         var $closeTrigger = $(e.target).closest('.sidenav-close');
-        if ($closeTrigger.length) {
+        if ($closeTrigger.length && !this._isCurrentlyFixed()) {
           this.close();
         }
       }
@@ -5562,11 +5771,17 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_handleWindowResize",
       value: function _handleWindowResize() {
-        if (window.innerWidth > 992) {
-          this.open();
-        } else {
-          this.close();
+        // Only handle horizontal resizes
+        if (this.lastWindowWidth !== window.innerWidth) {
+          if (window.innerWidth > 992) {
+            this.open();
+          } else {
+            this.close();
+          }
         }
+
+        this.lastWindowWidth = window.innerWidth;
+        this.lastWindowHeight = window.innerHeight;
       }
     }, {
       key: "_setupClasses",
@@ -5642,7 +5857,9 @@ $jscomp.polyfill = function (e, r, p, m) {
 
           // Handle non-fixed Sidenav
         } else {
-          this._preventBodyScrolling();
+          if (this.options.preventScrolling) {
+            this._preventBodyScrolling();
+          }
 
           if (!this.isDragged || this.percentOpen != 1) {
             this._animateIn();
@@ -5688,7 +5905,7 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_animateSidenavIn",
       value: function _animateSidenavIn() {
-        var _this30 = this;
+        var _this31 = this;
 
         var slideOutPercent = this.options.edge === 'left' ? -1 : 1;
         if (this.isDragged) {
@@ -5703,8 +5920,8 @@ $jscomp.polyfill = function (e, r, p, m) {
           easing: 'easeOutQuad',
           complete: function () {
             // Run onOpenEnd callback
-            if (typeof _this30.options.onOpenEnd === 'function') {
-              _this30.options.onOpenEnd.call(_this30, _this30.el);
+            if (typeof _this31.options.onOpenEnd === 'function') {
+              _this31.options.onOpenEnd.call(_this31, _this31.el);
             }
           }
         });
@@ -5738,7 +5955,7 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_animateSidenavOut",
       value: function _animateSidenavOut() {
-        var _this31 = this;
+        var _this32 = this;
 
         var endPercent = this.options.edge === 'left' ? -1 : 1;
         var slideOutPercent = 0;
@@ -5754,8 +5971,8 @@ $jscomp.polyfill = function (e, r, p, m) {
           easing: 'easeOutQuad',
           complete: function () {
             // Run onOpenEnd callback
-            if (typeof _this31.options.onCloseEnd === 'function') {
-              _this31.options.onCloseEnd.call(_this31, _this31.el);
+            if (typeof _this32.options.onCloseEnd === 'function') {
+              _this32.options.onCloseEnd.call(_this32, _this32.el);
             }
           }
         });
@@ -5763,7 +5980,7 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_animateOverlayOut",
       value: function _animateOverlayOut() {
-        var _this32 = this;
+        var _this33 = this;
 
         anim.remove(this._overlay);
         anim({
@@ -5772,7 +5989,7 @@ $jscomp.polyfill = function (e, r, p, m) {
           duration: this.options.outDuration,
           easing: 'easeOutQuad',
           complete: function () {
-            $(_this32._overlay).css('display', 'none');
+            $(_this33._overlay).css('display', 'none');
           }
         });
       }
@@ -5846,9 +6063,9 @@ $jscomp.polyfill = function (e, r, p, m) {
     function ScrollSpy(el, options) {
       _classCallCheck(this, ScrollSpy);
 
-      var _this33 = _possibleConstructorReturn(this, (ScrollSpy.__proto__ || Object.getPrototypeOf(ScrollSpy)).call(this, ScrollSpy, el, options));
+      var _this34 = _possibleConstructorReturn(this, (ScrollSpy.__proto__ || Object.getPrototypeOf(ScrollSpy)).call(this, ScrollSpy, el, options));
 
-      _this33.el.M_ScrollSpy = _this33;
+      _this34.el.M_ScrollSpy = _this34;
 
       /**
        * Options for the modal
@@ -5858,17 +6075,17 @@ $jscomp.polyfill = function (e, r, p, m) {
        * @prop {String} [activeClass='active'] - Class applied to active elements
        * @prop {Function} [getActiveElement] - Used to find active element
        */
-      _this33.options = $.extend({}, ScrollSpy.defaults, options);
+      _this34.options = $.extend({}, ScrollSpy.defaults, options);
 
       // setup
-      ScrollSpy._elements.push(_this33);
+      ScrollSpy._elements.push(_this34);
       ScrollSpy._count++;
       ScrollSpy._increment++;
-      _this33.tickId = -1;
-      _this33.id = ScrollSpy._increment;
-      _this33._setupEventHandlers();
-      _this33._handleWindowScroll();
-      return _this33;
+      _this34.tickId = -1;
+      _this34.id = ScrollSpy._increment;
+      _this34._setupEventHandlers();
+      _this34._handleWindowScroll();
+      return _this34;
     }
 
     _createClass(ScrollSpy, [{
@@ -6021,7 +6238,7 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_exit",
       value: function _exit() {
-        var _this34 = this;
+        var _this35 = this;
 
         ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter(function (value) {
           return value.height() != 0;
@@ -6031,7 +6248,7 @@ $jscomp.polyfill = function (e, r, p, m) {
           $(this.options.getActiveElement(ScrollSpy._visibleElements[0].attr('id'))).removeClass(this.options.activeClass);
 
           ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter(function (el) {
-            return el.attr('id') != _this34.$el.attr('id');
+            return el.attr('id') != _this35.$el.attr('id');
           });
           if (ScrollSpy._visibleElements[0]) {
             // Check if empty
@@ -6166,9 +6383,9 @@ $jscomp.polyfill = function (e, r, p, m) {
     function Autocomplete(el, options) {
       _classCallCheck(this, Autocomplete);
 
-      var _this35 = _possibleConstructorReturn(this, (Autocomplete.__proto__ || Object.getPrototypeOf(Autocomplete)).call(this, Autocomplete, el, options));
+      var _this36 = _possibleConstructorReturn(this, (Autocomplete.__proto__ || Object.getPrototypeOf(Autocomplete)).call(this, Autocomplete, el, options));
 
-      _this35.el.M_Autocomplete = _this35;
+      _this36.el.M_Autocomplete = _this36;
 
       /**
        * Options for the autocomplete
@@ -6182,19 +6399,19 @@ $jscomp.polyfill = function (e, r, p, m) {
        * @prop {Boolean} noWrap
        * @prop {Function} onCycleTo
        */
-      _this35.options = $.extend({}, Autocomplete.defaults, options);
+      _this36.options = $.extend({}, Autocomplete.defaults, options);
 
       // Setup
-      _this35.isOpen = false;
-      _this35.count = 0;
-      _this35.activeIndex = -1;
-      _this35.oldVal;
-      _this35.$inputField = _this35.$el.closest('.input-field');
-      _this35.$active = $();
-      _this35._setupDropdown();
-
-      _this35._setupEventHandlers();
-      return _this35;
+      _this36.isOpen = false;
+      _this36.count = 0;
+      _this36.activeIndex = -1;
+      _this36.oldVal;
+      _this36.$inputField = _this36.$el.closest('.input-field');
+      _this36.$active = $();
+      _this36._setupDropdown();
+
+      _this36._setupEventHandlers();
+      return _this36;
     }
 
     _createClass(Autocomplete, [{
@@ -6259,8 +6476,19 @@ $jscomp.polyfill = function (e, r, p, m) {
       key: "_setupDropdown",
       value: function _setupDropdown() {
         this.container = document.createElement('ul');
+        this.container.id = "autocomplete-options-" + M.guid();
         $(this.container).addClass('autocomplete-content dropdown-content');
         this.$inputField.append(this.container);
+        this.el.setAttribute('data-target', this.container.id);
+
+        this.dropdown = M.Dropdown.init(this.el, {
+          autoFocus: false,
+          closeOnClick: false,
+          coverTrigger: false
+        });
+
+        // Sketchy removal of dropdown click handler
+        this.el.removeEventListener('click', this.dropdown._handleClickBound);
       }
 
       /**
@@ -6280,7 +6508,8 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_handleInputBlur",
       value: function _handleInputBlur() {
-        this._removeAutocomplete();
+        this.dropdown.close();
+        this._resetAutocomplete();
       }
 
       /**
@@ -6291,6 +6520,8 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_handleInputKeyupAndFocus",
       value: function _handleInputKeyupAndFocus(e) {
+        var _this37 = this;
+
         if (e.type === 'keyup') {
           Autocomplete._keydown = false;
         }
@@ -6305,12 +6536,24 @@ $jscomp.polyfill = function (e, r, p, m) {
 
         // Check if the input isn't empty
         if (this.oldVal !== val) {
-          this._removeAutocomplete();
+          this._resetAutocomplete();
 
           if (val.length >= this.options.minLength) {
             this.isOpen = true;
             this._renderDropdown(this.options.data, val);
           }
+
+          // Open dropdown
+          if (!this.dropdown.isOpen) {
+            // Timeout to prevent dropdown temp doc click handler from firing
+            setTimeout(function () {
+              _this37.dropdown.open();
+            }, 100);
+
+            // Recalculate dropdown when its already open
+          } else {
+            this.dropdown.recalculateDimensions();
+          }
         }
 
         // Update oldVal
@@ -6405,18 +6648,15 @@ $jscomp.polyfill = function (e, r, p, m) {
       }
 
       /**
-       * Remove autocomplete elements
+       * Reset autocomplete elements
        */
 
     }, {
-      key: "_removeAutocomplete",
-      value: function _removeAutocomplete() {
+      key: "_resetAutocomplete",
+      value: function _resetAutocomplete() {
         $(this.container).empty();
         this._resetCurrentElement();
         this.oldVal = null;
-        $(this.container).css({
-          display: ''
-        });
         this.isOpen = false;
       }
 
@@ -6431,7 +6671,8 @@ $jscomp.polyfill = function (e, r, p, m) {
         var text = el.text().trim();
         this.el.value = text;
         this.$el.trigger('change');
-        this._removeAutocomplete();
+        this._resetAutocomplete();
+        this.dropdown.close();
 
         // Handle onAutocomplete callback.
         if (typeof this.options.onAutocomplete === 'function') {
@@ -6448,9 +6689,9 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_renderDropdown",
       value: function _renderDropdown(data, val) {
-        var _this36 = this;
+        var _this38 = this;
 
-        this._removeAutocomplete();
+        this._resetAutocomplete();
 
         var matchingData = [];
 
@@ -6474,14 +6715,10 @@ $jscomp.polyfill = function (e, r, p, m) {
 
         // Sort
         var sortFunctionBound = function (a, b) {
-          return _this36.options.sortFunction(a.key.toLowerCase(), b.key.toLowerCase(), val.toLowerCase());
+          return _this38.options.sortFunction(a.key.toLowerCase(), b.key.toLowerCase(), val.toLowerCase());
         };
         matchingData.sort(sortFunctionBound);
 
-        $(this.container).css({
-          display: 'block'
-        });
-
         // Render
         for (var i = 0; i < matchingData.length; i++) {
           var _entry = matchingData[i];
@@ -6555,7 +6792,7 @@ $jscomp.polyfill = function (e, r, p, m) {
 ;(function ($) {
   // Function to update labels of text fields
   M.updateTextFields = function () {
-    var input_selector = 'input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel], input[type=number], input[type=search], textarea';
+    var input_selector = 'input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel], input[type=number], input[type=search], input[type=date], input[type=time], textarea';
     $(input_selector).each(function (element, index) {
       var $this = $(this);
       if (element.value.length > 0 || $(element).is(':focus') || element.autofocus || $this.attr('placeholder') !== null) {
@@ -6684,7 +6921,7 @@ $jscomp.polyfill = function (e, r, p, m) {
 
   $(document).ready(function () {
     // Text based inputs
-    var input_selector = 'input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel], input[type=number], input[type=search], textarea';
+    var input_selector = 'input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel], input[type=number], input[type=search], input[type=date], input[type=time], textarea';
 
     // Add active if form auto complete
     $(document).on('change', input_selector, function () {
@@ -6824,9 +7061,9 @@ $jscomp.polyfill = function (e, r, p, m) {
     function Slider(el, options) {
       _classCallCheck(this, Slider);
 
-      var _this37 = _possibleConstructorReturn(this, (Slider.__proto__ || Object.getPrototypeOf(Slider)).call(this, Slider, el, options));
+      var _this39 = _possibleConstructorReturn(this, (Slider.__proto__ || Object.getPrototypeOf(Slider)).call(this, Slider, el, options));
 
-      _this37.el.M_Slider = _this37;
+      _this39.el.M_Slider = _this39;
 
       /**
        * Options for the modal
@@ -6836,25 +7073,27 @@ $jscomp.polyfill = function (e, r, p, m) {
        * @prop {Number} [duration=500] - Length in ms of slide transition
        * @prop {Number} [interval=6000] - Length in ms of slide interval
        */
-      _this37.options = $.extend({}, Slider.defaults, options);
+      _this39.options = $.extend({}, Slider.defaults, options);
 
       // setup
-      _this37.$slider = _this37.$el.find('.slides');
-      _this37.$slides = _this37.$slider.children('li');
-      _this37.activeIndex = _this37.$slider.find('.active').index();
-      if (_this37.activeIndex != -1) {
-        _this37.$active = _this37.$slides.eq(_this37.activeIndex);
+      _this39.$slider = _this39.$el.find('.slides');
+      _this39.$slides = _this39.$slider.children('li');
+      _this39.activeIndex = _this39.$slides.filter(function (item) {
+        return $(item).hasClass('active');
+      }).first().index();
+      if (_this39.activeIndex != -1) {
+        _this39.$active = _this39.$slides.eq(_this39.activeIndex);
       }
 
-      _this37._setSliderHeight();
+      _this39._setSliderHeight();
 
       // Set initial positions of captions
-      _this37.$slides.find('.caption').each(function (el) {
-        _this37._animateCaptionIn(el, 0);
+      _this39.$slides.find('.caption').each(function (el) {
+        _this39._animateCaptionIn(el, 0);
       });
 
       // Move img src into background-image
-      _this37.$slides.find('img').each(function (el) {
+      _this39.$slides.find('img').each(function (el) {
         var placeholderBase64 = 'data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
         if ($(el).attr('src') !== placeholderBase64) {
           $(el).css('background-image', 'url("' + $(el).attr('src') + '")');
@@ -6862,46 +7101,46 @@ $jscomp.polyfill = function (e, r, p, m) {
         }
       });
 
-      _this37._setupIndicators();
+      _this39._setupIndicators();
 
       // Show active slide
-      if (_this37.$active) {
-        _this37.$active.css('display', 'block');
+      if (_this39.$active) {
+        _this39.$active.css('display', 'block');
       } else {
-        _this37.$slides.first().addClass('active');
+        _this39.$slides.first().addClass('active');
         anim({
-          targets: _this37.$slides.first()[0],
+          targets: _this39.$slides.first()[0],
           opacity: 1,
-          duration: _this37.options.duration,
+          duration: _this39.options.duration,
           easing: 'easeOutQuad'
         });
 
-        _this37.activeIndex = 0;
-        _this37.$active = _this37.$slides.eq(_this37.activeIndex);
+        _this39.activeIndex = 0;
+        _this39.$active = _this39.$slides.eq(_this39.activeIndex);
 
         // Update indicators
-        if (_this37.options.indicators) {
-          _this37.$indicators.eq(_this37.activeIndex).addClass('active');
+        if (_this39.options.indicators) {
+          _this39.$indicators.eq(_this39.activeIndex).addClass('active');
         }
       }
 
       // Adjust height to current slide
-      _this37.$active.find('img').each(function (el) {
+      _this39.$active.find('img').each(function (el) {
         anim({
-          targets: _this37.$active.find('.caption')[0],
+          targets: _this39.$active.find('.caption')[0],
           opacity: 1,
           translateX: 0,
           translateY: 0,
-          duration: _this37.options.duration,
+          duration: _this39.options.duration,
           easing: 'easeOutQuad'
         });
       });
 
-      _this37._setupEventHandlers();
+      _this39._setupEventHandlers();
 
       // auto scroll
-      _this37.start();
-      return _this37;
+      _this39.start();
+      return _this39;
     }
 
     _createClass(Slider, [{
@@ -6925,14 +7164,14 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_setupEventHandlers",
       value: function _setupEventHandlers() {
-        var _this38 = this;
+        var _this40 = this;
 
         this._handleIntervalBound = this._handleInterval.bind(this);
         this._handleIndicatorClickBound = this._handleIndicatorClick.bind(this);
 
         if (this.options.indicators) {
           this.$indicators.each(function (el) {
-            el.addEventListener('click', _this38._handleIndicatorClickBound);
+            el.addEventListener('click', _this40._handleIndicatorClickBound);
           });
         }
       }
@@ -6944,11 +7183,11 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_removeEventHandlers",
       value: function _removeEventHandlers() {
-        var _this39 = this;
+        var _this41 = this;
 
         if (this.options.indicators) {
           this.$indicators.each(function (el) {
-            el.removeEventListener('click', _this39._handleIndicatorClickBound);
+            el.removeEventListener('click', _this41._handleIndicatorClickBound);
           });
         }
       }
@@ -7032,13 +7271,13 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_setupIndicators",
       value: function _setupIndicators() {
-        var _this40 = this;
+        var _this42 = this;
 
         if (this.options.indicators) {
           this.$indicators = $('<ul class="indicators"></ul>');
           this.$slides.each(function (el, index) {
             var $indicator = $('<li class="indicator-item"></li>');
-            _this40.$indicators.append($indicator[0]);
+            _this42.$indicators.append($indicator[0]);
           });
           this.$el.append(this.$indicators[0]);
           this.$indicators = this.$indicators.children('li.indicator-item');
@@ -7063,7 +7302,7 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "set",
       value: function set(index) {
-        var _this41 = this;
+        var _this43 = this;
 
         // Wrap around indices.
         if (index >= this.$slides.length) index = 0;else if (index < 0) index = this.$slides.length - 1;
@@ -7080,7 +7319,7 @@ $jscomp.polyfill = function (e, r, p, m) {
             duration: this.options.duration,
             easing: 'easeOutQuad',
             complete: function () {
-              _this41.$slides.not('.active').each(function (el) {
+              _this43.$slides.not('.active').each(function (el) {
                 anim({
                   targets: el,
                   opacity: 0,
@@ -7279,9 +7518,9 @@ $jscomp.polyfill = function (e, r, p, m) {
     function Chips(el, options) {
       _classCallCheck(this, Chips);
 
-      var _this42 = _possibleConstructorReturn(this, (Chips.__proto__ || Object.getPrototypeOf(Chips)).call(this, Chips, el, options));
+      var _this44 = _possibleConstructorReturn(this, (Chips.__proto__ || Object.getPrototypeOf(Chips)).call(this, Chips, el, options));
 
-      _this42.el.M_Chips = _this42;
+      _this44.el.M_Chips = _this44;
 
       /**
        * Options for the modal
@@ -7291,34 +7530,34 @@ $jscomp.polyfill = function (e, r, p, m) {
        * @prop {String} secondaryPlaceholder
        * @prop {Object} autocompleteOptions
        */
-      _this42.options = $.extend({}, Chips.defaults, options);
+      _this44.options = $.extend({}, Chips.defaults, options);
 
-      _this42.$el.addClass('chips input-field');
-      _this42.chipsData = [];
-      _this42.$chips = $();
-      _this42._setupInput();
-      _this42.hasAutocomplete = Object.keys(_this42.options.autocompleteOptions).length > 0;
+      _this44.$el.addClass('chips input-field');
+      _this44.chipsData = [];
+      _this44.$chips = $();
+      _this44._setupInput();
+      _this44.hasAutocomplete = Object.keys(_this44.options.autocompleteOptions).length > 0;
 
       // Set input id
-      if (!_this42.$input.attr('id')) {
-        _this42.$input.attr('id', M.guid());
+      if (!_this44.$input.attr('id')) {
+        _this44.$input.attr('id', M.guid());
       }
 
       // Render initial chips
-      if (_this42.options.data.length) {
-        _this42.chipsData = _this42.options.data;
-        _this42._renderChips(_this42.chipsData);
+      if (_this44.options.data.length) {
+        _this44.chipsData = _this44.options.data;
+        _this44._renderChips(_this44.chipsData);
       }
 
       // Setup autocomplete if needed
-      if (_this42.hasAutocomplete) {
-        _this42._setupAutocomplete();
+      if (_this44.hasAutocomplete) {
+        _this44._setupAutocomplete();
       }
 
-      _this42._setPlaceholder();
-      _this42._setupLabel();
-      _this42._setupEventHandlers();
-      return _this42;
+      _this44._setPlaceholder();
+      _this44._setupLabel();
+      _this44._setupEventHandlers();
+      return _this44;
     }
 
     _createClass(Chips, [{
@@ -7521,14 +7760,14 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_setupAutocomplete",
       value: function _setupAutocomplete() {
-        var _this43 = this;
+        var _this45 = this;
 
         this.options.autocompleteOptions.onAutocomplete = function (val) {
-          _this43.addChip({
+          _this45.addChip({
             tag: val
           });
-          _this43.$input[0].value = '';
-          _this43.$input[0].focus();
+          _this45.$input[0].value = '';
+          _this45.$input[0].focus();
         };
 
         this.autocomplete = M.Autocomplete.init(this.$input[0], this.options.autocompleteOptions);
@@ -7702,7 +7941,9 @@ $jscomp.polyfill = function (e, r, p, m) {
             var index = currChips._selectedChip.index();
             currChips.deleteChip(index);
             currChips._selectedChip = null;
-            selectIndex = index - 1;
+
+            // Make sure selectIndex doesn't go negative
+            selectIndex = Math.max(index - 1, 0);
           }
 
           if (currChips.chipsData.length) {
@@ -7821,21 +8062,21 @@ $jscomp.polyfill = function (e, r, p, m) {
     function Pushpin(el, options) {
       _classCallCheck(this, Pushpin);
 
-      var _this44 = _possibleConstructorReturn(this, (Pushpin.__proto__ || Object.getPrototypeOf(Pushpin)).call(this, Pushpin, el, options));
+      var _this46 = _possibleConstructorReturn(this, (Pushpin.__proto__ || Object.getPrototypeOf(Pushpin)).call(this, Pushpin, el, options));
 
-      _this44.el.M_Pushpin = _this44;
+      _this46.el.M_Pushpin = _this46;
 
       /**
        * Options for the modal
        * @member Pushpin#options
        */
-      _this44.options = $.extend({}, Pushpin.defaults, options);
+      _this46.options = $.extend({}, Pushpin.defaults, options);
 
-      _this44.originalOffset = _this44.el.offsetTop;
-      Pushpin._pushpins.push(_this44);
-      _this44._setupEventHandlers();
-      _this44._updatePosition();
-      return _this44;
+      _this46.originalOffset = _this46.el.offsetTop;
+      Pushpin._pushpins.push(_this46);
+      _this46._setupEventHandlers();
+      _this46._updatePosition();
+      return _this46;
     }
 
     _createClass(Pushpin, [{
@@ -7986,9 +8227,9 @@ $jscomp.polyfill = function (e, r, p, m) {
     function FloatingActionButton(el, options) {
       _classCallCheck(this, FloatingActionButton);
 
-      var _this45 = _possibleConstructorReturn(this, (FloatingActionButton.__proto__ || Object.getPrototypeOf(FloatingActionButton)).call(this, FloatingActionButton, el, options));
+      var _this47 = _possibleConstructorReturn(this, (FloatingActionButton.__proto__ || Object.getPrototypeOf(FloatingActionButton)).call(this, FloatingActionButton, el, options));
 
-      _this45.el.M_FloatingActionButton = _this45;
+      _this47.el.M_FloatingActionButton = _this47;
 
       /**
        * Options for the fab
@@ -7997,30 +8238,30 @@ $jscomp.polyfill = function (e, r, p, m) {
        * @prop {Boolean} [hoverEnabled=true] - Enable hover vs click
        * @prop {Boolean} [toolbarEnabled=false] - Enable toolbar transition
        */
-      _this45.options = $.extend({}, FloatingActionButton.defaults, options);
-
-      _this45.isOpen = false;
-      _this45.$anchor = _this45.$el.children('a').first();
-      _this45.$menu = _this45.$el.children('ul').first();
-      _this45.$floatingBtns = _this45.$el.find('ul .btn-floating');
-      _this45.$floatingBtnsReverse = _this45.$el.find('ul .btn-floating').reverse();
-      _this45.offsetY = 0;
-      _this45.offsetX = 0;
-      if (_this45.options.direction === 'top') {
-        _this45.$el.addClass('direction-top');
-        _this45.offsetY = 40;
-      } else if (_this45.options.direction === 'right') {
-        _this45.$el.addClass('direction-right');
-        _this45.offsetX = -40;
-      } else if (_this45.options.direction === 'bottom') {
-        _this45.$el.addClass('direction-bottom');
-        _this45.offsetY = -40;
+      _this47.options = $.extend({}, FloatingActionButton.defaults, options);
+
+      _this47.isOpen = false;
+      _this47.$anchor = _this47.$el.children('a').first();
+      _this47.$menu = _this47.$el.children('ul').first();
+      _this47.$floatingBtns = _this47.$el.find('ul .btn-floating');
+      _this47.$floatingBtnsReverse = _this47.$el.find('ul .btn-floating').reverse();
+      _this47.offsetY = 0;
+      _this47.offsetX = 0;
+      if (_this47.options.direction === 'top') {
+        _this47.$el.addClass('direction-top');
+        _this47.offsetY = 40;
+      } else if (_this47.options.direction === 'right') {
+        _this47.$el.addClass('direction-right');
+        _this47.offsetX = -40;
+      } else if (_this47.options.direction === 'bottom') {
+        _this47.$el.addClass('direction-bottom');
+        _this47.offsetY = -40;
       } else {
-        _this45.$el.addClass('direction-left');
-        _this45.offsetX = 40;
+        _this47.$el.addClass('direction-left');
+        _this47.offsetX = 40;
       }
-      _this45._setupEventHandlers();
-      return _this45;
+      _this47._setupEventHandlers();
+      return _this47;
     }
 
     _createClass(FloatingActionButton, [{
@@ -8143,7 +8384,7 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_animateInFAB",
       value: function _animateInFAB() {
-        var _this46 = this;
+        var _this48 = this;
 
         this.$el.addClass('active');
 
@@ -8153,8 +8394,8 @@ $jscomp.polyfill = function (e, r, p, m) {
             targets: el,
             opacity: 1,
             scale: [.4, 1],
-            translateY: [_this46.offsetY, 0],
-            translateX: [_this46.offsetX, 0],
+            translateY: [_this48.offsetY, 0],
+            translateX: [_this48.offsetX, 0],
             duration: 275,
             delay: time,
             easing: 'easeInOutQuad'
@@ -8170,7 +8411,7 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_animateOutFAB",
       value: function _animateOutFAB() {
-        var _this47 = this;
+        var _this49 = this;
 
         this.$floatingBtnsReverse.each(function (el) {
           anim.remove(el);
@@ -8178,12 +8419,12 @@ $jscomp.polyfill = function (e, r, p, m) {
             targets: el,
             opacity: 0,
             scale: .4,
-            translateY: _this47.offsetY,
-            translateX: _this47.offsetX,
+            translateY: _this49.offsetY,
+            translateX: _this49.offsetX,
             duration: 175,
             easing: 'easeOutQuad',
             complete: function () {
-              _this47.$el.removeClass('active');
+              _this49.$el.removeClass('active');
             }
           });
         });
@@ -8196,7 +8437,7 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_animateInToolbar",
       value: function _animateInToolbar() {
-        var _this48 = this;
+        var _this50 = this;
 
         var scaleFactor = void 0;
         var windowWidth = window.innerWidth;
@@ -8232,18 +8473,18 @@ $jscomp.polyfill = function (e, r, p, m) {
         });
 
         setTimeout(function () {
-          _this48.$el.css({
+          _this50.$el.css({
             transform: '',
             transition: 'transform .2s cubic-bezier(0.550, 0.085, 0.680, 0.530), background-color 0s linear .2s'
           });
-          _this48.$anchor.css({
+          _this50.$anchor.css({
             overflow: 'visible',
             transform: '',
             transition: 'transform .2s'
           });
 
           setTimeout(function () {
-            _this48.$el.css({
+            _this50.$el.css({
               overflow: 'hidden',
               'background-color': fabColor
             });
@@ -8251,14 +8492,14 @@ $jscomp.polyfill = function (e, r, p, m) {
               transform: 'scale(' + scaleFactor + ')',
               transition: 'transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)'
             });
-            _this48.$menu.children('li').children('a').css({
+            _this50.$menu.children('li').children('a').css({
               opacity: 1
             });
 
             // Scroll to close.
-            _this48._handleDocumentClickBound = _this48._handleDocumentClick.bind(_this48);
-            window.addEventListener('scroll', _this48._handleCloseBound, true);
-            document.body.addEventListener('click', _this48._handleDocumentClickBound, true);
+            _this50._handleDocumentClickBound = _this50._handleDocumentClick.bind(_this50);
+            window.addEventListener('scroll', _this50._handleCloseBound, true);
+            document.body.addEventListener('click', _this50._handleDocumentClickBound, true);
           }, 100);
         }, 0);
       }
@@ -8270,7 +8511,7 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_animateOutToolbar",
       value: function _animateOutToolbar() {
-        var _this49 = this;
+        var _this51 = this;
 
         var windowWidth = window.innerWidth;
         var windowHeight = window.innerHeight;
@@ -8301,26 +8542,26 @@ $jscomp.polyfill = function (e, r, p, m) {
           backdrop.remove();
 
           // Set initial state.
-          _this49.$el.css({
+          _this51.$el.css({
             'text-align': '',
             width: '',
             bottom: '',
             left: '',
             overflow: '',
             'background-color': '',
-            transform: 'translate3d(' + -_this49.offsetX + 'px,0,0)'
+            transform: 'translate3d(' + -_this51.offsetX + 'px,0,0)'
           });
-          _this49.$anchor.css({
+          _this51.$anchor.css({
             overflow: '',
-            transform: 'translate3d(0,' + _this49.offsetY + 'px,0)'
+            transform: 'translate3d(0,' + _this51.offsetY + 'px,0)'
           });
 
           setTimeout(function () {
-            _this49.$el.css({
+            _this51.$el.css({
               transform: 'translate3d(0,0,0)',
               transition: 'transform .2s'
             });
-            _this49.$anchor.css({
+            _this51.$anchor.css({
               transform: 'translate3d(0,0,0)',
               transition: 'transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)'
             });
@@ -8411,10 +8652,13 @@ $jscomp.polyfill = function (e, r, p, m) {
     // Specify a DOM element to render the calendar in
     container: null,
 
+    // Show clear button
+    showClearBtn: false,
+
     // internationalization
     i18n: {
+      cancel: 'Cancel',
       clear: 'Clear',
-      today: 'Today',
       done: 'Ok',
       previousMonth: '‹',
       nextMonth: '›',
@@ -8452,53 +8696,53 @@ $jscomp.polyfill = function (e, r, p, m) {
     function Datepicker(el, options) {
       _classCallCheck(this, Datepicker);
 
-      var _this50 = _possibleConstructorReturn(this, (Datepicker.__proto__ || Object.getPrototypeOf(Datepicker)).call(this, Datepicker, el, options));
+      var _this52 = _possibleConstructorReturn(this, (Datepicker.__proto__ || Object.getPrototypeOf(Datepicker)).call(this, Datepicker, el, options));
 
-      _this50.el.M_Datepicker = _this50;
+      _this52.el.M_Datepicker = _this52;
 
-      _this50.options = $.extend({}, Datepicker.defaults, options);
+      _this52.options = $.extend({}, Datepicker.defaults, options);
 
       // make sure i18n defaults are not lost when only few i18n option properties are passed
       if (!!options && options.hasOwnProperty('i18n') && typeof options.i18n === 'object') {
-        _this50.options.i18n = $.extend({}, Datepicker.defaults.i18n, options.i18n);
+        _this52.options.i18n = $.extend({}, Datepicker.defaults.i18n, options.i18n);
       }
 
       // Remove time component from minDate and maxDate options
-      if (_this50.options.minDate) _this50.options.minDate.setHours(0, 0, 0, 0);
-      if (_this50.options.maxDate) _this50.options.maxDate.setHours(0, 0, 0, 0);
+      if (_this52.options.minDate) _this52.options.minDate.setHours(0, 0, 0, 0);
+      if (_this52.options.maxDate) _this52.options.maxDate.setHours(0, 0, 0, 0);
 
-      _this50.id = M.guid();
+      _this52.id = M.guid();
 
-      _this50._setupVariables();
-      _this50._insertHTMLIntoDOM();
-      _this50._setupModal();
+      _this52._setupVariables();
+      _this52._insertHTMLIntoDOM();
+      _this52._setupModal();
 
-      _this50._setupEventHandlers();
+      _this52._setupEventHandlers();
 
-      if (!_this50.options.defaultDate) {
-        _this50.options.defaultDate = new Date(Date.parse(_this50.el.value));
-        _this50.options.setDefaultDate = true;
+      if (!_this52.options.defaultDate) {
+        _this52.options.defaultDate = new Date(Date.parse(_this52.el.value));
+        _this52.options.setDefaultDate = true;
       }
 
-      var defDate = _this50.options.defaultDate;
+      var defDate = _this52.options.defaultDate;
 
       if (Datepicker._isDate(defDate)) {
-        if (_this50.options.setDefaultDate) {
-          _this50.setDate(defDate, true);
+        if (_this52.options.setDefaultDate) {
+          _this52.setDate(defDate, true);
         } else {
-          _this50.gotoDate(defDate);
+          _this52.gotoDate(defDate);
         }
       } else {
-        _this50.gotoDate(new Date());
+        _this52.gotoDate(new Date());
       }
 
       /**
        * Describes open/close state of datepicker
        * @type {Boolean}
        */
-      _this50.isOpen = false;
+      _this52.isOpen = false;
 
-      return _this50;
+      return _this52;
     }
 
     _createClass(Datepicker, [{
@@ -8512,18 +8756,34 @@ $jscomp.polyfill = function (e, r, p, m) {
         this._removeEventHandlers();
         this.modal.destroy();
         $(this.modalEl).remove();
+        this.destroySelects();
         this.el.M_Datepicker = undefined;
       }
+    }, {
+      key: "destroySelects",
+      value: function destroySelects() {
+        var oldYearSelect = this.calendarEl.querySelector('.pika-select-year');
+        if (oldYearSelect) {
+          M.FormSelect.getInstance(oldYearSelect).destroy();
+        }
+        var oldMonthSelect = this.calendarEl.querySelector('.pika-select-month');
+        if (oldMonthSelect) {
+          M.FormSelect.getInstance(oldMonthSelect).destroy();
+        }
+      }
     }, {
       key: "_insertHTMLIntoDOM",
       value: function _insertHTMLIntoDOM() {
-        this.clearBtn.innerHTML = this.options.i18n.clear;
-        this.todayBtn.innerHTML = this.options.i18n.today;
+        if (this.options.showClearBtn) {
+          $(this.clearBtn).css({ visibility: '' });
+          this.clearBtn.innerHTML = this.options.i18n.clear;
+        }
+
         this.doneBtn.innerHTML = this.options.i18n.done;
+        this.cancelBtn.innerHTML = this.options.i18n.cancel;
 
-        var containerEl = document.querySelector(this.options.container);
-        if (this.options.container && !!containerEl) {
-          this.$modalEl.appendTo(containerEl);
+        if (this.options.container) {
+          this.$modalEl.appendTo(this.options.container);
         } else {
           this.$modalEl.insertBefore(this.el);
         }
@@ -8531,19 +8791,19 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_setupModal",
       value: function _setupModal() {
-        var _this51 = this;
+        var _this53 = this;
 
         this.modalEl.id = 'modal-' + this.id;
         this.modal = M.Modal.init(this.modalEl, {
           onCloseEnd: function () {
-            _this51.isOpen = false;
+            _this53.isOpen = false;
           }
         });
       }
     }, {
       key: "toString",
       value: function toString(format) {
-        var _this52 = this;
+        var _this54 = this;
 
         format = format || this.options.format;
         if (!Datepicker._isDate(this.date)) {
@@ -8552,8 +8812,8 @@ $jscomp.polyfill = function (e, r, p, m) {
 
         var formatArray = format.split(/(d{1,4}|m{1,4}|y{4}|yy|!.)/g);
         var formattedDate = formatArray.map(function (label) {
-          if (_this52.formats[label]) {
-            return _this52.formats[label]();
+          if (_this54.formats[label]) {
+            return _this54.formats[label]();
           }
 
           return label;
@@ -8930,15 +9190,7 @@ $jscomp.polyfill = function (e, r, p, m) {
           html += this.renderTitle(this, c, this.calendars[c].year, this.calendars[c].month, this.calendars[0].year, randId) + this.render(this.calendars[c].year, this.calendars[c].month, randId);
         }
 
-        // Destroy Materialize Select
-        var oldYearSelect = this.calendarEl.querySelector('.pika-select-year');
-        if (oldYearSelect) {
-          M.FormSelect.getInstance(oldYearSelect).destroy();
-        }
-        var oldMonthSelect = this.calendarEl.querySelector('.pika-select-month');
-        if (oldMonthSelect) {
-          M.FormSelect.getInstance(oldMonthSelect).destroy();
-        }
+        this.destroySelects();
 
         this.calendarEl.innerHTML = html;
 
@@ -8969,22 +9221,25 @@ $jscomp.polyfill = function (e, r, p, m) {
         this._handleInputChangeBound = this._handleInputChange.bind(this);
         this._handleCalendarClickBound = this._handleCalendarClick.bind(this);
         this._finishSelectionBound = this._finishSelection.bind(this);
-        this._handleTodayClickBound = this._handleTodayClick.bind(this);
-        this._handleClearClickBound = this._handleClearClick.bind(this);
         this._handleMonthChange = this._handleMonthChange.bind(this);
+        this._closeBound = this.close.bind(this);
 
         this.el.addEventListener('click', this._handleInputClickBound);
         this.el.addEventListener('keydown', this._handleInputKeydownBound);
         this.el.addEventListener('change', this._handleInputChangeBound);
         this.calendarEl.addEventListener('click', this._handleCalendarClickBound);
         this.doneBtn.addEventListener('click', this._finishSelectionBound);
-        this.todayBtn.addEventListener('click', this._handleTodayClickBound);
-        this.clearBtn.addEventListener('click', this._handleClearClickBound);
+        this.cancelBtn.addEventListener('click', this._closeBound);
+
+        if (this.options.showClearBtn) {
+          this._handleClearClickBound = this._handleClearClick.bind(this);
+          this.clearBtn.addEventListener('click', this._handleClearClickBound);
+        }
       }
     }, {
       key: "_setupVariables",
       value: function _setupVariables() {
-        var _this53 = this;
+        var _this55 = this;
 
         this.$modalEl = $(Datepicker._template);
         this.modalEl = this.$modalEl[0];
@@ -8993,43 +9248,45 @@ $jscomp.polyfill = function (e, r, p, m) {
 
         this.yearTextEl = this.modalEl.querySelector('.year-text');
         this.dateTextEl = this.modalEl.querySelector('.date-text');
-        this.clearBtn = this.modalEl.querySelector('.datepicker-clear');
-        this.todayBtn = this.modalEl.querySelector('.datepicker-today');
+        if (this.options.showClearBtn) {
+          this.clearBtn = this.modalEl.querySelector('.datepicker-clear');
+        }
         this.doneBtn = this.modalEl.querySelector('.datepicker-done');
+        this.cancelBtn = this.modalEl.querySelector('.datepicker-cancel');
 
         this.formats = {
 
           d: function () {
-            return _this53.date.getDate();
+            return _this55.date.getDate();
           },
           dd: function () {
-            var d = _this53.date.getDate();
+            var d = _this55.date.getDate();
             return (d < 10 ? '0' : '') + d;
           },
           ddd: function () {
-            return _this53.options.i18n.weekdaysShort[_this53.date.getDay()];
+            return _this55.options.i18n.weekdaysShort[_this55.date.getDay()];
           },
           dddd: function () {
-            return _this53.options.i18n.weekdays[_this53.date.getDay()];
+            return _this55.options.i18n.weekdays[_this55.date.getDay()];
           },
           m: function () {
-            return _this53.date.getMonth() + 1;
+            return _this55.date.getMonth() + 1;
           },
           mm: function () {
-            var m = _this53.date.getMonth() + 1;
+            var m = _this55.date.getMonth() + 1;
             return (m < 10 ? '0' : '') + m;
           },
           mmm: function () {
-            return _this53.options.i18n.monthsShort[_this53.date.getMonth()];
+            return _this55.options.i18n.monthsShort[_this55.date.getMonth()];
           },
           mmmm: function () {
-            return _this53.options.i18n.months[_this53.date.getMonth()];
+            return _this55.options.i18n.months[_this55.date.getMonth()];
           },
           yy: function () {
-            return ('' + _this53.date.getFullYear()).slice(2);
+            return ('' + _this55.date.getFullYear()).slice(2);
           },
           yyyy: function () {
-            return _this53.date.getFullYear();
+            return _this55.date.getFullYear();
           }
         };
       }
@@ -9088,13 +9345,6 @@ $jscomp.polyfill = function (e, r, p, m) {
         //   this._c = true;
         // }
       }
-    }, {
-      key: "_handleTodayClick",
-      value: function _handleTodayClick() {
-        this.date = new Date();
-        this.setInputValue();
-        this.close();
-      }
     }, {
       key: "_handleClearClick",
       value: function _handleClearClick() {
@@ -9284,7 +9534,7 @@ $jscomp.polyfill = function (e, r, p, m) {
     return Datepicker;
   }(Component);
 
-  Datepicker._template = ['<div class= "modal datepicker-modal">', '<div class="modal-content datepicker-container">', '<div class="datepicker-date-display">', '<span class="year-text"></span>', '<span class="date-text"></span>', '</div>', '<div class="datepicker-calendar-container">', '<div class="pika-single"></div>', '<div class="datepicker-footer">', '<button class="btn-flat datepicker-clear waves-effect" type="button"></button>', '<div class="confirmation-btns">', '<button class="btn-flat datepicker-today waves-effect" type="button"></button>', '<button class="btn-flat datepicker-done waves-effect" type="button"></button>', '</div>', '</div>', '</div>', '</div>', '</div>'].join('');
+  Datepicker._template = ['<div class= "modal datepicker-modal">', '<div class="modal-content datepicker-container">', '<div class="datepicker-date-display">', '<span class="year-text"></span>', '<span class="date-text"></span>', '</div>', '<div class="datepicker-calendar-container">', '<div class="pika-single"></div>', '<div class="datepicker-footer">', '<button class="btn-flat datepicker-clear waves-effect" style="visibility: hidden;" type="button"></button>', '<div class="confirmation-btns">', '<button class="btn-flat datepicker-cancel waves-effect" type="button"></button>', '<button class="btn-flat datepicker-done waves-effect" type="button"></button>', '</div>', '</div>', '</div>', '</div>', '</div>'].join('');
 
   M.Datepicker = Datepicker;
 
@@ -9303,13 +9553,14 @@ $jscomp.polyfill = function (e, r, p, m) {
     duration: 350,
     container: null,
     defaultTime: 'now', // default time, 'now' or '13:14' e.g.
-    fromnow: 0, // Millisecond offset from the defaultTime
+    fromNow: 0, // Millisecond offset from the defaultTime
+    showClearBtn: false,
 
     // internationalization
     i18n: {
-      done: 'Ok',
+      cancel: 'Cancel',
       clear: 'Clear',
-      cancel: 'Cancel'
+      done: 'Ok'
     },
 
     autoClose: false, // auto close when minute is selected
@@ -9328,21 +9579,21 @@ $jscomp.polyfill = function (e, r, p, m) {
     function Timepicker(el, options) {
       _classCallCheck(this, Timepicker);
 
-      var _this54 = _possibleConstructorReturn(this, (Timepicker.__proto__ || Object.getPrototypeOf(Timepicker)).call(this, Timepicker, el, options));
+      var _this56 = _possibleConstructorReturn(this, (Timepicker.__proto__ || Object.getPrototypeOf(Timepicker)).call(this, Timepicker, el, options));
 
-      _this54.el.M_Timepicker = _this54;
+      _this56.el.M_Timepicker = _this56;
 
-      _this54.options = $.extend({}, Timepicker.defaults, options);
+      _this56.options = $.extend({}, Timepicker.defaults, options);
 
-      _this54.id = M.guid();
-      _this54._insertHTMLIntoDOM();
-      _this54._setupModal();
-      _this54._setupVariables();
-      _this54._setupEventHandlers();
+      _this56.id = M.guid();
+      _this56._insertHTMLIntoDOM();
+      _this56._setupModal();
+      _this56._setupVariables();
+      _this56._setupEventHandlers();
 
-      _this54._clockSetup();
-      _this54._pickerSetup();
-      return _this54;
+      _this56._clockSetup();
+      _this56._pickerSetup();
+      return _this56;
     }
 
     _createClass(Timepicker, [{
@@ -9437,7 +9688,7 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_handleDocumentClickEnd",
       value: function _handleDocumentClickEnd(e) {
-        var _this55 = this;
+        var _this57 = this;
 
         e.preventDefault();
         document.removeEventListener('mouseup', this._handleDocumentClickEndBound);
@@ -9454,7 +9705,7 @@ $jscomp.polyfill = function (e, r, p, m) {
         } else if (this.options.autoClose) {
           $(this.minutesView).addClass('timepicker-dial-out');
           setTimeout(function () {
-            _this55.done();
+            _this57.done();
           }, this.options.duration / 2);
         }
 
@@ -9480,11 +9731,11 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_setupModal",
       value: function _setupModal() {
-        var _this56 = this;
+        var _this58 = this;
 
         this.modal = M.Modal.init(this.modalEl, {
           onCloseEnd: function () {
-            _this56.isOpen = false;
+            _this58.isOpen = false;
           }
         });
       }
@@ -9508,7 +9759,11 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_pickerSetup",
       value: function _pickerSetup() {
-        $('<button class="btn-flat timepicker-clear waves-effect" type="button" tabindex="' + (this.options.twelveHour ? '3' : '1') + '">' + this.options.i18n.clear + '</button>').appendTo(this.footer).on('click', this.clear.bind(this));
+
+        var $clearBtn = $('<button class="btn-flat timepicker-clear waves-effect" style="visibility: hidden;" type="button" tabindex="' + (this.options.twelveHour ? '3' : '1') + '">' + this.options.i18n.clear + '</button>').appendTo(this.footer).on('click', this.clear.bind(this));
+        if (this.options.showClearBtn) {
+          $clearBtn.css({ visibility: '' });
+        }
 
         var confirmationBtnsContainer = $('<div class="confirmation-btns"></div>');
         $('<button class="btn-flat timepicker-close waves-effect" type="button" tabindex="' + (this.options.twelveHour ? '3' : '1') + '">' + this.options.i18n.cancel + '</button>').appendTo(confirmationBtnsContainer).on('click', this.close.bind(this));
@@ -9644,7 +9899,7 @@ $jscomp.polyfill = function (e, r, p, m) {
           value[1] = value[1].replace("AM", "").replace("PM", "");
         }
         if (value[0] === 'now') {
-          var now = new Date(+new Date() + this.options.fromnow);
+          var now = new Date(+new Date() + this.options.fromNow);
           value = [now.getHours(), now.getMinutes()];
           if (this.options.twelveHour) {
             this.amOrPm = value[0] >= 12 && value[0] < 24 ? 'PM' : 'AM';
@@ -9710,7 +9965,7 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "setHand",
       value: function setHand(x, y, roundBy5) {
-        var _this57 = this;
+        var _this59 = this;
 
         var radian = Math.atan2(x, -y),
             isHours = this.currentView === 'hours',
@@ -9765,7 +10020,7 @@ $jscomp.polyfill = function (e, r, p, m) {
             if (!this.vibrateTimer) {
               navigator[this.vibrate](10);
               this.vibrateTimer = setTimeout(function () {
-                _this57.vibrateTimer = null;
+                _this59.vibrateTimer = null;
               }, 100);
             }
           }
@@ -9929,20 +10184,20 @@ $jscomp.polyfill = function (e, r, p, m) {
     function CharacterCounter(el, options) {
       _classCallCheck(this, CharacterCounter);
 
-      var _this58 = _possibleConstructorReturn(this, (CharacterCounter.__proto__ || Object.getPrototypeOf(CharacterCounter)).call(this, CharacterCounter, el, options));
+      var _this60 = _possibleConstructorReturn(this, (CharacterCounter.__proto__ || Object.getPrototypeOf(CharacterCounter)).call(this, CharacterCounter, el, options));
 
-      _this58.el.M_CharacterCounter = _this58;
+      _this60.el.M_CharacterCounter = _this60;
 
       /**
        * Options for the character counter
        */
-      _this58.options = $.extend({}, CharacterCounter.defaults, options);
+      _this60.options = $.extend({}, CharacterCounter.defaults, options);
 
-      _this58.isInvalid = false;
-      _this58.isValidLength = false;
-      _this58._setupCounter();
-      _this58._setupEventHandlers();
-      return _this58;
+      _this60.isInvalid = false;
+      _this60.isValidLength = false;
+      _this60._setupCounter();
+      _this60._setupEventHandlers();
+      return _this60;
     }
 
     _createClass(CharacterCounter, [{
@@ -10085,6 +10340,7 @@ $jscomp.polyfill = function (e, r, p, m) {
     dist: -100, // zoom scale TODO: make this more intuitive as an option
     shift: 0, // spacing for center image
     padding: 0, // Padding between non center items
+    numVisible: 5, // Number of visible items in carousel
     fullWidth: false, // Change to full width styles
     indicators: false, // Toggle indicators
     noWrap: false, // Don't wrap around and cycle through items.
@@ -10108,54 +10364,55 @@ $jscomp.polyfill = function (e, r, p, m) {
     function Carousel(el, options) {
       _classCallCheck(this, Carousel);
 
-      var _this59 = _possibleConstructorReturn(this, (Carousel.__proto__ || Object.getPrototypeOf(Carousel)).call(this, Carousel, el, options));
+      var _this61 = _possibleConstructorReturn(this, (Carousel.__proto__ || Object.getPrototypeOf(Carousel)).call(this, Carousel, el, options));
 
-      _this59.el.M_Carousel = _this59;
+      _this61.el.M_Carousel = _this61;
 
       /**
        * Options for the carousel
        * @member Carousel#options
        * @prop {Number} duration
        * @prop {Number} dist
-       * @prop {number} shift
-       * @prop {number} padding
+       * @prop {Number} shift
+       * @prop {Number} padding
+       * @prop {Number} numVisible
        * @prop {Boolean} fullWidth
        * @prop {Boolean} indicators
        * @prop {Boolean} noWrap
        * @prop {Function} onCycleTo
        */
-      _this59.options = $.extend({}, Carousel.defaults, options);
+      _this61.options = $.extend({}, Carousel.defaults, options);
 
       // Setup
-      _this59.hasMultipleSlides = _this59.$el.find('.carousel-item').length > 1;
-      _this59.showIndicators = _this59.options.indicators && _this59.hasMultipleSlides;
-      _this59.noWrap = _this59.options.noWrap || !_this59.hasMultipleSlides;
-      _this59.pressed = false;
-      _this59.dragged = false;
-      _this59.offset = _this59.target = 0;
-      _this59.images = [];
-      _this59.itemWidth = _this59.$el.find('.carousel-item').first().innerWidth();
-      _this59.itemHeight = _this59.$el.find('.carousel-item').first().innerHeight();
-      _this59.dim = _this59.itemWidth * 2 + _this59.options.padding || 1; // Make sure dim is non zero for divisions.
-      _this59._autoScrollBound = _this59._autoScroll.bind(_this59);
-      _this59._trackBound = _this59._track.bind(_this59);
+      _this61.hasMultipleSlides = _this61.$el.find('.carousel-item').length > 1;
+      _this61.showIndicators = _this61.options.indicators && _this61.hasMultipleSlides;
+      _this61.noWrap = _this61.options.noWrap || !_this61.hasMultipleSlides;
+      _this61.pressed = false;
+      _this61.dragged = false;
+      _this61.offset = _this61.target = 0;
+      _this61.images = [];
+      _this61.itemWidth = _this61.$el.find('.carousel-item').first().innerWidth();
+      _this61.itemHeight = _this61.$el.find('.carousel-item').first().innerHeight();
+      _this61.dim = _this61.itemWidth * 2 + _this61.options.padding || 1; // Make sure dim is non zero for divisions.
+      _this61._autoScrollBound = _this61._autoScroll.bind(_this61);
+      _this61._trackBound = _this61._track.bind(_this61);
 
       // Full Width carousel setup
-      if (_this59.options.fullWidth) {
-        _this59.options.dist = 0;
-        _this59._setCarouselHeight();
+      if (_this61.options.fullWidth) {
+        _this61.options.dist = 0;
+        _this61._setCarouselHeight();
 
         // Offset fixed items when indicators.
-        if (_this59.showIndicators) {
-          _this59.$el.find('.carousel-fixed-item').addClass('with-indicators');
+        if (_this61.showIndicators) {
+          _this61.$el.find('.carousel-fixed-item').addClass('with-indicators');
         }
       }
 
       // Iterate through slides
-      _this59.$indicators = $('<ul class="indicators"></ul>');
-      _this59.$el.find('.carousel-item').each(function (el, i) {
-        _this59.images.push(el);
-        if (_this59.showIndicators) {
+      _this61.$indicators = $('<ul class="indicators"></ul>');
+      _this61.$el.find('.carousel-item').each(function (el, i) {
+        _this61.images.push(el);
+        if (_this61.showIndicators) {
           var $indicator = $('<li class="indicator-item"></li>');
 
           // Add active to first by default.
@@ -10163,28 +10420,31 @@ $jscomp.polyfill = function (e, r, p, m) {
             $indicator[0].classList.add('active');
           }
 
-          _this59.$indicators.append($indicator);
+          _this61.$indicators.append($indicator);
         }
       });
-      if (_this59.showIndicators) {
-        _this59.$el.append(_this59.$indicators);
+      if (_this61.showIndicators) {
+        _this61.$el.append(_this61.$indicators);
       }
-      _this59.count = _this59.images.length;
+      _this61.count = _this61.images.length;
+
+      // Cap numVisible at count
+      _this61.options.numVisible = Math.min(_this61.count, _this61.options.numVisible);
 
       // Setup cross browser string
-      _this59.xform = 'transform';
+      _this61.xform = 'transform';
       ['webkit', 'Moz', 'O', 'ms'].every(function (prefix) {
         var e = prefix + 'Transform';
         if (typeof document.body.style[e] !== 'undefined') {
-          _this59.xform = e;
+          _this61.xform = e;
           return false;
         }
         return true;
       });
 
-      _this59._setupEventHandlers();
-      _this59._scroll(_this59.offset);
-      return _this59;
+      _this61._setupEventHandlers();
+      _this61._scroll(_this61.offset);
+      return _this61;
     }
 
     _createClass(Carousel, [{
@@ -10206,7 +10466,7 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_setupEventHandlers",
       value: function _setupEventHandlers() {
-        var _this60 = this;
+        var _this62 = this;
 
         this._handleCarouselTapBound = this._handleCarouselTap.bind(this);
         this._handleCarouselDragBound = this._handleCarouselDrag.bind(this);
@@ -10228,7 +10488,7 @@ $jscomp.polyfill = function (e, r, p, m) {
         if (this.showIndicators && this.$indicators) {
           this._handleIndicatorClickBound = this._handleIndicatorClick.bind(this);
           this.$indicators.find('.indicator-item').each(function (el, i) {
-            el.addEventListener('click', _this60._handleIndicatorClickBound);
+            el.addEventListener('click', _this62._handleIndicatorClickBound);
           });
         }
 
@@ -10246,7 +10506,7 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_removeEventHandlers",
       value: function _removeEventHandlers() {
-        var _this61 = this;
+        var _this63 = this;
 
         if (typeof window.ontouchstart !== 'undefined') {
           this.el.removeEventListener('touchstart', this._handleCarouselTapBound);
@@ -10261,7 +10521,7 @@ $jscomp.polyfill = function (e, r, p, m) {
 
         if (this.showIndicators && this.$indicators) {
           this.$indicators.find('.indicator-item').each(function (el, i) {
-            el.removeEventListener('click', _this61._handleIndicatorClickBound);
+            el.removeEventListener('click', _this63._handleIndicatorClickBound);
           });
         }
 
@@ -10447,7 +10707,7 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_setCarouselHeight",
       value: function _setCarouselHeight(imageOnly) {
-        var _this62 = this;
+        var _this64 = this;
 
         var firstSlide = this.$el.find('.carousel-item.active').length ? this.$el.find('.carousel-item.active').first() : this.$el.find('.carousel-item').first();
         var firstImage = firstSlide.find('img').first();
@@ -10467,7 +10727,7 @@ $jscomp.polyfill = function (e, r, p, m) {
           } else {
             // Get height when image is loaded normally
             firstImage.one('load', function (el, i) {
-              _this62.$el.css('height', el.offsetHeight + 'px');
+              _this64.$el.css('height', el.offsetHeight + 'px');
             });
           }
         } else if (!imageOnly) {
@@ -10573,7 +10833,7 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_scroll",
       value: function _scroll(x) {
-        var _this63 = this;
+        var _this65 = this;
 
         // Track scrolling state
         if (!this.$el.hasClass('scrolling')) {
@@ -10583,7 +10843,7 @@ $jscomp.polyfill = function (e, r, p, m) {
           window.clearTimeout(this.scrollingTimeout);
         }
         this.scrollingTimeout = window.setTimeout(function () {
-          _this63.$el.removeClass('scrolling');
+          _this65.$el.removeClass('scrolling');
         }, this.options.duration);
 
         // Start actual scroll
@@ -10595,8 +10855,10 @@ $jscomp.polyfill = function (e, r, p, m) {
             el = void 0,
             alignment = void 0,
             zTranslation = void 0,
-            tweenedOpacity = void 0;
+            tweenedOpacity = void 0,
+            centerTweenedOpacity = void 0;
         var lastCenter = this.center;
+        var numVisibleOffset = 1 / this.options.numVisible;
 
         this.offset = typeof x === 'number' ? x : this.offset;
         this.center = Math.floor((this.offset + this.dim / 2) / this.dim);
@@ -10605,11 +10867,13 @@ $jscomp.polyfill = function (e, r, p, m) {
         tween = -dir * delta * 2 / this.dim;
         half = this.count >> 1;
 
-        if (!this.options.fullWidth) {
+        if (this.options.fullWidth) {
+          alignment = 'translateX(0)';
+          centerTweenedOpacity = 1;
+        } else {
           alignment = 'translateX(' + (this.el.clientWidth - this.itemWidth) / 2 + 'px) ';
           alignment += 'translateY(' + (this.el.clientHeight - this.itemHeight) / 2 + 'px)';
-        } else {
-          alignment = 'translateX(0)';
+          centerTweenedOpacity = 1 - numVisibleOffset * tween;
         }
 
         // Set indicator active
@@ -10632,15 +10896,8 @@ $jscomp.polyfill = function (e, r, p, m) {
             this.$el.find('.carousel-item').removeClass('active');
             el.classList.add('active');
           }
-          el.style[this.xform] = alignment + ' translateX(' + -delta / 2 + 'px)' + ' translateX(' + dir * this.options.shift * tween * i + 'px)' + ' translateZ(' + this.options.dist * tween + 'px)';
-          el.style.zIndex = 0;
-          if (this.options.fullWidth) {
-            tweenedOpacity = 1;
-          } else {
-            tweenedOpacity = 1 - 0.2 * tween;
-          }
-          el.style.opacity = tweenedOpacity;
-          el.style.visibility = 'visible';
+          var transformString = alignment + ' translateX(' + -delta / 2 + 'px)' + ' translateX(' + dir * this.options.shift * tween * i + 'px)' + ' translateZ(' + this.options.dist * tween + 'px)';
+          this._updateItemStyle(el, centerTweenedOpacity, 0, transformString);
         }
 
         for (i = 1; i <= half; ++i) {
@@ -10650,15 +10907,13 @@ $jscomp.polyfill = function (e, r, p, m) {
             tweenedOpacity = i === half && delta < 0 ? 1 - tween : 1;
           } else {
             zTranslation = this.options.dist * (i * 2 + tween * dir);
-            tweenedOpacity = 1 - 0.2 * (i * 2 + tween * dir);
+            tweenedOpacity = 1 - numVisibleOffset * (i * 2 + tween * dir);
           }
           // Don't show wrapped items.
           if (!this.noWrap || this.center + i < this.count) {
             el = this.images[this._wrap(this.center + i)];
-            el.style[this.xform] = alignment + ' translateX(' + (this.options.shift + (this.dim * i - delta) / 2) + 'px)' + ' translateZ(' + zTranslation + 'px)';
-            el.style.zIndex = -i;
-            el.style.opacity = tweenedOpacity;
-            el.style.visibility = 'visible';
+            var _transformString = alignment + ' translateX(' + (this.options.shift + (this.dim * i - delta) / 2) + 'px)' + ' translateZ(' + zTranslation + 'px)';
+            this._updateItemStyle(el, tweenedOpacity, -i, _transformString);
           }
 
           // left side
@@ -10667,15 +10922,13 @@ $jscomp.polyfill = function (e, r, p, m) {
             tweenedOpacity = i === half && delta > 0 ? 1 - tween : 1;
           } else {
             zTranslation = this.options.dist * (i * 2 - tween * dir);
-            tweenedOpacity = 1 - 0.2 * (i * 2 - tween * dir);
+            tweenedOpacity = 1 - numVisibleOffset * (i * 2 - tween * dir);
           }
           // Don't show wrapped items.
           if (!this.noWrap || this.center - i >= 0) {
             el = this.images[this._wrap(this.center - i)];
-            el.style[this.xform] = alignment + ' translateX(' + (-this.options.shift + (-this.dim * i - delta) / 2) + 'px)' + ' translateZ(' + zTranslation + 'px)';
-            el.style.zIndex = -i;
-            el.style.opacity = tweenedOpacity;
-            el.style.visibility = 'visible';
+            var _transformString2 = alignment + ' translateX(' + (-this.options.shift + (-this.dim * i - delta) / 2) + 'px)' + ' translateZ(' + zTranslation + 'px)';
+            this._updateItemStyle(el, tweenedOpacity, -i, _transformString2);
           }
         }
 
@@ -10683,15 +10936,8 @@ $jscomp.polyfill = function (e, r, p, m) {
         // Don't show wrapped items.
         if (!this.noWrap || this.center >= 0 && this.center < this.count) {
           el = this.images[this._wrap(this.center)];
-          el.style[this.xform] = alignment + ' translateX(' + -delta / 2 + 'px)' + ' translateX(' + dir * this.options.shift * tween + 'px)' + ' translateZ(' + this.options.dist * tween + 'px)';
-          el.style.zIndex = 0;
-          if (this.options.fullWidth) {
-            tweenedOpacity = 1;
-          } else {
-            tweenedOpacity = 1 - 0.2 * tween;
-          }
-          el.style.opacity = tweenedOpacity;
-          el.style.visibility = 'visible';
+          var _transformString3 = alignment + ' translateX(' + -delta / 2 + 'px)' + ' translateX(' + dir * this.options.shift * tween + 'px)' + ' translateZ(' + this.options.dist * tween + 'px)';
+          this._updateItemStyle(el, centerTweenedOpacity, 0, _transformString3);
         }
 
         // onCycleTo callback
@@ -10707,6 +10953,23 @@ $jscomp.polyfill = function (e, r, p, m) {
         }
       }
 
+      /**
+       * Cycle to target
+       * @param {Element} el
+       * @param {Number} opacity
+       * @param {Number} zIndex
+       * @param {String} transform
+       */
+
+    }, {
+      key: "_updateItemStyle",
+      value: function _updateItemStyle(el, opacity, zIndex, transform) {
+        el.style[this.xform] = transform;
+        el.style.zIndex = zIndex;
+        el.style.opacity = opacity;
+        el.style.visibility = 'visible';
+      }
+
       /**
        * Cycle to target
        * @param {Number} n
@@ -10869,42 +11132,42 @@ $jscomp.polyfill = function (e, r, p, m) {
    *
    */
 
-  var FeatureDiscovery = function (_Component19) {
-    _inherits(FeatureDiscovery, _Component19);
+  var TapTarget = function (_Component19) {
+    _inherits(TapTarget, _Component19);
 
     /**
-     * Construct FeatureDiscovery instance
+     * Construct TapTarget instance
      * @constructor
      * @param {Element} el
      * @param {Object} options
      */
-    function FeatureDiscovery(el, options) {
-      _classCallCheck(this, FeatureDiscovery);
+    function TapTarget(el, options) {
+      _classCallCheck(this, TapTarget);
 
-      var _this64 = _possibleConstructorReturn(this, (FeatureDiscovery.__proto__ || Object.getPrototypeOf(FeatureDiscovery)).call(this, FeatureDiscovery, el, options));
+      var _this66 = _possibleConstructorReturn(this, (TapTarget.__proto__ || Object.getPrototypeOf(TapTarget)).call(this, TapTarget, el, options));
 
-      _this64.el.M_FeatureDiscovery = _this64;
+      _this66.el.M_TapTarget = _this66;
 
       /**
        * Options for the select
-       * @member FeatureDiscovery#options
+       * @member TapTarget#options
        * @prop {Function} onOpen - Callback function called when feature discovery is opened
        * @prop {Function} onClose - Callback function called when feature discovery is closed
        */
-      _this64.options = $.extend({}, FeatureDiscovery.defaults, options);
+      _this66.options = $.extend({}, TapTarget.defaults, options);
 
-      _this64.isOpen = false;
+      _this66.isOpen = false;
 
       // setup
-      _this64.$origin = $('#' + _this64.$el.attr('data-target'));
-      _this64._setup();
+      _this66.$origin = $('#' + _this66.$el.attr('data-target'));
+      _this66._setup();
 
-      _this64._calculatePositioning();
-      _this64._setupEventHandlers();
-      return _this64;
+      _this66._calculatePositioning();
+      _this66._setupEventHandlers();
+      return _this66;
     }
 
-    _createClass(FeatureDiscovery, [{
+    _createClass(TapTarget, [{
       key: "destroy",
 
 
@@ -10913,7 +11176,7 @@ $jscomp.polyfill = function (e, r, p, m) {
        */
       value: function destroy() {
         this._removeEventHandlers();
-        this.el.FeatureDiscovery = undefined;
+        this.el.TapTarget = undefined;
       }
 
       /**
@@ -10998,7 +11261,7 @@ $jscomp.polyfill = function (e, r, p, m) {
       }
 
       /**
-       * Setup feature discovery
+       * Setup Tap Target
        */
 
     }, {
@@ -11134,7 +11397,7 @@ $jscomp.polyfill = function (e, r, p, m) {
       }
 
       /**
-       * Open Feature Discovery
+       * Open TapTarget
        */
 
     }, {
@@ -11157,7 +11420,7 @@ $jscomp.polyfill = function (e, r, p, m) {
       }
 
       /**
-       * Close Feature Discovery
+       * Close Tap Target
        */
 
     }, {
@@ -11181,7 +11444,7 @@ $jscomp.polyfill = function (e, r, p, m) {
     }], [{
       key: "init",
       value: function init(els, options) {
-        return _get(FeatureDiscovery.__proto__ || Object.getPrototypeOf(FeatureDiscovery), "init", this).call(this, this, els, options);
+        return _get(TapTarget.__proto__ || Object.getPrototypeOf(TapTarget), "init", this).call(this, this, els, options);
       }
 
       /**
@@ -11192,7 +11455,7 @@ $jscomp.polyfill = function (e, r, p, m) {
       key: "getInstance",
       value: function getInstance(el) {
         var domElem = !!el.jquery ? el[0] : el;
-        return domElem.M_FeatureDiscovery;
+        return domElem.M_TapTarget;
       }
     }, {
       key: "defaults",
@@ -11201,13 +11464,13 @@ $jscomp.polyfill = function (e, r, p, m) {
       }
     }]);
 
-    return FeatureDiscovery;
+    return TapTarget;
   }(Component);
 
-  M.FeatureDiscovery = FeatureDiscovery;
+  M.TapTarget = TapTarget;
 
   if (M.jQueryLoaded) {
-    M.initializeJqueryWrapper(FeatureDiscovery, 'featureDiscovery', 'M_FeatureDiscovery');
+    M.initializeJqueryWrapper(TapTarget, 'tapTarget', 'M_TapTarget');
   }
 })(cash);
 ;(function ($) {
@@ -11236,30 +11499,30 @@ $jscomp.polyfill = function (e, r, p, m) {
       _classCallCheck(this, FormSelect);
 
       // Don't init if browser default version
-      var _this65 = _possibleConstructorReturn(this, (FormSelect.__proto__ || Object.getPrototypeOf(FormSelect)).call(this, FormSelect, el, options));
+      var _this67 = _possibleConstructorReturn(this, (FormSelect.__proto__ || Object.getPrototypeOf(FormSelect)).call(this, FormSelect, el, options));
 
-      if (_this65.$el.hasClass('browser-default')) {
-        return _possibleConstructorReturn(_this65);
+      if (_this67.$el.hasClass('browser-default')) {
+        return _possibleConstructorReturn(_this67);
       }
 
-      _this65.el.M_FormSelect = _this65;
+      _this67.el.M_FormSelect = _this67;
 
       /**
        * Options for the select
        * @member FormSelect#options
        */
-      _this65.options = $.extend({}, FormSelect.defaults, options);
+      _this67.options = $.extend({}, FormSelect.defaults, options);
 
-      _this65.isMultiple = _this65.$el.prop('multiple');
+      _this67.isMultiple = _this67.$el.prop('multiple');
 
       // Setup
-      _this65.el.tabIndex = -1;
-      _this65._keysSelected = {};
-      _this65._valueDict = {}; // Maps key to original and generated option element.
-      _this65._setupDropdown();
+      _this67.el.tabIndex = -1;
+      _this67._keysSelected = {};
+      _this67._valueDict = {}; // Maps key to original and generated option element.
+      _this67._setupDropdown();
 
-      _this65._setupEventHandlers();
-      return _this65;
+      _this67._setupEventHandlers();
+      return _this67;
     }
 
     _createClass(FormSelect, [{
@@ -11282,14 +11545,14 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_setupEventHandlers",
       value: function _setupEventHandlers() {
-        var _this66 = this;
+        var _this68 = this;
 
         this._handleSelectChangeBound = this._handleSelectChange.bind(this);
         this._handleOptionClickBound = this._handleOptionClick.bind(this);
         this._handleInputClickBound = this._handleInputClick.bind(this);
 
         $(this.dropdownOptions).find('li:not(.optgroup)').each(function (el) {
-          el.addEventListener('click', _this66._handleOptionClickBound);
+          el.addEventListener('click', _this68._handleOptionClickBound);
         });
         this.el.addEventListener('change', this._handleSelectChangeBound);
         this.input.addEventListener('click', this._handleInputClickBound);
@@ -11302,10 +11565,10 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_removeEventHandlers",
       value: function _removeEventHandlers() {
-        var _this67 = this;
+        var _this69 = this;
 
         $(this.dropdownOptions).find('li:not(.optgroup)').each(function (el) {
-          el.removeEventListener('click', _this67._handleOptionClickBound);
+          el.removeEventListener('click', _this69._handleOptionClickBound);
         });
         this.el.removeEventListener('change', this._handleSelectChangeBound);
         this.input.removeEventListener('click', this._handleInputClickBound);
@@ -11382,7 +11645,7 @@ $jscomp.polyfill = function (e, r, p, m) {
     }, {
       key: "_setupDropdown",
       value: function _setupDropdown() {
-        var _this68 = this;
+        var _this70 = this;
 
         this.wrapper = document.createElement('div');
         $(this.wrapper).addClass('select-wrapper' + ' ' + this.options.classes);
@@ -11405,21 +11668,21 @@ $jscomp.polyfill = function (e, r, p, m) {
             if ($(el).is('option')) {
               // Direct descendant option.
               var optionEl = void 0;
-              if (_this68.isMultiple) {
-                optionEl = _this68._appendOptionWithIcon(_this68.$el, el, 'multiple');
+              if (_this70.isMultiple) {
+                optionEl = _this70._appendOptionWithIcon(_this70.$el, el, 'multiple');
               } else {
-                optionEl = _this68._appendOptionWithIcon(_this68.$el, el);
+                optionEl = _this70._appendOptionWithIcon(_this70.$el, el);
               }
 
-              _this68._addOptionToValueDict(el, optionEl);
+              _this70._addOptionToValueDict(el, optionEl);
             } else if ($(el).is('optgroup')) {
               // Optgroup.
               var selectOptions = $(el).children('option');
-              $(_this68.dropdownOptions).append($('<li class="optgroup"><span>' + el.getAttribute('label') + '</span></li>')[0]);
+              $(_this70.dropdownOptions).append($('<li class="optgroup"><span>' + el.getAttribute('label') + '</span></li>')[0]);
 
               selectOptions.each(function (el) {
-                var optionEl = _this68._appendOptionWithIcon(_this68.$el, el, 'optgroup-option');
-                _this68._addOptionToValueDict(el, optionEl);
+                var optionEl = _this70._appendOptionWithIcon(_this70.$el, el, 'optgroup-option');
+                _this70._addOptionToValueDict(el, optionEl);
               });
             }
           });
@@ -11448,6 +11711,16 @@ $jscomp.polyfill = function (e, r, p, m) {
         if (!this.el.disabled) {
           var dropdownOptions = $.extend({}, this.options.dropdownOptions);
 
+          // Add callback for centering selected option when dropdown content is scrollable
+          dropdownOptions.onOpenEnd = function (el) {
+            var selectedOption = $(_this70.dropdownOptions).find('.selected').first();
+            if (_this70.dropdown.isScrollable && selectedOption.length) {
+              var scrollOffset = selectedOption[0].getBoundingClientRect().top - _this70.dropdownOptions.getBoundingClientRect().top; // scroll to selected option
+              scrollOffset -= _this70.dropdownOptions.clientHeight / 2; // center in dropdown
+              _this70.dropdownOptions.scrollTop = scrollOffset;
+            }
+          };
+
           if (this.isMultiple) {
             dropdownOptions.closeOnClick = false;
           }
@@ -11685,23 +11958,23 @@ $jscomp.polyfill = function (e, r, p, m) {
     function Range(el, options) {
       _classCallCheck(this, Range);
 
-      var _this69 = _possibleConstructorReturn(this, (Range.__proto__ || Object.getPrototypeOf(Range)).call(this, Range, el, options));
+      var _this71 = _possibleConstructorReturn(this, (Range.__proto__ || Object.getPrototypeOf(Range)).call(this, Range, el, options));
 
-      _this69.el.M_Range = _this69;
+      _this71.el.M_Range = _this71;
 
       /**
        * Options for the range
        * @member Range#options
        */
-      _this69.options = $.extend({}, Range.defaults, options);
+      _this71.options = $.extend({}, Range.defaults, options);
 
-      _this69._mousedown = false;
+      _this71._mousedown = false;
 
       // Setup
-      _this69._setupThumb();
+      _this71._setupThumb();
 
-      _this69._setupEventHandlers();
-      return _this69;
+      _this71._setupEventHandlers();
+      return _this71;
     }
 
     _createClass(Range, [{