uikit 3.25.12-dev.b282cd2 → 3.25.12

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

package/src/js/components/slider.js

@@ -15,7 +15,7 @@ import {
     toNumber,
     toggleClass,
 } from 'uikit-util';
-import { resize } from '../api/observables';
+import { intersection, resize } from '../api/observables';
 import Class from '../mixin/class';
 import Slider, { speedUp } from '../mixin/slider';
 import SliderParallax from '../mixin/slider-parallax';
@@ -125,9 +125,21 @@ export default {
         toggleClass(this.$el, this.clsContainer, !$(`.${this.clsContainer}`, this.$el));
     },
 
-    observe: resize({
-        target: ({ slides, $el }) => [$el, ...slides],
-    }),
+    observe: [
+        resize({
+            target: ({ slides, $el }) => [$el, ...slides],
+        }),
+        intersection({
+            handler(entries) {
+                for (const { target, isIntersecting } of entries) {
+                    target.ariaHidden = target.inert = !isIntersecting;
+                }
+            },
+            target: ({ slides }) => slides,
+            args: { intersecting: false },
+            options: ({ $el }) => ({ root: $el, rootMargin: '0px -10px' }),
+        }),
+    ],
 
     update: {
         write() {
@@ -249,10 +261,7 @@ export default {
                 !this.sets || includes(this.sets, toFloat(this.index)) ? this.clsActivated : '',
             ];
             for (const slide of this.slides) {
-                const active = includes(actives, slide);
-                toggleClass(slide, activeClasses, active);
-                slide.inert = !active;
-                slide.ariaHidden = !active;
+                toggleClass(slide, activeClasses, includes(actives, slide));
             }
         },
 

package/src/js/core/accordion.js

@@ -189,8 +189,10 @@ export default {
 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) {
@@ -199,7 +201,7 @@ async function transition(el, show, { content, duration, velocity, transition })
 
     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);
 

package/src/less/components/nav.less

@@ -131,6 +131,13 @@
     list-style: none;
 }
 
+/*
+ * Accordion open/close state
+ */
+
+[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/nav.scss

@@ -68,6 +68,13 @@ $nav-xlarge-font-size-l:                         8rem !default; // 128px
     list-style: none;
 }
 
+/*
+ * Accordion open/close state
+ */
+
+[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