uikit 3.25.8 → 3.25.10-dev.17473f4

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.8",
+    "version": "3.25.10-dev.17473f4",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [
@@ -31,9 +31,9 @@
         "url": "https://github.com/uikit/uikit/issues"
     },
     "homepage": "https://getuikit.com",
-    "packageManager": "pnpm@10.28.2",
+    "packageManager": "pnpm@10.29.2",
     "devDependencies": {
-        "@eslint/js": "^9.39.2",
+        "@eslint/js": "^10.0.1",
         "@rollup/plugin-alias": "^6.0.0",
         "@rollup/plugin-replace": "^6.0.3",
         "archiver": "^7.0.1",
@@ -42,7 +42,7 @@
         "clean-css": "^5.3.3",
         "date-fns": "^4.1.0",
         "esbuild": "^0.27.2",
-        "eslint": "^9.39.2",
+        "eslint": "^10.0.0",
         "eslint-config-prettier": "^10.1.8",
         "execa": "^9.6.1",
         "fs-extra": "^11.3.2",

package/src/js/components/slider.js

@@ -312,7 +312,7 @@ export default {
                 : getWidth(this.list, this.maxIndex);
 
             let dist = percent * scrollDist;
-            let slidePercent = 0;
+            let slidePercent;
 
             do {
                 const slideWidth = dimensions(this.slides[++index]).width;

package/src/js/core/height-viewport.js

@@ -51,7 +51,6 @@ export default {
                 return { minHeight: false };
             }
 
-            let minHeight = '';
             const box = boxModelAdjust(this.$el, 'height', 'content-box');
 
             const { body, scrollingElement } = document;
@@ -63,7 +62,7 @@ export default {
             const isScrollingElement = scrollingElement === scrollElement || body === scrollElement;
 
             // on mobile devices (iOS and Android) window.innerHeight !== 100vh
-            minHeight = `calc(${isScrollingElement ? '100vh' : `${viewportHeight}px`}`;
+            let minHeight = `calc(${isScrollingElement ? '100vh' : `${viewportHeight}px`}`;
 
             if (this.expand) {
                 const diff = dimensions(scrollElement).height - dimensions(this.$el).height;

package/src/js/core/margin.js

@@ -27,13 +27,15 @@ export default {
         resize({
             handler(mutations) {
                 for (const {
+                    target,
                     borderBoxSize: [{ inlineSize, blockSize }],
                 } of mutations) {
-                    if (inlineSize || blockSize) {
-                        this.$emit('resize');
+                    // Skip if the element is hidden
+                    if (target === this.$el && !inlineSize && !blockSize) {
                         return;
                     }
                 }
+                this.$emit('resize');
             },
             target: ({ $el }) => [$el, ...children($el)],
         }),

package/src/js/core/switcher.js

@@ -8,8 +8,7 @@ import {
     findIndex,
     getIndex,
     hasClass,
-    includes,
-    isNode,
+    isNumeric,
     isTag,
     matches,
     queryAll,
@@ -85,10 +84,10 @@ export default {
             this.$emit();
         },
 
-        toggles(toggles) {
+        toggles() {
             this.$emit();
             const active = this.index();
-            this.show(~active ? active : toggles[this.active] || toggles[0]);
+            this.show(~active ? active : this.next(this.active));
         },
     },
 
@@ -142,8 +141,7 @@ export default {
 
                 if (~i) {
                     e.preventDefault();
-                    const toggles = this.toggles.filter((el) => !matches(el, selDisabled));
-                    const next = toggles[getIndex(i, toggles, toggles.indexOf(current))];
+                    const next = this.toggles[this.next(i, this.toggles.indexOf(current))];
                     next.focus();
                     if (this.followFocus) {
                         this.show(next);
@@ -213,32 +211,43 @@ export default {
             return findIndex(this.children, (el) => hasClass(el, this.cls));
         },
 
-        show(item) {
+        next(item, prev = this.index()) {
+            if (isNumeric(item)) {
+                for (let i = 0; i < this.toggles.length; i++) {
+                    let index = getIndex(i + +item, this.toggles);
+                    if (!matches(this.toggles[index], selDisabled)) {
+                        return index;
+                    }
+                }
+            }
+
             const toggles = this.toggles.filter((el) => !matches(el, selDisabled));
-            const prev = this.index();
-            const next = getIndex(
-                !isNode(item) || includes(toggles, item) ? item : 0,
-                toggles,
-                getIndex(this.toggles[prev], toggles),
+            return getIndex(
+                toggles[getIndex(item, toggles, toggles.indexOf(this.toggles[prev]))],
+                this.toggles,
             );
-            const active = getIndex(toggles[next], this.toggles);
+        },
+
+        show(item) {
+            const prev = this.index();
+            const next = this.next(item);
 
             this.children.forEach((child, i) => {
-                toggleClass(child, this.cls, active === i);
+                toggleClass(child, this.cls, next === i);
                 attr(this.toggles[i], {
-                    'aria-selected': active === i,
-                    tabindex: active === i ? null : -1,
+                    'aria-selected': next === i,
+                    tabindex: next === i ? null : -1,
                 });
             });
 
             const animate = prev >= 0 && prev !== next;
             this.connects.forEach(async ({ children }) => {
                 const actives = toArray(children).filter(
-                    (child, i) => i !== active && hasClass(child, this.cls),
+                    (child, i) => i !== next && hasClass(child, this.cls),
                 );
 
                 if (await this.toggleElement(actives, false, animate)) {
-                    await this.toggleElement(children[active], true, animate);
+                    await this.toggleElement(children[next], true, animate);
                 }
             });
         },

package/src/less/components/lightbox.less

@@ -154,6 +154,8 @@
     max-height: @lightbox-item-max-height;
 }
 
+.uk-lightbox-items-fit > * > :not(iframe) { object-fit: contain; }
+
 /* Zoom Cursor */
 .uk-lightbox-items.uk-lightbox-items-fit .uk-lightbox-zoom:hover { cursor: zoom-in; }
 .uk-lightbox-items:not(.uk-lightbox-items-fit) .uk-lightbox-zoom:hover { cursor: zoom-out; }

package/src/scss/components/lightbox.scss

@@ -144,6 +144,8 @@
     max-height: $lightbox-item-max-height;
 }
 
+.uk-lightbox-items-fit > * > :not(iframe) { object-fit: contain; }
+
 /* Zoom Cursor */
 .uk-lightbox-items.uk-lightbox-items-fit .uk-lightbox-zoom:hover { cursor: zoom-in; }
 .uk-lightbox-items:not(.uk-lightbox-items-fit) .uk-lightbox-zoom:hover { cursor: zoom-out; }