Updates to dropdown, checkbox, examples, forms

build/minified/modules/checkbox.js

@@ -4,7 +4,7 @@
   Notes: First Commit March 25, 2013
 
   Simple plug-in which maintains the state for ui checkbox
-  This can be done without javascript, only in instances 
+  This can be done without javascript, only in instances
   where each checkbox is assigned a unique ID. This provides a separate
   programmatic option when that is not possible.
 
@@ -15,7 +15,7 @@
 $.fn.checkbox = function(parameters) {
   var
     $allModules     = $(this),
-    
+
     settings        = $.extend(true, {}, $.fn.checkbox.settings, parameters),
 
     eventNamespace  = '.' + settings.namespace,
@@ -35,12 +35,13 @@ $.fn.checkbox = function(parameters) {
     .each(function() {
       var
         $module       = $(this),
+        $label        = $(this).next(settings.selector.label).first(),
         $input        = $(this).find(settings.selector.input),
 
         selector      = $module.selector || '',
         element       = this,
         instance      = $module.data('module-' + settings.namespace),
-        
+
         className     = settings.className,
         namespace     = settings.namespace,
         errors        = settings.errors,
@@ -54,6 +55,7 @@ $.fn.checkbox = function(parameters) {
             module.verbose('Initializing checkbox with delegated events', $module);
             $(element, settings.context)
               .on(selector, 'click' + eventNamespace, module.toggle)
+              .on(selector + ' + ' + settings.selector.label, 'click' + eventNamespace, module.toggle)
               .data(moduleNamespace, module)
             ;
           }
@@ -63,6 +65,9 @@ $.fn.checkbox = function(parameters) {
               .on('click' + eventNamespace, module.toggle)
               .data(moduleNamespace, module)
             ;
+            $label
+              .on('click' + eventNamespace, module.toggle)
+            ;
           }
         },
 
@@ -286,7 +291,7 @@ $.fn.checkbox.settings = {
   verbose     : true,
   debug       : true,
   performance : true,
-  
+
   // delegated event context
   context     : false,
   required    : 'auto',
@@ -294,13 +299,14 @@ $.fn.checkbox.settings = {
   onChange    : function(){},
   onEnable    : function(){},
   onDisable   : function(){},
-  
+
   errors     : {
     method   : 'The method you called is not defined.'
   },
 
   selector : {
-    input  : 'input'
+    input  : 'input',
+    label  : 'label'
   },
 
   className : {

build/minified/modules/checkbox.min.js

@@ -1 +1 @@
-(function(e,t,n,o){e.fn.checkbox=function(t){var n,i=e(this),a=e.extend(!0,{},e.fn.checkbox.settings,t),r="."+a.namespace,s="module-"+a.namespace,c=i.selector||"",l=(new Date).getTime(),u=[],d=arguments[0],m="string"==typeof d,f=[].slice.call(arguments,1);return i.each(function(){var t,i=e(this),p=e(this).find(a.selector.input),g=i.selector||"",h=this,v=i.data("module-"+a.namespace),b=a.className,y=a.namespace,x=a.errors;t={initialize:function(){a.context&&""!==g?(t.verbose("Initializing checkbox with delegated events",i),e(h,a.context).on(g,"click"+r,t.toggle).data(s,t)):(t.verbose("Initializing checkbox with bound events",i),i.on("click"+r,t.toggle).data(s,t))},destroy:function(){t.verbose("Destroying previous module for",i),i.off(y)},is:{radio:function(){return i.hasClass(b.radio)}},can:{disable:function(){return"boolean"==typeof a.required?a.required:!t.is.radio()}},enable:function(){t.debug("Enabling checkbox"),i.addClass(b.active),p.prop("checked",!0),e.proxy(a.onChange,p.get())(),e.proxy(a.onEnable,p.get())()},disable:function(){t.debug("Disabling checkbox"),i.removeClass(b.active),p.prop("checked",!1),e.proxy(a.onChange,p.get())(),e.proxy(a.onDisable,p.get())()},toggle:function(){t.verbose("Toggling checkbox state"),p.prop("checked")!==o&&p.prop("checked")?t.can.disable()&&t.disable():t.enable()},setting:function(n,i){return i===o?a[n]:(e.isPlainObject(n)?(t.verbose("Modifying settings object",n,i),e.extend(!0,a,n)):(t.verbose("Modifying setting",n,i),a[n]=i),o)},internal:function(n,i){return i===o?t[n]:(e.isPlainObject(n)?(t.verbose("Modifying internal property",n,i),e.extend(!0,t,n)):(t.verbose("Changing internal method to",i),t[n]=i),o)},debug:function(){a.debug&&(a.performance?t.performance.log(arguments):t.debug=Function.prototype.bind.call(console.info,console,a.moduleName+":"))},verbose:function(){a.verbose&&a.debug&&(a.performance?t.performance.log(arguments):t.verbose=Function.prototype.bind.call(console.info,console,a.moduleName+":"))},error:function(){t.error=Function.prototype.bind.call(console.log,console,a.moduleName+":")},performance:{log:function(e){var n,o,i;a.performance&&(n=(new Date).getTime(),i=l||n,o=n-i,l=n,u.push({Element:h,Name:e[0],Arguments:e[1]||"","Execution Time":o})),clearTimeout(t.performance.timer),t.performance.timer=setTimeout(t.performance.display,100)},display:function(){var t=a.moduleName+":",n=0;l=!1,e.each(u,function(e,t){n+=t["Execution Time"]}),t+=" "+n+"ms",c&&(t+=" '"+c+"'"),(console.group!==o||console.table!==o)&&u.length>0&&(console.groupCollapsed(t),console.table?console.table(u):e.each(u,function(e,t){console.log(t.Name+": "+t["Execution Time"]+"ms")}),console.groupEnd()),u=[]}},invoke:function(n,i,a){var r,s;return i=i||f,a=h||a,"string"==typeof n&&v!==o&&(n=n.split("."),r=n.length-1,e.each(n,function(n,i){return e.isPlainObject(v[i])&&n!=r?(v=v[i],!0):v[i]!==o?(s=v[i],!0):(t.error(x.method),!1)})),e.isFunction(s)?(v.verbose("Executing invoked function",s),s.apply(a,i)):s||!1}},m?(v===o&&t.initialize(),n=t.invoke(d)):(v!==o&&t.destroy(),t.initialize())}),n?n:this},e.fn.checkbox.settings={moduleName:"Checkbox",namespace:"checkbox",verbose:!0,debug:!0,performance:!0,context:!1,required:"auto",onChange:function(){},onEnable:function(){},onDisable:function(){},errors:{method:"The method you called is not defined."},selector:{input:"input"},className:{active:"active",radio:"radio"}}})(jQuery,window,document);
+(function(e,t,n,o){e.fn.checkbox=function(t){var n,i=e(this),a=e.extend(!0,{},e.fn.checkbox.settings,t),r="."+a.namespace,s="module-"+a.namespace,c=i.selector||"",l=(new Date).getTime(),u=[],d=arguments[0],m="string"==typeof d,f=[].slice.call(arguments,1);return i.each(function(){var t,i=e(this),g=e(this).next(a.selector.label).first(),p=e(this).find(a.selector.input),h=i.selector||"",v=this,b=i.data("module-"+a.namespace),y=a.className,x=a.namespace,C=a.errors;t={initialize:function(){a.context&&""!==h?(t.verbose("Initializing checkbox with delegated events",i),e(v,a.context).on(h,"click"+r,t.toggle).on(h+" + "+a.selector.label,"click"+r,t.toggle).data(s,t)):(t.verbose("Initializing checkbox with bound events",i),i.on("click"+r,t.toggle).data(s,t),g.on("click"+r,t.toggle))},destroy:function(){t.verbose("Destroying previous module for",i),i.off(x)},is:{radio:function(){return i.hasClass(y.radio)}},can:{disable:function(){return"boolean"==typeof a.required?a.required:!t.is.radio()}},enable:function(){t.debug("Enabling checkbox"),i.addClass(y.active),p.prop("checked",!0),e.proxy(a.onChange,p.get())(),e.proxy(a.onEnable,p.get())()},disable:function(){t.debug("Disabling checkbox"),i.removeClass(y.active),p.prop("checked",!1),e.proxy(a.onChange,p.get())(),e.proxy(a.onDisable,p.get())()},toggle:function(){t.verbose("Toggling checkbox state"),p.prop("checked")!==o&&p.prop("checked")?t.can.disable()&&t.disable():t.enable()},setting:function(n,i){return i===o?a[n]:(e.isPlainObject(n)?(t.verbose("Modifying settings object",n,i),e.extend(!0,a,n)):(t.verbose("Modifying setting",n,i),a[n]=i),o)},internal:function(n,i){return i===o?t[n]:(e.isPlainObject(n)?(t.verbose("Modifying internal property",n,i),e.extend(!0,t,n)):(t.verbose("Changing internal method to",i),t[n]=i),o)},debug:function(){a.debug&&(a.performance?t.performance.log(arguments):t.debug=Function.prototype.bind.call(console.info,console,a.moduleName+":"))},verbose:function(){a.verbose&&a.debug&&(a.performance?t.performance.log(arguments):t.verbose=Function.prototype.bind.call(console.info,console,a.moduleName+":"))},error:function(){t.error=Function.prototype.bind.call(console.log,console,a.moduleName+":")},performance:{log:function(e){var n,o,i;a.performance&&(n=(new Date).getTime(),i=l||n,o=n-i,l=n,u.push({Element:v,Name:e[0],Arguments:e[1]||"","Execution Time":o})),clearTimeout(t.performance.timer),t.performance.timer=setTimeout(t.performance.display,100)},display:function(){var t=a.moduleName+":",n=0;l=!1,e.each(u,function(e,t){n+=t["Execution Time"]}),t+=" "+n+"ms",c&&(t+=" '"+c+"'"),(console.group!==o||console.table!==o)&&u.length>0&&(console.groupCollapsed(t),console.table?console.table(u):e.each(u,function(e,t){console.log(t.Name+": "+t["Execution Time"]+"ms")}),console.groupEnd()),u=[]}},invoke:function(n,i,a){var r,s;return i=i||f,a=v||a,"string"==typeof n&&b!==o&&(n=n.split("."),r=n.length-1,e.each(n,function(n,i){return e.isPlainObject(b[i])&&n!=r?(b=b[i],!0):b[i]!==o?(s=b[i],!0):(t.error(C.method),!1)})),e.isFunction(s)?(b.verbose("Executing invoked function",s),s.apply(a,i)):s||!1}},m?(b===o&&t.initialize(),n=t.invoke(d)):(b!==o&&t.destroy(),t.initialize())}),n?n:this},e.fn.checkbox.settings={moduleName:"Checkbox",namespace:"checkbox",verbose:!0,debug:!0,performance:!0,context:!1,required:"auto",onChange:function(){},onEnable:function(){},onDisable:function(){},errors:{method:"The method you called is not defined."},selector:{input:"input",label:"label"},className:{active:"active",radio:"radio"}}})(jQuery,window,document);

build/minified/modules/dimmer.min.css

@@ -1 +1 @@
-.ui.dimmable{position:relative}.ui.dimmer{position:absolute;top:0!important;left:0!important;text-align:center;vertical-align:middle;background-color:rgba(0,0,0,.85);opacity:0;line-height:1;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;-o-animation-fill-mode:forwards;-ms-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-transition:background-color .5s linear;-moz-transition:background-color .5s linear;-o-transition:background-color .5s linear;-ms-transition:background-color .5s linear;transition:background-color .5s linear;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;z-index:1000}.ui.dimmable.dimmed>:not(.dimmer){}.ui.dimmer .content{width:100%;height:100%;display:table;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.ui.dimmer .content>*{display:table-cell;vertical-align:middle}.ui.segment>.ui.dimmer{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.ui.horizontal.segment>.ui.dimmer,.ui.vertical.segment>.ui.dimmer{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.ui.dimmable.dimmed>:not(.dimmer){-webkit-filter:blur(5px) grayscale(0.7);-moz-filter:blur(5px) grayscale(0.7);filter:url(../vector/blur.svg#blur)}body.dimmable.dimmed{overflow:hidden}.ui.dimmable.dimmed>.ui.dimmer,.ui.dimmer.active{width:100%;height:100%;opacity:1}.ui.disabled.dimmer{width:0!important;height:0!important}.ui.page.dimmer{position:fixed}body.ui.dimmable.dimmed>:not(.dimmer){-webkit-filter:blur(15px) grayscale(0.7);-moz-filter:blur(15px) grayscale(0.7);filter:url(../vector/blur.svg#blur);-webkit-translate:rotateZ(0deg);-moz-translate:rotateZ(0deg);translate:rotateZ(0deg)}.ui.dimmer .top.aligned.content>*{vertical-align:top}.ui.dimmer .bottom.aligned.content>*{vertical-align:bottom}.ui.inverted.dimmer{background-color:rgba(255,255,255,.85)}.ui.simple.dimmer{display:block;overflow:hidden;opacity:1;height:0;width:0;background-color:rgba(0,0,0,0)}.ui.dimmable.dimmed>.ui.simple.dimmer{overflow:visible;opacity:1;width:100%;height:100%;background-color:rgba(0,0,0,.85)}.ui.simple.inverted.dimmer{background-color:rgba(255,255,255,0)}.ui.dimmable.dimmed>.ui.simple.inverted.dimmer{background-color:rgba(255,255,255,.85)}.ui.dimmer.show{width:100%;height:100%;-webkit-animation:dimmer-show .5s;-moz-animation:dimmer-show .5s;animation:dimmer-show .5s}@-webkit-keyframes dimmer-show{0%{opacity:0}100%{opacity:1}}@-moz-keyframes dimmer-show{0%{opacity:0}100%{opacity:1}}@keyframes dimmer-show{0%{opacity:0}100%{opacity:1}}.ui.dimmer.hide{-webkit-animation:dimmer-hide .5s;-moz-animation:dimmer-hide .5s;animation:dimmer-hide .5s}@-webkit-keyframes dimmer-hide{0%{opacity:1}99%{width:100%;height:100%;opacity:0}100%{opacity:0;height:0;width:0}}@-moz-keyframes dimmer-hide{0%{opacity:1}99%{width:100%;height:100%;opacity:0}100%{opacity:0;height:0;width:0}}@keyframes dimmer-hide{0%{opacity:1}99%{width:100%;height:100%;opacity:0}100%{opacity:0;height:0;width:0}}
+.ui.dimmable{position:relative}.ui.dimmer{position:absolute;top:0!important;left:0!important;text-align:center;vertical-align:middle;background-color:rgba(0,0,0,.85);opacity:0;line-height:1;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;-o-animation-fill-mode:forwards;-ms-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-transition:background-color .5s linear;-moz-transition:background-color .5s linear;-o-transition:background-color .5s linear;-ms-transition:background-color .5s linear;transition:background-color .5s linear;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;z-index:1000}.ui.dimmable.dimmed>:not(.dimmer){}.ui.dimmer .content{width:100%;height:100%;display:table;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.ui.dimmer .content>*{display:table-cell;vertical-align:middle}.ui.segment>.ui.dimmer{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.ui.horizontal.segment>.ui.dimmer,.ui.vertical.segment>.ui.dimmer{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.ui.dimmable.dimmed>:not(.dimmer){-webkit-filter:blur(5px) grayscale(0.7);-moz-filter:blur(5px) grayscale(0.7);filter:url(../vector/blur.svg#blur)}body.dimmable.dimmed{overflow:hidden}.ui.dimmable.dimmed>.ui.dimmer,.ui.dimmer.active{width:100%;height:100%;opacity:1}.ui.disabled.dimmer{width:0!important;height:0!important}.ui.page.dimmer{position:fixed}body.ui.dimmable.dimmed>:not(.dimmer){-webkit-filter:blur(15px) grayscale(0.7);-moz-filter:blur(15px) grayscale(0.7);filter:url(../vector/blur.svg#blur);-webkit-translate:rotateZ(0deg);-moz-translate:rotateZ(0deg);translate:rotateZ(0deg)}.ui.dimmer .top.aligned.content>*{vertical-align:top}.ui.dimmer .bottom.aligned.content>*{vertical-align:bottom}.ui.inverted.dimmer{background-color:rgba(255,255,255,.85)}.ui.simple.dimmer{display:block;overflow:hidden;opacity:1;z-index:-100;background-color:rgba(0,0,0,0)}.ui.dimmable.dimmed>.ui.simple.dimmer{overflow:visible;opacity:1;width:100%;height:100%;background-color:rgba(0,0,0,.85)}.ui.simple.inverted.dimmer{background-color:rgba(255,255,255,0)}.ui.dimmable.dimmed>.ui.simple.inverted.dimmer{background-color:rgba(255,255,255,.85)}.ui.dimmer.show{width:100%;height:100%;-webkit-animation:dimmer-show .5s;-moz-animation:dimmer-show .5s;animation:dimmer-show .5s}@-webkit-keyframes dimmer-show{0%{opacity:0}100%{opacity:1}}@-moz-keyframes dimmer-show{0%{opacity:0}100%{opacity:1}}@keyframes dimmer-show{0%{opacity:0}100%{opacity:1}}.ui.dimmer.hide{-webkit-animation:dimmer-hide .5s;-moz-animation:dimmer-hide .5s;animation:dimmer-hide .5s}@-webkit-keyframes dimmer-hide{0%{opacity:1}99%{width:100%;height:100%;opacity:0}100%{opacity:0;height:0;width:0}}@-moz-keyframes dimmer-hide{0%{opacity:1}99%{width:100%;height:100%;opacity:0}100%{opacity:0;height:0;width:0}}@keyframes dimmer-hide{0%{opacity:1}99%{width:100%;height:100%;opacity:0}100%{opacity:0;height:0;width:0}}

build/packaged/modules/checkbox.js

@@ -4,7 +4,7 @@
   Notes: First Commit March 25, 2013
 
   Simple plug-in which maintains the state for ui checkbox
-  This can be done without javascript, only in instances 
+  This can be done without javascript, only in instances
   where each checkbox is assigned a unique ID. This provides a separate
   programmatic option when that is not possible.
 
@@ -15,7 +15,7 @@
 $.fn.checkbox = function(parameters) {
   var
     $allModules     = $(this),
-    
+
     settings        = $.extend(true, {}, $.fn.checkbox.settings, parameters),
 
     eventNamespace  = '.' + settings.namespace,
@@ -35,12 +35,13 @@ $.fn.checkbox = function(parameters) {
     .each(function() {
       var
         $module       = $(this),
+        $label        = $(this).next(settings.selector.label).first(),
         $input        = $(this).find(settings.selector.input),
 
         selector      = $module.selector || '',
         element       = this,
         instance      = $module.data('module-' + settings.namespace),
-        
+
         className     = settings.className,
         namespace     = settings.namespace,
         errors        = settings.errors,
@@ -54,6 +55,7 @@ $.fn.checkbox = function(parameters) {
             module.verbose('Initializing checkbox with delegated events', $module);
             $(element, settings.context)
               .on(selector, 'click' + eventNamespace, module.toggle)
+              .on(selector + ' + ' + settings.selector.label, 'click' + eventNamespace, module.toggle)
               .data(moduleNamespace, module)
             ;
           }
@@ -63,6 +65,9 @@ $.fn.checkbox = function(parameters) {
               .on('click' + eventNamespace, module.toggle)
               .data(moduleNamespace, module)
             ;
+            $label
+              .on('click' + eventNamespace, module.toggle)
+            ;
           }
         },
 
@@ -286,7 +291,7 @@ $.fn.checkbox.settings = {
   verbose     : true,
   debug       : true,
   performance : true,
-  
+
   // delegated event context
   context     : false,
   required    : 'auto',
@@ -294,13 +299,14 @@ $.fn.checkbox.settings = {
   onChange    : function(){},
   onEnable    : function(){},
   onDisable   : function(){},
-  
+
   errors     : {
     method   : 'The method you called is not defined.'
   },
 
   selector : {
-    input  : 'input'
+    input  : 'input',
+    label  : 'label'
   },
 
   className : {

build/uncompressed/collections/form.css

@@ -305,7 +305,20 @@
   background-color: #FFCCCC;
 }
 /*--------------------
-    Field Groups
+     Field Groups
+---------------------*/
+/* Grouped Vertically */
+.ui.form .grouped.fields {
+  margin: 0em 0em 1em;
+}
+.ui.form .grouped.fields .field {
+  display: block;
+  float: none;
+  margin: 0.5em 0em;
+  padding: 0em;
+}
+/*--------------------
+          Fields
 ---------------------*/
 /* Split fields */
 .ui.form .fields {

build/uncompressed/modules/checkbox.js

@@ -4,7 +4,7 @@
   Notes: First Commit March 25, 2013
 
   Simple plug-in which maintains the state for ui checkbox
-  This can be done without javascript, only in instances 
+  This can be done without javascript, only in instances
   where each checkbox is assigned a unique ID. This provides a separate
   programmatic option when that is not possible.
 
@@ -15,7 +15,7 @@
 $.fn.checkbox = function(parameters) {
   var
     $allModules     = $(this),
-    
+
     settings        = $.extend(true, {}, $.fn.checkbox.settings, parameters),
 
     eventNamespace  = '.' + settings.namespace,
@@ -35,12 +35,13 @@ $.fn.checkbox = function(parameters) {
     .each(function() {
       var
         $module       = $(this),
+        $label        = $(this).next(settings.selector.label).first(),
         $input        = $(this).find(settings.selector.input),
 
         selector      = $module.selector || '',
         element       = this,
         instance      = $module.data('module-' + settings.namespace),
-        
+
         className     = settings.className,
         namespace     = settings.namespace,
         errors        = settings.errors,
@@ -54,6 +55,7 @@ $.fn.checkbox = function(parameters) {
             module.verbose('Initializing checkbox with delegated events', $module);
             $(element, settings.context)
               .on(selector, 'click' + eventNamespace, module.toggle)
+              .on(selector + ' + ' + settings.selector.label, 'click' + eventNamespace, module.toggle)
               .data(moduleNamespace, module)
             ;
           }
@@ -63,6 +65,9 @@ $.fn.checkbox = function(parameters) {
               .on('click' + eventNamespace, module.toggle)
               .data(moduleNamespace, module)
             ;
+            $label
+              .on('click' + eventNamespace, module.toggle)
+            ;
           }
         },
 
@@ -286,7 +291,7 @@ $.fn.checkbox.settings = {
   verbose     : true,
   debug       : true,
   performance : true,
-  
+
   // delegated event context
   context     : false,
   required    : 'auto',
@@ -294,13 +299,14 @@ $.fn.checkbox.settings = {
   onChange    : function(){},
   onEnable    : function(){},
   onDisable   : function(){},
-  
+
   errors     : {
     method   : 'The method you called is not defined.'
   },
 
   selector : {
-    input  : 'input'
+    input  : 'input',
+    label  : 'label'
   },
 
   className : {

build/uncompressed/modules/dimmer.css

@@ -150,8 +150,7 @@ body.ui.dimmable.dimmed > :not(.dimmer) {
   display: block;
   overflow: hidden;
   opacity: 1;
-  height: 0px;
-  width: 0px;
+  z-index: -100;
   background-color: rgba(0, 0, 0, 0);
 }
 .ui.dimmable.dimmed > .ui.simple.dimmer {

build/uncompressed/modules/dropdown.css

@@ -118,9 +118,7 @@
 .ui.simple.dropdown .menu {
   display: block;
   overflow: hidden;
-  top: 100%;
-  height: 0px;
-  width: 0px;
+  top: -9999px;
   position: absolute;
   opacity: 0;
   -webkit-transition: opacity 0.2s ease-out;
@@ -129,11 +127,17 @@
   -ms-transition: opacity 0.2s ease-out;
   transition: opacity 0.2s ease-out;
 }
+.ui.simple.dropdown.visible,
+.ui.simple.dropdown:hover {
+  border-bottom-left-radius: 0em !important;
+  border-bottom-right-radius: 0em !important;
+}
 .ui.simple.dropdown.visible .menu,
 .ui.simple.dropdown:hover .menu {
   overflow: visible;
   width: auto;
   height: auto;
+  top: 100%;
   opacity: 1;
 }
 .ui.simple.disabled.dropdown:hover .menu {

node/src/documents/collections/form.html

@@ -10,14 +10,6 @@ type   : 'UI Collection'
 <div class="segment">
   <div class="container">
     <h1 class="ui dividing header">Form</h1>
-    <p>Forms are a grouping of elements requiring user input.</p>
-    <p>Form input can be validated using the <a href="/modules/form.html">form validation behavior</a></p>
-    <p> 
-      Forms always include fields, and fields always contain form elements. Fields themselves may also include:
-        <a href="/elements/input.html">ui inputs</a>, standard form fields, <a href="/elements/labels.html">ui labels</a>, textareas, as well as:
-        <a href="/modules/checkbox.html">checkboxes</a>, and <a href="/elements/message.html">message blocks</a>.
-    </p>
-    <p>Validation messages use <a href="/collections/message.html">messages</a> which are formatted for use inside forms.</p>
   </div>
 </div>
 <div class="main container">
@@ -34,6 +26,16 @@ type   : 'UI Collection'
   <div class="example">
     <h4 class="ui header">Form:</h4>
     <p>A form is a collection of user input elements, and has no stylings of its own.</p>
+    <div class="warning ui message">
+      <b>Looking for form validation?</b> 
+      Form input can be validated using the <a href="/modules/form.html">form validation behavior</a>
+    </div>
+    <p> 
+      Forms always include fields, and fields always contain form elements. Fields themselves may also include:
+        <a href="/elements/input.html">ui inputs</a>, standard form fields, <a href="/elements/labels.html">ui labels</a>, textareas, as well as:
+        <a href="/modules/checkbox.html">checkboxes</a>, and <a href="/elements/message.html">message blocks</a>.
+    </p>
+    <p>Validation messages use <a href="/collections/message.html">messages</a> which are formatted for use inside forms.</p>
     <div class="ui ignored info message">
       <p>This example uses a <a href="/elements/segment.html">ui segment</a> to add the padding and background color. This is not required.</p>
     </div>
@@ -435,8 +437,8 @@ type   : 'UI Collection'
   <h2 class="ui dividing header">Groups</h2>
   
   <div class="example">
-    <h4 class="ui header">Field Groups</h4>
-    <p>Fields can exist side by side to show relation</p>
+    <h4 class="ui header">Fields</h4>
+    <p>Fields can exist together side by side</p>
     <div class="ui form">
       <div class="ui three fields">
         <div class="field">
@@ -454,6 +456,43 @@ type   : 'UI Collection'
       </div>
     </div>
   </div>
+  
+  <div class="example">
+    <h4 class="ui header">Grouped Fields</h4>
+    <p>Fields can be grouped to show related choices</p>
+    <div class="ui form">
+      <div class="grouped inline fields">
+        <div class="field">
+          <div class="ui radio checkbox">
+            <input type="radio" name="fruit" />
+            <label></label>
+          </div>
+          <label> Apples</label> 
+        </div>
+        <div class="field">
+          <div class="ui radio checkbox">
+            <input type="radio" name="fruit" />
+            <label></label>
+          </div>
+          <label> Oranges</label> 
+        </div>
+        <div class="field">
+          <div class="ui radio checkbox">
+            <input type="radio" name="fruit" />
+            <label></label>
+          </div>
+          <label> Pears</label> 
+        </div>
+        <div class="field">
+          <div class="ui radio checkbox">
+            <input type="radio" name="fruit" />
+            <label></label>
+          </div>
+          <label> Grapefruit</label> 
+        </div>
+      </div>
+    </div>
+  </div>
 
   <div class="example">
     <h4 class="ui header">Inline</h4>

node/src/documents/modules/checkbox.html

@@ -30,18 +30,38 @@ type   : 'UI Module'
   <div class="example">
     <h4 class="ui header">Check Box</h4>
     <p>A standard checkbox</p>
-    <div class="ui checkbox">
-      <input type="checkbox" />
-      <div class="box"></div>
+    
+    <div class="ui language label">Javascript</div>
+    <div class="code">
+    $('.ui.checkbox')
+      .checkbox()
+    ;
+    </div>
+    <div class="ui language label">HTML</div>
+    <div class="ui form">
+      <div class="inline field">
+        <div class="ui checkbox">
+          <input type="checkbox" />
+          <div class="box"></div>
+        </div>
+        <label>I would like a dog.</label>
+      </div>
     </div>
+    
   </div>
 
-  <div class="example">
+  <div class="static example">
     <h4 class="ui header">Static Check Box</h4>
     <p>A checkbox can function without javascript</p>
-    <div class="ui checkbox">
-      <input type="checkbox" id="unique-id" />
-      <label class="box" for="unique-id"></label>
+    <div class="ui language label">HTML Only</div>
+    <div class="ui form">
+      <div class="inline field">
+        <div class="ui checkbox">
+          <input type="checkbox" id="unique-id" />
+          <label class="box" for="unique-id"></label>
+        </div>
+        <label for="unique-id"> I would like a dog but i am lazy.</label>
+      </div>
     </div>
   </div>
   
@@ -70,33 +90,35 @@ type   : 'UI Module'
     <h4 class="ui header">Radio Box</h4>
     <p>A checkbox can be formatted as a radio element. This means it is an exclusive option.</p>
     <div class="ui form">
-      <div class="inline field">
-        <div class="ui radio checkbox">
-          <input type="radio" name="fruit" />
-          <label></label>
+      <div class="grouped inline fields">
+        <div class="field">
+          <div class="ui radio checkbox">
+            <input type="radio" name="fruit" />
+            <label></label>
+          </div>
+          <label> Apples</label> 
         </div>
-        <label> Apples</label> 
-      </div>
-      <div class="inline field">
-        <div class="ui radio checkbox">
-          <input type="radio" name="fruit" />
-          <label></label>
+        <div class="field">
+          <div class="ui radio checkbox">
+            <input type="radio" name="fruit" />
+            <label></label>
+          </div>
+          <label> Oranges</label> 
         </div>
-        <label> Oranges</label> 
-      </div>
-      <div class="inline field">
-        <div class="ui radio checkbox">
-          <input type="radio" name="fruit" />
-          <label></label>
+        <div class="field">
+          <div class="ui radio checkbox">
+            <input type="radio" name="fruit" />
+            <label></label>
+          </div>
+          <label> Pears</label> 
         </div>
-        <label> Pears</label> 
-      </div>
-      <div class="inline field">
-        <div class="ui radio checkbox">
-          <input type="radio" name="fruit" />
-          <label></label>
+        <div class="field">
+          <div class="ui radio checkbox">
+            <input type="radio" name="fruit" />
+            <label></label>
+          </div>
+          <label> Grapefruit</label> 
         </div>
-        <label> Grapefruit</label> 
       </div>
     </div>
   </div>

node/src/files/components/semantic/collections/form.css

@@ -305,7 +305,20 @@
   background-color: #FFCCCC;
 }
 /*--------------------
-    Field Groups
+     Field Groups
+---------------------*/
+/* Grouped Vertically */
+.ui.form .grouped.fields {
+  margin: 0em 0em 1em;
+}
+.ui.form .grouped.fields .field {
+  display: block;
+  float: none;
+  margin: 0.5em 0em;
+  padding: 0em;
+}
+/*--------------------
+          Fields
 ---------------------*/
 /* Split fields */
 .ui.form .fields {

node/src/files/components/semantic/modules/behavior/state.js

@@ -305,7 +305,7 @@ $.fn.state = function(parameters) {
           if(settings.sync) {
             module.sync();
           }
-          settings.onChange();
+          $.proxy(settings.onChange, $module)();
         },
 
         activate: function() {
@@ -315,6 +315,7 @@ $.fn.state = function(parameters) {
               .addClass(className.active)
             ;
             module.text.update(text.active);
+            $.proxy(settings.onActivate, $module)();
           }
         },
 
@@ -325,6 +326,7 @@ $.fn.state = function(parameters) {
               .removeClass(className.active)
             ;
             module.text.update(text.inactive);
+            $.proxy(settings.onDeactivate, $module)();
           }
         },
 
@@ -561,7 +563,9 @@ $.fn.state.settings = {
   performance: true,
 
   // callback occurs on state change
-  onChange: function() {},
+  onChange     : function() {},
+  onActivate   : function() {},
+  onDeactivate : function() {},
 
   // state test functions
   activateTest   : function() { return true; },
@@ -626,6 +630,7 @@ $.fn.state.settings = {
   },
 
   states     : {
+    flash   : false,
     hover   : true,
     focus   : true,
     pressed : true,
@@ -638,6 +643,7 @@ $.fn.state.settings = {
     hover    : false,
     active   : false,
     inactive : false,
+    loading  : false,
     enable   : false,
     disable  : false
   }

node/src/files/components/semantic/modules/checkbox.js

@@ -4,7 +4,7 @@
   Notes: First Commit March 25, 2013
 
   Simple plug-in which maintains the state for ui checkbox
-  This can be done without javascript, only in instances 
+  This can be done without javascript, only in instances
   where each checkbox is assigned a unique ID. This provides a separate
   programmatic option when that is not possible.
 
@@ -15,7 +15,7 @@
 $.fn.checkbox = function(parameters) {
   var
     $allModules     = $(this),
-    
+
     settings        = $.extend(true, {}, $.fn.checkbox.settings, parameters),
 
     eventNamespace  = '.' + settings.namespace,
@@ -35,12 +35,13 @@ $.fn.checkbox = function(parameters) {
     .each(function() {
       var
         $module       = $(this),
+        $label        = $(this).next(settings.selector.label).first(),
         $input        = $(this).find(settings.selector.input),
 
         selector      = $module.selector || '',
         element       = this,
         instance      = $module.data('module-' + settings.namespace),
-        
+
         className     = settings.className,
         namespace     = settings.namespace,
         errors        = settings.errors,
@@ -54,6 +55,7 @@ $.fn.checkbox = function(parameters) {
             module.verbose('Initializing checkbox with delegated events', $module);
             $(element, settings.context)
               .on(selector, 'click' + eventNamespace, module.toggle)
+              .on(selector + ' + ' + settings.selector.label, 'click' + eventNamespace, module.toggle)
               .data(moduleNamespace, module)
             ;
           }
@@ -63,6 +65,9 @@ $.fn.checkbox = function(parameters) {
               .on('click' + eventNamespace, module.toggle)
               .data(moduleNamespace, module)
             ;
+            $label
+              .on('click' + eventNamespace, module.toggle)
+            ;
           }
         },
 
@@ -286,7 +291,7 @@ $.fn.checkbox.settings = {
   verbose     : true,
   debug       : true,
   performance : true,
-  
+
   // delegated event context
   context     : false,
   required    : 'auto',
@@ -294,13 +299,14 @@ $.fn.checkbox.settings = {
   onChange    : function(){},
   onEnable    : function(){},
   onDisable   : function(){},
-  
+
   errors     : {
     method   : 'The method you called is not defined.'
   },
 
   selector : {
-    input  : 'input'
+    input  : 'input',
+    label  : 'label'
   },
 
   className : {

node/src/files/components/semantic/modules/dimmer.css

@@ -150,8 +150,7 @@ body.ui.dimmable.dimmed > :not(.dimmer) {
   display: block;
   overflow: hidden;
   opacity: 1;
-  height: 0px;
-  width: 0px;
+  z-index: -100;
   background-color: rgba(0, 0, 0, 0);
 }
 .ui.dimmable.dimmed > .ui.simple.dimmer {

node/src/files/components/semantic/modules/dropdown.css

@@ -118,9 +118,7 @@
 .ui.simple.dropdown .menu {
   display: block;
   overflow: hidden;
-  top: 100%;
-  height: 0px;
-  width: 0px;
+  top: -9999px;
   position: absolute;
   opacity: 0;
   -webkit-transition: opacity 0.2s ease-out;
@@ -129,11 +127,17 @@
   -ms-transition: opacity 0.2s ease-out;
   transition: opacity 0.2s ease-out;
 }
+.ui.simple.dropdown.visible,
+.ui.simple.dropdown:hover {
+  border-bottom-left-radius: 0em !important;
+  border-bottom-right-radius: 0em !important;
+}
 .ui.simple.dropdown.visible .menu,
 .ui.simple.dropdown:hover .menu {
   overflow: visible;
   width: auto;
   height: auto;
+  top: 100%;
   opacity: 1;
 }
 .ui.simple.disabled.dropdown:hover .menu {

node/src/files/javascript/checkbox.js

@@ -5,7 +5,7 @@ semantic.dropdown.ready = function() {
 
   // selector cache
   var 
-    $checkbox = $('.ui.checkbox'),
+    $checkbox = $('.example').not('.static').find('.ui.checkbox'),
     // alias
     handler
   ;

node/src/files/javascript/semantic.js

@@ -112,7 +112,7 @@ semantic.ready = function() {
       var
         $example   = $(this).closest('.example'),
         $header    = $example.children('.ui.header:first-of-type, p:first-of-type'),
-        $demo      = $example.children().not($header).not('i.code:first-child, .annotated, br, .ignore, .ignored'),
+        $demo      = $example.children().not($header).not('i.code:first-child, .code, .language.label, .annotated, br, .ignore, .ignored'),
         $annotated = $example.find('.annotated'),
         $code      = $annotated.find('.code'),
         whiteSpace = new RegExp('\\n\\s{4}', 'g'),

node/src/files/overrides/card.js

@@ -63,6 +63,7 @@ $.fn.card = function(parameters) {
             })
           ;
           $vote
+            .popup(settings.popup.vote)
             .state(settings.state.vote)
           ;
           $close
@@ -314,7 +315,8 @@ $.fn.card.settings = {
 
   popup: {
     vote: {
-      content: ''
+      delay   : 500,
+      content : 'Vote for an idea to help it get to eval'
     }
   },
 

node/src/files/stylesheets/semantic.css

@@ -226,7 +226,7 @@ p:last-child {
   margin-bottom: 0em;
 }
 p > a {
-  font-weight: bold;
+  /* font-weight: bold; */
 }
 /* links */
 a {
@@ -473,6 +473,9 @@ a:hover {
 #example .main.ui.grid {
   position: relative;
 }
+#example .example .language.label {
+  margin: 1em 0em 0.75em;
+}
 #example .example .two.column.grid .column {
   padding-left: 4%;
   padding-right: 4%;

src/collections/form.less

@@ -395,7 +395,23 @@
 }
 
 /*--------------------
-    Field Groups
+     Field Groups
+---------------------*/
+
+/* Grouped Vertically */
+.ui.form .grouped.fields {
+  margin: 0em 0em 1em;
+}
+.ui.form .grouped.fields .field {
+  display: block;
+  float: none;
+  margin: 0.5em 0em;
+  padding: 0em;
+}
+
+
+/*--------------------
+          Fields
 ---------------------*/
 
 /* Split fields */

src/modules/checkbox.js

@@ -4,7 +4,7 @@
   Notes: First Commit March 25, 2013
 
   Simple plug-in which maintains the state for ui checkbox
-  This can be done without javascript, only in instances 
+  This can be done without javascript, only in instances
   where each checkbox is assigned a unique ID. This provides a separate
   programmatic option when that is not possible.
 
@@ -15,7 +15,7 @@
 $.fn.checkbox = function(parameters) {
   var
     $allModules     = $(this),
-    
+
     settings        = $.extend(true, {}, $.fn.checkbox.settings, parameters),
 
     eventNamespace  = '.' + settings.namespace,
@@ -35,12 +35,13 @@ $.fn.checkbox = function(parameters) {
     .each(function() {
       var
         $module       = $(this),
+        $label        = $(this).next(settings.selector.label).first(),
         $input        = $(this).find(settings.selector.input),
 
         selector      = $module.selector || '',
         element       = this,
         instance      = $module.data('module-' + settings.namespace),
-        
+
         className     = settings.className,
         namespace     = settings.namespace,
         errors        = settings.errors,
@@ -54,6 +55,7 @@ $.fn.checkbox = function(parameters) {
             module.verbose('Initializing checkbox with delegated events', $module);
             $(element, settings.context)
               .on(selector, 'click' + eventNamespace, module.toggle)
+              .on(selector + ' + ' + settings.selector.label, 'click' + eventNamespace, module.toggle)
               .data(moduleNamespace, module)
             ;
           }
@@ -63,6 +65,9 @@ $.fn.checkbox = function(parameters) {
               .on('click' + eventNamespace, module.toggle)
               .data(moduleNamespace, module)
             ;
+            $label
+              .on('click' + eventNamespace, module.toggle)
+            ;
           }
         },
 
@@ -286,7 +291,7 @@ $.fn.checkbox.settings = {
   verbose     : true,
   debug       : true,
   performance : true,
-  
+
   // delegated event context
   context     : false,
   required    : 'auto',
@@ -294,13 +299,14 @@ $.fn.checkbox.settings = {
   onChange    : function(){},
   onEnable    : function(){},
   onDisable   : function(){},
-  
+
   errors     : {
     method   : 'The method you called is not defined.'
   },
 
   selector : {
-    input  : 'input'
+    input  : 'input',
+    label  : 'label'
   },
 
   className : {

src/modules/dimmer.less

@@ -192,8 +192,7 @@ body.ui.dimmable.dimmed > :not(.dimmer){
   display: block;
   overflow: hidden;
   opacity: 1;
-  height: 0px;
-  width: 0px;
+  z-index: -100;
   background-color: rgba(0, 0, 0, 0);
 }
 .ui.dimmable.dimmed > .ui.simple.dimmer {

src/modules/dropdown.less

@@ -167,9 +167,7 @@
 .ui.simple.dropdown .menu {
   display: block;
   overflow: hidden;
-  top: 100%;
-  height: 0px;
-  width: 0px;
+  top: -9999px;
   position: absolute;
   opacity: 0;
   -webkit-transition: opacity 0.2s ease-out;
@@ -178,11 +176,19 @@
   -ms-transition: opacity 0.2s ease-out;
   transition: opacity 0.2s ease-out;
 }
+
+.ui.simple.dropdown.visible,
+.ui.simple.dropdown:hover {
+  border-bottom-left-radius: 0em !important;
+  border-bottom-right-radius: 0em !important;
+}
+
 .ui.simple.dropdown.visible .menu,
 .ui.simple.dropdown:hover .menu {
   overflow: visible;
   width: auto;
   height: auto;
+  top: 100%;
   opacity: 1;
 }
 .ui.simple.disabled.dropdown:hover .menu {