uikit 3.11.2-dev.78e397546 → 3.11.2-dev.9433cd5fd

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.78e397546",
+  "version": "3.11.2-dev.9433cd5fd",
   "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, 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,13 @@ 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`
-        });
-
-        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 +55,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 +85,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 +113,15 @@ 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));
+        src && attr(el, 'src', src);
+
     } else if (src) {
 
         const change = !includes(el.style.backgroundImage, src);
@@ -182,13 +134,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 +233,14 @@ function getSourceSize(srcset, sizes) {
     return descriptors.filter(size => size >= srcSize)[0] || descriptors.pop() || '';
 }
 
-function isImg(el) {
-    return el.tagName === 'IMG';
+function isPicture(el) {
+    return isA(el, 'PICTURE');
 }
 
-function currentSrc(el) {
-    return el.currentSrc || el.src;
+function isImg(el) {
+    return isA(el, 'IMG');
 }
 
-const key = '__test__';
-let storage;
-
-// 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,6 +1,6 @@
 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 {
 
@@ -143,7 +143,7 @@ export default {
 
         {
 
-            read({height}, types) {
+            read({height, margin}, types) {
 
                 this.inactive = !this.matchMedia || !isVisible(this.$el);
 
@@ -151,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));
 
@@ -180,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);

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,11 @@
                 </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 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 +257,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 +298,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 +367,10 @@
                             <td>The image's `src` attribute.</td>
                         </tr>
                         <tr>
-                            <td><code>dataSrcset</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><code>dataSources</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>

package/tests/sticky-parallax.html

@@ -10,7 +10,7 @@
 
     <body style="padding-bottom: 100vh;">
 
-        <div class="uk-section uk-section-primary uk-position-z-index-negative uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-sticky="bottom: +* +*" uk-height-viewport>
+        <div class="uk-section uk-section-primary uk-position-z-index-negative uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-sticky="position: auto; bottom: +* +*" uk-height-viewport>
             <div class="uk-container">
 
                 <h1 class="uk-heading-2xlarge">Sticky Section</h1>

package/tests/sticky.html

@@ -57,14 +57,25 @@
                     </div>
 
                     <p id="hash" class="uk-margin-large">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+                    <div class="viewport uk-margin">
+                        <div class="uk-grid uk-child-width-1-6" uk-height-viewport>
+                            <div>
+
+                                <div class="uk-card uk-card-primary uk-card-body" uk-sticky="position: bottom; bottom: !.viewport">Sticky bottom</div>
+
+                            </div>
+                        </div>
+                    </div>
+
                 </div>
                 <div class="uk-width-1-6">
                     <div class="viewport" style="min-height: 200vh;">
                         <div>
-                            <div class="uk-card uk-card-primary uk-card-body" style="height: 120vh" uk-sticky="bottom: !.viewport">
+                            <div class="uk-card uk-card-primary uk-card-body" uk-sticky="bottom: !.viewport">
                                 <p>Oversized Content</p>
 
-                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
                             </div>
                         </div>
                     </div>
@@ -106,7 +117,7 @@
                             <td><code>offset</code></td>
                             <td>String</td>
                             <td>0</td>
-                            <td>The offset the Sticky should be fixed to.</td>
+                            <td>The offset the Sticky should be fixed to. It supports basic mathematics operands + and -. (e.g. 50vh + 50%)</td>
                         </tr>
                         <tr>
                             <td><code>animation</code></td>