uikit 3.16.7-dev.fcb5a4616 → 3.16.8-dev.dc18e16fb

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.16.7-dev.fcb5a4616",
+  "version": "3.16.8-dev.dc18e16fb",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/api/boot.js

@@ -4,7 +4,16 @@ import { apply, hasAttr, inBrowser, isPlainObject, startsWith, trigger } from 'u
 
 export default function (App) {
     if (inBrowser && window.MutationObserver) {
-        requestAnimationFrame(() => init(App));
+        if (document.readyState === 'interactive') {
+            requestAnimationFrame(() => init(App));
+        } else {
+            new MutationObserver((records, observer) => {
+                if (document.body) {
+                    init(App);
+                    observer.disconnect();
+                }
+            }).observe(document.documentElement, { childList: true });
+        }
     }
 }
 

package/src/js/api/observables.js

@@ -61,7 +61,7 @@ export function scroll(options) {
             };
         },
         {
-            target: window,
+            target: () => window,
             ...options,
         },
         'scroll'

package/src/js/api/watch.js

@@ -13,7 +13,7 @@ export function callWatches(instance) {
             runWatches(instance, initial);
         }
         instance._watch = null;
-    });
+    }, true);
 }
 
 function runWatches(instance, initial) {

package/src/js/core/accordion.js

@@ -7,6 +7,7 @@ import {
     $,
     $$,
     attr,
+    children,
     css,
     dimensions,
     filter,
@@ -171,6 +172,9 @@ export default {
             });
 
             attr(content, { role: 'region', 'aria-labelledby': toggle.id });
+            if (isTag(content, 'ul')) {
+                attr(children(content), 'role', 'presentation');
+            }
         }
     },
 

package/src/js/core/dropnav.js

