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

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.871ba3c05",
+    "version": "3.14.4-dev.ce706e326",
     "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/height-viewport.js

@@ -56,14 +56,18 @@ export default {
                     0
                 );
             } else {
+                const isScrollingElement = document.scrollingElement === scrollElement;
+
                 // on mobile devices (iOS and Android) window.innerHeight !== 100vh
-                minHeight = `calc(${
-                    document.scrollingElement === scrollElement ? '100vh' : `${viewportHeight}px`
-                }`;
+                minHeight = `calc(${isScrollingElement ? '100vh' : `${viewportHeight}px`}`;
 
                 if (this.offsetTop) {
-                    const top = offsetPosition(this.$el)[0] - offsetPosition(scrollElement)[0];
-                    minHeight += top > 0 && top < viewportHeight / 2 ? ` - ${top}px` : '';
+                    if (isScrollingElement) {
+                        const top = offsetPosition(this.$el)[0] - offsetPosition(scrollElement)[0];
+                        minHeight += top > 0 && top < viewportHeight / 2 ? ` - ${top}px` : '';
+                    } else {
+                        minHeight += ` - ${css(scrollElement, 'paddingTop')}`;
+                    }
                 }
 
                 if (this.offsetBottom === true) {

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/dimensions.js

@@ -94,13 +94,13 @@ export function position(element) {
 }
 
 export function offsetPosition(element) {
-    const offset = [0, 0];
-
     element = toNode(element);
 
-    do {
-        offset[0] += element.offsetTop;
-        offset[1] += element.offsetLeft;
+    const offset = [element.offsetTop, element.offsetLeft];
+
+    while ((element = element.offsetParent)) {
+        offset[0] += element.offsetTop + toFloat(css(element, `borderTopWidth`));
+        offset[1] += element.offsetLeft + toFloat(css(element, `borderLeftWidth`));
 
         if (css(element, 'position') === 'fixed') {
             const win = toWindow(element);
@@ -108,7 +108,7 @@ export function offsetPosition(element) {
             offset[1] += win.scrollX;
             return offset;
         }
-    } while ((element = element.offsetParent));
+    }
 
     return offset;
 }

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/components/utility.less

@@ -384,18 +384,27 @@
  ========================================================================== */
 
 /*
- * 1. Required for `a`
+ * 1. Style
+ * 2. Required for `a`
+ * 3. Behave like image but can be overridden through flex utility classes
  */
 
 .uk-logo {
+    /* 1 */
     font-size: @logo-font-size;
     font-family: @logo-font-family;
     color: @logo-color;
-    /* 1 */
+    /* 2 */
     text-decoration: none;
     .hook-logo();
 }
 
+/* 3 */
+:where(.uk-logo) {
+    display: inline-block;
+    vertical-align: middle;
+}
+
 /* Hover */
 .uk-logo:hover {
     color: @logo-hover-color;
@@ -404,7 +413,7 @@
     .hook-logo-hover();
 }
 
-.uk-logo > :where(img, svg, video) { display: inline-block; }
+.uk-logo > :where(img, svg, video) { display: block; }
 
 .uk-logo-inverse { display: none; }
 

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;