uikit 3.15.23-dev.0a3f7fb6d → 3.15.23-dev.7b7e06a3a

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.15.23-dev.0a3f7fb6d",
+    "version": "3.15.23-dev.7b7e06a3a",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/images/components/subnav-parent-icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+    <polyline fill="none" stroke="#000" stroke-width="1.1" points="1 3.5 6 8.5 11 3.5"/>
+</svg>

package/src/js/core/drop.js

@@ -29,7 +29,7 @@ import {
     removeClass,
     within,
 } from 'uikit-util';
-import { isSameSiteAnchor, preventBackgroundScroll, preventOverscroll } from '../mixin/modal';
+import { isSameSiteAnchor, preventBackgroundScroll } from '../mixin/modal';
 
 export let active;
 
@@ -302,20 +302,15 @@ export default {
                         return () => observer.disconnect();
                     })(),
 
-                    ...(this.autoUpdate
-                        ? [
-                              on([document, overflowParents(this.$el)], 'scroll', update, {
-                                  passive: true,
-                              }),
-                          ]
-                        : []),
-
-                    ...(this.bgScroll
-                        ? []
-                        : [preventOverscroll(this.$el), preventBackgroundScroll()]),
+                    this.autoUpdate &&
+                        on([document, ...overflowParents(this.$el)], 'scroll', update, {
+                            passive: true,
+                        }),
+
+                    this.bgScroll && preventBackgroundScroll(this.$el),
                 ];
 
