uikit 3.14.4-dev.871ba3c05 → 3.14.4-dev.a014fa609

package/tests/offcanvas.html

@@ -142,10 +142,10 @@
 
                     <button class="uk-offcanvas-close uk-close-large" type="button" uk-close uk-toggle="cls: uk-close-large; mode: media; media: @s"></button>
 
-                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical uk-nav-parent-icon" uk-nav>
+                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical" uk-nav>
                         <li class="uk-active"><a href="#">Active</a></li>
                         <li class="uk-parent">
-                            <a href="#">Parent</a>
+                            <a href="#">Parent <span uk-nav-parent-icon></span></a>
                             <ul class="uk-nav-sub">
                                 <li><a href="#">Sub item</a></li>
                                 <li><a href="#">Sub item</a></li>
@@ -189,10 +189,10 @@
 
                     <button class="uk-offcanvas-close uk-close-large" type="button" uk-close uk-toggle="cls: uk-close-large; mode: media; media: @s"></button>
 
-                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical uk-nav-parent-icon" uk-nav>
+                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical" uk-nav>
                         <li class="uk-active"><a href="#">Active</a></li>
                         <li class="uk-parent">
-                            <a href="#">Parent</a>
+                            <a href="#">Parent <span uk-nav-parent-icon></span></a>
                             <ul class="uk-nav-sub">
                                 <li><a href="#">Sub item</a></li>
                                 <li><a href="#">Sub item</a></li>
@@ -236,10 +236,10 @@
 
                     <button class="uk-offcanvas-close uk-close-large" type="button" uk-close uk-toggle="cls: uk-close-large; mode: media; media: @s"></button>
 
-                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical uk-nav-parent-icon" uk-nav>
+                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical" uk-nav>
                         <li class="uk-active"><a href="#">Active</a></li>
                         <li class="uk-parent">
-                            <a href="#">Parent</a>
+                            <a href="#">Parent <span uk-nav-parent-icon></span></a>
                             <ul class="uk-nav-sub">
                                 <li><a href="#">Sub item</a></li>
                                 <li><a href="#">Sub item</a></li>
@@ -283,10 +283,10 @@
 
                     <button class="uk-offcanvas-close uk-close-large" type="button" uk-close uk-toggle="cls: uk-close-large; mode: media; media: @s"></button>
 
-                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical uk-nav-parent-icon" uk-nav>
+                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical" uk-nav>
                         <li class="uk-active"><a href="#">Active</a></li>
                         <li class="uk-parent">
-                            <a href="#">Parent</a>
+                            <a href="#">Parent <span uk-nav-parent-icon></span></a>
                             <ul class="uk-nav-sub">
                                 <li><a href="#">Sub item</a></li>
                                 <li><a href="#">Sub item</a></li>
@@ -330,10 +330,10 @@
 
                     <button class="uk-offcanvas-close uk-close-large" type="button" uk-close uk-toggle="cls: uk-close-large; mode: media; media: @s"></button>
 
-                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical uk-nav-parent-icon" uk-nav>
+                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical" uk-nav>
                         <li class="uk-active"><a href="#">Active</a></li>
                         <li class="uk-parent">
-                            <a href="#">Parent</a>
+                            <a href="#">Parent <span uk-nav-parent-icon></span></a>
                             <ul class="uk-nav-sub">
                                 <li><a href="#">Sub item</a></li>
                                 <li><a href="#">Sub item</a></li>
@@ -377,10 +377,10 @@
 
                     <button class="uk-offcanvas-close uk-close-large" type="button" uk-close uk-toggle="cls: uk-close-large; mode: media; media: @s"></button>
 
-                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical uk-nav-parent-icon" uk-nav>
+                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical" uk-nav>
                         <li class="uk-active"><a href="#">Active</a></li>
                         <li class="uk-parent">
