mui-sass 0.4.2 → 0.4.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 3f47ba598013f481e02209323035f2b303241f1a
-  data.tar.gz: ff59616b87976e183c4d138eaf4cad95fe1dfce5
+  metadata.gz: a2050f12dddeda8e3aef97f97647c8b68fb34404
+  data.tar.gz: 44f610c26efabbfcb61d9a9905a44c0852e0f2f9
 SHA512:
-  metadata.gz: d6539d5ac8a3d0af8b8f64ed66b5c29c397eb4194a89471cd067d0a4e8ca759cafb1cf5632e2caefe416095e1d398012aff8f3bf492880181264ecadc3c11edc
-  data.tar.gz: b8cb42a20da6d239c73a602f4a3874d7b91dc2518705003de835c756e2fe5d223e17bacb0bc03c2d984e5fd32cd8b6f97ab716cb620488d34f846736190a5260
+  metadata.gz: 24bb2735dfa831635f9cddc1fc6ca9e6a123472cd52907cc8303371087fab6812bea871d88d17d34b3450d0598867736a4822e2d00bc6052c2591907dd08519c
+  data.tar.gz: 469bd855a4955bd3d67bbf289b68efd11d4c8c29da22b85338b3a1c14d2d76d0bf8f806f893672f4e29a8e8376b20fc39f21337d0e7b9f3ac1e093b9689a18d4

data/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 0.4.7 (2016-03-02)
+
+- Update assets to match upstream version
+
+Framework version: MUI v0.4.7
+
 ## 0.4.2 (2016-02-05)
 
 - Update assets to match upstream version

data/README.md

@@ -7,7 +7,7 @@
 
 `mui-sass` is a Sass-powered version of MUI framework for your applications. It works with Ruby on Rails, Compass, Sprockets, etc. 
 
-`mui-sass` allows to include MUI framework CSS and JavaScript components. HTML Email, React, WebComponents and Design Files are not included.
+`mui-sass` allows to include MUI framework Sass and JavaScript components. React, Angular, HTML Email, WebComponents are not included.
 
 ## Installation
 
@@ -89,31 +89,38 @@ You can also import individual Sass components.
 First you need to include core components:
 
 ```scss
-@import 'mui/normalize-3.0.2';
+// Normalizer
+@import "mui/normalize-3.0.3";
+// Core variables and mixins
 @import 'mui/colors';
 @import 'mui/variables';
 @import 'mui/mixins';
+// CSS Reboot
+@import "mui/reboot";
 ```
 
 Then include desired Sass component:
 
 ```scss
-@import 'mui/appbar';
-@import 'mui/buttons';
-@import 'mui/dividers';
-@import 'mui/dropdowns';
-@import 'mui/forms';
-@import 'mui/grid';
-@import 'mui/helpers';
-@import 'mui/layout';
-@import 'mui/overlay';
-@import 'mui/panel';
-@import 'mui/ripple';
-@import 'mui/scaffolding';
-@import 'mui/semantic-markup';
-@import 'mui/tables';
-@import 'mui/tabs';
-@import 'mui/typography';
+// Components
+@import "mui/appbar";
+@import "mui/buttons";
+@import "mui/checkbox-and-radio";
+@import "mui/containers";
+@import "mui/divider";
+@import "mui/dropdown";
+@import "mui/form";
+@import "mui/grid";
+@import "mui/panel";
+@import "mui/select";
+@import "mui/table";
+@import "mui/tabs";
+@import "mui/textfield";
+// Miscellaneous
+@import "mui/helpers";
+@import "mui/overlay";
+@import "mui/ripple";
+@import "mui/typography";
 ```
 
 ### Variables
@@ -129,7 +136,7 @@ $mui-base-font-size: 16px !default;
 
 ## Versioning
 
-MUI for Sass follows the upstream version of MUI framework. But last version number may be ahead, in case there is a need to release project specific changes.
+MUI for Sass follows the upstream version of MUI framework, but last version number may be ahead, in case there is a need to release project specific changes. Some upstream versions may be skipped if they include no Sass/JavaScript related changes.
 
 Please always refer to the [CHANGELOG](https://github.com/rubysamurai/mui-sass/blob/master/CHANGELOG.md) when upgrading.
 

data/lib/mui/sass/version.rb

@@ -1,5 +1,5 @@
 module Mui
   module Sass
-    VERSION = '0.4.2'
+    VERSION = '0.4.7'
   end
 end

data/vendor/assets/javascripts/mui.js

@@ -13,12 +13,12 @@
   
   // load dependencies
   var jqLite = require('src/js/lib/jqLite'),
-      textfield = require('src/js/forms/textfield'),
-      select = require('src/js/forms/select'),
-      ripple = require('src/js/ripple'),
-      dropdowns = require('src/js/dropdowns'),
+      dropdown = require('src/js/dropdown'),
+      overlay = require('src/js/overlay'),
+      ripple = require('src/js/ripple'),      
+      select = require('src/js/select'),
       tabs = require('src/js/tabs'),
-      overlay = require('src/js/overlay');
+      textfield = require('src/js/textfield');
 
   // expose api
   win.mui = {
@@ -31,12 +31,12 @@
     textfield.initListeners();
     select.initListeners();
     ripple.initListeners();
-    dropdowns.initListeners();
+    dropdown.initListeners();
     tabs.initListeners();
   });
 })(window);
 
