Near complete rewrite of popup

RELEASE NOTES.md

@@ -1,5 +1,27 @@
 ## RELEASE NOTES
 
+### Version 0.6.4 - Oct 15, 2013
+
+**New**
+- Popups can now have a different target element than itself
+
+**Fixes**
+- Popup fixed a bug where "top right" placed popup might sometimes be too large
+- Popup will not reshow a visible popup on hover
+- Popup .toggle() now always hides/shows popup correctly
+- Dropdown cannot display inside item image
+- Dropdown links were being prevented by event.preventDefault used for touch devices
+
+**Updates**
+- Ribbon labels now have a shadow color
+- Popups are no longer inline by default
+- Popup metadata attribute arrowOffset is now offset for simplicities sake
+- Adds more popup examples
+- Popup default duration is now 200ms (slighty slower)
+- Popup border now uses RGBA to look sexier on dark backgrounds
+- Popup no-longer receives class name 'visible' on show, this allows popups to be used on dropdowns and other elements with a visible state
+- Optimizes dimmer init on modal to occur on modal init and not modal show
+
 ### Version 0.6.3 - Oct 15, 2013
 
 **Deprecation**

build/less/elements/label.less

@@ -266,11 +266,14 @@ a.ui.label:hover:before {
 
 .ui.ribbon.label {
   position: relative;
-  left: -1.8rem;
+  margin: 0em 0.2em;
+  left: -2rem;
   padding-left: 2rem;
   -webkit-border-radius: 0px 4px 4px 0px;
   -moz-border-radius: 0px 4px 4px 0px;
   border-radius: 0px 4px 4px 0px;
+
+  border-color: rgba(0, 0, 0, 0.15);
 }
 
 .ui.ribbon.label:after {
@@ -495,13 +498,13 @@ a.ui.label:hover:before {
 /* Hover */
 a.ui.black.labels .label:hover,
 a.ui.black.label:hover {
-  background-color: #888888 !important;
-  border-color: #888888 !important;
+  background-color: #333333 !important;
+  border-color: #333333 !important;
 }
 .ui.labels a.black.label:hover:before,
 .ui.black.labels a.label:hover:before,
 a.ui.black.label:hover:before {
-  background-color: #888888 !important;
+  background-color: #333333 !important;
 }
 
 /* Corner */
@@ -509,6 +512,10 @@ a.ui.black.label:hover:before {
 .ui.black.corner.label:hover {
   background-color: transparent !important;
 }
+/* Ribbon */
+.ui.black.ribbon.label {
+  border-color: #333333 !important;
+}
 
 
 /*--- Green ---*/
@@ -541,6 +548,10 @@ a.ui.green.label:hover:before {
 .ui.green.corner.label:hover {
   background-color: transparent !important;
 }
+/* Ribbon */
+.ui.green.ribbon.label {
+  border-color: #89B84C !important;
+}
 
 
 /*--- Red ---*/
@@ -573,6 +584,10 @@ a.ui.red.label:hover{
 a.ui.red.label:hover:before {
   background-color: #DE3859 !important;
 }
+/* Ribbon */
+.ui.red.ribbon.label {
+  border-color: #DE3859 !important;
+}
 
 
 /*--- Blue ---*/
@@ -605,6 +620,10 @@ a.ui.blue.label:hover:before {
 .ui.blue.corner.label:hover {
   background-color: transparent !important;
 }
+/* Ribbon */
+.ui.blue.ribbon.label {
+  border-color: #1AB8F3 !important;
+}
 
 /*--- Purple ---*/
 .ui.purple.labels .label,
@@ -636,6 +655,10 @@ a.ui.purple.label:hover:before {
 .ui.purple.corner.label:hover {
   background-color: transparent !important;
 }
+/* Ribbon */
+.ui.purple.ribbon.label {
+  border-color: #3E3773 !important;
+}
 
 /*--- Orange ---*/
 .ui.orange.labels .label,
@@ -667,11 +690,15 @@ a.ui.orange.label:hover:before {
 .ui.orange.corner.label:hover {
   background-color: transparent !important;
 }
+/* Ribbon */
+.ui.orange.ribbon.label {
+  border-color: #FF4121 !important;
+}
 
 
 
 
-/*--- Pink ---*/
+/*--- Teal ---*/
 .ui.teal.labels .label,
 .ui.teal.label {
   background-color: #00B5AD !important;
@@ -701,6 +728,10 @@ a.ui.teal.label:hover:before {
 .ui.teal.corner.label:hover {
   background-color: transparent !important;
 }
+/* Ribbon */
+.ui.teal.ribbon.label {
+  border-color: #009A93 !important;
+}
 
 /*-------------------
      Horizontal

build/less/modules/dimmer.js

@@ -54,6 +54,8 @@ $.fn.dimmer = function(parameters) {
         module
       ;
 
+      console.log(element, parameters);
+
       module = {
 
         preinitialize: function() {

build/less/modules/dropdown.js

@@ -222,7 +222,6 @@ $.fn.dropdown = function(parameters) {
               if( $choice.find(selector.menu).size() === 0 ) {
                 module.determine.selectAction(text, value);
                 $.proxy(settings.onChange, element)(value, text);
-                event.preventDefault();
               }
             }
 

build/less/modules/modal.js

@@ -64,9 +64,14 @@ $.fn.modal = function(parameters) {
           module.verbose('Initializing dimmer', $context);
 
           $dimmable = $context
+            .dimmer({
+              closable : false,
+              show     : settings.duration * 0.95,
+              hide     : settings.duration * 1.05
+            })
             .dimmer('add content', $module)
           ;
-          $dimmer = $context
+          $dimmer = $dimmable
             .dimmer('get dimmer')
           ;
 
@@ -201,7 +206,6 @@ $.fn.modal = function(parameters) {
 
         showDimmer: function() {
           module.debug('Showing modal');
-          module.set.dimmerSettings();
           $dimmable.dimmer('show');
         },
 
@@ -331,16 +335,6 @@ $.fn.modal = function(parameters) {
               ;
             }
           },
-          dimmerSettings: function() {
-            module.debug('Setting dimmer settings', $dimmable);
-            $dimmable
-              .dimmer({
-                closable: false,
-                show: settings.duration * 0.95,
-                hide: settings.duration * 1.05
-              })
-            ;
-          },
           scrolling: function() {
             $dimmable.addClass(className.scrolling);
             $module.addClass(className.scrolling);

build/less/modules/popup.js

@@ -15,6 +15,7 @@ $.fn.popup = function(parameters) {
   var
     $allModules     = $(this),
     $document       = $(document),
+    $body           = $('body'),
 
     moduleSelector  = $allModules.selector || '',
 
@@ -44,11 +45,17 @@ $.fn.popup = function(parameters) {
         moduleNamespace = 'module-' + namespace,
 
         $module         = $(this),
+        $target         = (settings.target)
+          ? $(settings.target)
+          : $module,
 
         $window         = $(window),
-        $offsetParent   = $module.offsetParent(),
+
+        $offsetParent   = (settings.inline)
+          ? $target.offsetParent()
+          : $window,
         $popup          = (settings.inline)
-          ? $module.next(settings.selector.popup)
+          ? $target.next(settings.selector.popup)
           : $window.children(settings.selector.popup).last(),
 
         searchDepth     = 0,
@@ -63,17 +70,20 @@ $.fn.popup = function(parameters) {
         // binds events
         initialize: function() {
           module.debug('Initializing module', $module);
-          if(settings.on == 'hover') {
+          if(settings.on == 'click') {
             $module
-              .on('mouseenter' + eventNamespace, module.event.mouseenter)
-              .on('mouseleave' + eventNamespace, module.event.mouseleave)
+              .on('click', module.toggle)
             ;
           }
           else {
             $module
-              .on(settings.on + '' + eventNamespace, module.event[settings.on])
+              .on(module.get.startEvent() + eventNamespace, module.event.start)
+              .on(module.get.endEvent() + eventNamespace, module.event.end)
             ;
           }
+          if(settings.target) {
+            module.debug('Target set to element', $target);
+          }
           $window
             .on('resize' + eventNamespace, module.event.resize)
           ;
@@ -89,11 +99,14 @@ $.fn.popup = function(parameters) {
         },
 
         refresh: function() {
-          $popup        = (settings.inline)
-            ? $module.next(selector.popup)
-            : $window.children(selector.popup).last()
-          ;
-          $offsetParent = $module.offsetParent();
+          if(settings.inline) {
+            $popup = $target.next(selector.popup);
+            $offsetParent = $target.offsetParent();
+          }
+          else {
+            console.log('found by refresh');
+            $popup = $window.children(selector.popup).last();
+          }
         },
 
         destroy: function() {
@@ -101,6 +114,9 @@ $.fn.popup = function(parameters) {
           $window
             .off(eventNamespace)
           ;
+          $popup
+            .remove()
+          ;
           $module
             .off(eventNamespace)
             .removeData(moduleNamespace)
@@ -108,30 +124,22 @@ $.fn.popup = function(parameters) {
         },
 
         event: {
-          mouseenter:  function(event) {
-            var element = this;
+          start:  function(event) {
             module.timer = setTimeout(function() {
-              $.proxy(module.toggle, element)();
-              if( $(element).hasClass(className.visible) ) {
-                event.stopPropagation();
+              if( module.is.hidden() ) {
+                module.show();
               }
             }, settings.delay);
           },
-          mouseleave:  function() {
+          end:  function() {
             clearTimeout(module.timer);
-            if( $module.is(':visible') ) {
+            if( module.is.visible() ) {
               module.hide();
             }
           },
-          click: function(event) {
-            $.proxy(module.toggle, this)();
-            if( $(this).hasClass(className.visible) ) {
-              event.stopPropagation();
-            }
-          },
           resize: function() {
-            if( $popup.is(':visible') ) {
-              module.position();
+            if( module.is.visible() ) {
+              module.set.position();
             }
           }
         },
@@ -166,7 +174,7 @@ $.fn.popup = function(parameters) {
             else {
               module.verbose('Appending popup element to body', $popup);
               $popup
-                .appendTo( $('body') )
+                .appendTo( $body )
               ;
             }
             $.proxy(settings.onCreate, $popup)();
@@ -176,6 +184,87 @@ $.fn.popup = function(parameters) {
           }
         },
 
+        // determines popup state
+        toggle: function() {
+          module.debug('Toggling pop-up');
+          if( module.is.hidden() ) {
+            module.hideAll();
+            module.show();
+          }
+          else {
+            module.hide();
+          }
+        },
+
+        show: function() {
+          module.debug('Showing pop-up', settings.transition);
+          if( !module.exists() ) {
+            module.create();
+          }
+          module.set.position();
+          $module
+            .addClass(className.visible)
+          ;
+          if(settings.transition && $.fn.transition !== undefined) {
+            $popup
+              .transition(settings.transition + ' in', settings.duration, module.bind.close)
+            ;
+          }
+          else {
+            $popup
+              .stop()
+              .fadeIn(settings.duration, settings.easing, module.bind.close)
+            ;
+          }
+          $.proxy(settings.onShow, $popup)();
+        },
+
+
+        hide: function() {
+          $module
+            .removeClass(className.visible)
+          ;
+          module.unbind.close();
+          if( module.is.visible() ) {
+            module.debug('Hiding pop-up');
+            if(settings.transition && $.fn.transition !== undefined) {
+              $popup
+                .transition(settings.transition + ' out', settings.duration, module.reset)
+              ;
+            }
+            else {
+              $popup
+                .stop()
+                .fadeOut(settings.duration, settings.easing, module.reset)
+              ;
+            }
+          }
+          $.proxy(settings.onHide, $popup)();
+        },
+
+        hideAll: function() {
+          $(selector.popup)
+            .filter(':visible')
+              .popup('hide')
+          ;
+        },
+
+        hideGracefully: function(event) {
+          // don't close on clicks inside popup
+          if( $(event.target).closest(selector.popup).size() === 0) {
+            module.hide();
+          }
+        },
+
+        exists: function() {
+          if(settings.inline) {
+            return ( $popup.size() !== 0 );
+          }
+          else {
+            return ( $popup.parent($body).size() );
+          }
+        },
+
         remove: function() {
           module.debug('Removing popup');
           $popup
@@ -184,6 +273,22 @@ $.fn.popup = function(parameters) {
         },
 
         get: {
+          startEvent: function() {
+            if(settings.on == 'hover') {
+              return 'mouseenter';
+            }
+            else if(settings.on == 'focus') {
+              return 'focus';
+            }
+          },
+          endEvent: function() {
+            if(settings.on == 'hover') {
+              return 'mouseleave';
+            }
+            else if(settings.on == 'focus') {
+              return 'blur';
+            }
+          },
           offstagePosition: function() {
             var
               boundary  = {
@@ -251,229 +356,184 @@ $.fn.popup = function(parameters) {
           }
         },
 
-        // determines popup state
-        toggle: function() {
-          $module = $(this);
-          module.debug('Toggling pop-up');
-          // refresh state of module
-          module.refresh();
-          if( !$module.hasClass(className.visible) ) {
-            if(settings.on == 'click') {
-              module.hideAll();
-            }
-            module.show();
-          }
-          else {
-            // module.hide();
-          }
-        },
+        set: {
+          position: function(position, arrowOffset) {
+            var
+              windowWidth  = $(window).width(),
+              windowHeight = $(window).height(),
 
-        position: function(position, arrowOffset) {
-          var
-            windowWidth  = $(window).width(),
-            windowHeight = $(window).height(),
-            width        = $module.outerWidth(),
-            height       = $module.outerHeight(),
-            popupWidth   = $popup.width(),
-            popupHeight  = $popup.outerHeight(),
-
-            offset       = (settings.inline)
-              ? $module.position()
-              : $module.offset(),
-            parentWidth  = (settings.inline)
-              ? $offsetParent.outerWidth()
-              : $window.outerWidth(),
-            parentHeight = (settings.inline)
-              ? $offsetParent.outerHeight()
-              : $window.outerHeight(),
-
-            positioning,
-            offstagePosition
-          ;
-          position    = position    || $module.data(metadata.position)    || settings.position;
-          arrowOffset = arrowOffset || $module.data(metadata.arrowOffset) || settings.arrowOffset;
-          module.debug('Calculating offset for position', position);
-          switch(position) {
-            case 'top left':
-              positioning = {
-                bottom :  parentHeight - offset.top + settings.distanceAway,
-                right  :  parentWidth - offset.left - width - arrowOffset,
-                top    : 'auto',
-                left   : 'auto'
-              };
-            break;
-            case 'top center':
-              positioning = {
-                bottom :  parentHeight - offset.top + settings.distanceAway,
-                left   : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset,
-                top    : 'auto',
-                right  : 'auto'
-              };
-            break;
-            case 'top right':
-              positioning = {
-                top    : 'auto',
-                bottom :  parentHeight - offset.top + settings.distanceAway,
-                left   : offset.left + arrowOffset
-              };
-            break;
-            case 'left center':
-              positioning = {
-                top    :  offset.top + (height / 2) - (popupHeight / 2),
-                right  : parentWidth - offset.left + settings.distanceAway - arrowOffset,
-                left   : 'auto',
-                bottom : 'auto'
-              };
-            break;
-            case 'right center':
-              positioning = {
-                top    :  offset.top + (height / 2) - (popupHeight / 2),
-                left   : offset.left + width + settings.distanceAway + arrowOffset,
-                bottom : 'auto',
-                right  : 'auto'
-              };
-            break;
-            case 'bottom left':
-              positioning = {
-                top    :  offset.top + height + settings.distanceAway,
-                right  : parentWidth - offset.left - width - arrowOffset,
-                left   : 'auto',
-                bottom : 'auto'
-              };
-            break;
-            case 'bottom center':
-              positioning = {
-                top    :  offset.top + height + settings.distanceAway,
-                left   : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset,
-                bottom : 'auto',
-                right  : 'auto'
-              };
-            break;
-            case 'bottom right':
-              positioning = {
-                top    :  offset.top + height + settings.distanceAway,
-                left   : offset.left + arrowOffset,
-                bottom : 'auto',
-                right  : 'auto'
-              };
-            break;
-          }
-          // true width on popup, avoid rounding error
-          $.extend(positioning, {
-            width: $popup.width() + 1
-          });
-          // tentatively place on stage
-          $popup
-            .css(positioning)
-            .removeClass(className.position)
-            .addClass(position)
-          ;
-          // check if is offstage
-          offstagePosition = module.get.offstagePosition();
-          // recursively find new positioning
-          if(offstagePosition) {
-            module.debug('Element is outside boundaries ', offstagePosition);
-            if(searchDepth < settings.maxSearchDepth) {
-              position = module.get.nextPosition(position);
-              searchDepth++;
-              module.debug('Trying new position: ', position);
-              return module.position(position);
-            }
-            else {
-              module.error(error.recursion);
-              searchDepth = 0;
-              return false;
-            }
-          }
-          else {
-            module.debug('Position is on stage', position);
-            searchDepth = 0;
-            return true;
-          }
-        },
+              width        = $target.outerWidth(),
+              height       = $target.outerHeight(),
 
-        show: function() {
-          module.debug('Showing pop-up', settings.transition);
-          if($popup.size() === 0) {
-            module.create();
-          }
-          module.position();
-          $module
-            .addClass(className.visible)
-          ;
-          if(settings.transition && $.fn.transition !== undefined) {
-            $popup
-              .transition(settings.transition + ' in', settings.duration)
+              popupWidth   = $popup.width(),
+              popupHeight  = $popup.outerHeight(),
+
+              parentWidth  = $offsetParent.outerWidth(),
+              parentHeight = $offsetParent.outerHeight(),
+
+              distanceAway = settings.distanceAway,
+
+              offset       = (settings.inline)
+                ? $target.position()
+                : $target.offset(),
+
+              positioning,
+              offstagePosition
             ;
-          }
-          else {
+            position    = position    || $module.data(metadata.position)    || settings.position;
+            arrowOffset = arrowOffset || $module.data(metadata.offset)      || settings.offset;
+            // adjust for margin when inline
+            if(settings.inline) {
+              if(position == 'left center' || position == 'right center') {
+                arrowOffset  += parseInt( window.getComputedStyle(element).getPropertyValue('margin-top'), 10);
+                distanceAway += -parseInt( window.getComputedStyle(element).getPropertyValue('margin-left'), 10);
+              }
+              else {
+                arrowOffset  += parseInt( window.getComputedStyle(element).getPropertyValue('margin-left'), 10);
+                distanceAway += parseInt( window.getComputedStyle(element).getPropertyValue('margin-top'), 10);
+              }
+            }
+            module.debug('Calculating offset for position', position);
+            switch(position) {
+              case 'top left':
+                positioning = {
+                  bottom :  parentHeight - offset.top + distanceAway,
+                  right  :  parentWidth - offset.left - arrowOffset,
+                  top    : 'auto',
+                  left   : 'auto'
+                };
+              break;
+              case 'top center':
+                positioning = {
+                  bottom :  parentHeight - offset.top + distanceAway,
+                  left   : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset,
+                  top    : 'auto',
+                  right  : 'auto'
+                };
+              break;
+              case 'top right':
+                positioning = {
+                  top    : 'auto',
+                  bottom :  parentHeight - offset.top + distanceAway,
+                  left   : offset.left + width + arrowOffset,
+                  right  : 'auto'
+                };
+              break;
+              case 'left center':
+                positioning = {
+                  top    :  offset.top + (height / 2) - (popupHeight / 2) + arrowOffset,
+                  right  : parentWidth - offset.left + distanceAway,
+                  left   : 'auto',
+                  bottom : 'auto'
+                };
+              break;
+              case 'right center':
+                positioning = {
+                  top    :  offset.top + (height / 2) - (popupHeight / 2) + arrowOffset,
+                  left   : offset.left + width + distanceAway,
+                  bottom : 'auto',
+                  right  : 'auto'
+                };
+              break;
+              case 'bottom left':
+                positioning = {
+                  top    :  offset.top + height + distanceAway,
+                  right  : parentWidth - offset.left - arrowOffset,
+                  left   : 'auto',
+                  bottom : 'auto'
+                };
+              break;
+              case 'bottom center':
+                positioning = {
+                  top    :  offset.top + height + distanceAway,
+                  left   : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset,
+                  bottom : 'auto',
+                  right  : 'auto'
+                };
+              break;
+              case 'bottom right':
+                positioning = {
+                  top    :  offset.top + height + distanceAway,
+                  left   : offset.left + width + arrowOffset,
+                  bottom : 'auto',
+                  right  : 'auto'
+                };
+              break;
+            }
+            // tentatively place on stage
             $popup
-              .stop()
-              .fadeIn(settings.duration, settings.easing)
-            ;
-          }
-          if(settings.on == 'click' && settings.clicktoClose) {
-            module.debug('Binding popup close event');
-            $document
-              .on('click.' + namespace, module.gracefully.hide)
+              .css(positioning)
+              .removeClass(className.position)
+              .addClass(position)
             ;
+            // check if is offstage
+            offstagePosition = module.get.offstagePosition();
+
+            // recursively find new positioning
+            if(offstagePosition) {
+              module.debug('Element is outside boundaries', offstagePosition);
+              if(searchDepth < settings.maxSearchDepth) {
+                position = module.get.nextPosition(position);
+                searchDepth++;
+                module.debug('Trying new position', position);
+                return module.set.position(position);
+              }
+              else {
+                module.error(error.recursion);
+                searchDepth = 0;
+                return false;
+              }
+            }
+            else {
+              module.debug('Position is on stage', position);
+              searchDepth = 0;
+              return true;
+            }
           }
-          $.proxy(settings.onShow, $popup)();
-        },
 
-        hideAll: function() {
-          $(selector.popup)
-            .filter(':visible')
-              .popup('hide')
-          ;
         },
 
-        hide: function() {
-          $module
-            .removeClass(className.visible)
-          ;
-          if($popup.is(':visible') ) {
-            module.debug('Hiding pop-up');
-            if(settings.transition && $.fn.transition !== undefined) {
-              $popup
-                .transition(settings.transition + ' out', settings.duration, module.reset)
+        bind: {
+          close:function() {
+            if(settings.on == 'click' && settings.closable) {
+              module.verbose('Binding popup close event to document');
+              $document
+                .on('click' + eventNamespace, module.hideGracefully)
               ;
             }
-            else {
-              $popup
-                .stop()
-                .fadeOut(settings.duration, settings.easing, module.reset)
+          }
+        },
+
+        unbind: {
+          close: function() {
+            if(settings.on == 'click' && settings.closable) {
+              module.verbose('Removing close event from document');
+              $document
+                .off('click' + eventNamespace)
               ;
             }
           }
-          if(settings.on == 'click' && settings.clicktoClose) {
-            $document
-              .off('click.' + namespace)
-            ;
+        },
+
+        is: {
+          visible: function() {
+            return $popup.is(':visible');
+          },
+          hidden: function() {
+            return !module.is.visible();
           }
-          $.proxy(settings.onHide, $popup)();
         },
 
         reset: function() {
-          module.verbose('Resetting inline styles');
           $popup
             .attr('style', '')
             .removeAttr('style')
           ;
-          if(!settings.inline) {
+          if(!settings.preserve) {
             module.remove();
           }
         },
 
-        gracefully: {
-          hide: function(event) {
-            // don't close on clicks inside popup
-            if( $(event.target).closest(selector.popup).size() === 0) {
-              module.hide();
-            }
-          }
-        },
-
         setting: function(name, value) {
           if(value !== undefined) {
             if( $.isPlainObject(name) ) {
@@ -661,7 +721,7 @@ $.fn.popup.settings = {
   performance    : true,
   namespace      : 'popup',
 
-  onCreate         : function(){},
+  onCreate       : function(){},
   onShow         : function(){},
   onHide         : function(){},
 
@@ -671,18 +731,20 @@ $.fn.popup.settings = {
   title          : false,
 
   on             : 'hover',
-  clicktoClose   : true,
+  target         : false,
+  closable       : true,
 
   position       : 'top center',
   delay          : 150,
-  inline         : true,
+  inline         : false,
+  preserve       : false,
 
-  duration       : 150,
+  duration       : 250,
   easing         : 'easeOutQuint',
   transition     : 'scale',
 
   distanceAway   : 0,
-  arrowOffset    : 0,
+  offset         : 0,
   maxSearchDepth : 10,
 
   error: {
@@ -692,19 +754,19 @@ $.fn.popup.settings = {
   },
 
   metadata: {
-    arrowOffset : 'arrowOffset',
-    content     : 'content',
-    html        : 'html',
-    position    : 'position',
-    title       : 'title',
-    variation   : 'variation'
+    content   : 'content',
+    html      : 'html',
+    offset    : 'offset',
+    position  : 'position',
+    title     : 'title',
+    variation : 'variation'
   },
 
   className   : {
-    popup       : 'ui popup',
-    visible     : 'visible',
     loading     : 'loading',
-    position    : 'top left center bottom right'
+    popup       : 'ui popup',
+    position    : 'top left center bottom right',
+    visible     : 'visible'
   },
 
   selector    : {

build/less/modules/popup.less

@@ -20,7 +20,7 @@
   right: 0px;
   z-index: 900;
 
-  border: 1px solid #DCDDDE;
+  border: 1px solid rgba(0, 0, 0, 0.1);
   max-width: 250px;
   background-color: #FFFFFF;
 
@@ -34,9 +34,9 @@
   -moz-border-radius: 0.2em;
   border-radius: 0.2em;
 
-  -webkit-box-shadow: 0px 1px 1px #DCDDDE;
-  -moz-box-shadow: 0px 1px 1px #DCDDDE;
-  box-shadow: 0px 1px 1px #DCDDDE;
+  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
 }
 .ui.popup .header {
   padding: 0em 0em 0.5em;
@@ -66,9 +66,9 @@
   -ms-box-sizing: border-box;
   box-sizing: border-box;
 
-  -webkit-box-shadow: 1px 1px 1px #DCDDDE;
-  -moz-box-shadow: 1px 1px 1px #DCDDDE;
-  box-shadow: 1px 1px 1px #DCDDDE;
+  -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
 }
 
 .ui.popup .ui.button {
@@ -113,13 +113,13 @@
   left: 50%;
   right: auto;
   bottom: auto;
-  -webkit-box-shadow: -1px -1px 1px #dcddde;
-  -moz-box-shadow: -1px -1px 1px #dcddde;
-  box-shadow: -1px -1px 1px #dcddde;
+  -webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
 }
 
 .ui.bottom.left.popup {
-  margin-right: -0.8em;
+  margin-right: -2em;
 }
 .ui.bottom.left.popup:before {
   top: -0.4em;
@@ -127,13 +127,13 @@
   bottom: auto;
   left: auto;
   margin-left: 0em;
-  -webkit-box-shadow: -1px -1px 1px #dcddde;
-  -moz-box-shadow: -1px -1px 1px #dcddde;
-  box-shadow: -1px -1px 1px #dcddde;
+  -webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
 }
 
 .ui.bottom.right.popup {
-  margin-left: -0.8em;
+  margin-left: -2em;
 }
 .ui.bottom.right.popup:before {
   top: -0.4em;
@@ -141,9 +141,9 @@
   right: auto;
   bottom: auto;
   margin-left: 0em;
-  -webkit-box-shadow: -1px -1px 1px #dcddde;
-  -moz-box-shadow: -1px -1px 1px #dcddde;
-  box-shadow: -1px -1px 1px #dcddde;
+  -webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
 }
 
 /*--- Above ---*/
@@ -155,7 +155,7 @@
   margin-left: -0.4em;
 }
 .ui.top.left.popup {
-  margin-right: -0.8em;
+  margin-right: -2em;
 }
 .ui.top.left.popup:before {
   bottom: -0.4em;
@@ -165,7 +165,7 @@
   margin-left: 0em;
 }
 .ui.top.right.popup {
-  margin-left: -0.8em;
+  margin-left: -2em;
 }
 .ui.top.right.popup:before {
   bottom: -0.4em;
@@ -182,9 +182,9 @@
   bottom: auto;
   left: auto;
   margin-top: -0.4em;
-  -moz-box-shadow: 1px -1px 1px #dcddde;
-  -webkit-box-shadow: 1px -1px 1px #dcddde;
-  box-shadow: 1px -1px 1px #dcddde;
+  -moz-box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
 }
 
 /*--- Right Center  ---*/
@@ -194,9 +194,9 @@
   bottom: auto;
   right: auto;
   margin-top: -0.4em;
-  -moz-box-shadow: -1px 1px 1px #dcddde;
-  -webkit-box-shadow: -1px 1px 1px #dcddde;
-  box-shadow: -1px 1px 1px #dcddde;
+  -moz-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
 }
 
 /*******************************

build/less/views/item.less

@@ -110,8 +110,6 @@
   -ms-box-sizing: border-box;
   box-sizing: border-box;
 
-  overflow: hidden;
-
   -webkit-border-radius: 0.2em;
   -moz-border-radius: 0.2em;
   border-radius: 0.2em;

build/minified/modules/dimmer.js

@@ -54,6 +54,8 @@ $.fn.dimmer = function(parameters) {
         module
       ;
 
+      console.log(element, parameters);
+
       module = {
 
         preinitialize: function() {

build/minified/modules/dropdown.js

@@ -222,7 +222,6 @@ $.fn.dropdown = function(parameters) {
               if( $choice.find(selector.menu).size() === 0 ) {
                 module.determine.selectAction(text, value);
                 $.proxy(settings.onChange, element)(value, text);
-                event.preventDefault();
               }
             }
 

build/minified/modules/modal.js

@@ -64,9 +64,14 @@ $.fn.modal = function(parameters) {
           module.verbose('Initializing dimmer', $context);
 
           $dimmable = $context
+            .dimmer({
+              closable : false,
+              show     : settings.duration * 0.95,
+              hide     : settings.duration * 1.05
+            })
             .dimmer('add content', $module)
           ;
-          $dimmer = $context
+          $dimmer = $dimmable
             .dimmer('get dimmer')
           ;
 
@@ -201,7 +206,6 @@ $.fn.modal = function(parameters) {
 
         showDimmer: function() {
           module.debug('Showing modal');
-          module.set.dimmerSettings();
           $dimmable.dimmer('show');
         },
 
@@ -331,16 +335,6 @@ $.fn.modal = function(parameters) {
               ;
             }
           },
-          dimmerSettings: function() {
-            module.debug('Setting dimmer settings', $dimmable);
-            $dimmable
-              .dimmer({
-                closable: false,
-                show: settings.duration * 0.95,
-                hide: settings.duration * 1.05
-              })
-            ;
-          },
           scrolling: function() {
             $dimmable.addClass(className.scrolling);
             $module.addClass(className.scrolling);

build/minified/modules/popup.js

@@ -15,6 +15,7 @@ $.fn.popup = function(parameters) {
   var
     $allModules     = $(this),
     $document       = $(document),
+    $body           = $('body'),
 
     moduleSelector  = $allModules.selector || '',
 
@@ -44,11 +45,17 @@ $.fn.popup = function(parameters) {
         moduleNamespace = 'module-' + namespace,
 
         $module         = $(this),
+        $target         = (settings.target)
+          ? $(settings.target)
+          : $module,
 
         $window         = $(window),
-        $offsetParent   = $module.offsetParent(),
+
+        $offsetParent   = (settings.inline)
+          ? $target.offsetParent()
+          : $window,
         $popup          = (settings.inline)
-          ? $module.next(settings.selector.popup)
+          ? $target.next(settings.selector.popup)
           : $window.children(settings.selector.popup).last(),
 
         searchDepth     = 0,
@@ -63,17 +70,20 @@ $.fn.popup = function(parameters) {
         // binds events
         initialize: function() {
           module.debug('Initializing module', $module);
-          if(settings.on == 'hover') {
+          if(settings.on == 'click') {
             $module
-              .on('mouseenter' + eventNamespace, module.event.mouseenter)
-              .on('mouseleave' + eventNamespace, module.event.mouseleave)
+              .on('click', module.toggle)
             ;
           }
           else {
             $module
-              .on(settings.on + '' + eventNamespace, module.event[settings.on])
+              .on(module.get.startEvent() + eventNamespace, module.event.start)
+              .on(module.get.endEvent() + eventNamespace, module.event.end)
             ;
           }
+          if(settings.target) {
+            module.debug('Target set to element', $target);
+          }
           $window
             .on('resize' + eventNamespace, module.event.resize)
           ;
@@ -89,11 +99,14 @@ $.fn.popup = function(parameters) {
         },
 
         refresh: function() {
-          $popup        = (settings.inline)
-            ? $module.next(selector.popup)
-            : $window.children(selector.popup).last()
-          ;
-          $offsetParent = $module.offsetParent();
+          if(settings.inline) {
+            $popup = $target.next(selector.popup);
+            $offsetParent = $target.offsetParent();
+          }
+          else {
+            console.log('found by refresh');
+            $popup = $window.children(selector.popup).last();
+          }
         },
 
         destroy: function() {
@@ -101,6 +114,9 @@ $.fn.popup = function(parameters) {
           $window
             .off(eventNamespace)
           ;
+          $popup
+            .remove()
+          ;
           $module
             .off(eventNamespace)
             .removeData(moduleNamespace)
@@ -108,30 +124,22 @@ $.fn.popup = function(parameters) {
         },
 
         event: {
-          mouseenter:  function(event) {
-            var element = this;
+          start:  function(event) {
             module.timer = setTimeout(function() {
-              $.proxy(module.toggle, element)();
-              if( $(element).hasClass(className.visible) ) {
-                event.stopPropagation();
+              if( module.is.hidden() ) {
+                module.show();
               }
             }, settings.delay);
           },
-          mouseleave:  function() {
+          end:  function() {
             clearTimeout(module.timer);
-            if( $module.is(':visible') ) {
+            if( module.is.visible() ) {
               module.hide();
             }
           },
-          click: function(event) {
-            $.proxy(module.toggle, this)();
-            if( $(this).hasClass(className.visible) ) {
-              event.stopPropagation();
-            }
-          },
           resize: function() {
-            if( $popup.is(':visible') ) {
-              module.position();
+            if( module.is.visible() ) {
+              module.set.position();
             }
           }
         },
@@ -166,7 +174,7 @@ $.fn.popup = function(parameters) {
             else {
               module.verbose('Appending popup element to body', $popup);
               $popup
-                .appendTo( $('body') )
+                .appendTo( $body )
               ;
             }
             $.proxy(settings.onCreate, $popup)();
@@ -176,6 +184,87 @@ $.fn.popup = function(parameters) {
           }
         },
 
+        // determines popup state
+        toggle: function() {
+          module.debug('Toggling pop-up');
+          if( module.is.hidden() ) {
+            module.hideAll();
+            module.show();
+          }
+          else {
+            module.hide();
+          }
+        },
+
+        show: function() {
+          module.debug('Showing pop-up', settings.transition);
+          if( !module.exists() ) {
+            module.create();
+          }
+          module.set.position();
+          $module
+            .addClass(className.visible)
+          ;
+          if(settings.transition && $.fn.transition !== undefined) {
+            $popup
+              .transition(settings.transition + ' in', settings.duration, module.bind.close)
+            ;
+          }
+          else {
+            $popup
+              .stop()
+              .fadeIn(settings.duration, settings.easing, module.bind.close)
+            ;
+          }
+          $.proxy(settings.onShow, $popup)();
+        },
+
+
+        hide: function() {
+          $module
+            .removeClass(className.visible)
+          ;
+          module.unbind.close();
+          if( module.is.visible() ) {
+            module.debug('Hiding pop-up');
+            if(settings.transition && $.fn.transition !== undefined) {
+              $popup
+                .transition(settings.transition + ' out', settings.duration, module.reset)
+              ;
+            }
+            else {
+              $popup
+                .stop()
+                .fadeOut(settings.duration, settings.easing, module.reset)
+              ;
+            }
+          }
+          $.proxy(settings.onHide, $popup)();
+        },
+
+        hideAll: function() {
+          $(selector.popup)
+            .filter(':visible')
+              .popup('hide')
+          ;
+        },
+
+        hideGracefully: function(event) {
+          // don't close on clicks inside popup
+          if( $(event.target).closest(selector.popup).size() === 0) {
+            module.hide();
+          }
+        },
+
+        exists: function() {
+          if(settings.inline) {
+            return ( $popup.size() !== 0 );
+          }
+          else {
+            return ( $popup.parent($body).size() );
+          }
+        },
+
         remove: function() {
           module.debug('Removing popup');
           $popup
@@ -184,6 +273,22 @@ $.fn.popup = function(parameters) {
         },
 
         get: {
+          startEvent: function() {
+            if(settings.on == 'hover') {
+              return 'mouseenter';
+            }
+            else if(settings.on == 'focus') {
+              return 'focus';
+            }
+          },
+          endEvent: function() {
+            if(settings.on == 'hover') {
+              return 'mouseleave';
+            }
+            else if(settings.on == 'focus') {
+              return 'blur';
+            }
+          },
           offstagePosition: function() {
             var
               boundary  = {
@@ -251,229 +356,184 @@ $.fn.popup = function(parameters) {
           }
         },
 
-        // determines popup state
-        toggle: function() {
-          $module = $(this);
-          module.debug('Toggling pop-up');
-          // refresh state of module
-          module.refresh();
-          if( !$module.hasClass(className.visible) ) {
-            if(settings.on == 'click') {
-              module.hideAll();
-            }
-            module.show();
-          }
-          else {
-            // module.hide();
-          }
-        },
+        set: {
+          position: function(position, arrowOffset) {
+            var
+              windowWidth  = $(window).width(),
+              windowHeight = $(window).height(),
 
-        position: function(position, arrowOffset) {
-          var
-            windowWidth  = $(window).width(),
-            windowHeight = $(window).height(),
-            width        = $module.outerWidth(),
-            height       = $module.outerHeight(),
-            popupWidth   = $popup.width(),
-            popupHeight  = $popup.outerHeight(),
-
-            offset       = (settings.inline)
-              ? $module.position()
-              : $module.offset(),
-            parentWidth  = (settings.inline)
-              ? $offsetParent.outerWidth()
-              : $window.outerWidth(),
-            parentHeight = (settings.inline)
-              ? $offsetParent.outerHeight()
-              : $window.outerHeight(),
-
-            positioning,
-            offstagePosition
-          ;
-          position    = position    || $module.data(metadata.position)    || settings.position;
-          arrowOffset = arrowOffset || $module.data(metadata.arrowOffset) || settings.arrowOffset;
-          module.debug('Calculating offset for position', position);
-          switch(position) {
-            case 'top left':
-              positioning = {
-                bottom :  parentHeight - offset.top + settings.distanceAway,
-                right  :  parentWidth - offset.left - width - arrowOffset,
-                top    : 'auto',
-                left   : 'auto'
-              };
-            break;
-            case 'top center':
-              positioning = {
-                bottom :  parentHeight - offset.top + settings.distanceAway,
-                left   : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset,
-                top    : 'auto',
-                right  : 'auto'
-              };
-            break;
-            case 'top right':
-              positioning = {
-                top    : 'auto',
-                bottom :  parentHeight - offset.top + settings.distanceAway,
-                left   : offset.left + arrowOffset
-              };
-            break;
-            case 'left center':
-              positioning = {
-                top    :  offset.top + (height / 2) - (popupHeight / 2),
-                right  : parentWidth - offset.left + settings.distanceAway - arrowOffset,
-                left   : 'auto',
-                bottom : 'auto'
-              };
-            break;
-            case 'right center':
-              positioning = {
-                top    :  offset.top + (height / 2) - (popupHeight / 2),
-                left   : offset.left + width + settings.distanceAway + arrowOffset,
-                bottom : 'auto',
-                right  : 'auto'
-              };
-            break;
-            case 'bottom left':
-              positioning = {
-                top    :  offset.top + height + settings.distanceAway,
-                right  : parentWidth - offset.left - width - arrowOffset,
-                left   : 'auto',
-                bottom : 'auto'
-              };
-            break;
-            case 'bottom center':
-              positioning = {
-                top    :  offset.top + height + settings.distanceAway,
-                left   : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset,
-                bottom : 'auto',
-                right  : 'auto'
-              };
-            break;
-            case 'bottom right':
-              positioning = {
-                top    :  offset.top + height + settings.distanceAway,
-                left   : offset.left + arrowOffset,
-                bottom : 'auto',
-                right  : 'auto'
-              };
-            break;
-          }
-          // true width on popup, avoid rounding error
-          $.extend(positioning, {
-            width: $popup.width() + 1
-          });
-          // tentatively place on stage
-          $popup
-            .css(positioning)
-            .removeClass(className.position)
-            .addClass(position)
-          ;
-          // check if is offstage
-          offstagePosition = module.get.offstagePosition();
-          // recursively find new positioning
-          if(offstagePosition) {
-            module.debug('Element is outside boundaries ', offstagePosition);
-            if(searchDepth < settings.maxSearchDepth) {
-              position = module.get.nextPosition(position);
-              searchDepth++;
-              module.debug('Trying new position: ', position);
-              return module.position(position);
-            }
-            else {
-              module.error(error.recursion);
-              searchDepth = 0;
-              return false;
-            }
-          }
-          else {
-            module.debug('Position is on stage', position);
-            searchDepth = 0;
-            return true;
-          }
-        },
+              width        = $target.outerWidth(),
+              height       = $target.outerHeight(),
 
-        show: function() {
-          module.debug('Showing pop-up', settings.transition);
-          if($popup.size() === 0) {
-            module.create();
-          }
-          module.position();
-          $module
-            .addClass(className.visible)
-          ;
-          if(settings.transition && $.fn.transition !== undefined) {
-            $popup
-              .transition(settings.transition + ' in', settings.duration)
+              popupWidth   = $popup.width(),
+              popupHeight  = $popup.outerHeight(),
+
+              parentWidth  = $offsetParent.outerWidth(),
+              parentHeight = $offsetParent.outerHeight(),
+
+              distanceAway = settings.distanceAway,
+
+              offset       = (settings.inline)
+                ? $target.position()
+                : $target.offset(),
+
+              positioning,
+              offstagePosition
             ;
-          }
-          else {
+            position    = position    || $module.data(metadata.position)    || settings.position;
+            arrowOffset = arrowOffset || $module.data(metadata.offset)      || settings.offset;
+            // adjust for margin when inline
+            if(settings.inline) {
+              if(position == 'left center' || position == 'right center') {
+                arrowOffset  += parseInt( window.getComputedStyle(element).getPropertyValue('margin-top'), 10);
+                distanceAway += -parseInt( window.getComputedStyle(element).getPropertyValue('margin-left'), 10);
+              }
+              else {
+                arrowOffset  += parseInt( window.getComputedStyle(element).getPropertyValue('margin-left'), 10);
+                distanceAway += parseInt( window.getComputedStyle(element).getPropertyValue('margin-top'), 10);
+              }
+            }
+            module.debug('Calculating offset for position', position);
+            switch(position) {
+              case 'top left':
+                positioning = {
+                  bottom :  parentHeight - offset.top + distanceAway,
+                  right  :  parentWidth - offset.left - arrowOffset,
+                  top    : 'auto',
+                  left   : 'auto'
+                };
+              break;
+              case 'top center':
+                positioning = {
+                  bottom :  parentHeight - offset.top + distanceAway,
+                  left   : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset,
+                  top    : 'auto',
+                  right  : 'auto'
+                };
+              break;
+              case 'top right':
+                positioning = {
+                  top    : 'auto',
+                  bottom :  parentHeight - offset.top + distanceAway,
+                  left   : offset.left + width + arrowOffset,
+                  right  : 'auto'
+                };
+              break;
+              case 'left center':
+                positioning = {
+                  top    :  offset.top + (height / 2) - (popupHeight / 2) + arrowOffset,
+                  right  : parentWidth - offset.left + distanceAway,
+                  left   : 'auto',
+                  bottom : 'auto'
+                };
+              break;
+              case 'right center':
+                positioning = {
+                  top    :  offset.top + (height / 2) - (popupHeight / 2) + arrowOffset,
+                  left   : offset.left + width + distanceAway,
+                  bottom : 'auto',
+                  right  : 'auto'
+                };
+              break;
+              case 'bottom left':
+                positioning = {
+                  top    :  offset.top + height + distanceAway,
+                  right  : parentWidth - offset.left - arrowOffset,
+                  left   : 'auto',
+                  bottom : 'auto'
+                };
+              break;
+              case 'bottom center':
+                positioning = {
+                  top    :  offset.top + height + distanceAway,
+                  left   : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset,
+                  bottom : 'auto',
+                  right  : 'auto'
+                };
+              break;
+              case 'bottom right':
+                positioning = {
+                  top    :  offset.top + height + distanceAway,
+                  left   : offset.left + width + arrowOffset,
+                  bottom : 'auto',
+                  right  : 'auto'
+                };
+              break;
+            }
+            // tentatively place on stage
             $popup
-              .stop()
-              .fadeIn(settings.duration, settings.easing)
-            ;
-          }
-          if(settings.on == 'click' && settings.clicktoClose) {
-            module.debug('Binding popup close event');
-            $document
-              .on('click.' + namespace, module.gracefully.hide)
+              .css(positioning)
+              .removeClass(className.position)
+              .addClass(position)
             ;
+            // check if is offstage
+            offstagePosition = module.get.offstagePosition();
+
+            // recursively find new positioning
+            if(offstagePosition) {
+              module.debug('Element is outside boundaries', offstagePosition);
+              if(searchDepth < settings.maxSearchDepth) {
+                position = module.get.nextPosition(position);
+                searchDepth++;
+                module.debug('Trying new position', position);
+                return module.set.position(position);
+              }
+              else {
+                module.error(error.recursion);
+                searchDepth = 0;
+                return false;
+              }
+            }
+            else {
+              module.debug('Position is on stage', position);
+              searchDepth = 0;
+              return true;
+            }
           }
-          $.proxy(settings.onShow, $popup)();
-        },
 
-        hideAll: function() {
-          $(selector.popup)
-            .filter(':visible')
-              .popup('hide')
-          ;
         },
 
-        hide: function() {
-          $module
-            .removeClass(className.visible)
-          ;
-          if($popup.is(':visible') ) {
-            module.debug('Hiding pop-up');
-            if(settings.transition && $.fn.transition !== undefined) {
-              $popup
-                .transition(settings.transition + ' out', settings.duration, module.reset)
+        bind: {
+          close:function() {
+            if(settings.on == 'click' && settings.closable) {
+              module.verbose('Binding popup close event to document');
+              $document
+                .on('click' + eventNamespace, module.hideGracefully)
               ;
             }
-            else {
-              $popup
-                .stop()
-                .fadeOut(settings.duration, settings.easing, module.reset)
+          }
+        },
+
+        unbind: {
+          close: function() {
+            if(settings.on == 'click' && settings.closable) {
+              module.verbose('Removing close event from document');
+              $document
+                .off('click' + eventNamespace)
               ;
             }
           }
-          if(settings.on == 'click' && settings.clicktoClose) {
-            $document
-              .off('click.' + namespace)
-            ;
+        },
+
+        is: {
+          visible: function() {
+            return $popup.is(':visible');
+          },
+          hidden: function() {
+            return !module.is.visible();
           }
-          $.proxy(settings.onHide, $popup)();
         },
 
         reset: function() {
-          module.verbose('Resetting inline styles');
           $popup
             .attr('style', '')
             .removeAttr('style')
           ;
-          if(!settings.inline) {
+          if(!settings.preserve) {
             module.remove();
           }
         },
 
-        gracefully: {
-          hide: function(event) {
-            // don't close on clicks inside popup
-            if( $(event.target).closest(selector.popup).size() === 0) {
-              module.hide();
-            }
-          }
-        },
-
         setting: function(name, value) {
           if(value !== undefined) {
             if( $.isPlainObject(name) ) {
@@ -661,7 +721,7 @@ $.fn.popup.settings = {
   performance    : true,
   namespace      : 'popup',
 
-  onCreate         : function(){},
+  onCreate       : function(){},
   onShow         : function(){},
   onHide         : function(){},
 
@@ -671,18 +731,20 @@ $.fn.popup.settings = {
   title          : false,
 
   on             : 'hover',
-  clicktoClose   : true,
+  target         : false,
+  closable       : true,
 
   position       : 'top center',
   delay          : 150,
-  inline         : true,
+  inline         : false,
+  preserve       : false,
 
-  duration       : 150,
+  duration       : 250,
   easing         : 'easeOutQuint',
   transition     : 'scale',
 
   distanceAway   : 0,
-  arrowOffset    : 0,
+  offset         : 0,
   maxSearchDepth : 10,
 
   error: {
@@ -692,19 +754,19 @@ $.fn.popup.settings = {
   },
 
   metadata: {
-    arrowOffset : 'arrowOffset',
-    content     : 'content',
-    html        : 'html',
-    position    : 'position',
-    title       : 'title',
-    variation   : 'variation'
+    content   : 'content',
+    html      : 'html',
+    offset    : 'offset',
+    position  : 'position',
+    title     : 'title',
+    variation : 'variation'
   },
 
   className   : {
-    popup       : 'ui popup',
-    visible     : 'visible',
     loading     : 'loading',
-    position    : 'top left center bottom right'
+    popup       : 'ui popup',
+    position    : 'top left center bottom right',
+    visible     : 'visible'
   },
 
   selector    : {

build/minified/modules/popup.min.css

@@ -1 +1 @@
-.ui.popup{display:none;position:absolute;top:0;right:0;z-index:900;border:1px solid #DCDDDE;max-width:250px;background-color:#FFF;padding:.8em 1.2em;font-size:.875rem;font-weight:400;font-style:normal;color:rgba(0,0,0,.7);-webkit-border-radius:.2em;-moz-border-radius:.2em;border-radius:.2em;-webkit-box-shadow:0 1px 1px #DCDDDE;-moz-box-shadow:0 1px 1px #DCDDDE;box-shadow:0 1px 1px #DCDDDE}.ui.popup .header{padding:0 0 .5em;font-size:1.125em;line-height:1.2;font-weight:700}.ui.popup:before{position:absolute;content:"";width:.75em;height:.75rem;background-image:none;background-color:#FFF;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);z-index:2;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:1px 1px 1px #DCDDDE;-moz-box-shadow:1px 1px 1px #DCDDDE;box-shadow:1px 1px 1px #DCDDDE}.ui.popup .ui.button{width:100%}.ui.popup{margin:0}.ui.popup.bottom{margin:.75em 0 0}.ui.popup.top{margin:0 0 .75em}.ui.popup.left.center{margin:0 .75em 0 0}.ui.popup.right.center{margin:0 0 0 .75em}.ui.popup.center{margin-left:-1.25em}.ui.bottom.center.popup:before{margin-left:-.4em;top:-.4em;left:50%;right:auto;bottom:auto;-webkit-box-shadow:-1px -1px 1px #dcddde;-moz-box-shadow:-1px -1px 1px #dcddde;box-shadow:-1px -1px 1px #dcddde}.ui.bottom.left.popup{margin-right:-.8em}.ui.bottom.left.popup:before{top:-.4em;right:1em;bottom:auto;left:auto;margin-left:0;-webkit-box-shadow:-1px -1px 1px #dcddde;-moz-box-shadow:-1px -1px 1px #dcddde;box-shadow:-1px -1px 1px #dcddde}.ui.bottom.right.popup{margin-left:-.8em}.ui.bottom.right.popup:before{top:-.4em;left:1em;right:auto;bottom:auto;margin-left:0;-webkit-box-shadow:-1px -1px 1px #dcddde;-moz-box-shadow:-1px -1px 1px #dcddde;box-shadow:-1px -1px 1px #dcddde}.ui.top.center.popup:before{top:auto;right:auto;bottom:-.4em;left:50%;margin-left:-.4em}.ui.top.left.popup{margin-right:-.8em}.ui.top.left.popup:before{bottom:-.4em;right:1em;top:auto;left:auto;margin-left:0}.ui.top.right.popup{margin-left:-.8em}.ui.top.right.popup:before{bottom:-.4em;left:1em;top:auto;right:auto;margin-left:0}.ui.left.center.popup:before{top:50%;right:-.35em;bottom:auto;left:auto;margin-top:-.4em;-moz-box-shadow:1px -1px 1px #dcddde;-webkit-box-shadow:1px -1px 1px #dcddde;box-shadow:1px -1px 1px #dcddde}.ui.right.center.popup:before{top:50%;left:-.35em;bottom:auto;right:auto;margin-top:-.4em;-moz-box-shadow:-1px 1px 1px #dcddde;-webkit-box-shadow:-1px 1px 1px #dcddde;box-shadow:-1px 1px 1px #dcddde}.ui.loading.popup{display:block;visibility:hidden}.ui.active.popup{display:block}.ui.small.popup{font-size:.75rem}.ui.large.popup{font-size:1rem}.ui.inverted.popup{background-color:#333;border:0;color:#FFF;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.inverted.popup .header{background-color:rgba(0,0,0,.2);color:#FFF}.ui.inverted.popup:before{background-color:#333;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}
+.ui.popup{display:none;position:absolute;top:0;right:0;z-index:900;border:1px solid rgba(0,0,0,.1);max-width:250px;background-color:#FFF;padding:.8em 1.2em;font-size:.875rem;font-weight:400;font-style:normal;color:rgba(0,0,0,.7);-webkit-border-radius:.2em;-moz-border-radius:.2em;border-radius:.2em;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.1);-moz-box-shadow:0 1px 2px rgba(0,0,0,.1);box-shadow:0 1px 2px rgba(0,0,0,.1)}.ui.popup .header{padding:0 0 .5em;font-size:1.125em;line-height:1.2;font-weight:700}.ui.popup:before{position:absolute;content:"";width:.75em;height:.75rem;background-image:none;background-color:#FFF;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);z-index:2;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:1px 1px 1px rgba(0,0,0,.1);-moz-box-shadow:1px 1px 1px rgba(0,0,0,.1);box-shadow:1px 1px 1px rgba(0,0,0,.1)}.ui.popup .ui.button{width:100%}.ui.popup{margin:0}.ui.popup.bottom{margin:.75em 0 0}.ui.popup.top{margin:0 0 .75em}.ui.popup.left.center{margin:0 .75em 0 0}.ui.popup.right.center{margin:0 0 0 .75em}.ui.popup.center{margin-left:-1.25em}.ui.bottom.center.popup:before{margin-left:-.4em;top:-.4em;left:50%;right:auto;bottom:auto;-webkit-box-shadow:-1px -1px 1px rgba(0,0,0,.2);-moz-box-shadow:-1px -1px 1px rgba(0,0,0,.2);box-shadow:-1px -1px 1px rgba(0,0,0,.2)}.ui.bottom.left.popup{margin-right:-2em}.ui.bottom.left.popup:before{top:-.4em;right:1em;bottom:auto;left:auto;margin-left:0;-webkit-box-shadow:-1px -1px 1px rgba(0,0,0,.2);-moz-box-shadow:-1px -1px 1px rgba(0,0,0,.2);box-shadow:-1px -1px 1px rgba(0,0,0,.2)}.ui.bottom.right.popup{margin-left:-2em}.ui.bottom.right.popup:before{top:-.4em;left:1em;right:auto;bottom:auto;margin-left:0;-webkit-box-shadow:-1px -1px 1px rgba(0,0,0,.2);-moz-box-shadow:-1px -1px 1px rgba(0,0,0,.2);box-shadow:-1px -1px 1px rgba(0,0,0,.2)}.ui.top.center.popup:before{top:auto;right:auto;bottom:-.4em;left:50%;margin-left:-.4em}.ui.top.left.popup{margin-right:-2em}.ui.top.left.popup:before{bottom:-.4em;right:1em;top:auto;left:auto;margin-left:0}.ui.top.right.popup{margin-left:-2em}.ui.top.right.popup:before{bottom:-.4em;left:1em;top:auto;right:auto;margin-left:0}.ui.left.center.popup:before{top:50%;right:-.35em;bottom:auto;left:auto;margin-top:-.4em;-moz-box-shadow:1px -1px 1px rgba(0,0,0,.2);-webkit-box-shadow:1px -1px 1px rgba(0,0,0,.2);box-shadow:1px -1px 1px rgba(0,0,0,.2)}.ui.right.center.popup:before{top:50%;left:-.35em;bottom:auto;right:auto;margin-top:-.4em;-moz-box-shadow:-1px 1px 1px rgba(0,0,0,.2);-webkit-box-shadow:-1px 1px 1px rgba(0,0,0,.2);box-shadow:-1px 1px 1px rgba(0,0,0,.2)}.ui.loading.popup{display:block;visibility:hidden}.ui.active.popup{display:block}.ui.small.popup{font-size:.75rem}.ui.large.popup{font-size:1rem}.ui.inverted.popup{background-color:#333;border:0;color:#FFF;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.inverted.popup .header{background-color:rgba(0,0,0,.2);color:#FFF}.ui.inverted.popup:before{background-color:#333;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}

build/packaged/css/semantic.css

@@ -7594,11 +7594,13 @@ a.ui.label:hover:before {
 --------------------*/
 .ui.ribbon.label {
   position: relative;
-  left: -1.8rem;
+  margin: 0em 0.2em;
+  left: -2rem;
   padding-left: 2rem;
   -webkit-border-radius: 0px 4px 4px 0px;
   -moz-border-radius: 0px 4px 4px 0px;
   border-radius: 0px 4px 4px 0px;
+  border-color: rgba(0, 0, 0, 0.15);
 }
 .ui.ribbon.label:after {
   position: absolute;
@@ -7788,19 +7790,23 @@ a.ui.label:hover:before {
 /* Hover */
 a.ui.black.labels .label:hover,
 a.ui.black.label:hover {
-  background-color: #888888 !important;
-  border-color: #888888 !important;
+  background-color: #333333 !important;
+  border-color: #333333 !important;
 }
 .ui.labels a.black.label:hover:before,
 .ui.black.labels a.label:hover:before,
 a.ui.black.label:hover:before {
-  background-color: #888888 !important;
+  background-color: #333333 !important;
 }
 /* Corner */
 .ui.black.corner.label,
 .ui.black.corner.label:hover {
   background-color: transparent !important;
 }
+/* Ribbon */
+.ui.black.ribbon.label {
+  border-color: #333333 !important;
+}
 /*--- Green ---*/
 .ui.green.labels .label,
 .ui.green.label {
@@ -7829,6 +7835,10 @@ a.ui.green.label:hover:before {
 .ui.green.corner.label:hover {
   background-color: transparent !important;
 }
+/* Ribbon */
+.ui.green.ribbon.label {
+  border-color: #89B84C !important;
+}
 /*--- Red ---*/
 .ui.red.labels .label,
 .ui.red.label {
@@ -7858,6 +7868,10 @@ a.ui.red.label:hover {
 a.ui.red.label:hover:before {
   background-color: #DE3859 !important;
 }
+/* Ribbon */
+.ui.red.ribbon.label {
+  border-color: #DE3859 !important;
+}
 /*--- Blue ---*/
 .ui.blue.labels .label,
 .ui.blue.label {
@@ -7888,6 +7902,10 @@ a.ui.blue.label:hover:before {
 .ui.blue.corner.label:hover {
   background-color: transparent !important;
 }
+/* Ribbon */
+.ui.blue.ribbon.label {
+  border-color: #1AB8F3 !important;
+}
 /*--- Purple ---*/
 .ui.purple.labels .label,
 .ui.purple.label {
@@ -7918,6 +7936,10 @@ a.ui.purple.label:hover:before {
 .ui.purple.corner.label:hover {
   background-color: transparent !important;
 }
+/* Ribbon */
+.ui.purple.ribbon.label {
+  border-color: #3E3773 !important;
+}
 /*--- Orange ---*/
 .ui.orange.labels .label,
 .ui.orange.label {
@@ -7948,7 +7970,11 @@ a.ui.orange.label:hover:before {
 .ui.orange.corner.label:hover {
   background-color: transparent !important;
 }
-/*--- Pink ---*/
+/* Ribbon */
+.ui.orange.ribbon.label {
+  border-color: #FF4121 !important;
+}
+/*--- Teal ---*/
 .ui.teal.labels .label,
 .ui.teal.label {
   background-color: #00B5AD !important;
@@ -7978,6 +8004,10 @@ a.ui.teal.label:hover:before {
 .ui.teal.corner.label:hover {
   background-color: transparent !important;
 }
+/* Ribbon */
+.ui.teal.ribbon.label {
+  border-color: #009A93 !important;
+}
 /*-------------------
      Horizontal
 --------------------*/
@@ -10918,7 +10948,7 @@ a.ui.nag {
   top: 0px;
   right: 0px;
   z-index: 900;
-  border: 1px solid #DCDDDE;
+  border: 1px solid rgba(0, 0, 0, 0.1);
   max-width: 250px;
   background-color: #FFFFFF;
   padding: 0.8em 1.2em;
@@ -10929,9 +10959,9 @@ a.ui.nag {
   -webkit-border-radius: 0.2em;
   -moz-border-radius: 0.2em;
   border-radius: 0.2em;
-  -webkit-box-shadow: 0px 1px 1px #DCDDDE;
-  -moz-box-shadow: 0px 1px 1px #DCDDDE;
-  box-shadow: 0px 1px 1px #DCDDDE;
+  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
 }
 .ui.popup .header {
   padding: 0em 0em 0.5em;
@@ -10954,9 +10984,9 @@ a.ui.nag {
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
-  -webkit-box-shadow: 1px 1px 1px #DCDDDE;
-  -moz-box-shadow: 1px 1px 1px #DCDDDE;
-  box-shadow: 1px 1px 1px #DCDDDE;
+  -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
 }
 .ui.popup .ui.button {
   width: 100%;
@@ -10995,12 +11025,12 @@ a.ui.nag {
   left: 50%;
   right: auto;
   bottom: auto;
-  -webkit-box-shadow: -1px -1px 1px #dcddde;
-  -moz-box-shadow: -1px -1px 1px #dcddde;
-  box-shadow: -1px -1px 1px #dcddde;
+  -webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
 }
 .ui.bottom.left.popup {
-  margin-right: -0.8em;
+  margin-right: -2em;
 }
 .ui.bottom.left.popup:before {
   top: -0.4em;
@@ -11008,12 +11038,12 @@ a.ui.nag {
   bottom: auto;
   left: auto;
   margin-left: 0em;
-  -webkit-box-shadow: -1px -1px 1px #dcddde;
-  -moz-box-shadow: -1px -1px 1px #dcddde;
-  box-shadow: -1px -1px 1px #dcddde;
+  -webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
 }
 .ui.bottom.right.popup {
-  margin-left: -0.8em;
+  margin-left: -2em;
 }
 .ui.bottom.right.popup:before {
   top: -0.4em;
@@ -11021,9 +11051,9 @@ a.ui.nag {
   right: auto;
   bottom: auto;
   margin-left: 0em;
-  -webkit-box-shadow: -1px -1px 1px #dcddde;
-  -moz-box-shadow: -1px -1px 1px #dcddde;
-  box-shadow: -1px -1px 1px #dcddde;
+  -webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
 }
 /*--- Above ---*/
 .ui.top.center.popup:before {
@@ -11034,7 +11064,7 @@ a.ui.nag {
   margin-left: -0.4em;
 }
 .ui.top.left.popup {
-  margin-right: -0.8em;
+  margin-right: -2em;
 }
 .ui.top.left.popup:before {
   bottom: -0.4em;
@@ -11044,7 +11074,7 @@ a.ui.nag {
   margin-left: 0em;
 }
 .ui.top.right.popup {
-  margin-left: -0.8em;
+  margin-left: -2em;
 }
 .ui.top.right.popup:before {
   bottom: -0.4em;
@@ -11060,9 +11090,9 @@ a.ui.nag {
   bottom: auto;
   left: auto;
   margin-top: -0.4em;
-  -moz-box-shadow: 1px -1px 1px #dcddde;
-  -webkit-box-shadow: 1px -1px 1px #dcddde;
-  box-shadow: 1px -1px 1px #dcddde;
+  -moz-box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
 }
 /*--- Right Center  ---*/
 .ui.right.center.popup:before {
@@ -11071,9 +11101,9 @@ a.ui.nag {
   bottom: auto;
   right: auto;
   margin-top: -0.4em;
-  -moz-box-shadow: -1px 1px 1px #dcddde;
-  -webkit-box-shadow: -1px 1px 1px #dcddde;
-  box-shadow: -1px 1px 1px #dcddde;
+  -moz-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
 }
 /*******************************
             States
@@ -13616,7 +13646,6 @@ body {
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
-  overflow: hidden;
   -webkit-border-radius: 0.2em;
   -moz-border-radius: 0.2em;
   border-radius: 0.2em;

build/packaged/javascript/semantic.js

@@ -3933,6 +3933,8 @@ $.fn.dimmer = function(parameters) {
         module
       ;
 
+      console.log(element, parameters);
+
       module = {
 
         preinitialize: function() {
@@ -4668,7 +4670,6 @@ $.fn.dropdown = function(parameters) {
               if( $choice.find(selector.menu).size() === 0 ) {
                 module.determine.selectAction(text, value);
                 $.proxy(settings.onChange, element)(value, text);
-                event.preventDefault();
               }
             }
 
@@ -5313,9 +5314,14 @@ $.fn.modal = function(parameters) {
           module.verbose('Initializing dimmer', $context);
 
           $dimmable = $context
+            .dimmer({
+              closable : false,
+              show     : settings.duration * 0.95,
+              hide     : settings.duration * 1.05
+            })
             .dimmer('add content', $module)
           ;
-          $dimmer = $context
+          $dimmer = $dimmable
             .dimmer('get dimmer')
           ;
 
@@ -5450,7 +5456,6 @@ $.fn.modal = function(parameters) {
 
         showDimmer: function() {
           module.debug('Showing modal');
-          module.set.dimmerSettings();
           $dimmable.dimmer('show');
         },
 
@@ -5580,16 +5585,6 @@ $.fn.modal = function(parameters) {
               ;
             }
           },
-          dimmerSettings: function() {
-            module.debug('Setting dimmer settings', $dimmable);
-            $dimmable
-              .dimmer({
-                closable: false,
-                show: settings.duration * 0.95,
-                hide: settings.duration * 1.05
-              })
-            ;
-          },
           scrolling: function() {
             $dimmable.addClass(className.scrolling);
             $module.addClass(className.scrolling);
@@ -6404,6 +6399,7 @@ $.fn.popup = function(parameters) {
   var
     $allModules     = $(this),
     $document       = $(document),
+    $body           = $('body'),
 
     moduleSelector  = $allModules.selector || '',
 
@@ -6433,11 +6429,17 @@ $.fn.popup = function(parameters) {
         moduleNamespace = 'module-' + namespace,
 
         $module         = $(this),
+        $target         = (settings.target)
+          ? $(settings.target)
+          : $module,
 
         $window         = $(window),
-        $offsetParent   = $module.offsetParent(),
+
+        $offsetParent   = (settings.inline)
+          ? $target.offsetParent()
+          : $window,
         $popup          = (settings.inline)
-          ? $module.next(settings.selector.popup)
+          ? $target.next(settings.selector.popup)
           : $window.children(settings.selector.popup).last(),
 
         searchDepth     = 0,
@@ -6452,17 +6454,20 @@ $.fn.popup = function(parameters) {
         // binds events
         initialize: function() {
           module.debug('Initializing module', $module);
-          if(settings.on == 'hover') {
+          if(settings.on == 'click') {
             $module
-              .on('mouseenter' + eventNamespace, module.event.mouseenter)
-              .on('mouseleave' + eventNamespace, module.event.mouseleave)
+              .on('click', module.toggle)
             ;
           }
           else {
             $module
-              .on(settings.on + '' + eventNamespace, module.event[settings.on])
+              .on(module.get.startEvent() + eventNamespace, module.event.start)
+              .on(module.get.endEvent() + eventNamespace, module.event.end)
             ;
           }
+          if(settings.target) {
+            module.debug('Target set to element', $target);
+          }
           $window
             .on('resize' + eventNamespace, module.event.resize)
           ;
@@ -6478,11 +6483,14 @@ $.fn.popup = function(parameters) {
         },
 
         refresh: function() {
-          $popup        = (settings.inline)
-            ? $module.next(selector.popup)
-            : $window.children(selector.popup).last()
-          ;
-          $offsetParent = $module.offsetParent();
+          if(settings.inline) {
+            $popup = $target.next(selector.popup);
+            $offsetParent = $target.offsetParent();
+          }
+          else {
+            console.log('found by refresh');
+            $popup = $window.children(selector.popup).last();
+          }
         },
 
         destroy: function() {
@@ -6490,6 +6498,9 @@ $.fn.popup = function(parameters) {
           $window
             .off(eventNamespace)
           ;
+          $popup
+            .remove()
+          ;
           $module
             .off(eventNamespace)
             .removeData(moduleNamespace)
@@ -6497,30 +6508,22 @@ $.fn.popup = function(parameters) {
         },
 
         event: {
-          mouseenter:  function(event) {
-            var element = this;
+          start:  function(event) {
             module.timer = setTimeout(function() {
-              $.proxy(module.toggle, element)();
-              if( $(element).hasClass(className.visible) ) {
-                event.stopPropagation();
+              if( module.is.hidden() ) {
+                module.show();
               }
             }, settings.delay);
           },
-          mouseleave:  function() {
+          end:  function() {
             clearTimeout(module.timer);
-            if( $module.is(':visible') ) {
+            if( module.is.visible() ) {
               module.hide();
             }
           },
-          click: function(event) {
-            $.proxy(module.toggle, this)();
-            if( $(this).hasClass(className.visible) ) {
-              event.stopPropagation();
-            }
-          },
           resize: function() {
-            if( $popup.is(':visible') ) {
-              module.position();
+            if( module.is.visible() ) {
+              module.set.position();
             }
           }
         },
@@ -6555,7 +6558,7 @@ $.fn.popup = function(parameters) {
             else {
               module.verbose('Appending popup element to body', $popup);
               $popup
-                .appendTo( $('body') )
+                .appendTo( $body )
               ;
             }
             $.proxy(settings.onCreate, $popup)();
@@ -6565,6 +6568,87 @@ $.fn.popup = function(parameters) {
           }
         },
 
+        // determines popup state
+        toggle: function() {
+          module.debug('Toggling pop-up');
+          if( module.is.hidden() ) {
+            module.hideAll();
+            module.show();
+          }
+          else {
+            module.hide();
+          }
+        },
+
+        show: function() {
+          module.debug('Showing pop-up', settings.transition);
+          if( !module.exists() ) {
+            module.create();
+          }
+          module.set.position();
+          $module
+            .addClass(className.visible)
+          ;
+          if(settings.transition && $.fn.transition !== undefined) {
+            $popup
+              .transition(settings.transition + ' in', settings.duration, module.bind.close)
+            ;
+          }
+          else {
+            $popup
+              .stop()
+              .fadeIn(settings.duration, settings.easing, module.bind.close)
+            ;
+          }
+          $.proxy(settings.onShow, $popup)();
+        },
+
+
+        hide: function() {
+          $module
+            .removeClass(className.visible)
+          ;
+          module.unbind.close();
+          if( module.is.visible() ) {
+            module.debug('Hiding pop-up');
+            if(settings.transition && $.fn.transition !== undefined) {
+              $popup
+                .transition(settings.transition + ' out', settings.duration, module.reset)
+              ;
+            }
+            else {
+              $popup
+                .stop()
+                .fadeOut(settings.duration, settings.easing, module.reset)
+              ;
+            }
+          }
+          $.proxy(settings.onHide, $popup)();
+        },
+
+        hideAll: function() {
+          $(selector.popup)
+            .filter(':visible')
+              .popup('hide')
+          ;
+        },
+
+        hideGracefully: function(event) {
+          // don't close on clicks inside popup
+          if( $(event.target).closest(selector.popup).size() === 0) {
+            module.hide();
+          }
+        },
+
+        exists: function() {
+          if(settings.inline) {
+            return ( $popup.size() !== 0 );
+          }
+          else {
+            return ( $popup.parent($body).size() );
+          }
+        },
+
         remove: function() {
           module.debug('Removing popup');
           $popup
@@ -6573,6 +6657,22 @@ $.fn.popup = function(parameters) {
         },
 
         get: {
+          startEvent: function() {
+            if(settings.on == 'hover') {
+              return 'mouseenter';
+            }
+            else if(settings.on == 'focus') {
+              return 'focus';
+            }
+          },
+          endEvent: function() {
+            if(settings.on == 'hover') {
+              return 'mouseleave';
+            }
+            else if(settings.on == 'focus') {
+              return 'blur';
+            }
+          },
           offstagePosition: function() {
             var
               boundary  = {
@@ -6640,229 +6740,184 @@ $.fn.popup = function(parameters) {
           }
         },
 
-        // determines popup state
-        toggle: function() {
-          $module = $(this);
-          module.debug('Toggling pop-up');
-          // refresh state of module
-          module.refresh();
-          if( !$module.hasClass(className.visible) ) {
-            if(settings.on == 'click') {
-              module.hideAll();
-            }
-            module.show();
-          }
-          else {
-            // module.hide();
-          }
-        },
+        set: {
+          position: function(position, arrowOffset) {
+            var
+              windowWidth  = $(window).width(),
+              windowHeight = $(window).height(),
 
-        position: function(position, arrowOffset) {
-          var
-            windowWidth  = $(window).width(),
-            windowHeight = $(window).height(),
-            width        = $module.outerWidth(),
-            height       = $module.outerHeight(),
-            popupWidth   = $popup.width(),
-            popupHeight  = $popup.outerHeight(),
-
-            offset       = (settings.inline)
-              ? $module.position()
-              : $module.offset(),
-            parentWidth  = (settings.inline)
-              ? $offsetParent.outerWidth()
-              : $window.outerWidth(),
-            parentHeight = (settings.inline)
-              ? $offsetParent.outerHeight()
-              : $window.outerHeight(),
-
-            positioning,
-            offstagePosition
-          ;
-          position    = position    || $module.data(metadata.position)    || settings.position;
-          arrowOffset = arrowOffset || $module.data(metadata.arrowOffset) || settings.arrowOffset;
-          module.debug('Calculating offset for position', position);
-          switch(position) {
-            case 'top left':
-              positioning = {
-                bottom :  parentHeight - offset.top + settings.distanceAway,
-                right  :  parentWidth - offset.left - width - arrowOffset,
-                top    : 'auto',
-                left   : 'auto'
-              };
-            break;
-            case 'top center':
-              positioning = {
-                bottom :  parentHeight - offset.top + settings.distanceAway,
-                left   : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset,
-                top    : 'auto',
-                right  : 'auto'
-              };
-            break;
-            case 'top right':
-              positioning = {
-                top    : 'auto',
-                bottom :  parentHeight - offset.top + settings.distanceAway,
-                left   : offset.left + arrowOffset
-              };
-            break;
-            case 'left center':
-              positioning = {
-                top    :  offset.top + (height / 2) - (popupHeight / 2),
-                right  : parentWidth - offset.left + settings.distanceAway - arrowOffset,
-                left   : 'auto',
-                bottom : 'auto'
-              };
-            break;
-            case 'right center':
-              positioning = {
-                top    :  offset.top + (height / 2) - (popupHeight / 2),
-                left   : offset.left + width + settings.distanceAway + arrowOffset,
-                bottom : 'auto',
-                right  : 'auto'
-              };
-            break;
-            case 'bottom left':
-              positioning = {
-                top    :  offset.top + height + settings.distanceAway,
-                right  : parentWidth - offset.left - width - arrowOffset,
-                left   : 'auto',
-                bottom : 'auto'
-              };
-            break;
-            case 'bottom center':
-              positioning = {
-                top    :  offset.top + height + settings.distanceAway,
-                left   : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset,
-                bottom : 'auto',
-                right  : 'auto'
-              };
-            break;
-            case 'bottom right':
-              positioning = {
-                top    :  offset.top + height + settings.distanceAway,
-                left   : offset.left + arrowOffset,
-                bottom : 'auto',
-                right  : 'auto'
-              };
-            break;
-          }
-          // true width on popup, avoid rounding error
-          $.extend(positioning, {
-            width: $popup.width() + 1
-          });
-          // tentatively place on stage
-          $popup
-            .css(positioning)
-            .removeClass(className.position)
-            .addClass(position)
-          ;
-          // check if is offstage
-          offstagePosition = module.get.offstagePosition();
-          // recursively find new positioning
-          if(offstagePosition) {
-            module.debug('Element is outside boundaries ', offstagePosition);
-            if(searchDepth < settings.maxSearchDepth) {
-              position = module.get.nextPosition(position);
-              searchDepth++;
-              module.debug('Trying new position: ', position);
-              return module.position(position);
+              width        = $target.outerWidth(),
+              height       = $target.outerHeight(),
+
+              popupWidth   = $popup.width(),
+              popupHeight  = $popup.outerHeight(),
+
+              parentWidth  = $offsetParent.outerWidth(),
+              parentHeight = $offsetParent.outerHeight(),
+
+              distanceAway = settings.distanceAway,
+
+              offset       = (settings.inline)
+                ? $target.position()
+                : $target.offset(),
+
+              positioning,
+              offstagePosition
+            ;
+            position    = position    || $module.data(metadata.position)    || settings.position;
+            arrowOffset = arrowOffset || $module.data(metadata.offset)      || settings.offset;
+            // adjust for margin when inline
+            if(settings.inline) {
+              if(position == 'left center' || position == 'right center') {
+                arrowOffset  += parseInt( window.getComputedStyle(element).getPropertyValue('margin-top'), 10);
+                distanceAway += -parseInt( window.getComputedStyle(element).getPropertyValue('margin-left'), 10);
+              }
+              else {
+                arrowOffset  += parseInt( window.getComputedStyle(element).getPropertyValue('margin-left'), 10);
+                distanceAway += parseInt( window.getComputedStyle(element).getPropertyValue('margin-top'), 10);
+              }
+            }
+            module.debug('Calculating offset for position', position);
+            switch(position) {
+              case 'top left':
+                positioning = {
+                  bottom :  parentHeight - offset.top + distanceAway,
+                  right  :  parentWidth - offset.left - arrowOffset,
+                  top    : 'auto',
+                  left   : 'auto'
+                };
+              break;
+              case 'top center':
+                positioning = {
+                  bottom :  parentHeight - offset.top + distanceAway,
+                  left   : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset,
+                  top    : 'auto',
+                  right  : 'auto'
+                };
+              break;
+              case 'top right':
+                positioning = {
+                  top    : 'auto',
+                  bottom :  parentHeight - offset.top + distanceAway,
+                  left   : offset.left + width + arrowOffset,
+                  right  : 'auto'
+                };
+              break;
+              case 'left center':
+                positioning = {
+                  top    :  offset.top + (height / 2) - (popupHeight / 2) + arrowOffset,
+                  right  : parentWidth - offset.left + distanceAway,
+                  left   : 'auto',
+                  bottom : 'auto'
+                };
+              break;
+              case 'right center':
+                positioning = {
+                  top    :  offset.top + (height / 2) - (popupHeight / 2) + arrowOffset,
+                  left   : offset.left + width + distanceAway,
+                  bottom : 'auto',
+                  right  : 'auto'
+                };
+              break;
+              case 'bottom left':
+                positioning = {
+                  top    :  offset.top + height + distanceAway,
+                  right  : parentWidth - offset.left - arrowOffset,
+                  left   : 'auto',
+                  bottom : 'auto'
+                };
+              break;
+              case 'bottom center':
+                positioning = {
+                  top    :  offset.top + height + distanceAway,
+                  left   : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset,
+                  bottom : 'auto',
+                  right  : 'auto'
+                };
+              break;
+              case 'bottom right':
+                positioning = {
+                  top    :  offset.top + height + distanceAway,
+                  left   : offset.left + width + arrowOffset,
+                  bottom : 'auto',
+                  right  : 'auto'
+                };
+              break;
+            }
+            // tentatively place on stage
+            $popup
+              .css(positioning)
+              .removeClass(className.position)
+              .addClass(position)
+            ;
+            // check if is offstage
+            offstagePosition = module.get.offstagePosition();
+
+            // recursively find new positioning
+            if(offstagePosition) {
+              module.debug('Element is outside boundaries', offstagePosition);
+              if(searchDepth < settings.maxSearchDepth) {
+                position = module.get.nextPosition(position);
+                searchDepth++;
+                module.debug('Trying new position', position);
+                return module.set.position(position);
+              }
+              else {
+                module.error(error.recursion);
+                searchDepth = 0;
+                return false;
+              }
             }
             else {
-              module.error(error.recursion);
+              module.debug('Position is on stage', position);
               searchDepth = 0;
-              return false;
+              return true;
             }
           }
-          else {
-            module.debug('Position is on stage', position);
-            searchDepth = 0;
-            return true;
-          }
-        },
-
-        show: function() {
-          module.debug('Showing pop-up', settings.transition);
-          if($popup.size() === 0) {
-            module.create();
-          }
-          module.position();
-          $module
-            .addClass(className.visible)
-          ;
-          if(settings.transition && $.fn.transition !== undefined) {
-            $popup
-              .transition(settings.transition + ' in', settings.duration)
-            ;
-          }
-          else {
-            $popup
-              .stop()
-              .fadeIn(settings.duration, settings.easing)
-            ;
-          }
-          if(settings.on == 'click' && settings.clicktoClose) {
-            module.debug('Binding popup close event');
-            $document
-              .on('click.' + namespace, module.gracefully.hide)
-            ;
-          }
-          $.proxy(settings.onShow, $popup)();
-        },
 
-        hideAll: function() {
-          $(selector.popup)
-            .filter(':visible')
-              .popup('hide')
-          ;
         },
 
-        hide: function() {
-          $module
-            .removeClass(className.visible)
-          ;
-          if($popup.is(':visible') ) {
-            module.debug('Hiding pop-up');
-            if(settings.transition && $.fn.transition !== undefined) {
-              $popup
-                .transition(settings.transition + ' out', settings.duration, module.reset)
+        bind: {
+          close:function() {
+            if(settings.on == 'click' && settings.closable) {
+              module.verbose('Binding popup close event to document');
+              $document
+                .on('click' + eventNamespace, module.hideGracefully)
               ;
             }
-            else {
-              $popup
-                .stop()
-                .fadeOut(settings.duration, settings.easing, module.reset)
+          }
+        },
+
+        unbind: {
+          close: function() {
+            if(settings.on == 'click' && settings.closable) {
+              module.verbose('Removing close event from document');
+              $document
+                .off('click' + eventNamespace)
               ;
             }
           }
-          if(settings.on == 'click' && settings.clicktoClose) {
-            $document
-              .off('click.' + namespace)
-            ;
+        },
+
+        is: {
+          visible: function() {
+            return $popup.is(':visible');
+          },
+          hidden: function() {
+            return !module.is.visible();
           }
-          $.proxy(settings.onHide, $popup)();
         },
 
         reset: function() {
-          module.verbose('Resetting inline styles');
           $popup
             .attr('style', '')
             .removeAttr('style')
           ;
-          if(!settings.inline) {
+          if(!settings.preserve) {
             module.remove();
           }
         },
 
-        gracefully: {
-          hide: function(event) {
-            // don't close on clicks inside popup
-            if( $(event.target).closest(selector.popup).size() === 0) {
-              module.hide();
-            }
-          }
-        },
-
         setting: function(name, value) {
           if(value !== undefined) {
             if( $.isPlainObject(name) ) {
@@ -7050,7 +7105,7 @@ $.fn.popup.settings = {
   performance    : true,
   namespace      : 'popup',
 
-  onCreate         : function(){},
+  onCreate       : function(){},
   onShow         : function(){},
   onHide         : function(){},
 
@@ -7060,18 +7115,20 @@ $.fn.popup.settings = {
   title          : false,
 
   on             : 'hover',
-  clicktoClose   : true,
+  target         : false,
+  closable       : true,
 
   position       : 'top center',
   delay          : 150,
-  inline         : true,
+  inline         : false,
+  preserve       : false,
 
-  duration       : 150,
+  duration       : 250,
   easing         : 'easeOutQuint',
   transition     : 'scale',
 
   distanceAway   : 0,
-  arrowOffset    : 0,
+  offset         : 0,
   maxSearchDepth : 10,
 
   error: {
@@ -7081,19 +7138,19 @@ $.fn.popup.settings = {
   },
 
   metadata: {
-    arrowOffset : 'arrowOffset',
-    content     : 'content',
-    html        : 'html',
-    position    : 'position',
-    title       : 'title',
-    variation   : 'variation'
+    content   : 'content',
+    html      : 'html',
+    offset    : 'offset',
+    position  : 'position',
+    title     : 'title',
+    variation : 'variation'
   },
 
   className   : {
-    popup       : 'ui popup',
-    visible     : 'visible',
     loading     : 'loading',
-    position    : 'top left center bottom right'
+    popup       : 'ui popup',
+    position    : 'top left center bottom right',
+    visible     : 'visible'
   },
 
   selector    : {

build/uncompressed/elements/label.css

@@ -202,11 +202,13 @@ a.ui.label:hover:before {
 --------------------*/
 .ui.ribbon.label {
   position: relative;
-  left: -1.8rem;
+  margin: 0em 0.2em;
+  left: -2rem;
   padding-left: 2rem;
   -webkit-border-radius: 0px 4px 4px 0px;
   -moz-border-radius: 0px 4px 4px 0px;
   border-radius: 0px 4px 4px 0px;
+  border-color: rgba(0, 0, 0, 0.15);
 }
 .ui.ribbon.label:after {
   position: absolute;
@@ -396,19 +398,23 @@ a.ui.label:hover:before {
 /* Hover */
 a.ui.black.labels .label:hover,
 a.ui.black.label:hover {
-  background-color: #888888 !important;
-  border-color: #888888 !important;
+  background-color: #333333 !important;
+  border-color: #333333 !important;
 }
 .ui.labels a.black.label:hover:before,
 .ui.black.labels a.label:hover:before,
 a.ui.black.label:hover:before {
-  background-color: #888888 !important;
+  background-color: #333333 !important;
 }
 /* Corner */
 .ui.black.corner.label,
 .ui.black.corner.label:hover {
   background-color: transparent !important;
 }
+/* Ribbon */
+.ui.black.ribbon.label {
+  border-color: #333333 !important;
+}
 /*--- Green ---*/
 .ui.green.labels .label,
 .ui.green.label {
@@ -437,6 +443,10 @@ a.ui.green.label:hover:before {
 .ui.green.corner.label:hover {
   background-color: transparent !important;
 }
+/* Ribbon */
+.ui.green.ribbon.label {
+  border-color: #89B84C !important;
+}
 /*--- Red ---*/
 .ui.red.labels .label,
 .ui.red.label {
@@ -466,6 +476,10 @@ a.ui.red.label:hover {
 a.ui.red.label:hover:before {
   background-color: #DE3859 !important;
 }
+/* Ribbon */
+.ui.red.ribbon.label {
+  border-color: #DE3859 !important;
+}
 /*--- Blue ---*/
 .ui.blue.labels .label,
 .ui.blue.label {
@@ -496,6 +510,10 @@ a.ui.blue.label:hover:before {
 .ui.blue.corner.label:hover {
   background-color: transparent !important;
 }
+/* Ribbon */
+.ui.blue.ribbon.label {
+  border-color: #1AB8F3 !important;
+}
 /*--- Purple ---*/
 .ui.purple.labels .label,
 .ui.purple.label {
@@ -526,6 +544,10 @@ a.ui.purple.label:hover:before {
 .ui.purple.corner.label:hover {
   background-color: transparent !important;
 }
+/* Ribbon */
+.ui.purple.ribbon.label {
+  border-color: #3E3773 !important;
+}
 /*--- Orange ---*/
 .ui.orange.labels .label,
 .ui.orange.label {
@@ -556,7 +578,11 @@ a.ui.orange.label:hover:before {
 .ui.orange.corner.label:hover {
   background-color: transparent !important;
 }
-/*--- Pink ---*/
+/* Ribbon */
+.ui.orange.ribbon.label {
+  border-color: #FF4121 !important;
+}
+/*--- Teal ---*/
 .ui.teal.labels .label,
 .ui.teal.label {
   background-color: #00B5AD !important;
@@ -586,6 +612,10 @@ a.ui.teal.label:hover:before {
 .ui.teal.corner.label:hover {
   background-color: transparent !important;
 }
+/* Ribbon */
+.ui.teal.ribbon.label {
+  border-color: #009A93 !important;
+}
 /*-------------------
      Horizontal
 --------------------*/

build/uncompressed/modules/dimmer.js

@@ -54,6 +54,8 @@ $.fn.dimmer = function(parameters) {
         module
       ;
 
+      console.log(element, parameters);
+
       module = {
 
         preinitialize: function() {

build/uncompressed/modules/dropdown.js

@@ -222,7 +222,6 @@ $.fn.dropdown = function(parameters) {
               if( $choice.find(selector.menu).size() === 0 ) {
                 module.determine.selectAction(text, value);
                 $.proxy(settings.onChange, element)(value, text);
-                event.preventDefault();
               }
             }
 

build/uncompressed/modules/modal.js

@@ -64,9 +64,14 @@ $.fn.modal = function(parameters) {
           module.verbose('Initializing dimmer', $context);
 
           $dimmable = $context
+            .dimmer({
+              closable : false,
+              show     : settings.duration * 0.95,
+              hide     : settings.duration * 1.05
+            })
             .dimmer('add content', $module)
           ;
-          $dimmer = $context
+          $dimmer = $dimmable
             .dimmer('get dimmer')
           ;
 
@@ -201,7 +206,6 @@ $.fn.modal = function(parameters) {
 
         showDimmer: function() {
           module.debug('Showing modal');
-          module.set.dimmerSettings();
           $dimmable.dimmer('show');
         },
 
@@ -331,16 +335,6 @@ $.fn.modal = function(parameters) {
               ;
             }
           },
-          dimmerSettings: function() {
-            module.debug('Setting dimmer settings', $dimmable);
-            $dimmable
-              .dimmer({
-                closable: false,
-                show: settings.duration * 0.95,
-                hide: settings.duration * 1.05
-              })
-            ;
-          },
           scrolling: function() {
             $dimmable.addClass(className.scrolling);
             $module.addClass(className.scrolling);

build/uncompressed/modules/popup.css

@@ -17,7 +17,7 @@
   top: 0px;
   right: 0px;
   z-index: 900;
-  border: 1px solid #DCDDDE;
+  border: 1px solid rgba(0, 0, 0, 0.1);
   max-width: 250px;
   background-color: #FFFFFF;
   padding: 0.8em 1.2em;
@@ -28,9 +28,9 @@
   -webkit-border-radius: 0.2em;
   -moz-border-radius: 0.2em;
   border-radius: 0.2em;
-  -webkit-box-shadow: 0px 1px 1px #DCDDDE;
-  -moz-box-shadow: 0px 1px 1px #DCDDDE;
-  box-shadow: 0px 1px 1px #DCDDDE;
+  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
 }
 .ui.popup .header {
   padding: 0em 0em 0.5em;
@@ -53,9 +53,9 @@
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
-  -webkit-box-shadow: 1px 1px 1px #DCDDDE;
-  -moz-box-shadow: 1px 1px 1px #DCDDDE;
-  box-shadow: 1px 1px 1px #DCDDDE;
+  -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
 }
 .ui.popup .ui.button {
   width: 100%;
@@ -94,12 +94,12 @@
   left: 50%;
   right: auto;
   bottom: auto;
-  -webkit-box-shadow: -1px -1px 1px #dcddde;
-  -moz-box-shadow: -1px -1px 1px #dcddde;
-  box-shadow: -1px -1px 1px #dcddde;
+  -webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
 }
 .ui.bottom.left.popup {
-  margin-right: -0.8em;
+  margin-right: -2em;
 }
 .ui.bottom.left.popup:before {
   top: -0.4em;
@@ -107,12 +107,12 @@
   bottom: auto;
   left: auto;
   margin-left: 0em;
-  -webkit-box-shadow: -1px -1px 1px #dcddde;
-  -moz-box-shadow: -1px -1px 1px #dcddde;
-  box-shadow: -1px -1px 1px #dcddde;
+  -webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
 }
 .ui.bottom.right.popup {
-  margin-left: -0.8em;
+  margin-left: -2em;
 }
 .ui.bottom.right.popup:before {
   top: -0.4em;
@@ -120,9 +120,9 @@
   right: auto;
   bottom: auto;
   margin-left: 0em;
-  -webkit-box-shadow: -1px -1px 1px #dcddde;
-  -moz-box-shadow: -1px -1px 1px #dcddde;
-  box-shadow: -1px -1px 1px #dcddde;
+  -webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
 }
 /*--- Above ---*/
 .ui.top.center.popup:before {
@@ -133,7 +133,7 @@
   margin-left: -0.4em;
 }
 .ui.top.left.popup {
-  margin-right: -0.8em;
+  margin-right: -2em;
 }
 .ui.top.left.popup:before {
   bottom: -0.4em;
@@ -143,7 +143,7 @@
   margin-left: 0em;
 }
 .ui.top.right.popup {
-  margin-left: -0.8em;
+  margin-left: -2em;
 }
 .ui.top.right.popup:before {
   bottom: -0.4em;
@@ -159,9 +159,9 @@
   bottom: auto;
   left: auto;
   margin-top: -0.4em;
-  -moz-box-shadow: 1px -1px 1px #dcddde;
-  -webkit-box-shadow: 1px -1px 1px #dcddde;
-  box-shadow: 1px -1px 1px #dcddde;
+  -moz-box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
 }
 /*--- Right Center  ---*/
 .ui.right.center.popup:before {
@@ -170,9 +170,9 @@
   bottom: auto;
   right: auto;
   margin-top: -0.4em;
-  -moz-box-shadow: -1px 1px 1px #dcddde;
-  -webkit-box-shadow: -1px 1px 1px #dcddde;
-  box-shadow: -1px 1px 1px #dcddde;
+  -moz-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
 }
 /*******************************
             States

build/uncompressed/modules/popup.js

@@ -15,6 +15,7 @@ $.fn.popup = function(parameters) {
   var
     $allModules     = $(this),
     $document       = $(document),
+    $body           = $('body'),
 
     moduleSelector  = $allModules.selector || '',
 
@@ -44,11 +45,17 @@ $.fn.popup = function(parameters) {
         moduleNamespace = 'module-' + namespace,
 
         $module         = $(this),
+        $target         = (settings.target)
+          ? $(settings.target)
+          : $module,
 
         $window         = $(window),
-        $offsetParent   = $module.offsetParent(),
+
+        $offsetParent   = (settings.inline)
+          ? $target.offsetParent()
+          : $window,
         $popup          = (settings.inline)
-          ? $module.next(settings.selector.popup)
+          ? $target.next(settings.selector.popup)
           : $window.children(settings.selector.popup).last(),
 
         searchDepth     = 0,
@@ -63,17 +70,20 @@ $.fn.popup = function(parameters) {
         // binds events
         initialize: function() {
           module.debug('Initializing module', $module);
-          if(settings.on == 'hover') {
+          if(settings.on == 'click') {
             $module
-              .on('mouseenter' + eventNamespace, module.event.mouseenter)
-              .on('mouseleave' + eventNamespace, module.event.mouseleave)
+              .on('click', module.toggle)
             ;
           }
           else {
             $module
-              .on(settings.on + '' + eventNamespace, module.event[settings.on])
+              .on(module.get.startEvent() + eventNamespace, module.event.start)
+              .on(module.get.endEvent() + eventNamespace, module.event.end)
             ;
           }
+          if(settings.target) {
+            module.debug('Target set to element', $target);
+          }
           $window
             .on('resize' + eventNamespace, module.event.resize)
           ;
@@ -89,11 +99,14 @@ $.fn.popup = function(parameters) {
         },
 
         refresh: function() {
-          $popup        = (settings.inline)
-            ? $module.next(selector.popup)
-            : $window.children(selector.popup).last()
-          ;
-          $offsetParent = $module.offsetParent();
+          if(settings.inline) {
+            $popup = $target.next(selector.popup);
+            $offsetParent = $target.offsetParent();
+          }
+          else {
+            console.log('found by refresh');
+            $popup = $window.children(selector.popup).last();
+          }
         },
 
         destroy: function() {
@@ -101,6 +114,9 @@ $.fn.popup = function(parameters) {
           $window
             .off(eventNamespace)
           ;
+          $popup
+            .remove()
+          ;
           $module
             .off(eventNamespace)
             .removeData(moduleNamespace)
@@ -108,30 +124,22 @@ $.fn.popup = function(parameters) {
         },
 
         event: {
-          mouseenter:  function(event) {
-            var element = this;
+          start:  function(event) {
             module.timer = setTimeout(function() {
-              $.proxy(module.toggle, element)();
-              if( $(element).hasClass(className.visible) ) {
-                event.stopPropagation();
+              if( module.is.hidden() ) {
+                module.show();
               }
             }, settings.delay);
           },
-          mouseleave:  function() {
+          end:  function() {
             clearTimeout(module.timer);
-            if( $module.is(':visible') ) {
+            if( module.is.visible() ) {
               module.hide();
             }
           },
-          click: function(event) {
-            $.proxy(module.toggle, this)();
-            if( $(this).hasClass(className.visible) ) {
-              event.stopPropagation();
-            }
-          },
           resize: function() {
-            if( $popup.is(':visible') ) {
-              module.position();
+            if( module.is.visible() ) {
+              module.set.position();
             }
           }
         },
@@ -166,7 +174,7 @@ $.fn.popup = function(parameters) {
             else {
               module.verbose('Appending popup element to body', $popup);
               $popup
-                .appendTo( $('body') )
+                .appendTo( $body )
               ;
             }
             $.proxy(settings.onCreate, $popup)();
@@ -176,6 +184,87 @@ $.fn.popup = function(parameters) {
           }
         },
 
+        // determines popup state
+        toggle: function() {
+          module.debug('Toggling pop-up');
+          if( module.is.hidden() ) {
+            module.hideAll();
+            module.show();
+          }
+          else {
+            module.hide();
+          }
+        },
+
+        show: function() {
+          module.debug('Showing pop-up', settings.transition);
+          if( !module.exists() ) {
+            module.create();
+          }
+          module.set.position();
+          $module
+            .addClass(className.visible)
+          ;
+          if(settings.transition && $.fn.transition !== undefined) {
+            $popup
+              .transition(settings.transition + ' in', settings.duration, module.bind.close)
+            ;
+          }
+          else {
+            $popup
+              .stop()
+              .fadeIn(settings.duration, settings.easing, module.bind.close)
+            ;
+          }
+          $.proxy(settings.onShow, $popup)();
+        },
+
+
+        hide: function() {
+          $module
+            .removeClass(className.visible)
+          ;
+          module.unbind.close();
+          if( module.is.visible() ) {
+            module.debug('Hiding pop-up');
+            if(settings.transition && $.fn.transition !== undefined) {
+              $popup
+                .transition(settings.transition + ' out', settings.duration, module.reset)
+              ;
+            }
+            else {
+              $popup
+                .stop()
+                .fadeOut(settings.duration, settings.easing, module.reset)
+              ;
+            }
+          }
+          $.proxy(settings.onHide, $popup)();
+        },
+
+        hideAll: function() {
+          $(selector.popup)
+            .filter(':visible')
+              .popup('hide')
+          ;
+        },
+
+        hideGracefully: function(event) {
+          // don't close on clicks inside popup
+          if( $(event.target).closest(selector.popup).size() === 0) {
+            module.hide();
+          }
+        },
+
+        exists: function() {
+          if(settings.inline) {
+            return ( $popup.size() !== 0 );
+          }
+          else {
+            return ( $popup.parent($body).size() );
+          }
+        },
+
         remove: function() {
           module.debug('Removing popup');
           $popup
@@ -184,6 +273,22 @@ $.fn.popup = function(parameters) {
         },
 
         get: {
+          startEvent: function() {
+            if(settings.on == 'hover') {
+              return 'mouseenter';
+            }
+            else if(settings.on == 'focus') {
+              return 'focus';
+            }
+          },
+          endEvent: function() {
+            if(settings.on == 'hover') {
+              return 'mouseleave';
+            }
+            else if(settings.on == 'focus') {
+              return 'blur';
+            }
+          },
           offstagePosition: function() {
             var
               boundary  = {
@@ -251,229 +356,184 @@ $.fn.popup = function(parameters) {
           }
         },
 
-        // determines popup state
-        toggle: function() {
-          $module = $(this);
-          module.debug('Toggling pop-up');
-          // refresh state of module
-          module.refresh();
-          if( !$module.hasClass(className.visible) ) {
-            if(settings.on == 'click') {
-              module.hideAll();
-            }
-            module.show();
-          }
-          else {
-            // module.hide();
-          }
-        },
+        set: {
+          position: function(position, arrowOffset) {
+            var
+              windowWidth  = $(window).width(),
+              windowHeight = $(window).height(),
 
-        position: function(position, arrowOffset) {
-          var
-            windowWidth  = $(window).width(),
-            windowHeight = $(window).height(),
-            width        = $module.outerWidth(),
-            height       = $module.outerHeight(),
-            popupWidth   = $popup.width(),
-            popupHeight  = $popup.outerHeight(),
-
-            offset       = (settings.inline)
-              ? $module.position()
-              : $module.offset(),
-            parentWidth  = (settings.inline)
-              ? $offsetParent.outerWidth()
-              : $window.outerWidth(),
-            parentHeight = (settings.inline)
-              ? $offsetParent.outerHeight()
-              : $window.outerHeight(),
-
-            positioning,
-            offstagePosition
-          ;
-          position    = position    || $module.data(metadata.position)    || settings.position;
-          arrowOffset = arrowOffset || $module.data(metadata.arrowOffset) || settings.arrowOffset;
-          module.debug('Calculating offset for position', position);
-          switch(position) {
-            case 'top left':
-              positioning = {
-                bottom :  parentHeight - offset.top + settings.distanceAway,
-                right  :  parentWidth - offset.left - width - arrowOffset,
-                top    : 'auto',
-                left   : 'auto'
-              };
-            break;
-            case 'top center':
-              positioning = {
-                bottom :  parentHeight - offset.top + settings.distanceAway,
-                left   : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset,
-                top    : 'auto',
-                right  : 'auto'
-              };
-            break;
-            case 'top right':
-              positioning = {
-                top    : 'auto',
-                bottom :  parentHeight - offset.top + settings.distanceAway,
-                left   : offset.left + arrowOffset
-              };
-            break;
-            case 'left center':
-              positioning = {
-                top    :  offset.top + (height / 2) - (popupHeight / 2),
-                right  : parentWidth - offset.left + settings.distanceAway - arrowOffset,
-                left   : 'auto',
-                bottom : 'auto'
-              };
-            break;
-            case 'right center':
-              positioning = {
-                top    :  offset.top + (height / 2) - (popupHeight / 2),
-                left   : offset.left + width + settings.distanceAway + arrowOffset,
-                bottom : 'auto',
-                right  : 'auto'
-              };
-            break;
-            case 'bottom left':
-              positioning = {
-                top    :  offset.top + height + settings.distanceAway,
-                right  : parentWidth - offset.left - width - arrowOffset,
-                left   : 'auto',
-                bottom : 'auto'
-              };
-            break;
-            case 'bottom center':
-              positioning = {
-                top    :  offset.top + height + settings.distanceAway,
-                left   : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset,
-                bottom : 'auto',
-                right  : 'auto'
-              };
-            break;
-            case 'bottom right':
-              positioning = {
-                top    :  offset.top + height + settings.distanceAway,
-                left   : offset.left + arrowOffset,
-                bottom : 'auto',
-                right  : 'auto'
-              };
-            break;
-          }
-          // true width on popup, avoid rounding error
-          $.extend(positioning, {
-            width: $popup.width() + 1
-          });
-          // tentatively place on stage
-          $popup
-            .css(positioning)
-            .removeClass(className.position)
-            .addClass(position)
-          ;
-          // check if is offstage
-          offstagePosition = module.get.offstagePosition();
-          // recursively find new positioning
-          if(offstagePosition) {
-            module.debug('Element is outside boundaries ', offstagePosition);
-            if(searchDepth < settings.maxSearchDepth) {
-              position = module.get.nextPosition(position);
-              searchDepth++;
-              module.debug('Trying new position: ', position);
-              return module.position(position);
-            }
-            else {
-              module.error(error.recursion);
-              searchDepth = 0;
-              return false;
-            }
-          }
-          else {
-            module.debug('Position is on stage', position);
-            searchDepth = 0;
-            return true;
-          }
-        },
+              width        = $target.outerWidth(),
+              height       = $target.outerHeight(),
 
-        show: function() {
-          module.debug('Showing pop-up', settings.transition);
-          if($popup.size() === 0) {
-            module.create();
-          }
-          module.position();
-          $module
-            .addClass(className.visible)
-          ;
-          if(settings.transition && $.fn.transition !== undefined) {
-            $popup
-              .transition(settings.transition + ' in', settings.duration)
+              popupWidth   = $popup.width(),
+              popupHeight  = $popup.outerHeight(),
+
+              parentWidth  = $offsetParent.outerWidth(),
+              parentHeight = $offsetParent.outerHeight(),
+
+              distanceAway = settings.distanceAway,
+
+              offset       = (settings.inline)
+                ? $target.position()
+                : $target.offset(),
+
+              positioning,
+              offstagePosition
             ;
-          }
-          else {
+            position    = position    || $module.data(metadata.position)    || settings.position;
+            arrowOffset = arrowOffset || $module.data(metadata.offset)      || settings.offset;
+            // adjust for margin when inline
+            if(settings.inline) {
+              if(position == 'left center' || position == 'right center') {
+                arrowOffset  += parseInt( window.getComputedStyle(element).getPropertyValue('margin-top'), 10);
+                distanceAway += -parseInt( window.getComputedStyle(element).getPropertyValue('margin-left'), 10);
+              }
+              else {
+                arrowOffset  += parseInt( window.getComputedStyle(element).getPropertyValue('margin-left'), 10);
+                distanceAway += parseInt( window.getComputedStyle(element).getPropertyValue('margin-top'), 10);
+              }
+            }
+            module.debug('Calculating offset for position', position);
+            switch(position) {
+              case 'top left':
+                positioning = {
+                  bottom :  parentHeight - offset.top + distanceAway,
+                  right  :  parentWidth - offset.left - arrowOffset,
+                  top    : 'auto',
+                  left   : 'auto'
+                };
+              break;
+              case 'top center':
+                positioning = {
+                  bottom :  parentHeight - offset.top + distanceAway,
+                  left   : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset,
+                  top    : 'auto',
+                  right  : 'auto'
+                };
+              break;
+              case 'top right':
+                positioning = {
+                  top    : 'auto',
+                  bottom :  parentHeight - offset.top + distanceAway,
+                  left   : offset.left + width + arrowOffset,
+                  right  : 'auto'
+                };
+              break;
+              case 'left center':
+                positioning = {
+                  top    :  offset.top + (height / 2) - (popupHeight / 2) + arrowOffset,
+                  right  : parentWidth - offset.left + distanceAway,
+                  left   : 'auto',
+                  bottom : 'auto'
+                };
+              break;
+              case 'right center':
+                positioning = {
+                  top    :  offset.top + (height / 2) - (popupHeight / 2) + arrowOffset,
+                  left   : offset.left + width + distanceAway,
+                  bottom : 'auto',
+                  right  : 'auto'
+                };
+              break;
+              case 'bottom left':
+                positioning = {
+                  top    :  offset.top + height + distanceAway,
+                  right  : parentWidth - offset.left - arrowOffset,
+                  left   : 'auto',
+                  bottom : 'auto'
+                };
+              break;
+              case 'bottom center':
+                positioning = {
+                  top    :  offset.top + height + distanceAway,
+                  left   : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset,
+                  bottom : 'auto',
+                  right  : 'auto'
+                };
+              break;
+              case 'bottom right':
+                positioning = {
+                  top    :  offset.top + height + distanceAway,
+                  left   : offset.left + width + arrowOffset,
+                  bottom : 'auto',
+                  right  : 'auto'
+                };
+              break;
+            }
+            // tentatively place on stage
             $popup
-              .stop()
-              .fadeIn(settings.duration, settings.easing)
-            ;
-          }
-          if(settings.on == 'click' && settings.clicktoClose) {
-            module.debug('Binding popup close event');
-            $document
-              .on('click.' + namespace, module.gracefully.hide)
+              .css(positioning)
+              .removeClass(className.position)
+              .addClass(position)
             ;
+            // check if is offstage
+            offstagePosition = module.get.offstagePosition();
+
+            // recursively find new positioning
+            if(offstagePosition) {
+              module.debug('Element is outside boundaries', offstagePosition);
+              if(searchDepth < settings.maxSearchDepth) {
+                position = module.get.nextPosition(position);
+                searchDepth++;
+                module.debug('Trying new position', position);
+                return module.set.position(position);
+              }
+              else {
+                module.error(error.recursion);
+                searchDepth = 0;
+                return false;
+              }
+            }
+            else {
+              module.debug('Position is on stage', position);
+              searchDepth = 0;
+              return true;
+            }
           }
-          $.proxy(settings.onShow, $popup)();
-        },
 
-        hideAll: function() {
-          $(selector.popup)
-            .filter(':visible')
-              .popup('hide')
-          ;
         },
 
-        hide: function() {
-          $module
-            .removeClass(className.visible)
-          ;
-          if($popup.is(':visible') ) {
-            module.debug('Hiding pop-up');
-            if(settings.transition && $.fn.transition !== undefined) {
-              $popup
-                .transition(settings.transition + ' out', settings.duration, module.reset)
+        bind: {
+          close:function() {
+            if(settings.on == 'click' && settings.closable) {
+              module.verbose('Binding popup close event to document');
+              $document
+                .on('click' + eventNamespace, module.hideGracefully)
               ;
             }
-            else {
-              $popup
-                .stop()
-                .fadeOut(settings.duration, settings.easing, module.reset)
+          }
+        },
+
+        unbind: {
+          close: function() {
+            if(settings.on == 'click' && settings.closable) {
+              module.verbose('Removing close event from document');
+              $document
+                .off('click' + eventNamespace)
               ;
             }
           }
-          if(settings.on == 'click' && settings.clicktoClose) {
-            $document
-              .off('click.' + namespace)
-            ;
+        },
+
+        is: {
+          visible: function() {
+            return $popup.is(':visible');
+          },
+          hidden: function() {
+            return !module.is.visible();
           }
-          $.proxy(settings.onHide, $popup)();
         },
 
         reset: function() {
-          module.verbose('Resetting inline styles');
           $popup
             .attr('style', '')
             .removeAttr('style')
           ;
-          if(!settings.inline) {
+          if(!settings.preserve) {
             module.remove();
           }
         },
 
-        gracefully: {
-          hide: function(event) {
-            // don't close on clicks inside popup
-            if( $(event.target).closest(selector.popup).size() === 0) {
-              module.hide();
-            }
-          }
-        },
-
         setting: function(name, value) {
           if(value !== undefined) {
             if( $.isPlainObject(name) ) {
@@ -661,7 +721,7 @@ $.fn.popup.settings = {
   performance    : true,
   namespace      : 'popup',
 
-  onCreate         : function(){},
+  onCreate       : function(){},
   onShow         : function(){},
   onHide         : function(){},
 
@@ -671,18 +731,20 @@ $.fn.popup.settings = {
   title          : false,
 
   on             : 'hover',
-  clicktoClose   : true,
+  target         : false,
+  closable       : true,
 
   position       : 'top center',
   delay          : 150,
-  inline         : true,
+  inline         : false,
+  preserve       : false,
 
-  duration       : 150,
+  duration       : 250,
   easing         : 'easeOutQuint',
   transition     : 'scale',
 
   distanceAway   : 0,
-  arrowOffset    : 0,
+  offset         : 0,
   maxSearchDepth : 10,
 
   error: {
@@ -692,19 +754,19 @@ $.fn.popup.settings = {
   },
 
   metadata: {
-    arrowOffset : 'arrowOffset',
-    content     : 'content',
-    html        : 'html',
-    position    : 'position',
-    title       : 'title',
-    variation   : 'variation'
+    content   : 'content',
+    html      : 'html',
+    offset    : 'offset',
+    position  : 'position',
+    title     : 'title',
+    variation : 'variation'
   },
 
   className   : {
-    popup       : 'ui popup',
-    visible     : 'visible',
     loading     : 'loading',
-    position    : 'top left center bottom right'
+    popup       : 'ui popup',
+    position    : 'top left center bottom right',
+    visible     : 'visible'
   },
 
   selector    : {

build/uncompressed/views/item.css

@@ -89,7 +89,6 @@
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
-  overflow: hidden;
   -webkit-border-radius: 0.2em;
   -moz-border-radius: 0.2em;
   border-radius: 0.2em;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "semantic",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "title": "Semantic UI",
   "description": "Semantic empowers designers and developers by creating a shared vocabulary for UI.",
   "homepage": "http://www.semantic-ui.com",

rtl/less/elements/label.less

@@ -266,11 +266,14 @@ a.ui.label:hover:before {
 
 .ui.ribbon.label {
   position: relative;
-  right: -1.8rem;
+  margin: 0em 0.2em;
+  right: -2rem;
   padding-right: 2rem;
   -webkit-border-radius: 4px 0px 0px 4px;
   -moz-border-radius: 4px 0px 0px 4px;
   border-radius: 4px 0px 0px 4px;
+
+  border-color: rgba(0, 0, 0, 0.15);
 }
 
 .ui.ribbon.label:after {
@@ -495,13 +498,13 @@ a.ui.label:hover:before {
 /* Hover */
 a.ui.black.labels .label:hover,
 a.ui.black.label:hover {
-  background-color: #888888 !important;
-  border-color: #888888 !important;
+  background-color: #333333 !important;
+  border-color: #333333 !important;
 }
 .ui.labels a.black.label:hover:before,
 .ui.black.labels a.label:hover:before,
 a.ui.black.label:hover:before {
-  background-color: #888888 !important;
+  background-color: #333333 !important;
 }
 
 /* Corner */
@@ -509,6 +512,10 @@ a.ui.black.label:hover:before {
 .ui.black.corner.label:hover {
   background-color: transparent !important;
 }
+/* Ribbon */
+.ui.black.ribbon.label {
+  border-color: #333333 !important;
+}
 
 
 /*--- Green ---*/
@@ -541,6 +548,10 @@ a.ui.green.label:hover:before {
 .ui.green.corner.label:hover {
   background-color: transparent !important;
 }
+/* Ribbon */
+.ui.green.ribbon.label {
+  border-color: #89B84C !important;
+}
 
 
 /*--- Red ---*/
@@ -573,6 +584,10 @@ a.ui.red.label:hover{
 a.ui.red.label:hover:before {
   background-color: #DE3859 !important;
 }
+/* Ribbon */
+.ui.red.ribbon.label {
+  border-color: #DE3859 !important;
+}
 
 
 /*--- Blue ---*/
@@ -605,6 +620,10 @@ a.ui.blue.label:hover:before {
 .ui.blue.corner.label:hover {
   background-color: transparent !important;
 }
+/* Ribbon */
+.ui.blue.ribbon.label {
+  border-color: #1AB8F3 !important;
+}
 
 /*--- Purple ---*/
 .ui.purple.labels .label,
@@ -636,6 +655,10 @@ a.ui.purple.label:hover:before {
 .ui.purple.corner.label:hover {
   background-color: transparent !important;
 }
+/* Ribbon */
+.ui.purple.ribbon.label {
+  border-color: #3E3773 !important;
+}
 
 /*--- Orange ---*/
 .ui.orange.labels .label,
@@ -667,11 +690,15 @@ a.ui.orange.label:hover:before {
 .ui.orange.corner.label:hover {
   background-color: transparent !important;
 }
+/* Ribbon */
+.ui.orange.ribbon.label {
+  border-color: #FF4121 !important;
+}
 
 
 
 
-/*--- Pink ---*/
+/*--- Teal ---*/
 .ui.teal.labels .label,
 .ui.teal.label {
   background-color: #00B5AD !important;
@@ -701,6 +728,10 @@ a.ui.teal.label:hover:before {
 .ui.teal.corner.label:hover {
   background-color: transparent !important;
 }
+/* Ribbon */
+.ui.teal.ribbon.label {
+  border-color: #009A93 !important;
+}
 
 /*-------------------
      Horizontal

rtl/less/modules/dimmer.js

@@ -54,6 +54,8 @@ $.fn.dimmer = function(parameters) {
         module
       ;
 
+      console.log(element, parameters);
+
       module = {
 
         preinitialize: function() {

rtl/less/modules/dropdown.js

@@ -222,7 +222,6 @@ $.fn.dropdown = function(parameters) {
               if( $choice.find(selector.menu).size() === 0 ) {
                 module.determine.selectAction(text, value);
                 $.proxy(settings.onChange, element)(value, text);
-                event.preventDefault();
               }
             }
 

rtl/less/modules/modal.js

@@ -64,9 +64,14 @@ $.fn.modal = function(parameters) {
           module.verbose('Initializing dimmer', $context);
 
           $dimmable = $context
+            .dimmer({
+              closable : false,
+              show     : settings.duration * 0.95,
+              hide     : settings.duration * 1.05
+            })
             .dimmer('add content', $module)
           ;
-          $dimmer = $context
+          $dimmer = $dimmable
             .dimmer('get dimmer')
           ;
 
@@ -201,7 +206,6 @@ $.fn.modal = function(parameters) {
 
         showDimmer: function() {
           module.debug('Showing modal');
-          module.set.dimmerSettings();
           $dimmable.dimmer('show');
         },
 
@@ -331,16 +335,6 @@ $.fn.modal = function(parameters) {
               ;
             }
           },
-          dimmerSettings: function() {
-            module.debug('Setting dimmer settings', $dimmable);
-            $dimmable
-              .dimmer({
-                closable: false,
-                show: settings.duration * 0.95,
-                hide: settings.duration * 1.05
-              })
-            ;
-          },
           scrolling: function() {
             $dimmable.addClass(className.scrolling);
             $module.addClass(className.scrolling);

rtl/less/modules/popup.js

@@ -15,6 +15,7 @@ $.fn.popup = function(parameters) {
   var
     $allModules     = $(this),
     $document       = $(document),
+    $body           = $('body'),
 
     moduleSelector  = $allModules.selector || '',
 
@@ -44,11 +45,17 @@ $.fn.popup = function(parameters) {
         moduleNamespace = 'module-' + namespace,
 
         $module         = $(this),
+        $target         = (settings.target)
+          ? $(settings.target)
+          : $module,
 
         $window         = $(window),
-        $offsetParent   = $module.offsetParent(),
+
+        $offsetParent   = (settings.inline)
+          ? $target.offsetParent()
+          : $window,
         $popup          = (settings.inline)
-          ? $module.next(settings.selector.popup)
+          ? $target.next(settings.selector.popup)
           : $window.children(settings.selector.popup).last(),
 
         searchDepth     = 0,
@@ -63,17 +70,20 @@ $.fn.popup = function(parameters) {
         // binds events
         initialize: function() {
           module.debug('Initializing module', $module);
-          if(settings.on == 'hover') {
+          if(settings.on == 'click') {
             $module
-              .on('mouseenter' + eventNamespace, module.event.mouseenter)
-              .on('mouseleave' + eventNamespace, module.event.mouseleave)
+              .on('click', module.toggle)
             ;
           }
           else {
             $module
-              .on(settings.on + '' + eventNamespace, module.event[settings.on])
+              .on(module.get.startEvent() + eventNamespace, module.event.start)
+              .on(module.get.endEvent() + eventNamespace, module.event.end)
             ;
           }
+          if(settings.target) {
+            module.debug('Target set to element', $target);
+          }
           $window
             .on('resize' + eventNamespace, module.event.resize)
           ;
@@ -89,11 +99,14 @@ $.fn.popup = function(parameters) {
         },
 
         refresh: function() {
-          $popup        = (settings.inline)
-            ? $module.next(selector.popup)
-            : $window.children(selector.popup).last()
-          ;
-          $offsetParent = $module.offsetParent();
+          if(settings.inline) {
+            $popup = $target.next(selector.popup);
+            $offsetParent = $target.offsetParent();
+          }
+          else {
+            console.log('found by refresh');
+            $popup = $window.children(selector.popup).last();
+          }
         },
 
         destroy: function() {
@@ -101,6 +114,9 @@ $.fn.popup = function(parameters) {
           $window
             .off(eventNamespace)
           ;
+          $popup
+            .remove()
+          ;
           $module
             .off(eventNamespace)
             .removeData(moduleNamespace)
@@ -108,30 +124,22 @@ $.fn.popup = function(parameters) {
         },
 
         event: {
-          mouseenter:  function(event) {
-            var element = this;
+          start:  function(event) {
             module.timer = setTimeout(function() {
-              $.proxy(module.toggle, element)();
-              if( $(element).hasClass(className.visible) ) {
-                event.stopPropagation();
+              if( module.is.hidden() ) {
+                module.show();
               }
             }, settings.delay);
           },
-          mouseleave:  function() {
+          end:  function() {
             clearTimeout(module.timer);
-            if( $module.is(':visible') ) {
+            if( module.is.visible() ) {
               module.hide();
             }
           },
-          click: function(event) {
-            $.proxy(module.toggle, this)();
-            if( $(this).hasClass(className.visible) ) {
-              event.stopPropagation();
-            }
-          },
           resize: function() {
-            if( $popup.is(':visible') ) {
-              module.position();
+            if( module.is.visible() ) {
+              module.set.position();
             }
           }
         },
@@ -166,7 +174,7 @@ $.fn.popup = function(parameters) {
             else {
               module.verbose('Appending popup element to body', $popup);
               $popup
-                .appendTo( $('body') )
+                .appendTo( $body )
               ;
             }
             $.proxy(settings.onCreate, $popup)();
@@ -176,6 +184,87 @@ $.fn.popup = function(parameters) {
           }
         },
 
+        // determines popup state
+        toggle: function() {
+          module.debug('Toggling pop-up');
+          if( module.is.hidden() ) {
+            module.hideAll();
+            module.show();
+          }
+          else {
+            module.hide();
+          }
+        },
+
+        show: function() {
+          module.debug('Showing pop-up', settings.transition);
+          if( !module.exists() ) {
+            module.create();
+          }
+          module.set.position();
+          $module
+            .addClass(className.visible)
+          ;
+          if(settings.transition && $.fn.transition !== undefined) {
+            $popup
+              .transition(settings.transition + ' in', settings.duration, module.bind.close)
+            ;
+          }
+          else {
+            $popup
+              .stop()
+              .fadeIn(settings.duration, settings.easing, module.bind.close)
+            ;
+          }
+          $.proxy(settings.onShow, $popup)();
+        },
+
+
+        hide: function() {
+          $module
+            .removeClass(className.visible)
+          ;
+          module.unbind.close();
+          if( module.is.visible() ) {
+            module.debug('Hiding pop-up');
+            if(settings.transition && $.fn.transition !== undefined) {
+              $popup
+                .transition(settings.transition + ' out', settings.duration, module.reset)
+              ;
+            }
+            else {
+              $popup
+                .stop()
+                .fadeOut(settings.duration, settings.easing, module.reset)
+              ;
+            }
+          }
+          $.proxy(settings.onHide, $popup)();
+        },
+
+        hideAll: function() {
+          $(selector.popup)
+            .filter(':visible')
+              .popup('hide')
+          ;
+        },
+
+        hideGracefully: function(event) {
+          // don't close on clicks inside popup
+          if( $(event.target).closest(selector.popup).size() === 0) {
+            module.hide();
+          }
+        },
+
+        exists: function() {
+          if(settings.inline) {
+            return ( $popup.size() !== 0 );
+          }
+          else {
+            return ( $popup.parent($body).size() );
+          }
+        },
+
         remove: function() {
           module.debug('Removing popup');
           $popup
@@ -184,6 +273,22 @@ $.fn.popup = function(parameters) {
         },
 
         get: {
+          startEvent: function() {
+            if(settings.on == 'hover') {
+              return 'mouseenter';
+            }
+            else if(settings.on == 'focus') {
+              return 'focus';
+            }
+          },
+          endEvent: function() {
+            if(settings.on == 'hover') {
+              return 'mouseleave';
+            }
+            else if(settings.on == 'focus') {
+              return 'blur';
+            }
+          },
           offstagePosition: function() {
             var
               boundary  = {
@@ -251,229 +356,184 @@ $.fn.popup = function(parameters) {
           }
         },
 
-        // determines popup state
-        toggle: function() {
-          $module = $(this);
-          module.debug('Toggling pop-up');
-          // refresh state of module
-          module.refresh();
-          if( !$module.hasClass(className.visible) ) {
-            if(settings.on == 'click') {
-              module.hideAll();
-            }
-            module.show();
-          }
-          else {
-            // module.hide();
-          }
-        },
+        set: {
+          position: function(position, arrowOffset) {
+            var
+              windowWidth  = $(window).width(),
+              windowHeight = $(window).height(),
 
-        position: function(position, arrowOffset) {
-          var
-            windowWidth  = $(window).width(),
-            windowHeight = $(window).height(),
-            width        = $module.outerWidth(),
-            height       = $module.outerHeight(),
-            popupWidth   = $popup.width(),
-            popupHeight  = $popup.outerHeight(),
-
-            offset       = (settings.inline)
-              ? $module.position()
-              : $module.offset(),
-            parentWidth  = (settings.inline)
-              ? $offsetParent.outerWidth()
-              : $window.outerWidth(),
-            parentHeight = (settings.inline)
-              ? $offsetParent.outerHeight()
-              : $window.outerHeight(),
-
-            positioning,
-            offstagePosition
-          ;
-          position    = position    || $module.data(metadata.position)    || settings.position;
-          arrowOffset = arrowOffset || $module.data(metadata.arrowOffset) || settings.arrowOffset;
-          module.debug('Calculating offset for position', position);
-          switch(position) {
-            case 'top left':
-              positioning = {
-                bottom :  parentHeight - offset.top + settings.distanceAway,
-                right  :  parentWidth - offset.left - width - arrowOffset,
-                top    : 'auto',
-                left   : 'auto'
-              };
-            break;
-            case 'top center':
-              positioning = {
-                bottom :  parentHeight - offset.top + settings.distanceAway,
-                left   : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset,
-                top    : 'auto',
-                right  : 'auto'
-              };
-            break;
-            case 'top right':
-              positioning = {
-                top    : 'auto',
-                bottom :  parentHeight - offset.top + settings.distanceAway,
-                left   : offset.left + arrowOffset
-              };
-            break;
-            case 'left center':
-              positioning = {
-                top    :  offset.top + (height / 2) - (popupHeight / 2),
-                right  : parentWidth - offset.left + settings.distanceAway - arrowOffset,
-                left   : 'auto',
-                bottom : 'auto'
-              };
-            break;
-            case 'right center':
-              positioning = {
-                top    :  offset.top + (height / 2) - (popupHeight / 2),
-                left   : offset.left + width + settings.distanceAway + arrowOffset,
-                bottom : 'auto',
-                right  : 'auto'
-              };
-            break;
-            case 'bottom left':
-              positioning = {
-                top    :  offset.top + height + settings.distanceAway,
-                right  : parentWidth - offset.left - width - arrowOffset,
-                left   : 'auto',
-                bottom : 'auto'
-              };
-            break;
-            case 'bottom center':
-              positioning = {
-                top    :  offset.top + height + settings.distanceAway,
-                left   : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset,
-                bottom : 'auto',
-                right  : 'auto'
-              };
-            break;
-            case 'bottom right':
-              positioning = {
-                top    :  offset.top + height + settings.distanceAway,
-                left   : offset.left + arrowOffset,
-                bottom : 'auto',
-                right  : 'auto'
-              };
-            break;
-          }
-          // true width on popup, avoid rounding error
-          $.extend(positioning, {
-            width: $popup.width() + 1
-          });
-          // tentatively place on stage
-          $popup
-            .css(positioning)
-            .removeClass(className.position)
-            .addClass(position)
-          ;
-          // check if is offstage
-          offstagePosition = module.get.offstagePosition();
-          // recursively find new positioning
-          if(offstagePosition) {
-            module.debug('Element is outside boundaries ', offstagePosition);
-            if(searchDepth < settings.maxSearchDepth) {
-              position = module.get.nextPosition(position);
-              searchDepth++;
-              module.debug('Trying new position: ', position);
-              return module.position(position);
-            }
-            else {
-              module.error(error.recursion);
-              searchDepth = 0;
-              return false;
-            }
-          }
-          else {
-            module.debug('Position is on stage', position);
-            searchDepth = 0;
-            return true;
-          }
-        },
+              width        = $target.outerWidth(),
+              height       = $target.outerHeight(),
 
-        show: function() {
-          module.debug('Showing pop-up', settings.transition);
-          if($popup.size() === 0) {
-            module.create();
-          }
-          module.position();
-          $module
-            .addClass(className.visible)
-          ;
-          if(settings.transition && $.fn.transition !== undefined) {
-            $popup
-              .transition(settings.transition + ' in', settings.duration)
+              popupWidth   = $popup.width(),
+              popupHeight  = $popup.outerHeight(),
+
+              parentWidth  = $offsetParent.outerWidth(),
+              parentHeight = $offsetParent.outerHeight(),
+
+              distanceAway = settings.distanceAway,
+
+              offset       = (settings.inline)
+                ? $target.position()
+                : $target.offset(),
+
+              positioning,
+              offstagePosition
             ;
-          }
-          else {
+            position    = position    || $module.data(metadata.position)    || settings.position;
+            arrowOffset = arrowOffset || $module.data(metadata.offset)      || settings.offset;
+            // adjust for margin when inline
+            if(settings.inline) {
+              if(position == 'left center' || position == 'right center') {
+                arrowOffset  += parseInt( window.getComputedStyle(element).getPropertyValue('margin-top'), 10);
+                distanceAway += -parseInt( window.getComputedStyle(element).getPropertyValue('margin-left'), 10);
+              }
+              else {
+                arrowOffset  += parseInt( window.getComputedStyle(element).getPropertyValue('margin-left'), 10);
+                distanceAway += parseInt( window.getComputedStyle(element).getPropertyValue('margin-top'), 10);
+              }
+            }
+            module.debug('Calculating offset for position', position);
+            switch(position) {
+              case 'top left':
+                positioning = {
+                  bottom :  parentHeight - offset.top + distanceAway,
+                  right  :  parentWidth - offset.left - arrowOffset,
+                  top    : 'auto',
+                  left   : 'auto'
+                };
+              break;
+              case 'top center':
+                positioning = {
+                  bottom :  parentHeight - offset.top + distanceAway,
+                  left   : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset,
+                  top    : 'auto',
+                  right  : 'auto'
+                };
+              break;
+              case 'top right':
+                positioning = {
+                  top    : 'auto',
+                  bottom :  parentHeight - offset.top + distanceAway,
+                  left   : offset.left + width + arrowOffset,
+                  right  : 'auto'
+                };
+              break;
+              case 'left center':
+                positioning = {
+                  top    :  offset.top + (height / 2) - (popupHeight / 2) + arrowOffset,
+                  right  : parentWidth - offset.left + distanceAway,
+                  left   : 'auto',
+                  bottom : 'auto'
+                };
+              break;
+              case 'right center':
+                positioning = {
+                  top    :  offset.top + (height / 2) - (popupHeight / 2) + arrowOffset,
+                  left   : offset.left + width + distanceAway,
+                  bottom : 'auto',
+                  right  : 'auto'
+                };
+              break;
+              case 'bottom left':
+                positioning = {
+                  top    :  offset.top + height + distanceAway,
+                  right  : parentWidth - offset.left - arrowOffset,
+                  left   : 'auto',
+                  bottom : 'auto'
+                };
+              break;
+              case 'bottom center':
+                positioning = {
+                  top    :  offset.top + height + distanceAway,
+                  left   : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset,
+                  bottom : 'auto',
+                  right  : 'auto'
+                };
+              break;
+              case 'bottom right':
+                positioning = {
+                  top    :  offset.top + height + distanceAway,
+                  left   : offset.left + width + arrowOffset,
+                  bottom : 'auto',
+                  right  : 'auto'
+                };
+              break;
+            }
+            // tentatively place on stage
             $popup
-              .stop()
-              .fadeIn(settings.duration, settings.easing)
-            ;
-          }
-          if(settings.on == 'click' && settings.clicktoClose) {
-            module.debug('Binding popup close event');
-            $document
-              .on('click.' + namespace, module.gracefully.hide)
+              .css(positioning)
+              .removeClass(className.position)
+              .addClass(position)
             ;
+            // check if is offstage
+            offstagePosition = module.get.offstagePosition();
+
+            // recursively find new positioning
+            if(offstagePosition) {
+              module.debug('Element is outside boundaries', offstagePosition);
+              if(searchDepth < settings.maxSearchDepth) {
+                position = module.get.nextPosition(position);
+                searchDepth++;
+                module.debug('Trying new position', position);
+                return module.set.position(position);
+              }
+              else {
+                module.error(error.recursion);
+                searchDepth = 0;
+                return false;
+              }
+            }
+            else {
+              module.debug('Position is on stage', position);
+              searchDepth = 0;
+              return true;
+            }
           }
-          $.proxy(settings.onShow, $popup)();
-        },
 
-        hideAll: function() {
-          $(selector.popup)
-            .filter(':visible')
-              .popup('hide')
-          ;
         },
 
-        hide: function() {
-          $module
-            .removeClass(className.visible)
-          ;
-          if($popup.is(':visible') ) {
-            module.debug('Hiding pop-up');
-            if(settings.transition && $.fn.transition !== undefined) {
-              $popup
-                .transition(settings.transition + ' out', settings.duration, module.reset)
+        bind: {
+          close:function() {
+            if(settings.on == 'click' && settings.closable) {
+              module.verbose('Binding popup close event to document');
+              $document
+                .on('click' + eventNamespace, module.hideGracefully)
               ;
             }
-            else {
-              $popup
-                .stop()
-                .fadeOut(settings.duration, settings.easing, module.reset)
+          }
+        },
+
+        unbind: {
+          close: function() {
+            if(settings.on == 'click' && settings.closable) {
+              module.verbose('Removing close event from document');
+              $document
+                .off('click' + eventNamespace)
               ;
             }
           }
-          if(settings.on == 'click' && settings.clicktoClose) {
-            $document
-              .off('click.' + namespace)
-            ;
+        },
+
+        is: {
+          visible: function() {
+            return $popup.is(':visible');
+          },
+          hidden: function() {
+            return !module.is.visible();
           }
-          $.proxy(settings.onHide, $popup)();
         },
 
         reset: function() {
-          module.verbose('Resetting inline styles');
           $popup
             .attr('style', '')
             .removeAttr('style')
           ;
-          if(!settings.inline) {
+          if(!settings.preserve) {
             module.remove();
           }
         },
 
-        gracefully: {
-          hide: function(event) {
-            // don't close on clicks inside popup
-            if( $(event.target).closest(selector.popup).size() === 0) {
-              module.hide();
-            }
-          }
-        },
-
         setting: function(name, value) {
           if(value !== undefined) {
             if( $.isPlainObject(name) ) {
@@ -661,7 +721,7 @@ $.fn.popup.settings = {
   performance    : true,
   namespace      : 'popup',
 
-  onCreate         : function(){},
+  onCreate       : function(){},
   onShow         : function(){},
   onHide         : function(){},
 
@@ -671,18 +731,20 @@ $.fn.popup.settings = {
   title          : false,
 
   on             : 'hover',
-  clicktoClose   : true,
+  target         : false,
+  closable       : true,
 
   position       : 'top center',
   delay          : 150,
-  inline         : true,
+  inline         : false,
+  preserve       : false,
 
-  duration       : 150,
+  duration       : 250,
   easing         : 'easeOutQuint',
   transition     : 'scale',
 
   distanceAway   : 0,
-  arrowOffset    : 0,
+  offset         : 0,
   maxSearchDepth : 10,
 
   error: {
@@ -692,19 +754,19 @@ $.fn.popup.settings = {
   },
 
   metadata: {
-    arrowOffset : 'arrowOffset',
-    content     : 'content',
-    html        : 'html',
-    position    : 'position',
-    title       : 'title',
-    variation   : 'variation'
+    content   : 'content',
+    html      : 'html',
+    offset    : 'offset',
+    position  : 'position',
+    title     : 'title',
+    variation : 'variation'
   },
 
   className   : {
-    popup       : 'ui popup',
-    visible     : 'visible',
     loading     : 'loading',
-    position    : 'top left center bottom right'
+    popup       : 'ui popup',
+    position    : 'top left center bottom right',
+    visible     : 'visible'
   },
 
   selector    : {

rtl/less/modules/popup.less

@@ -20,7 +20,7 @@
   left: 0px;
   z-index: 900;
 
-  border: 1px solid #DCDDDE;
+  border: 1px solid rgba(0, 0, 0, 0.1);
   max-width: 250px;
   background-color: #FFFFFF;
 
@@ -34,9 +34,9 @@
   -moz-border-radius: 0.2em;
   border-radius: 0.2em;
 
-  -webkit-box-shadow: 0px 1px 1px #DCDDDE;
-  -moz-box-shadow: 0px 1px 1px #DCDDDE;
-  box-shadow: 0px 1px 1px #DCDDDE;
+  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
 }
 .ui.popup .header {
   padding: 0em 0em 0.5em;
@@ -66,9 +66,9 @@
   -ms-box-sizing: border-box;
   box-sizing: border-box;
 
-  -webkit-box-shadow: 1px 1px 1px #DCDDDE;
-  -moz-box-shadow: 1px 1px 1px #DCDDDE;
-  box-shadow: 1px 1px 1px #DCDDDE;
+  -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
 }
 
 .ui.popup .ui.button {
@@ -113,13 +113,13 @@
   right: 50%;
   left: auto;
   bottom: auto;
-  -webkit-box-shadow: -1px -1px 1px #dcddde;
-  -moz-box-shadow: -1px -1px 1px #dcddde;
-  box-shadow: -1px -1px 1px #dcddde;
+  -webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
 }
 
 .ui.bottom.left.popup {
-  margin-left: -0.8em;
+  margin-left: -2em;
 }
 .ui.bottom.left.popup:before {
   top: -0.4em;
@@ -127,13 +127,13 @@
   bottom: auto;
   right: auto;
   margin-right: 0em;
-  -webkit-box-shadow: -1px -1px 1px #dcddde;
-  -moz-box-shadow: -1px -1px 1px #dcddde;
-  box-shadow: -1px -1px 1px #dcddde;
+  -webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
 }
 
 .ui.bottom.right.popup {
-  margin-right: -0.8em;
+  margin-right: -2em;
 }
 .ui.bottom.right.popup:before {
   top: -0.4em;
@@ -141,9 +141,9 @@
   left: auto;
   bottom: auto;
   margin-right: 0em;
-  -webkit-box-shadow: -1px -1px 1px #dcddde;
-  -moz-box-shadow: -1px -1px 1px #dcddde;
-  box-shadow: -1px -1px 1px #dcddde;
+  -webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
 }
 
 /*--- Above ---*/
@@ -155,7 +155,7 @@
   margin-right: -0.4em;
 }
 .ui.top.left.popup {
-  margin-left: -0.8em;
+  margin-left: -2em;
 }
 .ui.top.left.popup:before {
   bottom: -0.4em;
@@ -165,7 +165,7 @@
   margin-right: 0em;
 }
 .ui.top.right.popup {
-  margin-right: -0.8em;
+  margin-right: -2em;
 }
 .ui.top.right.popup:before {
   bottom: -0.4em;
@@ -182,9 +182,9 @@
   bottom: auto;
   right: auto;
   margin-top: -0.4em;
-  -moz-box-shadow: 1px -1px 1px #dcddde;
-  -webkit-box-shadow: 1px -1px 1px #dcddde;
-  box-shadow: 1px -1px 1px #dcddde;
+  -moz-box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
 }
 
 /*--- Right Center  ---*/
@@ -194,9 +194,9 @@
   bottom: auto;
   left: auto;
   margin-top: -0.4em;
-  -moz-box-shadow: -1px 1px 1px #dcddde;
-  -webkit-box-shadow: -1px 1px 1px #dcddde;
-  box-shadow: -1px 1px 1px #dcddde;
+  -moz-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
 }
 
 /*******************************

rtl/less/views/item.less

@@ -110,8 +110,6 @@
   -ms-box-sizing: border-box;
   box-sizing: border-box;
 
-  overflow: hidden;
-
   -webkit-border-radius: 0.2em;
   -moz-border-radius: 0.2em;
   border-radius: 0.2em;

rtl/minified/modules/dimmer.js

@@ -54,6 +54,8 @@ $.fn.dimmer = function(parameters) {
         module
       ;
 
+      console.log(element, parameters);
+
       module = {
 
         preinitialize: function() {

rtl/minified/modules/dropdown.js

@@ -222,7 +222,6 @@ $.fn.dropdown = function(parameters) {
               if( $choice.find(selector.menu).size() === 0 ) {
                 module.determine.selectAction(text, value);
                 $.proxy(settings.onChange, element)(value, text);
-                event.preventDefault();
               }
             }
 

rtl/minified/modules/modal.js

@@ -64,9 +64,14 @@ $.fn.modal = function(parameters) {
           module.verbose('Initializing dimmer', $context);
 
           $dimmable = $context
+            .dimmer({
+              closable : false,
+              show     : settings.duration * 0.95,
+              hide     : settings.duration * 1.05
+            })
             .dimmer('add content', $module)
           ;
-          $dimmer = $context
+          $dimmer = $dimmable
             .dimmer('get dimmer')
           ;
 
@@ -201,7 +206,6 @@ $.fn.modal = function(parameters) {
 
         showDimmer: function() {
           module.debug('Showing modal');
-          module.set.dimmerSettings();
           $dimmable.dimmer('show');
         },
 
@@ -331,16 +335,6 @@ $.fn.modal = function(parameters) {
               ;
             }
           },
-          dimmerSettings: function() {
-            module.debug('Setting dimmer settings', $dimmable);
-            $dimmable
-              .dimmer({
-                closable: false,
-                show: settings.duration * 0.95,
-                hide: settings.duration * 1.05
-              })
-            ;
-          },
           scrolling: function() {
             $dimmable.addClass(className.scrolling);
             $module.addClass(className.scrolling);

rtl/minified/modules/popup.js

@@ -15,6 +15,7 @@ $.fn.popup = function(parameters) {
   var
     $allModules     = $(this),
     $document       = $(document),
+    $body           = $('body'),
 
     moduleSelector  = $allModules.selector || '',
 
@@ -44,11 +45,17 @@ $.fn.popup = function(parameters) {
         moduleNamespace = 'module-' + namespace,
 
         $module         = $(this),
+        $target         = (settings.target)
+          ? $(settings.target)
+          : $module,
 
         $window         = $(window),
-        $offsetParent   = $module.offsetParent(),
+
+        $offsetParent   = (settings.inline)
+          ? $target.offsetParent()
+          : $window,
         $popup          = (settings.inline)
-          ? $module.next(settings.selector.popup)
+          ? $target.next(settings.selector.popup)
           : $window.children(settings.selector.popup).last(),
 
         searchDepth     = 0,
@@ -63,17 +70,20 @@ $.fn.popup = function(parameters) {
         // binds events
         initialize: function() {
           module.debug('Initializing module', $module);
-          if(settings.on == 'hover') {
+          if(settings.on == 'click') {
             $module
-              .on('mouseenter' + eventNamespace, module.event.mouseenter)
-              .on('mouseleave' + eventNamespace, module.event.mouseleave)
+              .on('click', module.toggle)
             ;
           }
           else {
             $module
-              .on(settings.on + '' + eventNamespace, module.event[settings.on])
+              .on(module.get.startEvent() + eventNamespace, module.event.start)
+              .on(module.get.endEvent() + eventNamespace, module.event.end)
             ;
           }
+          if(settings.target) {
+            module.debug('Target set to element', $target);
+          }
           $window
             .on('resize' + eventNamespace, module.event.resize)
           ;
@@ -89,11 +99,14 @@ $.fn.popup = function(parameters) {
         },
 
         refresh: function() {
-          $popup        = (settings.inline)
-            ? $module.next(selector.popup)
-            : $window.children(selector.popup).last()
-          ;
-          $offsetParent = $module.offsetParent();
+          if(settings.inline) {
+            $popup = $target.next(selector.popup);
+            $offsetParent = $target.offsetParent();
+          }
+          else {
+            console.log('found by refresh');
+            $popup = $window.children(selector.popup).last();
+          }
         },
 
         destroy: function() {
@@ -101,6 +114,9 @@ $.fn.popup = function(parameters) {
           $window
             .off(eventNamespace)
           ;
+          $popup
+            .remove()
+          ;
           $module
             .off(eventNamespace)
             .removeData(moduleNamespace)
@@ -108,30 +124,22 @@ $.fn.popup = function(parameters) {
         },
 
         event: {
-          mouseenter:  function(event) {
-            var element = this;
+          start:  function(event) {
             module.timer = setTimeout(function() {
-              $.proxy(module.toggle, element)();
-              if( $(element).hasClass(className.visible) ) {
-                event.stopPropagation();
+              if( module.is.hidden() ) {
+                module.show();
               }
             }, settings.delay);
           },
-          mouseleave:  function() {
+          end:  function() {
             clearTimeout(module.timer);
-            if( $module.is(':visible') ) {
+            if( module.is.visible() ) {
               module.hide();
             }
           },
-          click: function(event) {
-            $.proxy(module.toggle, this)();
-            if( $(this).hasClass(className.visible) ) {
-              event.stopPropagation();
-            }
-          },
           resize: function() {
-            if( $popup.is(':visible') ) {
-              module.position();
+            if( module.is.visible() ) {
+              module.set.position();
             }
           }
         },
@@ -166,7 +174,7 @@ $.fn.popup = function(parameters) {
             else {
               module.verbose('Appending popup element to body', $popup);
               $popup
-                .appendTo( $('body') )
+                .appendTo( $body )
               ;
             }
             $.proxy(settings.onCreate, $popup)();
@@ -176,6 +184,87 @@ $.fn.popup = function(parameters) {
           }
         },
 
+        // determines popup state
+        toggle: function() {
+          module.debug('Toggling pop-up');
+          if( module.is.hidden() ) {
+            module.hideAll();
+            module.show();
+          }
+          else {
+            module.hide();
+          }
+        },
+
+        show: function() {
+          module.debug('Showing pop-up', settings.transition);
+          if( !module.exists() ) {
+            module.create();
+          }
+          module.set.position();
+          $module
+            .addClass(className.visible)
+          ;
+          if(settings.transition && $.fn.transition !== undefined) {
+            $popup
+              .transition(settings.transition + ' in', settings.duration, module.bind.close)
+            ;
+          }
+          else {
+            $popup
+              .stop()
+              .fadeIn(settings.duration, settings.easing, module.bind.close)
+            ;
+          }
+          $.proxy(settings.onShow, $popup)();
+        },
+
+
+        hide: function() {
+          $module
+            .removeClass(className.visible)
+          ;
+          module.unbind.close();
+          if( module.is.visible() ) {
+            module.debug('Hiding pop-up');
+            if(settings.transition && $.fn.transition !== undefined) {
+              $popup
+                .transition(settings.transition + ' out', settings.duration, module.reset)
+              ;
+            }
+            else {
+              $popup
+                .stop()
+                .fadeOut(settings.duration, settings.easing, module.reset)
+              ;
+            }
+          }
+          $.proxy(settings.onHide, $popup)();
+        },
+
+        hideAll: function() {
+          $(selector.popup)
+            .filter(':visible')
+              .popup('hide')
+          ;
+        },
+
+        hideGracefully: function(event) {
+          // don't close on clicks inside popup
+          if( $(event.target).closest(selector.popup).size() === 0) {
+            module.hide();
+          }
+        },
+
+        exists: function() {
+          if(settings.inline) {
+            return ( $popup.size() !== 0 );
+          }
+          else {
+            return ( $popup.parent($body).size() );
+          }
+        },
+
         remove: function() {
           module.debug('Removing popup');
           $popup
@@ -184,6 +273,22 @@ $.fn.popup = function(parameters) {
         },
 
         get: {
+          startEvent: function() {
+            if(settings.on == 'hover') {
+              return 'mouseenter';
+            }
+            else if(settings.on == 'focus') {
+              return 'focus';
+            }
+          },
+          endEvent: function() {
+            if(settings.on == 'hover') {
+              return 'mouseleave';
+            }
+            else if(settings.on == 'focus') {
+              return 'blur';
+            }
+          },
           offstagePosition: function() {
             var
               boundary  = {
@@ -251,229 +356,184 @@ $.fn.popup = function(parameters) {
           }
         },
 
-        // determines popup state
-        toggle: function() {
-          $module = $(this);
-          module.debug('Toggling pop-up');
-          // refresh state of module
-          module.refresh();
-          if( !$module.hasClass(className.visible) ) {
-            if(settings.on == 'click') {
-              module.hideAll();
-            }
-            module.show();
-          }
-          else {
-            // module.hide();
-          }
-        },
+        set: {
+          position: function(position, arrowOffset) {
+            var
+              windowWidth  = $(window).width(),
+              windowHeight = $(window).height(),
 
-        position: function(position, arrowOffset) {
-          var
-            windowWidth  = $(window).width(),
-            windowHeight = $(window).height(),
-            width        = $module.outerWidth(),
-            height       = $module.outerHeight(),
-            popupWidth   = $popup.width(),
-            popupHeight  = $popup.outerHeight(),
-
-            offset       = (settings.inline)
-              ? $module.position()
-              : $module.offset(),
-            parentWidth  = (settings.inline)
-              ? $offsetParent.outerWidth()
-              : $window.outerWidth(),
-            parentHeight = (settings.inline)
-              ? $offsetParent.outerHeight()
-              : $window.outerHeight(),
-
-            positioning,
-            offstagePosition
-          ;
-          position    = position    || $module.data(metadata.position)    || settings.position;
-          arrowOffset = arrowOffset || $module.data(metadata.arrowOffset) || settings.arrowOffset;
-          module.debug('Calculating offset for position', position);
-          switch(position) {
-            case 'top left':
-              positioning = {
-                bottom :  parentHeight - offset.top + settings.distanceAway,
-                right  :  parentWidth - offset.left - width - arrowOffset,
-                top    : 'auto',
-                left   : 'auto'
-              };
-            break;
-            case 'top center':
-              positioning = {
-                bottom :  parentHeight - offset.top + settings.distanceAway,
-                left   : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset,
-                top    : 'auto',
-                right  : 'auto'
-              };
-            break;
-            case 'top right':
-              positioning = {
-                top    : 'auto',
-                bottom :  parentHeight - offset.top + settings.distanceAway,
-                left   : offset.left + arrowOffset
-              };
-            break;
-            case 'left center':
-              positioning = {
-                top    :  offset.top + (height / 2) - (popupHeight / 2),
-                right  : parentWidth - offset.left + settings.distanceAway - arrowOffset,
-                left   : 'auto',
-                bottom : 'auto'
-              };
-            break;
-            case 'right center':
-              positioning = {
-                top    :  offset.top + (height / 2) - (popupHeight / 2),
-                left   : offset.left + width + settings.distanceAway + arrowOffset,
-                bottom : 'auto',
-                right  : 'auto'
-              };
-            break;
-            case 'bottom left':
-              positioning = {
-                top    :  offset.top + height + settings.distanceAway,
-                right  : parentWidth - offset.left - width - arrowOffset,
-                left   : 'auto',
-                bottom : 'auto'
-              };
-            break;
-            case 'bottom center':
-              positioning = {
-                top    :  offset.top + height + settings.distanceAway,
-                left   : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset,
-                bottom : 'auto',
-                right  : 'auto'
-              };
-            break;
-            case 'bottom right':
-              positioning = {
-                top    :  offset.top + height + settings.distanceAway,
-                left   : offset.left + arrowOffset,
-                bottom : 'auto',
-                right  : 'auto'
-              };
-            break;
-          }
-          // true width on popup, avoid rounding error
-          $.extend(positioning, {
-            width: $popup.width() + 1
-          });
-          // tentatively place on stage
-          $popup
-            .css(positioning)
-            .removeClass(className.position)
-            .addClass(position)
-          ;
-          // check if is offstage
-          offstagePosition = module.get.offstagePosition();
-          // recursively find new positioning
-          if(offstagePosition) {
-            module.debug('Element is outside boundaries ', offstagePosition);
-            if(searchDepth < settings.maxSearchDepth) {
-              position = module.get.nextPosition(position);
-              searchDepth++;
-              module.debug('Trying new position: ', position);
-              return module.position(position);
-            }
-            else {
-              module.error(error.recursion);
-              searchDepth = 0;
-              return false;
-            }
-          }
-          else {
-            module.debug('Position is on stage', position);
-            searchDepth = 0;
-            return true;
-          }
-        },
+              width        = $target.outerWidth(),
+              height       = $target.outerHeight(),
 
-        show: function() {
-          module.debug('Showing pop-up', settings.transition);
-          if($popup.size() === 0) {
-            module.create();
-          }
-          module.position();
-          $module
-            .addClass(className.visible)
-          ;
-          if(settings.transition && $.fn.transition !== undefined) {
-            $popup
-              .transition(settings.transition + ' in', settings.duration)
+              popupWidth   = $popup.width(),
+              popupHeight  = $popup.outerHeight(),
+
+              parentWidth  = $offsetParent.outerWidth(),
+              parentHeight = $offsetParent.outerHeight(),
+
+              distanceAway = settings.distanceAway,
+
+              offset       = (settings.inline)
+                ? $target.position()
+                : $target.offset(),
+
+              positioning,
+              offstagePosition
             ;
-          }
-          else {
+            position    = position    || $module.data(metadata.position)    || settings.position;
+            arrowOffset = arrowOffset || $module.data(metadata.offset)      || settings.offset;
+            // adjust for margin when inline
+            if(settings.inline) {
+              if(position == 'left center' || position == 'right center') {
+                arrowOffset  += parseInt( window.getComputedStyle(element).getPropertyValue('margin-top'), 10);
+                distanceAway += -parseInt( window.getComputedStyle(element).getPropertyValue('margin-left'), 10);
+              }
+              else {
+                arrowOffset  += parseInt( window.getComputedStyle(element).getPropertyValue('margin-left'), 10);
+                distanceAway += parseInt( window.getComputedStyle(element).getPropertyValue('margin-top'), 10);
+              }
+            }
+            module.debug('Calculating offset for position', position);
+            switch(position) {
+              case 'top left':
+                positioning = {
+                  bottom :  parentHeight - offset.top + distanceAway,
+                  right  :  parentWidth - offset.left - arrowOffset,
+                  top    : 'auto',
+                  left   : 'auto'
+                };
+              break;
+              case 'top center':
+                positioning = {
+                  bottom :  parentHeight - offset.top + distanceAway,
+                  left   : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset,
+                  top    : 'auto',
+                  right  : 'auto'
+                };
+              break;
+              case 'top right':
+                positioning = {
+                  top    : 'auto',
+                  bottom :  parentHeight - offset.top + distanceAway,
+                  left   : offset.left + width + arrowOffset,
+                  right  : 'auto'
+                };
+              break;
+              case 'left center':
+                positioning = {
+                  top    :  offset.top + (height / 2) - (popupHeight / 2) + arrowOffset,
+                  right  : parentWidth - offset.left + distanceAway,
+                  left   : 'auto',
+                  bottom : 'auto'
+                };
+              break;
+              case 'right center':
+                positioning = {
+                  top    :  offset.top + (height / 2) - (popupHeight / 2) + arrowOffset,
+                  left   : offset.left + width + distanceAway,
+                  bottom : 'auto',
+                  right  : 'auto'
+                };
+              break;
+              case 'bottom left':
+                positioning = {
+                  top    :  offset.top + height + distanceAway,
+                  right  : parentWidth - offset.left - arrowOffset,
+                  left   : 'auto',
+                  bottom : 'auto'
+                };
+              break;
+              case 'bottom center':
+                positioning = {
+                  top    :  offset.top + height + distanceAway,
+                  left   : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset,
+                  bottom : 'auto',
+                  right  : 'auto'
+                };
+              break;
+              case 'bottom right':
+                positioning = {
+                  top    :  offset.top + height + distanceAway,
+                  left   : offset.left + width + arrowOffset,
+                  bottom : 'auto',
+                  right  : 'auto'
+                };
+              break;
+            }
+            // tentatively place on stage
             $popup
-              .stop()
-              .fadeIn(settings.duration, settings.easing)
-            ;
-          }
-          if(settings.on == 'click' && settings.clicktoClose) {
-            module.debug('Binding popup close event');
-            $document
-              .on('click.' + namespace, module.gracefully.hide)
+              .css(positioning)
+              .removeClass(className.position)
+              .addClass(position)
             ;
+            // check if is offstage
+            offstagePosition = module.get.offstagePosition();
+
+            // recursively find new positioning
+            if(offstagePosition) {
+              module.debug('Element is outside boundaries', offstagePosition);
+              if(searchDepth < settings.maxSearchDepth) {
+                position = module.get.nextPosition(position);
+                searchDepth++;
+                module.debug('Trying new position', position);
+                return module.set.position(position);
+              }
+              else {
+                module.error(error.recursion);
+                searchDepth = 0;
+                return false;
+              }
+            }
+            else {
+              module.debug('Position is on stage', position);
+              searchDepth = 0;
+              return true;
+            }
           }
-          $.proxy(settings.onShow, $popup)();
-        },
 
-        hideAll: function() {
-          $(selector.popup)
-            .filter(':visible')
-              .popup('hide')
-          ;
         },
 
-        hide: function() {
-          $module
-            .removeClass(className.visible)
-          ;
-          if($popup.is(':visible') ) {
-            module.debug('Hiding pop-up');
-            if(settings.transition && $.fn.transition !== undefined) {
-              $popup
-                .transition(settings.transition + ' out', settings.duration, module.reset)
+        bind: {
+          close:function() {
+            if(settings.on == 'click' && settings.closable) {
+              module.verbose('Binding popup close event to document');
+              $document
+                .on('click' + eventNamespace, module.hideGracefully)
               ;
             }
-            else {
-              $popup
-                .stop()
-                .fadeOut(settings.duration, settings.easing, module.reset)
+          }
+        },
+
+        unbind: {
+          close: function() {
+            if(settings.on == 'click' && settings.closable) {
+              module.verbose('Removing close event from document');
+              $document
+                .off('click' + eventNamespace)
               ;
             }
           }
-          if(settings.on == 'click' && settings.clicktoClose) {
-            $document
-              .off('click.' + namespace)
-            ;
+        },
+
+        is: {
+          visible: function() {
+            return $popup.is(':visible');
+          },
+          hidden: function() {
+            return !module.is.visible();
           }
-          $.proxy(settings.onHide, $popup)();
         },
 
         reset: function() {
-          module.verbose('Resetting inline styles');
           $popup
             .attr('style', '')
             .removeAttr('style')
           ;
-          if(!settings.inline) {
+          if(!settings.preserve) {
             module.remove();
           }
         },
 
-        gracefully: {
-          hide: function(event) {
-            // don't close on clicks inside popup
-            if( $(event.target).closest(selector.popup).size() === 0) {
-              module.hide();
-            }
-          }
-        },
-
         setting: function(name, value) {
           if(value !== undefined) {
             if( $.isPlainObject(name) ) {
@@ -661,7 +721,7 @@ $.fn.popup.settings = {
   performance    : true,
   namespace      : 'popup',
 
-  onCreate         : function(){},
+  onCreate       : function(){},
   onShow         : function(){},
   onHide         : function(){},
 
@@ -671,18 +731,20 @@ $.fn.popup.settings = {
   title          : false,
 
   on             : 'hover',
-  clicktoClose   : true,
+  target         : false,
+  closable       : true,
 
   position       : 'top center',
   delay          : 150,
-  inline         : true,
+  inline         : false,
+  preserve       : false,
 
-  duration       : 150,
+  duration       : 250,
   easing         : 'easeOutQuint',
   transition     : 'scale',
 
   distanceAway   : 0,
-  arrowOffset    : 0,
+  offset         : 0,
   maxSearchDepth : 10,
 
   error: {
@@ -692,19 +754,19 @@ $.fn.popup.settings = {
   },
 
   metadata: {
-    arrowOffset : 'arrowOffset',
-    content     : 'content',
-    html        : 'html',
-    position    : 'position',
-    title       : 'title',
-    variation   : 'variation'
+    content   : 'content',
+    html      : 'html',
+    offset    : 'offset',
+    position  : 'position',
+    title     : 'title',
+    variation : 'variation'
   },
 
   className   : {
-    popup       : 'ui popup',
-    visible     : 'visible',
     loading     : 'loading',
-    position    : 'top left center bottom right'
+    popup       : 'ui popup',
+    position    : 'top left center bottom right',
+    visible     : 'visible'
   },
 
   selector    : {

rtl/minified/modules/popup.min.css

@@ -1 +1 @@
-.ui.popup{display:none;position:absolute;top:0;left:0;z-index:900;border:1px solid #DCDDDE;max-width:250px;background-color:#FFF;padding:.8em 1.2em;font-size:.875rem;font-weight:400;font-style:normal;color:rgba(0,0,0,.7);-webkit-border-radius:.2em;-moz-border-radius:.2em;border-radius:.2em;-webkit-box-shadow:0 1px 1px #DCDDDE;-moz-box-shadow:0 1px 1px #DCDDDE;box-shadow:0 1px 1px #DCDDDE}.ui.popup .header{padding:0 0 .5em;font-size:1.125em;line-height:1.2;font-weight:700}.ui.popup:before{position:absolute;content:"";width:.75em;height:.75rem;background-image:none;background-color:#FFF;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);z-index:2;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:1px 1px 1px #DCDDDE;-moz-box-shadow:1px 1px 1px #DCDDDE;box-shadow:1px 1px 1px #DCDDDE}.ui.popup .ui.button{width:100%}.ui.popup{margin:0}.ui.popup.bottom{margin:.75em 0 0}.ui.popup.top{margin:0 0 .75em}.ui.popup.left.center{margin:0 0 0 .75em}.ui.popup.right.center{margin:0 .75em 0 0}.ui.popup.center{margin-right:-1.25em}.ui.bottom.center.popup:before{margin-right:-.4em;top:-.4em;right:50%;left:auto;bottom:auto;-webkit-box-shadow:-1px -1px 1px #dcddde;-moz-box-shadow:-1px -1px 1px #dcddde;box-shadow:-1px -1px 1px #dcddde}.ui.bottom.left.popup{margin-left:-.8em}.ui.bottom.left.popup:before{top:-.4em;left:1em;bottom:auto;right:auto;margin-right:0;-webkit-box-shadow:-1px -1px 1px #dcddde;-moz-box-shadow:-1px -1px 1px #dcddde;box-shadow:-1px -1px 1px #dcddde}.ui.bottom.right.popup{margin-right:-.8em}.ui.bottom.right.popup:before{top:-.4em;right:1em;left:auto;bottom:auto;margin-right:0;-webkit-box-shadow:-1px -1px 1px #dcddde;-moz-box-shadow:-1px -1px 1px #dcddde;box-shadow:-1px -1px 1px #dcddde}.ui.top.center.popup:before{top:auto;left:auto;bottom:-.4em;right:50%;margin-right:-.4em}.ui.top.left.popup{margin-left:-.8em}.ui.top.left.popup:before{bottom:-.4em;left:1em;top:auto;right:auto;margin-right:0}.ui.top.right.popup{margin-right:-.8em}.ui.top.right.popup:before{bottom:-.4em;right:1em;top:auto;left:auto;margin-right:0}.ui.left.center.popup:before{top:50%;left:-.35em;bottom:auto;right:auto;margin-top:-.4em;-moz-box-shadow:1px -1px 1px #dcddde;-webkit-box-shadow:1px -1px 1px #dcddde;box-shadow:1px -1px 1px #dcddde}.ui.right.center.popup:before{top:50%;right:-.35em;bottom:auto;left:auto;margin-top:-.4em;-moz-box-shadow:-1px 1px 1px #dcddde;-webkit-box-shadow:-1px 1px 1px #dcddde;box-shadow:-1px 1px 1px #dcddde}.ui.loading.popup{display:block;visibility:hidden}.ui.active.popup{display:block}.ui.small.popup{font-size:.75rem}.ui.large.popup{font-size:1rem}.ui.inverted.popup{background-color:#333;border:0;color:#FFF;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.inverted.popup .header{background-color:rgba(0,0,0,.2);color:#FFF}.ui.inverted.popup:before{background-color:#333;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}
+.ui.popup{display:none;position:absolute;top:0;left:0;z-index:900;border:1px solid rgba(0,0,0,.1);max-width:250px;background-color:#FFF;padding:.8em 1.2em;font-size:.875rem;font-weight:400;font-style:normal;color:rgba(0,0,0,.7);-webkit-border-radius:.2em;-moz-border-radius:.2em;border-radius:.2em;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.1);-moz-box-shadow:0 1px 2px rgba(0,0,0,.1);box-shadow:0 1px 2px rgba(0,0,0,.1)}.ui.popup .header{padding:0 0 .5em;font-size:1.125em;line-height:1.2;font-weight:700}.ui.popup:before{position:absolute;content:"";width:.75em;height:.75rem;background-image:none;background-color:#FFF;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);z-index:2;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:1px 1px 1px rgba(0,0,0,.1);-moz-box-shadow:1px 1px 1px rgba(0,0,0,.1);box-shadow:1px 1px 1px rgba(0,0,0,.1)}.ui.popup .ui.button{width:100%}.ui.popup{margin:0}.ui.popup.bottom{margin:.75em 0 0}.ui.popup.top{margin:0 0 .75em}.ui.popup.left.center{margin:0 0 0 .75em}.ui.popup.right.center{margin:0 .75em 0 0}.ui.popup.center{margin-right:-1.25em}.ui.bottom.center.popup:before{margin-right:-.4em;top:-.4em;right:50%;left:auto;bottom:auto;-webkit-box-shadow:-1px -1px 1px rgba(0,0,0,.2);-moz-box-shadow:-1px -1px 1px rgba(0,0,0,.2);box-shadow:-1px -1px 1px rgba(0,0,0,.2)}.ui.bottom.left.popup{margin-left:-2em}.ui.bottom.left.popup:before{top:-.4em;left:1em;bottom:auto;right:auto;margin-right:0;-webkit-box-shadow:-1px -1px 1px rgba(0,0,0,.2);-moz-box-shadow:-1px -1px 1px rgba(0,0,0,.2);box-shadow:-1px -1px 1px rgba(0,0,0,.2)}.ui.bottom.right.popup{margin-right:-2em}.ui.bottom.right.popup:before{top:-.4em;right:1em;left:auto;bottom:auto;margin-right:0;-webkit-box-shadow:-1px -1px 1px rgba(0,0,0,.2);-moz-box-shadow:-1px -1px 1px rgba(0,0,0,.2);box-shadow:-1px -1px 1px rgba(0,0,0,.2)}.ui.top.center.popup:before{top:auto;left:auto;bottom:-.4em;right:50%;margin-right:-.4em}.ui.top.left.popup{margin-left:-2em}.ui.top.left.popup:before{bottom:-.4em;left:1em;top:auto;right:auto;margin-right:0}.ui.top.right.popup{margin-right:-2em}.ui.top.right.popup:before{bottom:-.4em;right:1em;top:auto;left:auto;margin-right:0}.ui.left.center.popup:before{top:50%;left:-.35em;bottom:auto;right:auto;margin-top:-.4em;-moz-box-shadow:1px -1px 1px rgba(0,0,0,.2);-webkit-box-shadow:1px -1px 1px rgba(0,0,0,.2);box-shadow:1px -1px 1px rgba(0,0,0,.2)}.ui.right.center.popup:before{top:50%;right:-.35em;bottom:auto;left:auto;margin-top:-.4em;-moz-box-shadow:-1px 1px 1px rgba(0,0,0,.2);-webkit-box-shadow:-1px 1px 1px rgba(0,0,0,.2);box-shadow:-1px 1px 1px rgba(0,0,0,.2)}.ui.loading.popup{display:block;visibility:hidden}.ui.active.popup{display:block}.ui.small.popup{font-size:.75rem}.ui.large.popup{font-size:1rem}.ui.inverted.popup{background-color:#333;border:0;color:#FFF;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.inverted.popup .header{background-color:rgba(0,0,0,.2);color:#FFF}.ui.inverted.popup:before{background-color:#333;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}

rtl/packaged/css/semantic.css

@@ -7594,11 +7594,13 @@ a.ui.label:hover:before {
 --------------------*/
 .ui.ribbon.label {
   position: relative;
-  right: -1.8rem;
+  margin: 0em 0.2em;
+  right: -2rem;
   padding-right: 2rem;
   -webkit-border-radius: 4px 0px 0px 4px;
   -moz-border-radius: 4px 0px 0px 4px;
   border-radius: 4px 0px 0px 4px;
+  border-color: rgba(0, 0, 0, 0.15);
 }
 .ui.ribbon.label:after {
   position: absolute;
@@ -7788,19 +7790,23 @@ a.ui.label:hover:before {
 /* Hover */
 a.ui.black.labels .label:hover,
 a.ui.black.label:hover {
-  background-color: #888888 !important;
-  border-color: #888888 !important;
+  background-color: #333333 !important;
+  border-color: #333333 !important;
 }
 .ui.labels a.black.label:hover:before,
 .ui.black.labels a.label:hover:before,
 a.ui.black.label:hover:before {
-  background-color: #888888 !important;
+  background-color: #333333 !important;
 }
 /* Corner */
 .ui.black.corner.label,
 .ui.black.corner.label:hover {
   background-color: transparent !important;
 }
+/* Ribbon */
+.ui.black.ribbon.label {
+  border-color: #333333 !important;
+}
 /*--- Green ---*/
 .ui.green.labels .label,
 .ui.green.label {
@@ -7829,6 +7835,10 @@ a.ui.green.label:hover:before {
 .ui.green.corner.label:hover {
   background-color: transparent !important;
 }
+/* Ribbon */
+.ui.green.ribbon.label {
+  border-color: #89B84C !important;
+}
 /*--- Red ---*/
 .ui.red.labels .label,
 .ui.red.label {
@@ -7858,6 +7868,10 @@ a.ui.red.label:hover {
 a.ui.red.label:hover:before {
   background-color: #DE3859 !important;
 }
+/* Ribbon */
+.ui.red.ribbon.label {
+  border-color: #DE3859 !important;
+}
 /*--- Blue ---*/
 .ui.blue.labels .label,
 .ui.blue.label {
@@ -7888,6 +7902,10 @@ a.ui.blue.label:hover:before {
 .ui.blue.corner.label:hover {
   background-color: transparent !important;
 }
+/* Ribbon */
+.ui.blue.ribbon.label {
+  border-color: #1AB8F3 !important;
+}
 /*--- Purple ---*/
 .ui.purple.labels .label,
 .ui.purple.label {
@@ -7918,6 +7936,10 @@ a.ui.purple.label:hover:before {
 .ui.purple.corner.label:hover {
   background-color: transparent !important;
 }
+/* Ribbon */
+.ui.purple.ribbon.label {
+  border-color: #3E3773 !important;
+}
 /*--- Orange ---*/
 .ui.orange.labels .label,
 .ui.orange.label {
@@ -7948,7 +7970,11 @@ a.ui.orange.label:hover:before {
 .ui.orange.corner.label:hover {
   background-color: transparent !important;
 }
-/*--- Pink ---*/
+/* Ribbon */
+.ui.orange.ribbon.label {
+  border-color: #FF4121 !important;
+}
+/*--- Teal ---*/
 .ui.teal.labels .label,
 .ui.teal.label {
   background-color: #00B5AD !important;
@@ -7978,6 +8004,10 @@ a.ui.teal.label:hover:before {
 .ui.teal.corner.label:hover {
   background-color: transparent !important;
 }
+/* Ribbon */
+.ui.teal.ribbon.label {
+  border-color: #009A93 !important;
+}
 /*-------------------
      Horizontal
 --------------------*/
@@ -10918,7 +10948,7 @@ a.ui.nag {
   top: 0px;
   left: 0px;
   z-index: 900;
-  border: 1px solid #DCDDDE;
+  border: 1px solid rgba(0, 0, 0, 0.1);
   max-width: 250px;
   background-color: #FFFFFF;
   padding: 0.8em 1.2em;
@@ -10929,9 +10959,9 @@ a.ui.nag {
   -webkit-border-radius: 0.2em;
   -moz-border-radius: 0.2em;
   border-radius: 0.2em;
-  -webkit-box-shadow: 0px 1px 1px #DCDDDE;
-  -moz-box-shadow: 0px 1px 1px #DCDDDE;
-  box-shadow: 0px 1px 1px #DCDDDE;
+  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
 }
 .ui.popup .header {
   padding: 0em 0em 0.5em;
@@ -10954,9 +10984,9 @@ a.ui.nag {
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
-  -webkit-box-shadow: 1px 1px 1px #DCDDDE;
-  -moz-box-shadow: 1px 1px 1px #DCDDDE;
-  box-shadow: 1px 1px 1px #DCDDDE;
+  -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
 }
 .ui.popup .ui.button {
   width: 100%;
@@ -10995,12 +11025,12 @@ a.ui.nag {
   right: 50%;
   left: auto;
   bottom: auto;
-  -webkit-box-shadow: -1px -1px 1px #dcddde;
-  -moz-box-shadow: -1px -1px 1px #dcddde;
-  box-shadow: -1px -1px 1px #dcddde;
+  -webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
 }
 .ui.bottom.left.popup {
-  margin-left: -0.8em;
+  margin-left: -2em;
 }
 .ui.bottom.left.popup:before {
   top: -0.4em;
@@ -11008,12 +11038,12 @@ a.ui.nag {
   bottom: auto;
   right: auto;
   margin-right: 0em;
-  -webkit-box-shadow: -1px -1px 1px #dcddde;
-  -moz-box-shadow: -1px -1px 1px #dcddde;
-  box-shadow: -1px -1px 1px #dcddde;
+  -webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
 }
 .ui.bottom.right.popup {
-  margin-right: -0.8em;
+  margin-right: -2em;
 }
 .ui.bottom.right.popup:before {
   top: -0.4em;
@@ -11021,9 +11051,9 @@ a.ui.nag {
   left: auto;
   bottom: auto;
   margin-right: 0em;
-  -webkit-box-shadow: -1px -1px 1px #dcddde;
-  -moz-box-shadow: -1px -1px 1px #dcddde;
-  box-shadow: -1px -1px 1px #dcddde;
+  -webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
 }
 /*--- Above ---*/
 .ui.top.center.popup:before {
@@ -11034,7 +11064,7 @@ a.ui.nag {
   margin-right: -0.4em;
 }
 .ui.top.left.popup {
-  margin-left: -0.8em;
+  margin-left: -2em;
 }
 .ui.top.left.popup:before {
   bottom: -0.4em;
@@ -11044,7 +11074,7 @@ a.ui.nag {
   margin-right: 0em;
 }
 .ui.top.right.popup {
-  margin-right: -0.8em;
+  margin-right: -2em;
 }
 .ui.top.right.popup:before {
   bottom: -0.4em;
@@ -11060,9 +11090,9 @@ a.ui.nag {
   bottom: auto;
   right: auto;
   margin-top: -0.4em;
-  -moz-box-shadow: 1px -1px 1px #dcddde;
-  -webkit-box-shadow: 1px -1px 1px #dcddde;
-  box-shadow: 1px -1px 1px #dcddde;
+  -moz-box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
 }
 /*--- Right Center  ---*/
 .ui.right.center.popup:before {
@@ -11071,9 +11101,9 @@ a.ui.nag {
   bottom: auto;
   left: auto;
   margin-top: -0.4em;
-  -moz-box-shadow: -1px 1px 1px #dcddde;
-  -webkit-box-shadow: -1px 1px 1px #dcddde;
-  box-shadow: -1px 1px 1px #dcddde;
+  -moz-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
 }
 /*******************************
             States
@@ -13616,7 +13646,6 @@ body {
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
-  overflow: hidden;
   -webkit-border-radius: 0.2em;
   -moz-border-radius: 0.2em;
   border-radius: 0.2em;

rtl/packaged/javascript/semantic.js

@@ -3933,6 +3933,8 @@ $.fn.dimmer = function(parameters) {
         module
       ;
 
+      console.log(element, parameters);
+
       module = {
 
         preinitialize: function() {
@@ -4668,7 +4670,6 @@ $.fn.dropdown = function(parameters) {
               if( $choice.find(selector.menu).size() === 0 ) {
                 module.determine.selectAction(text, value);
                 $.proxy(settings.onChange, element)(value, text);
-                event.preventDefault();
               }
             }
 
@@ -5313,9 +5314,14 @@ $.fn.modal = function(parameters) {
           module.verbose('Initializing dimmer', $context);
 
           $dimmable = $context
+            .dimmer({
+              closable : false,
+              show     : settings.duration * 0.95,
+              hide     : settings.duration * 1.05
+            })
             .dimmer('add content', $module)
           ;
-          $dimmer = $context
+          $dimmer = $dimmable
             .dimmer('get dimmer')
           ;
 
@@ -5450,7 +5456,6 @@ $.fn.modal = function(parameters) {
 
         showDimmer: function() {
           module.debug('Showing modal');
-          module.set.dimmerSettings();
           $dimmable.dimmer('show');
         },
 
@@ -5580,16 +5585,6 @@ $.fn.modal = function(parameters) {
               ;
             }
           },
-          dimmerSettings: function() {
-            module.debug('Setting dimmer settings', $dimmable);
-            $dimmable
-              .dimmer({
-                closable: false,
-                show: settings.duration * 0.95,
-                hide: settings.duration * 1.05
-              })
-            ;
-          },
           scrolling: function() {
             $dimmable.addClass(className.scrolling);
             $module.addClass(className.scrolling);
@@ -6404,6 +6399,7 @@ $.fn.popup = function(parameters) {
   var
     $allModules     = $(this),
     $document       = $(document),
+    $body           = $('body'),
 
     moduleSelector  = $allModules.selector || '',
 
@@ -6433,11 +6429,17 @@ $.fn.popup = function(parameters) {
         moduleNamespace = 'module-' + namespace,
 
         $module         = $(this),
+        $target         = (settings.target)
+          ? $(settings.target)
+          : $module,
 
         $window         = $(window),
-        $offsetParent   = $module.offsetParent(),
+
+        $offsetParent   = (settings.inline)
+          ? $target.offsetParent()
+          : $window,
         $popup          = (settings.inline)
-          ? $module.next(settings.selector.popup)
+          ? $target.next(settings.selector.popup)
           : $window.children(settings.selector.popup).last(),
 
         searchDepth     = 0,
@@ -6452,17 +6454,20 @@ $.fn.popup = function(parameters) {
         // binds events
         initialize: function() {
           module.debug('Initializing module', $module);
-          if(settings.on == 'hover') {
+          if(settings.on == 'click') {
             $module
-              .on('mouseenter' + eventNamespace, module.event.mouseenter)
-              .on('mouseleave' + eventNamespace, module.event.mouseleave)
+              .on('click', module.toggle)
             ;
           }
           else {
             $module
-              .on(settings.on + '' + eventNamespace, module.event[settings.on])
+              .on(module.get.startEvent() + eventNamespace, module.event.start)
+              .on(module.get.endEvent() + eventNamespace, module.event.end)
             ;
           }
+          if(settings.target) {
+            module.debug('Target set to element', $target);
+          }
           $window
             .on('resize' + eventNamespace, module.event.resize)
           ;
@@ -6478,11 +6483,14 @@ $.fn.popup = function(parameters) {
         },
 
         refresh: function() {
-          $popup        = (settings.inline)
-            ? $module.next(selector.popup)
-            : $window.children(selector.popup).last()
-          ;
-          $offsetParent = $module.offsetParent();
+          if(settings.inline) {
+            $popup = $target.next(selector.popup);
+            $offsetParent = $target.offsetParent();
+          }
+          else {
+            console.log('found by refresh');
+            $popup = $window.children(selector.popup).last();
+          }
         },
 
         destroy: function() {
@@ -6490,6 +6498,9 @@ $.fn.popup = function(parameters) {
           $window
             .off(eventNamespace)
           ;
+          $popup
+            .remove()
+          ;
           $module
             .off(eventNamespace)
             .removeData(moduleNamespace)
@@ -6497,30 +6508,22 @@ $.fn.popup = function(parameters) {
         },
 
         event: {
-          mouseenter:  function(event) {
-            var element = this;
+          start:  function(event) {
             module.timer = setTimeout(function() {
-              $.proxy(module.toggle, element)();
-              if( $(element).hasClass(className.visible) ) {
-                event.stopPropagation();
+              if( module.is.hidden() ) {
+                module.show();
               }
             }, settings.delay);
           },
-          mouseleave:  function() {
+          end:  function() {
             clearTimeout(module.timer);
-            if( $module.is(':visible') ) {
+            if( module.is.visible() ) {
               module.hide();
             }
           },
-          click: function(event) {
-            $.proxy(module.toggle, this)();
-            if( $(this).hasClass(className.visible) ) {
-              event.stopPropagation();
-            }
-          },
           resize: function() {
-            if( $popup.is(':visible') ) {
-              module.position();
+            if( module.is.visible() ) {
+              module.set.position();
             }
           }
         },
@@ -6555,7 +6558,7 @@ $.fn.popup = function(parameters) {
             else {
               module.verbose('Appending popup element to body', $popup);
               $popup
-                .appendTo( $('body') )
+                .appendTo( $body )
               ;
             }
             $.proxy(settings.onCreate, $popup)();
@@ -6565,6 +6568,87 @@ $.fn.popup = function(parameters) {
           }
         },
 
+        // determines popup state
+        toggle: function() {
+          module.debug('Toggling pop-up');
+          if( module.is.hidden() ) {
+            module.hideAll();
+            module.show();
+          }
+          else {
+            module.hide();
+          }
+        },
+
+        show: function() {
+          module.debug('Showing pop-up', settings.transition);
+          if( !module.exists() ) {
+            module.create();
+          }
+          module.set.position();
+          $module
+            .addClass(className.visible)
+          ;
+          if(settings.transition && $.fn.transition !== undefined) {
+            $popup
+              .transition(settings.transition + ' in', settings.duration, module.bind.close)
+            ;
+          }
+          else {
+            $popup
+              .stop()
+              .fadeIn(settings.duration, settings.easing, module.bind.close)
+            ;
+          }
+          $.proxy(settings.onShow, $popup)();
+        },
+
+
+        hide: function() {
+          $module
+            .removeClass(className.visible)
+          ;
+          module.unbind.close();
+          if( module.is.visible() ) {
+            module.debug('Hiding pop-up');
+            if(settings.transition && $.fn.transition !== undefined) {
+              $popup
+                .transition(settings.transition + ' out', settings.duration, module.reset)
+              ;
+            }
+            else {
+              $popup
+                .stop()
+                .fadeOut(settings.duration, settings.easing, module.reset)
+              ;
+            }
+          }
+          $.proxy(settings.onHide, $popup)();
+        },
+
+        hideAll: function() {
+          $(selector.popup)
+            .filter(':visible')
+              .popup('hide')
+          ;
+        },
+
+        hideGracefully: function(event) {
+          // don't close on clicks inside popup
+          if( $(event.target).closest(selector.popup).size() === 0) {
+            module.hide();
+          }
+        },
+
+        exists: function() {
+          if(settings.inline) {
+            return ( $popup.size() !== 0 );
+          }
+          else {
+            return ( $popup.parent($body).size() );
+          }
+        },
+
         remove: function() {
           module.debug('Removing popup');
           $popup
@@ -6573,6 +6657,22 @@ $.fn.popup = function(parameters) {
         },
 
         get: {
+          startEvent: function() {
+            if(settings.on == 'hover') {
+              return 'mouseenter';
+            }
+            else if(settings.on == 'focus') {
+              return 'focus';
+            }
+          },
+          endEvent: function() {
+            if(settings.on == 'hover') {
+              return 'mouseleave';
+            }
+            else if(settings.on == 'focus') {
+              return 'blur';
+            }
+          },
           offstagePosition: function() {
             var
               boundary  = {
@@ -6640,229 +6740,184 @@ $.fn.popup = function(parameters) {
           }
         },
 
-        // determines popup state
-        toggle: function() {
-          $module = $(this);
-          module.debug('Toggling pop-up');
-          // refresh state of module
-          module.refresh();
-          if( !$module.hasClass(className.visible) ) {
-            if(settings.on == 'click') {
-              module.hideAll();
-            }
-            module.show();
-          }
-          else {
-            // module.hide();
-          }
-        },
+        set: {
+          position: function(position, arrowOffset) {
+            var
+              windowWidth  = $(window).width(),
+              windowHeight = $(window).height(),
 
-        position: function(position, arrowOffset) {
-          var
-            windowWidth  = $(window).width(),
-            windowHeight = $(window).height(),
-            width        = $module.outerWidth(),
-            height       = $module.outerHeight(),
-            popupWidth   = $popup.width(),
-            popupHeight  = $popup.outerHeight(),
-
-            offset       = (settings.inline)
-              ? $module.position()
-              : $module.offset(),
-            parentWidth  = (settings.inline)
-              ? $offsetParent.outerWidth()
-              : $window.outerWidth(),
-            parentHeight = (settings.inline)
-              ? $offsetParent.outerHeight()
-              : $window.outerHeight(),
-
-            positioning,
-            offstagePosition
-          ;
-          position    = position    || $module.data(metadata.position)    || settings.position;
-          arrowOffset = arrowOffset || $module.data(metadata.arrowOffset) || settings.arrowOffset;
-          module.debug('Calculating offset for position', position);
-          switch(position) {
-            case 'top left':
-              positioning = {
-                bottom :  parentHeight - offset.top + settings.distanceAway,
-                right  :  parentWidth - offset.left - width - arrowOffset,
-                top    : 'auto',
-                left   : 'auto'
-              };
-            break;
-            case 'top center':
-              positioning = {
-                bottom :  parentHeight - offset.top + settings.distanceAway,
-                left   : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset,
-                top    : 'auto',
-                right  : 'auto'
-              };
-            break;
-            case 'top right':
-              positioning = {
-                top    : 'auto',
-                bottom :  parentHeight - offset.top + settings.distanceAway,
-                left   : offset.left + arrowOffset
-              };
-            break;
-            case 'left center':
-              positioning = {
-                top    :  offset.top + (height / 2) - (popupHeight / 2),
-                right  : parentWidth - offset.left + settings.distanceAway - arrowOffset,
-                left   : 'auto',
-                bottom : 'auto'
-              };
-            break;
-            case 'right center':
-              positioning = {
-                top    :  offset.top + (height / 2) - (popupHeight / 2),
-                left   : offset.left + width + settings.distanceAway + arrowOffset,
-                bottom : 'auto',
-                right  : 'auto'
-              };
-            break;
-            case 'bottom left':
-              positioning = {
-                top    :  offset.top + height + settings.distanceAway,
-                right  : parentWidth - offset.left - width - arrowOffset,
-                left   : 'auto',
-                bottom : 'auto'
-              };
-            break;
-            case 'bottom center':
-              positioning = {
-                top    :  offset.top + height + settings.distanceAway,
-                left   : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset,
-                bottom : 'auto',
-                right  : 'auto'
-              };
-            break;
-            case 'bottom right':
-              positioning = {
-                top    :  offset.top + height + settings.distanceAway,
-                left   : offset.left + arrowOffset,
-                bottom : 'auto',
-                right  : 'auto'
-              };
-            break;
-          }
-          // true width on popup, avoid rounding error
-          $.extend(positioning, {
-            width: $popup.width() + 1
-          });
-          // tentatively place on stage
-          $popup
-            .css(positioning)
-            .removeClass(className.position)
-            .addClass(position)
-          ;
-          // check if is offstage
-          offstagePosition = module.get.offstagePosition();
-          // recursively find new positioning
-          if(offstagePosition) {
-            module.debug('Element is outside boundaries ', offstagePosition);
-            if(searchDepth < settings.maxSearchDepth) {
-              position = module.get.nextPosition(position);
-              searchDepth++;
-              module.debug('Trying new position: ', position);
-              return module.position(position);
+              width        = $target.outerWidth(),
+              height       = $target.outerHeight(),
+
+              popupWidth   = $popup.width(),
+              popupHeight  = $popup.outerHeight(),
+
+              parentWidth  = $offsetParent.outerWidth(),
+              parentHeight = $offsetParent.outerHeight(),
+
+              distanceAway = settings.distanceAway,
+
+              offset       = (settings.inline)
+                ? $target.position()
+                : $target.offset(),
+
+              positioning,
+              offstagePosition
+            ;
+            position    = position    || $module.data(metadata.position)    || settings.position;
+            arrowOffset = arrowOffset || $module.data(metadata.offset)      || settings.offset;
+            // adjust for margin when inline
+            if(settings.inline) {
+              if(position == 'left center' || position == 'right center') {
+                arrowOffset  += parseInt( window.getComputedStyle(element).getPropertyValue('margin-top'), 10);
+                distanceAway += -parseInt( window.getComputedStyle(element).getPropertyValue('margin-left'), 10);
+              }
+              else {
+                arrowOffset  += parseInt( window.getComputedStyle(element).getPropertyValue('margin-left'), 10);
+                distanceAway += parseInt( window.getComputedStyle(element).getPropertyValue('margin-top'), 10);
+              }
+            }
+            module.debug('Calculating offset for position', position);
+            switch(position) {
+              case 'top left':
+                positioning = {
+                  bottom :  parentHeight - offset.top + distanceAway,
+                  right  :  parentWidth - offset.left - arrowOffset,
+                  top    : 'auto',
+                  left   : 'auto'
+                };
+              break;
+              case 'top center':
+                positioning = {
+                  bottom :  parentHeight - offset.top + distanceAway,
+                  left   : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset,
+                  top    : 'auto',
+                  right  : 'auto'
+                };
+              break;
+              case 'top right':
+                positioning = {
+                  top    : 'auto',
+                  bottom :  parentHeight - offset.top + distanceAway,
+                  left   : offset.left + width + arrowOffset,
+                  right  : 'auto'
+                };
+              break;
+              case 'left center':
+                positioning = {
+                  top    :  offset.top + (height / 2) - (popupHeight / 2) + arrowOffset,
+                  right  : parentWidth - offset.left + distanceAway,
+                  left   : 'auto',
+                  bottom : 'auto'
+                };
+              break;
+              case 'right center':
+                positioning = {
+                  top    :  offset.top + (height / 2) - (popupHeight / 2) + arrowOffset,
+                  left   : offset.left + width + distanceAway,
+                  bottom : 'auto',
+                  right  : 'auto'
+                };
+              break;
+              case 'bottom left':
+                positioning = {
+                  top    :  offset.top + height + distanceAway,
+                  right  : parentWidth - offset.left - arrowOffset,
+                  left   : 'auto',
+                  bottom : 'auto'
+                };
+              break;
+              case 'bottom center':
+                positioning = {
+                  top    :  offset.top + height + distanceAway,
+                  left   : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset,
+                  bottom : 'auto',
+                  right  : 'auto'
+                };
+              break;
+              case 'bottom right':
+                positioning = {
+                  top    :  offset.top + height + distanceAway,
+                  left   : offset.left + width + arrowOffset,
+                  bottom : 'auto',
+                  right  : 'auto'
+                };
+              break;
+            }
+            // tentatively place on stage
+            $popup
+              .css(positioning)
+              .removeClass(className.position)
+              .addClass(position)
+            ;
+            // check if is offstage
+            offstagePosition = module.get.offstagePosition();
+
+            // recursively find new positioning
+            if(offstagePosition) {
+              module.debug('Element is outside boundaries', offstagePosition);
+              if(searchDepth < settings.maxSearchDepth) {
+                position = module.get.nextPosition(position);
+                searchDepth++;
+                module.debug('Trying new position', position);
+                return module.set.position(position);
+              }
+              else {
+                module.error(error.recursion);
+                searchDepth = 0;
+                return false;
+              }
             }
             else {
-              module.error(error.recursion);
+              module.debug('Position is on stage', position);
               searchDepth = 0;
-              return false;
+              return true;
             }
           }
-          else {
-            module.debug('Position is on stage', position);
-            searchDepth = 0;
-            return true;
-          }
-        },
-
-        show: function() {
-          module.debug('Showing pop-up', settings.transition);
-          if($popup.size() === 0) {
-            module.create();
-          }
-          module.position();
-          $module
-            .addClass(className.visible)
-          ;
-          if(settings.transition && $.fn.transition !== undefined) {
-            $popup
-              .transition(settings.transition + ' in', settings.duration)
-            ;
-          }
-          else {
-            $popup
-              .stop()
-              .fadeIn(settings.duration, settings.easing)
-            ;
-          }
-          if(settings.on == 'click' && settings.clicktoClose) {
-            module.debug('Binding popup close event');
-            $document
-              .on('click.' + namespace, module.gracefully.hide)
-            ;
-          }
-          $.proxy(settings.onShow, $popup)();
-        },
 
-        hideAll: function() {
-          $(selector.popup)
-            .filter(':visible')
-              .popup('hide')
-          ;
         },
 
-        hide: function() {
-          $module
-            .removeClass(className.visible)
-          ;
-          if($popup.is(':visible') ) {
-            module.debug('Hiding pop-up');
-            if(settings.transition && $.fn.transition !== undefined) {
-              $popup
-                .transition(settings.transition + ' out', settings.duration, module.reset)
+        bind: {
+          close:function() {
+            if(settings.on == 'click' && settings.closable) {
+              module.verbose('Binding popup close event to document');
+              $document
+                .on('click' + eventNamespace, module.hideGracefully)
               ;
             }
-            else {
-              $popup
-                .stop()
-                .fadeOut(settings.duration, settings.easing, module.reset)
+          }
+        },
+
+        unbind: {
+          close: function() {
+            if(settings.on == 'click' && settings.closable) {
+              module.verbose('Removing close event from document');
+              $document
+                .off('click' + eventNamespace)
               ;
             }
           }
-          if(settings.on == 'click' && settings.clicktoClose) {
-            $document
-              .off('click.' + namespace)
-            ;
+        },
+
+        is: {
+          visible: function() {
+            return $popup.is(':visible');
+          },
+          hidden: function() {
+            return !module.is.visible();
           }
-          $.proxy(settings.onHide, $popup)();
         },
 
         reset: function() {
-          module.verbose('Resetting inline styles');
           $popup
             .attr('style', '')
             .removeAttr('style')
           ;
-          if(!settings.inline) {
+          if(!settings.preserve) {
             module.remove();
           }
         },
 
-        gracefully: {
-          hide: function(event) {
-            // don't close on clicks inside popup
-            if( $(event.target).closest(selector.popup).size() === 0) {
-              module.hide();
-            }
-          }
-        },
-
         setting: function(name, value) {
           if(value !== undefined) {
             if( $.isPlainObject(name) ) {
@@ -7050,7 +7105,7 @@ $.fn.popup.settings = {
   performance    : true,
   namespace      : 'popup',
 
-  onCreate         : function(){},
+  onCreate       : function(){},
   onShow         : function(){},
   onHide         : function(){},
 
@@ -7060,18 +7115,20 @@ $.fn.popup.settings = {
   title          : false,
 
   on             : 'hover',
-  clicktoClose   : true,
+  target         : false,
+  closable       : true,
 
   position       : 'top center',
   delay          : 150,
-  inline         : true,
+  inline         : false,
+  preserve       : false,
 
-  duration       : 150,
+  duration       : 250,
   easing         : 'easeOutQuint',
   transition     : 'scale',
 
   distanceAway   : 0,
-  arrowOffset    : 0,
+  offset         : 0,
   maxSearchDepth : 10,
 
   error: {
@@ -7081,19 +7138,19 @@ $.fn.popup.settings = {
   },
 
   metadata: {
-    arrowOffset : 'arrowOffset',
-    content     : 'content',
-    html        : 'html',
-    position    : 'position',
-    title       : 'title',
-    variation   : 'variation'
+    content   : 'content',
+    html      : 'html',
+    offset    : 'offset',
+    position  : 'position',
+    title     : 'title',
+    variation : 'variation'
   },
 
   className   : {
-    popup       : 'ui popup',
-    visible     : 'visible',
     loading     : 'loading',
-    position    : 'top left center bottom right'
+    popup       : 'ui popup',
+    position    : 'top left center bottom right',
+    visible     : 'visible'
   },
 
   selector    : {

rtl/uncompressed/elements/label.css

@@ -202,11 +202,13 @@ a.ui.label:hover:before {
 --------------------*/
 .ui.ribbon.label {
   position: relative;
-  right: -1.8rem;
+  margin: 0em 0.2em;
+  right: -2rem;
   padding-right: 2rem;
   -webkit-border-radius: 4px 0px 0px 4px;
   -moz-border-radius: 4px 0px 0px 4px;
   border-radius: 4px 0px 0px 4px;
+  border-color: rgba(0, 0, 0, 0.15);
 }
 .ui.ribbon.label:after {
   position: absolute;
@@ -396,19 +398,23 @@ a.ui.label:hover:before {
 /* Hover */
 a.ui.black.labels .label:hover,
 a.ui.black.label:hover {
-  background-color: #888888 !important;
-  border-color: #888888 !important;
+  background-color: #333333 !important;
+  border-color: #333333 !important;
 }
 .ui.labels a.black.label:hover:before,
 .ui.black.labels a.label:hover:before,
 a.ui.black.label:hover:before {
-  background-color: #888888 !important;
+  background-color: #333333 !important;
 }
 /* Corner */
 .ui.black.corner.label,
 .ui.black.corner.label:hover {
   background-color: transparent !important;
 }
+/* Ribbon */
+.ui.black.ribbon.label {
+  border-color: #333333 !important;
+}
 /*--- Green ---*/
 .ui.green.labels .label,
 .ui.green.label {
@@ -437,6 +443,10 @@ a.ui.green.label:hover:before {
 .ui.green.corner.label:hover {
   background-color: transparent !important;
 }
+/* Ribbon */
+.ui.green.ribbon.label {
+  border-color: #89B84C !important;
+}
 /*--- Red ---*/
 .ui.red.labels .label,
 .ui.red.label {
@@ -466,6 +476,10 @@ a.ui.red.label:hover {
 a.ui.red.label:hover:before {
   background-color: #DE3859 !important;
 }
+/* Ribbon */
+.ui.red.ribbon.label {
+  border-color: #DE3859 !important;
+}
 /*--- Blue ---*/
 .ui.blue.labels .label,
 .ui.blue.label {
@@ -496,6 +510,10 @@ a.ui.blue.label:hover:before {
 .ui.blue.corner.label:hover {
   background-color: transparent !important;
 }
+/* Ribbon */
+.ui.blue.ribbon.label {
+  border-color: #1AB8F3 !important;
+}
 /*--- Purple ---*/
 .ui.purple.labels .label,
 .ui.purple.label {
@@ -526,6 +544,10 @@ a.ui.purple.label:hover:before {
 .ui.purple.corner.label:hover {
   background-color: transparent !important;
 }
+/* Ribbon */
+.ui.purple.ribbon.label {
+  border-color: #3E3773 !important;
+}
 /*--- Orange ---*/
 .ui.orange.labels .label,
 .ui.orange.label {
@@ -556,7 +578,11 @@ a.ui.orange.label:hover:before {
 .ui.orange.corner.label:hover {
   background-color: transparent !important;
 }
-/*--- Pink ---*/
+/* Ribbon */
+.ui.orange.ribbon.label {
+  border-color: #FF4121 !important;
+}
+/*--- Teal ---*/
 .ui.teal.labels .label,
 .ui.teal.label {
   background-color: #00B5AD !important;
@@ -586,6 +612,10 @@ a.ui.teal.label:hover:before {
 .ui.teal.corner.label:hover {
   background-color: transparent !important;
 }
+/* Ribbon */
+.ui.teal.ribbon.label {
+  border-color: #009A93 !important;
+}
 /*-------------------
      Horizontal
 --------------------*/

rtl/uncompressed/modules/dimmer.js

@@ -54,6 +54,8 @@ $.fn.dimmer = function(parameters) {
         module
       ;
 
+      console.log(element, parameters);
+
       module = {
 
         preinitialize: function() {

rtl/uncompressed/modules/dropdown.js

@@ -222,7 +222,6 @@ $.fn.dropdown = function(parameters) {
               if( $choice.find(selector.menu).size() === 0 ) {
                 module.determine.selectAction(text, value);
                 $.proxy(settings.onChange, element)(value, text);
-                event.preventDefault();
               }
             }
 

rtl/uncompressed/modules/modal.js

@@ -64,9 +64,14 @@ $.fn.modal = function(parameters) {
           module.verbose('Initializing dimmer', $context);
 
           $dimmable = $context
+            .dimmer({
+              closable : false,
+              show     : settings.duration * 0.95,
+              hide     : settings.duration * 1.05
+            })
             .dimmer('add content', $module)
           ;
-          $dimmer = $context
+          $dimmer = $dimmable
             .dimmer('get dimmer')
           ;
 
@@ -201,7 +206,6 @@ $.fn.modal = function(parameters) {
 
         showDimmer: function() {
           module.debug('Showing modal');
-          module.set.dimmerSettings();
           $dimmable.dimmer('show');
         },
 
@@ -331,16 +335,6 @@ $.fn.modal = function(parameters) {
               ;
             }
           },
-          dimmerSettings: function() {
-            module.debug('Setting dimmer settings', $dimmable);
-            $dimmable
-              .dimmer({
-                closable: false,
-                show: settings.duration * 0.95,
-                hide: settings.duration * 1.05
-              })
-            ;
-          },
           scrolling: function() {
             $dimmable.addClass(className.scrolling);
             $module.addClass(className.scrolling);

rtl/uncompressed/modules/popup.css

@@ -17,7 +17,7 @@
   top: 0px;
   left: 0px;
   z-index: 900;
-  border: 1px solid #DCDDDE;
+  border: 1px solid rgba(0, 0, 0, 0.1);
   max-width: 250px;
   background-color: #FFFFFF;
   padding: 0.8em 1.2em;
@@ -28,9 +28,9 @@
   -webkit-border-radius: 0.2em;
   -moz-border-radius: 0.2em;
   border-radius: 0.2em;
-  -webkit-box-shadow: 0px 1px 1px #DCDDDE;
-  -moz-box-shadow: 0px 1px 1px #DCDDDE;
-  box-shadow: 0px 1px 1px #DCDDDE;
+  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
 }
 .ui.popup .header {
   padding: 0em 0em 0.5em;
@@ -53,9 +53,9 @@
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
-  -webkit-box-shadow: 1px 1px 1px #DCDDDE;
-  -moz-box-shadow: 1px 1px 1px #DCDDDE;
-  box-shadow: 1px 1px 1px #DCDDDE;
+  -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
 }
 .ui.popup .ui.button {
   width: 100%;
@@ -94,12 +94,12 @@
   right: 50%;
   left: auto;
   bottom: auto;
-  -webkit-box-shadow: -1px -1px 1px #dcddde;
-  -moz-box-shadow: -1px -1px 1px #dcddde;
-  box-shadow: -1px -1px 1px #dcddde;
+  -webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
 }
 .ui.bottom.left.popup {
-  margin-left: -0.8em;
+  margin-left: -2em;
 }
 .ui.bottom.left.popup:before {
   top: -0.4em;
@@ -107,12 +107,12 @@
   bottom: auto;
   right: auto;
   margin-right: 0em;
-  -webkit-box-shadow: -1px -1px 1px #dcddde;
-  -moz-box-shadow: -1px -1px 1px #dcddde;
-  box-shadow: -1px -1px 1px #dcddde;
+  -webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
 }
 .ui.bottom.right.popup {
-  margin-right: -0.8em;
+  margin-right: -2em;
 }
 .ui.bottom.right.popup:before {
   top: -0.4em;
@@ -120,9 +120,9 @@
   left: auto;
   bottom: auto;
   margin-right: 0em;
-  -webkit-box-shadow: -1px -1px 1px #dcddde;
-  -moz-box-shadow: -1px -1px 1px #dcddde;
-  box-shadow: -1px -1px 1px #dcddde;
+  -webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
 }
 /*--- Above ---*/
 .ui.top.center.popup:before {
@@ -133,7 +133,7 @@
   margin-right: -0.4em;
 }
 .ui.top.left.popup {
-  margin-left: -0.8em;
+  margin-left: -2em;
 }
 .ui.top.left.popup:before {
   bottom: -0.4em;
@@ -143,7 +143,7 @@
   margin-right: 0em;
 }
 .ui.top.right.popup {
-  margin-right: -0.8em;
+  margin-right: -2em;
 }
 .ui.top.right.popup:before {
   bottom: -0.4em;
@@ -159,9 +159,9 @@
   bottom: auto;
   right: auto;
   margin-top: -0.4em;
-  -moz-box-shadow: 1px -1px 1px #dcddde;
-  -webkit-box-shadow: 1px -1px 1px #dcddde;
-  box-shadow: 1px -1px 1px #dcddde;
+  -moz-box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
 }
 /*--- Right Center  ---*/
 .ui.right.center.popup:before {
@@ -170,9 +170,9 @@
   bottom: auto;
   left: auto;
   margin-top: -0.4em;
-  -moz-box-shadow: -1px 1px 1px #dcddde;
-  -webkit-box-shadow: -1px 1px 1px #dcddde;
-  box-shadow: -1px 1px 1px #dcddde;
+  -moz-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
 }
 /*******************************
             States

rtl/uncompressed/modules/popup.js

@@ -15,6 +15,7 @@ $.fn.popup = function(parameters) {
   var
     $allModules     = $(this),
     $document       = $(document),
+    $body           = $('body'),
 
     moduleSelector  = $allModules.selector || '',
 
@@ -44,11 +45,17 @@ $.fn.popup = function(parameters) {
         moduleNamespace = 'module-' + namespace,
 
         $module         = $(this),
+        $target         = (settings.target)
+          ? $(settings.target)
+          : $module,
 
         $window         = $(window),
-        $offsetParent   = $module.offsetParent(),
+
+        $offsetParent   = (settings.inline)
+          ? $target.offsetParent()
+          : $window,
         $popup          = (settings.inline)
-          ? $module.next(settings.selector.popup)
+          ? $target.next(settings.selector.popup)
           : $window.children(settings.selector.popup).last(),
 
         searchDepth     = 0,
@@ -63,17 +70,20 @@ $.fn.popup = function(parameters) {
         // binds events
         initialize: function() {
           module.debug('Initializing module', $module);
-          if(settings.on == 'hover') {
+          if(settings.on == 'click') {
             $module
-              .on('mouseenter' + eventNamespace, module.event.mouseenter)
-              .on('mouseleave' + eventNamespace, module.event.mouseleave)
+              .on('click', module.toggle)
             ;
           }
           else {
             $module
-              .on(settings.on + '' + eventNamespace, module.event[settings.on])
+              .on(module.get.startEvent() + eventNamespace, module.event.start)
+              .on(module.get.endEvent() + eventNamespace, module.event.end)
             ;
           }
+          if(settings.target) {
+            module.debug('Target set to element', $target);
+          }
           $window
             .on('resize' + eventNamespace, module.event.resize)
           ;
@@ -89,11 +99,14 @@ $.fn.popup = function(parameters) {
         },
 
         refresh: function() {
-          $popup        = (settings.inline)
-            ? $module.next(selector.popup)
-            : $window.children(selector.popup).last()
-          ;
-          $offsetParent = $module.offsetParent();
+          if(settings.inline) {
+            $popup = $target.next(selector.popup);
+            $offsetParent = $target.offsetParent();
+          }
+          else {
+            console.log('found by refresh');
+            $popup = $window.children(selector.popup).last();
+          }
         },
 
         destroy: function() {
@@ -101,6 +114,9 @@ $.fn.popup = function(parameters) {
           $window
             .off(eventNamespace)
           ;
+          $popup
+            .remove()
+          ;
           $module
             .off(eventNamespace)
             .removeData(moduleNamespace)
@@ -108,30 +124,22 @@ $.fn.popup = function(parameters) {
         },
 
         event: {
-          mouseenter:  function(event) {
-            var element = this;
+          start:  function(event) {
             module.timer = setTimeout(function() {
-              $.proxy(module.toggle, element)();
-              if( $(element).hasClass(className.visible) ) {
-                event.stopPropagation();
+              if( module.is.hidden() ) {
+                module.show();
               }
             }, settings.delay);
           },
-          mouseleave:  function() {
+          end:  function() {
             clearTimeout(module.timer);
-            if( $module.is(':visible') ) {
+            if( module.is.visible() ) {
               module.hide();
             }
           },
-          click: function(event) {
-            $.proxy(module.toggle, this)();
-            if( $(this).hasClass(className.visible) ) {
-              event.stopPropagation();
-            }
-          },
           resize: function() {
-            if( $popup.is(':visible') ) {
-              module.position();
+            if( module.is.visible() ) {
+              module.set.position();
             }
           }
         },
@@ -166,7 +174,7 @@ $.fn.popup = function(parameters) {
             else {
               module.verbose('Appending popup element to body', $popup);
               $popup
-                .appendTo( $('body') )
+                .appendTo( $body )
               ;
             }
             $.proxy(settings.onCreate, $popup)();
@@ -176,6 +184,87 @@ $.fn.popup = function(parameters) {
           }
         },
 
+        // determines popup state
+        toggle: function() {
+          module.debug('Toggling pop-up');
+          if( module.is.hidden() ) {
+            module.hideAll();
+            module.show();
+          }
+          else {
+            module.hide();
+          }
+        },
+
+        show: function() {
+          module.debug('Showing pop-up', settings.transition);
+          if( !module.exists() ) {
+            module.create();
+          }
+          module.set.position();
+          $module
+            .addClass(className.visible)
+          ;
+          if(settings.transition && $.fn.transition !== undefined) {
+            $popup
+              .transition(settings.transition + ' in', settings.duration, module.bind.close)
+            ;
+          }
+          else {
+            $popup
+              .stop()
+              .fadeIn(settings.duration, settings.easing, module.bind.close)
+            ;
+          }
+          $.proxy(settings.onShow, $popup)();
+        },
+
+
+        hide: function() {
+          $module
+            .removeClass(className.visible)
+          ;
+          module.unbind.close();
+          if( module.is.visible() ) {
+            module.debug('Hiding pop-up');
+            if(settings.transition && $.fn.transition !== undefined) {
+              $popup
+                .transition(settings.transition + ' out', settings.duration, module.reset)
+              ;
+            }
+            else {
+              $popup
+                .stop()
+                .fadeOut(settings.duration, settings.easing, module.reset)
+              ;
+            }
+          }
+          $.proxy(settings.onHide, $popup)();
+        },
+
+        hideAll: function() {
+          $(selector.popup)
+            .filter(':visible')
+              .popup('hide')
+          ;
+        },
+
+        hideGracefully: function(event) {
+          // don't close on clicks inside popup
+          if( $(event.target).closest(selector.popup).size() === 0) {
+            module.hide();
+          }
+        },
+
+        exists: function() {
+          if(settings.inline) {
+            return ( $popup.size() !== 0 );
+          }
+          else {
+            return ( $popup.parent($body).size() );
+          }
+        },
+
         remove: function() {
           module.debug('Removing popup');
           $popup
@@ -184,6 +273,22 @@ $.fn.popup = function(parameters) {
         },
 
         get: {
+          startEvent: function() {
+            if(settings.on == 'hover') {
+              return 'mouseenter';
+            }
+            else if(settings.on == 'focus') {
+              return 'focus';
+            }
+          },
+          endEvent: function() {
+            if(settings.on == 'hover') {
+              return 'mouseleave';
+            }
+            else if(settings.on == 'focus') {
+              return 'blur';
+            }
+          },
           offstagePosition: function() {
             var
               boundary  = {
@@ -251,229 +356,184 @@ $.fn.popup = function(parameters) {
           }
         },
 
-        // determines popup state
-        toggle: function() {
-          $module = $(this);
-          module.debug('Toggling pop-up');
-          // refresh state of module
-          module.refresh();
-          if( !$module.hasClass(className.visible) ) {
-            if(settings.on == 'click') {
-              module.hideAll();
-            }
-            module.show();
-          }
-          else {
-            // module.hide();
-          }
-        },
+        set: {
+          position: function(position, arrowOffset) {
+            var
+              windowWidth  = $(window).width(),
+              windowHeight = $(window).height(),
 
-        position: function(position, arrowOffset) {
-          var
-            windowWidth  = $(window).width(),
-            windowHeight = $(window).height(),
-            width        = $module.outerWidth(),
-            height       = $module.outerHeight(),
-            popupWidth   = $popup.width(),
-            popupHeight  = $popup.outerHeight(),
-
-            offset       = (settings.inline)
-              ? $module.position()
-              : $module.offset(),
-            parentWidth  = (settings.inline)
-              ? $offsetParent.outerWidth()
-              : $window.outerWidth(),
-            parentHeight = (settings.inline)
-              ? $offsetParent.outerHeight()
-              : $window.outerHeight(),
-
-            positioning,
-            offstagePosition
-          ;
-          position    = position    || $module.data(metadata.position)    || settings.position;
-          arrowOffset = arrowOffset || $module.data(metadata.arrowOffset) || settings.arrowOffset;
-          module.debug('Calculating offset for position', position);
-          switch(position) {
-            case 'top left':
-              positioning = {
-                bottom :  parentHeight - offset.top + settings.distanceAway,
-                right  :  parentWidth - offset.left - width - arrowOffset,
-                top    : 'auto',
-                left   : 'auto'
-              };
-            break;
-            case 'top center':
-              positioning = {
-                bottom :  parentHeight - offset.top + settings.distanceAway,
-                left   : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset,
-                top    : 'auto',
-                right  : 'auto'
-              };
-            break;
-            case 'top right':
-              positioning = {
-                top    : 'auto',
-                bottom :  parentHeight - offset.top + settings.distanceAway,
-                left   : offset.left + arrowOffset
-              };
-            break;
-            case 'left center':
-              positioning = {
-                top    :  offset.top + (height / 2) - (popupHeight / 2),
-                right  : parentWidth - offset.left + settings.distanceAway - arrowOffset,
-                left   : 'auto',
-                bottom : 'auto'
-              };
-            break;
-            case 'right center':
-              positioning = {
-                top    :  offset.top + (height / 2) - (popupHeight / 2),
-                left   : offset.left + width + settings.distanceAway + arrowOffset,
-                bottom : 'auto',
-                right  : 'auto'
-              };
-            break;
-            case 'bottom left':
-              positioning = {
-                top    :  offset.top + height + settings.distanceAway,
-                right  : parentWidth - offset.left - width - arrowOffset,
-                left   : 'auto',
-                bottom : 'auto'
-              };
-            break;
-            case 'bottom center':
-              positioning = {
-                top    :  offset.top + height + settings.distanceAway,
-                left   : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset,
-                bottom : 'auto',
-                right  : 'auto'
-              };
-            break;
-            case 'bottom right':
-              positioning = {
-                top    :  offset.top + height + settings.distanceAway,
-                left   : offset.left + arrowOffset,
-                bottom : 'auto',
-                right  : 'auto'
-              };
-            break;
-          }
-          // true width on popup, avoid rounding error
-          $.extend(positioning, {
-            width: $popup.width() + 1
-          });
-          // tentatively place on stage
-          $popup
-            .css(positioning)
-            .removeClass(className.position)
-            .addClass(position)
-          ;
-          // check if is offstage
-          offstagePosition = module.get.offstagePosition();
-          // recursively find new positioning
-          if(offstagePosition) {
-            module.debug('Element is outside boundaries ', offstagePosition);
-            if(searchDepth < settings.maxSearchDepth) {
-              position = module.get.nextPosition(position);
-              searchDepth++;
-              module.debug('Trying new position: ', position);
-              return module.position(position);
-            }
-            else {
-              module.error(error.recursion);
-              searchDepth = 0;
-              return false;
-            }
-          }
-          else {
-            module.debug('Position is on stage', position);
-            searchDepth = 0;
-            return true;
-          }
-        },
+              width        = $target.outerWidth(),
+              height       = $target.outerHeight(),
 
-        show: function() {
-          module.debug('Showing pop-up', settings.transition);
-          if($popup.size() === 0) {
-            module.create();
-          }
-          module.position();
-          $module
-            .addClass(className.visible)
-          ;
-          if(settings.transition && $.fn.transition !== undefined) {
-            $popup
-              .transition(settings.transition + ' in', settings.duration)
+              popupWidth   = $popup.width(),
+              popupHeight  = $popup.outerHeight(),
+
+              parentWidth  = $offsetParent.outerWidth(),
+              parentHeight = $offsetParent.outerHeight(),
+
+              distanceAway = settings.distanceAway,
+
+              offset       = (settings.inline)
+                ? $target.position()
+                : $target.offset(),
+
+              positioning,
+              offstagePosition
             ;
-          }
-          else {
+            position    = position    || $module.data(metadata.position)    || settings.position;
+            arrowOffset = arrowOffset || $module.data(metadata.offset)      || settings.offset;
+            // adjust for margin when inline
+            if(settings.inline) {
+              if(position == 'left center' || position == 'right center') {
+                arrowOffset  += parseInt( window.getComputedStyle(element).getPropertyValue('margin-top'), 10);
+                distanceAway += -parseInt( window.getComputedStyle(element).getPropertyValue('margin-left'), 10);
+              }
+              else {
+                arrowOffset  += parseInt( window.getComputedStyle(element).getPropertyValue('margin-left'), 10);
+                distanceAway += parseInt( window.getComputedStyle(element).getPropertyValue('margin-top'), 10);
+              }
+            }
+            module.debug('Calculating offset for position', position);
+            switch(position) {
+              case 'top left':
+                positioning = {
+                  bottom :  parentHeight - offset.top + distanceAway,
+                  right  :  parentWidth - offset.left - arrowOffset,
+                  top    : 'auto',
+                  left   : 'auto'
+                };
+              break;
+              case 'top center':
+                positioning = {
+                  bottom :  parentHeight - offset.top + distanceAway,
+                  left   : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset,
+                  top    : 'auto',
+                  right  : 'auto'
+                };
+              break;
+              case 'top right':
+                positioning = {
+                  top    : 'auto',
+                  bottom :  parentHeight - offset.top + distanceAway,
+                  left   : offset.left + width + arrowOffset,
+                  right  : 'auto'
+                };
+              break;
+              case 'left center':
+                positioning = {
+                  top    :  offset.top + (height / 2) - (popupHeight / 2) + arrowOffset,
+                  right  : parentWidth - offset.left + distanceAway,
+                  left   : 'auto',
+                  bottom : 'auto'
+                };
+              break;
+              case 'right center':
+                positioning = {
+                  top    :  offset.top + (height / 2) - (popupHeight / 2) + arrowOffset,
+                  left   : offset.left + width + distanceAway,
+                  bottom : 'auto',
+                  right  : 'auto'
+                };
+              break;
+              case 'bottom left':
+                positioning = {
+                  top    :  offset.top + height + distanceAway,
+                  right  : parentWidth - offset.left - arrowOffset,
+                  left   : 'auto',
+                  bottom : 'auto'
+                };
+              break;
+              case 'bottom center':
+                positioning = {
+                  top    :  offset.top + height + distanceAway,
+                  left   : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset,
+                  bottom : 'auto',
+                  right  : 'auto'
+                };
+              break;
+              case 'bottom right':
+                positioning = {
+                  top    :  offset.top + height + distanceAway,
+                  left   : offset.left + width + arrowOffset,
+                  bottom : 'auto',
+                  right  : 'auto'
+                };
+              break;
+            }
+            // tentatively place on stage
             $popup
-              .stop()
-              .fadeIn(settings.duration, settings.easing)
-            ;
-          }
-          if(settings.on == 'click' && settings.clicktoClose) {
-            module.debug('Binding popup close event');
-            $document
-              .on('click.' + namespace, module.gracefully.hide)
+              .css(positioning)
+              .removeClass(className.position)
+              .addClass(position)
             ;
+            // check if is offstage
+            offstagePosition = module.get.offstagePosition();
+
+            // recursively find new positioning
+            if(offstagePosition) {
+              module.debug('Element is outside boundaries', offstagePosition);
+              if(searchDepth < settings.maxSearchDepth) {
+                position = module.get.nextPosition(position);
+                searchDepth++;
+                module.debug('Trying new position', position);
+                return module.set.position(position);
+              }
+              else {
+                module.error(error.recursion);
+                searchDepth = 0;
+                return false;
+              }
+            }
+            else {
+              module.debug('Position is on stage', position);
+              searchDepth = 0;
+              return true;
+            }
           }
-          $.proxy(settings.onShow, $popup)();
-        },
 
-        hideAll: function() {
-          $(selector.popup)
-            .filter(':visible')
-              .popup('hide')
-          ;
         },
 
-        hide: function() {
-          $module
-            .removeClass(className.visible)
-          ;
-          if($popup.is(':visible') ) {
-            module.debug('Hiding pop-up');
-            if(settings.transition && $.fn.transition !== undefined) {
-              $popup
-                .transition(settings.transition + ' out', settings.duration, module.reset)
+        bind: {
+          close:function() {
+            if(settings.on == 'click' && settings.closable) {
+              module.verbose('Binding popup close event to document');
+              $document
+                .on('click' + eventNamespace, module.hideGracefully)
               ;
             }
-            else {
-              $popup
-                .stop()
-                .fadeOut(settings.duration, settings.easing, module.reset)
+          }
+        },
+
+        unbind: {
+          close: function() {
+            if(settings.on == 'click' && settings.closable) {
+              module.verbose('Removing close event from document');
+              $document
+                .off('click' + eventNamespace)
               ;
             }
           }
-          if(settings.on == 'click' && settings.clicktoClose) {
-            $document
-              .off('click.' + namespace)
-            ;
+        },
+
+        is: {
+          visible: function() {
+            return $popup.is(':visible');
+          },
+          hidden: function() {
+            return !module.is.visible();
           }
-          $.proxy(settings.onHide, $popup)();
         },
 
         reset: function() {
-          module.verbose('Resetting inline styles');
           $popup
             .attr('style', '')
             .removeAttr('style')
           ;
-          if(!settings.inline) {
+          if(!settings.preserve) {
             module.remove();
           }
         },
 
-        gracefully: {
-          hide: function(event) {
-            // don't close on clicks inside popup
-            if( $(event.target).closest(selector.popup).size() === 0) {
-              module.hide();
-            }
-          }
-        },
-
         setting: function(name, value) {
           if(value !== undefined) {
             if( $.isPlainObject(name) ) {
@@ -661,7 +721,7 @@ $.fn.popup.settings = {
   performance    : true,
   namespace      : 'popup',
 
-  onCreate         : function(){},
+  onCreate       : function(){},
   onShow         : function(){},
   onHide         : function(){},
 
@@ -671,18 +731,20 @@ $.fn.popup.settings = {
   title          : false,
 
   on             : 'hover',
-  clicktoClose   : true,
+  target         : false,
+  closable       : true,
 
   position       : 'top center',
   delay          : 150,
-  inline         : true,
+  inline         : false,
+  preserve       : false,
 
-  duration       : 150,
+  duration       : 250,
   easing         : 'easeOutQuint',
   transition     : 'scale',
 
   distanceAway   : 0,
-  arrowOffset    : 0,
+  offset         : 0,
   maxSearchDepth : 10,
 
   error: {
@@ -692,19 +754,19 @@ $.fn.popup.settings = {
   },
 
   metadata: {
-    arrowOffset : 'arrowOffset',
-    content     : 'content',
-    html        : 'html',
-    position    : 'position',
-    title       : 'title',
-    variation   : 'variation'
+    content   : 'content',
+    html      : 'html',
+    offset    : 'offset',
+    position  : 'position',
+    title     : 'title',
+    variation : 'variation'
   },
 
   className   : {
-    popup       : 'ui popup',
-    visible     : 'visible',
     loading     : 'loading',
-    position    : 'top left center bottom right'
+    popup       : 'ui popup',
+    position    : 'top left center bottom right',
+    visible     : 'visible'
   },
 
   selector    : {

rtl/uncompressed/views/item.css

@@ -89,7 +89,6 @@
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
-  overflow: hidden;
   -webkit-border-radius: 0.2em;
   -moz-border-radius: 0.2em;
   border-radius: 0.2em;

server/documents/elements/label.html.eco

@@ -12,14 +12,14 @@ type        : 'UI Element'
 
   <div class="peek">
     <div class="ui vertical pointing secondary menu">
-      <a class="active item">Content</a>
-      <a class="item">Types</a>
+      <a class="active item">Types</a>
       <a class="item">Variations</a>
       <a class="item">Groups</a>
     </div>
   </div>
 
-  <h2 class="ui dividing header">Content</h2>
+  <h2 class="ui dividing header">Types</h2>
+
   <div class="example">
     <h4 class="ui header">Label</h4>
     <p>A basic label</p>
@@ -29,7 +29,7 @@ type        : 'UI Element'
   </div>
   <div class="example">
     <h4 class="ui header">Detail</h4>
-    <p>A tag can optionally display a detail</p>
+    <p>A label can contain a detail</p>
     <div class="ui label">
       Dogs
       <div class="detail">214</div>
@@ -38,18 +38,16 @@ type        : 'UI Element'
 
   <div class="example">
     <h4 class="ui header">Removable</h4>
-    <p>A tag can optionally be removable</p>
+    <p>A label can contain a delete icon</p>
     <div class="ui label">
       Witty
       <i class="delete icon"></i>
     </div>
   </div>
 
-  <h2 class="ui dividing header">Types</h2>
-
   <div class="example">
     <h4 class="ui header">Image</h4>
-    <p>A tag can optionally display an image</p>
+    <p>A label can be formatted to include an image</p>
     <a class="ui image label">
       <img src="/images/demo/photo2.jpg">
       dog@doggington.com
@@ -80,14 +78,17 @@ type        : 'UI Element'
       </div>
       This is a normal text segment
     </div>
-    <div class="ui image">
+    <div class="ui left floated medium image">
       <a class="ui left corner label">
         <div class="text">New</div>
       </a>
+      <img src="/images/demo/highres2.jpg">
+    </div>
+    <div class="ui left floated medium image">
       <a class="ui right red corner label">
         <i class="heart icon"></i>
       </a>
-      <img src="/images/demo/stickfigure.jpg">
+      <img src="/images/demo/highres3.jpg">
     </div>
   </div>
 
@@ -99,7 +100,11 @@ type        : 'UI Element'
         <div class="column">
           <div class="ui raised segment">
             <div class="ui ribbon label">Dogs</div>
-            <p>Pretty nice animals</p>
+            <p>Pretty nice animals.</p>
+            <div class="ui teal ribbon label">Cats</div>
+            <p>Also pretty nice animals, but can prefer solitude.</p>
+            <div class="ui red ribbon label">Ogres and monsters</div>
+            <p>Never seen one as a pet before, but I imagine they'd make pretty terrible companions.</p>
           </div>
         </div>
       </div>

server/documents/index.html.eco

@@ -15,7 +15,7 @@ type   : 'Semantic'
   <div class="ui page grid">
     <div class="column">
       <div class="introduction">
-        <h1 class="ui header">Semantic UI <a class="ui black label" href="https://github.com/jlukic/Semantic-UI/blob/master/RELEASE%20NOTES.md">0.6.3</a></h1>
+        <h1 class="ui header">Semantic UI <a class="ui black label" href="https://github.com/jlukic/Semantic-UI/blob/master/RELEASE%20NOTES.md">0.6.4</a></h1>
         <h2 class="ui header">UI is the vocabulary of the web.</h2>
         <p>Semantic empowers designers and developers by creating a language for sharing UI.</p>
         <a class="ui black large labeled launch icon button"><i class="icon list layout"></i> View UI</a>

server/documents/modules/accordion.html.eco

@@ -287,8 +287,8 @@ type        : 'UI Module'
       </tr>
       <tr>
         <td>easing</td>
-        <td>linear</td>
-        <td>Easing equation used for accordion (additional options require <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery easing</a>)</td>
+        <td>easeInOutQuint</td>
+        <td>EaseInOutQuint is included with accordion, for additional options consider <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery easing</a>)</td>
       </tr>
     </tbody>
   </table>

server/documents/modules/dropdown.html.eco

@@ -485,6 +485,13 @@ type        : 'UI Module'
         </td>
         <td>Named transition to use when animating menu in and out. Fade and slide down are available without including <a href="/modules/transition.html">ui transitions</a></td>
       </tr>
+      <tr>
+        <td>duration</td>
+        <td>
+          250
+        </td>
+        <td>Duration of animation events</td>
+      </tr>
       <tr>
         <td>action</td>
         <td>auto</td>
@@ -567,11 +574,11 @@ type        : 'UI Module'
         <td colspan="2">
           <div class="code">
     selector : {
-      menu  : '.menu',
+      input : '> input[type="hidden"]',
       item  : '.menu > .item',
-      text  : '> .text',
-      input : '> input[type="hidden"]'
-    },
+      menu  : '.menu',
+      text  : '> .text'
+    }
           </div>
         </td>
       </tr>
@@ -582,7 +589,7 @@ type        : 'UI Module'
     metadata: {
       text  : 'text',
       value : 'value'
-    },
+    }
           </div>
         </td>
       </tr>
@@ -592,8 +599,8 @@ type        : 'UI Module'
           <div class="code">
     className : {
       active      : 'active',
-      placeholder : 'default',
       disabled    : 'disabled',
+      placeholder : 'default',
       visible     : 'visible'
     }
           </div>

server/documents/modules/modal.html.eco

@@ -228,7 +228,7 @@ type        : 'UI Module'
 
   <div class="no example">
     <h4 class="ui header">Transitions</h4>
-    <p>A dimmer can use any named ui transition.</p>
+    <p>A modal can use any named ui transition.</p>
     <div class="ui selection dropdown">
       <input type="hidden" name="transition">
       <i class="dropdown icon"></i>

server/documents/modules/popup.html.eco

@@ -14,14 +14,52 @@ type        : 'UI Module'
 
   <div class="peek">
     <div class="ui vertical pointing secondary menu">
-      <a class="active item">Types</a>
+      <a class="active item">Usage</a>
+      <a class="item">Types</a>
       <a class="item">Variations</a>
-      <a class="item">Usage</a>
       <a class="item">Examples</a>
       <a class="item">Settings</a>
     </div>
   </div>
 
+  <h2 class="ui dividing header">Usage</h2>
+
+  <h4 class="ui header">Initializing an popup</h4>
+  <div class="code">
+    $('.ui.popup')
+      .popup()
+    ;
+  </div>
+
+  <div class="no example">
+    <h4 class="ui header">Including metadata</h4>
+    <p>Frequently used metadata like, title, content, html, or offset or variation, can be included in html metadata<p>
+    <div class="ui info icon ignored message">
+      <i class="info icon"></i>
+      <div class="content">
+        <div class="header">Specifying Content</div>
+        <p>Popups can specify content in three ways:<p>
+        <ul class="list">
+          <li>Using html <code>title</code> attribute</li>
+          <li>Using <code>data-content</code> attribute</li>
+          <li>Using the content property in the initialization of the popup</li>
+        </ul>
+      </div>
+    </div>
+    <div class="code" data-type="html">
+      <i class="heart icon" title="Hello I am a popup"></i>
+    </div>
+    <div class="ui horizontal divider">Or</div>
+  <div class="code">
+    $('.ui.popup')
+      .popup({
+        content: 'Hello I am a popup'
+      })
+    ;
+  </div>
+  </div>
+
+
   <h2 class="ui dividing header">Types</h2>
   <div class="example">
     <h4 class="ui header">Popup</h4>
@@ -29,6 +67,19 @@ type        : 'UI Module'
     <i class="large heart circular icon link" data-content="Hello, I am a pop-up."></i>
   </div>
 
+  <div class="example">
+    <h4 class="ui header">Title</h4>
+    <p>A popup can be formatted with a title</p>
+    <i class="circular heart icon link" data-title="Dog Breeds" data-content="There are many types of dogs. We don't have time to list them all"></i>
+  </div>
+
+  <div class="example">
+    <h4 class="ui header">HTML</h4>
+    <p>A popup can be formatted with html</p>
+    <i class="circular heart icon link" data-html="<div class='ui red button'>Button</div>"></i>
+  </div>
+
+
   <h2 class="ui dividing header">Variations</h2>
 
   <div class="example">
@@ -44,38 +95,48 @@ type        : 'UI Module'
     <i class="circular heart icon link" data-content="Hello. This is an inverted popup" data-variation="inverted"></i>
   </div>
 
+  <h2 class="ui dividing header">Examples</h2>
 
-  <h2 class="ui dividing header">Usage</h2>
-
-  <h4 class="ui header">Initializing an popup</h4>
-  <div class="code">
-    $('.ui.popup')
-      .popup()
+  <div class="example">
+    <h4 class="ui header">Specifying a trigger event</h4>
+    <p>A popup trigger event can be specified</p>
+    <div class="evaluated code">
+    $('.example .teal.button')
+      .popup({
+        on: 'click'
+      })
+    ;
+    $('.example input')
+      .popup({
+        on: 'focus'
+      })
     ;
-  </div>
-
-  <h4 class="ui header">Including metadata</h4>
-  <p>Frequently used metadata like, title, content, html, or arrowOffset or variation, can be included in html metadata<p>
-  <div class="ui info icon ignored message">
-    <i class="info icon"></i>
-    <div class="content">
-      <div class="header">Specifying Content</div>
-      <p>Popups can specify content in three ways:<p>
-      <ul class="list">
-        <li>Using html title attribute</li>
-        <li>Using data-content attribute</li>
-        <li>Using the content property in the initialization of the popup</li>
-      </ul>
     </div>
-  </div>
-  <div class="code" data-type="html">
-    <i class="circular heart icon link" data-content="Here is some popup content." data-position="top left" data-variation="black"></i>
+    <div class="ui teal button" data-title="Using click events" data-content="Clicked popups will close if you click away, but not if you click inside the popup">Click Me</div>
+    <div class="ui icon input">
+      <input type="text" placeholder="Focus me..." data-content="You can use me to enter data">
+      <i class="search icon">
+    </i>
   </div>
 
-  <h2 class="ui dividing header">Examples</h2>
+  <div class="example">
+    <h4 class="ui header">Target Element</h4>
+    <p>A popup can specify a different target element than itself to show a popup</p>
+    <div class="evaluated code">
+    $('.test.button')
+      .popup({
+        position : 'top right',
+        target   : '.test.image',
+        title    : 'My favorite dog',
+        content  : 'My favorite dog would like other dogs as much as themself'
+      })
+    ;
+    </div>
+    <div class="ui basic test button">Hover Me</div>
+    <div class="ui divider"></div>
+    <img class="medium ui test image" src="/images/demo/photo.jpg">
 
-  <div class="example segment">
-    <h4 class="ui header">Inline or Body</h4>
+    <h4 class="ui header">Inline or relative to page</h4>
     <p>A popup can either be inserted directly after an element, or added as a child element to the page's <code>body</code>.</p>
     <div class="ui warning message">
       An inline popup will remain in your page's html after being hidden, while a non-inline popup will remove itself after being hidden.
@@ -83,145 +144,200 @@ type        : 'UI Module'
     <div class="ui info message">
       If you want to style each popup individually it makes sense to keep popup <code>inline: true</code>. If you are worried that your pop up might mistakingly inherit styles that it shouldn't, you should set <code>inline: false</code>.
     </div>
+    <div class="code" data-type="css">
+      /* this will only style the popup if inline is true */
+      .example .popup {
+        color: #FF0000;
+      }
+    </div>
     <div class="evaluated code">
-    $('.page.icon')
-      .popup({
-        inline: false
-      })
-    ;
     $('.inline.icon')
       .popup({
         inline: true
       })
     ;
     </div>
-    <i class="mail page circular icon link" data-content="This is a child element to the page's body" ></i>
-    <i class="mail inline circular icon link" data-content="This is sibling of the icon" ></i>
+    <i class="heart circular icon link" data-content="This is a child element to the page's body and will not be styled" ></i>
+    <i class="mail inline circular icon link" data-content="This popup was inserted inline and will be styled" ></i>
 
   </div>
-  <div class="example segment">
+  <div class="position example">
     <h4 class="ui header">Positioning</h4>
     <p>A popup can be positioned to any side of an element. If space is not available, it will automatically search for a similar alternative position to use.</p>
-      <i class="circular heart icon link" data-content="Top Left" data-position="top left"></i>
-      <i class="circular heart icon link" data-content="Top Center" data-position="top center"></i>
-      <i class="circular heart icon link" data-content="Top Right" data-position="top right"></i>
-      <i class="circular heart icon link" data-content="Left Center" data-position="left center"></i>
-      <i class="circular heart icon link" data-content="Right Center" data-position="right center"></i>
-      <i class="circular heart icon link" data-content="Bottom Left" data-position="bottom left"></i>
-      <i class="circular heart icon link" data-content="Bottom Center" data-position="bottom center"></i>
-      <i class="circular heart icon link" data-content="Bottom Right" data-position="bottom right"></i>
+    <div class="ui segment">
+      <i class="square inverted red heart icon link" data-content="Top Left" data-position="top left"></i>
+      <i class="square inverted red heart icon link" data-content="Top Center" data-position="top center"></i>
+      <i class="square inverted red heart icon link" data-content="Top Right" data-position="top right"></i>
+      <i class="square inverted red heart icon link" data-content="Right Center" data-position="right center"></i>
+      <i class="square inverted red heart icon link" data-content="Bottom Right" data-position="bottom right"></i>
+      <i class="square inverted red heart icon link" data-content="Bottom Center" data-position="bottom center"></i>
+      <i class="square inverted red heart icon link" data-content="Bottom Left" data-position="bottom left"></i>
+      <i class="square inverted red heart icon link" data-content="Left Center" data-position="left center"></i>
+    </div>
   </div>
 
-  <div class="example segment">
-    <h4 class="ui header">Title</h4>
-    <p>A popup can be formatted with a title</p>
-    <i class="circular heart icon link" data-title="Dog Breeds" data-content="There are many types of dogs. We don't have time to list them all"></i>
-  </div>
+  <div class="example">
+    <h4 class="ui header">Specifying an offset</h4>
+    <p>A popup position can be adjusted manually by specifying an offset propery using <code>data-offset="value"</code></p>
 
-  <div class="example segment">
-    <h4 class="ui header">HTML</h4>
-    <p>A popup can be formatted with html</p>
-    <i class="circular heart icon link" data-html="<strike>I rescind my comment about cats</strike>"></i>
+    <i class="heart circular icon link" data-offset="50" data-content="As expected this popup is way off to the right"></i>
   </div>
 
+
   <div class="no example">
     <h4 class="ui header">Transitions</h4>
-    <p>A popup can have different <a href="/modules/transition.html">transitions</a>. Any transition with both an in and out animation can be specified. The following are just a few examples.</p>
-    <i class="heart icon fade link" data-content="This is a different transition"></i>
-    <br><br>
-    <div class="code" data-demo="true" data-title="Fade">
-    $('.fade.icon')
-      .popup('setting', 'transition', 'fade up')
-      .popup('toggle')
-    ;
-    </div>
-  </div>
-  <div class="no example">
-    <i class="heart icon slide link" data-content="This is a different transition"></i>
-    <br><br>
-    <div class="code" data-demo="true" data-title="Slide Up">
-    $('.slide.icon')
-      .popup('setting', 'transition', 'slide up')
-      .popup('toggle')
-    ;
+    <p>A popup can use any named ui transition.</p>
+    <i class="large demo home circular link icon" data-title="Home" data-content="The place where you keep your dog"></i> Home
+
+    <div class="ui divider"></div>
+
+    <div class="ui selection dropdown">
+      <input type="hidden" name="transition">
+      <i class="dropdown icon"></i>
+      <div class="default text">Choose a transition</div>
+      <div class="menu">
+        <div class="item">Horizontal Flip</div>
+        <div class="item">Vertical Flip</div>
+        <div class="item">Fade Up</div>
+        <div class="item">Fade</div>
+        <div class="item">Scale</div>
+      </div>
     </div>
-  </div>
-  <div class="no example">
-    <i class="heart icon flip link" data-content="This is a different transition"></i>
-    <br><br>
-    <div class="code" data-demo="true" data-title="Vertical Flip">
-    $('.flip.icon')
-      .popup('setting', 'transition', 'vertical flip')
-      .popup('toggle')
+    <div class="ui clearing divider"></div>
+    <div class="evaluated code">
+    $('.selection')
+      .dropdown({
+        onChange: function(value) {
+          $('.demo.icon')
+            .popup({
+              transition: value
+            })
+            .popup('toggle')
+          ;
+        }
+      })
     ;
     </div>
   </div>
 
+  <h2 class="ui dividing header">Behavior</h2>
 
-  <h2 class="ui header">Settings</h2>
-  <table class="ui red celled table segment">
+  All the following behaviors can be called using the syntax <code>$('.foo').sidebar('behavior name', argumentOne, argumentTwo)</code>
+
+  <table class="ui definition celled table segment">
+    <tr>
+      <td>attach events(selector, event)</td>
+      <td>Attaches sidebar action to given selector. Default event if none specified is toggle</td>
+    </tr>
+    <tr>
+      <td>show</td>
+      <td>Shows popup</td>
+    </tr>
+    <tr>
+      <td>hide</td>
+      <td>Hides popup</td>
+    </tr>
+    <tr>
+      <td>hide all</td>
+      <td>Hides all visible pop ups on the page</td>
+    </tr>
+    <tr>
+      <td>toggle</td>
+      <td>Toggles visibility of popup</td>
+    </tr>
+    <tr>
+      <td>is visible</td>
+      <td>Returns whether popup is visible</td>
+    </tr>
+    <tr>
+      <td>is hidden</td>
+      <td>Returns whether popup is hidden</td>
+    </tr>
+    <tr>
+      <td>exists</td>
+      <td>Returns whether popup is created and inserted into the page</td>
+    </tr>
+    <tr>
+      <td>set position</td>
+      <td>Repositions a popup</td>
+    </tr>
+    <tr>
+      <td>remove</td>
+      <td>Removes popup from the page</td>
+    </tr>
+  </table>
+
+  <h2 class="ui dividing header">Settings</h2>
+
+  <h3 class="ui header">
+    Popup Settings
+    <div class="sub header">Settings to configure popup behavior</div>
+  </h3>
+  <table class="ui red celled definition table segment">
     <thead>
-      <th colspan="3">Content</th>
+      <th>Setting</th>
+      <th class="four wide">Default</th>
+      <th>Description</th>
     </thead>
     <tbody>
       <tr>
-        <td colspan="2">content</td>
-        <td>Content to display</td>
+        <td>position</td>
+        <td>top center</td>
+        <td>Position that the popup should appear</td>
       </tr>
       <tr>
-        <td colspan="2">title</td>
-        <td>Title to display alongside content</td>
+        <td>inline</td>
+        <td>false</td>
+        <td>If a popup is inline it will be created next to current element, allowing for local css rules to apply. It will not be removed from the DOM after being hidden. Otherwise popups will appended to body and removed after being hidden.</td>
       </tr>
       <tr>
-        <td colspan="2">html</td>
-        <td>HTML content to display instead of preformatted title and content</td>
+        <td>preserve</td>
+        <td>false</td>
+        <td>Whether popup contents should be preserved in the page after being hidden, allowing it to re-appear slightly faster on subsequent loads.</td>
       </tr>
-    </tbody>
-  </table>
-  <table class="ui green celled table segment">
-    <thead>
-      <th colspan="3">Popup Settings</th>
-    </thead>
-    <tbody>
       <tr>
-        <td>inline</td>
-        <td>true</td>
-        <td>If a popup is inline it will be created next to current element, allowing for local css rules to apply. It will not be removed from the DOM after being hidden. Otherwise popups will appended to body and removed after being hidden.</td>
+        <td>on</td>
+        <td>hover</td>
+        <td>Event used to trigger popup. Can be either <b>focus, click or hover</b></td>
       </tr>
       <tr>
         <td>delay</td>
-        <td>0</td>
-        <td>Delay in milliseconds before showing a popup when using hover events.</td>
+        <td>150</td>
+        <td>Delay in milliseconds before showing a popup when using hover or focus events.</td>
       </tr>
       <tr>
-        <td>variation</td>
-        <td></td>
-        <td>Popup variation to use, can use multiple variations with a space delimiter</td>
+        <td>transition</td>
+        <td>
+          slide down
+        </td>
+        <td>Named transition to use when animating menu in and out. Fade and slide down are available without including <a href="/modules/transition.html">ui transitions</a></td>
       </tr>
       <tr>
-        <td>on</td>
-        <td>hover</td>
-        <td>Event used to invoke popup</td>
+        <td>duration</td>
+        <td>
+          250
+        </td>
+        <td>Duration of animation events</td>
       </tr>
       <tr>
-        <td>clickToClose</td>
+        <td>closable</td>
         <td>true</td>
-        <td>Whether clicking anywhere outside a popup should close it.</td>
+        <td>When using <code>on: 'click'</code> specifies whether clicking the page should close the popup</td>
       </tr>
       <tr>
-        <td>position</td>
-        <td>top center</td>
-        <td>Position that the popup should appear</td>
+        <td>target</td>
+        <td>false</td>
+        <td>If a selector or jQuery object is specified this allows the popup to be positioned relative to that element.</td>
       </tr>
       <tr>
         <td>distanceAway</td>
         <td>0</td>
-        <td>Distance away from element for the popup to appear.</td>
+        <td>Offset for distance of popup from element</td>
       </tr>
       <tr>
-        <td>arrowOffset</td>
+        <td>offset</td>
         <td>0</td>
-        <td>Offset to apply to arrow positioning of element</td>
+        <td>Offset in pixels from calculated position</td>
       </tr>
       <tr>
         <td>maxSearchDepth</td>
@@ -231,60 +347,112 @@ type        : 'UI Module'
     </tbody>
   </table>
 
-  <table class="ui blue celled table segment">
+  <h3 class="ui header">
+    Content Settings
+    <div class="sub header">Settings to specify popup contents</div>
+  </h3>
+  <table class="ui red celled definition table segment">
     <thead>
-      <th colspan="3">Animation</th>
+      <th>Setting</th>
+      <th>Description</th>
     </thead>
     <tbody>
       <tr>
-        <td>transition</td>
-        <td>scale</td>
-        <td>transition to use if transition module is included</td>
+        <td>variation</td>
+        <td>Popup variation to use, can use multiple variations with a space delimiter</td>
       </tr>
       <tr>
-        <td>duration</td>
-        <td>250</td>
-        <td>Duration of popup animation.</td>
+        <td>content</td>
+        <td>Content to display</td>
       </tr>
       <tr>
-        <td>easing</td>
-        <td>easeOutQuint</td>
-        <td>Easing equation for popup animation</td>
+        <td>title</td>
+        <td>Title to display alongside content</td>
+      </tr>
+      <tr>
+        <td>html</td>
+        <td>HTML content to display instead of preformatted title and content</td>
       </tr>
     </tbody>
   </table>
 
-  <table class="ui teal celled table segment">
+  <h3 class="ui header">
+    DOM Settings
+    <div class="sub header">DOM settings specify how this module should interface with the DOM</div>
+  </h3>
+  <table class="ui celled purple definition table segment">
     <thead>
-      <th colspan="3">Callbacks</th>
+      <th>Setting</th>
+      <th class="six wide">Default</th>
+      <th>Description</th>
     </thead>
     <tbody>
       <tr>
-        <td>onCreate</td>
-        <td>None</td>
-        <td>Callback after a popup html is generated.</td>
+        <td>namespace</td>
+        <td>popup</td>
+        <td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
+      </tr>
+      <tr>
+        <td>selector</td>
+        <td>
+          <div class="code">
+    selector    : {
+      popup    : '.ui.popup'
+    }
+          </div>
+        </td>
+        <td>DOM Selectors used internally</td>
       </tr>
       <tr>
-        <td>onShow</td>
-        <td>None</td>
-        <td>Callback after a popup section is shown.</td>
+        <td>metadata</td>
+        <td>
+          <div class="code">
+    metadata: {
+      content   : 'content',
+      html      : 'html',
+      offset    : 'offset',
+      position  : 'position',
+      title     : 'title',
+      variation : 'variation'
+    }
+          </div>
+        </td>
+        <td>HTML Data attributes used to store data</td>
       </tr>
       <tr>
-        <td>onHide</td>
-        <td>None</td>
-        <td>Callback after a popup section is hidden.</td>
+        <td>className</td>
+        <td>
+          <div class="code">
+    className   : {
+      loading     : 'loading',
+      popup       : 'ui popup',
+      position    : 'top left center bottom right',
+      visible     : 'visible'
+    }
+          </div>
+        </td>
+        <td>Class names used to attach style to state</td>
       </tr>
     </tbody>
   </table>
 
-  <table class="ui blue celled table segment">
+  <div class="ui horizontal divider"><i class="icon setting"></i></div>
+
+  <h3 class="ui header">
+    Debug Settings
+    <div class="sub header">Debug settings controls debug output to the console</div>
+  </h3>
+
+  <table class="ui blue celled definition table segment">
     <thead>
-      <th colspan="3">UI Module Settings</th>
+      <th>Setting</th>
+      <th class="four wide">Default</th>
+      <th>Description</th>
     </thead>
     <tbody>
       <tr>
-        <td>Name</td>
-        <td>Popup</td>
+        <td>name</td>
+        <td>Sidebar</td>
         <td>Name used in debug logs</td>
       </tr>
       <tr>
@@ -294,31 +462,29 @@ type        : 'UI Module'
       </tr>
       <tr>
         <td>performance</td>
-        <td>False</td>
-        <td>Provides performance output to console</td>
+        <td>True</td>
+        <td>Provides standard debug output to console</td>
       </tr>
       <tr>
         <td>verbose</td>
-        <td>False</td>
+        <td>True</td>
         <td>Provides ancillary debug output to console</td>
       </tr>
-      <tr>
-        <td>namespace</td>
-        <td>popup</td>
-        <td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
-      </tr>
       <tr>
         <td>errors</td>
         <td colspan="2">
           <div class="code">
-    errors : {
-      method : 'The method you called is not defined.'
+    error: {
+      content   : 'Your popup has no content specified',
+      method    : 'The method you called is not defined.',
+      recursion : 'Popup attempted to reposition element to fit, but could not find an adequate position.'
     }
           </div>
         </td>
       </tr>
     </tbody>
   </table>
+
 </div>
 </body>
 

server/files/javascript/semantic.js

@@ -656,7 +656,7 @@ semantic.ready = function() {
   $menuDropdown
     .dropdown({
       on         : 'hover',
-      action     : 'none'
+      action     : 'nothing'
     })
   ;
 

server/files/stylesheets/semantic.css

@@ -566,6 +566,54 @@ body.guide .main.container > * {
   padding: 1.5em 2em;
 }
 
+#example.popup .example .popup {
+  color: #FF0000;
+}
+#example .position.example .icon {
+  position: absolute;
+  margin: 0em;
+}
+#example .position.example .segment {
+  width: 250px;
+  height: 250px;
+}
+#example .position.example .segment .icon:nth-of-type(1) {
+  top: 3em;
+  left: 3em;
+}
+#example .position.example .segment .icon:nth-of-type(2) {
+  top: 3em;
+  left: 50%;
+  margin-left: -1em;
+}
+#example .position.example .segment .icon:nth-of-type(3) {
+  top: 3em;
+  right: 3em;
+}
+#example .position.example .segment .icon:nth-of-type(4) {
+  top: 50%;
+  margin-top: -1em;
+  right: 3em;
+}
+#example .position.example .segment .icon:nth-of-type(5) {
+  bottom: 3em;
+  right: 3em;
+}
+#example .position.example .segment .icon:nth-of-type(6) {
+  bottom: 3em;
+  left: 50%;
+  margin-left: -1em;
+}
+#example .position.example .segment .icon:nth-of-type(7) {
+  bottom: 3em;
+  left: 3em;
+}
+#example .position.example .segment .icon:nth-of-type(8) {
+  top: 50%;
+  margin-top: -1em;
+  left: 3em;
+}
+
 #example .main.ui.grid {
   position: relative;
 }

src/elements/label.less

@@ -266,11 +266,14 @@ a.ui.label:hover:before {
 
 .ui.ribbon.label {
   position: relative;
-  left: -1.8rem;
+  margin: 0em 0.2em;
+  left: -2rem;
   padding-left: 2rem;
   -webkit-border-radius: 0px 4px 4px 0px;
   -moz-border-radius: 0px 4px 4px 0px;
   border-radius: 0px 4px 4px 0px;
+
+  border-color: rgba(0, 0, 0, 0.15);
 }
 
 .ui.ribbon.label:after {
@@ -495,13 +498,13 @@ a.ui.label:hover:before {
 /* Hover */
 a.ui.black.labels .label:hover,
 a.ui.black.label:hover {
-  background-color: #888888 !important;
-  border-color: #888888 !important;
+  background-color: #333333 !important;
+  border-color: #333333 !important;
 }
 .ui.labels a.black.label:hover:before,
 .ui.black.labels a.label:hover:before,
 a.ui.black.label:hover:before {
-  background-color: #888888 !important;
+  background-color: #333333 !important;
 }
 
 /* Corner */
@@ -509,6 +512,10 @@ a.ui.black.label:hover:before {
 .ui.black.corner.label:hover {
   background-color: transparent !important;
 }
+/* Ribbon */
+.ui.black.ribbon.label {
+  border-color: #333333 !important;
+}
 
 
 /*--- Green ---*/
@@ -541,6 +548,10 @@ a.ui.green.label:hover:before {
 .ui.green.corner.label:hover {
   background-color: transparent !important;
 }
+/* Ribbon */
+.ui.green.ribbon.label {
+  border-color: #89B84C !important;
+}
 
 
 /*--- Red ---*/
@@ -573,6 +584,10 @@ a.ui.red.label:hover{
 a.ui.red.label:hover:before {
   background-color: #DE3859 !important;
 }
+/* Ribbon */
+.ui.red.ribbon.label {
+  border-color: #DE3859 !important;
+}
 
 
 /*--- Blue ---*/
@@ -605,6 +620,10 @@ a.ui.blue.label:hover:before {
 .ui.blue.corner.label:hover {
   background-color: transparent !important;
 }
+/* Ribbon */
+.ui.blue.ribbon.label {
+  border-color: #1AB8F3 !important;
+}
 
 /*--- Purple ---*/
 .ui.purple.labels .label,
@@ -636,6 +655,10 @@ a.ui.purple.label:hover:before {
 .ui.purple.corner.label:hover {
   background-color: transparent !important;
 }
+/* Ribbon */
+.ui.purple.ribbon.label {
+  border-color: #3E3773 !important;
+}
 
 /*--- Orange ---*/
 .ui.orange.labels .label,
@@ -667,11 +690,15 @@ a.ui.orange.label:hover:before {
 .ui.orange.corner.label:hover {
   background-color: transparent !important;
 }
+/* Ribbon */
+.ui.orange.ribbon.label {
+  border-color: #FF4121 !important;
+}
 
 
 
 
-/*--- Pink ---*/
+/*--- Teal ---*/
 .ui.teal.labels .label,
 .ui.teal.label {
   background-color: #00B5AD !important;
@@ -701,6 +728,10 @@ a.ui.teal.label:hover:before {
 .ui.teal.corner.label:hover {
   background-color: transparent !important;
 }
+/* Ribbon */
+.ui.teal.ribbon.label {
+  border-color: #009A93 !important;
+}
 
 /*-------------------
      Horizontal

src/modules/dropdown.js

@@ -222,7 +222,6 @@ $.fn.dropdown = function(parameters) {
               if( $choice.find(selector.menu).size() === 0 ) {
                 module.determine.selectAction(text, value);
                 $.proxy(settings.onChange, element)(value, text);
-                event.preventDefault();
               }
             }
 

src/modules/popup.js

@@ -15,6 +15,7 @@ $.fn.popup = function(parameters) {
   var
     $allModules     = $(this),
     $document       = $(document),
+    $body           = $('body'),
 
     moduleSelector  = $allModules.selector || '',
 
@@ -44,11 +45,17 @@ $.fn.popup = function(parameters) {
         moduleNamespace = 'module-' + namespace,
 
         $module         = $(this),
+        $target         = (settings.target)
+          ? $(settings.target)
+          : $module,
 
         $window         = $(window),
-        $offsetParent   = $module.offsetParent(),
+
+        $offsetParent   = (settings.inline)
+          ? $target.offsetParent()
+          : $window,
         $popup          = (settings.inline)
-          ? $module.next(settings.selector.popup)
+          ? $target.next(settings.selector.popup)
           : $window.children(settings.selector.popup).last(),
 
         searchDepth     = 0,
@@ -63,17 +70,20 @@ $.fn.popup = function(parameters) {
         // binds events
         initialize: function() {
           module.debug('Initializing module', $module);
-          if(settings.on == 'hover') {
+          if(settings.on == 'click') {
             $module
-              .on('mouseenter' + eventNamespace, module.event.mouseenter)
-              .on('mouseleave' + eventNamespace, module.event.mouseleave)
+              .on('click', module.toggle)
             ;
           }
           else {
             $module
-              .on(settings.on + '' + eventNamespace, module.event[settings.on])
+              .on(module.get.startEvent() + eventNamespace, module.event.start)
+              .on(module.get.endEvent() + eventNamespace, module.event.end)
             ;
           }
+          if(settings.target) {
+            module.debug('Target set to element', $target);
+          }
           $window
             .on('resize' + eventNamespace, module.event.resize)
           ;
@@ -89,11 +99,14 @@ $.fn.popup = function(parameters) {
         },
 
         refresh: function() {
-          $popup        = (settings.inline)
-            ? $module.next(selector.popup)
-            : $window.children(selector.popup).last()
-          ;
-          $offsetParent = $module.offsetParent();
+          if(settings.inline) {
+            $popup = $target.next(selector.popup);
+            $offsetParent = $target.offsetParent();
+          }
+          else {
+            console.log('found by refresh');
+            $popup = $window.children(selector.popup).last();
+          }
         },
 
         destroy: function() {
@@ -101,6 +114,9 @@ $.fn.popup = function(parameters) {
           $window
             .off(eventNamespace)
           ;
+          $popup
+            .remove()
+          ;
           $module
             .off(eventNamespace)
             .removeData(moduleNamespace)
@@ -108,30 +124,22 @@ $.fn.popup = function(parameters) {
         },
 
         event: {
-          mouseenter:  function(event) {
-            var element = this;
+          start:  function(event) {
             module.timer = setTimeout(function() {
-              $.proxy(module.toggle, element)();
-              if( $(element).hasClass(className.visible) ) {
-                event.stopPropagation();
+              if( module.is.hidden() ) {
+                module.show();
               }
             }, settings.delay);
           },
-          mouseleave:  function() {
+          end:  function() {
             clearTimeout(module.timer);
-            if( $module.is(':visible') ) {
+            if( module.is.visible() ) {
               module.hide();
             }
           },
-          click: function(event) {
-            $.proxy(module.toggle, this)();
-            if( $(this).hasClass(className.visible) ) {
-              event.stopPropagation();
-            }
-          },
           resize: function() {
-            if( $popup.is(':visible') ) {
-              module.position();
+            if( module.is.visible() ) {
+              module.set.position();
             }
           }
         },
@@ -166,7 +174,7 @@ $.fn.popup = function(parameters) {
             else {
               module.verbose('Appending popup element to body', $popup);
               $popup
-                .appendTo( $('body') )
+                .appendTo( $body )
               ;
             }
             $.proxy(settings.onCreate, $popup)();
@@ -176,6 +184,87 @@ $.fn.popup = function(parameters) {
           }
         },
 
+        // determines popup state
+        toggle: function() {
+          module.debug('Toggling pop-up');
+          if( module.is.hidden() ) {
+            module.hideAll();
+            module.show();
+          }
+          else {
+            module.hide();
+          }
+        },
+
+        show: function() {
+          module.debug('Showing pop-up', settings.transition);
+          if( !module.exists() ) {
+            module.create();
+          }
+          module.set.position();
+          $module
+            .addClass(className.visible)
+          ;
+          if(settings.transition && $.fn.transition !== undefined) {
+            $popup
+              .transition(settings.transition + ' in', settings.duration, module.bind.close)
+            ;
+          }
+          else {
+            $popup
+              .stop()
+              .fadeIn(settings.duration, settings.easing, module.bind.close)
+            ;
+          }
+          $.proxy(settings.onShow, $popup)();
+        },
+
+
+        hide: function() {
+          $module
+            .removeClass(className.visible)
+          ;
+          module.unbind.close();
+          if( module.is.visible() ) {
+            module.debug('Hiding pop-up');
+            if(settings.transition && $.fn.transition !== undefined) {
+              $popup
+                .transition(settings.transition + ' out', settings.duration, module.reset)
+              ;
+            }
+            else {
+              $popup
+                .stop()
+                .fadeOut(settings.duration, settings.easing, module.reset)
+              ;
+            }
+          }
+          $.proxy(settings.onHide, $popup)();
+        },
+
+        hideAll: function() {
+          $(selector.popup)
+            .filter(':visible')
+              .popup('hide')
+          ;
+        },
+
+        hideGracefully: function(event) {
+          // don't close on clicks inside popup
+          if( $(event.target).closest(selector.popup).size() === 0) {
+            module.hide();
+          }
+        },
+
+        exists: function() {
+          if(settings.inline) {
+            return ( $popup.size() !== 0 );
+          }
+          else {
+            return ( $popup.parent($body).size() );
+          }
+        },
+
         remove: function() {
           module.debug('Removing popup');
           $popup
@@ -184,6 +273,22 @@ $.fn.popup = function(parameters) {
         },
 
         get: {
+          startEvent: function() {
+            if(settings.on == 'hover') {
+              return 'mouseenter';
+            }
+            else if(settings.on == 'focus') {
+              return 'focus';
+            }
+          },
+          endEvent: function() {
+            if(settings.on == 'hover') {
+              return 'mouseleave';
+            }
+            else if(settings.on == 'focus') {
+              return 'blur';
+            }
+          },
           offstagePosition: function() {
             var
               boundary  = {
@@ -251,229 +356,184 @@ $.fn.popup = function(parameters) {
           }
         },
 
-        // determines popup state
-        toggle: function() {
-          $module = $(this);
-          module.debug('Toggling pop-up');
-          // refresh state of module
-          module.refresh();
-          if( !$module.hasClass(className.visible) ) {
-            if(settings.on == 'click') {
-              module.hideAll();
-            }
-            module.show();
-          }
-          else {
-            // module.hide();
-          }
-        },
+        set: {
+          position: function(position, arrowOffset) {
+            var
+              windowWidth  = $(window).width(),
+              windowHeight = $(window).height(),
 
-        position: function(position, arrowOffset) {
-          var
-            windowWidth  = $(window).width(),
-            windowHeight = $(window).height(),
-            width        = $module.outerWidth(),
-            height       = $module.outerHeight(),
-            popupWidth   = $popup.width(),
-            popupHeight  = $popup.outerHeight(),
-
-            offset       = (settings.inline)
-              ? $module.position()
-              : $module.offset(),
-            parentWidth  = (settings.inline)
-              ? $offsetParent.outerWidth()
-              : $window.outerWidth(),
-            parentHeight = (settings.inline)
-              ? $offsetParent.outerHeight()
-              : $window.outerHeight(),
-
-            positioning,
-            offstagePosition
-          ;
-          position    = position    || $module.data(metadata.position)    || settings.position;
-          arrowOffset = arrowOffset || $module.data(metadata.arrowOffset) || settings.arrowOffset;
-          module.debug('Calculating offset for position', position);
-          switch(position) {
-            case 'top left':
-              positioning = {
-                bottom :  parentHeight - offset.top + settings.distanceAway,
-                right  :  parentWidth - offset.left - width - arrowOffset,
-                top    : 'auto',
-                left   : 'auto'
-              };
-            break;
-            case 'top center':
-              positioning = {
-                bottom :  parentHeight - offset.top + settings.distanceAway,
-                left   : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset,
-                top    : 'auto',
-                right  : 'auto'
-              };
-            break;
-            case 'top right':
-              positioning = {
-                top    : 'auto',
-                bottom :  parentHeight - offset.top + settings.distanceAway,
-                left   : offset.left + arrowOffset
-              };
-            break;
-            case 'left center':
-              positioning = {
-                top    :  offset.top + (height / 2) - (popupHeight / 2),
-                right  : parentWidth - offset.left + settings.distanceAway - arrowOffset,
-                left   : 'auto',
-                bottom : 'auto'
-              };
-            break;
-            case 'right center':
-              positioning = {
-                top    :  offset.top + (height / 2) - (popupHeight / 2),
-                left   : offset.left + width + settings.distanceAway + arrowOffset,
-                bottom : 'auto',
-                right  : 'auto'
-              };
-            break;
-            case 'bottom left':
-              positioning = {
-                top    :  offset.top + height + settings.distanceAway,
-                right  : parentWidth - offset.left - width - arrowOffset,
-                left   : 'auto',
-                bottom : 'auto'
-              };
-            break;
-            case 'bottom center':
-              positioning = {
-                top    :  offset.top + height + settings.distanceAway,
-                left   : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset,
-                bottom : 'auto',
-                right  : 'auto'
-              };
-            break;
-            case 'bottom right':
-              positioning = {
-                top    :  offset.top + height + settings.distanceAway,
-                left   : offset.left + arrowOffset,
-                bottom : 'auto',
-                right  : 'auto'
-              };
-            break;
-          }
-          // true width on popup, avoid rounding error
-          $.extend(positioning, {
-            width: $popup.width() + 1
-          });
-          // tentatively place on stage
-          $popup
-            .css(positioning)
-            .removeClass(className.position)
-            .addClass(position)
-          ;
-          // check if is offstage
-          offstagePosition = module.get.offstagePosition();
-          // recursively find new positioning
-          if(offstagePosition) {
-            module.debug('Element is outside boundaries ', offstagePosition);
-            if(searchDepth < settings.maxSearchDepth) {
-              position = module.get.nextPosition(position);
-              searchDepth++;
-              module.debug('Trying new position: ', position);
-              return module.position(position);
-            }
-            else {
-              module.error(error.recursion);
-              searchDepth = 0;
-              return false;
-            }
-          }
-          else {
-            module.debug('Position is on stage', position);
-            searchDepth = 0;
-            return true;
-          }
-        },
+              width        = $target.outerWidth(),
+              height       = $target.outerHeight(),
 
-        show: function() {
-          module.debug('Showing pop-up', settings.transition);
-          if($popup.size() === 0) {
-            module.create();
-          }
-          module.position();
-          $module
-            .addClass(className.visible)
-          ;
-          if(settings.transition && $.fn.transition !== undefined) {
-            $popup
-              .transition(settings.transition + ' in', settings.duration)
+              popupWidth   = $popup.width(),
+              popupHeight  = $popup.outerHeight(),
+
+              parentWidth  = $offsetParent.outerWidth(),
+              parentHeight = $offsetParent.outerHeight(),
+
+              distanceAway = settings.distanceAway,
+
+              offset       = (settings.inline)
+                ? $target.position()
+                : $target.offset(),
+
+              positioning,
+              offstagePosition
             ;
-          }
-          else {
+            position    = position    || $module.data(metadata.position)    || settings.position;
+            arrowOffset = arrowOffset || $module.data(metadata.offset)      || settings.offset;
+            // adjust for margin when inline
+            if(settings.inline) {
+              if(position == 'left center' || position == 'right center') {
+                arrowOffset  += parseInt( window.getComputedStyle(element).getPropertyValue('margin-top'), 10);
+                distanceAway += -parseInt( window.getComputedStyle(element).getPropertyValue('margin-left'), 10);
+              }
+              else {
+                arrowOffset  += parseInt( window.getComputedStyle(element).getPropertyValue('margin-left'), 10);
+                distanceAway += parseInt( window.getComputedStyle(element).getPropertyValue('margin-top'), 10);
+              }
+            }
+            module.debug('Calculating offset for position', position);
+            switch(position) {
+              case 'top left':
+                positioning = {
+                  bottom :  parentHeight - offset.top + distanceAway,
+                  right  :  parentWidth - offset.left - arrowOffset,
+                  top    : 'auto',
+                  left   : 'auto'
+                };
+              break;
+              case 'top center':
+                positioning = {
+                  bottom :  parentHeight - offset.top + distanceAway,
+                  left   : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset,
+                  top    : 'auto',
+                  right  : 'auto'
+                };
+              break;
+              case 'top right':
+                positioning = {
+                  top    : 'auto',
+                  bottom :  parentHeight - offset.top + distanceAway,
+                  left   : offset.left + width + arrowOffset,
+                  right  : 'auto'
+                };
+              break;
+              case 'left center':
+                positioning = {
+                  top    :  offset.top + (height / 2) - (popupHeight / 2) + arrowOffset,
+                  right  : parentWidth - offset.left + distanceAway,
+                  left   : 'auto',
+                  bottom : 'auto'
+                };
+              break;
+              case 'right center':
+                positioning = {
+                  top    :  offset.top + (height / 2) - (popupHeight / 2) + arrowOffset,
+                  left   : offset.left + width + distanceAway,
+                  bottom : 'auto',
+                  right  : 'auto'
+                };
+              break;
+              case 'bottom left':
+                positioning = {
+                  top    :  offset.top + height + distanceAway,
+                  right  : parentWidth - offset.left - arrowOffset,
+                  left   : 'auto',
+                  bottom : 'auto'
+                };
+              break;
+              case 'bottom center':
+                positioning = {
+                  top    :  offset.top + height + distanceAway,
+                  left   : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset,
+                  bottom : 'auto',
+                  right  : 'auto'
+                };
+              break;
+              case 'bottom right':
+                positioning = {
+                  top    :  offset.top + height + distanceAway,
+                  left   : offset.left + width + arrowOffset,
+                  bottom : 'auto',
+                  right  : 'auto'
+                };
+              break;
+            }
+            // tentatively place on stage
             $popup
-              .stop()
-              .fadeIn(settings.duration, settings.easing)
-            ;
-          }
-          if(settings.on == 'click' && settings.clicktoClose) {
-            module.debug('Binding popup close event');
-            $document
-              .on('click.' + namespace, module.gracefully.hide)
+              .css(positioning)
+              .removeClass(className.position)
+              .addClass(position)
             ;
+            // check if is offstage
+            offstagePosition = module.get.offstagePosition();
+
+            // recursively find new positioning
+            if(offstagePosition) {
+              module.debug('Element is outside boundaries', offstagePosition);
+              if(searchDepth < settings.maxSearchDepth) {
+                position = module.get.nextPosition(position);
+                searchDepth++;
+                module.debug('Trying new position', position);
+                return module.set.position(position);
+              }
+              else {
+                module.error(error.recursion);
+                searchDepth = 0;
+                return false;
+              }
+            }
+            else {
+              module.debug('Position is on stage', position);
+              searchDepth = 0;
+              return true;
+            }
           }
-          $.proxy(settings.onShow, $popup)();
-        },
 
-        hideAll: function() {
-          $(selector.popup)
-            .filter(':visible')
-              .popup('hide')
-          ;
         },
 
-        hide: function() {
-          $module
-            .removeClass(className.visible)
-          ;
-          if($popup.is(':visible') ) {
-            module.debug('Hiding pop-up');
-            if(settings.transition && $.fn.transition !== undefined) {
-              $popup
-                .transition(settings.transition + ' out', settings.duration, module.reset)
+        bind: {
+          close:function() {
+            if(settings.on == 'click' && settings.closable) {
+              module.verbose('Binding popup close event to document');
+              $document
+                .on('click' + eventNamespace, module.hideGracefully)
               ;
             }
-            else {
-              $popup
-                .stop()
-                .fadeOut(settings.duration, settings.easing, module.reset)
+          }
+        },
+
+        unbind: {
+          close: function() {
+            if(settings.on == 'click' && settings.closable) {
+              module.verbose('Removing close event from document');
+              $document
+                .off('click' + eventNamespace)
               ;
             }
           }
-          if(settings.on == 'click' && settings.clicktoClose) {
-            $document
-              .off('click.' + namespace)
-            ;
+        },
+
+        is: {
+          visible: function() {
+            return $popup.is(':visible');
+          },
+          hidden: function() {
+            return !module.is.visible();
           }
-          $.proxy(settings.onHide, $popup)();
         },
 
         reset: function() {
-          module.verbose('Resetting inline styles');
           $popup
             .attr('style', '')
             .removeAttr('style')
           ;
-          if(!settings.inline) {
+          if(!settings.preserve) {
             module.remove();
           }
         },
 
-        gracefully: {
-          hide: function(event) {
-            // don't close on clicks inside popup
-            if( $(event.target).closest(selector.popup).size() === 0) {
-              module.hide();
-            }
-          }
-        },
-
         setting: function(name, value) {
           if(value !== undefined) {
             if( $.isPlainObject(name) ) {
@@ -661,7 +721,7 @@ $.fn.popup.settings = {
   performance    : true,
   namespace      : 'popup',
 
-  onCreate         : function(){},
+  onCreate       : function(){},
   onShow         : function(){},
   onHide         : function(){},
 
@@ -671,18 +731,20 @@ $.fn.popup.settings = {
   title          : false,
 
   on             : 'hover',
-  clicktoClose   : true,
+  target         : false,
+  closable       : true,
 
   position       : 'top center',
   delay          : 150,
-  inline         : true,
+  inline         : false,
+  preserve       : false,
 
-  duration       : 150,
+  duration       : 250,
   easing         : 'easeOutQuint',
   transition     : 'scale',
 
   distanceAway   : 0,
-  arrowOffset    : 0,
+  offset         : 0,
   maxSearchDepth : 10,
 
   error: {
@@ -692,19 +754,19 @@ $.fn.popup.settings = {
   },
 
   metadata: {
-    arrowOffset : 'arrowOffset',
-    content     : 'content',
-    html        : 'html',
-    position    : 'position',
-    title       : 'title',
-    variation   : 'variation'
+    content   : 'content',
+    html      : 'html',
+    offset    : 'offset',
+    position  : 'position',
+    title     : 'title',
+    variation : 'variation'
   },
 
   className   : {
-    popup       : 'ui popup',
-    visible     : 'visible',
     loading     : 'loading',
-    position    : 'top left center bottom right'
+    popup       : 'ui popup',
+    position    : 'top left center bottom right',
+    visible     : 'visible'
   },
 
   selector    : {

src/modules/popup.less

@@ -20,7 +20,7 @@
   right: 0px;
   z-index: 900;
 
-  border: 1px solid #DCDDDE;
+  border: 1px solid rgba(0, 0, 0, 0.1);
   max-width: 250px;
   background-color: #FFFFFF;
 
@@ -34,9 +34,9 @@
   -moz-border-radius: 0.2em;
   border-radius: 0.2em;
 
-  -webkit-box-shadow: 0px 1px 1px #DCDDDE;
-  -moz-box-shadow: 0px 1px 1px #DCDDDE;
-  box-shadow: 0px 1px 1px #DCDDDE;
+  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
 }
 .ui.popup .header {
   padding: 0em 0em 0.5em;
@@ -66,9 +66,9 @@
   -ms-box-sizing: border-box;
   box-sizing: border-box;
 
-  -webkit-box-shadow: 1px 1px 1px #DCDDDE;
-  -moz-box-shadow: 1px 1px 1px #DCDDDE;
-  box-shadow: 1px 1px 1px #DCDDDE;
+  -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
 }
 
 .ui.popup .ui.button {
@@ -113,13 +113,13 @@
   left: 50%;
   right: auto;
   bottom: auto;
-  -webkit-box-shadow: -1px -1px 1px #dcddde;
-  -moz-box-shadow: -1px -1px 1px #dcddde;
-  box-shadow: -1px -1px 1px #dcddde;
+  -webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
 }
 
 .ui.bottom.left.popup {
-  margin-right: -0.8em;
+  margin-right: -2em;
 }
 .ui.bottom.left.popup:before {
   top: -0.4em;
@@ -127,13 +127,13 @@
   bottom: auto;
   left: auto;
   margin-left: 0em;
-  -webkit-box-shadow: -1px -1px 1px #dcddde;
-  -moz-box-shadow: -1px -1px 1px #dcddde;
-  box-shadow: -1px -1px 1px #dcddde;
+  -webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
 }
 
 .ui.bottom.right.popup {
-  margin-left: -0.8em;
+  margin-left: -2em;
 }
 .ui.bottom.right.popup:before {
   top: -0.4em;
@@ -141,9 +141,9 @@
   right: auto;
   bottom: auto;
   margin-left: 0em;
-  -webkit-box-shadow: -1px -1px 1px #dcddde;
-  -moz-box-shadow: -1px -1px 1px #dcddde;
-  box-shadow: -1px -1px 1px #dcddde;
+  -webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
 }
 
 /*--- Above ---*/
@@ -155,7 +155,7 @@
   margin-left: -0.4em;
 }
 .ui.top.left.popup {
-  margin-right: -0.8em;
+  margin-right: -2em;
 }
 .ui.top.left.popup:before {
   bottom: -0.4em;
@@ -165,7 +165,7 @@
   margin-left: 0em;
 }
 .ui.top.right.popup {
-  margin-left: -0.8em;
+  margin-left: -2em;
 }
 .ui.top.right.popup:before {
   bottom: -0.4em;
@@ -182,9 +182,9 @@
   bottom: auto;
   left: auto;
   margin-top: -0.4em;
-  -moz-box-shadow: 1px -1px 1px #dcddde;
-  -webkit-box-shadow: 1px -1px 1px #dcddde;
-  box-shadow: 1px -1px 1px #dcddde;
+  -moz-box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
 }
 
 /*--- Right Center  ---*/
@@ -194,9 +194,9 @@
   bottom: auto;
   right: auto;
   margin-top: -0.4em;
-  -moz-box-shadow: -1px 1px 1px #dcddde;
-  -webkit-box-shadow: -1px 1px 1px #dcddde;
-  box-shadow: -1px 1px 1px #dcddde;
+  -moz-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
 }
 
 /*******************************