uikit 3.11.2-dev.19d26d0f9 → 3.11.2-dev.54d67da03

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit",
   "title": "UIkit",
   "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
-  "version": "3.11.2-dev.19d26d0f9",
+  "version": "3.11.2-dev.54d67da03",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/api/state.js

@@ -211,11 +211,11 @@ export default function (UIkit) {
             on(
                 el,
                 name,
-                !delegate
-                    ? null
-                    : isString(delegate)
+                delegate
+                    ? isString(delegate)
                         ? delegate
-                        : delegate.call(component),
+                        : delegate.call(component)
+                    : null,
                 isString(handler) ? component[handler] : handler.bind(component),
                 {passive, capture, self}
             )

package/src/js/core/drop.js

@@ -308,7 +308,7 @@ export default {
             if (active) {
 
                 if (delay && active.isDelaying) {
-                    this.showTimer = setTimeout(this.show, 10);
+                    this.showTimer = setTimeout(() => matches(target, ':hover') && this.show(), 10);
                     return;
                 }
 

package/src/js/core/img.js

@@ -1,4 +1,4 @@
-import {createEvent, css, Dimensions, escape, getImage, includes, isUndefined, queryAll, startsWith, toFloat, toPx, trigger} from 'uikit-util';
+import {append, attr, children, createEvent, css, data, escape, fragment, hasAttr, includes, isArray, isEmpty, isUndefined, parent, parseOptions, queryAll, startsWith, toFloat, toPx, trigger} from 'uikit-util';
 
 export default {
 
@@ -6,10 +6,7 @@ export default {
 
     props: {
         dataSrc: String,
-        dataSrcset: Boolean,
-        sizes: String,
-        width: Number,
-        height: Number,
+        dataSources: String,
         offsetTop: String,
         offsetLeft: String,
         target: String
@@ -17,10 +14,7 @@ export default {
 
     data: {
         dataSrc: '',
-        dataSrcset: false,
-        sizes: false,
-        width: false,
-        height: false,
+        dataSources: [],
         offsetTop: '50vh',
         offsetLeft: '50vw',
         target: false
@@ -28,26 +22,6 @@ export default {
 
     computed: {
 
-        cacheKey({dataSrc}) {
-            return `${this.$name}.${dataSrc}`;
-        },
-
-        width({width, dataWidth}) {
-            return width || dataWidth;
-        },
-
-        height({height, dataHeight}) {
-            return height || dataHeight;
-        },
-
-        sizes({sizes, dataSizes}) {
-            return sizes || dataSizes;
-        },
-
-        isImg(_, $el) {
-            return isImg($el);
-        },
-
         target: {
 
             get({target}) {
@@ -58,14 +32,6 @@ export default {
                 this.observe();
             }
 
-        },
-
-        offsetTop({offsetTop}) {
-            return toPx(offsetTop, 'height');
-        },
-
-        offsetLeft({offsetLeft}) {
-            return toPx(offsetLeft, 'width');
         }
 
     },
@@ -73,21 +39,15 @@ export default {
     connected() {
 
         if (!window.IntersectionObserver) {
-            setSrcAttrs(this.$el, this.dataSrc, this.dataSrcset, this.sizes);
+            setSrcAttrs(this.$el, this.dataSrc);
             return;
         }
 
-        if (storage[this.cacheKey]) {
-            setSrcAttrs(this.$el, storage[this.cacheKey], this.dataSrcset, this.sizes);
-        } else if (this.isImg && this.width && this.height) {
-            setSrcAttrs(this.$el, getPlaceholderImage(this.width, this.height, this.sizes));
-        }
-
-        this.observer = new IntersectionObserver(this.load, {
-            rootMargin: `${this.offsetTop}px ${this.offsetLeft}px`
-        });
+        ensurePlaceholderImage(this.$el);
 
-        requestAnimationFrame(this.observe);
+        const rootMargin = `${toPx(this.offsetTop, 'height')}px ${toPx(this.offsetLeft, 'width')}px`;
+        this.observer = new IntersectionObserver(this.load, {rootMargin});
+        this.observe();
 
     },
 
@@ -97,32 +57,17 @@ export default {
 
     update: {
 
-        read({image}) {
-
-            if (!this.observer) {
+        write(store) {
+            if (!this.observer || isImg(this.$el)) {
                 return false;
             }
-
-            if (!image && document.readyState === 'complete') {
-                this.load(this.observer.takeRecords());
-            }
-
-            if (this.isImg) {
-                return false;
-            }
-
-            image && image.then(img => img && img.currentSrc !== '' && setSrcAttrs(this.$el, currentSrc(img)));
-
-        },
-
-        write(data) {
-
-            if (this.dataSrcset && window.devicePixelRatio !== 1) {
+            const srcset = data(this.$el, 'data-srcset');
+            if (srcset && window.devicePixelRatio !== 1) {
 
                 const bgSize = css(this.$el, 'backgroundSize');
-                if (bgSize.match(/^(auto\s?)+$/) || toFloat(bgSize) === data.bgSize) {
-                    data.bgSize = getSourceSize(this.dataSrcset, this.sizes);
-                    css(this.$el, 'backgroundSize', `${data.bgSize}px`);
+                if (bgSize.match(/^(auto\s?)+$/) || toFloat(bgSize) === store.bgSize) {
+                    store.bgSize = getSourceSize(srcset, data(this.$el, 'sizes'));
+                    css(this.$el, 'backgroundSize', `${store.bgSize}px`);
                 }
 
             }
@@ -142,13 +87,20 @@ export default {
                 return;
             }
 
-            this._data.image = getImage(this.dataSrc, this.dataSrcset, this.sizes).then(img => {
+            if (this._data.image) {
+                return this._data.image;
+            }
 
-                setSrcAttrs(this.$el, currentSrc(img), img.srcset, img.sizes);
-                storage[this.cacheKey] = currentSrc(img);
-                return img;
+            const image = isImg(this.$el)
+                ? this.$el
+                : getImageFromElement(
+                    this.$el,
+                    this.dataSrc,
+                    this.dataSources
+                );
 
-            }, e => trigger(this.$el, new e.constructor(e.type, e)));
+            this._data.image = image;
+            setSrcAttrs(this.$el, image.currentSrc);
 
             this.observer.disconnect();
         },
@@ -163,13 +115,14 @@ export default {
 
 };
 
-function setSrcAttrs(el, src, srcset, sizes) {
+function setSrcAttrs(el, src) {
 
     if (isImg(el)) {
-        const set = (prop, val) => val && val !== el[prop] && (el[prop] = val);
-        set('sizes', sizes);
-        set('srcset', srcset);
-        set('src', src);
+
+        const parentNode = parent(el);
+        const elements = isPicture(parentNode) ? children(parentNode) : [el];
+        elements.forEach(el => setSourceProps(el, el));
+
     } else if (src) {
 
         const change = !includes(el.style.backgroundImage, src);
@@ -182,13 +135,66 @@ function setSrcAttrs(el, src, srcset, sizes) {
 
 }
 
-function getPlaceholderImage(width, height, sizes) {
+const srcProps = ['data-src', 'data-srcset', 'sizes'];
+function setSourceProps(sourceEl, targetEl) {
+    srcProps.forEach(prop => {
+        const value = data(sourceEl, prop);
+        if (value) {
+            attr(targetEl, prop.replace(/^(data-)+/, ''), value);
+        }
+    });
+}
+
+function getImageFromElement(el, src, sources) {
 
-    if (sizes) {
-        ({width, height} = Dimensions.ratio({width, height}, 'width', toPx(sizesToPixel(sizes))));
+    if (!src) {
+        return false;
     }
 
-    return `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"></svg>`;
+    const img = new Image();
+
+    wrapInPicture(img, sources);
+    setSourceProps(el, img);
+    img.onload = () => setSrcAttrs(el, img.currentSrc);
+    attr(img, 'src', src);
+    return img;
+}
+
+function wrapInPicture(img, sources) {
+
+    sources = parseSources(sources);
+
+    if (sources.length) {
+        const picture = fragment('<picture>');
+        sources.forEach(attrs => {
+            const source = fragment('<source>');
+            attr(source, attrs);
+            append(picture, source);
+        });
+        append(picture, img);
+    }
+}
+
+function parseSources(sources) {
+    if (!sources) {
+        return [];
+    }
+
+    if (startsWith(sources, '[')) {
+        try {
+            sources = JSON.parse(sources);
+        } catch (e) {
+            sources = [];
+        }
+    } else {
+        sources = parseOptions(sources);
+    }
+
+    if (!isArray(sources)) {
+        sources = [sources];
+    }
+
+    return sources.filter(source => !isEmpty(source));
 }
 
 const sizesRe = /\s*(.*?)\s*(\w+|calc\(.*?\))\s*(?:,|$)/g;
@@ -228,22 +234,20 @@ function getSourceSize(srcset, sizes) {
     return descriptors.filter(size => size >= srcSize)[0] || descriptors.pop() || '';
 }
 
-function isImg(el) {
-    return el.tagName === 'IMG';
+function ensurePlaceholderImage(el) {
+    if (isImg(el) && !hasAttr(el, 'src')) {
+        attr(el, 'src', 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"></svg>');
+    }
 }
 
-function currentSrc(el) {
-    return el.currentSrc || el.src;
+function isPicture(el) {
+    return isA(el, 'PICTURE');
 }
 
-const key = '__test__';
-let storage;
+function isImg(el) {
+    return isA(el, 'IMG');
+}
 
-// workaround for Safari's private browsing mode and accessing sessionStorage in Blink
-try {
-    storage = window.sessionStorage || {};
-    storage[key] = 1;
-    delete storage[key];
-} catch (e) {
-    storage = {};
+function isA(el, tagName) {
+    return el && el.tagName === tagName;
 }

package/src/js/core/navbar.js

@@ -137,7 +137,7 @@ export default {
 
             handler({current}) {
                 const active = this.getActive();
-                if (active && includes(active.mode, 'hover') && active.target && !within(active.target, current) && !active.tracker.movesTo(active.$el)) {
+                if (active && includes(active.mode, 'hover') && active.target && !within(active.target, current) && !active.isDelaying) {
                     active.hide(false);
                 }
             }
@@ -301,7 +301,11 @@ export default {
 
                 const active = this.getActive();
 
-                if (matches(this.dropbar, ':hover') && active && active.$el === $el) {
+                if (matches(this.dropbar, ':hover')
+                    && active
+                    && active.$el === $el
+                    && !this.toggles.some(el => active.target !== el && matches(el, ':focus'))
+                ) {
                     e.preventDefault();
                 }
             }

package/src/js/core/sticky.js

@@ -1,12 +1,13 @@
 import Class from '../mixin/class';
 import Media from '../mixin/media';
-import {$, addClass, after, Animation, assign, clamp, css, dimensions, fastdom, height as getHeight, getScrollingElement, hasClass, isNumeric, isString, isVisible, noop, offset, offsetPosition, parent, query, remove, removeClass, replaceClass, scrollTop, toggleClass, toPx, trigger, within} from 'uikit-util';
+import {$, addClass, after, Animation, clamp, css, dimensions, fastdom, height as getHeight, getScrollingElement, hasClass, isNumeric, isString, isVisible, noop, offset, offsetPosition, parent, query, remove, removeClass, replaceClass, scrollTop, toggleClass, toPx, trigger, within} from 'uikit-util';
 
 export default {
 
     mixins: [Class, Media],
 
     props: {
+        position: String,
         top: null,
         bottom: Boolean,
         offset: String,
@@ -22,6 +23,7 @@ export default {
     },
 
     data: {
+        position: 'top',
         top: 0,
         bottom: false,
         offset: 0,
@@ -38,7 +40,18 @@ export default {
 
     computed: {
 
+        position({position}, $el) {
+            return position === 'auto'
+                ? (this.isFixed ? this.placeholder : $el).offsetHeight > getHeight(window)
+                    ? 'bottom'
+                    : 'top'
+                : position;
+        },
+
         offset({offset}, $el) {
+            if (this.position === 'bottom') {
+                offset += '+100vh-100%';
+            }
             return toPx(offset, 'height', $el);
         },
 
@@ -130,7 +143,7 @@ export default {
 
         {
 
-            read({height}, types) {
+            read({height, margin}, types) {
 
                 this.inactive = !this.matchMedia || !isVisible(this.$el);
 
@@ -138,13 +151,19 @@ export default {
                     return false;
                 }
 
-                if (this.isActive && types.has('resize')) {
+                const hide = this.isActive && types.has('resize');
+                if (hide) {
                     this.hide();
+                }
+
+                if (!this.isActive) {
                     height = this.$el.offsetHeight;
-                    this.show();
+                    margin = css(this.$el, 'margin');
                 }
 
-                height = this.isActive ? height : this.$el.offsetHeight;
+                if (hide) {
+                    this.show();
+                }
 
                 const overflow = Math.max(0, height + this.offset - getHeight(window));
 
@@ -167,17 +186,17 @@ export default {
                     topOffset,
                     offsetParentTop,
                     height,
+                    margin,
                     width: dimensions(isVisible(this.widthElement) ? this.widthElement : this.$el).width,
-                    top: offsetPosition(this.placeholder)[0],
-                    margins: css(this.$el, ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'])
+                    top: offsetPosition(this.placeholder)[0]
                 };
             },
 
-            write({height, margins}) {
+            write({height, margin}) {
 
                 const {placeholder} = this;
 
-                css(placeholder, assign({height}, margins));
+                css(placeholder, {height, margin});
 
                 if (!within(placeholder, document)) {
                     after(this.$el, placeholder);
@@ -302,7 +321,7 @@ export default {
 
             const {width, scroll = 0, overflow, overflowScroll = 0, start, end, topOffset, height, offsetParentTop} = this._data;
             const active = start !== 0 || scroll > start;
-            let top = Math.max(0, this.offset);
+            let top = this.offset;
             let position = 'fixed';
 
             if (scroll > end) {

package/src/js/util/options.js

@@ -134,9 +134,8 @@ export function parseOptions(options, args = []) {
 
     try {
 
-        return !options
-            ? {}
-            : startsWith(options, '{')
+        return options
+            ? startsWith(options, '{')
                 ? JSON.parse(options)
                 : args.length && !includes(options, ':')
                     ? ({[args[0]]: options})
@@ -146,7 +145,8 @@ export function parseOptions(options, args = []) {
                             options[key.trim()] = value.trim();
                         }
                         return options;
-                    }, {});
+                    }, {})
+            : {};
 
     } catch (e) {
         return {};

package/tests/image.html

@@ -14,8 +14,6 @@
 
             <h1>Image</h1>
 
-            <p><button class="uk-button uk-button-default" onclick="sessionStorage.clear()">Clear Session Storage</button></p>
-
             <div class="uk-child-width-1-2@m" uk-grid>
                 <div>
                     <img data-src="https://images.unsplash.com/photo-1522201949034-507737bce479?fit=crop&w=900&h=600&q=80" width="900" height="600" alt="" uk-img>
@@ -25,7 +23,17 @@
                 </div>
             </div>
 
-            <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light" data-src="https://images.unsplash.com/photo-1490822180406-880c226c150b?fit=crop&w=1200&h=450&q=80" uk-img>
+            <div>
+                <picture>
+                    <source type="image/webp" sizes="(min-width: 780px) 780px" data-srcset="http://localhost/site/image?src=WyJzaXRlXC9pbWFnZXNcL2hvbWVcL3lvb3RoZW1lLXByby5qcGciLFtbInR5cGUiLFsid2VicCIsIjg1Il1dLFsiZG9SZXNpemUiLFs3ODEsNDg4LDc4MSw0ODhdXSxbImRvQ3JvcCIsWzc4MCw0ODgsMCwwXV1dXQ%3D%3D&amp;hash=9a3c6f9c 780w, /site/cache/images/yootheme-pro-5db7acab.webp 1560w">
+                    <img data-src="/site/cache/images/yootheme-pro-0d67d545.jpeg" width="780" height="488" alt="Introduction Video on using the YOOtheme Pro Page Builder for WordPress and Joomla" uk-img>
+                </picture>
+            </div>
+            <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light" data-src="https://images.unsplash.com/photo-1490822180406-880c226c150b?fit=crop&w=1200&h=450&q=80" data-sources="srcset: images/test.avif; type: image/avif" uk-img>
+                <h1>Background Image</h1>
+            </div>
+
+            <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light" data-src="https://images.unsplash.com/photo-1490822180406-880c226c150b?fit=crop&w=1200&h=450&q=80" data-sources="[{&quot;srcset&quot;: &quot;images/test.avif&quot;, &quot;type&quot;: &quot;image/avif&quot;},{&quot;srcset&quot;: &quot;images/test.webp&quot;, &quot;type&quot;: &quot;image/webp&quot;}]" uk-img>
                 <h1>Background Image</h1>
             </div>
 
@@ -255,28 +263,28 @@
 
                         <ul class="uk-slideshow-items">
                             <li>
-                                <img data-src="images/photo.jpg" alt="" uk-cover data-width="1800" data-height="1200" uk-img="target: !.uk-slideshow-items > :last-child, !* +*">
+                                <img data-src="images/photo.jpg" alt="" uk-cover width="1800" height="1200" uk-img="target: !.uk-slideshow-items > :last-child, !* +*">
                                 <div class="uk-position-center uk-position-small uk-text-center">
                                     <h2 uk-slideshow-parallax="x: 100,-100">Heading</h2>
                                     <p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
                                 </div>
                             </li>
                             <li>
-                                <img data-src="images/dark.jpg" alt="" uk-cover data-width="1800" data-height="1200" uk-img="target: !* -*, !* +*">
+                                <img data-src="images/dark.jpg" alt="" uk-cover width="1800" height="1200" uk-img="target: !* -*, !* +*">
                                 <div class="uk-position-center uk-position-small uk-text-center">
                                     <h2 uk-slideshow-parallax="x: 100,-100">Heading</h2>
                                     <p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
                                 </div>
                             </li>
                             <li>
-                                <img data-src="images/light.jpg" alt="" uk-cover data-width="1800" data-height="1200" uk-img="target: !* -*, !* +*">
+                                <img data-src="images/light.jpg" alt="" uk-cover width="1800" height="1200" uk-img="target: !* -*, !* +*">
                                 <div class="uk-position-center uk-position-small uk-text-center">
                                     <h2 uk-slideshow-parallax="y: -50,0,0; opacity: 1,1,0">Heading</h2>
                                     <p uk-slideshow-parallax="y: 50,0,0; opacity: 1,1,0">Lorem ipsum dolor sit amet.</p>
                                 </div>
                             </li>
                             <li>
-                                <img data-src="images/photo2.jpg" alt="" uk-cover data-width="1800" data-height="1200" uk-img="target: !* -*, !.uk-slideshow-items > :first-child">
+                                <img data-src="images/photo2.jpg" alt="" uk-cover width="1800" height="1200" uk-img="target: !* -*, !.uk-slideshow-items > :first-child">
                                 <div class="uk-position-center uk-position-small uk-text-center">
                                     <h2 uk-slideshow-parallax="x: 200,0,0">Heading</h2>
                                     <p uk-slideshow-parallax="x: 0,0,-200">Lorem ipsum dolor sit amet.</p>
@@ -296,43 +304,43 @@
 
                         <ul class="uk-slider-items uk-child-width-1-2@s uk-child-width-1-3@m">
                             <li>
-                                <img data-src="images/slider1.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider1.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
                                 <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">1</h1></div>
                             </li>
                             <li>
-                                <img data-src="images/slider2.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider2.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
                                 <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">2</h1></div>
                             </li>
                             <li>
-                                <img data-src="images/slider3.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider3.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
                                 <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">3</h1></div>
                             </li>
                             <li>
-                                <img data-src="images/slider4.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider4.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
                                 <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">4</h1></div>
                             </li>
                             <li>
-                                <img data-src="images/slider5.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider5.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
                                 <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">5</h1></div>
                             </li>
                             <li>
-                                <img data-src="images/slider1.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider1.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
                                 <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">6</h1></div>
                             </li>
                             <li>
-                                <img data-src="images/slider2.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider2.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
                                 <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">7</h1></div>
                             </li>
                             <li>
-                                <img data-src="images/slider3.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider3.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
                                 <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">8</h1></div>
                             </li>
                             <li>
-                                <img data-src="images/slider4.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider4.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
                                 <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">9</h1></div>
                             </li>
                             <li>
-                                <img data-src="images/slider5.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider5.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
                                 <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">10</h1></div>
                             </li>
                         </ul>
@@ -365,28 +373,10 @@
                             <td>The image's `src` attribute.</td>
                         </tr>
                         <tr>
-                            <td><code>dataSrcset</code></td>
+                            <td><code>dataSources</code></td>
                             <td>String</td>
-                            <td>false</td>
-                            <td>The image's `srcset` attribute.</td>
-                        </tr>
-                        <tr>
-                            <td><code>sizes</code></td>
-                            <td>String</td>
-                            <td>false</td>
-                            <td>The image's `sizes` attribute.</td>
-                        </tr>
-                        <tr>
-                            <td><code>width</code></td>
-                            <td>String</td>
-                            <td>false</td>
-                            <td>The image's `width` attribute. It will be used to determine the placeholder's width and the images position in the document.</td>
-                        </tr>
-                        <tr>
-                            <td><code>height</code></td>
-                            <td>String</td>
-                            <td>false</td>
-                            <td>The image's `height` attribute. It will be used to determine the placeholder's height and the images position in the document.</td>
+                            <td>''</td>
+                            <td>The image's sources. This option is used for background images only. The sources attributes be passed in `key: value;` format for a single source. For multiple sources in JSON format.</td>
                         </tr>
                         <tr>
                             <td><code>offsetTop</code></td>