-                once(this.$el, 'hide', () => handlers.forEach((handler) => handler()), {
+                once(this.$el, 'hide', () => handlers.forEach((handler) => handler?.()), {
                     self: true,
                 });
             },

package/src/js/core/icon.js

@@ -17,6 +17,7 @@ import slidenavNextLarge from '../../images/components/slidenav-next-large.svg';
 import slidenavPrevious from '../../images/components/slidenav-previous.svg';
 import slidenavPreviousLarge from '../../images/components/slidenav-previous-large.svg';
 import spinner from '../../images/components/spinner.svg';
+import subnavParentIcon from '../../images/components/subnav-parent-icon.svg';
 import totop from '../../images/components/totop.svg';
 import {
     $,
@@ -53,6 +54,7 @@ const icons = {
     'slidenav-next-large': slidenavNextLarge,
     'slidenav-previous': slidenavPrevious,
     'slidenav-previous-large': slidenavPreviousLarge,
+    'subnav-parent-icon': subnavParentIcon,
 };
 
 const Icon = {

package/src/js/core/index.js

@@ -40,3 +40,4 @@ export { IconComponent as OverlayIcon } from './icon';
 export { IconComponent as PaginationNext } from './icon';
 export { IconComponent as PaginationPrevious } from './icon';
 export { IconComponent as Totop } from './icon';
+export { IconComponent as SubnavParentIcon } from './icon';

package/src/js/mixin/modal.js

@@ -2,7 +2,6 @@ import {
     $,
     addClass,
     append,
-    apply,
     attr,
     css,
     endsWith,
@@ -10,7 +9,6 @@ import {
     isFocusable,
     last,
     matches,
-    noop,
     on,
     once,
     parent,
@@ -148,8 +146,7 @@ export default {
                 );
 
                 if (this.overlay) {
-                    once(this.$el, 'hidden', preventOverscroll(this.$el), { self: true });
-                    once(this.$el, 'hidden', preventBackgroundScroll(), { self: true });
+                    once(this.$el, 'hidden', preventBackgroundScroll(this.$el), { self: true });
                 }
 
                 if (this.stack) {
@@ -294,90 +291,44 @@ 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 = [
-            el,
-            ...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);
-                if (!within(scrollParent, el)) {
-                    scrollParent = el;
-                }
+let prevented;
+export function preventBackgroundScroll(el) {
+    // 'overscroll-behavior: contain' only works consistently if el overflows (Safari)
+    const off = on(
+        el,
+        'touchmove',
+        (e) => {
+            if (e.targetTouches.length !== 1) {
+                return;
+            }
 
-                const clientY = e.targetTouches[0].clientY - startClientY;
-                const { scrollTop, scrollHeight, clientHeight } = scrollParent;
+            let [{ scrollHeight, clientHeight }] = scrollParents(e.target);
 
-                if (
-                    clientHeight >= scrollHeight ||
-                    (scrollTop === 0 && clientY > 0) ||
-                    (scrollHeight - scrollTop <= clientHeight && clientY < 0)
-                ) {
-                    e.cancelable && e.preventDefault();
-                }
-            },
-            { passive: false }
-        ),
-    ];
-
-    return () => events.forEach((fn) => fn());
-}
+            if (clientHeight >= scrollHeight && e.cancelable) {
+                e.preventDefault();
+            }
+        },
+        { passive: false }
+    );
 
-let prevented;
-export function preventBackgroundScroll() {
     if (prevented) {
-        return noop;
+        return off;
     }
     prevented = true;
 
     const { scrollingElement } = document;
     css(scrollingElement, {
-        overflowY: 'hidden',
+        overflowY: CSS.supports('overflow', 'clip') ? 'clip' : 'hidden',
         touchAction: 'none',
-        paddingRight: width(window) - scrollingElement.clientWidth,
+        paddingRight: width(window) - scrollingElement.clientWidth || '',
     });
     return () => {
         prevented = false;
+        off();
         css(scrollingElement, { overflowY: '', touchAction: '', paddingRight: '' });
     };
 }
 
-function filterChildren(el, fn) {
-    const children = [];
-    apply(el, (node) => {
-        if (fn(node)) {
-            children.push(node);
-        }
-    });
-    return children;
-}
-
 export function isSameSiteAnchor(a) {
     return ['origin', 'pathname', 'search'].every((part) => a[part] === location[part]);
 }

package/src/less/components/form.less

@@ -710,6 +710,7 @@ select.uk-form-width-xsmall { width: (@form-width-xsmall + 25px); }
     align-items: center;
     /* 4 */
     color: @form-icon-color;
+    .hook-form-icon();
 }
 
 /*
@@ -765,6 +766,7 @@ select.uk-form-width-xsmall { width: (@form-width-xsmall + 25px); }
 .hook-form-label() {}
 .hook-form-stacked-label() {}
 .hook-form-horizontal-label() {}
+.hook-form-icon() {}
 .hook-form-misc() {}
 
 
@@ -875,7 +877,10 @@ select.uk-form-width-xsmall { width: (@form-width-xsmall + 25px); }
     }
 
     // Icon
-    .uk-form-icon { color: @inverse-form-icon-color; }
+    .uk-form-icon {
+        color: @inverse-form-icon-color;
+        .hook-inverse-form-icon();
+    }
     .uk-form-icon:hover { color: @inverse-form-icon-hover-color; }
 
 }
@@ -887,3 +892,4 @@ select.uk-form-width-xsmall { width: (@form-width-xsmall + 25px); }
 .hook-inverse-form-radio-checked() {}
 .hook-inverse-form-radio-checked-focus() {}
 .hook-inverse-form-label() {}
+.hook-inverse-form-icon() {}

package/src/less/components/modal.less

@@ -94,7 +94,6 @@
     z-index: @modal-z-index;
     /* 3 */
     overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
     /* 4 */
     padding: @modal-padding-vertical @modal-padding-horizontal;
     /* 5 */

package/src/less/components/offcanvas.less

@@ -95,7 +95,6 @@
     background: @offcanvas-bar-background;
     /* 3 */
     overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
     .hook-offcanvas-bar();
 }
 

package/src/less/components/subnav.less

@@ -3,6 +3,8 @@
 //
 // Component:       `uk-subnav`
 //
+// Sub-objects:     `uk-subnav-parent-icon`
+//
 // Modifiers:       `uk-subnav-divider`
 //                  `uk-subnav-pill`
 //
@@ -22,6 +24,8 @@
 @subnav-item-hover-text-decoration:             none;
 @subnav-item-active-color:                      @global-emphasis-color;
 
+@subnav-parent-icon-margin-left:                4px;
+
 @subnav-divider-margin-horizontal:              @subnav-margin-horizontal;
 @subnav-divider-border-height:                  1.5em;
 @subnav-divider-border-width:                   @global-border-width;
@@ -118,6 +122,14 @@
 }
 
 