-                            <a href="#">Parent</a>
+                            <a href="#">Parent <span uk-nav-parent-icon></span></a>
                             <ul class="uk-nav-sub">
                                 <li><a href="#">Sub item</a></li>
                                 <li><a href="#">Sub item</a></li>
@@ -424,10 +424,10 @@
 
                     <button class="uk-offcanvas-close uk-close-large" type="button" uk-close uk-toggle="cls: uk-close-large; mode: media; media: @s"></button>
 
-                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical uk-nav-parent-icon" uk-nav>
+                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical" uk-nav>
                         <li class="uk-active"><a href="#">Active</a></li>
                         <li class="uk-parent">
-                            <a href="#">Parent</a>
+                            <a href="#">Parent <span uk-nav-parent-icon></span></a>
                             <ul class="uk-nav-sub">
                                 <li><a href="#">Sub item</a></li>
                                 <li><a href="#">Sub item</a></li>
@@ -471,10 +471,10 @@
 
                     <button class="uk-offcanvas-close uk-close-large" type="button" uk-close uk-toggle="cls: uk-close-large; mode: media; media: @s"></button>
 
-                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical uk-nav-parent-icon" uk-nav>
+                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical" uk-nav>
                         <li class="uk-active"><a href="#">Active</a></li>
                         <li class="uk-parent">
-                            <a href="#">Parent</a>
+                            <a href="#">Parent <span uk-nav-parent-icon></span></a>
                             <ul class="uk-nav-sub">
                                 <li><a href="#">Sub item</a></li>
                                 <li><a href="#">Sub item</a></li>
@@ -769,13 +769,9 @@
 
         <script>
 
-            var util = UIkit.util;
-
-            util.on(util.$('#js-toggle'), 'click', function (e) {
-
+            UIkit.util.on('#js-toggle', 'click', e => {
                 e.preventDefault();
                 UIkit.offcanvas('#js-offcanvas-toggle').toggle();
-
             });
 
         </script>

package/tests/parallax.html

@@ -190,7 +190,7 @@
 
                 <h2>Animated properties</h2>
 
-                <p>You can define multiple animation stops by using a comma separated list of values. (e.g. x: 0,50,150). A stop can be defined by a value and a position. If you don't specify the position of a stop, it is placed halfway between the one that precedes it and the one that follows it.</p>
+                <p>You can define multiple animation stops by using a comma-separated list of values. (e.g. x: 0,50,150). A stop can be defined by a value and a position. If you don't specify the position of a stop, it is placed halfway between the one that precedes it and the one that follows it.</p>
 
                 <div class="uk-overflow-auto">
                     <table class="uk-table uk-table-striped">

package/tests/position.html

@@ -9,7 +9,7 @@
         <style>
 
             /* JavaScript */
-            #js-viewport {
+            #js-boundary {
                 height: 300px;
                 outline: 1px solid rgba(0,0,0,0.1);
                 position: relative;
@@ -237,7 +237,7 @@
 
             <h2>JavaScript</h2>
 
-            <div id="js-viewport" class="uk-margin">
+            <div id="js-boundary" class="uk-margin">
                 <div id="js-target" class="uk-flex uk-flex-center uk-flex-middle" draggable="true">Drag me!</div>
             </div>
 
@@ -302,19 +302,21 @@
                     </div>
 
                     <div class="uk-margin">
-                        <span class="uk-form-label">Flip</span>
+                        <span class="uk-form-label">Placement</span>
                         <label>
                             Horizontal
-                            <select id="js-flip_x" class="uk-select uk-form-small uk-form-width-xsmall">
-                                <option value="x">flip</option>
-                                <option value="">none</option>
+                            <select id="js-placement_x" class="uk-select uk-form-small uk-form-width-xsmall">
+                                <option value="">None</option>
+                                <option value="flip" selected>Flip</option>
+                                <option value="shift">Shift</option>
                             </select>
                         </label>
                         <label>
                             Vertical
-                            <select id="js-flip_y" class="uk-select uk-form-small uk-form-width-xsmall">
-                                <option value="y">flip</option>
-                                <option value="">none</option>
+                            <select id="js-placement_y" class="uk-select uk-form-small uk-form-width-xsmall">
+                                <option value="">None</option>
+                                <option value="flip" selected>Flip</option>
+                                <option value="shift">Shift</option>
                             </select>
                         </label>
                     </div>
@@ -327,7 +329,7 @@
         <script>
 
             const {$, $$, css, getEventPos, on, offset, positionAt} = UIkit.util;
-            let viewport = $('#js-viewport');
+            let boundary = $('#js-boundary');
             let element = $('#js-element');
             let target = $('#js-target');
             let offsetX;
@@ -338,18 +340,18 @@
                     element,
                     target,
                     {
-                        viewport,
+                        boundary,
                         attach:{
                             element: [$('#js-element_x').value, $('#js-element_y').value],
                             target: [$('#js-target_x').value, $('#js-target_y').value]
                         },
                         offset: [$('#js-offset_x').value, $('#js-offset_y').value],
-                        flip: [$('#js-flip_x').value, $('#js-flip_y').value]
+                        placement: [$('#js-placement_x').value, $('#js-placement_y').value]
                     }
                 );
             }
 
