uikit 3.23.13 → 3.23.14-dev.be820cd99

package/tests/index.html

@@ -112,7 +112,7 @@
                             <div class="uk-grid-small uk-child-width-auto uk-flex-middle uk-margin-medium" uk-grid>
                                 <div>
                                     <button class="uk-button uk-button-default">Default</button>
-                                    <div uk-dropdown="mode: click">
+                                    <div class="uk-dropdown" uk-drop="mode: click">
                                         <ul class="uk-nav uk-dropdown-nav">
                                             <li class="uk-active"><a href="#">Active</a></li>
                                             <li class="uk-parent">
@@ -375,7 +375,7 @@
                             </table>
                         </div>
 
-                        <div class="uk-grid-small uk-child-width-auto uk-margin-medium-top" uk-grid js-countdown>
+                        <div class="uk-heading-medium uk-grid-small uk-child-width-auto uk-flex-middle uk-margin-medium-top" uk-grid js-countdown>
                             <div>
                                 <div class="uk-countdown-number uk-countdown-days"></div>
                             </div>
@@ -415,6 +415,10 @@
                                 <select class="uk-select" aria-label="Select">
                                     <option>Option 01</option>
                                     <option>Option 02</option>
+                                    <optgroup label="Optgroup">
+                                        <option>Option A</option>
+                                        <option>Option B</option>
+                                    </optgroup>
                                 </select>
                             </div>
 
@@ -497,51 +501,6 @@
 
                 <hr class="uk-margin-medium">
 
-                <div class="uk-child-width-1-2@s uk-child-width-expand@m" uk-grid>
-                    <div>
-
-                        <div class="uk-inline">
-                            <img src="images/light.jpg" width="1800" height="1200" alt="">
-                            <a class="uk-position-absolute uk-transform-center" style="left: 20%; top: 30%" href="#" uk-marker></a>
-                            <a class="uk-position-absolute uk-transform-center" style="left: 60%; top: 40%" href="#" uk-marker></a>
-                            <a class="uk-position-absolute uk-transform-center" style="left: 80%; top: 70%" href="#" uk-marker></a>
-                        </div>
-
-                    </div>
-                    <div>
-
-                        <div class="uk-inline-clip">
-                            <img src="images/photo.jpg" width="1800" height="1200" alt="">
-                            <div class="uk-overlay uk-overlay-default uk-position-bottom">
-                                <p>Default Lorem ipsum dolor sit amet, consectetur.</p>
-                            </div>
-                        </div>
-
-                    </div>
-                    <div>
-
-                        <div class="uk-inline-clip">
-                            <img src="images/photo.jpg" width="1800" height="1200" alt="">
-                            <div class="uk-overlay uk-overlay-primary uk-position-bottom">
-                                <p>Primary Lorem ipsum dolor sit amet, consectetur.</p>
-                            </div>
-                        </div>
-
-                    </div>
-                    <div>
-
-                        <div class="uk-inline uk-light">
-                            <img src="images/photo.jpg" width="1800" height="1200" alt="">
-                            <div class="uk-position-center">
-                                <span uk-overlay-icon></span>
-                            </div>
-                        </div>
-
-                    </div>
-                </div>
-
-                <hr class="uk-margin-medium">
-
                 <div class="uk-grid-divider uk-child-width-auto@m" uk-grid>
                     <div>
 
@@ -649,7 +608,7 @@
                             <li class="uk-active"><a href="#">Active</a></li>
                             <li>
                                 <a href>Parent <span uk-drop-parent-icon></span></a>
-                                <div uk-dropdown="mode: click">
+                                <div class="uk-dropdown" uk-drop="mode: click">
                                     <ul class="uk-nav uk-dropdown-nav">
                                         <li class="uk-active"><a href="#">Active</a></li>
                                         <li><a href="#">Item</a></li>
@@ -678,8 +637,65 @@
 
                 <hr class="uk-margin-medium">
 
