uikit 3.14.4-dev.6a00f7fe6 → 3.14.4-dev.ca199f7a7

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.14.4-dev.6a00f7fe6",
+    "version": "3.14.4-dev.ca199f7a7",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/js/core/drop.js

@@ -30,6 +30,7 @@ import {
     toggleClass,
     within,
 } from 'uikit-util';
+import { preventBackgroundScroll, preventOverscroll } from '../mixin/modal';
 
 export let active;
 
@@ -48,6 +49,7 @@ export default {
         display: String,
         clsDrop: String,
         animateOut: Boolean,
+        bgScroll: Boolean,
     },
 
     data: {
@@ -63,6 +65,7 @@ export default {
         cls: 'uk-open',
         container: false,
         animateOut: false,
+        bgScroll: true,
     },
 
     created() {
@@ -250,6 +253,10 @@ export default {
                         }
                     }),
 
+                    ...(this.bgScroll
+                        ? []
+                        : [preventOverscroll(this.$el), preventBackgroundScroll()]),
+
                     ...(this.display === 'static' && this.align !== 'stretch'
                         ? []
                         : (() => {

package/src/js/core/offcanvas.js

@@ -93,22 +93,6 @@ export default {
             },
         },
 
-        {
-            name: 'touchstart',
-
-            passive: true,
-
-            el() {
-                return this.panel;
-            },
-
-            handler({ targetTouches }) {
-                if (targetTouches.length === 1) {
-                    this.clientY = targetTouches[0].clientY;
-                }
-            },
-        },
-
         {
             name: 'touchmove',
 
@@ -124,33 +108,6 @@ export default {
             },
         },
 
-        {
-            name: 'touchmove',
-
-            passive: false,
-
-            el() {
-                return this.panel;
-            },
-
-            handler(e) {
-                if (e.targetTouches.length !== 1) {
-                    return;
-                }
-
-                const clientY = e.targetTouches[0].clientY - this.clientY;
-                const { scrollTop, scrollHeight, clientHeight } = this.panel;
-
-                if (
-                    clientHeight >= scrollHeight ||
-                    (scrollTop === 0 && clientY > 0) ||
-                    (scrollHeight - scrollTop <= clientHeight && clientY < 0)
-                ) {
-                    e.cancelable && e.preventDefault();
-                }
-            },
-        },
-
         {
             name: 'show',
 
@@ -162,7 +119,6 @@ export default {
                     addClass(parent(this.panel), this.clsMode);
                 }
 
-                css(document.documentElement, 'overflowY', this.overlay ? 'hidden' : '');
                 addClass(document.body, this.clsContainer, this.clsFlip);
                 css(document.body, 'touch-action', 'pan-y pinch-zoom');
                 css(this.$el, 'display', 'block');
@@ -170,7 +126,7 @@ export default {
                 addClass(
                     this.panel,
                     this.clsSidebarAnimation,
-                    this.mode !== 'reveal' ? this.clsMode : ''
+                    this.mode === 'reveal' ? '' : this.clsMode
                 );
 
                 height(document.body); // force reflow
@@ -207,8 +163,6 @@ export default {
                 removeClass(this.$el, this.clsOverlay);
                 css(this.$el, 'display', '');
                 removeClass(document.body, this.clsContainer, this.clsFlip);
-
-                css(document.documentElement, 'overflowY', '');
             },
         },
 

package/src/js/mixin/modal.js

@@ -2,6 +2,7 @@ import {
     $,
     addClass,
     append,
+    apply,
     attr,
     css,
     endsWith,
@@ -15,6 +16,7 @@ import {
     pointerDown,
     pointerUp,
     removeClass,
+    scrollParents,
     toFloat,
     width,
     within,
@@ -121,17 +123,26 @@ export default {
             self: true,
 
             handler() {
-                const docEl = document.documentElement;
+                once(
+                    this.$el,
+                    'hide',
+                    on(document, 'focusin', (e) => {
+                        if (last(active) === this && !within(e.target, this.$el)) {
+                            this.$el.focus();
+                        }
+                    })
+                );
 
-                if (width(window) > docEl.clientWidth && this.overlay) {
-                    css(document.body, 'overflowY', 'scroll');
+                if (this.overlay) {
+                    once(this.$el, 'hide', preventOverscroll(this.$el));
+                    once(this.$el, 'hide', preventBackgroundScroll());
                 }
 
                 if (this.stack) {
                     css(this.$el, 'zIndex', toFloat(css(this.$el, 'zIndex')) + active.length);
                 }
 
-                addClass(docEl, this.clsPage);
+                addClass(document.documentElement, this.clsPage);
 
                 if (this.bgClose) {
                     once(
@@ -273,3 +284,78 @@ function animate({ transitionElement, _toggle }) {
 function toMs(time) {
     return time ? (endsWith(time, 'ms') ? toFloat(time) : toFloat(time) * 1000) : 0;
 }
+
+export function preventOverscroll(el) {
+    if (CSS.supports('overscroll-behavior', 'contain')) {
+        const elements = filterChildren(el, (child) => /auto|scroll/.test(css(child, 'overflow')));
+        css(elements, 'overscrollBehavior', 'contain');
+        return () => css(elements, 'overscrollBehavior', '');
+    }
+
+    let startClientY;
+
+    const events = [
+        on(
+            el,
+            'touchstart',
+            ({ targetTouches }) => {
+                if (targetTouches.length === 1) {
+                    startClientY = targetTouches[0].clientY;
+                }
+            },
+            { passive: true }
+        ),
+
+        on(
+            el,
+            'touchmove',
+            (e) => {
+                if (e.targetTouches.length !== 1) {
+                    return;
+                }
+
+                let [scrollParent] = scrollParents(e.target, /auto|scroll/);
+                if (!within(scrollParent, el)) {
+                    scrollParent = el;
+                }
+
+                const clientY = e.targetTouches[0].clientY - startClientY;
+                const { scrollTop, scrollHeight, clientHeight } = scrollParent;
+
+                if (
+                    clientHeight >= scrollHeight ||
+                    (scrollTop === 0 && clientY > 0) ||
+                    (scrollHeight - scrollTop <= clientHeight && clientY < 0)
+                ) {
+                    e.cancelable && e.preventDefault();
+                }
+            },
+            { passive: false }
+        ),
+    ];
+
+    return () => events.forEach((fn) => fn());
+}
+
+export function preventBackgroundScroll() {
+    const { body, documentElement } = document;
+    css(body, {
+        overflowY: width(window) > documentElement.clientWidth ? 'scroll' : '',
+        touchAction: 'none',
+    });
+    css(documentElement, 'overflowY', 'hidden');
+    return () => {
+        css(documentElement, 'overflowY', '');
+        css(body, { overflowY: '', touchAction: '' });
+    };
+}
+
+function filterChildren(el, fn) {
+    const children = [];
+    apply(el, (node) => {
+        if (fn(node)) {
+            children.push(node);
+        }
+    });
+    return children;
+}

package/src/js/util/viewport.js

@@ -151,18 +151,33 @@ export function scrollParents(element, overflowRe = /auto|scroll|hidden|clip/, s
 }
 
 export function offsetViewport(scrollElement) {
-    let viewportElement = getViewport(scrollElement);
+    const window = toWindow(scrollElement);
+    const {
+        document: { body, documentElement },
+    } = window;
+    let viewportElement =
+        scrollElement === scrollingElement(scrollElement) || scrollElement === body
+            ? window
+            : scrollElement;
+
+    const { visualViewport } = window;
+    if (isWindow(viewportElement) && visualViewport) {
+        let { height, width, scale, pageTop: top, pageLeft: left } = visualViewport;
+        height = Math.round(height * scale);
+        width = Math.round(width * scale);
+        return { height, width, top, left, bottom: top + height, right: left + width };
+    }
 
     let rect = offset(viewportElement);
     for (let [prop, dir, start, end] of [
         ['width', 'x', 'left', 'right'],
         ['height', 'y', 'top', 'bottom'],
     ]) {
-        if (!isWindow(viewportElement)) {
-            rect[start] += toFloat(css(viewportElement, `border${ucfirst(start)}Width`));
-        } else {
+        if (isWindow(viewportElement)) {
             // iOS 12 returns <body> as scrollingElement
-            viewportElement = viewportElement.document.documentElement;
+            viewportElement = documentElement;
+        } else {
+            rect[start] += toFloat(css(viewportElement, `border${ucfirst(start)}Width`));
         }
         rect[prop] = rect[dir] = viewportElement[`client${ucfirst(prop)}`];
         rect[end] = rect[prop] + rect[start];
@@ -173,7 +188,3 @@ export function offsetViewport(scrollElement) {
 function scrollingElement(element) {
     return toWindow(element).document.scrollingElement;
 }
-
-function getViewport(scrollElement) {
-    return scrollElement === scrollingElement(scrollElement) ? window : scrollElement;
-}

package/src/less/components/nav.less

@@ -46,6 +46,8 @@
 @nav-divider-margin-vertical:                   5px;
 @nav-divider-margin-horizontal:                 0;
 
+@nav-default-font-size:                         @global-font-size;
+@nav-default-line-height:                       @global-line-height;
 @nav-default-item-color:                        @global-muted-color;
 @nav-default-item-hover-color:                  @global-color;
 @nav-default-item-active-color:                 @global-emphasis-color;
@@ -53,12 +55,14 @@
 @nav-default-header-color:                      @global-emphasis-color;
 @nav-default-divider-border-width:              @global-border-width;
 @nav-default-divider-border:                    @global-border;
+@nav-default-sublist-font-size:                 @nav-default-font-size;
+@nav-default-sublist-line-height:               @nav-default-line-height;
 @nav-default-sublist-item-color:                @global-muted-color;
 @nav-default-sublist-item-hover-color:          @global-color;
 @nav-default-sublist-item-active-color:         @global-emphasis-color;
 
-@nav-primary-item-font-size:                    @global-large-font-size;
-@nav-primary-item-line-height:                  @global-line-height;
+@nav-primary-font-size:                         @global-large-font-size;
+@nav-primary-line-height:                       @global-line-height;
 @nav-primary-item-color:                        @global-muted-color;
 @nav-primary-item-hover-color:                  @global-color;
 @nav-primary-item-active-color:                 @global-emphasis-color;
@@ -66,6 +70,8 @@
 @nav-primary-header-color:                      @global-emphasis-color;
 @nav-primary-divider-border-width:              @global-border-width;
 @nav-primary-divider-border:                    @global-border;
+@nav-primary-sublist-font-size:                 @global-medium-font-size;
+@nav-primary-sublist-line-height:               @global-line-height;
 @nav-primary-sublist-item-color:                @global-muted-color;
 @nav-primary-sublist-item-hover-color:          @global-color;
 @nav-primary-sublist-item-active-color:         @global-emphasis-color;
@@ -186,6 +192,8 @@ ul.uk-nav-sub {
  ========================================================================== */
 
 .uk-nav-default {
+    font-size: @nav-default-font-size;
+    line-height: @nav-default-line-height;
     .hook-nav-default();
 }
 
@@ -241,6 +249,11 @@ ul.uk-nav-sub {
  * Sublists
  */
 
+.uk-nav-default .uk-nav-sub {
+    font-size: @nav-default-sublist-font-size;
+    line-height: @nav-default-sublist-line-height;
+}
+
 .uk-nav-default .uk-nav-sub a { color: @nav-default-sublist-item-color; }
 
 .uk-nav-default .uk-nav-sub a:hover { color: @nav-default-sublist-item-hover-color; }
@@ -252,6 +265,8 @@ ul.uk-nav-sub {
  ========================================================================== */
 
 .uk-nav-primary {
+    font-size: @nav-primary-font-size;
+    line-height: @nav-primary-line-height;
     .hook-nav-primary();
 }
 
@@ -260,8 +275,6 @@ ul.uk-nav-sub {
  */
 
 .uk-nav-primary > li > a {
-    font-size: @nav-primary-item-font-size;
-    line-height: @nav-primary-item-line-height;
     color: @nav-primary-item-color;
     .hook-nav-primary-item();
 }
@@ -309,6 +322,11 @@ ul.uk-nav-sub {
  * Sublists
  */
 
+.uk-nav-primary .uk-nav-sub {
+    font-size: @nav-primary-sublist-font-size;
+    line-height: @nav-primary-sublist-line-height;
+}
+
 .uk-nav-primary .uk-nav-sub a { color: @nav-primary-sublist-item-color; }
 
 .uk-nav-primary .uk-nav-sub a:hover { color: @nav-primary-sublist-item-hover-color; }

package/src/less/components/navbar.less

@@ -37,10 +37,12 @@
 // ========================================================================
 
 @navbar-background:                             @global-muted-background;
+@navbar-gap:                                    0px; // Must have a unit because of `calc`
 @navbar-color-mode:                             none;
 
+@navbar-nav-gap:                                0px; // Must have a unit because of `calc`
+
 @navbar-nav-item-height:                        80px;
-@navbar-nav-item-gap:                           0px; // Must have a unit because of `calc`
 @navbar-nav-item-padding-horizontal:            15px;
 @navbar-nav-item-color:                         @global-muted-color;
 @navbar-nav-item-font-size:                     @global-font-size;
@@ -98,7 +100,6 @@
 
 .uk-navbar {
     display: flex;
-    --uk-navbar-nav-item-gap: @navbar-nav-item-gap;
     /* 1 */
     position: relative;
     .hook-navbar();
@@ -123,17 +124,13 @@
 
 /*
  * 1. Align navs and items vertically if they have a different height
- * 2. Note: IE 11 requires an extra `div` which affects the center selector
  */
 
 .uk-navbar-left,
 .uk-navbar-right,
-// 2. [class*='uk-navbar-center'],
-.uk-navbar-center,
-.uk-navbar-center-left > *,
-.uk-navbar-center-right > * {
+[class*='uk-navbar-center'] {
     display: flex;
-    gap: var(--uk-navbar-nav-item-gap);
+    gap: @navbar-gap;
     /* 1 */
     align-items: center;
 }
@@ -175,8 +172,8 @@
    top: 0;
 }
 
-.uk-navbar-center-left { right:  ~'calc(100% + var(--uk-navbar-nav-item-gap))'; }
-.uk-navbar-center-right { left: ~'calc(100% + var(--uk-navbar-nav-item-gap))'; }
+.uk-navbar-center-left { right:  ~'calc(100% + @{navbar-gap})'; }
+.uk-navbar-center-right { left: ~'calc(100% + @{navbar-gap})'; }
 
 [class*='uk-navbar-center-'] {
     width: max-content;
@@ -193,7 +190,7 @@
 
 .uk-navbar-nav {
     display: flex;
-    gap: var(--uk-navbar-nav-item-gap);
+    gap: @navbar-nav-gap;
     /* 1 */
     margin: 0;
     padding: 0;

package/src/less/theme/nav.less

@@ -7,14 +7,10 @@
 // Variables
 // ========================================================================
 
-@nav-default-subtitle-font-size:                12px;
-
-//
-// New
-//
-
 @nav-default-font-size:                         @global-small-font-size;
 
+@nav-default-subtitle-font-size:                12px;
+
 
 // Sublists
 // ========================================================================
@@ -43,7 +39,7 @@
 // Default style modifier
 // ========================================================================
 
-.hook-nav-default() { font-size: @nav-default-font-size; }
+.hook-nav-default() {}
 
 .hook-nav-default-item() {}
 

package/src/less/theme/navbar.less

@@ -7,7 +7,9 @@
 // Variables
 // ========================================================================
 
-@navbar-nav-item-gap:                           30px;
+@navbar-gap:                                    30px;
+
+@navbar-nav-gap:                                30px;
 @navbar-nav-item-padding-horizontal:            0;
 
 @navbar-nav-item-font-size:                     @global-small-font-size;

package/src/scss/components/nav.scss

@@ -46,6 +46,8 @@ $nav-header-margin-top:                          $global-margin !default;
 $nav-divider-margin-vertical:                    5px !default;
 $nav-divider-margin-horizontal:                  0 !default;
 
+$nav-default-font-size:                          $global-font-size !default;
+$nav-default-line-height:                        $global-line-height !default;
 $nav-default-item-color:                         $global-muted-color !default;
 $nav-default-item-hover-color:                   $global-color !default;
 $nav-default-item-active-color:                  $global-emphasis-color !default;
@@ -53,12 +55,14 @@ $nav-default-subtitle-font-size:                 $global-small-font-size !defaul
 $nav-default-header-color:                       $global-emphasis-color !default;
 $nav-default-divider-border-width:               $global-border-width !default;
 $nav-default-divider-border:                     $global-border !default;
+$nav-default-sublist-font-size:                  $nav-default-font-size !default;
+$nav-default-sublist-line-height:                $nav-default-line-height !default;
 $nav-default-sublist-item-color:                 $global-muted-color !default;
 $nav-default-sublist-item-hover-color:           $global-color !default;
 $nav-default-sublist-item-active-color:          $global-emphasis-color !default;
 
-$nav-primary-item-font-size:                     $global-large-font-size !default;
-$nav-primary-item-line-height:                   $global-line-height !default;
+$nav-primary-font-size:                          $global-large-font-size !default;
+$nav-primary-line-height:                        $global-line-height !default;
 $nav-primary-item-color:                         $global-muted-color !default;
 $nav-primary-item-hover-color:                   $global-color !default;
 $nav-primary-item-active-color:                  $global-emphasis-color !default;
@@ -66,6 +70,8 @@ $nav-primary-subtitle-font-size:                 $global-medium-font-size !defau
 $nav-primary-header-color:                       $global-emphasis-color !default;
 $nav-primary-divider-border-width:               $global-border-width !default;
 $nav-primary-divider-border:                     $global-border !default;
+$nav-primary-sublist-font-size:                  $global-medium-font-size !default;
+$nav-primary-sublist-line-height:                $global-line-height !default;
 $nav-primary-sublist-item-color:                 $global-muted-color !default;
 $nav-primary-sublist-item-hover-color:           $global-color !default;
 $nav-primary-sublist-item-active-color:          $global-emphasis-color !default;
@@ -186,6 +192,8 @@ ul.uk-nav-sub {
  ========================================================================== */
 
 .uk-nav-default {
+    font-size: $nav-default-font-size;
+    line-height: $nav-default-line-height;
     @if(mixin-exists(hook-nav-default)) {@include hook-nav-default();}
 }
 
@@ -241,6 +249,11 @@ ul.uk-nav-sub {
  * Sublists
  */
 
+.uk-nav-default .uk-nav-sub {
+    font-size: $nav-default-sublist-font-size;
+    line-height: $nav-default-sublist-line-height;
+}
+
 .uk-nav-default .uk-nav-sub a { color: $nav-default-sublist-item-color; }
 
 .uk-nav-default .uk-nav-sub a:hover { color: $nav-default-sublist-item-hover-color; }
@@ -252,6 +265,8 @@ ul.uk-nav-sub {
  ========================================================================== */
 
 .uk-nav-primary {
+    font-size: $nav-primary-font-size;
+    line-height: $nav-primary-line-height;
     @if(mixin-exists(hook-nav-primary)) {@include hook-nav-primary();}
 }
 
@@ -260,8 +275,6 @@ ul.uk-nav-sub {
  */
 
 .uk-nav-primary > li > a {
-    font-size: $nav-primary-item-font-size;
-    line-height: $nav-primary-item-line-height;
     color: $nav-primary-item-color;
     @if(mixin-exists(hook-nav-primary-item)) {@include hook-nav-primary-item();}
 }
@@ -309,6 +322,11 @@ ul.uk-nav-sub {
  * Sublists
  */
 
+.uk-nav-primary .uk-nav-sub {
+    font-size: $nav-primary-sublist-font-size;
+    line-height: $nav-primary-sublist-line-height;
+}
+
 .uk-nav-primary .uk-nav-sub a { color: $nav-primary-sublist-item-color; }
 
 .uk-nav-primary .uk-nav-sub a:hover { color: $nav-primary-sublist-item-hover-color; }

package/src/scss/components/navbar.scss

@@ -37,10 +37,12 @@
 // ========================================================================
 
 $navbar-background:                              $global-muted-background !default;
+$navbar-gap:                                     0px !default; // Must have a unit because of `calc`
 $navbar-color-mode:                              none !default;
 
+$navbar-nav-gap:                                 0px !default; // Must have a unit because of `calc`
+
 $navbar-nav-item-height:                         80px !default;
-$navbar-nav-item-gap:                            0px !default; // Must have a unit because of `calc`
 $navbar-nav-item-padding-horizontal:             15px !default;
 $navbar-nav-item-color:                          $global-muted-color !default;
 $navbar-nav-item-font-size:                      $global-font-size !default;
@@ -98,7 +100,6 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
 
 .uk-navbar {
     display: flex;
-    --uk-navbar-nav-item-gap: #{$navbar-nav-item-gap};
     /* 1 */
     position: relative;
     @if(mixin-exists(hook-navbar)) {@include hook-navbar();}
@@ -123,17 +124,13 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
 
 /*
  * 1. Align navs and items vertically if they have a different height
- * 2. Note: IE 11 requires an extra `div` which affects the center selector
  */
 
 .uk-navbar-left,
 .uk-navbar-right,
-// 2. [class*='uk-navbar-center'],
-.uk-navbar-center,
-.uk-navbar-center-left > *,
-.uk-navbar-center-right > * {
+[class*='uk-navbar-center'] {
     display: flex;
-    gap: var(--uk-navbar-nav-item-gap);
+    gap: $navbar-gap;
     /* 1 */
     align-items: center;
 }
@@ -175,8 +172,8 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
    top: 0;
 }
 
-.uk-navbar-center-left { right:  unquote('calc(100% + var(--uk-navbar-nav-item-gap))'); }
-.uk-navbar-center-right { left: unquote('calc(100% + var(--uk-navbar-nav-item-gap))'); }
+.uk-navbar-center-left { right:  unquote('calc(100% + #{$navbar-gap})'); }
+.uk-navbar-center-right { left: unquote('calc(100% + #{$navbar-gap})'); }
 
 [class*='uk-navbar-center-'] {
     width: max-content;
@@ -193,7 +190,7 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
 
 .uk-navbar-nav {
     display: flex;
-    gap: var(--uk-navbar-nav-item-gap);
+    gap: $navbar-nav-gap;
     /* 1 */
     margin: 0;
     padding: 0;

package/src/scss/mixins-theme.scss

@@ -1707,7 +1707,7 @@
 @mixin hook-nav-parent-icon(){}
 @mixin hook-nav-header(){}
 @mixin hook-nav-divider(){}
-@mixin hook-nav-default(){ font-size: $nav-default-font-size; }
+@mixin hook-nav-default(){}
 @mixin hook-nav-default-item(){}
 @mixin hook-nav-default-item-hover(){}
 @mixin hook-nav-default-item-active(){}

package/src/scss/theme/nav.scss

@@ -7,14 +7,10 @@
 // Variables
 // ========================================================================
 
-$nav-default-subtitle-font-size:                 12px !default;
-
-//
-// New
-//
-
 $nav-default-font-size:                          $global-small-font-size !default;
 
+$nav-default-subtitle-font-size:                 12px !default;
+
 
 // Sublists
 // ========================================================================
@@ -43,7 +39,7 @@ $nav-default-font-size:                          $global-small-font-size !defaul
 // Default style modifier
 // ========================================================================
 
-
+// @mixin hook-nav-default(){}
 
 // @mixin hook-nav-default-item(){}
 

package/src/scss/theme/navbar.scss

@@ -7,7 +7,9 @@
 // Variables
 // ========================================================================
 
-$navbar-nav-item-gap:                            30px !default;
+$navbar-gap:                                     30px !default;
+
+$navbar-nav-gap:                                 30px !default;
 $navbar-nav-item-padding-horizontal:             0 !default;
 
 $navbar-nav-item-font-size:                      $global-small-font-size !default;