+/* Parent icon modifier
+ ========================================================================== */
+
+.uk-subnav-parent-icon { margin-left: @subnav-parent-icon-margin-left; }
+
+.uk-subnav > li > a[aria-expanded="true"] .uk-subnav-parent-icon { transform: rotate(180deg); }
+
+
 /* Divider modifier
  ========================================================================== */
 

package/src/less/components/utility.less

@@ -87,7 +87,6 @@
     padding: @panel-scrollable-padding;
     border: @panel-scrollable-border-width solid @panel-scrollable-border;
     overflow: auto;
-    -webkit-overflow-scrolling: touch;
     resize: both;
     .hook-panel-scrollable();
 }
@@ -139,10 +138,7 @@
  * Enable scrollbars if content is clipped
  */
 
-.uk-overflow-auto {
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-}
+.uk-overflow-auto { overflow: auto; }
 
 .uk-overflow-auto > :last-child { margin-bottom: 0; }
 

package/src/less/theme/form.less

@@ -123,6 +123,12 @@
 .hook-form-horizontal-label() {}
 
 
+// Icon
+// ========================================================================
+
+.hook-form-icon() {}
+
+
 // Miscellaneous
 // ========================================================================
 
@@ -143,4 +149,6 @@
 .hook-inverse-form-radio-checked() { border-color: @inverse-global-primary-background; }
 .hook-inverse-form-radio-checked-focus() {}
 
-.hook-inverse-form-label() { color: @inverse-form-label-color; }
+.hook-inverse-form-label() { color: @inverse-form-label-color; }
+
+.hook-inverse-form-icon() {}

package/src/scss/components/form.scss

@@ -710,6 +710,7 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
     align-items: center;
     /* 4 */
     color: $form-icon-color;
+    @if(mixin-exists(hook-form-icon)) {@include hook-form-icon();}
 }
 
 /*
@@ -765,6 +766,7 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
 // @mixin hook-form-label(){}
 // @mixin hook-form-stacked-label(){}
 // @mixin hook-form-horizontal-label(){}
+// @mixin hook-form-icon(){}
 // @mixin hook-form-misc(){}
 
 
@@ -802,3 +804,4 @@ $inverse-form-icon-hover-color:                 $inverse-global-color !default;
 // @mixin hook-inverse-form-radio-checked(){}
 // @mixin hook-inverse-form-radio-checked-focus(){}
 // @mixin hook-inverse-form-label(){}
+// @mixin hook-inverse-form-icon(){}

package/src/scss/components/modal.scss

@@ -94,7 +94,6 @@ $modal-close-outside-hover-color:                $global-inverse-color !default;
     z-index: $modal-z-index;
     /* 3 */
     overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
     /* 4 */
     padding: $modal-padding-vertical $modal-padding-horizontal;
     /* 5 */

package/src/scss/components/offcanvas.scss

@@ -95,7 +95,6 @@ $offcanvas-overlay-background:                   rgba(0,0,0,0.1) !default;
     background: $offcanvas-bar-background;
     /* 3 */
     overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
     @if(mixin-exists(hook-offcanvas-bar)) {@include hook-offcanvas-bar();}
 }
 

package/src/scss/components/subnav.scss

@@ -3,6 +3,8 @@
 //
 // Component:       `uk-subnav`
 //
+// Sub-objects:     `uk-subnav-parent-icon`
+//
 // Modifiers:       `uk-subnav-divider`
 //                  `uk-subnav-pill`
 //
@@ -22,6 +24,8 @@ $subnav-item-hover-color:                        $global-color !default;
 $subnav-item-hover-text-decoration:              none !default;
 $subnav-item-active-color:                       $global-emphasis-color !default;
 
+$subnav-parent-icon-margin-left:                 4px !default;
+
 $subnav-divider-margin-horizontal:               $subnav-margin-horizontal !default;
 $subnav-divider-border-height:                   1.5em !default;
 $subnav-divider-border-width:                    $global-border-width !default;
@@ -118,6 +122,14 @@ $subnav-item-disabled-color:                     $global-muted-color !default;
 }
 
 
+/* Parent icon modifier
+ ========================================================================== */
+
+.uk-subnav-parent-icon { margin-left: $subnav-parent-icon-margin-left; }
+
+.uk-subnav > li > a[aria-expanded="true"] .uk-subnav-parent-icon { transform: rotate(180deg); }
+
+
 /* Divider modifier
  ========================================================================== */
 

