zurb-foundation 4.1.5 → 4.1.6

data/docs/components/split-buttons.html.erb

@@ -143,7 +143,7 @@ $split-button-pip-left-lrg:    emCalc(-9px);
         <hr>
 
         <h3>Using the JavaScript</h3>
-        <p>You don't need ths JS to create dropdown button styles with Foundation. The only reason you'll need to include <code>foundation.dropdown.js</code> is if you want to add one of our dropdowns to the button. You'll also need to make sure to include <code>zepto.js</code> and <code>foundation.js</code> above the dropdown plugin.</p>
+        <p>You don't need this JS to create dropdown button styles with Foundation. The only reason you'll need to include <code>foundation.dropdown.js</code> is if you want to add one of our dropdowns to the button. You'll also need to make sure to include <code>zepto.js</code> and <code>foundation.js</code> above the dropdown plugin.</p>
         <p>Above your closing <code>&lt;/body&gt;</code> tag include the following line of code and make sure you have the JS file in your directory:</p>
 
         <p><a href="../javascript.html" title="How to install Foundation JavaScript">Read how to install Foundation JavaScript</a></p>
@@ -169,7 +169,7 @@ $split-button-pip-left-lrg:    emCalc(-9px);
 
         <h5>Optional JavaScript Configuration</h5>
 
-        <p>Dropdwon button options can only be passed in during initialization at this time.</p>
+        <p>Dropdown button options can only be passed in during initialization at this time.</p>
 
 <%= code_example "
 {

data/docs/components/thumbnails.html.erb

@@ -52,7 +52,7 @@
 /* Using the available options */
 .your-class-name { @include thumb($border-width, $box-shadow, $box-shadow-hover); }
 
-/* Control the width of the white area around the thumnails */
+/* Control the width of the white area around the thumbnails */
 $border-width: $thumb-border-width
 
 /* Control the default box-shadow that looks like a 1px border */
@@ -86,4 +86,4 @@ $thumb-transition-speed: 200ms;', :css %>
   <div class="large-3 pull-9 columns">
     <%= render "_sidebar-components.html.erb" %>
   </div>
-</div>
+</div>

data/docs/components/top-bar.html.erb

@@ -1,5 +1,4 @@
 <% @side_nav = "nav" %>
-
 <div class="row">
   <div class="large-9 push-3 columns">
 
@@ -86,7 +85,7 @@
         <p>The top bar is built with a single <code>nav</code> element with a class of <code>top-bar</code>. It will take on full-browser width by default. To make the top bar stay fixed as you scroll, wrap it in <code>div class="fixed"</code>. If you want your navigation to be set to your grid width, wrap it in <code>div class="contain-to-grid"</code>. You may use <code>fixed</code> and <code>contain-to-grid</code> together.</p>
 
         <h5>Building the Nav</h5>
-        <p>When building your bar it is good to be aware of how many links your're going to need in it so you can customize your responsive breakpoint accordingly. Build your navigation with <code>ul.left</code> and/or <code>ul.right</code> depending where you want links. To add items, simply include <code>li</code> elements with and anchor inside them for your top-level. To build a dropdown menu, you'll need to add <code>has-dropdown</code> to the <code>li</code> and include <code>ul.dropdown</code> after that anchor. Add a class of <code>active</code> to mark the current page.</p>
+        <p>When building your bar it is good to be aware of how many links you're going to need in it so you can customize your responsive breakpoint accordingly. Build your navigation with <code>ul.left</code> and/or <code>ul.right</code> depending where you want links. To add items, simply include <code>li</code> elements with and anchor inside them for your top-level. To build a dropdown menu, you'll need to add <code>has-dropdown</code> to the <code>li</code> and include <code>ul.dropdown</code> after that anchor. Add a class of <code>active</code> to mark the current page.</p>
 
         <h5>Other Elements</h5>
         <p>To make this navigation nice and flexible, we've included patterns for elements like buttons, inputs and dividers. To create dividers between your navigation, just add an empty <code>li.divider</code> and you'll get some separation. You can use a small Foundation button in the nav, just include <code>has-form</code> as a class for its parent li. You can include two different input types: search and text. To use these, add a class of search to the parent li.</p>
@@ -280,4 +279,4 @@ $topbar-breakpoint: emCalc(940px); // Change to 9999px for always mobile layout'
   <div class="large-3 pull-9 columns">
     <%= render "_sidebar-components.html.erb" %>
   </div>
-</div>
+</div>

data/docs/components/type.html.erb

@@ -23,16 +23,16 @@
         <h2>h2. This is a large header.</h2>
         <h3>h3. This is a medium header.</h3>
         <h4>h4. This is a moderate header.</h4>
-        <h5>h5. This is a small header. h1.</h5>
-        <h6>h6. This is a tiny header. h1.</h6>
+        <h5>h5. This is a small header.</h5>
+        <h6>h6. This is a tiny header.</h6>
 
 <%= code_example '
 <h1>h1. This is a very large header.</h1>
 <h2>h2. This is a large header.</h2>
 <h3>h3. This is a medium header.</h3>
 <h4>h4. This is a moderate header.</h4>
-<h5>h5. This is a small header. h1.</h5>
-<h6>h6. This is a tiny header. h1.</h6>
+<h5>h5. This is a small header.</h5>
+<h6>h6. This is a tiny header.</h6>
 ', :html %>
 
         <hr>
@@ -181,7 +181,7 @@
             </ol>
           </div>
           <div class="large-4 columns">
-            <h6>Defition Lists</h6>
+            <h6>Definition Lists</h6>
             <dl>
               <dt>Definition Title</dt>
               <dd>Definition Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.</dd>

data/docs/components/visibility.html.erb

@@ -90,7 +90,7 @@
 .hide-for-touch       /* Hidden for touch enabled devices */
 ', :css %>
 
-        <p><strong>Note:</strong> We've also included specific table hide/show visilibity classes that follow the same structure, just prepended with table, thead, th, tbody, tr or td. The display property will go from 'none' to whatever its default display should be.</p>
+        <p><strong>Note:</strong> We've also included specific table hide/show visibility classes that follow the same structure, just prepended with table, thead, th, tbody, tr or td. The display property will go from 'none' to whatever its default display should be.</p>
 
         <hr>
 

data/docs/css/docs.scss

@@ -175,6 +175,60 @@ input[type="text"].attached-input {
   }
 }
 
