fomantic-ui 2.9.0-beta.288 → 2.9.0-beta.290

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fomantic-ui",
-  "version": "2.9.0-beta.288+67ede73",
+  "version": "2.9.0-beta.290+9631798",
   "description": "Fomantic empowers designers and developers by creating a shared vocabulary for UI.",
   "keywords": [
     "fomantic-ui",

package/src/definitions/behaviors/api.js

@@ -65,7 +65,7 @@ $.api = $.fn.api = function(parameters) {
 
         // context used for state
         $context        = (settings.stateContext)
-          ? $(settings.stateContext)
+          ? ([window,document].indexOf(settings.stateContext) < 0 ? $(document).find(settings.stateContext) : $(settings.stateContext))
           : $module,
 
         // request details

package/src/definitions/behaviors/form.js

@@ -1217,7 +1217,7 @@ $.fn.form = function(parameters) {
               if(settings.errorFocus && ignoreCallbacks !== true) {
                 var focusElement, hasTabIndex = true;
                 if (typeof settings.errorFocus === 'string') {
-                  focusElement = $(settings.errorFocus);
+                  focusElement = $(document).find(settings.errorFocus);
                   hasTabIndex = focusElement.is('[tabindex]');
                   // to be able to focus/scroll into non input elements we need a tabindex
                   if (!hasTabIndex) {

package/src/definitions/behaviors/state.js

@@ -74,7 +74,7 @@ $.fn.state = function(parameters) {
 
           // bind events with delegated events
           if(settings.context && moduleSelector !== '') {
-            $(settings.context)
+            ([window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context))
               .on(moduleSelector, 'mouseenter' + eventNamespace, module.change.text)
               .on(moduleSelector, 'mouseleave' + eventNamespace, module.reset.text)
               .on(moduleSelector, 'click'      + eventNamespace, module.toggle.state)

package/src/definitions/behaviors/visibility.js

@@ -58,7 +58,7 @@ $.fn.visibility = function(parameters) {
         $window         = $(window),
 
         $module         = $(this),
-        $context        = $(settings.context),
+        $context        = [window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context),
 
         $placeholder,
 

package/src/definitions/modules/calendar.js

@@ -803,7 +803,7 @@ $.fn.calendar = function(parameters) {
               return null;
             }
             if (!(selector instanceof $)) {
-              selector = $(selector).first();
+              selector = $(document).find(selector).first();
             }
             //assume range related calendars are using the same namespace
             return selector.data(moduleNamespace);

package/src/definitions/modules/dropdown.js

@@ -61,7 +61,7 @@ $.fn.dropdown = function(parameters) {
         moduleNamespace = 'module-' + namespace,
 
         $module         = $(this),
-        $context        = $(settings.context),
+        $context        = [window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context),
         $text           = $module.find(selector.text),
         $search         = $module.find(selector.search),
         $sizer          = $module.find(selector.sizer),
@@ -2917,7 +2917,7 @@ $.fn.dropdown = function(parameters) {
             $('<option/>')
               .prop('value', escapedValue)
               .addClass(className.addition)
-              .html(value)
+              .text(value)
               .appendTo($input)
             ;
             module.verbose('Adding user addition as an <option>', value);

package/src/definitions/modules/modal.js

@@ -65,7 +65,7 @@ $.fn.modal = function(parameters) {
         moduleNamespace = 'module-' + namespace,
 
         $module         = $(this),
-        $context        = $(settings.context),
+        $context        = [window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context),
         $closeIcon      = $module.find(selector.closeIcon),
         $inputs,
 
@@ -124,7 +124,7 @@ $.fn.modal = function(parameters) {
                   click = el[fields.click] && $.isFunction(el[fields.click]) ? el[fields.click] : function () {};
               $actions.append($('<button/>', {
                 html: icon + text,
-                'aria-label': $('<div>'+(el[fields.text] || el[fields.icon] || '')+'</div>').text(),
+                'aria-label': (el[fields.text] || el[fields.icon] || '').replace(/<[^>]+(>|$)/g,''),
                 class: className.button + ' ' + cls,
                 click: function () {
                   var button = $(this);

package/src/definitions/modules/nag.js

@@ -53,7 +53,7 @@ $.fn.nag = function(parameters) {
         $module         = $(this),
 
         $context        = (settings.context)
-          ? $(settings.context)
+          ? ([window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context))
           : $('body'),
 
         element         = this,

package/src/definitions/modules/popup.js

@@ -62,11 +62,11 @@ $.fn.popup = function(parameters) {
         moduleNamespace    = 'module-' + namespace,
 
         $module            = $(this),
-        $context           = $(settings.context),
-        $scrollContext     = $(settings.scrollContext),
-        $boundary          = $(settings.boundary),
+        $context           = [window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context),
+        $scrollContext     = [window,document].indexOf(settings.scrollContext) < 0 ? $(document).find(settings.scrollContext) : $(settings.scrollContext),
+        $boundary          = [window,document].indexOf(settings.boundary) < 0 ? $(document).find(settings.boundary) : $(settings.boundary),
         $target            = (settings.target)
-          ? $(settings.target)
+          ? ([window,document].indexOf(settings.target) < 0 ? $(document).find(settings.target) : $(settings.target))
           : $module,
 
         $popup,
@@ -121,8 +121,8 @@ $.fn.popup = function(parameters) {
         },
 
         refresh: function() {
-          if(settings.popup) {
-            $popup = $(settings.popup).eq(0);
+          if(settings.popup && typeof settings.popup === 'string') {
+            $popup = $(document).find(settings.popup).eq(0);
           }
           else {
             if(settings.inline) {
@@ -286,8 +286,8 @@ $.fn.popup = function(parameters) {
             }
             settings.onCreate.call($popup, element);
           }
-          else if(settings.popup) {
-            $(settings.popup).data(metadata.activator, $module);
+          else if(settings.popup && typeof settings.popup === 'string') {
+            $(document).find(settings.popup).data(metadata.activator, $module);
             module.verbose('Used popup specified in settings');
             module.refresh();
             if(settings.hoverable) {
@@ -368,7 +368,7 @@ $.fn.popup = function(parameters) {
         },
 
         hideAll: function() {
-          $(selector.popup)
+          $(document).find(selector.popup)
             .filter('.' + className.popupVisible)
             .each(function() {
               $(this)

package/src/definitions/modules/sidebar.js

@@ -66,7 +66,7 @@ $.fn.sidebar = function(parameters) {
         moduleNamespace = 'module-' + namespace,
 
         $module         = $(this),
-        $context        = $(settings.context),
+        $context        = [window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context),
 
         $sidebars       = $module.children(selector.sidebar),
         $fixed          = $context.children(selector.fixed),
@@ -294,7 +294,7 @@ $.fn.sidebar = function(parameters) {
 
         refresh: function() {
           module.verbose('Refreshing selector cache');
-          $context  = $(settings.context);
+          $context  = [window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context);
           $sidebars = $context.children(selector.sidebar);
           $pusher   = $context.children(selector.pusher);
           $fixed    = $context.children(selector.fixed);

package/src/definitions/modules/sticky.js

@@ -53,7 +53,7 @@ $.fn.sticky = function(parameters) {
 
         $module               = $(this),
         $window               = $(window),
-        $scroll               = $(settings.scrollContext),
+        $scroll               = [window,document].indexOf(settings.scrollContext) < 0 ? $(document).find(settings.scrollContext) : $(settings.scrollContext),
         $container,
         $context,
 
@@ -139,7 +139,7 @@ $.fn.sticky = function(parameters) {
 
         determineContainer: function() {
           if(settings.container) {
-            $container = $(settings.container);
+            $container = [window,document].indexOf(settings.container) < 0 ? $(document).find(settings.container) : $(settings.container);
           }
           else {
             $container = $module.offsetParent();
@@ -148,7 +148,7 @@ $.fn.sticky = function(parameters) {
 
         determineContext: function() {
           if(settings.context) {
-            $context = $(settings.context);
+            $context = [window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context);
           }
           else {
             $context = $container;

package/src/definitions/modules/tab.js

@@ -162,7 +162,7 @@ $.fn.tab = function(parameters) {
             module.verbose('Determined parent element for creating context', $context);
           }
           else if(settings.context) {
-            $context = $(settings.context);
+            $context = [window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context);
             module.verbose('Using selector for tab context', settings.context, $context);
           }
           else {

package/src/definitions/modules/toast.js

@@ -61,7 +61,7 @@ $.fn.toast = function(parameters) {
         $animationObject,
         $close,
         $context         = (settings.context)
-          ? $(settings.context)
+          ? ([window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context))
           : $('body'),
 
         isToastComponent = $module.hasClass('toast') || $module.hasClass('message') || $module.hasClass('card'),
@@ -246,7 +246,7 @@ $.fn.toast = function(parameters) {
                   click = el[fields.click] && $.isFunction(el[fields.click]) ? el[fields.click] : function () {};
                 $actions.append($('<button/>', {
                   html: icon + text,
-                  'aria-label': $('<div>'+(el[fields.text] || el[fields.icon] || '')+'</div>').text(),
+                  'aria-label': (el[fields.text] || el[fields.icon] || '').replace(/<[^>]+(>|$)/g,''),
                   class: className.button + ' ' + cls,
                   click: function () {
                     var button = $(this);

package/src/theme.less

@@ -60,8 +60,19 @@
        Fonts
 -------------------*/
 
-.loadFonts() when (@importGoogleFonts) {
-  @import (css) url('@{googleProtocol}fonts.googleapis.com/css2?family=@{googleFontRequest}');
+.loadFonts() {
+  & when (@importGoogleFonts) {
+    @import (css) url('@{googleProtocol}fonts.googleapis.com/css2?family=@{googleFontRequest}');
+  }
+  & when (@importFonts) and not (@fontName = ''){
+    each(@fonts, {
+      @font-face {
+        each(@value,{
+            @{key}: @value;
+        });
+      }
+    })
+  }
 }
 
 /*------------------

package/src/themes/amazon/globals/site.variables

@@ -9,6 +9,7 @@
 @fontSize : 13px;
 @fontName : 'Arial';
 @importGoogleFonts : false;
+@importFonts: false;
 
 @h1: 2.25em;
 

package/src/themes/default/globals/site.variables

@@ -3,18 +3,113 @@
 *******************************/
 
 @import "variation.variables";
+@supportIE: true;
 
 /*-------------------
        Fonts
 --------------------*/
 
 @fontName          : 'Lato';
-
-@headerFont        : @fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif;
-@pageFont          : @fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+@fontFileNameLatin : 'LatoLatin';
+@fontFileNameSupplement: 'Lato';
+
+// based on https://github.com/twbs/bootstrap/blob/v5.1.3/scss/_variables.scss#L577 list
+@fallbackFonts     : system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+@headerFont        : @fontName, @fallbackFonts;
+@pageFont          : @fontName, @fallbackFonts;
+
+@fontDisplay            : swap;
+@textRendering          : optimizeLegibility;
+@unicodeRangeLatin      : U+0000, U+000D, U+0020-007E, U+00A0-017F, U+0192, U+0218-021B, U+0237, U+02C6-02C7, U+02C9, U+02D8-02DD, U+0394, U+03A9, U+03BC, U+03C0, U+1E80-1E85, U+2010, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20A3-20A4, U+20A7, U+20AC, U+2113, U+2122, U+2126, U+212E, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+F8FF, U+FB00-FB04;
+@unicodeRangeSupplement : U+0180-0191, U+0193-0217, U+021C-0236, U+0238-02C5, U+02C8, U+02CA-02D7, U+02DE-036F, U+0374-0375, U+037A-037E, U+0384-038A, U+038C, U+038E-0393, U+0395-03A1, U+03A3-03A8, U+03AA-03BB, U+03BD-03BF, U+03C1-03CE, U+03D0-0486, U+0488-0513, U+1D00-1DCA, U+1DFE-1E7F, U+1E86-1E9B, U+1E9E, U+1EA0-1EF9, U+1F00-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE, U+2000-200F, U+2012, U+2015-2017, U+201B, U+201F, U+202F, U+2034, U+203C-203E, U+205E-205F, U+2070-2071, U+2074-2094, U+20A0-20A2, U+20A5-20A6, U+20A8-20AB, U+20AD-20B5, U+20B8-20BA, U+20DD, U+2105, U+2116-2117, U+2120, U+2132, U+214D-214E, U+2153-215F, U+2183-2184, U+2190-2199, U+21A8, U+221F, U+2229, U+2261, U+2302, U+2310, U+2320-2321, U+2460-2473, U+24EA-24F4, U+24FF-2500, U+2502, U+250C, U+2510, U+2514, U+2518, U+2C60-2C6C, U+2C74-2C77;
+
+@importFonts            : true;
+@fonts: {
+        @regularLatin: {
+                font-family: @fontName;
+                src: url("@{fontPath}/@{fontFileNameLatin}-Regular.woff2") format('woff2')
+                     if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameLatin}-Regular.woff") format('woff'));
+                font-style     : normal;
+                font-weight    : @normal;
+                font-display   : @fontDisplay;
+                text-rendering : @textRendering;
+                unicode-range  : @unicodeRangeLatin;
+        };
+        @boldLatin: {
+                font-family: @fontName;
+                src: url("@{fontPath}/@{fontFileNameLatin}-Bold.woff2") format('woff2')
+                     if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameLatin}-Bold.woff") format('woff'));
+                font-style     : normal;
+                font-weight    : @bold;
+                font-display   : @fontDisplay;
+                text-rendering : @textRendering;
+                unicode-range  : @unicodeRangeLatin;
+        };
+        @italicLatin: {
+                font-family: @fontName;
+                src: url("@{fontPath}/@{fontFileNameLatin}-Italic.woff2") format('woff2')
+                     if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameLatin}-Italic.woff") format('woff'));
+                font-style     : italic;
+                font-weight    : @normal;
+                font-display   : @fontDisplay;
+                text-rendering : @textRendering;
+                unicode-range  : @unicodeRangeLatin;
+        };
+        @boldItalicLatin: {
+                font-family: @fontName;
+                src: url("@{fontPath}/@{fontFileNameLatin}-BoldItalic.woff2") format('woff2')
+                     if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameLatin}-BoldItalic.woff") format('woff'));
+                font-style     : italic;
+                font-weight    : @bold;
+                font-display   : @fontDisplay;
+                text-rendering : @textRendering;
+                unicode-range  : @unicodeRangeLatin;
+        };
+        @regularSupplement: {
+                font-family: @fontName;
+                src: url("@{fontPath}/@{fontFileNameSupplement}-Regular.woff2") format('woff2')
+                     if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameSupplement}-Regular.woff") format('woff'));
+                font-style     : normal;
+                font-weight    : @normal;
+                font-display   : @fontDisplay;
+                text-rendering : @textRendering;
+                unicode-range  : @unicodeRangeSupplement;
+        };
+        @boldSupplement: {
+                font-family: @fontName;
+                src: url("@{fontPath}/@{fontFileNameSupplement}-Bold.woff2") format('woff2')
+                     if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameSupplement}-Bold.woff") format('woff'));
+                font-style     : normal;
+                font-weight    : @bold;
+                font-display   : @fontDisplay;
+                text-rendering : @textRendering;
+                unicode-range  : @unicodeRangeSupplement;
+        };
+        @italicSupplement: {
+                font-family: @fontName;
+                src: url("@{fontPath}/@{fontFileNameSupplement}-Italic.woff2") format('woff2')
+                     if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameSupplement}-Italic.woff") format('woff'));
+                font-style     : italic;
+                font-weight    : @normal;
+                font-display   : @fontDisplay;
+                text-rendering : @textRendering;
+                unicode-range  : @unicodeRangeSupplement;
+        };
+        @boldItalicSupplement: {
+                font-family: @fontName;
+                src: url("@{fontPath}/@{fontFileNameSupplement}-BoldItalic.woff2") format('woff2')
+                     if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameSupplement}-BoldItalic.woff") format('woff'));
+                font-style     : italic;
+                font-weight    : @bold;
+                font-display   : @fontDisplay;
+                text-rendering : @textRendering;
+                unicode-range  : @unicodeRangeSupplement;
+        };
+};
 
 @googleFontName    : @fontName;
-@importGoogleFonts : true;
+@importGoogleFonts : false;
 @googleFontSizes   : 'ital,wght@0,400%3B0,700%3B1,400%3B1,700';
 @googleSubset      : 'latin';
 @googleFontDisplay : 'swap';
@@ -1303,10 +1398,10 @@
 @brownTertiaryColorHover     : desaturate(@brownHover, 20%);
 @brownTertiaryColorFocus     : desaturate(@brownFocus, 20%);
 @brownTertiaryColorActive    : saturate(@brownActive, 20%);
-@greyTertiaryColor           : saturate(@grey, 20%);
-@greyTertiaryColorHover      : desaturate(@greyHover, 20%);
-@greyTertiaryColorFocus      : desaturate(@greyFocus, 20%);
-@greyTertiaryColorActive     : saturate(@greyActive, 20%);
+@greyTertiaryColor           : darken(@grey, 5%);
+@greyTertiaryColorHover      : lighten(@greyHover, 5%);
+@greyTertiaryColorFocus      : lighten(@greyFocus, 8%);
+@greyTertiaryColorActive     : darken(@greyActive, 5%);
 @blackTertiaryColor          : lighten(@black, 20%);
 @blackTertiaryColorHover     : lighten(@blackHover, 40%);
 @blackTertiaryColorFocus     : lighten(@blackFocus, 40%);

package/src/themes/github/globals/site.variables

@@ -9,6 +9,7 @@
 @fontSize : 13px;
 @fontName : 'Arial';
 @importGoogleFonts : false;
+@importFonts: false;
 
 @h1: 2.25em;
 

package/src/themes/systemfont/globals/reset.overrides

@@ -0,0 +1,8 @@
+/*******************************
+           Overrides
+*******************************/
+
+b,
+strong {
+  font-weight: 600;
+}

package/src/themes/systemfont/globals/site.variables

@@ -0,0 +1,10 @@
+/*******************************
+     User Global Variables
+*******************************/
+
+@fontName          : '';
+@headerFont        : @fallbackFonts;
+@pageFont          : @fallbackFonts;
+@importGoogleFonts : false;
+@importFonts       : false;
+@bold              : 600;

package/tasks/build/css.js

@@ -133,8 +133,8 @@ function buildCSS(src, type, config, opts, callback) {
   }
 
   if (globs.individuals !== undefined && typeof src === 'string') {
-    const individuals = config.globs.individuals.replace('{','');
-    const components = config.globs.components.replace('}',',').concat(individuals);
+    const individuals = config.globs.individuals.replace(/\{/g,'');
+    const components = config.globs.components.replace(/\}/g,',').concat(individuals);
 
     src = config.paths.source.definitions + '/**/' + components + '.less';
   }

package/tasks/build/javascript.js

@@ -100,8 +100,8 @@ function buildJS(src, type, config, callback) {
   }
 
   if (globs.individuals !== undefined && typeof src === 'string') {
-    const individuals = config.globs.individuals.replace('{','');
-    const components = config.globs.components.replace('}',',').concat(individuals);
+    const individuals = config.globs.individuals.replace(/\{/g,'');
+    const components = config.globs.components.replace(/\}/g,',').concat(individuals);
 
     src = config.paths.source.definitions + '/**/' + components + (config.globs.ignored || '') + '.js';
   }

package/test/helpers/jasmine-jquery.js

@@ -176,7 +176,7 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
   }
 
   jasmine.StyleFixtures.prototype.createStyle_ = function (html) {
-    var styleText = $('<div></div>').html(html).text()
+    var styleText = html.replace(/<[^>]+(>|$)/g,'')
       , style = $('<style>' + styleText + '</style>')
 
     this.fixturesNodes_.push(style)