uikit 3.17.5 → 3.17.7-dev.fbae993df

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.17.5",
+  "version": "3.17.7-dev.fbae993df",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [
@@ -19,7 +19,7 @@
     "url": "https://github.com/uikit/uikit/issues"
   },
   "homepage": "https://getuikit.com",
-  "packageManager": "pnpm@8.8.0",
+  "packageManager": "pnpm@8.10.1",
   "devDependencies": {
     "@rollup/plugin-alias": "^5.0.1",
     "@rollup/plugin-replace": "^5.0.4",
@@ -38,7 +38,7 @@
     "less": "^4.1.3",
     "minimist": "^1.2.8",
     "number-precision": "^1.6.0",
-    "p-limit": "^4.0.0",
+    "p-limit": "^5.0.0",
     "prettier": "^3.0.2",
     "prettier-plugin-organize-imports": "^3.2.3",
     "rollup": "^4.1.4",

package/src/js/core/sticky.js

@@ -159,7 +159,7 @@ export default {
 
                 const hide = this.isFixed && !this.transitionInProgress;
                 if (hide) {
-                    preventTransition(this.selTarget);
+                    preventTransition(this.$el);
                     this.hide();
                 }
 
@@ -477,6 +477,6 @@ function reset(el) {
 }
 
 function preventTransition(el) {
-    css(el, 'transition', '0s');
-    requestAnimationFrame(() => css(el, 'transition', ''));
+    addClass(el, 'uk-transition-disable');
+    requestAnimationFrame(() => removeClass(el, 'uk-transition-disable'));
 }

package/src/js/core/video.js

@@ -30,7 +30,7 @@ export default {
 
     observe: [
         intersection({
-            filter: ({ $el }) => isVideo($el),
+            filter: ({ $el, autoplay }) => autoplay && isVideo($el),
             handler([{ isIntersecting }]) {
                 if (isIntersecting) {
                     play(this.$el);

package/src/less/components/cover.less

@@ -12,23 +12,6 @@
    Component: Cover
  ========================================================================== */
 
-/*
- * Works with embedded content
- */
-
-img[uk-cover],
-video[uk-cover],
-img[data-uk-cover],
-video[data-uk-cover] {
-    left: 0;
-    top: 0;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: center;
-}
-
 /*
  * Works with iframes and embedded content
  * 1. Use attribute to apply transform instantly. Needed if transform is transitioned.
@@ -39,8 +22,8 @@ video[data-uk-cover] {
  */
 
 /* 1 */
-:not(img,video)[uk-cover],
-:not(img,video)[data-uk-cover] {
+[uk-cover]:where(canvas, iframe, svg),
+[data-uk-cover]:where(canvas, iframe, svg) {
     /* 2 */
     max-width: none;
     /* 3 */
@@ -55,6 +38,19 @@ video[data-uk-cover] {
 iframe[uk-cover],
 iframe[data-uk-cover] { pointer-events: none; }
 
+[uk-cover]:where(img, video),
+[data-uk-cover]:where(img, video) {
+    /* 3 */
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    object-fit: cover;
+    object-position: center;
+}
+
 
 /* Container
  ========================================================================== */

package/src/less/components/transition.less

@@ -12,6 +12,7 @@
 //                  `uk-transition-slide-right-*`
 //                  `uk-transition-opaque`
 //                  `uk-transition-slow`
+//                  `uk-transition-disable`
 //
 // Sub-objects:     `uk-transition-toggle`,
 //                  `uk-transition-active`
@@ -151,11 +152,17 @@
 .uk-transition-opaque { opacity: 1; }
 
 
-/* Duration modifiers
+/* Duration modifier
  ========================================================================== */
 
 .uk-transition-slow { transition-duration: @transition-slow-duration; }
 
+/* Disable modifier
+ ========================================================================== */
+
+.uk-transition-disable,
+.uk-transition-disable * { transition: none !important; }
+
 
 // Hooks
 // ========================================================================

package/src/scss/components/cover.scss

@@ -12,23 +12,6 @@
    Component: Cover
  ========================================================================== */
 
-/*
- * Works with embedded content
- */
-
-img[uk-cover],
-video[uk-cover],
-img[data-uk-cover],
-video[data-uk-cover] {
-    left: 0;
-    top: 0;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: center;
-}
-
 /*
  * Works with iframes and embedded content
  * 1. Use attribute to apply transform instantly. Needed if transform is transitioned.
@@ -39,8 +22,8 @@ video[data-uk-cover] {
  */
 
 /* 1 */
-:not(img,video)[uk-cover],
-:not(img,video)[data-uk-cover] {
+[uk-cover]:where(canvas, iframe, svg),
+[data-uk-cover]:where(canvas, iframe, svg) {
     /* 2 */
     max-width: none;
     /* 3 */
@@ -55,6 +38,19 @@ video[data-uk-cover] {
 iframe[uk-cover],
 iframe[data-uk-cover] { pointer-events: none; }
 
+[uk-cover]:where(img, video),
+[data-uk-cover]:where(img, video) {
+    /* 3 */
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    object-fit: cover;
+    object-position: center;
+}
+
 
 /* Container
  ========================================================================== */

package/src/scss/components/transition.scss

@@ -12,6 +12,7 @@
 //                  `uk-transition-slide-right-*`
 //                  `uk-transition-opaque`
 //                  `uk-transition-slow`
+//                  `uk-transition-disable`
 //
 // Sub-objects:     `uk-transition-toggle`,
 //                  `uk-transition-active`
@@ -146,11 +147,17 @@
 .uk-transition-opaque { opacity: 1; }
 
 
-/* Duration modifiers
+/* Duration modifier
  ========================================================================== */
 
 .uk-transition-slow { transition-duration: $transition-slow-duration; }
 
+/* Disable modifier
+ ========================================================================== */
+
+.uk-transition-disable,
+.uk-transition-disable * { transition: none !important; }
+
 
 // Hooks
 // ========================================================================