@@ -35,7 +35,6 @@ export default {
     mixins: [Class, Container],
 
     props: {
-        dropdown: String,
         align: String,
         clsDrop: String,
         boundary: Boolean,
@@ -55,7 +54,6 @@ export default {
     },
 
     data: {
-        dropdown: '> li > a, > ul > li > a',
         align: isRtl ? 'right' : 'left',
         clsDrop: 'uk-dropdown',
         clsDropbar: 'uk-dropnav-dropbar',
@@ -64,6 +62,7 @@ export default {
         dropbarAnchor: false,
         duration: 200,
         container: false,
+        selNavItem: '> li > a, > ul > li > a',
     },
 
     computed: {
@@ -136,8 +135,8 @@ export default {
         },
 
         items: {
-            get({ dropdown }, $el) {
-                return $$(dropdown, $el);
+            get({ selNavItem }, $el) {
+                return $$(selNavItem, $el);
             },
 
             watch(items) {
@@ -164,7 +163,7 @@ export default {
             name: 'mouseover focusin',
 
             delegate() {
-                return this.dropdown;
+                return this.selNavItem;
             },
 
             handler({ current, type }) {
@@ -191,7 +190,7 @@ export default {
             name: 'keydown',
 
             delegate() {
-                return this.dropdown;
+                return this.selNavItem;
             },
 
             handler(e) {

package/src/js/core/navbar.js

@@ -5,14 +5,15 @@ export default {
     extends: Dropnav,
 
     data: {
-        dropdown: '.uk-navbar-nav > li > a, .uk-navbar-item, .uk-navbar-toggle',
         clsDrop: 'uk-navbar-dropdown',
+        selNavItem:
+            '.uk-navbar-nav > li > a,a.uk-navbar-item,button.uk-navbar-item,.uk-navbar-item a,.uk-navbar-item button,.uk-navbar-toggle', // Simplify with :where() selector once browser target is Safari 14+
     },
 
     computed: {
         items: {
-            get({ dropdown }, $el) {
-                return $$(dropdown, $el);
+            get({ selNavItem }, $el) {
+                return $$(selNavItem, $el);
             },
 
             watch(items) {
@@ -21,7 +22,16 @@ export default {
                     '.uk-navbar-nav, .uk-navbar-left, .uk-navbar-right',
                     this.$el
                 )) {
-                    css(container, 'flexGrow', justify ? $$(this.dropdown, container).length : '');
+                    css(
+                        container,
+                        'flexGrow',
+                        justify
+                            ? $$(
+                                  '.uk-navbar-nav > li > a, .uk-navbar-item, .uk-navbar-toggle',
+                                  container
+                              ).length
+                            : ''
+                    );
                 }
 
                 attr($$('.uk-navbar-nav', this.$el), 'role', 'group');

package/src/js/core/sticky.js

@@ -163,7 +163,7 @@ export default {
 
                 const hide = this.isFixed && types.has('resize') && !sticky;
                 if (hide) {
-                    css(this.selTarget, 'transition', '0s');
+                    preventTransition(this.selTarget);
                     this.hide();
                 }
 
@@ -174,7 +174,6 @@ export default {
 
                 if (hide) {
                     this.show();
-                    requestAnimationFrame(() => css(this.selTarget, 'transition', ''));
                 }
 
                 const viewport = toPx('100vh', 'height');
@@ -359,6 +358,7 @@ export default {
                     this.show();
                     Animation.in(this.$el, this.animation).catch(noop);
                 } else {
+                    preventTransition(this.selTarget);
                     this.show();
                 }
             },
@@ -480,3 +480,8 @@ function coerce(value) {
 function reset(el) {
     css(el, { position: '', top: '', marginTop: '', width: '' });
 }
+
+function preventTransition(el) {
+    css(el, 'transition', '0s');
+    requestAnimationFrame(() => css(el, 'transition', ''));
+}

package/src/js/mixin/slider-autoplay.js

@@ -1,4 +1,4 @@
-import { attr, matches, pointerEnter, pointerLeave } from 'uikit-util';
+import { attr, matches } from 'uikit-util';
 
 export default {
     props: {
@@ -14,7 +14,7 @@ export default {
     },
 
     connected() {
-        attr(this.list, 'aria-live', 'polite');
+        attr(this.list, 'aria-live', this.autoplay ? 'off' : 'polite');
         this.autoplay && this.startAutoplay();
     },
 
@@ -46,56 +46,27 @@ export default {
                 }
             },
         },
-        {
-            name: `${pointerEnter} focusin`,
-
-            filter() {
-                return this.autoplay;
-            },
-
-            handler(e) {
-                if (e.type !== pointerEnter || this.pauseOnHover) {
-                    this.stopAutoplay();
-                }
-            },
-        },
-        {
-            name: `${pointerLeave} focusout`,
-
-            filter() {
-                return this.autoplay;
-            },
-
-            handler(e) {
-                if (e.type !== pointerLeave || this.pauseOnHover) {
-                    this.startAutoplay();
-                }
-            },
-        },
     ],
 
     methods: {
         startAutoplay() {
-            if (
-                (this.draggable && matches(this.$el, ':focus-within')) ||
-                (this.pauseOnHover && matches(this.$el, ':hover'))
-            ) {
-                return;
-            }
-
             this.stopAutoplay();
 
-            this.interval = setInterval(
-                () => !this.stack.length && this.show('next'),
-                this.autoplayInterval
-            );
-
-            attr(this.list, 'aria-live', 'off');
+            this.interval = setInterval(() => {
+                if (
+                    !(
+                        this.stack.length ||
+                        (this.draggable && matches(this.$el, ':focus-within')) ||
+                        (this.pauseOnHover && matches(this.$el, ':hover'))
+                    )
+                ) {
+                    this.show('next');
+                }
+            }, this.autoplayInterval);
         },
 
         stopAutoplay() {
             clearInterval(this.interval);
-            attr(this.list, 'aria-live', 'polite');
         },
     },
 };

package/src/js/mixin/slider-nav.js

@@ -21,10 +21,12 @@ export default {
         previous: 'Previous slide',
         slideX: 'Slide %s',
         slideLabel: '%s of %s',
+        role: 'String',
     },
 
     data: {
         selNav: false,
+        role: 'region',
     },
 
     computed: {
@@ -60,7 +62,10 @@ export default {
     },
 
     connected() {
-        attr(this.$el, 'aria-roledescription', 'carousel');
+        attr(this.$el, {
+            role: this.role,
+            ariaRoleDescription: 'carousel',
+        });
     },
 
     update: [

package/src/js/util/fastdom.js

@@ -8,8 +8,8 @@ export const fastdom = {
     reads: [],
     writes: [],
 
-    read(task) {
-        this.reads.push(task);
+    read(task, prepend) {
+        this.reads[prepend ? 'unshift' : 'push'](task);
         scheduleFlush();
         return task;
     },

package/src/js/util/scroll.js

@@ -1,5 +1,6 @@
 import { width } from './dimensions';
 import { on } from './event';
+import { matches } from './filter';
 import { css } from './style';
 import { scrollParents } from './viewport';
 
@@ -10,7 +11,7 @@ export function preventBackgroundScroll(el) {
         el,
         'touchmove',
         (e) => {
-            if (e.targetTouches.length !== 1) {
+            if (e.targetTouches.length !== 1 || matches(e.target, 'input[type="range"')) {
                 return;
             }
 

package/src/less/components/base.less

@@ -703,7 +703,6 @@ template { display: none; }
     // Focus
     //
 
-    :focus { outline-color: @inverse-base-focus-outline; }
     :focus-visible { outline-color: @inverse-base-focus-outline; }
 
 }

package/src/less/components/dropbar.less

@@ -24,6 +24,7 @@
 @dropbar-background:                            @global-muted-background;
 @dropbar-color:                                 @global-color;
 @dropbar-color-mode:                            none;
+@dropbar-focus-outline:                         @base-focus-outline;
 
 @dropbar-large-padding-top:                     40px;
 @dropbar-large-padding-bottom:                  @dropbar-large-padding-top;
@@ -82,6 +83,11 @@
 .uk-dropbar:extend(.uk-light all) when (@dropbar-color-mode = light) {}
 .uk-dropbar:extend(.uk-dark all) when (@dropbar-color-mode = dark) {}
 
+.uk-dropbar :focus-visible {
+    outline-color: @dropbar-focus-outline !important;
+}
+
+
 /* Size modifier
  ========================================================================== */
 

package/src/less/components/dropdown.less

@@ -22,6 +22,7 @@
 @dropdown-background:                           @global-muted-background;
 @dropdown-color:                                @global-color;
 @dropdown-color-mode:                           none;
+@dropdown-focus-outline:                        @base-focus-outline;
 
 @dropdown-large-padding:                        40px;
 
@@ -79,6 +80,10 @@
 .uk-dropdown:extend(.uk-light all) when (@dropdown-color-mode = light) {}
 .uk-dropdown:extend(.uk-dark all) when (@dropdown-color-mode = dark) {}
 
+.uk-dropdown :focus-visible {
+    outline-color: @dropdown-focus-outline !important;
+}
+
 
 /* Size modifier
  ========================================================================== */

package/src/less/components/navbar.less

@@ -67,6 +67,7 @@
 @navbar-dropdown-background:                    @global-muted-background;
 @navbar-dropdown-color:                         @global-color;
 @navbar-dropdown-color-mode:                    none;
+@navbar-dropdown-focus-outline:                 @base-focus-outline;
 @navbar-dropdown-grid-gutter-horizontal:        @global-gutter;
 @navbar-dropdown-grid-gutter-vertical:          @navbar-dropdown-grid-gutter-horizontal;
 
@@ -401,6 +402,10 @@
 .uk-navbar-dropdown:extend(.uk-light all) when (@navbar-dropdown-color-mode = light) {}
 .uk-navbar-dropdown:extend(.uk-dark all) when (@navbar-dropdown-color-mode = dark) {}
 
+.uk-navbar-dropdown :focus-visible {
+    outline-color: @navbar-dropdown-focus-outline !important;
+}
+
 /*
  * Grid
  * Adopts `uk-grid`

package/src/less/components/visibility.less

@@ -4,6 +4,7 @@
 // Component:       `uk-hidden-*`
 //                  `uk-visible-*`
 //                  `uk-invisible`
+//                  `uk-hidden-visually`
 //                  `uk-visible-toggle`
 //                  `uk-hidden-hover`
 //                  `uk-invisible-hover`
@@ -96,28 +97,47 @@
  ========================================================================== */
 
 /*
- * Can't use `display: none` nor `visibility: hidden` because both are not focusable.
+ * Mind that `display: none`, `visibility: hidden` and `opacity: 0`
+ * remove the element from the accessibility tree and that
+ * `display: none` and `visibility: hidden` are not focusable.
+ *
  * The target stays visible if any element within receives focus through keyboard.
  */
 
 /*
- * Discard space when hidden.
+ * Remove space when hidden.
+ * 1. Remove from document flow.
+ * 2. Hide element and shrink its dimension. Can't use zero dimensions together
+ *    with `overflow: hidden` it would remove it from the accessibility tree.
+ * 3. Hide the single rendered pixel.
+ * 4. Prevent text wrapping caused by `width: 1px` because it has side effects on vocalisation
+ *    by screen readers and the visual tracking indicator of other assistive technologies.
  */
 
+.uk-hidden-visually:not(:focus):not(:active):not(:focus-within),
 .uk-visible-toggle:not(:hover):not(:focus) .uk-hidden-hover:not(:focus-within) {
+    /* 1 */
     position: absolute !important;
-    width: 0 !important;
-    height: 0 !important;
+    /* 2 */
+    width: 1px !important;
+    height: 1px !important;
     padding: 0 !important;
+    border: 0 !important;
     margin: 0 !important;
     overflow: hidden !important;
+    /* 3 */
+    clip-path: inset(50%) !important;
+    /* 4 */
+    white-space: nowrap !important;
+
 }
 
 /*
  * Keep space when hidden.
+ * Hide element without shrinking its dimension.
  */
 
-.uk-visible-toggle:not(:hover):not(:focus) .uk-invisible-hover:not(:focus-within) { opacity: 0 !important; }
+.uk-visible-toggle:not(:hover):not(:focus) .uk-invisible-hover:not(:focus-within) { clip-path: inset(50%) !important; }
 
 
 /* Based on Hover Capability of the Pointing Device

package/src/scss/components/dropbar.scss

@@ -24,6 +24,7 @@ $dropbar-padding-horizontal-m:                   $global-medium-gutter !default;
 $dropbar-background:                             $global-muted-background !default;
 $dropbar-color:                                  $global-color !default;
 $dropbar-color-mode:                             none !default;
+$dropbar-focus-outline:                          $base-focus-outline !default;
 
 $dropbar-large-padding-top:                      40px !default;
 $dropbar-large-padding-bottom:                   $dropbar-large-padding-top !default;
@@ -82,6 +83,11 @@ $dropbar-large-padding-bottom:                   $dropbar-large-padding-top !def
 @if ( $dropbar-color-mode == light ) { .uk-dropbar { @extend .uk-light !optional;} }
 @if ( $dropbar-color-mode == dark ) { .uk-dropbar { @extend .uk-dark !optional;} }
 
+.uk-dropbar :focus-visible {
+    outline-color: $dropbar-focus-outline !important;
+}
+
+
 /* Size modifier
  ========================================================================== */
 

package/src/scss/components/dropdown.scss

@@ -22,6 +22,7 @@ $dropdown-padding:                               15px !default;
 $dropdown-background:                            $global-muted-background !default;
 $dropdown-color:                                 $global-color !default;
 $dropdown-color-mode:                            none !default;
+$dropdown-focus-outline:                         $base-focus-outline !default;
 
 $dropdown-large-padding:                         40px !default;
 
@@ -79,6 +80,10 @@ $dropdown-nav-sublist-item-hover-color:          $global-color !default;
 @if ( $dropdown-color-mode == light ) { .uk-dropdown { @extend .uk-light !optional;} }
 @if ( $dropdown-color-mode == dark ) { .uk-dropdown { @extend .uk-dark !optional;} }
 
+.uk-dropdown :focus-visible {
+    outline-color: $dropdown-focus-outline !important;
+}
+
 
 /* Size modifier
  ========================================================================== */

package/src/scss/components/navbar.scss

@@ -67,6 +67,7 @@ $navbar-dropdown-padding:                        15px !default;
 $navbar-dropdown-background:                     $global-muted-background !default;
 $navbar-dropdown-color:                          $global-color !default;
 $navbar-dropdown-color-mode:                     none !default;
+$navbar-dropdown-focus-outline:                  $base-focus-outline !default;
 $navbar-dropdown-grid-gutter-horizontal:         $global-gutter !default;
 $navbar-dropdown-grid-gutter-vertical:           $navbar-dropdown-grid-gutter-horizontal !default;
 
@@ -401,6 +402,10 @@ $navbar-dropdown-nav-sublist-item-active-color:  $global-emphasis-color !default
 @if ( $navbar-dropdown-color-mode == light ) { .uk-navbar-dropdown { @extend .uk-light !optional;} }
 @if ( $navbar-dropdown-color-mode == dark ) { .uk-navbar-dropdown { @extend .uk-dark !optional;} }
 
+.uk-navbar-dropdown :focus-visible {
+    outline-color: $navbar-dropdown-focus-outline !important;
+}
+
 /*
  * Grid
  * Adopts `uk-grid`

package/src/scss/components/visibility.scss

@@ -4,6 +4,7 @@
 // Component:       `uk-hidden-*`
 //                  `uk-visible-*`
 //                  `uk-invisible`
+//                  `uk-hidden-visually`
 //                  `uk-visible-toggle`
 //                  `uk-hidden-hover`
 //                  `uk-invisible-hover`
@@ -96,28 +97,47 @@
  ========================================================================== */
 
 /*
- * Can't use `display: none` nor `visibility: hidden` because both are not focusable.
+ * Mind that `display: none`, `visibility: hidden` and `opacity: 0`
+ * remove the element from the accessibility tree and that
+ * `display: none` and `visibility: hidden` are not focusable.
+ *
  * The target stays visible if any element within receives focus through keyboard.
  */
 
 /*
- * Discard space when hidden.
+ * Remove space when hidden.
+ * 1. Remove from document flow.
+ * 2. Hide element and shrink its dimension. Can't use zero dimensions together
+ *    with `overflow: hidden` it would remove it from the accessibility tree.
+ * 3. Hide the single rendered pixel.
+ * 4. Prevent text wrapping caused by `width: 1px` because it has side effects on vocalisation
+ *    by screen readers and the visual tracking indicator of other assistive technologies.
  */
 
+.uk-hidden-visually:not(:focus):not(:active):not(:focus-within),
 .uk-visible-toggle:not(:hover):not(:focus) .uk-hidden-hover:not(:focus-within) {
+    /* 1 */
     position: absolute !important;
-    width: 0 !important;
-    height: 0 !important;
+    /* 2 */
+    width: 1px !important;
+    height: 1px !important;
     padding: 0 !important;
+    border: 0 !important;
     margin: 0 !important;
     overflow: hidden !important;
+    /* 3 */
+    clip-path: inset(50%) !important;
+    /* 4 */
+    white-space: nowrap !important;
+
 }
 
 /*
  * Keep space when hidden.
+ * Hide element without shrinking its dimension.
  */
 
-.uk-visible-toggle:not(:hover):not(:focus) .uk-invisible-hover:not(:focus-within) { opacity: 0 !important; }
+.uk-visible-toggle:not(:hover):not(:focus) .uk-invisible-hover:not(:focus-within) { clip-path: inset(50%) !important; }
 
 
 /* Based on Hover Capability of the Pointing Device

package/src/scss/mixins-theme.scss

@@ -273,7 +273,6 @@
     // Focus
     //
 
-    :focus { outline-color: $inverse-base-focus-outline; }
     :focus-visible { outline-color: $inverse-base-focus-outline; }
 
 }

package/src/scss/mixins.scss

@@ -210,7 +210,6 @@
     // Focus
     //
 
-    :focus { outline-color: $inverse-base-focus-outline; }
     :focus-visible { outline-color: $inverse-base-focus-outline; }
 
 }

package/src/scss/variables-theme.scss

@@ -379,6 +379,7 @@ $dropbar-padding-horizontal-m: $global-medium-gutter !default;
 $dropbar-background: $global-background !default;
 $dropbar-color: $global-color !default;
 $dropbar-color-mode: none !default;
+$dropbar-focus-outline: $base-focus-outline !default;
 $dropbar-large-padding-top: 40px !default;
 $dropbar-large-padding-bottom: $dropbar-large-padding-top !default;
 $dropdown-margin: $global-small-margin !default;
@@ -388,6 +389,7 @@ $dropdown-padding: 25px !default;
 $dropdown-background: $global-background !default;
 $dropdown-color: $global-color !default;
 $dropdown-color-mode: none !default;
+$dropdown-focus-outline: $base-focus-outline !default;
 $dropdown-large-padding: 40px !default;
 $dropdown-dropbar-padding-top: 5px !default;
 $dropdown-dropbar-padding-bottom: $dropdown-padding !default;
@@ -811,6 +813,7 @@ $navbar-dropdown-padding: 25px !default;
 $navbar-dropdown-background: $global-background !default;
 $navbar-dropdown-color: $global-color !default;
 $navbar-dropdown-color-mode: none !default;
+$navbar-dropdown-focus-outline: $base-focus-outline !default;
 $navbar-dropdown-grid-gutter-horizontal: $global-gutter !default;
 $navbar-dropdown-grid-gutter-vertical: $navbar-dropdown-grid-gutter-horizontal !default;
 $navbar-dropdown-large-shift-margin: 0 !default;

package/src/scss/variables.scss

@@ -378,6 +378,7 @@ $dropbar-padding-horizontal-m: $global-medium-gutter !default;
 $dropbar-background: $global-muted-background !default;
 $dropbar-color: $global-color !default;
 $dropbar-color-mode: none !default;
+$dropbar-focus-outline: $base-focus-outline !default;
 $dropbar-large-padding-top: 40px !default;
 $dropbar-large-padding-bottom: $dropbar-large-padding-top !default;
 $dropdown-margin: $global-small-margin !default;
@@ -387,6 +388,7 @@ $dropdown-padding: 15px !default;
 $dropdown-background: $global-muted-background !default;
 $dropdown-color: $global-color !default;
 $dropdown-color-mode: none !default;
+$dropdown-focus-outline: $base-focus-outline !default;
 $dropdown-large-padding: 40px !default;
 $dropdown-dropbar-padding-top: $dropdown-padding !default;
 $dropdown-dropbar-padding-bottom: $dropdown-padding !default;
@@ -809,6 +811,7 @@ $navbar-dropdown-padding: 15px !default;
 $navbar-dropdown-background: $global-muted-background !default;
 $navbar-dropdown-color: $global-color !default;
 $navbar-dropdown-color-mode: none !default;
+$navbar-dropdown-focus-outline: $base-focus-outline !default;
 $navbar-dropdown-grid-gutter-horizontal: $global-gutter !default;
 $navbar-dropdown-grid-gutter-vertical: $navbar-dropdown-grid-gutter-horizontal !default;
 $navbar-dropdown-large-shift-margin: 0 !default;

package/tests/js/index.js

@@ -1,5 +1,5 @@
 /* global TESTS */
-import { addClass, css, on, prepend, removeClass, ucfirst } from 'uikit-util';
+import { $$, addClass, css, on, prepend, removeClass, ucfirst } from 'uikit-util';
 
 const tests = TESTS;
 const storage = window.sessionStorage;
@@ -125,8 +125,7 @@ on(window, 'load', () =>
 
                 if ($inverse.value) {
                     removeClass(
-                        document.querySelectorAll('*'),
-                        'uk-navbar-container',
+                        $$('*'),
                         'uk-card-default',
                         'uk-card-muted',
                         'uk-card-primary',
@@ -143,6 +142,8 @@ on(window, 'load', () =>
                         'uk-overlay-primary'
                     );
 
+                    addClass($$('.uk-navbar-container'), 'uk-navbar-transparent');
+
                     css(docEl, 'background', $inverse.value === 'dark' ? '#fff' : '#222');
                     addClass($body, `uk-${$inverse.value}`);
                 }