-},{"src/js/dropdowns":6,"src/js/forms/select":7,"src/js/forms/textfield":8,"src/js/lib/jqLite":9,"src/js/overlay":10,"src/js/ripple":11,"src/js/tabs":12}],2:[function(require,module,exports){
+},{"src/js/dropdown":6,"src/js/lib/jqLite":7,"src/js/overlay":8,"src/js/ripple":9,"src/js/select":10,"src/js/tabs":11,"src/js/textfield":12}],2:[function(require,module,exports){
 /**
  * MUI config module
  * @module config
@@ -878,347 +878,287 @@ module.exports = {
 };
 
 },{"./lib/jqLite":4,"./lib/util":5}],7:[function(require,module,exports){
+module.exports=require(4)
+},{}],8:[function(require,module,exports){
 /**
- * MUI CSS/JS select module
- * @module forms/select
+ * MUI CSS/JS overlay module
+ * @module overlay
  */
 
 'use strict';
 
 
-var jqLite = require('../lib/jqLite'),
-    util = require('../lib/util'),
-    formlib = require('../lib/forms'),
-    wrapperClass = 'mui-select',
-    cssSelector = '.mui-select > select',
-    menuClass = 'mui-select__menu',
-    selectedClass = 'mui--is-selected',
-    doc = document,
-    win = window;
+var util = require('./lib/util'),
+    jqLite = require('./lib/jqLite'),
+    overlayId = 'mui-overlay',
+    bodyClass = 'mui--overflow-hidden',
+    iosRegex = /(iPad|iPhone|iPod)/g;
 
 
 /**
- * Initialize select element.
- * @param {Element} selectEl - The select element.
+ * Turn overlay on/off.
+ * @param {string} action - Turn overlay "on"/"off".
+ * @param {object} [options]
+ * @config {boolean} [keyboard] - If true, close when escape key is pressed.
+ * @config {boolean} [static] - If false, close when backdrop is clicked.
+ * @config {Function} [onclose] - Callback function to execute on close
+ * @param {Element} [childElement] - Child element to add to overlay.
  */
-function initialize(selectEl) {
-  // check flag
-  if (selectEl._muiSelect === true) return;
-  else selectEl._muiSelect = true;
+function overlayFn(action) {
+  var overlayEl;
+  
+  if (action === 'on') {
+    // extract arguments
+    var arg, options, childElement;
+    
+    // pull options and childElement from arguments
+    for (var i=arguments.length - 1; i > 0; i--) {
+      arg = arguments[i];
 
-  // use default behavior on touch devices
-  if ('ontouchstart' in doc.documentElement) return;
+      if (jqLite.type(arg) === 'object') options = arg;
+      if (arg instanceof Element && arg.nodeType === 1) childElement = arg;
+    }
 
-  // initialize element
-  new Select(selectEl);
+    // option defaults
+    options = options || {};
+    if (options.keyboard === undefined) options.keyboard = true;
+    if (options.static === undefined) options.static = false;
+    
+    // execute method
+    overlayEl = overlayOn(options, childElement);
+    
+  } else if (action === 'off') {
+    overlayEl = overlayOff();
+
+  } else {
+    // raise error
+    util.raiseError("Expecting 'on' or 'off'");
+  }
+
+  return overlayEl;
 }
 
 
 /**
- * Creates a new Select object
- * @class
+ * Turn on overlay.
+ * @param {object} options - Overlay options.
+ * @param {Element} childElement - The child element.
  */
-function Select(selectEl) {
-  // instance variables
-  this.selectEl = selectEl;
-  this.wrapperEl = selectEl.parentNode;
-  this.useDefault = false;  // currently unused but let's keep just in case
+function overlayOn(options, childElement) {
+  var bodyEl = document.body,
+      overlayEl = document.getElementById(overlayId);
+    
+  // add overlay
+  util.enableScrollLock();
+  //jqLite.addClass(bodyEl, bodyClass);
 
-  // attach event handlers
-  jqLite.on(selectEl, 'mousedown', util.callback(this, 'mousedownHandler'));
-  jqLite.on(selectEl, 'focus', util.callback(this, 'focusHandler'));
-  jqLite.on(selectEl, 'click', util.callback(this, 'clickHandler'));
-  
-  // make wrapper focusable and fix firefox bug
-  this.wrapperEl.tabIndex = -1;
-  var callbackFn = util.callback(this, 'wrapperFocusHandler');
-  jqLite.on(this.wrapperEl, 'focus', callbackFn);
-}
+  if (!overlayEl) {
+    // create overlayEl
+    overlayEl = document.createElement('div');
+    overlayEl.setAttribute('id', overlayId);
+    
+    // add child element
+    if (childElement) overlayEl.appendChild(childElement);
 
+    bodyEl.appendChild(overlayEl);
+    
+  } else {
+    // remove existing children
+    while (overlayEl.firstChild) overlayEl.removeChild(overlayEl.firstChild);
+    
+    // add child element
+    if (childElement) overlayEl.appendChild(childElement);
+  }
 
-/**
- * Disable default dropdown on mousedown.
- * @param {Event} ev - The DOM event
- */
-Select.prototype.mousedownHandler = function(ev) {
-  if (ev.button !== 0 || this.useDefault === true) return;
-  ev.preventDefault();
+  // iOS bugfix
+  if (iosRegex.test(navigator.userAgent)) {
+    jqLite.css(overlayEl, 'cursor', 'pointer');
+  }
+
+  // handle options
+  if (options.keyboard) addKeyupHandler();
+  else removeKeyupHandler();
+
+  if (options.static) removeClickHandler(overlayEl);
+  else addClickHandler(overlayEl);
+
+  // attach options
+  overlayEl.muiOptions = options;
+
+  return overlayEl;
 }
 
 
 /**
- * Handle focus event on select element.
- * @param {Event} ev - The DOM event
+ * Turn off overlay.
  */
-Select.prototype.focusHandler = function(ev) {
-  // check flag
-  if (this.useDefault === true) return;
-
-  var selectEl = this.selectEl,
-      wrapperEl = this.wrapperEl,
-      origIndex = selectEl.tabIndex,
-      keydownFn = util.callback(this, 'keydownHandler');
+function overlayOff() {
+  var overlayEl = document.getElementById(overlayId),
+      callbackFn;
 
-  // attach keydown handler
-  jqLite.on(doc, 'keydown', keydownFn);
+  if (overlayEl) {
+    // remove children
+    while (overlayEl.firstChild) overlayEl.removeChild(overlayEl.firstChild);
 
-  // disable tabfocus once
-  selectEl.tabIndex = -1;
-  jqLite.one(wrapperEl, 'blur', function() {
-    selectEl.tabIndex = origIndex;
-    jqLite.off(doc, 'keydown', keydownFn);
-  });
-  
-  // defer focus to parent
-  wrapperEl.focus();
-}
+    // remove overlay element
+    overlayEl.parentNode.removeChild(overlayEl);
 
+    // callback reference
+    callbackFn = overlayEl.muiOptions.onclose;
 
-/**
- * Handle keydown events on doc
- **/
-Select.prototype.keydownHandler = function(ev) {
-  // spacebar, down, up
-  if (ev.keyCode === 32 || ev.keyCode === 38 || ev.keyCode === 40) {
-    // prevent win scroll
-    ev.preventDefault();
-    
-    if (this.selectEl.disabled !== true) this.renderMenu();
+    // remove click handler
+    removeClickHandler(overlayEl);
   }
+
+  util.disableScrollLock();
+
+  // remove keyup handler
+  removeKeyupHandler();
+
+  // execute callback
+  if (callbackFn) callbackFn();
+
+  return overlayEl;
 }
 
 
 /**
- * Handle focus event on wrapper element.
+ * Add keyup handler.
  */
-Select.prototype.wrapperFocusHandler = function() {
-  // firefox bugfix
-  if (this.selectEl.disabled) return this.wrapperEl.blur();
+function addKeyupHandler() {
+  jqLite.on(document, 'keyup', onKeyup);
 }
 
 
 /**
- * Handle click events on select element.
- * @param {Event} ev - The DOM event
+ * Remove keyup handler.
  */
-Select.prototype.clickHandler = function(ev) {
-  // only left clicks
-  if (ev.button !== 0) return;
-  this.renderMenu();
+function removeKeyupHandler() {
+  jqLite.off(document, 'keyup', onKeyup);
 }
 
 
 /**
- * Render options dropdown.
+ * Teardown overlay when escape key is pressed.
  */
-Select.prototype.renderMenu = function() {
-  // check and reset flag
-  if (this.useDefault === true) return this.useDefault = false;
-
-  new Menu(this.wrapperEl, this.selectEl);
+function onKeyup(ev) {
+  if (ev.keyCode === 27) overlayOff();
 }
 
 
 /**
- * Creates a new Menu
- * @class
+ * Add click handler.
  */
-function Menu(wrapperEl, selectEl) {
-  // add scroll lock
-  util.enableScrollLock();
-
-  // instance variables
-  this.origIndex = null;
-  this.currentIndex = null;
-  this.selectEl = selectEl;
-  this.menuEl = this._createMenuEl(wrapperEl, selectEl);
-  this.clickCallbackFn = util.callback(this, 'clickHandler');
-  this.keydownCallbackFn = util.callback(this, 'keydownHandler');
-  this.destroyCallbackFn = util.callback(this, 'destroy');
-
-  // add to DOM
-  wrapperEl.appendChild(this.menuEl);
-  jqLite.scrollTop(this.menuEl, this.menuEl._muiScrollTop);
-
-  // blur active element
-  setTimeout(function() {
-    // ie10 bugfix
-    if (doc.activeElement.nodeName.toLowerCase() !== "body") {
-      doc.activeElement.blur();
-    }
-  }, 0);
+function addClickHandler(overlayEl) {
+  jqLite.on(overlayEl, 'click', onClick);
+}
 
-  // attach event handlers
-  jqLite.on(this.menuEl, 'click', this.clickCallbackFn);
-  jqLite.on(doc, 'keydown', this.keydownCallbackFn);
-  jqLite.on(win, 'resize', this.destroyCallbackFn);
 
-  // attach event handler after current event loop exits
-  var fn = this.destroyCallbackFn;
-  setTimeout(function() {jqLite.on(doc, 'click', fn);}, 0);
+/**
+ * Remove click handler.
+ */
+function removeClickHandler(overlayEl) {
+  jqLite.off(overlayEl, 'click', onClick);
 }
 
 
 /**
- * Create menu element
- * @param {Element} selectEl - The select element
+ * Teardown overlay when backdrop is clicked.
  */
-Menu.prototype._createMenuEl = function(wrapperEl, selectEl) {
-  var menuEl = doc.createElement('div'),
-      optionEls = selectEl.children,
-      numOptions = optionEls.length,
-      selectedPos = 0,
-      optionEl,
-      itemEl,
-      i;
-
-  menuEl.className = menuClass;
-
-  // add options
-  for (i=0; i < numOptions; i++) {
-    optionEl = optionEls[i];
-
-    itemEl = doc.createElement('div');
-    itemEl.textContent = optionEl.textContent;
-    itemEl._muiPos = i;
-
-    if (optionEl.selected) {
-      itemEl.setAttribute('class', selectedClass);
-      selectedPos = i;
-    }
-
-    menuEl.appendChild(itemEl);
-  }
-
-  // save indices
-  this.origIndex = selectedPos;
-  this.currentIndex = selectedPos;
-
-  // set position
-  var props = formlib.getMenuPositionalCSS(
-    wrapperEl,
-    numOptions,
-    selectedPos
-  );
-
-  jqLite.css(menuEl, props);
-  menuEl._muiScrollTop = props.scrollTop;
-
-  return menuEl;
+function onClick(ev) {
+  if (ev.target.id === overlayId) overlayOff();
 }
 
 
-/**
- * Handle keydown events on doc element.
- * @param {Event} ev - The DOM event
- */
-Menu.prototype.keydownHandler = function(ev) {
-  var keyCode = ev.keyCode;
-
-  // tab
-  if (keyCode === 9) return this.destroy();
-  
-  // escape | up | down | enter
-  if (keyCode === 27 || keyCode === 40 || keyCode === 38 || keyCode === 13) {
-    ev.preventDefault();
-  }
-
-  if (keyCode === 27) {
-    this.destroy();
-  } else if (keyCode === 40) {
-    this.increment();
-  } else if (keyCode === 38) {
-    this.decrement();
-  } else if (keyCode === 13) {
-    this.selectCurrent();
-    this.destroy();
-  }
-}
-
+/** Define module API */
+module.exports = overlayFn;
 
+},{"./lib/jqLite":4,"./lib/util":5}],9:[function(require,module,exports){
 /**
- * Handle click events on menu element.
- * @param {Event} ev - The DOM event
+ * MUI CSS/JS ripple module
+ * @module ripple
  */
-Menu.prototype.clickHandler = function(ev) {
-  // don't allow events to bubble
-  ev.stopPropagation();
-
-  var pos = ev.target._muiPos;
 
-  // ignore clicks on non-items                                               
-  if (pos === undefined) return;
+'use strict';
 
-  // select option
-  this.currentIndex = pos;
-  this.selectCurrent();
 
-  // destroy menu
-  this.destroy();
-}
+var jqLite = require('./lib/jqLite'),
+    util = require('./lib/util'),
+    btnClass = 'mui-btn',
+    btnFABClass = 'mui-btn--fab',
+    rippleClass = 'mui-ripple-effect',
+    animationName = 'mui-btn-inserted';
 
 
 /**
- * Increment selected item
+ * Add ripple effects to button element.
+ * @param {Element} buttonEl - The button element.
  */
-Menu.prototype.increment = function() {
-  if (this.currentIndex === this.menuEl.children.length - 1) return;
+function initialize(buttonEl) {
+  // check flag
+  if (buttonEl._muiRipple === true) return;
+  else buttonEl._muiRipple = true;
 
-  var optionEls = this.menuEl.children;
-  
-  jqLite.removeClass(optionEls[this.currentIndex], selectedClass);
-  this.currentIndex += 1;
-  jqLite.addClass(optionEls[this.currentIndex], selectedClass);
+  // exit if element is INPUT (doesn't support absolute positioned children)
+  if (buttonEl.tagName === 'INPUT') return;
+
+  // attach event handler
+  jqLite.on(buttonEl, 'touchstart', eventHandler);
+  jqLite.on(buttonEl, 'mousedown', eventHandler);
 }
 
 
 /**
- * Decrement selected item
+ * Event handler
+ * @param {Event} ev - The DOM event
  */
-Menu.prototype.decrement = function() {
-  if (this.currentIndex === 0) return;
-
-  var optionEls = this.menuEl.children;
-
-  jqLite.removeClass(optionEls[this.currentIndex], selectedClass);
-  this.currentIndex -= 1;
-  jqLite.addClass(optionEls[this.currentIndex], selectedClass);
-}
+function eventHandler(ev) {
+  // only left clicks
+  if (ev.button !== 0) return;
 
+  var buttonEl = this;
 
-/**
- * Select current item
- */
-Menu.prototype.selectCurrent = function() {
-  if (this.currentIndex !== this.origIndex) {
-    var optionEls = this.selectEl.children;
-    optionEls[this.origIndex].selected = false;
-    optionEls[this.currentIndex].selected = true;
+  // exit if button is disabled
+  if (buttonEl.disabled === true) return;
 
-    // trigger change event
-    util.dispatchEvent(this.selectEl, 'change');
+  // de-dupe touchstart and mousedown with 100msec flag
+  if (buttonEl.touchFlag === true) {
+    return;
+  } else {
+    buttonEl.touchFlag = true;
+    setTimeout(function() {
+      buttonEl.touchFlag = false;
+    }, 100);
   }
-}
 
+  var rippleEl = document.createElement('div');
+  rippleEl.className = rippleClass;
 
-/**
- * Destroy menu and detach event handlers
- */
-Menu.prototype.destroy = function() {
-  // remove element and focus element
-  var parentNode = this.menuEl.parentNode;
-  if (parentNode) parentNode.removeChild(this.menuEl);
+  var offset = jqLite.offset(buttonEl),
+      xPos = ev.pageX - offset.left,
+      yPos = ev.pageY - offset.top,
+      diameter,
+      radius;
 
-  this.selectEl.focus();
+  // get height
+  if (jqLite.hasClass(buttonEl, btnFABClass)) diameter = offset.height / 2;
+  else diameter = offset.height;
 
-  // remove scroll lock
-  util.disableScrollLock();
+  radius = diameter / 2;
+  
+  jqLite.css(rippleEl, {
+    height: diameter + 'px',
+    width: diameter + 'px',
+    top: yPos - radius + 'px',
+    left: xPos - radius + 'px'
+  });
 
-  // remove event handlers
-  jqLite.off(this.menuEl, 'click', this.clickCallbackFn);
-  jqLite.off(doc, 'keydown', this.keydownCallbackFn);
-  jqLite.off(doc, 'click', this.destroyCallbackFn);
-  jqLite.off(win, 'resize', this.destroyCallbackFn);
+  buttonEl.appendChild(rippleEl);
+  
+  window.setTimeout(function() {
+    var parentNode = rippleEl.parentNode;
+    if (parentNode) parentNode.removeChild(rippleEl);
+  }, 2000);
 }
 
 
@@ -1226,403 +1166,361 @@ Menu.prototype.destroy = function() {
 module.exports = {
   /** Initialize module listeners */
   initListeners: function() {
+    var doc = document;
+
     // markup elements available when method is called
-    var elList = doc.querySelectorAll(cssSelector);
+    var elList = doc.getElementsByClassName(btnClass);
     for (var i=elList.length - 1; i >= 0; i--) initialize(elList[i]);
 
     // listen for new elements
     util.onNodeInserted(function(el) {
-      if (el.tagName === 'SELECT' &&
-          jqLite.hasClass(el.parentNode, wrapperClass)) {
-        initialize(el);
-      }
+      if (jqLite.hasClass(el, btnClass)) initialize(el);
     });
   }
 };
 
-},{"../lib/forms":3,"../lib/jqLite":4,"../lib/util":5}],8:[function(require,module,exports){
+},{"./lib/jqLite":4,"./lib/util":5}],10:[function(require,module,exports){
 /**
- * MUI CSS/JS form-control module
- * @module forms/form-control
+ * MUI CSS/JS select module
+ * @module forms/select
  */
 
 'use strict';
 
 
-var jqLite = require('../lib/jqLite'),
-    util = require('../lib/util'),
-    cssSelector = '.mui-textfield > input, .mui-textfield > textarea',
-    emptyClass = 'mui--is-empty',
-    notEmptyClass = 'mui--is-not-empty',
-    dirtyClass = 'mui--is-dirty',
-    floatingLabelClass = 'mui-textfield--float-label';
+var jqLite = require('./lib/jqLite'),
+    util = require('./lib/util'),
+    formlib = require('./lib/forms'),
+    wrapperClass = 'mui-select',
+    cssSelector = '.mui-select > select',
+    menuClass = 'mui-select__menu',
+    selectedClass = 'mui--is-selected',
+    doc = document,
+    win = window;
 
 
 /**
- * Initialize input element.
- * @param {Element} inputEl - The input element.
+ * Initialize select element.
+ * @param {Element} selectEl - The select element.
  */
-function initialize(inputEl) {
+function initialize(selectEl) {
   // check flag
-  if (inputEl._muiTextfield === true) return;
-  else inputEl._muiTextfield = true;
-
-  if (inputEl.value.length) jqLite.addClass(inputEl, notEmptyClass);
-  else jqLite.addClass(inputEl, emptyClass);
+  if (selectEl._muiSelect === true) return;
+  else selectEl._muiSelect = true;
 
-  jqLite.on(inputEl, 'input', inputHandler);
+  // use default behavior on touch devices
+  if ('ontouchstart' in doc.documentElement) return;
 
-  // add dirty class on focus
-  jqLite.on(inputEl, 'focus', function(){jqLite.addClass(this, dirtyClass);});
+  // initialize element
+  new Select(selectEl);
 }
 
 
 /**
- * Handle input events.
+ * Creates a new Select object
+ * @class
  */
-function inputHandler() {
-  var inputEl = this;
-
-  if (inputEl.value.length) {
-    jqLite.removeClass(inputEl, emptyClass);
-    jqLite.addClass(inputEl, notEmptyClass);
-  } else {
-    jqLite.removeClass(inputEl, notEmptyClass);
-    jqLite.addClass(inputEl, emptyClass)
-  }
+function Select(selectEl) {
+  // instance variables
+  this.selectEl = selectEl;
+  this.wrapperEl = selectEl.parentNode;
+  this.useDefault = false;  // currently unused but let's keep just in case
 
-  jqLite.addClass(inputEl, dirtyClass);
-}
-
-
-/** Define module API */
-module.exports = {
-  /** Initialize input elements */
-  initialize: initialize,
+  // attach event handlers
+  jqLite.on(selectEl, 'mousedown', util.callback(this, 'mousedownHandler'));
+  jqLite.on(selectEl, 'focus', util.callback(this, 'focusHandler'));
+  jqLite.on(selectEl, 'click', util.callback(this, 'clickHandler'));
   
-  /** Initialize module listeners */
-  initListeners: function() {
-    var doc = document;
-    
-    // markup elements available when method is called
-    var elList = doc.querySelectorAll(cssSelector);
-    for (var i=elList.length - 1; i >= 0; i--) initialize(elList[i]);
+  // make wrapper focusable and fix firefox bug
+  this.wrapperEl.tabIndex = -1;
+  var callbackFn = util.callback(this, 'wrapperFocusHandler');
+  jqLite.on(this.wrapperEl, 'focus', callbackFn);
+}
 
-    // listen for new elements
-    util.onNodeInserted(function(el) {
-      if (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA') initialize(el);
-    });
 
-    // add transition css for floating labels
-    setTimeout(function() {
-      var css = '.mui-textfield.mui-textfield--float-label > label {' + [
-        '-webkit-transition',
-        '-moz-transition',
-        '-o-transition',
-        'transition',
-        ''
-      ].join(':all .15s ease-out;') + '}';
-      
-      util.loadStyle(css);
-    }, 150);
-
-    // pointer-events shim for floating labels
-    if (util.supportsPointerEvents() === false) {
-      jqLite.on(document, 'click', function(ev) {
-        var targetEl = ev.target;
+/**
+ * Disable default dropdown on mousedown.
+ * @param {Event} ev - The DOM event
+ */
+Select.prototype.mousedownHandler = function(ev) {
+  if (ev.button !== 0 || this.useDefault === true) return;
+  ev.preventDefault();
+}
 
-        if (targetEl.tagName === 'LABEL' &&
-            jqLite.hasClass(targetEl.parentNode, floatingLabelClass)) {
-          var inputEl = targetEl.previousElementSibling;
-          if (inputEl) inputEl.focus();
-        }
-      });
-    }
-  }
-};
 
-},{"../lib/jqLite":4,"../lib/util":5}],9:[function(require,module,exports){
-module.exports=require(4)
-},{}],10:[function(require,module,exports){
 /**
- * MUI CSS/JS overlay module
- * @module overlay
+ * Handle focus event on select element.
+ * @param {Event} ev - The DOM event
  */
+Select.prototype.focusHandler = function(ev) {
+  // check flag
+  if (this.useDefault === true) return;
 
-'use strict';
+  var selectEl = this.selectEl,
+      wrapperEl = this.wrapperEl,
+      origIndex = selectEl.tabIndex,
+      keydownFn = util.callback(this, 'keydownHandler');
 
+  // attach keydown handler
+  jqLite.on(doc, 'keydown', keydownFn);
 
-var util = require('./lib/util'),
-    jqLite = require('./lib/jqLite'),
-    overlayId = 'mui-overlay',
-    bodyClass = 'mui--overflow-hidden',
-    iosRegex = /(iPad|iPhone|iPod)/g;
+  // disable tabfocus once
+  selectEl.tabIndex = -1;
+  jqLite.one(wrapperEl, 'blur', function() {
+    selectEl.tabIndex = origIndex;
+    jqLite.off(doc, 'keydown', keydownFn);
+  });
+  
+  // defer focus to parent
+  wrapperEl.focus();
+}
 
 
 /**
- * Turn overlay on/off.
- * @param {string} action - Turn overlay "on"/"off".
- * @param {object} [options]
- * @config {boolean} [keyboard] - If true, close when escape key is pressed.
- * @config {boolean} [static] - If false, close when backdrop is clicked.
- * @config {Function} [onclose] - Callback function to execute on close
- * @param {Element} [childElement] - Child element to add to overlay.
- */
-function overlayFn(action) {
-  var overlayEl;
-  
-  if (action === 'on') {
-    // extract arguments
-    var arg, options, childElement;
+ * Handle keydown events on doc
+ **/
+Select.prototype.keydownHandler = function(ev) {
+  // spacebar, down, up
+  if (ev.keyCode === 32 || ev.keyCode === 38 || ev.keyCode === 40) {
+    // prevent win scroll
+    ev.preventDefault();
     
-    // pull options and childElement from arguments
-    for (var i=arguments.length - 1; i > 0; i--) {
-      arg = arguments[i];
+    if (this.selectEl.disabled !== true) this.renderMenu();
+  }
+}
 
-      if (jqLite.type(arg) === 'object') options = arg;
-      if (arg instanceof Element && arg.nodeType === 1) childElement = arg;
-    }
 
-    // option defaults
-    options = options || {};
-    if (options.keyboard === undefined) options.keyboard = true;
-    if (options.static === undefined) options.static = false;
-    
-    // execute method
-    overlayEl = overlayOn(options, childElement);
-    
-  } else if (action === 'off') {
-    overlayEl = overlayOff();
+/**
+ * Handle focus event on wrapper element.
+ */
+Select.prototype.wrapperFocusHandler = function() {
+  // firefox bugfix
+  if (this.selectEl.disabled) return this.wrapperEl.blur();
+}
 
-  } else {
-    // raise error
-    util.raiseError("Expecting 'on' or 'off'");
-  }
 
-  return overlayEl;
+/**
+ * Handle click events on select element.
+ * @param {Event} ev - The DOM event
+ */
+Select.prototype.clickHandler = function(ev) {
+  // only left clicks
+  if (ev.button !== 0) return;
+  this.renderMenu();
 }
 
 
 /**
- * Turn on overlay.
- * @param {object} options - Overlay options.
- * @param {Element} childElement - The child element.
+ * Render options dropdown.
  */
-function overlayOn(options, childElement) {
-  var bodyEl = document.body,
-      overlayEl = document.getElementById(overlayId);
-    
-  // add overlay
-  util.enableScrollLock();
-  //jqLite.addClass(bodyEl, bodyClass);
+Select.prototype.renderMenu = function() {
+  // check and reset flag
+  if (this.useDefault === true) return this.useDefault = false;
 
-  if (!overlayEl) {
-    // create overlayEl
-    overlayEl = document.createElement('div');
-    overlayEl.setAttribute('id', overlayId);
-    
-    // add child element
-    if (childElement) overlayEl.appendChild(childElement);
+  new Menu(this.wrapperEl, this.selectEl);
+}
 
-    bodyEl.appendChild(overlayEl);
-    
-  } else {
-    // remove existing children
-    while (overlayEl.firstChild) overlayEl.removeChild(overlayEl.firstChild);
-    
-    // add child element
-    if (childElement) overlayEl.appendChild(childElement);
-  }
 
-  // iOS bugfix
-  if (iosRegex.test(navigator.userAgent)) {
-    jqLite.css(overlayEl, 'cursor', 'pointer');
-  }
+/**
+ * Creates a new Menu
+ * @class
+ */
+function Menu(wrapperEl, selectEl) {
+  // add scroll lock
+  util.enableScrollLock();
 
-  // handle options
-  if (options.keyboard) addKeyupHandler();
-  else removeKeyupHandler();
+  // instance variables
+  this.origIndex = null;
+  this.currentIndex = null;
+  this.selectEl = selectEl;
+  this.menuEl = this._createMenuEl(wrapperEl, selectEl);
+  this.clickCallbackFn = util.callback(this, 'clickHandler');
+  this.keydownCallbackFn = util.callback(this, 'keydownHandler');
+  this.destroyCallbackFn = util.callback(this, 'destroy');
 
-  if (options.static) removeClickHandler(overlayEl);
-  else addClickHandler(overlayEl);
+  // add to DOM
+  wrapperEl.appendChild(this.menuEl);
+  jqLite.scrollTop(this.menuEl, this.menuEl._muiScrollTop);
 
-  // attach options
-  overlayEl.muiOptions = options;
+  // blur active element
+  setTimeout(function() {
+    // ie10 bugfix
+    if (doc.activeElement.nodeName.toLowerCase() !== "body") {
+      doc.activeElement.blur();
+    }
+  }, 0);
 
-  return overlayEl;
+  // attach event handlers
+  jqLite.on(this.menuEl, 'click', this.clickCallbackFn);
+  jqLite.on(doc, 'keydown', this.keydownCallbackFn);
+  jqLite.on(win, 'resize', this.destroyCallbackFn);
+
+  // attach event handler after current event loop exits
+  var fn = this.destroyCallbackFn;
+  setTimeout(function() {jqLite.on(doc, 'click', fn);}, 0);
 }
 
 
 /**
- * Turn off overlay.
+ * Create menu element
+ * @param {Element} selectEl - The select element
  */
-function overlayOff() {
-  var overlayEl = document.getElementById(overlayId),
-      callbackFn;
+Menu.prototype._createMenuEl = function(wrapperEl, selectEl) {
+  var menuEl = doc.createElement('div'),
+      optionEls = selectEl.children,
+      numOptions = optionEls.length,
+      selectedPos = 0,
+      optionEl,
+      itemEl,
+      i;
 
-  if (overlayEl) {
-    // remove children
-    while (overlayEl.firstChild) overlayEl.removeChild(overlayEl.firstChild);
+  menuEl.className = menuClass;
 
-    // remove overlay element
-    overlayEl.parentNode.removeChild(overlayEl);
+  // add options
+  for (i=0; i < numOptions; i++) {
+    optionEl = optionEls[i];
 
-    // callback reference
-    callbackFn = overlayEl.muiOptions.onclose;
+    itemEl = doc.createElement('div');
+    itemEl.textContent = optionEl.textContent;
+    itemEl._muiPos = i;
 
-    // remove click handler
-    removeClickHandler(overlayEl);
+    if (optionEl.selected) {
+      itemEl.setAttribute('class', selectedClass);
+      selectedPos = i;
+    }
+
+    menuEl.appendChild(itemEl);
   }
 
-  util.disableScrollLock();
+  // save indices
+  this.origIndex = selectedPos;
+  this.currentIndex = selectedPos;
 
-  // remove keyup handler
-  removeKeyupHandler();
+  // set position
+  var props = formlib.getMenuPositionalCSS(
+    wrapperEl,
+    numOptions,
+    selectedPos
+  );
 
-  // execute callback
-  if (callbackFn) callbackFn();
+  jqLite.css(menuEl, props);
+  menuEl._muiScrollTop = props.scrollTop;
 
-  return overlayEl;
+  return menuEl;
 }
 
 
 /**
- * Add keyup handler.
+ * Handle keydown events on doc element.
+ * @param {Event} ev - The DOM event
  */
-function addKeyupHandler() {
-  jqLite.on(document, 'keyup', onKeyup);
-}
+Menu.prototype.keydownHandler = function(ev) {
+  var keyCode = ev.keyCode;
 
+  // tab
+  if (keyCode === 9) return this.destroy();
+  
+  // escape | up | down | enter
+  if (keyCode === 27 || keyCode === 40 || keyCode === 38 || keyCode === 13) {
+    ev.preventDefault();
+  }
 
-/**
- * Remove keyup handler.
- */
-function removeKeyupHandler() {
-  jqLite.off(document, 'keyup', onKeyup);
+  if (keyCode === 27) {
+    this.destroy();
+  } else if (keyCode === 40) {
+    this.increment();
+  } else if (keyCode === 38) {
+    this.decrement();
+  } else if (keyCode === 13) {
+    this.selectCurrent();
+    this.destroy();
+  }
 }
 
 
 /**
- * Teardown overlay when escape key is pressed.
+ * Handle click events on menu element.
+ * @param {Event} ev - The DOM event
  */
-function onKeyup(ev) {
-  if (ev.keyCode === 27) overlayOff();
-}
+Menu.prototype.clickHandler = function(ev) {
+  // don't allow events to bubble
+  ev.stopPropagation();
 
+  var pos = ev.target._muiPos;
 
-/**
- * Add click handler.
- */
-function addClickHandler(overlayEl) {
-  jqLite.on(overlayEl, 'click', onClick);
-}
+  // ignore clicks on non-items                                               
+  if (pos === undefined) return;
 
+  // select option
+  this.currentIndex = pos;
+  this.selectCurrent();
 
-/**
- * Remove click handler.
- */
-function removeClickHandler(overlayEl) {
-  jqLite.off(overlayEl, 'click', onClick);
+  // destroy menu
+  this.destroy();
 }
 
 
 /**
- * Teardown overlay when backdrop is clicked.
+ * Increment selected item
  */
-function onClick(ev) {
-  if (ev.target.id === overlayId) overlayOff();
-}
+Menu.prototype.increment = function() {
+  if (this.currentIndex === this.menuEl.children.length - 1) return;
 
+  var optionEls = this.menuEl.children;
+  
+  jqLite.removeClass(optionEls[this.currentIndex], selectedClass);
+  this.currentIndex += 1;
+  jqLite.addClass(optionEls[this.currentIndex], selectedClass);
+}
 
-/** Define module API */
-module.exports = overlayFn;
 
-},{"./lib/jqLite":4,"./lib/util":5}],11:[function(require,module,exports){
 /**
- * MUI CSS/JS ripple module
- * @module ripple
+ * Decrement selected item
  */
+Menu.prototype.decrement = function() {
+  if (this.currentIndex === 0) return;
 
-'use strict';
-
+  var optionEls = this.menuEl.children;
 
-var jqLite = require('./lib/jqLite'),
-    util = require('./lib/util'),
-    btnClass = 'mui-btn',
-    btnFABClass = 'mui-btn--fab',
-    rippleClass = 'mui-ripple-effect',
-    animationName = 'mui-btn-inserted';
+  jqLite.removeClass(optionEls[this.currentIndex], selectedClass);
+  this.currentIndex -= 1;
+  jqLite.addClass(optionEls[this.currentIndex], selectedClass);
+}
 
 
 /**
- * Add ripple effects to button element.
- * @param {Element} buttonEl - The button element.
+ * Select current item
  */
-function initialize(buttonEl) {
-  // check flag
-  if (buttonEl._muiRipple === true) return;
-  else buttonEl._muiRipple = true;
-
-  // exit if element is INPUT (doesn't support absolute positioned children)
-  if (buttonEl.tagName === 'INPUT') return;
+Menu.prototype.selectCurrent = function() {
+  if (this.currentIndex !== this.origIndex) {
+    var optionEls = this.selectEl.children;
+    optionEls[this.origIndex].selected = false;
+    optionEls[this.currentIndex].selected = true;
 
-  // attach event handler
-  jqLite.on(buttonEl, 'touchstart', eventHandler);
-  jqLite.on(buttonEl, 'mousedown', eventHandler);
+    // trigger change event
+    util.dispatchEvent(this.selectEl, 'change');
+  }
 }
 
 
 /**
- * Event handler
- * @param {Event} ev - The DOM event
+ * Destroy menu and detach event handlers
  */
-function eventHandler(ev) {
-  // only left clicks
-  if (ev.button !== 0) return;
-
-  var buttonEl = this;
-
-  // exit if button is disabled
-  if (buttonEl.disabled === true) return;
-
-  // de-dupe touchstart and mousedown with 100msec flag
-  if (buttonEl.touchFlag === true) {
-    return;
-  } else {
-    buttonEl.touchFlag = true;
-    setTimeout(function() {
-      buttonEl.touchFlag = false;
-    }, 100);
-  }
-
-  var rippleEl = document.createElement('div');
-  rippleEl.className = rippleClass;
-
-  var offset = jqLite.offset(buttonEl),
-      xPos = ev.pageX - offset.left,
-      yPos = ev.pageY - offset.top,
-      diameter,
-      radius;
+Menu.prototype.destroy = function() {
+  // remove element and focus element
+  var parentNode = this.menuEl.parentNode;
+  if (parentNode) parentNode.removeChild(this.menuEl);
 
-  // get height
-  if (jqLite.hasClass(buttonEl, btnFABClass)) diameter = offset.height / 2;
-  else diameter = offset.height;
+  this.selectEl.focus();
 
-  radius = diameter / 2;
-  
-  jqLite.css(rippleEl, {
-    height: diameter + 'px',
-    width: diameter + 'px',
-    top: yPos - radius + 'px',
-    left: xPos - radius + 'px'
-  });
+  // remove scroll lock
+  util.disableScrollLock();
 
-  buttonEl.appendChild(rippleEl);
-  
-  window.setTimeout(function() {
-    var parentNode = rippleEl.parentNode;
-    if (parentNode) parentNode.removeChild(rippleEl);
-  }, 2000);
+  // remove event handlers
+  jqLite.off(this.menuEl, 'click', this.clickCallbackFn);
+  jqLite.off(doc, 'keydown', this.keydownCallbackFn);
+  jqLite.off(doc, 'click', this.destroyCallbackFn);
+  jqLite.off(win, 'resize', this.destroyCallbackFn);
 }
 
 
@@ -1630,20 +1528,21 @@ function eventHandler(ev) {
 module.exports = {
   /** Initialize module listeners */
   initListeners: function() {
-    var doc = document;
-
     // markup elements available when method is called
-    var elList = doc.getElementsByClassName(btnClass);
+    var elList = doc.querySelectorAll(cssSelector);
     for (var i=elList.length - 1; i >= 0; i--) initialize(elList[i]);
 
     // listen for new elements
     util.onNodeInserted(function(el) {
-      if (jqLite.hasClass(el, btnClass)) initialize(el);
+      if (el.tagName === 'SELECT' &&
+          jqLite.hasClass(el.parentNode, wrapperClass)) {
+        initialize(el);
+      }
     });
   }
 };
 
-},{"./lib/jqLite":4,"./lib/util":5}],12:[function(require,module,exports){
+},{"./lib/forms":3,"./lib/jqLite":4,"./lib/util":5}],11:[function(require,module,exports){
 /**
  * MUI CSS/JS tabs module
  * @module tabs
@@ -1804,4 +1703,106 @@ module.exports = {
   }
 };
 
+},{"./lib/jqLite":4,"./lib/util":5}],12:[function(require,module,exports){
+/**
+ * MUI CSS/JS form-control module
+ * @module forms/form-control
+ */
+
+'use strict';
+
+
+var jqLite = require('./lib/jqLite'),
+    util = require('./lib/util'),
+    cssSelector = '.mui-textfield > input, .mui-textfield > textarea',
+    emptyClass = 'mui--is-empty',
+    notEmptyClass = 'mui--is-not-empty',
+    dirtyClass = 'mui--is-dirty',
+    floatingLabelClass = 'mui-textfield--float-label';
+
+
+/**
+ * Initialize input element.
+ * @param {Element} inputEl - The input element.
+ */
+function initialize(inputEl) {
+  // check flag
+  if (inputEl._muiTextfield === true) return;
+  else inputEl._muiTextfield = true;
+
+  if (inputEl.value.length) jqLite.addClass(inputEl, notEmptyClass);
+  else jqLite.addClass(inputEl, emptyClass);
+
+  jqLite.on(inputEl, 'input', inputHandler);
+  jqLite.on(inputEl, 'change', inputHandler);
+
+  // add dirty class on focus
+  jqLite.on(inputEl, 'focus', function(){jqLite.addClass(this, dirtyClass);});
+}
+
+
+/**
+ * Handle input events.
+ */
+function inputHandler() {
+  var inputEl = this;
+
+  if (inputEl.value.length) {
+    jqLite.removeClass(inputEl, emptyClass);
+    jqLite.addClass(inputEl, notEmptyClass);
+  } else {
+    jqLite.removeClass(inputEl, notEmptyClass);
+    jqLite.addClass(inputEl, emptyClass)
+  }
+
+  jqLite.addClass(inputEl, dirtyClass);
+}
+
+
+/** Define module API */
+module.exports = {
+  /** Initialize input elements */
+  initialize: initialize,
+  
+  /** Initialize module listeners */
+  initListeners: function() {
+    var doc = document;
+    
+    // markup elements available when method is called
+    var elList = doc.querySelectorAll(cssSelector);
+    for (var i=elList.length - 1; i >= 0; i--) initialize(elList[i]);
+
+    // listen for new elements
+    util.onNodeInserted(function(el) {
+      if (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA') initialize(el);
+    });
+
+    // add transition css for floating labels
+    setTimeout(function() {
+      var css = '.mui-textfield.mui-textfield--float-label > label {' + [
+        '-webkit-transition',
+        '-moz-transition',
+        '-o-transition',
+        'transition',
+        ''
+      ].join(':all .15s ease-out;') + '}';
+      
+      util.loadStyle(css);
+    }, 150);
+
+    // pointer-events shim for floating labels
+    if (util.supportsPointerEvents() === false) {
+      jqLite.on(document, 'click', function(ev) {
+        var targetEl = ev.target;
+
+        if (targetEl.tagName === 'LABEL' &&
+            jqLite.hasClass(targetEl.parentNode, floatingLabelClass)) {
+          var inputEl = targetEl.previousElementSibling;
+          if (inputEl) inputEl.focus();
+        }
+      });
+    }
+  }
+};
+
 },{"./lib/jqLite":4,"./lib/util":5}]},{},[1])