+/* Section Docs */
+.section-auto-sample {
+  @include section-container($section-type:accordion);
+  & > section { @include section($section-type:accordion, $title-selector:".title-sample", $content-selector:".content-sample"); }
+
+  @media #{$small} {
+    @include section-container(false,$section-type:tabs);
+    & > section { @include section($section-type:tabs, $title-selector:".title-sample", $content-selector:".content-sample"); }
+  }
+}
+
+.section-auto-sample-accordion {
+  @include section-container($section-type:accordion);
+  & > section { @include section($section-type:accordion, $title-selector:".title-sample", $content-selector:".content-sample"); }
+}
+
+.section-auto-sample-tabs {
+  @include section-container($section-type:tabs);
+  & > section { @include section($section-type:tabs, $title-selector:".title-sample", $content-selector:".content-sample"); }
+}
+
+.section-auto-sample-vtabs,
+.section-auto-sample-vnav,
+.section-auto-sample-hnav {
+  @include section-container($section-type:accordion);
+  & > section { @include section($section-type:accordion, $title-selector:".title-sample", $content-selector:".content-sample"); }
+}
+
+@media #{$small} {
+  .section-auto-sample-vtabs {
+    @include section-container($section-type:vertical-tabs);
+    & > section { @include section($section-type:vertical-tabs, $title-selector:".title-sample", $content-selector:".content-sample"); }
+  }
+
+  .nav-container { @include grid-row($behavior:nest);
+    > nav { @include grid-column($columns:4); }
+  }
+
+  .section-auto-sample-vnav {
+    @include section-container($section-type:vertical-nav);
+    & > section { @include section($section-type:vertical-nav, $title-selector:".title-sample", $content-selector:".content-sample"); }
+  }
+
+  .section-auto-sample-hnav {
+    @include section-container($section-type:horizontal-nav);
+    & > section { @include section($section-type:horizontal-nav, $title-selector:".title-sample", $content-selector:".content-sample"); }
+  }
+
+}
+.section-auto-sample-custom {
+  @include section-container($section-type:tabs);
+  & > section { @include section($section-type:tabs, $title-selector:".title-sample", $content-selector:".content-sample", $title-padding: 10px 50px, $title-color:#000, $title-bg:pink, $title-bg-hover:darken(pink,5%), $title-bg-active: #fff, $title-color-active: darken(pink,10%)); }
+}
+
 @media only screen and (min-width: 800px) {
   .docs.header { float: $default-float; }
 

data/docs/sass.html.erb

@@ -32,9 +32,10 @@
 
     <a name="create-compass"></a>
     <h2>Creating your first project</h2>
-    <h5 class="subheader">Compass makes it really easy to start a new project. Since you've installed the Foundation gem by now, you now have Compass, Sass and a few other necessary dependencies available at your fingertips.</h5>
+    <h5 class="subheader">Compass makes it really easy to start a new project. Since you've installed the Foundation gem by now, you just need to install Compass to get going.</h5>
     <p>Follow these two steps to get going:</p>
     <ol style="margin-left: 20px;">
+      <li><span class="keystroke">[sudo] gem install compass</span></li>
       <li><span class="keystroke">cd path/to/where-you-want-your-project</span></li>
       <li>run <span class="keystroke">compass create &lt;project-name&gt; -r zurb-foundation --using foundation</span></li>
     </ol>
@@ -267,6 +268,7 @@ $em-base: 16px !default;
 // $include-html-visibility-classes: $include-html-classes;
 // $include-html-button-classes: $include-html-classes;
 // $include-html-form-classes: $include-html-classes;
+// $include-html-custom-form-classes: $include-html-classes;
 // $include-html-media-classes: $include-html-classes;
 // $include-html-section-classes: $include-html-classes;
 // $include-html-reveal-classes: $include-html-classes;

data/js/foundation/foundation.forms.js

@@ -1,19 +1,19 @@
-/*jslint unparam: true, browser: true, indent: 2 */
-
-;(function ($, window, document, undefined) {
+(function ($, window, document, undefined) {
   'use strict';
 
   Foundation.libs.forms = {
-    name : 'forms',
+    name: 'forms',
+
+    version: '4.1.6',
 
-    version : '4.0.4',
+    cache: {},
 
-    settings : {
-      disable_class: 'no-custom'
+    settings: {
+      disable_class: 'no-custom',
+      last_combo : null
     },
 
-    init : function (scope, method, options) {
-      this.scope = scope || this.scope;
+    init: function (scope, method, options) {
 
       if (typeof method === 'object') {
         $.extend(true, this.settings, method);
@@ -32,18 +32,18 @@
       }
     },
 
-    assemble : function () {
+    assemble: function () {
       $('form.custom input[type="radio"]', $(this.scope)).not('[data-customforms="disabled"]')
         .each(this.append_custom_markup);
       $('form.custom input[type="checkbox"]', $(this.scope)).not('[data-customforms="disabled"]')
         .each(this.append_custom_markup);
       $('form.custom select', $(this.scope))
-          .not('[data-customforms="disabled"]')
-          .not('[multiple=multiple]')
+        .not('[data-customforms="disabled"]')
+        .not('[multiple=multiple]')
         .each(this.append_custom_select);
     },
 
-    events : function () {
+    events: function () {
       var self = this;
 
       $(this.scope)
@@ -57,41 +57,43 @@
           e.stopPropagation();
           self.toggle_radio($(this));
         })
-        .on('change.fndtn.forms', 'form.custom select:not([data-customforms="disabled"])', function (e) {
-          self.refresh_custom_select($(this));
+        .on('change.fndtn.forms', 'form.custom select:not([data-customforms="disabled"])', function (e, force_refresh) {
+          self.refresh_custom_select($(this), force_refresh);
         })
         .on('click.fndtn.forms', 'form.custom label', function (e) {
-          var $associatedElement = $('#' + self.escape($(this).attr('for')) + ':not([data-customforms="disabled"])'),
+          if ($(e.target).is('label')) {
+            var $associatedElement = $('#' + self.escape($(this).attr('for')) + ':not([data-customforms="disabled"])'),
               $customCheckbox,
               $customRadio;
-          if ($associatedElement.length !== 0) {
-            if ($associatedElement.attr('type') === 'checkbox') {
-              e.preventDefault();
-              $customCheckbox = $(this).find('span.custom.checkbox');
-              //the checkbox might be outside after the label or inside of another element
-              if ($customCheckbox.length == 0) {
-                $customCheckbox = $associatedElement.add(this).siblings('span.custom.checkbox').first();
-              }
-              self.toggle_checkbox($customCheckbox);
-            } else if ($associatedElement.attr('type') === 'radio') {
-              e.preventDefault();
-              $customRadio = $(this).find('span.custom.radio');
-              //the radio might be outside after the label or inside of another element
-              if ($customRadio.length == 0) {
-                $customRadio = $associatedElement.add(this).siblings('span.custom.radio').first();
+
+            if ($associatedElement.length !== 0) {
+              if ($associatedElement.attr('type') === 'checkbox') {
+                e.preventDefault();
+                $customCheckbox = $(this).find('span.custom.checkbox');
+                //the checkbox might be outside after the label or inside of another element
+                if ($customCheckbox.length == 0) {
+                  $customCheckbox = $associatedElement.add(this).siblings('span.custom.checkbox').first();
+                }
+                self.toggle_checkbox($customCheckbox);
+              } else if ($associatedElement.attr('type') === 'radio') {
+                e.preventDefault();
+                $customRadio = $(this).find('span.custom.radio');
+                //the radio might be outside after the label or inside of another element
+                if ($customRadio.length == 0) {
+                  $customRadio = $associatedElement.add(this).siblings('span.custom.radio').first();
+                }
+                self.toggle_radio($customRadio);
               }
-              self.toggle_radio($customRadio);
             }
           }
         })
         .on('click.fndtn.forms', 'form.custom div.custom.dropdown a.current, form.custom div.custom.dropdown a.selector', function (e) {
           var $this = $(this),
               $dropdown = $this.closest('div.custom.dropdown'),
-              $select = $dropdown.prev();
+              $select = getFirstPrevSibling($dropdown, 'select');
 
           // make sure other dropdowns close
-          if(!$dropdown.hasClass('open'))
-            $(self.scope).trigger('click');
+          if (!$dropdown.hasClass('open')) $(self.scope).trigger('click');
 
           e.preventDefault();
           if (false === $select.is(':disabled')) {
@@ -111,32 +113,29 @@
         .on('click.fndtn.forms touchend.fndtn.forms', 'form.custom div.custom.dropdown li', function (e) {
           var $this = $(this),
               $customDropdown = $this.closest('div.custom.dropdown'),
-              $select = $customDropdown.prev(),
+              $select = getFirstPrevSibling($customDropdown, 'select'),
               selectedIndex = 0;
 
           e.preventDefault();
           e.stopPropagation();
 
-          if ( ! $(this).hasClass('disabled')) {
+          if (!$(this).hasClass('disabled')) {
             $('div.dropdown').not($customDropdown).removeClass('open');
 
-            var $oldThis= $this
-              .closest('ul')
+            var $oldThis = $this.closest('ul')
               .find('li.selected');
             $oldThis.removeClass('selected');
 
             $this.addClass('selected');
 
-            $customDropdown
-              .removeClass('open')
+            $customDropdown.removeClass('open')
               .find('a.current')
-              .html($this.html());
+              .text($this.text());
 
             $this.closest('ul').find('li').each(function (index) {
               if ($this[0] == this) {
                 selectedIndex = index;
               }
-
             });
             $select[0].selectedIndex = selectedIndex;
 
@@ -144,10 +143,11 @@
             $select.data('prevalue', $oldThis.html());
             $select.trigger('change');
           }
-        });
+      });
 
       $(window).on('keydown', function (e) {
         var focus = document.activeElement,
+            self = Foundation.libs.forms,
             dropdown = $('.custom.dropdown.open');
 
         if (dropdown.length > 0) {
@@ -156,12 +156,27 @@
           if (e.which === 13) {
             dropdown.find('li.selected').trigger('click');
           }
+          
+          if (e.which === 27) {
+            dropdown.removeClass('open');
+          }
+
+          if (e.which >= 65 && e.which <= 90) {
+            var next = self.go_to(dropdown, e.which),
+                current = dropdown.find('li.selected');
+
+            if (next) {
+              current.removeClass('selected');
+              self.scrollTo(next.addClass('selected'), 300);
+            }
+          }
 
           if (e.which === 38) {
             var current = dropdown.find('li.selected'),
                 prev = current.prev(':not(.disabled)');
 
             if (prev.length > 0) {
+              prev.parent()[0].scrollTop = prev.parent().scrollTop() - self.outerHeight(prev);
               current.removeClass('selected');
               prev.addClass('selected');
             }
@@ -170,6 +185,7 @@
                 next = current.next(':not(.disabled)');
 
             if (next.length > 0) {
+              next.parent()[0].scrollTop = next.parent().scrollTop() + self.outerHeight(next);
               current.removeClass('selected');
               next.addClass('selected');
             }
@@ -180,11 +196,42 @@
       this.settings.init = true;
     },
 
-    append_custom_markup : function (idx, sel) {
-      var $this = $(sel).addClass('hidden-field'),
-          type  = $this.attr('type'),
+    go_to: function (dropdown, char) {
+      var lis = dropdown.find('li'),
+          count = lis.length;
+
+      if (count > 0) {
+        for (var i = 0; i < count; i++) {
+          var first_letter = lis.eq(i).text().charAt(0).toLowerCase();
+          if (first_letter === String.fromCharCode(char).toLowerCase()) return lis.eq(i);
+        }
+      }
+    },
+
+    scrollTo: function (el, duration) {
+      if (duration < 0) return;
+      var parent = el.parent();
+      var li_height = this.outerHeight(el);
+      var difference = (li_height * (el.index())) - parent.scrollTop();
+      var perTick = difference / duration * 10;
+
+      this.scrollToTimerCache = setTimeout(function () {
+        if (!isNaN(parseInt(perTick, 10))) {
+          parent[0].scrollTop = parent.scrollTop() + perTick;
+          this.scrollTo(el, duration - 10);
+        }
+      }.bind(this), 10);
+    },
+
+    append_custom_markup: function (idx, sel) {
+      var $this = $(sel),
+          type = $this.attr('type'),
           $span = $this.next('span.custom.' + type);
 
+      if (!$this.parent().hasClass('switch')) {
+        $this.addClass('hidden-field');
+      }
+
       if ($span.length === 0) {
         $span = $('<span class="custom ' + type + '"></span>').insertAfter($this);
       }
@@ -193,134 +240,158 @@
       $span.toggleClass('disabled', $this.is(':disabled'));
     },
 
-    append_custom_select : function (idx, sel) {
-      var self = Foundation.libs.forms,
-          $this = $( sel ),
-          $customSelect = $this.next( 'div.custom.dropdown' ),
-          $customList = $customSelect.find( 'ul' ),
-          $selectCurrent = $customSelect.find( ".current" ),
-          $selector = $customSelect.find( ".selector" ),
-          $options = $this.find( 'option' ),
-          $selectedOption = $options.filter( ':selected' ),
-          copyClasses = $this.attr('class') ? $this.attr('class').split(' ') : [],
-          maxWidth = 0,
-          liHtml = '',
-          $listItems,
-          $currentSelect = false;
-
-      if ($this.hasClass(self.settings.disable_class)) return;
-
-      if ($customSelect.length === 0) {
-        var customSelectSize = $this.hasClass( 'small' )   ? 'small'   :
-                               $this.hasClass( 'medium' )  ? 'medium'  :
-                               $this.hasClass( 'large' )   ? 'large'   :
-                               $this.hasClass( 'expand' )  ? 'expand'  : '';
-
-        $customSelect = $('<div class="' + ['custom', 'dropdown', customSelectSize ].concat(copyClasses).filter(function(item, idx,arr){ if(item == '') return false; return arr.indexOf(item) == idx; }).join( ' ' ) + '"><a href="#" class="selector"></a><ul /></div>');
-        $selector = $customSelect.find(".selector");
-        $customList = $customSelect.find("ul");
-        liHtml = $options.map(function() { return "<li>" + $( this ).html() + "</li>"; } ).get().join( '' );
-        $customList.append(liHtml);
-        $currentSelect = $customSelect.prepend('<a href="#" class="current">' + $selectedOption.html() + '</a>' ).find( ".current" );
-        $this
-          .after( $customSelect )
-          .addClass('hidden-field');
-
-      } else {
-        liHtml = $options.map(function() {
-            return "<li>" + $( this ).html() + "</li>";
-          })
-          .get().join('');
-        $customList
-          .html('')
-          .append(liHtml);
-
-      } // endif $customSelect.length === 0
-      $customSelect.toggleClass('disabled', $this.is( ':disabled' ) );
-      $listItems = $customList.find( 'li' );
-
-      $options.each( function ( index ) {
-        if ( this.selected ) {
-          $listItems.eq( index ).addClass( 'selected' );
-
-          if ($currentSelect) {
-            $currentSelect.html( $( this ).html() );
+    append_custom_select: function (idx, sel) {
+        var self = Foundation.libs.forms,
+            $this = $(sel),
+            $customSelect = $this.next('div.custom.dropdown'),
+            $customList = $customSelect.find('ul'),
+            $selectCurrent = $customSelect.find(".current"),
+            $selector = $customSelect.find(".selector"),
+            $options = $this.find('option'),
+            $selectedOption = $options.filter(':selected'),
+            copyClasses = $this.attr('class') ? $this.attr('class').split(' ') : [],
+            maxWidth = 0,
+            liHtml = '',
+            $listItems,
+            $currentSelect = false;
+
+        if ($this.hasClass(self.settings.disable_class)) return;
+
+        if ($customSelect.length === 0) {
+          var customSelectSize = $this.hasClass('small') ? 'small' : $this.hasClass('medium') ? 'medium' : $this.hasClass('large') ? 'large' : $this.hasClass('expand') ? 'expand' : '';
+
+          $customSelect = $('<div class="' + ['custom', 'dropdown', customSelectSize].concat(copyClasses).filter(function (item, idx, arr) {
+            if (item == '') return false;
+            return arr.indexOf(item) == idx;
+          }).join(' ') + '"><a href="#" class="selector"></a><ul /></div>');
+
+          $selector = $customSelect.find(".selector");
+          $customList = $customSelect.find("ul");
+
+          liHtml = $options.map(function () {
+            return "<li>" + $(this).html() + "</li>";
+          }).get().join('');
+
+          $customList.append(liHtml);
+
+          $currentSelect = $customSelect
+            .prepend('<a href="#" class="current">' + $selectedOption.html() + '</a>')
+            .find(".current");
+
+          $this.after($customSelect)
+            .addClass('hidden-field');
+        } else {
+          liHtml = $options.map(function () {
+              return "<li>" + $(this).html() + "</li>";
+            })
+            .get().join('');
+
+          $customList.html('')
+            .append(liHtml);
+
+        } // endif $customSelect.length === 0
+
+        self.assign_id($this, $customSelect);
+        $customSelect.toggleClass('disabled', $this.is(':disabled'));
+        $listItems = $customList.find('li');
+
+        // cache list length
+        self.cache[$customSelect.data('id')] = $listItems.length;
+
+        $options.each(function (index) {
+          if (this.selected) {
+            $listItems.eq(index).addClass('selected');
+
+            if ($currentSelect) {
+              $currentSelect.html($(this).html());
+            }
+          }
+          if ($(this).is(':disabled')) {
+            $listItems.eq(index).addClass('disabled');
           }
+        });
 
-        }
-        if ($(this).is(':disabled')) {
-          $listItems.eq( index ).addClass( 'disabled' );
-        }
-      });
+        //
+        // If we're not specifying a predetermined form size.
+        //
+        if (!$customSelect.is('.small, .medium, .large, .expand')) {
 
-      //
-      // If we're not specifying a predetermined form size.
-      //
-      if (!$customSelect.is('.small, .medium, .large, .expand')) {
+          // ------------------------------------------------------------------------------------
+          // This is a work-around for when elements are contained within hidden parents.
+          // For example, when custom-form elements are inside of a hidden reveal modal.
+          //
+          // We need to display the current custom list element as well as hidden parent elements
+          // in order to properly calculate the list item element's width property.
+          // -------------------------------------------------------------------------------------
 
-        // ------------------------------------------------------------------------------------
-        // This is a work-around for when elements are contained within hidden parents.
-        // For example, when custom-form elements are inside of a hidden reveal modal.
-        //
-        // We need to display the current custom list element as well as hidden parent elements
-        // in order to properly calculate the list item element's width property.
-        // -------------------------------------------------------------------------------------
+          $customSelect.addClass('open');
+          //
+          // Quickly, display all parent elements.
+          // This should help us calcualate the width of the list item's within the drop down.
+          //
+          var self = Foundation.libs.forms;
+          self.hidden_fix.adjust($customList);
 
-        $customSelect.addClass( 'open' );
-        //
-        // Quickly, display all parent elements.
-        // This should help us calcualate the width of the list item's within the drop down.
-        //
-        var self = Foundation.libs.forms;
-        self.hidden_fix.adjust( $customList );
+          maxWidth = (self.outerWidth($listItems) > maxWidth) ? self.outerWidth($listItems) : maxWidth;
 
-        maxWidth = ( self.outerWidth($listItems) > maxWidth ) ? self.outerWidth($listItems) : maxWidth;
+          Foundation.libs.forms.hidden_fix.reset();
 
-        Foundation.libs.forms.hidden_fix.reset();
+          $customSelect.removeClass('open');
 
-        $customSelect.removeClass( 'open' );
+        } // endif
 
-      } // endif
+    },
 
+    assign_id: function ($select, $customSelect) {
+      var id = [+new Date(), Foundation.random_str(5)].join('-');
+      $select.attr('data-id', id);
+      $customSelect.attr('data-id', id);
     },
 
-    refresh_custom_select : function ($select) {
+    refresh_custom_select: function ($select, force_refresh) {
       var self = this;
       var maxWidth = 0,
-        $customSelect = $select.next(),
-        $options = $select.find('option');
+          $customSelect = $select.next(),
+          $options = $select.find('option'),
+          $listItems = $customSelect.find('li');
 
-      $customSelect.find('ul').html('');
+      if ($listItems.length != this.cache[$customSelect.data('id')] || force_refresh) {
+        $customSelect.find('ul').html('');
 
-      $options.each(function () {
-        var $li = $('<li>' + $(this).html() + '</li>');
-        $customSelect.find('ul').append($li);
-      });
+        $options.each(function () {
+          var $li = $('<li>' + $(this).html() + '</li>');
+          $customSelect.find('ul').append($li);
+        });
 
-      // re-populate
-      $options.each(function (index) {
-        if (this.selected) {
-          $customSelect.find('li').eq(index).addClass('selected');
-          $customSelect.find('.current').html($(this).html());
-        }
-        if ($(this).is(':disabled')) {
-          $customSelect.find('li').eq(index).addClass('disabled');
-        }
-      });
+        // re-populate
+        $options.each(function (index) {
+          if (this.selected) {
+            $customSelect.find('li').eq(index).addClass('selected');
+            $customSelect.find('.current').html($(this).html());
+          }
+          if ($(this).is(':disabled')) {
+            $customSelect.find('li').eq(index).addClass('disabled');
+          }
+        });
 
-      // fix width
-      $customSelect.removeAttr('style')
-        .find('ul').removeAttr('style');
-      $customSelect.find('li').each(function () {
-        $customSelect.addClass('open');
-        if (self.outerWidth($(this)) > maxWidth) {
-          maxWidth = self.outerWidth($(this));
-        }
-        $customSelect.removeClass('open');
-      });
+        // fix width
+        $customSelect.removeAttr('style')
+          .find('ul').removeAttr('style');
+        $customSelect.find('li').each(function () {
+          $customSelect.addClass('open');
+          if (self.outerWidth($(this)) > maxWidth) {
+            maxWidth = self.outerWidth($(this));
+          }
+          $customSelect.removeClass('open');
+        });
+
+        $listItems = $customSelect.find('li');
+        // cache list length
+        this.cache[$customSelect.data('id')] = $listItems.length;
+      }
     },
 
-    toggle_checkbox : function ($element) {
+    toggle_checkbox: function ($element) {
       var $input = $element.prev(),
           input = $input[0];
 
@@ -332,98 +403,111 @@
       }
     },
 
-    toggle_radio : function ($element) {
-      var $input = $element.prev(),
-          $form = $input.closest('form.custom'),
-          input = $input[0];
+    toggle_radio: function ($element) {
+        var $input = $element.prev(),
+            $form = $input.closest('form.custom'),
+            input = $input[0];
 
-      if (false === $input.is(':disabled')) {
-        $form.find('input[type="radio"][name="' + this.escape($input.attr('name')) + '"]').next().not($element).removeClass('checked');
-        if ( !$element.hasClass('checked') ) {
-          $element.toggleClass('checked');
-        }
-        input.checked = $element.hasClass('checked');
+        if (false === $input.is(':disabled')) {
+          $form.find('input[type="radio"][name="' + this.escape($input.attr('name')) + '"]')
+            .next().not($element).removeClass('checked');
 
-        $input.trigger('change');
-      }
+          if (!$element.hasClass('checked')) {
+            $element.toggleClass('checked');
+          }
+
+          input.checked = $element.hasClass('checked');
+
+          $input.trigger('change');
+        }
     },
 
-    escape : function (text) {
+    escape: function (text) {
       return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
     },
 
-    hidden_fix : {
-      /**
-       * Sets all hidden parent elements and self to visibile.
-       *
-       * @method adjust
-       * @param {jQuery Object} $child
-       */
+    hidden_fix: {
+        /**
+         * Sets all hidden parent elements and self to visibile.
+         *
+         * @method adjust
+         * @param {jQuery Object} $child
+         */
 
-      // We'll use this to temporarily store style properties.
-      tmp : [],
+        // We'll use this to temporarily store style properties.
+        tmp: [],
 
-      // We'll use this to set hidden parent elements.
-      hidden : null,
+        // We'll use this to set hidden parent elements.
+        hidden: null,
 
-      adjust : function( $child ) {
-        // Internal reference.
-        var _self = this;
+        adjust: function ($child) {
+          // Internal reference.
+          var _self = this;
 
-        // Set all hidden parent elements, including this element.
-        _self.hidden = $child.parents().andSelf().filter( ":hidden" );
+          // Set all hidden parent elements, including this element.
+          _self.hidden = $child.parents().andSelf().filter(":hidden");
 
-        // Loop through all hidden elements.
-        _self.hidden.each( function() {
+          // Loop through all hidden elements.
+          _self.hidden.each(function () {
 
-          // Cache the element.
-          var $elem = $( this );
+            // Cache the element.
+            var $elem = $(this);
 
-          // Store the style attribute.
-          // Undefined if element doesn't have a style attribute.
-          _self.tmp.push( $elem.attr( 'style' ) );
-
-          // Set the element's display property to block,
-          // but ensure it's visibility is hidden.
-          $elem.css( { 'visibility' : 'hidden', 'display' : 'block' } );
-        });
+            // Store the style attribute.
+            // Undefined if element doesn't have a style attribute.
+            _self.tmp.push($elem.attr('style'));
 
-      }, // end adjust
-
-      /**
-       * Resets the elements previous state.
-       *
-       * @method reset
-       */
-      reset : function() {
-        // Internal reference.
-        var _self = this;
-        // Loop through our hidden element collection.
-        _self.hidden.each( function( i ) {
-          // Cache this element.
-          var $elem = $( this ),
-              _tmp = _self.tmp[ i ]; // Get the stored 'style' value for this element.
-
-          // If the stored value is undefined.
-          if( _tmp === undefined )
+            // Set the element's display property to block,
+            // but ensure it's visibility is hidden.
+            $elem.css({
+                'visibility': 'hidden',
+                'display': 'block'
+            });
+          });
+
+        }, // end adjust
+
+        /**
+         * Resets the elements previous state.
+         *
+         * @method reset
+         */
+        reset: function () {
+          // Internal reference.
+          var _self = this;
+          // Loop through our hidden element collection.
+          _self.hidden.each(function (i) {
+            // Cache this element.
+            var $elem = $(this),
+                _tmp = _self.tmp[i]; // Get the stored 'style' value for this element.
+
+            // If the stored value is undefined.
+            if (_tmp === undefined)
             // Remove the style attribute.
-            $elem.removeAttr( 'style' );
-          else
+            $elem.removeAttr('style');
+            else
             // Otherwise, reset the element style attribute.
-            $elem.attr( 'style', _tmp );
-
-        });
-        // Reset the tmp array.
-        _self.tmp = [];
-        // Reset the hidden elements variable.
-        _self.hidden = null;
-
-      } // end reset
-
+            $elem.attr('style', _tmp);
+          });
+          // Reset the tmp array.
+          _self.tmp = [];
+          // Reset the hidden elements variable.
+          _self.hidden = null;
+
+        } // end reset
     },
 
-    off : function () {
+    off: function () {
       $(this.scope).off('.fndtn.forms');
     }
   };
+
+  var getFirstPrevSibling = function($el, selector) {
+    var $el = $el.prev();
+    while ($el.length) {
+      if ($el.is(selector)) return $el;
+      $el = $el.prev();
+    }
+    return $();
+  };
 }(Foundation.zj, this, this.document));