-                <div class="uk-grid-divider uk-child-width-expand@m" uk-grid>
-                    <div>
+                <div class="uk-grid-divider" uk-grid>
+                    <div class="uk-width-2-3@m">
+
+                        <div class="uk-child-width-1-2@s" uk-grid>
+                            <div>
+
+                                <div class="uk-inline">
+                                    <img src="images/light.jpg" width="1800" height="1200" alt="">
+                                    <a class="uk-position-absolute uk-transform-center" style="left: 20%; top: 30%" href="#" uk-marker></a>
+                                    <a class="uk-position-absolute uk-transform-center" style="left: 60%; top: 40%" href="#" uk-marker></a>
+                                    <a class="uk-position-absolute uk-transform-center" style="left: 80%; top: 70%" href="#" uk-marker></a>
+                                </div>
+
+                            </div>
+                            <div>
+
+                                <a href class="uk-inline">
+                                    <img src="images/light.jpg" width="1800" height="1200" alt="">
+                                    <div class="uk-position-center">
+                                        <span class="uk-icon-overlay" href="#" uk-icon="ratio: 3; icon: play-circle"></span>
+                                    </div>
+                                </a>
+
+                            </div>
+                            <div>
+
+                                <div class="uk-inline-clip">
+                                    <img src="images/photo.jpg" width="1800" height="1200" alt="">
+                                    <div class="uk-overlay uk-overlay-default uk-position-bottom">
+                                        <p>Default Lorem ipsum dolor sit amet, consectetur.</p>
+                                    </div>
+                                </div>
+
+                            </div>
+                            <div>
+
+                                <div class="uk-inline-clip">
+                                    <img src="images/photo.jpg" width="1800" height="1200" alt="">
+                                    <div class="uk-overlay uk-overlay-primary uk-position-bottom">
+                                        <p>Primary Lorem ipsum dolor sit amet, consectetur.</p>
+                                    </div>
+                                </div>
+
+                            </div>
+                            <div>
+
+                                <div class="uk-inline-clip">
+                                    <img src="images/photo.jpg" width="1800" height="1200" alt="">
+                                    <div class="uk-card uk-card-body uk-card-overlay uk-card-hover uk-position-cover uk-position-medium">
+                                        <h3 class="uk-card-title">Card Overlay</h3>
+                                        <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit.</p>
+                                    </div>
+                                </div>
+
+                            </div>
+                        </div>
+
+                    </div>
+                    <div class="uk-width-expand@m">
 
                         <ul class="uk-list uk-list-bullet uk-margin-medium">
                             <li>List item 1</li>
@@ -687,31 +703,25 @@
                             <li>List item 3</li>
                          </ul>
 
-                        <ul class="uk-list uk-list-striped">
+                        <ul class="uk-list uk-list-striped uk-margin-medium">
                             <li>List item 1</li>
                             <li>List item 2</li>
                             <li>List item 3</li>
                         </ul>
 
-                    </div>
-                    <div>
-
                         <ul class="uk-list uk-list-divider uk-margin-medium">
                             <li>List item 1</li>
                             <li>List item 2</li>
                             <li>List item 3</li>
                         </ul>
 
-                        <dl class="uk-description-list uk-description-list-divider">
+                        <dl class="uk-description-list uk-description-list-divider uk-margin-medium">
                             <dt>Description lists</dt>
                             <dd>A description text</dd>
                             <dt>Description lists</dt>
                             <dd>A description text</dd>
                         </dl>
 
-                    </div>
-                    <div>
-
                         <ul uk-accordion>
                             <li class="uk-open">
 

package/tests/js/index.js

@@ -1,5 +1,6 @@
 /* global TESTS */
 import { $$, addClass, css, on, prepend, removeClass, ucfirst } from 'uikit-util';
+import { awaitFrame, awaitTimeout } from '../../src/js/util/await';
 
 const tests = TESTS;
 const storage = window.sessionStorage;
@@ -59,13 +60,13 @@ document.writeln(
     `<script src="${style.icons ? style.icons : '../dist/js/uikit-icons.js'}"></script>`,
 );
 
