uikit 3.25.11 → 3.25.12-dev.7e5fa64

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.25.11",
+    "version": "3.25.12-dev.7e5fa64",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/js/core/accordion.js

@@ -83,15 +83,7 @@ export default {
             this.$emit();
         },
 
-        contents(items) {
-            for (const el of items) {
-                const isOpen = hasClass(
-                    this.items.find((item) => item.contains(el)),
-                    this.clsOpen,
-                );
-
-                hide(el, !isOpen);
-            }
+        contents() {
             this.$emit();
         },
     },
@@ -183,7 +175,6 @@ export default {
                         toggleClass(el, this.clsOpen, show);
 
                         if (animate === false || !this.animation) {
-                            hide($(this.content, el), !show);
                             return;
                         }
 
@@ -195,23 +186,28 @@ export default {
     },
 };
 
-function hide(el, hide) {
-    el && (el.hidden = hide);
-}
-
 async function transition(el, show, { content, duration, velocity, transition }) {
     content = el._wrapper?.firstElementChild || $(content, el);
 
+    let hidden;
     if (!el._wrapper) {
         el._wrapper = wrapAll(content, '<div>');
+        hidden = show;
+    }
+
+    if (!show) {
+        css(content, 'display', 'flow-root');
     }
 
     const wrapper = el._wrapper;
     css(wrapper, 'overflow', 'hidden');
-    const currentHeight = toFloat(css(wrapper, 'height'));
+    const currentHeight = hidden ? 0 : toFloat(css(wrapper, 'height'));
 
     await Transition.cancel(wrapper);
-    hide(content, false);
+
+    if (show) {
+        css(content, 'display', 'flow-root');
+    }
 
     const endHeight =
         sumBy(['marginTop', 'marginBottom'], (prop) => css(content, prop)) +
@@ -226,9 +222,7 @@ async function transition(el, show, { content, duration, velocity, transition })
     unwrap(content);
     delete el._wrapper;
 
-    if (!show) {
-        hide(content, true);
-    }
+    css(content, 'display', '');
 }
 
 function keepScrollPosition(el) {

package/src/js/mixin/modal.js

@@ -23,7 +23,6 @@ import { preventBackgroundScroll } from '../util/scroll';
 import Class from './class';
 import Container from './container';
 import { maybeDefaultPreventClick } from './event';
-import { storeScrollPosition } from './position';
 import Togglable from './togglable';
 
 const active = [];
@@ -197,9 +196,7 @@ export default {
 
                     queueMicrotask(() => {
                         if (isFocusable(target)) {
-                            const restoreScrollPosition = storeScrollPosition(target);
-                            target.focus();
-                            restoreScrollPosition();
+                            target.focus({ preventScroll: true });
                         }
                     });
                 }

package/src/js/mixin/position.js

@@ -99,15 +99,9 @@ export function storeScrollPosition(element) {
     const scrollElement = scrollParent(element);
     const { scrollTop } = scrollElement;
 
-    const restore = () => {
+    return () => {
         if (scrollTop !== scrollElement.scrollTop) {
             scrollElement.scrollTop = scrollTop;
         }
     };
-
-    return () => {
-        restore();
-        // setTimeout is needed for iOS Safari
-        setTimeout(restore);
-    };
 }

package/src/js/mixin/togglable.js

@@ -20,7 +20,6 @@ import {
     unwrap,
     wrapInner,
 } from 'uikit-util';
-import { storeScrollPosition } from './position';
 
 export default {
     props: {
@@ -82,9 +81,9 @@ export default {
                             trigger(el, show ? 'shown' : 'hidden', [this]);
 
                             if (show) {
-                                const restoreScrollPosition = storeScrollPosition(el);
-                                $$('[autofocus]', el).find(isVisible)?.focus();
-                                restoreScrollPosition();
+                                $$('[autofocus]', el)
+                                    .find(isVisible)
+                                    ?.focus({ preventScroll: true });
                             }
                         };
 

package/src/less/components/accordion.less

@@ -39,7 +39,9 @@
 
 .uk-accordion-title { display: block; }
 
-.uk-accordion-content { display: flow-root; }
+.uk-accordion-content { display: none; }
+
+.uk-open > .uk-accordion-content { display: flow-root; }
 
 /*
  * Remove margin from the last-child

package/src/less/components/nav.less

@@ -131,6 +131,10 @@
     list-style: none;
 }
 
+.uk-nav > .uk-parent > ul { display: none; }
+
+.uk-nav > .uk-parent.uk-open > ul { display: block; }
+
 /*
 * 1. Center content vertically, e.g. an icon
 * 2. Imitate white space gap when using flexbox

package/src/less/components/utility.less

@@ -180,7 +180,13 @@
     -webkit-overflow-scrolling: touch;
     -ms-overflow-style: -ms-autohiding-scrollbar;
     /* 2 */
-    mask-image: linear-gradient(to var(--uk-overflow-fade-direction), rgba(0,0,0,var(--uk-overflow-fade-start-opacity)), #000 @overflow-fade-size, #000 ~'calc(100% - @{overflow-fade-size})', rgba(0,0,0,var(--uk-overflow-fade-end-opacity)));
+    mask-image: linear-gradient(
+        to var(--uk-overflow-fade-direction),
+        rgba(0,0,0,var(--uk-overflow-fade-start-opacity)),
+        #000 @overflow-fade-size,
+        #000 ~'calc(100% - @{overflow-fade-size})',
+        rgba(0,0,0,var(--uk-overflow-fade-end-opacity))
+    );
     /* 3 */
     scrollbar-width: none;
 }

package/src/scss/components/accordion.scss

@@ -34,7 +34,9 @@
 
 .uk-accordion-title { display: block; }
 
-.uk-accordion-content { display: flow-root; }
+.uk-accordion-content { display: none; }
+
+.uk-open > .uk-accordion-content { display: flow-root; }
 
 /*
  * Remove margin from the last-child

package/src/scss/components/nav.scss

@@ -68,6 +68,10 @@ $nav-xlarge-font-size-l:                         8rem !default; // 128px
     list-style: none;
 }
 
+.uk-nav > .uk-parent > ul { display: none; }
+
+.uk-nav > .uk-parent.uk-open > ul { display: block; }
+
 /*
 * 1. Center content vertically, e.g. an icon
 * 2. Imitate white space gap when using flexbox

package/src/scss/components/utility.scss

@@ -163,7 +163,13 @@
     -webkit-overflow-scrolling: touch;
     -ms-overflow-style: -ms-autohiding-scrollbar;
     /* 2 */
-    mask-image: linear-gradient(to var(--uk-overflow-fade-direction), rgba(0,0,0,var(--uk-overflow-fade-start-opacity)), #000 $overflow-fade-size, #000 string.unquote('calc(100% - #{$overflow-fade-size})'), rgba(0,0,0,var(--uk-overflow-fade-end-opacity)));
+    mask-image: linear-gradient(
+        to var(--uk-overflow-fade-direction),
+        rgba(0,0,0,var(--uk-overflow-fade-start-opacity)),
+        #000 $overflow-fade-size,
+        #000 string.unquote('calc(100% - #{$overflow-fade-size})'),
+        rgba(0,0,0,var(--uk-overflow-fade-end-opacity))
+    );
     /* 3 */
     scrollbar-width: none;
 }