-            on(window, 'dragstart', function (e) {
+            on(window, 'dragstart', e => {
                 e.dataTransfer.setDragImage(new Image(), 0, 0);
 
                 offsetX = Math.round(e.pageX - offset(target).left);
@@ -358,7 +360,7 @@
             });
 
             let lastPos;
-            on(window, 'dragover', function (e) {
+            on(window, 'dragover', e => {
 
                 const pos = getEventPos(e);
 
@@ -372,9 +374,9 @@
                 // positions target at mouse cursor
                 positionAt(
                     target,
-                    viewport,
+                    boundary,
                     {
-                        offset: [e.pageX - offset(viewport).left - offsetX, e.pageY - offset(viewport).top - offsetY]
+                        offset: [e.pageX - offset(boundary).left - offsetX, e.pageY - offset(boundary).top - offsetY]
                     }
                 );
 

package/tests/progress.html

@@ -36,20 +36,20 @@
         </div>
 
         <script>
+            const {ready, $} = UIkit.util;
 
+            ready(() => {
 
-            UIkit.util.ready(function () {
+                const bar = $('#js-progressbar');
+                const animate = setInterval(() => {
 
-                var bar = document.getElementById('js-progressbar'),
-                    animate = setInterval(function () {
+                    bar.value += 10;
 
-                        bar.value += 10;
+                    if (bar.value >= bar.max) {
+                        clearInterval(animate);
+                    }
 
-                        if (bar.value >= bar.max) {
-                            clearInterval(animate);
-                        }
-
-                    }, 1000);
+                }, 1000);
 
             });
 

package/tests/scroll.html

@@ -7,13 +7,10 @@
         <title>Scroll - UIkit tests</title>
         <script src="js/test.js"></script>
         <script>
-
-            UIkit.util.on(document, 'change', '#offset', function (e) {
-                UIkit.util.$$('[uk-scroll]').forEach(function (el) {
-                    el.setAttribute('data-offset', e.target.value);
-                })
-            })
-
+            const {$$, attr, on} = UIkit.util;
+            on(document, 'change', '#offset', e =>
+                attr($$('[uk-scroll]'), 'data-offset', e.target.value)
+            )
         </script>
     </head>
 
@@ -87,9 +84,9 @@
 
             <script>
 
-                UIkit.util.on('#js-top-callback', 'scrolled', function () {
-                    alert('Done.');
-                });
+                UIkit.util.on('#js-top-callback', 'scrolled', () =>
+                    alert('Done.')
+                );
 
             </script>
 

package/tests/search.html

@@ -235,7 +235,7 @@
 
                     <div>
                         <a class="uk-navbar-toggle" href="#" uk-search-icon></a>
-                        <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav">
+                        <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; flip: false">
 
                             <div class="uk-grid-small uk-flex-middle" uk-grid>
                                 <div class="uk-width-expand">
@@ -257,7 +257,7 @@
             <nav class="uk-navbar-container uk-margin" uk-navbar>
                 <div class="uk-navbar-left">
 
-                    <a class="uk-navbar-item uk-logo" href="#">Justify</a>
+                    <a class="uk-navbar-item uk-logo" href="#">Stretch</a>
 
                     <ul class="uk-navbar-nav">
                         <li class="uk-active"><a href="#">Active</a></li>
@@ -275,7 +275,7 @@
 
                     <div>
                         <a class="uk-navbar-toggle" href="#" uk-search-icon></a>
-                        <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; boundary-align: true; pos: bottom-justify; flip: x">
+                        <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
 
                             <div class="uk-grid-small uk-flex-middle" uk-grid>
                                 <div class="uk-width-expand">
@@ -294,7 +294,7 @@
                 </div>
             </nav>
 
-            <nav class="uk-navbar-container uk-margin" uk-navbar="dropbar: +.uk-navbar-dropbar">
+            <nav class="uk-navbar-container uk-margin" uk-navbar="target-y: !.uk-navbar-container; dropbar: +.uk-navbar-dropbar">
                 <div class="uk-navbar-left">
 
                     <a class="uk-navbar-item uk-logo" href="#">Dropbar</a>
@@ -315,7 +315,7 @@
 
                     <div>
                         <a class="uk-navbar-toggle" href="#" uk-search-icon></a>
-                        <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; boundary-align: true; pos: bottom-justify; flip: x">
+                        <div class="uk-dropbar uk-dropbar-top" uk-drop="mode: click; cls-drop: uk-dropbar; boundary: !.uk-navbar; stretch: x; flip: false; target-y: !.uk-navbar-container">
 
                             <div class="uk-grid-small uk-flex-middle" uk-grid>
                                 <div class="uk-width-expand">
@@ -324,7 +324,7 @@
                                     </form>
                                 </div>
                                 <div class="uk-width-auto">
-                                    <a class="uk-navbar-dropdown-close" href="#" uk-close></a>
+                                    <a class="uk-dropbar-close" href="#" uk-close></a>
                                 </div>
                             </div>
 

package/tests/slider.html

@@ -545,11 +545,12 @@
 
         <script>
 
-            ['finite', 'center', 'sets'].forEach(function(attr) {
-                UIkit.util.on('#js-'+attr+'-switcher', 'change', function () {
-                    UIkit.util.attr(UIkit.util.$$('[uk-slider]'), attr, this.value);
-                });
-            });
+            const {attr, $$, on} = UIkit.util;
+            for (const attribute of ['finite', 'center', 'sets']) {
+                on(`#js-${attribute}-switcher`, 'change', e =>
+                    attr($$('[uk-slider]'), attribute, e.target.value)
+                );
+            }
 
         </script>
 

package/tests/slideshow.html

@@ -442,14 +442,14 @@
         </div>
 
         <script>
-
-            UIkit.util.on('#js-animation-switcher', 'change', function () {
-                UIkit.util.attr(UIkit.util.$$('.js-slideshow-animation'), 'animation', this.value);
-            });
-
-            UIkit.util.on('#js-finite-switcher', 'change', function () {
-                UIkit.util.attr(UIkit.util.$$('[uk-slideshow]'), 'finite', this.value);
-            });
+            const {attr, $$, on} = UIkit.util;
+            on('#js-animation-switcher', 'change', e =>
+                attr($$('.js-slideshow-animation'), 'animation', e.target.value)
+            );
+
+            on('#js-finite-switcher', 'change', e =>
+                attr($$('[uk-slideshow]'), 'finite', e.target.value)
+            );
 
         </script>
 

package/tests/sortable.html

@@ -16,15 +16,13 @@
         </style>
         <script>
 
-            var util = UIkit.util;
+            const {on, ready} = UIkit.util;
 
-            util.ready(function () {
-
-                util.on(document.body, 'start moved added removed stop', function (e, sortable, el) {
-                    console.log(e.type, sortable, el);
-                });
-
-            });
+            ready(() =>
+                on(document.body, 'start moved added removed stop', (e, sortable, el) =>
+                    console.log(e.type, sortable, el)
+                )
+            );
 
         </script>
     </head>

package/tests/sticky-navbar.html

@@ -74,7 +74,7 @@
                             <div class="uk-navbar-right">
 
                                 <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
-                                <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x; pos: bottom-stretch; animate-out: true">
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
                                     <ul class="uk-nav uk-navbar-dropdown-nav">
                                         <li class="uk-active"><a href="#">Active</a></li>
                                         <li class="uk-parent">
@@ -121,7 +121,7 @@
             <div uk-sticky="end: #sticky-dropbar; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
                 <nav class="uk-navbar-container">
                     <div class="uk-container">
-                        <div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container">
+                        <div uk-navbar="target-y: !.uk-navbar-container; dropbar: true; dropbar-anchor: !.uk-navbar-container">
                             <div class="uk-navbar-left">
 
                                 <a class="uk-navbar-item uk-logo" href="#">Sticky + Dropbar</a>
@@ -175,7 +175,7 @@
                             <div class="uk-navbar-right">
 
                                 <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
-                                <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x; pos: bottom-stretch; animate-out: true">
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false; target-y: !.uk-navbar-container">
                                     <ul class="uk-nav uk-navbar-dropdown-nav">
                                         <li class="uk-active"><a href="#">Active</a></li>
                                         <li class="uk-parent">
@@ -276,7 +276,7 @@
                             <div class="uk-navbar-right">
 
                                 <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
-                                <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x; pos: bottom-stretch; animate-out: true">
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
                                     <ul class="uk-nav uk-navbar-dropdown-nav">
                                         <li class="uk-active"><a href="#">Active</a></li>
                                         <li class="uk-parent">
@@ -323,7 +323,7 @@
             <div uk-sticky="end: #scrollup-dropbar; show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
                 <nav class="uk-navbar-container">
                     <div class="uk-container uk-container-expand">
-                        <div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container">
+                        <div uk-navbar="target-y: !.uk-navbar-container; dropbar: true; dropbar-anchor: !.uk-navbar-container">
                             <div class="uk-navbar-left">
 
                                 <a class="uk-navbar-item uk-logo" href="#">Scroll Up + Dropbar</a>
@@ -377,7 +377,7 @@
                             <div class="uk-navbar-right">
 
                                 <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
-                                <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x; pos: bottom-stretch; animate-out: true">
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false; target-y: !.uk-navbar-container">
                                     <ul class="uk-nav uk-navbar-dropdown-nav">
                                         <li class="uk-active"><a href="#">Active</a></li>
                                         <li class="uk-parent">
@@ -480,7 +480,7 @@
                                 <div class="uk-navbar-right">
 
                                     <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
-                                    <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x; pos: bottom-stretch; animate-out: true">
+                                    <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
                                         <ul class="uk-nav uk-navbar-dropdown-nav">
                                             <li class="uk-active"><a href="#">Active</a></li>
                                             <li class="uk-parent">
@@ -531,7 +531,7 @@
                 <div uk-sticky="start: 200; end: #transparent-dropbar; show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent uk-light">
                     <nav class="uk-navbar-container">
                         <div class="uk-container uk-container-expand">
-                            <div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container">
+                            <div uk-navbar="target-y: !.uk-navbar-container; dropbar: true; dropbar-anchor: !.uk-navbar-container">
                                 <div class="uk-navbar-left">
 
                                     <a class="uk-navbar-item uk-logo" href="#">Transparent + Dropbar</a>
@@ -585,7 +585,7 @@
                                 <div class="uk-navbar-right">
 
                                     <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
-                                    <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x; pos: bottom-stretch; animate-out: true">
+                                    <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false; target-y: !.uk-navbar-container">
                                         <ul class="uk-nav uk-navbar-dropdown-nav">
                                             <li class="uk-active"><a href="#">Active</a></li>
                                             <li class="uk-parent">

package/tests/sticky.html

@@ -407,14 +407,14 @@
 
         <script>
 
-            var options = UIkit.util.$$('#js-height-switcher option').map(function (option) { return option.value; });
-
-            UIkit.util.on('#js-height-switcher', 'change', function () {
-                var value = this.value;
-                UIkit.util.$$('.js-overflow-flip').forEach(function (table) {
-                    UIkit.util.removeClass(table, options);
-                    UIkit.util.addClass(table, value);
-                });
+            const {$$, addClass, on, removeClass } = UIkit.util;
+
+            on('#js-height-switcher', 'change', (e) => {
+                const options = $$('option', e.target).map(({value}) => value);
+                for (const el of $$('.js-overflow-flip')) {
+                    removeClass(el, options);
+                    addClass(el, e.target.value);
+                }
             });
 
         </script>

package/tests/switcher.html

@@ -358,7 +358,7 @@
                             <td><code>animation</code></td>
                             <td>String</td>
                             <td>false</td>
-                            <td>The space separated names of animations to use. (Comma separate for animation out)</td>
+                            <td>Space-separated names of animations. Comma-separated for animation out.</td>
                         </tr>
                         <tr>
                             <td><code>duration</code></td>

package/tests/tab.html

@@ -188,7 +188,7 @@
                             <td><code>animation</code></td>
                             <td>String</td>
                             <td>false</td>
-                            <td>The space separated names of animations to use. (Comma separate for animation out)</td>
+                            <td>Space-separated names of animations. Comma-separated for animation out.</td>
                         </tr>
                         <tr>
                             <td><code>duration</code></td>

package/tests/table.html

@@ -313,14 +313,14 @@
 
         <script>
 
-            var options = UIkit.util.$$('#js-size-switcher option').map(function (option) { return option.value; });
+            const {$$, addClass, on, removeClass } = UIkit.util;
 
-            UIkit.util.on('#js-size-switcher', 'change', function () {
-                var value = this.value;
-                UIkit.util.$$('.uk-table').forEach(function (table) {
-                    UIkit.util.removeClass(table, options);
-                    UIkit.util.addClass(table, value);
-                });
+            on('#js-size-switcher', 'change', (e) => {
+                const options = $$('option', e.target).map(({value}) => value);
+                for (const el of $$('.uk-table')) {
+                    removeClass(el, options);
+                    addClass(el, e.target.value);
+                }
             });
 
         </script>

package/tests/toggle.html

@@ -144,7 +144,7 @@
                             <td><code>mode</code></td>
                             <td>hover | click | media</td>
                             <td>click</td>
-                            <td>Comma separated list of trigger behaviour modes.</td>
+                            <td>Comma-separated list of trigger behaviour modes.</td>
                         </tr>
                         <tr>
                             <td><code>media</code></td>
@@ -162,7 +162,7 @@
                             <td><code>animation</code></td>
                             <td>String</td>
                             <td>false</td>
-                            <td>The space separated names of animations to use. (Comma separate for animation out)</td>
+                            <td>Space-separated names of animations. Comma-separated for animation out.</td>
                         </tr>
                         <tr>
                             <td><code>duration</code></td>

package/tests/tooltip.html

@@ -90,7 +90,7 @@
                             <td><code>animation</code></td>
                             <td>String</td>
                             <td>false</td>
-                            <td>The space separated names of animations to use. (Comma separate for animation out)</td>
+                            <td>Space-separated names of animations. Comma-separated for animation out.</td>
                         </tr>
                         <tr>
                             <td><code>duration</code></td>