-on(window, 'load', () =>
-    setTimeout(
-        () =>
-            requestAnimationFrame(() => {
-                const $container = prepend(
-                    document.body,
-                    `
+on(window, 'load', async () => {
+    await awaitTimeout(100);
+    await awaitFrame();
+
+    const $container = prepend(
+        document.body,
+        `
         <div class="uk-container">
             <select class="uk-select uk-form-width-small" style="margin: 20px 20px 20px 0" aria-label="Component switcher">
                 <option value="index.html">Overview</option>
@@ -95,82 +96,74 @@ on(window, 'load', () =>
             </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(
-                        $$('*'),
-                        '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',
-                    );
-
-                    addClass($$('.uk-navbar-container'), 'uk-navbar-transparent');
-
-                    css(
-                        document.documentElement,
-                        'background',
-                        $inverse.value === 'dark' ? '#fff' : '#222',
-                    );
-                    addClass(document.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';
-            }),
-        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(
+            $$('*'),
+            'uk-card-default',
+            'uk-card-muted',
+            'uk-card-primary',
+            'uk-card-secondary',
+            'uk-card-overlay',
+            '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',
+        );
+
+        addClass($$('.uk-navbar-container'), 'uk-navbar-transparent');
+
+        css(document.documentElement, 'background', $inverse.value === 'dark' ? '#fff' : '#222');
+        addClass(document.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';
+});
 
 function getParam(name) {
     const match = new RegExp(`[?&]${name}=([^&]*)`).exec(window.location.search);

package/tests/lightbox.html

@@ -96,7 +96,7 @@
 
                     <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://yootheme.com/site/images/media/yootheme-pro.mp4" caption="Video" poster="images/photo.jpg" attrs="class: uk-inverse-light">
                         <figure>
-                            <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="400" height="267" class="uk-object-cover" style="aspect-ratio: 400 / 267;" playsinline loop uk-video="automute: true"></video>
+                            <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="400" height="267" class="uk-object-cover" style="aspect-ratio: 400 / 267;" playsinline loop muted uk-video></video>
                             <figcaption class="uk-margin-small-top">Video</figcaption>
                         </figure>
                     </a>
@@ -191,7 +191,7 @@
 
                     <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://yootheme.com/site/images/media/yootheme-pro.mp4" caption="Video" poster="images/photo.jpg" attrs="class: uk-inverse-light">
                         <figure>
-                            <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="400" height="267" class="uk-object-cover" style="aspect-ratio: 400 / 267;" playsinline loop uk-video="automute: true"></video>
+                            <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="400" height="267" class="uk-object-cover" style="aspect-ratio: 400 / 267;" playsinline loop muted uk-video></video>
                             <figcaption class="uk-margin-small-top">Video</figcaption>
                         </figure>
                     </a>
@@ -286,7 +286,7 @@
 
                     <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://yootheme.com/site/images/media/yootheme-pro.mp4" caption="Video" poster="images/photo.jpg" attrs="class: uk-inverse-light">
                         <figure>
-                            <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="400" height="267" class="uk-object-cover" style="aspect-ratio: 400 / 267;" playsinline loop uk-video="automute: true"></video>
+                            <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="400" height="267" class="uk-object-cover" style="aspect-ratio: 400 / 267;" playsinline loop muted uk-video></video>
                             <figcaption class="uk-margin-small-top">Video</figcaption>
                         </figure>
                     </a>
@@ -397,7 +397,7 @@
 
                     <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://yootheme.com/site/images/media/yootheme-pro.mp4" caption="Video" poster="images/photo.jpg" attrs="class: uk-inverse-light">
                         <figure>
-                            <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="400" height="267" class="uk-object-cover" style="aspect-ratio: 400 / 267;" playsinline loop uk-video="automute: true"></video>
+                            <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="400" height="267" class="uk-object-cover" style="aspect-ratio: 400 / 267;" playsinline loop muted uk-video></video>
                             <figcaption class="uk-margin-small-top">Video</figcaption>
                         </figure>
                     </a>

package/tests/link.html

@@ -18,11 +18,11 @@
                 <div>
 
                     <ul class="uk-list">
-                        <li><a href="">Link</a></li>
-                        <li><a href="" class="uk-link-muted">Link Muted</a></li>
-                        <li><a href="" class="uk-link-text">Link Text</a></li>
-                        <li><a href="" class="uk-link-heading">Link Heading</a></li>
-                        <li><a href="" class="uk-link-reset">Link Reset</a></li>
+                        <li><a href>Link</a></li>
+                        <li><a href class="uk-link-muted">Link Muted</a></li>
+                        <li><a href class="uk-link-text">Link Text</a></li>
+                        <li><a href class="uk-link-heading">Link Heading</a></li>
+                        <li><a href class="uk-link-reset">Link Reset</a></li>
                     </ul>
 
                 </div>
@@ -38,17 +38,80 @@
                     </a>
 
                 </div>
+                <div>
+
+                    <ul class="uk-list">
+                        <li>
+                            <a href>
+                                <span class="uk-margin-small-right" uk-icon="icon: table"></span><span class="uk-text-middle">Link</span>
+                            </a>
+                        </li>
+                        <li>
+                            <a href class="uk-link-muted">
+                                <span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span><span class="uk-text-middle">Link Muted</span>
+                            </a>
+                        </li>
+                        <li>
+                            <a href class="uk-link-text">
+                                <span class="uk-margin-small-right" uk-icon="icon: trash"></span><span class="uk-text-middle">Link Text</span>
+                            </a>
+                        </li>
+                        <li>
+                            <a href class="uk-link-heading">
+                                <span class="uk-margin-small-right" uk-icon="icon: user"></span><span class="uk-text-middle">Link Heading</span>
+                            </a>
+                        </li>
+                        <li>
+                            <a href class="uk-link-reset">
+                                <span class="uk-margin-small-right" uk-icon="icon: pencil"></span><span class="uk-text-middle">Link Reset</span>
+                            </a>
+                        </li>
+                    </ul>
+
+                </div>
             </div>
 
-            <h1><a href="" class="uk-link-text">Heading with link text</a></h1>
+            <h1><a href class="uk-link">Heading with link</a></h1>
+
+            <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>
+
+            <h1><a href class="uk-link-muted">Heading with link muted</a></h1>
+
+            <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>
+
+            <h1><a href class="uk-link-text">Heading with link text</a></h1>
+
+            <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>
+
+            <h1><a href class="uk-link-heading">Heading with link heading</a></h1>
+
+            <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>
+
+            <h1><a href class="uk-link-reset">Heading with link reset</a></h1>
+
+            <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>
+
+            <h1><a href class="uk-link">
+                <span class="uk-margin-small-right" uk-icon="icon: folder; ratio: 2.5"></span><span class="uk-text-middle">Heading with link</span>
+            </a></h1>
+
+            <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>
+
+            <h1><a href class="uk-link-muted">
+                <span class="uk-margin-small-right" uk-icon="icon: calendar; ratio: 2.5"></span><span class="uk-text-middle">Heading with link muted</span>
+            </a></h1>
 
             <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>
 
-            <h1><a href="" class="uk-link-heading">Heading with link heading</a></h1>
+            <h1><a href class="uk-link-text">
+                <span class="uk-margin-small-right" uk-icon="icon: settings; ratio: 2.5"></span><span class="uk-text-middle">Heading with link text</span>
+            </a></h1>
 
             <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>
 
-            <h1><a href="" class="uk-link-reset">Heading with link reset</a></h1>
+            <h1><a href class="uk-link-heading">
+                <span class="uk-margin-small-right" uk-icon="icon: file-text; ratio: 2.5"></span><span class="uk-text-middle">Heading with link heading</span>
+            </a></h1>
 
             <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>
 

package/tests/modal.html

@@ -375,7 +375,7 @@
         <div id="modal-media-video" uk-modal>
             <div class="uk-modal-dialog uk-width-auto uk-margin-auto-vertical">
                 <button class="uk-modal-close-outside" type="button" uk-close></button>
-                <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="1920" height="1080" controls playsinline uk-video></video>
+                <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="1920" height="1080" playsinline controls uk-video></video>
             </div>
         </div>