uikit 3.11.2-dev.c08a5b5f0 → 3.11.2-dev.d8c101f07

package/src/js/util/viewport.js

@@ -1,30 +1,39 @@
-import {css} from './style';
-import {Promise} from './promise';
-import {isVisible, parents} from './filter';
-import {offset, offsetPosition} from './dimensions';
-import {clamp, findIndex, intersectRect, isDocument, isUndefined, isWindow, toNode, toWindow} from './lang';
+import { css } from './style';
+import { isVisible, parents } from './filter';
+import { offset, offsetPosition } from './dimensions';
+import {
+    clamp,
+    findIndex,
+    intersectRect,
+    isDocument,
+    isUndefined,
+    isWindow,
+    toNode,
+    toWindow,
+} from './lang';
 
 export function isInView(element, offsetTop = 0, offsetLeft = 0) {
-
     if (!isVisible(element)) {
         return false;
     }
 
-    return intersectRect(...scrollParents(element).map(parent => {
-
-        const {top, left, bottom, right} = offset(getViewport(parent));
-
-        return {
-            top: top - offsetTop,
-            left: left - offsetLeft,
-            bottom: bottom + offsetTop,
-            right: right + offsetLeft
-        };
-    }).concat(offset(element)));
+    return intersectRect(
+        ...scrollParents(element)
+            .map((parent) => {
+                const { top, left, bottom, right } = offset(getViewport(parent));
+
+                return {
+                    top: top - offsetTop,
+                    left: left - offsetLeft,
+                    bottom: bottom + offsetTop,
+                    right: right + offsetLeft,
+                };
+            })
+            .concat(offset(element))
+    );
 }
 
 export function scrollTop(element, top) {
-
     if (isWindow(element) || isDocument(element)) {
         element = getScrollingElement(element);
     } else {
@@ -38,49 +47,44 @@ export function scrollTop(element, top) {
     }
 }
 
-export function scrollIntoView(element, {offset: offsetBy = 0} = {}) {
-
+export function scrollIntoView(element, { offset: offsetBy = 0 } = {}) {
     const parents = isVisible(element) ? scrollParents(element) : [];
-    return parents.reduce((fn, scrollElement, i) => {
-
-        const {scrollTop, scrollHeight, offsetHeight} = scrollElement;
-        const maxScroll = scrollHeight - getViewportClientHeight(scrollElement);
-        const {height: elHeight, top: elTop} = offset(parents[i - 1] || element);
-
-        let top = Math.ceil(
-            elTop
-            - offset(getViewport(scrollElement)).top
-            - offsetBy
-            + scrollTop
-        );
-
-        if (offsetBy > 0 && offsetHeight < elHeight + offsetBy) {
-            top += offsetBy;
-        } else {
-            offsetBy = 0;
-        }
-
-        if (top > maxScroll) {
-            offsetBy -= top - maxScroll;
-            top = maxScroll;
-        } else if (top < 0) {
-            offsetBy -= top;
-            top = 0;
-        }
-
-        return () => scrollTo(scrollElement, top - scrollTop).then(fn);
-
-    }, () => Promise.resolve())();
+    return parents.reduce(
+        (fn, scrollElement, i) => {
+            const { scrollTop, scrollHeight, offsetHeight } = scrollElement;
+            const maxScroll = scrollHeight - getViewportClientHeight(scrollElement);
+            const { height: elHeight, top: elTop } = offset(parents[i - 1] || element);
+
+            let top = Math.ceil(
+                elTop - offset(getViewport(scrollElement)).top - offsetBy + scrollTop
+            );
+
+            if (offsetBy > 0 && offsetHeight < elHeight + offsetBy) {
+                top += offsetBy;
+            } else {
+                offsetBy = 0;
+            }
+
+            if (top > maxScroll) {
+                offsetBy -= top - maxScroll;
+                top = maxScroll;
+            } else if (top < 0) {
+                offsetBy -= top;
+                top = 0;
+            }
+
+            return () => scrollTo(scrollElement, top - scrollTop).then(fn);
+        },
+        () => Promise.resolve()
+    )();
 
     function scrollTo(element, top) {
-        return new Promise(resolve => {
-
+        return new Promise((resolve) => {
             const scroll = element.scrollTop;
             const duration = getDuration(Math.abs(top));
             const start = Date.now();
 
             (function step() {
-
                 const percent = ease(clamp((Date.now() - start) / duration));
 
                 scrollTop(element, scroll + top * percent);
@@ -91,29 +95,26 @@ export function scrollIntoView(element, {offset: offsetBy = 0} = {}) {
                 } else {
                     requestAnimationFrame(step);
                 }
-
             })();
         });
     }
 
     function getDuration(dist) {
-        return 40 * Math.pow(dist, .375);
+        return 40 * Math.pow(dist, 0.375);
     }
 
     function ease(k) {
         return 0.5 * (1 - Math.cos(Math.PI * k));
     }
-
 }
 
 export function scrolledOver(element, startOffset = 0, endOffset = 0) {
-
     if (!isVisible(element)) {
         return 0;
     }
 
     const [scrollElement] = scrollParents(element, /auto|scroll/, true);
-    const {scrollHeight, scrollTop} = scrollElement;
+    const { scrollHeight, scrollTop } = scrollElement;
     const viewportHeight = getViewportClientHeight(scrollElement);
     const maxScroll = scrollHeight - viewportHeight;
     const elementOffsetTop = offsetPosition(element)[0] - offsetPosition(scrollElement)[0];
@@ -130,14 +131,20 @@ export function scrollParents(element, overflowRe = /auto|scroll|hidden/, scroll
     let ancestors = parents(element).reverse();
     ancestors = ancestors.slice(ancestors.indexOf(scrollEl) + 1);
 
-    const fixedIndex = findIndex(ancestors, el => css(el, 'position') === 'fixed');
+    const fixedIndex = findIndex(ancestors, (el) => css(el, 'position') === 'fixed');
     if (~fixedIndex) {
         ancestors = ancestors.slice(fixedIndex);
     }
 
-    return [scrollEl].concat(ancestors.filter(parent =>
-        overflowRe.test(css(parent, 'overflow')) && (!scrollable || parent.scrollHeight > getViewportClientHeight(parent)))
-    ).reverse();
+    return [scrollEl]
+        .concat(
+            ancestors.filter(
+                (parent) =>
+                    overflowRe.test(css(parent, 'overflow')) &&
+                    (!scrollable || parent.scrollHeight > getViewportClientHeight(parent))
+            )
+        )
+        .reverse();
 }
 
 export function getViewport(scrollElement) {
@@ -146,10 +153,14 @@ export function getViewport(scrollElement) {
 
 // iOS 12 returns <body> as scrollingElement
 export function getViewportClientHeight(scrollElement) {
-    return (scrollElement === getScrollingElement(scrollElement) ? document.documentElement : scrollElement).clientHeight;
+    return (
+        scrollElement === getScrollingElement(scrollElement)
+            ? document.documentElement
+            : scrollElement
+    ).clientHeight;
 }
 
 export function getScrollingElement(element) {
-    const {document} = toWindow(element);
+    const { document } = toWindow(element);
     return document.scrollingElement || document.documentElement;
 }

package/tests/image.html

@@ -14,7 +14,9 @@
 
             <h1>Image</h1>
 
-            <div class="uk-child-width-1-2@m uk-background-secondary" uk-grid>
+            <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>
                 </div>
@@ -23,17 +25,7 @@
                 </div>
             </div>
 
-            <div class="uk-background-primary">
-                <picture>
-                    <source type="image/webp" sizes="(min-width: 780px) 780px" srcset="http://localhost/site/image?src=WyJzaXRlXC9pbWFnZXNcL2hvbWVcL3lvb3RoZW1lLXByby5qcGciLFtbInR5cGUiLFsid2VicCIsIjg1Il1dLFsiZG9SZXNpemUiLFs3ODEsNDg4LDc4MSw0ODhdXSxbImRvQ3JvcCIsWzc4MCw0ODgsMCwwXV1dXQ%3D%3D&amp;hash=9a3c6f9c 780w, /site/cache/images/yootheme-pro-5db7acab.webp 1560w">
-                    <img 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">
-                </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>
+            <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>
                 <h1>Background Image</h1>
             </div>
 
@@ -263,28 +255,28 @@
 
                         <ul class="uk-slideshow-items">
                             <li>
-                                <img data-src="images/photo.jpg" alt="" uk-cover width="1800" height="1200" uk-img="target: !.uk-slideshow-items > :last-child, !* +*">
+                                <img data-src="images/photo.jpg" alt="" uk-cover data-width="1800" data-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 width="1800" height="1200" uk-img="target: !* -*, !* +*">
+                                <img data-src="images/dark.jpg" alt="" uk-cover data-width="1800" data-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 width="1800" height="1200" uk-img="target: !* -*, !* +*">
+                                <img data-src="images/light.jpg" alt="" uk-cover data-width="1800" data-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 width="1800" height="1200" uk-img="target: !* -*, !.uk-slideshow-items > :first-child">
+                                <img data-src="images/photo2.jpg" alt="" uk-cover data-width="1800" data-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>
@@ -304,43 +296,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="" width="400" height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider1.jpg" alt="" data-width="400" data-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="" width="400" height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider2.jpg" alt="" data-width="400" data-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="" width="400" height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider3.jpg" alt="" data-width="400" data-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="" width="400" height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider4.jpg" alt="" data-width="400" data-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="" width="400" height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider5.jpg" alt="" data-width="400" data-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="" width="400" height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider1.jpg" alt="" data-width="400" data-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="" width="400" height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider2.jpg" alt="" data-width="400" data-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="" width="400" height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider3.jpg" alt="" data-width="400" data-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="" width="400" height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider4.jpg" alt="" data-width="400" data-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="" width="400" height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider5.jpg" alt="" data-width="400" data-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>
@@ -373,16 +365,28 @@
                             <td>The image's `src` attribute.</td>
                         </tr>
                         <tr>
-                            <td><code>sources</code></td>
+                            <td><code>dataSrcset</code></td>
                             <td>String</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>
+                            <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>loading</code></td>
-                            <td>`lazy`|`eager`</td>
-                            <td>`lazy`</td>
-                            <td>Enable lazy/eager loading. Set to `eager` for images within the first visible viewport.</td>
+                            <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>
                         </tr>
                         <tr>
                             <td><code>offsetTop</code></td>

package/tests/js/index.js

@@ -1,5 +1,5 @@
 /* global UIkit, TESTS */
-import {addClass, css, fastdom, on, prepend, removeClass, ucfirst} from 'uikit-util';
+import { addClass, css, fastdom, on, prepend, removeClass, ucfirst } from 'uikit-util';
 
 const tests = TESTS;
 const storage = window.sessionStorage;
@@ -14,10 +14,13 @@ request.send(null);
 
 const themes = request.status === 200 ? JSON.parse(request.responseText) : {};
 const styles = {
-    core: {css: '../dist/css/uikit-core.css'},
-    theme: {css: '../dist/css/uikit.css'}
+    core: { css: '../dist/css/uikit-core.css' },
+    theme: { css: '../dist/css/uikit.css' },
 };
-const component = location.pathname.split('/').pop().replace(/.html$/, '');
+const component = location.pathname
+    .split('/')
+    .pop()
+    .replace(/.html$/, '');
 
 for (const theme in themes) {
     styles[theme] = themes[theme];
@@ -26,7 +29,7 @@ for (const theme in themes) {
 const variations = {
     '': 'Default',
     light: 'Dark',
-    dark: 'Light'
+    dark: 'Light',
 };
 
 if (getParam('style') && getParam('style').match(/\.(json|css)$/)) {
@@ -44,102 +47,128 @@ docEl.dir = dir;
 const style = styles[storage[key]] || styles.theme;
 
 // add style
-document.writeln(`<link rel="stylesheet" href="${dir !== 'rtl' ? style.css : style.css.replace('.css', '-rtl.css')}">`);
+document.writeln(
+    `<link rel="stylesheet" href="${
+        dir !== 'rtl' ? style.css : style.css.replace('.css', '-rtl.css')
+    }">`
+);
 
 // add javascript
 document.writeln('<script src="../dist/js/uikit.js"></script>');
-document.writeln(`<script src="${style.icons ? style.icons : '../dist/js/uikit-icons.js'}"></script>`);
-
-on(window, 'load', () => setTimeout(() => fastdom.write(() => {
-
-    const $body = document.body;
-    const $container = prepend($body, `
+document.writeln(
+    `<script src="${style.icons ? style.icons : '../dist/js/uikit-icons.js'}"></script>`
+);
+
+on(window, 'load', () =>
+    setTimeout(
+        () =>
+            fastdom.write(() => {
+                const $body = document.body;
+                const $container = prepend(
+                    $body,
+                    `
         <div class="uk-container">
             <select class="uk-select uk-form-width-small" style="margin: 20px 20px 20px 0">
                 <option value="index.html">Overview</option>
-                ${tests.map(name => `<option value="${name}.html">${name.split('-').map(ucfirst).join(' ')}</option>`).join('')}
+                ${tests
+                    .map(
+                        (name) =>
+                            `<option value="${name}.html">${name
+                                .split('-')
+                                .map(ucfirst)
+                                .join(' ')}</option>`
+                    )
+                    .join('')}
             </select>
             <select class="uk-select uk-form-width-small" style="margin: 20px">
-                ${Object.keys(styles).map(style => `<option value="${style}">${ucfirst(style)}</option>`).join('')}
+                ${Object.keys(styles)
+                    .map((style) => `<option value="${style}">${ucfirst(style)}</option>`)
+                    .join('')}
             </select>
             <select class="uk-select uk-form-width-small" style="margin: 20px">
-                ${Object.keys(variations).map(name => `<option value="${name}">${variations[name]}</option>`).join('')}
+                ${Object.keys(variations)
+                    .map((name) => `<option value="${name}">${variations[name]}</option>`)
+                    .join('')}
             </select>
             <label style="margin: 20px">
                 <input type="checkbox" class="uk-checkbox"/>
                 <span style="margin: 5px">RTL</span>
             </label>
         </div>
-    `);
-
-    const [$tests, $styles, $inverse, $rtl] = $container.children;
-
-    // Tests
-    // ------------------------------
-
-    on($tests, 'change', () => {
-        if ($tests.value) {
-            location.href = `${$tests.value}${styles.custom ? `?style=${getParam('style')}` : ''}`;
-        }
-    });
-    $tests.value = `${component || 'index'}.html`;
-
-    // Styles
-    // ------------------------------
-
-    on($styles, 'change', () => {
-        storage[key] = $styles.value;
-        location.reload();
-    });
-    $styles.value = storage[key];
-
-    // Variations
-    // ------------------------------
-
-    $inverse.value = storage[keyinverse];
-
-    if ($inverse.value) {
-
-        removeClass(document.querySelectorAll('*'),
-            'uk-navbar-container',
-            'uk-card-default',
-            'uk-card-muted',
-            'uk-card-primary',
-            'uk-card-secondary',
-            'uk-tile-default',
-            'uk-tile-muted',
-            'uk-tile-primary',
-            'uk-tile-secondary',
-            'uk-section-default',
-            'uk-section-muted',
-            'uk-section-primary',
-            'uk-section-secondary',
-            'uk-overlay-default',
-            'uk-overlay-primary'
-        );
-
-        css(docEl, 'background', $inverse.value === 'dark' ? '#fff' : '#222');
-        addClass($body, `uk-${$inverse.value}`);
-
-    }
-
-    on($inverse, 'change', () => {
-        storage[keyinverse] = $inverse.value;
-        location.reload();
-    });
-
-    // RTL
-    // ------------------------------
-
-    on($rtl, 'change', ({target}) => {
-        storage._uikit_dir = target.checked ? 'rtl' : 'ltr';
-        location.reload();
-    });
-    $rtl.firstElementChild.checked = dir === 'rtl';
-
-    css(docEl, 'paddingTop', '');
-
-}), 100));
+    `
+                );
+
+                const [$tests, $styles, $inverse, $rtl] = $container.children;
+
+                // Tests
+                // ------------------------------
+
+                on($tests, 'change', () => {
+                    if ($tests.value) {
+                        location.href = `${$tests.value}${
+                            styles.custom ? `?style=${getParam('style')}` : ''
+                        }`;
+                    }
+                });
+                $tests.value = `${component || 'index'}.html`;
+
+                // Styles
+                // ------------------------------
+
+                on($styles, 'change', () => {
+                    storage[key] = $styles.value;
+                    location.reload();
+                });
+                $styles.value = storage[key];
+
+                // Variations
+                // ------------------------------
+
+                $inverse.value = storage[keyinverse];
+
+                if ($inverse.value) {
+                    removeClass(
+                        document.querySelectorAll('*'),
+                        'uk-navbar-container',
+                        'uk-card-default',
+                        'uk-card-muted',
+                        'uk-card-primary',
+                        'uk-card-secondary',
+                        'uk-tile-default',
+                        'uk-tile-muted',
+                        'uk-tile-primary',
+                        'uk-tile-secondary',
+                        'uk-section-default',
+                        'uk-section-muted',
+                        'uk-section-primary',
+                        'uk-section-secondary',
+                        'uk-overlay-default',
+                        'uk-overlay-primary'
+                    );
+
+                    css(docEl, 'background', $inverse.value === 'dark' ? '#fff' : '#222');
+                    addClass($body, `uk-${$inverse.value}`);
+                }
+
+                on($inverse, 'change', () => {
+                    storage[keyinverse] = $inverse.value;
+                    location.reload();
+                });
+
+                // RTL
+                // ------------------------------
+
+                on($rtl, 'change', ({ target }) => {
+                    storage._uikit_dir = target.checked ? 'rtl' : 'ltr';
+                    location.reload();
+                });
+                $rtl.firstElementChild.checked = dir === 'rtl';
+
+                css(docEl, 'paddingTop', '');
+            }),
+        100
+    )
+);
 
 css(docEl, 'paddingTop', '80px');