uikit 3.18.3 → 3.18.4-dev.379fa2bf1

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.18.3",
+  "version": "3.18.4-dev.379fa2bf1",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/components/slider.js

@@ -300,7 +300,11 @@ export default {
             const lastSlideWidth = dimensions(last(this.slides)).width;
             const scrollDist =
                 getWidth(this.list) -
-                (this.center ? firstSlideWidth / 2 + lastSlideWidth / 2 : lastSlideWidth);
+                (this.center
+                    ? firstSlideWidth / 2 + lastSlideWidth / 2
+                    : this.finite
+                      ? dimensions(this.list).width
+                      : lastSlideWidth);
 
             let dist = percent * scrollDist;
             let slidePercent = 0;

package/src/js/core/img.js

@@ -7,8 +7,6 @@ import {
     data,
     escape,
     fragment,
-    hasAttr,
-    inBrowser,
     includes,
     isArray,
     isEmpty,
@@ -22,8 +20,6 @@ import {
 import { intersection } from '../api/observables';
 import { parseOptions } from '../api/options';
 
-const nativeLazyLoad = inBrowser && 'loading' in HTMLImageElement.prototype;
-
 export default {
     args: 'dataSrc',
 
@@ -46,15 +42,10 @@ export default {
     connected() {
         if (this.loading !== 'lazy') {
             this.load();
-            return;
-        }
-
-        if (nativeLazyLoad && isImg(this.$el)) {
+        } else if (isImg(this.$el)) {
             this.$el.loading = 'lazy';
             setSrcAttrs(this.$el);
         }
-
-        ensureSrcAttribute(this.$el);
     },
 
     disconnected() {
@@ -163,12 +154,6 @@ function parseSources(sources) {
     return sources.filter((source) => !isEmpty(source));
 }
 
-function ensureSrcAttribute(el) {
-    if (isImg(el) && !hasAttr(el, 'src')) {
-        attr(el, 'src', 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"></svg>');
-    }
-}
-
 function isImg(el) {
     return isTag(el, 'img');
 }

package/src/less/components/utility.less

@@ -528,8 +528,7 @@
         .hook-inverse-logo-hover();
     }
 
-    .uk-logo > picture:not(:only-of-type) > :not(.uk-logo-inverse),
-    .uk-logo > :not(picture):not(.uk-logo-inverse):not(:only-of-type) { display: none; }
+    .uk-logo:has(.uk-logo-inverse) > :not(picture:has(.uk-logo-inverse)):not(.uk-logo-inverse) { display: none; }
     .uk-logo-inverse { display: block; }
 
 }

package/src/scss/mixins-theme.scss

@@ -2178,8 +2178,7 @@
         @if(mixin-exists(hook-inverse-logo-hover)) {@include hook-inverse-logo-hover();}
     }
 
-    .uk-logo > picture:not(:only-of-type) > :not(.uk-logo-inverse),
-    .uk-logo > :not(picture):not(.uk-logo-inverse):not(:only-of-type) { display: none; }
+    .uk-logo:has(.uk-logo-inverse) > :not(picture:has(.uk-logo-inverse)):not(.uk-logo-inverse) { display: none; }
     .uk-logo-inverse { display: block; }
 
 }

package/src/scss/mixins.scss

@@ -1780,8 +1780,7 @@
         @if(mixin-exists(hook-inverse-logo-hover)) {@include hook-inverse-logo-hover();}
     }
 
-    .uk-logo > picture:not(:only-of-type) > :not(.uk-logo-inverse),
-    .uk-logo > :not(picture):not(.uk-logo-inverse):not(:only-of-type) { display: none; }
+    .uk-logo:has(.uk-logo-inverse) > :not(picture:has(.uk-logo-inverse)):not(.uk-logo-inverse) { display: none; }
     .uk-logo-inverse { display: block; }
 
 }

package/tests/utility.html

@@ -420,39 +420,64 @@
                 <a class="uk-logo" href="#">Text Logo</a>
             </p>
 
-            <div class="uk-flex-inline uk-margin uk-grid-small" uk-grid>
+            <div class="uk-child-width-auto uk-grid-small" uk-grid>
                 <div>
-                    <p>Image</p>
+                    <p>Image<br>-</p>
                     <a class="uk-logo" href="#" aria-label="Back to Home">
-                        <img src="images/photo.jpg" width="200" height="133" alt="">
+                        <img src="images/photo.jpg" width="150" height="100" alt="">
                     </a>
                 </div>
                 <div>
-                    <p>+ Inverse Image</p>
+                    <p>Picture<br>-</p>
                     <a class="uk-logo" href="#" aria-label="Back to Home">
-                        <img src="images/photo.jpg" width="200" height="133" alt="">
-                        <img class="uk-logo-inverse" src="images/dark.jpg" width="200" height="133" alt="">
+                        <picture>
+                            <img src="images/photo.jpg" width="150" height="100" alt="">
+                        </picture>
+                    </a>
+                </div>
+                <div>
+                    <p>Image<br>Inverse Image</p>
+                    <a class="uk-logo" href="#" aria-label="Back to Home">
+                        <img src="images/photo.jpg" width="150" height="100" alt="">
+                        <img class="uk-logo-inverse" src="images/dark.jpg" width="150" height="100" alt="">
                     </a>
                 </div>
                 <div>
-                    <p>Picture</p>
+                    <p>Picture<br>Inverse Picture</p>
                     <a class="uk-logo" href="#" aria-label="Back to Home">
                         <picture>
-                            <img src="images/photo.jpg" width="200" height="133" alt="">
+                            <img src="images/photo.jpg" width="150" height="100" alt="">
+                        </picture>
+                        <picture>
+                            <img class="uk-logo-inverse" src="images/dark.jpg" width="150" height="100" alt="">
                         </picture>
                     </a>
                 </div>
                 <div>
-                    <p>+ Inverse Picture</p>
+                    <p>Picture<br>Inverse SVG</p>
                     <a class="uk-logo" href="#" aria-label="Back to Home">
                         <picture>
-                            <img src="images/photo.jpg" width="200" height="133" alt="">
+                            <img src="images/photo.jpg" width="150" height="100" alt="">
                         </picture>
+                        <img class="uk-logo-inverse" src="images/icons.svg#trash" alt="" uk-svg>
+                    </a>
+                </div>
+                <div>
+                    <p>SVG<br>Inverse Picture</p>
+                    <a class="uk-logo" href="#" aria-label="Back to Home">
+                        <img src="images/icons.svg#table" alt="" uk-svg>
                         <picture>
-                            <img class="uk-logo-inverse" src="images/dark.jpg" width="200" height="133" alt="">
+                            <img class="uk-logo-inverse" src="images/dark.jpg" width="150" height="100" alt="">
                         </picture>
                     </a>
                 </div>
+                <div>
+                    <p>SVG<br>Inverse SVG</p>
+                    <a class="uk-logo" href="#" aria-label="Back to Home">
+                        <img src="images/icons.svg#table" alt="" uk-svg>
+                        <img class="uk-logo-inverse" src="images/icons.svg#trash" alt="" uk-svg>
+                    </a>
+                </div>
             </div>
 
         </div>