uikit 3.25.29-dev.3bc1304 → 3.25.29-dev.a0b5ca8

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.29-dev.3bc1304",
+    "version": "3.25.29-dev.a0b5ca8",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/js/components/lightbox-panel.js

@@ -344,7 +344,7 @@ export default {
                     try {
                         const { height, width } = await (
                             await fetch(
-                                `https://vimeo.com/api/oembed.json?maxwidth=1920&url=${encodeURI(
+                                `https://vimeo.com/api/oembed.json?maxwidth=1920&url=${encodeURIComponent(
                                     src,
                                 )}`,
                                 { credentials: 'omit' },
@@ -463,9 +463,9 @@ function toThumbnavItem(item, videoAutoplay) {
 }
 
 function isImage(src) {
-    return src?.match(/\.(avif|jpe?g|jfif|a?png|gif|svg|webp)($|\?)/i);
+    return src?.match(/\.(avif|jpe?g|jfif|a?png|gif|svg|webp)($|[?#])/i);
 }
 
 function isVideo(src) {
-    return src?.match(/\.(mp4|webm|ogv)($|\?)/i);
+    return src?.match(/\.(mp4|webm|ogv)($|[?#])/i);
 }

package/src/js/core/dropnav.js

@@ -210,7 +210,7 @@ export default {
                             elements,
                             findIndex(elements, (el) => matches(el, ':focus')),
                         )
-                    ].focus();
+                    ]?.focus();
                     return;
                 }
 

package/src/js/core/grid.js

@@ -132,7 +132,7 @@ export default {
             },
 
             write({ columns, scrolled, scrollColumns, translates }) {
-                if (!scrolled && !translates) {
+                if (scrolled === false && !translates) {
                     return;
                 }
 

package/src/js/core/icon.js

@@ -251,7 +251,9 @@ function install(UIkit) {
         if (UIkit._initialized) {
             apply(document.body, (el) =>
                 each(UIkit.getComponents(el), (cmp) => {
-                    cmp.$options.isIcon && cmp.icon in added && cmp.$reset();
+                    cmp.$options.isIcon &&
+                        (aliases[cmp.icon] || cmp.icon) in added &&
+                        cmp.$reset();
                 }),
             );
         }

package/src/js/core/img.js

@@ -7,7 +7,6 @@ import {
     data,
     escape,
     fragment,
-    includes,
     isArray,
     isEmpty,
     isTag,
@@ -88,8 +87,9 @@ function setSrcAttrs(el, src) {
         const elements = isTag(parentNode, 'picture') ? children(parentNode) : [el];
         elements.forEach((el) => setSourceProps(el, el));
     } else if (src) {
-        if (!includes(el.style.backgroundImage, src)) {
-            css(el, 'backgroundImage', `url(${escape(src)})`);
+        const previousBackground = el.style.backgroundImage;
+        css(el, 'backgroundImage', `url(${escape(src)})`);
+        if (el.style.backgroundImage !== previousBackground) {
             trigger(el, createEvent('load', false));
         }
     }

package/src/js/core/inverse.js

@@ -64,6 +64,7 @@ export default {
                     [...toNodes(target), document.documentElement],
                     handler,
                 );
+                const transitionObserver = observeResize([], handler);
                 const listener = [
                     on(document, 'scroll itemshown itemhidden', handler, {
                         passive: true,
@@ -71,11 +72,11 @@ export default {
                     }),
                     on(document, 'show hide transitionstart', (e) => {
                         handler();
-                        return observer.observe(e.target);
+                        return transitionObserver.observe(e.target);
                     }),
                     on(document, 'shown hidden transitionend transitioncancel', (e) => {
                         handler();
-                        return observer.unobserve(e.target);
+                        return transitionObserver.unobserve(e.target);
                     }),
                 ];
 
@@ -84,6 +85,7 @@ export default {
                     unobserve: observer.unobserve.bind(observer),
                     disconnect() {
                         observer.disconnect();
+                        transitionObserver.disconnect();
                         listener.forEach((off) => off());
                     },
                 };

package/src/js/core/margin.js

@@ -85,7 +85,7 @@ export function getRows(elements) {
             const offsetCurrent = getOffset(current[0], withOffset);
 
             if (offset.top >= offsetCurrent.bottom - 1 && offset.top !== offsetCurrent.top) {
-                sorted.push([el]);
+                sorted.splice(i + 1, 0, [el]);
                 break;
             }
 

package/src/js/core/modal.js

@@ -164,7 +164,7 @@ function install({ modal }) {
 
         return assign(
             new Promise((resolve) => {
-                const off = on(dialog.$el, 'hide', () => resolve(hideFn()));
+                const off = on(dialog.$el, 'hide', () => resolve(hideFn()), { self: true });
 
                 on(dialog.$el, 'submit', 'form', (e) => {
                     e.preventDefault();

package/src/js/core/overflow-fade.js

@@ -5,8 +5,10 @@ import {
     getEventPos,
     hasClass,
     isInput,
+    isRtl,
     isTouch,
     on,
+    once,
     pointerCancel,
     pointerDown,
     pointerMove,
@@ -73,7 +75,9 @@ export default {
 
                 if (!overflow[i - 1]) {
                     const dir = i ? 'Top' : 'Left';
-                    const percent = overflow[i] ? this.$el[`scroll${dir}`] / overflow[i] : 0;
+                    // The horizontal mask runs left to right, even in RTL.
+                    const position = this.$el[`scroll${dir}`] + (!i && isRtl ? overflow[i] : 0);
+                    const percent = overflow[i] ? position / overflow[i] : 0;
 
                     const toValue = (value) =>
                         overflow[i] ? clamp((this.fadeDuration - value) / this.fadeDuration) : 1;
@@ -110,7 +114,7 @@ function handleMouseDrag(e) {
     let started;
 
     const off = on(document, pointerMove, move(e), pointerOptions);
-    on(document, [pointerUp, pointerCancel], end, { capture: true, once: true });
+    once(document, [pointerUp, pointerCancel], end, true);
 
     function move(e) {
         let origin = getEventPos(e);

package/src/js/core/svg.js

@@ -51,7 +51,11 @@ export default {
     methods: {
         async getSvg() {
             if (isTag(this.$el, 'img') && !this.$el.complete && this.$el.loading === 'lazy') {
-                await new Promise((resolve) => once(this.$el, 'load', resolve));
+                await new Promise((resolve, reject) =>
+                    once(this.$el, 'load error', (event) =>
+                        event.type === 'load' ? resolve() : reject(event),
+                    ),
+                );
             }
 
             return parseSVG(await loadSVG(this.src), this.icon) || Promise.reject('SVG not found.');

package/src/js/core/switcher.js

@@ -108,6 +108,7 @@ export default {
 
             handler(e) {
                 if (
+                    !e.defaultPrevented &&
                     !matches(e.current, selDisabled) &&
                     (e.type === 'click' || e.keyCode === keyMap.SPACE)
                 ) {

package/src/js/util/filter.js

@@ -83,7 +83,12 @@ export function isSameSiteAnchor(el) {
 export function getTargetedElement(el) {
     if (isSameSiteAnchor(el)) {
         const { hash, ownerDocument } = toNode(el);
-        const id = decodeURIComponent(hash).slice(1);
+        let id = hash.slice(1);
+        try {
+            id = decodeURIComponent(id);
+        } catch {
+            // Fall back to the literal fragment for malformed encoding.
+        }
         return id
             ? ownerDocument.getElementById(id) || ownerDocument.getElementsByName(id)[0]
             : ownerDocument.documentElement;

package/src/js/util/lang.js

@@ -211,44 +211,19 @@ export function pointInRect(point, rect) {
     );
 }
 
-function ratio(dimensions, prop, value) {
-    const aProp = prop === 'width' ? 'height' : 'width';
+function cover(dimensions, maxDimensions) {
+    const scale = Math.max(
+        dimensions.width ? maxDimensions.width / dimensions.width : 0,
+        dimensions.height ? maxDimensions.height / dimensions.height : 0,
+    );
 
     return {
-        [aProp]: dimensions[prop]
-            ? Math.round((value * dimensions[aProp]) / dimensions[prop])
-            : dimensions[aProp],
-        [prop]: value,
+        width: Math.round(dimensions.width * scale),
+        height: Math.round(dimensions.height * scale),
     };
 }
 
-function contain(dimensions, maxDimensions) {
-    dimensions = { ...dimensions };
-
-    for (const prop in dimensions) {
-        dimensions =
-            dimensions[prop] > maxDimensions[prop]
-                ? ratio(dimensions, prop, maxDimensions[prop])
-                : dimensions;
-    }
-
-    return dimensions;
-}
-
-function cover(dimensions, maxDimensions) {
-    dimensions = contain(dimensions, maxDimensions);
-
-    for (const prop in dimensions) {
-        dimensions =
-            dimensions[prop] < maxDimensions[prop]
-                ? ratio(dimensions, prop, maxDimensions[prop])
-                : dimensions;
-    }
-
-    return dimensions;
-}
-
-export const Dimensions = { ratio, contain, cover };
+export const Dimensions = { cover };
 
 export function getIndex(i, elements, current = 0, finite = false) {
     elements = toNodes(elements);

package/src/js/util/scroll.js

@@ -1,6 +1,6 @@
 import { css, getEventPos, matches, on, once, resetProps, scrollParents, width } from 'uikit-util';
 
-let prevented;
+let scrollLocks = 0;
 export function preventBackgroundScroll(el) {
     // 'overscroll-behavior: contain' only works consistently if el overflows (Safari)
     const off = on(
@@ -44,21 +44,26 @@ export function preventBackgroundScroll(el) {
         { passive: true },
     );
 
-    if (prevented) {
-        return off;
-    }
-    prevented = true;
-
     const { scrollingElement } = document;
     const props = {
         overflowY: CSS.supports('overflow', 'clip') ? 'clip' : 'hidden',
         touchAction: 'none',
         scrollbarGutter: width(window) - scrollingElement.clientWidth ? 'stable' : '',
     };
-    css(scrollingElement, props);
+
+    if (!scrollLocks++) {
+        css(scrollingElement, props);
+    }
+
+    let released = false;
     return () => {
-        prevented = false;
+        if (released) {
+            return;
+        }
+        released = true;
         off();
-        resetProps(scrollingElement, props);
+        if (!--scrollLocks) {
+            resetProps(scrollingElement, props);
+        }
     };
 }

package/src/js/util/svg.js

@@ -1,10 +1,11 @@
 import { $$ } from './dom';
-import { isVisible } from './filter.js';
 
 export function getMaxPathLength(el) {
-    return isVisible(el)
-        ? Math.ceil(
-              Math.max(0, ...$$('[stroke]', el).map((stroke) => stroke.getTotalLength?.() || 0)),
-          )
-        : 0;
+    try {
+        return Math.ceil(
+            Math.max(0, ...$$('[stroke]', el).map((stroke) => stroke.getTotalLength?.() || 0)),
+        );
+    } catch {
+        return 0;
+    }
 }

package/tests/overflow-fade.test.mjs

@@ -0,0 +1,69 @@
+import assert from 'node:assert/strict';
+import { readFile } from 'node:fs/promises';
+import test from 'node:test';
+import vm from 'node:vm';
+
+const source = await readFile(new URL('../src/js/core/overflow-fade.js', import.meta.url), 'utf8');
+function loadComponent(direction) {
+    return vm.runInNewContext(
+        source.replace(/^import[\s\S]*?from '[^']+';\s*/gm, '').replace('export default', 'component ='),
+        {
+            clamp: (value) => Math.min(1, Math.max(0, value)),
+            isRtl: direction === 'rtl',
+            css: (el, value) => (typeof value === 'string' ? el[value] : Object.assign(el.style, value)),
+            mutation: () => ({}),
+            resize: () => ({}),
+            toggleClass: () => {},
+            pointerDown: 'pointerdown',
+        },
+    );
+}
+
+function getOpacities(direction, scrollLeft, scrollTop = 0, horizontal = 200, vertical = 0) {
+    const component = loadComponent(direction);
+    const context = {
+        $el: {
+            direction,
+            scrollLeft,
+            scrollTop,
+            scrollWidth: 100 + horizontal,
+            clientWidth: 100,
+            scrollHeight: 100 + vertical,
+            clientHeight: 100,
+            style: {},
+        },
+        $options: { id: 'uk-overflow-fade' },
+        ...component.data,
+    };
+    component.update.write.call(context, component.update.read.call(context));
+    return [
+        context.$el.style['--uk-overflow-fade-start-opacity'],
+        context.$el.style['--uk-overflow-fade-end-opacity'],
+    ];
+}
+
+test('RTL horizontal fades follow physical left and right edges', () => {
+    assert.deepEqual(getOpacities('rtl', 0), [0, 1]);
+    assert.deepEqual(getOpacities('rtl', -100), [0, 0]);
+    assert.deepEqual(getOpacities('rtl', -200), [1, 0]);
+});
+
+test('LTR horizontal fades are unchanged', () => {
+    assert.deepEqual(getOpacities('ltr', 0), [1, 0]);
+    assert.deepEqual(getOpacities('ltr', 100), [0, 0]);
+    assert.deepEqual(getOpacities('ltr', 200), [0, 1]);
+});
+
+test('vertical fades are independent of direction', () => {
+    for (const direction of ['ltr', 'rtl']) {
+        assert.deepEqual(getOpacities(direction, 0, 0, 0, 200), [1, 0]);
+        assert.deepEqual(getOpacities(direction, 0, 100, 0, 200), [0, 0]);
+        assert.deepEqual(getOpacities(direction, 0, 200, 0, 200), [0, 1]);
+    }
+});
+
+test('elements without overflow remain opaque', () => {
+    for (const direction of ['ltr', 'rtl']) {
+        assert.deepEqual(getOpacities(direction, 0, 0, 0), [1, 1]);
+    }
+});