package/src/scss/components/utility.scss

@@ -87,7 +87,6 @@ $dragover-box-shadow:                            0 0 20px rgba(100,100,100,0.3)
     padding: $panel-scrollable-padding;
     border: $panel-scrollable-border-width solid $panel-scrollable-border;
     overflow: auto;
-    -webkit-overflow-scrolling: touch;
     resize: both;
     @if(mixin-exists(hook-panel-scrollable)) {@include hook-panel-scrollable();}
 }
@@ -139,10 +138,7 @@ $dragover-box-shadow:                            0 0 20px rgba(100,100,100,0.3)
  * Enable scrollbars if content is clipped
  */
 
-.uk-overflow-auto {
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-}
+.uk-overflow-auto { overflow: auto; }
 
 .uk-overflow-auto > :last-child { margin-bottom: 0; }
 

package/src/scss/mixins-theme.scss

@@ -858,6 +858,7 @@
 }
 @mixin hook-form-stacked-label(){}
 @mixin hook-form-horizontal-label(){}
+@mixin hook-form-icon(){}
 @mixin hook-form-misc(){}
 @mixin hook-inverse-form(){ border-color: $inverse-global-border; }
 @mixin hook-inverse-form-focus(){ border-color: $inverse-global-color; }
@@ -866,6 +867,7 @@
 @mixin hook-inverse-form-radio-checked(){ border-color: $inverse-global-primary-background; }
 @mixin hook-inverse-form-radio-checked-focus(){}
 @mixin hook-inverse-form-label(){ color: $inverse-form-label-color; }
+@mixin hook-inverse-form-icon(){}
 @mixin hook-inverse-component-form(){
 
     .uk-input,
@@ -948,7 +950,10 @@
     }
 
     // Icon
-    .uk-form-icon { color: $inverse-form-icon-color; }
+    .uk-form-icon {
+        color: $inverse-form-icon-color;
+        @if(mixin-exists(hook-inverse-form-icon)) {@include hook-inverse-form-icon();}
+    }
     .uk-form-icon:hover { color: $inverse-form-icon-hover-color; }
 
 }

package/src/scss/mixins.scss

@@ -618,6 +618,7 @@
 @mixin hook-form-label(){}
 @mixin hook-form-stacked-label(){}
 @mixin hook-form-horizontal-label(){}
+@mixin hook-form-icon(){}
 @mixin hook-form-misc(){}
 @mixin hook-inverse-form(){}
 @mixin hook-inverse-form-focus(){}
@@ -626,6 +627,7 @@
 @mixin hook-inverse-form-radio-checked(){}
 @mixin hook-inverse-form-radio-checked-focus(){}
 @mixin hook-inverse-form-label(){}
+@mixin hook-inverse-form-icon(){}
 @mixin hook-inverse-component-form(){
 
     .uk-input,
@@ -708,7 +710,10 @@
     }
 
     // Icon
-    .uk-form-icon { color: $inverse-form-icon-color; }
+    .uk-form-icon {
+        color: $inverse-form-icon-color;
+        @if(mixin-exists(hook-inverse-form-icon)) {@include hook-inverse-form-icon();}
+    }
     .uk-form-icon:hover { color: $inverse-form-icon-hover-color; }
 
 }

package/src/scss/theme/form.scss

@@ -109,6 +109,12 @@ $form-label-font-size:                           $global-small-font-size !defaul
 // @mixin hook-form-horizontal-label(){}
 
 
+// Icon
+// ========================================================================
+
+// @mixin hook-form-icon(){}
+
+
 // Miscellaneous
 // ========================================================================
 
@@ -129,3 +135,6 @@ $inverse-form-label-color:                       $inverse-global-emphasis-color
 
 // @mixin hook-inverse-form-radio-checked-focus(){}
 
+
+
+// @mixin hook-inverse-form-icon(){}

package/src/scss/variables-theme.scss

@@ -976,6 +976,7 @@ $subnav-item-color: $global-muted-color !default;
 $subnav-item-hover-color: $global-color !default;
 $subnav-item-hover-text-decoration: none !default;
 $subnav-item-active-color: $global-emphasis-color !default;
+$subnav-parent-icon-margin-left: 4px !default;
 $subnav-divider-margin-horizontal: $subnav-margin-horizontal !default;
 $subnav-divider-border-height: 1.5em !default;
 $subnav-divider-border-width: $global-border-width !default;

package/src/scss/variables.scss

@@ -974,6 +974,7 @@ $subnav-item-color: $global-muted-color !default;
 $subnav-item-hover-color: $global-color !default;
 $subnav-item-hover-text-decoration: none !default;
 $subnav-item-active-color: $global-emphasis-color !default;
+$subnav-parent-icon-margin-left: 4px !default;
 $subnav-divider-margin-horizontal: $subnav-margin-horizontal !default;
 $subnav-divider-border-height: 1.5em !default;
 $subnav-divider-border-width: $global-border-width !default;

package/tests/dropdown.html

@@ -18,7 +18,6 @@
                 padding: 15px;
                 border: 1px dashed rgba(0,0,0,0.2);
                 overflow: auto;
-                -webkit-overflow-scrolling: touch;
             }
 
         </style>

package/tests/index.html

@@ -590,7 +590,20 @@
 
                         <ul class="uk-subnav uk-subnav-divider" uk-margin>
                             <li class="uk-active"><a href="#">Active</a></li>
-                            <li><a href="#">Item</a></li>
+                            <li>
+                                <a href="#">Parent <span uk-subnav-parent-icon></span></a>
+                                <div uk-dropdown="mode: click">
+                                    <ul class="uk-nav uk-dropdown-nav">
+                                        <li class="uk-active"><a href="#">Active</a></li>
+                                        <li><a href="#">Item</a></li>
+                                        <li class="uk-nav-header">Header</li>
+                                        <li><a href="#">Item</a></li>
+                                        <li><a href="#">Item</a></li>
+                                        <li class="uk-nav-divider"></li>
+                                        <li><a href="#">Item</a></li>
+                                    </ul>
+                                </div>
+                            </li>
                             <li class="uk-disabled"><a>Disabled</a></li>
                         </ul>
 
@@ -599,7 +612,20 @@
 
                         <ul class="uk-subnav uk-subnav-pill" uk-margin>
                             <li class="uk-active"><a href="#">Active</a></li>
-                            <li><a href="#">Item</a></li>
+                            <li>
+                                <a href="#">Parent <span uk-subnav-parent-icon></span></a>
+                                <div uk-dropdown="mode: click">
+                                    <ul class="uk-nav uk-dropdown-nav">
+                                        <li class="uk-active"><a href="#">Active</a></li>
+                                        <li><a href="#">Item</a></li>
+                                        <li class="uk-nav-header">Header</li>
+                                        <li><a href="#">Item</a></li>
+                                        <li><a href="#">Item</a></li>
+                                        <li class="uk-nav-divider"></li>
+                                        <li><a href="#">Item</a></li>
+                                    </ul>
+                                </div>
+                            </li>
                             <li class="uk-disabled"><a>Disabled</a></li>
                         </ul>
 
@@ -608,7 +634,20 @@
 
                         <ul uk-tab>
                             <li class="uk-active"><a href="#">Active</a></li>
-                            <li><a href="#">Item</a></li>
+                            <li>
+                                <a href="#">Parent <span uk-subnav-parent-icon></span></a>
+                                <div uk-dropdown="mode: click">
+                                    <ul class="uk-nav uk-dropdown-nav">
+                                        <li class="uk-active"><a href="#">Active</a></li>
+                                        <li><a href="#">Item</a></li>
+                                        <li class="uk-nav-header">Header</li>
+                                        <li><a href="#">Item</a></li>
+                                        <li><a href="#">Item</a></li>
+                                        <li class="uk-nav-divider"></li>
+                                        <li><a href="#">Item</a></li>
+                                    </ul>
+                                </div>
+                            </li>
                             <li class="uk-disabled"><a>Disabled</a></li>
                         </ul>
 

package/tests/navbar.html

@@ -19,7 +19,6 @@
             .scroll-container {
                 border: 1px dashed rgba(0,0,0,0.2);
                 overflow: auto;
-                -webkit-overflow-scrolling: touch;
             }
 
         </style>