uikit 3.18.0 → 3.18.1-dev.7348eb6e3

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.0",
+  "version": "3.18.1-dev.7348eb6e3",
   "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.14.0",
+  "packageManager": "pnpm@8.15.1",
   "devDependencies": {
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-replace": "^5.0.5",

package/src/js/components/countdown.js

@@ -32,9 +32,7 @@ export default {
     events: {
         name: 'visibilitychange',
 
-        el() {
-            return document;
-        },
+        el: () => document,
 
         handler() {
             if (document.hidden) {

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

@@ -130,9 +130,7 @@ export default {
         {
             name: 'keyup',
 
-            el() {
-                return document;
-            },
+            el: () => document,
 
             handler({ keyCode }) {
                 if (!this.isToggled(this.$el) || !this.draggable) {

package/src/js/components/sortable.js

@@ -11,7 +11,6 @@ import {
     dimensions,
     findIndex,
     getEventPos,
-    hasTouch,
     height,
     index,
     isInput,
@@ -105,7 +104,7 @@ export default {
 
         handles(handles, prev) {
             css(prev, { touchAction: '', userSelect: '' });
-            css(handles, { touchAction: hasTouch ? 'none' : '', userSelect: 'none' }); // touchAction set to 'none' causes a performance drop in Chrome 80
+            css(handles, { touchAction: 'none', userSelect: 'none' });
         },
     },
 

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

@@ -66,7 +66,7 @@ function getHeight(element) {
         css(element, 'display', 'block', 'important');
     }
     css(element, 'minHeight', '');
-    const height = element.offsetHeight;
+    const height = element.offsetHeight ?? element.clientHeight;
     css(element, style);
     return height;
 }

package/src/js/core/modal.js

@@ -7,6 +7,7 @@ import {
     height,
     html,
     isString,
+    isTag,
     noop,
     on,
     removeClass,
@@ -26,6 +27,18 @@ export default {
     },
 
     events: [
+        {
+            name: 'fullscreenchange webkitendfullscreen',
+
+            capture: true,
+
+            handler(e) {
+                if (isTag(e.target, 'video') && this.isToggled() && !document.fullscreenElement) {
+                    this.hide();
+                }
+            },
+        },
+
         {
             name: 'show',
 

package/src/js/core/video.js

@@ -32,7 +32,11 @@ export default {
         intersection({
             filter: ({ $el, autoplay }) => autoplay && isVideo($el),
             handler([{ isIntersecting }]) {
-                if (isIntersecting) {
+                if (
+                    isIntersecting ||
+                    this.$el.webkitDisplayingFullscreen ||
+                    document.fullscreenElement === this.$el
+                ) {
                     play(this.$el);
                 } else {
                     pause(this.$el);

package/src/js/mixin/slider-autoplay.js

@@ -30,9 +30,7 @@ export default {
         {
             name: 'visibilitychange',
 
-            el() {
-                return document;
-            },
+            el: () => document,
 
             filter() {
                 return this.autoplay;

package/src/js/util/scroll.js

@@ -1,24 +1,43 @@
-import { css, matches, on, scrollParent, width } from 'uikit-util';
+import { css, getEventPos, matches, on, once, scrollParents, width } from 'uikit-util';
 
 let prevented;
 export function preventBackgroundScroll(el) {
     // 'overscroll-behavior: contain' only works consistently if el overflows (Safari)
-    const off = on(
-        el,
-        'touchmove',
-        (e) => {
-            if (e.targetTouches.length !== 1 || matches(e.target, 'input[type="range"')) {
-                return;
-            }
-
-            let { scrollHeight, clientHeight } = scrollParent(e.target);
-
-            if (clientHeight >= scrollHeight && e.cancelable) {
-                e.preventDefault();
-            }
-        },
-        { passive: false },
-    );
+    const off = on(el, 'touchstart', (e) => {
+        if (e.targetTouches.length !== 1 || matches(e.target, 'input[type="range"')) {
+            return;
+        }
+
+        let prev = getEventPos(e).y;
+
+        const offMove = on(
+            el,
+            'touchmove',
+            (e) => {
+                const pos = getEventPos(e).y;
+                if (pos === prev) {
+                    return;
+                }
+                prev = pos;
+
+                if (
+                    !scrollParents(e.target).some((scrollParent) => {
+                        if (!el.contains(scrollParent)) {
+                            return false;
+                        }
+
+                        let { scrollHeight, clientHeight } = scrollParent;
+                        return clientHeight < scrollHeight;
+                    })
+                ) {
+                    e.preventDefault();
+                }
+            },
+            { passive: false },
+        );
+
+        once(el, 'scroll touchend touchcanel', offMove, { capture: true });
+    });
 
     if (prevented) {
         return off;

package/src/js/util/viewport.js

@@ -187,7 +187,7 @@ export function offsetViewport(scrollElement) {
     ]) {
         if (isWindow(viewportElement)) {
             // iOS 12 returns <body> as scrollingElement
-            viewportElement = window.document.documentElement;
+            viewportElement = scrollElement.ownerDocument;
         } else {
             rect[start] += toFloat(css(viewportElement, `border-${start}-width`));
         }

package/src/less/components/align.less

@@ -25,12 +25,12 @@
  * Default
  */
 
-[class*='uk-align'] {
+[class*="uk-align"] {
     display: block;
     margin-bottom: @align-margin-vertical;
 }
 
-* + [class*='uk-align'] { margin-top: @align-margin-vertical; }
+* + [class*="uk-align"] { margin-top: @align-margin-vertical; }
 
 /*
  * Center

package/src/less/components/animation.less

@@ -40,7 +40,7 @@
    Component: Animation
  ========================================================================== */
 
-[class*='uk-animation-'] { animation: @animation-duration ease-out both; }
+[class*="uk-animation-"] { animation: @animation-duration ease-out both; }
 
 
 /* Animations
@@ -138,7 +138,7 @@
 /* Toggle animation based on the State of the Parent Element
  ========================================================================== */
 
-.uk-animation-toggle:not(:hover):not(:focus) [class*='uk-animation-'] { animation-name: none; }
+.uk-animation-toggle:not(:hover):not(:focus) [class*="uk-animation-"] { animation-name: none; }
 
 
 /* Keyframes used by animation classes

package/src/less/components/article.less

@@ -95,11 +95,11 @@
 
 .hook-inverse() {
 
-    .uk-article-title  {
+    .uk-article-title {
         .hook-inverse-article-title();
     }
 
-    .uk-article-meta  {
+    .uk-article-meta {
         color: @inverse-article-meta-color;
         .hook-inverse-article-meta();
     }

package/src/less/components/base.less

@@ -446,7 +446,7 @@ hr, .uk-hr {
 
 /* Add margin if adjacent element */
 * + hr,
-* + .uk-hr { margin-top: @base-hr-margin-vertical }
+* + .uk-hr { margin-top: @base-hr-margin-vertical; }
 
 
 /* Address
@@ -476,7 +476,7 @@ blockquote {
 blockquote p:last-of-type { margin-bottom: 0; }
 
 blockquote footer {
-    margin-top:  @base-blockquote-footer-margin-top;
+    margin-top: @base-blockquote-footer-margin-top;
     font-size: @base-blockquote-footer-font-size;
     line-height: @base-blockquote-footer-line-height;
     .hook-base-blockquote-footer();
@@ -608,7 +608,7 @@ template { display: none; }
     //
 
     a,
-    .uk-link  {
+    .uk-link {
         color: @inverse-base-link-color;
         .hook-inverse-base-link();
     }

package/src/less/components/card.less

@@ -149,13 +149,13 @@
  * Implemented by the theme
  */
 
-[class*='uk-card-media'] {
+[class*="uk-card-media"] {
     .hook-card-media();
 }
 
 .uk-card-media-top,
 .uk-grid-stack > .uk-card-media-left,
-.uk-grid-stack > .uk-card-media-right  {
+.uk-grid-stack > .uk-card-media-right {
     .hook-card-media-top();
 }
 
@@ -263,9 +263,9 @@
 
 // Color Mode
 .uk-card-default.uk-card-body:extend(.uk-light all) when (@card-default-color-mode = light) {}
-.uk-card-default > :not([class*='uk-card-media']):extend(.uk-light all) when (@card-default-color-mode = light) {}
+.uk-card-default > :not([class*="uk-card-media"]):extend(.uk-light all) when (@card-default-color-mode = light) {}
 .uk-card-default.uk-card-body:extend(.uk-dark all) when (@card-default-color-mode = dark) {}
-.uk-card-default > :not([class*='uk-card-media']):extend(.uk-dark all) when (@card-default-color-mode = dark) {}
+.uk-card-default > :not([class*="uk-card-media"]):extend(.uk-dark all) when (@card-default-color-mode = dark) {}
 
 /*
  * Primary
@@ -289,9 +289,9 @@
 
 // Color Mode
 .uk-card-primary.uk-card-body:extend(.uk-light all) when (@card-primary-color-mode = light) {}
-.uk-card-primary > :not([class*='uk-card-media']):extend(.uk-light all) when (@card-primary-color-mode = light) {}
+.uk-card-primary > :not([class*="uk-card-media"]):extend(.uk-light all) when (@card-primary-color-mode = light) {}
 .uk-card-primary.uk-card-body:extend(.uk-dark all) when (@card-primary-color-mode = dark) {}
-.uk-card-primary > :not([class*='uk-card-media']):extend(.uk-dark all) when (@card-primary-color-mode = dark) {}
+.uk-card-primary > :not([class*="uk-card-media"]):extend(.uk-dark all) when (@card-primary-color-mode = dark) {}
 
 /*
  * Secondary
@@ -315,9 +315,9 @@
 
 // Color Mode
 .uk-card-secondary.uk-card-body:extend(.uk-light all) when (@card-secondary-color-mode = light) {}
-.uk-card-secondary > :not([class*='uk-card-media']):extend(.uk-light all) when (@card-secondary-color-mode = light) {}
+.uk-card-secondary > :not([class*="uk-card-media"]):extend(.uk-light all) when (@card-secondary-color-mode = light) {}
 .uk-card-secondary.uk-card-body:extend(.uk-dark all) when (@card-secondary-color-mode = dark) {}
-.uk-card-secondary > :not([class*='uk-card-media']):extend(.uk-dark all) when (@card-secondary-color-mode = dark) {}
+.uk-card-secondary > :not([class*="uk-card-media"]):extend(.uk-dark all) when (@card-secondary-color-mode = dark) {}
 
 
 /* Size modifier

package/src/less/components/column.less

@@ -24,12 +24,12 @@
    Component: Column
  ========================================================================== */
 
-[class*='uk-column-'] { column-gap: @column-gutter; }
+[class*="uk-column-"] { column-gap: @column-gutter; }
 
 /* Desktop and bigger */
 @media (min-width: @breakpoint-large) {
 
-    [class*='uk-column-'] { column-gap: @column-gutter-l; }
+    [class*="uk-column-"] { column-gap: @column-gutter-l; }
 
 }
 
@@ -37,7 +37,7 @@
  * Fix image 1px line wrapping into the next column in Chrome
  */
 
-[class*='uk-column-'] img { transform: translate3d(0,0,0); }
+[class*="uk-column-"] img { transform: translate3d(0, 0, 0); }
 
 
 /* Divider

package/src/less/components/container.less

@@ -149,7 +149,7 @@
  */
 
 .uk-container-item-padding-remove-left,
-.uk-container-item-padding-remove-right { width: ~'calc(100% + @{container-padding-horizontal})' }
+.uk-container-item-padding-remove-right { width: ~'calc(100% + @{container-padding-horizontal})'; }
 
 .uk-container-item-padding-remove-left { margin-left: -@container-padding-horizontal; }
 .uk-container-item-padding-remove-right { margin-right: -@container-padding-horizontal; }
@@ -158,7 +158,7 @@
 @media (min-width: @breakpoint-small) {
 
     .uk-container-item-padding-remove-left,
-    .uk-container-item-padding-remove-right { width: ~'calc(100% + @{container-padding-horizontal-s})' }
+    .uk-container-item-padding-remove-right { width: ~'calc(100% + @{container-padding-horizontal-s})'; }
 
     .uk-container-item-padding-remove-left { margin-left: -@container-padding-horizontal-s; }
     .uk-container-item-padding-remove-right { margin-right: -@container-padding-horizontal-s; }
@@ -169,7 +169,7 @@
 @media (min-width: @breakpoint-medium) {
 
     .uk-container-item-padding-remove-left,
-    .uk-container-item-padding-remove-right { width: ~'calc(100% + @{container-padding-horizontal-m})' }
+    .uk-container-item-padding-remove-right { width: ~'calc(100% + @{container-padding-horizontal-m})'; }
 
     .uk-container-item-padding-remove-left { margin-left: -@container-padding-horizontal-m; }
     .uk-container-item-padding-remove-right { margin-right: -@container-padding-horizontal-m; }

package/src/less/components/divider.less

@@ -41,7 +41,7 @@
  * 2. Set margin if a `div` is used for semantical reason
  */
 
-[class*='uk-divider'] {
+[class*="uk-divider"] {
     /* 1 */
     border: none;
     /* 2 */
@@ -49,7 +49,7 @@
 }
 
 /* Add margin if adjacent element */
-* + [class*='uk-divider'] { margin-top: @divider-margin-vertical; }
+* + [class*="uk-divider"] { margin-top: @divider-margin-vertical; }
 
 
 /* Icon

package/src/less/components/dropnav.less

@@ -40,4 +40,4 @@
 
 .hook-dropnav-misc();
 
-.hook-dropnav-misc() {}
+.hook-dropnav-misc() {}

package/src/less/components/form.less

@@ -380,7 +380,7 @@ textarea.uk-form-large,
  */
 
 .uk-form-success,
-.uk-form-success:focus  {
+.uk-form-success:focus {
     color: @form-success-color;
     .hook-form-success();
 }

package/src/less/components/grid.less

@@ -118,7 +118,7 @@
 .uk-grid-small,
 .uk-grid-column-small { margin-left: -@grid-small-gutter-horizontal; }
 .uk-grid-small > *,
-.uk-grid-column-small > *  { padding-left: @grid-small-gutter-horizontal; }
+.uk-grid-column-small > * { padding-left: @grid-small-gutter-horizontal; }
 
 /* Vertical */
 .uk-grid + .uk-grid-small,
@@ -376,8 +376,8 @@
     flex-wrap: wrap;
 }
 
-.uk-grid-match > * > :not([class*='uk-width']),
-.uk-grid-item-match > :not([class*='uk-width']) {
+.uk-grid-match > * > :not([class*="uk-width"]),
+.uk-grid-item-match > :not([class*="uk-width"]) {
     /* 2 */
     box-sizing: border-box;
     width: 100%;

package/src/less/components/height.less

@@ -18,7 +18,7 @@
    Component: Height
  ========================================================================== */
 
-[class*='uk-height'] { box-sizing: border-box; }
+[class*="uk-height"] { box-sizing: border-box; }
 
 /*
  * Only works if parent element has a height set

package/src/less/components/icon.less

@@ -92,14 +92,14 @@ button.uk-icon:not(:disabled) { cursor: pointer; }
  * Set the fill and stroke color of all SVG elements to the current text color
  */
 
-.uk-icon:not(.uk-preserve) [fill*='#']:not(.uk-preserve) { fill: currentcolor; }
-.uk-icon:not(.uk-preserve) [stroke*='#']:not(.uk-preserve) { stroke: currentcolor; }
+.uk-icon:not(.uk-preserve) [fill*="#"]:not(.uk-preserve) { fill: currentcolor; }
+.uk-icon:not(.uk-preserve) [stroke*="#"]:not(.uk-preserve) { stroke: currentcolor; }
 
 /*
  * Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835
  */
 
-.uk-icon > * { transform: translate(0,0); }
+.uk-icon > * { transform: translate(0, 0); }
 
 
 /* Image modifier

package/src/less/components/link.less

@@ -140,7 +140,7 @@ a.uk-link-reset,
 
     a.uk-link-muted:hover,
     .uk-link-muted a:hover,
-    .uk-link-toggle:hover .uk-link-muted  {
+    .uk-link-toggle:hover .uk-link-muted {
         color: @inverse-link-muted-hover-color;
         .hook-inverse-link-muted-hover();
     }

package/src/less/components/modal.less

@@ -265,7 +265,7 @@
  * Adopts `uk-close`
  ========================================================================== */
 
-[class*='uk-modal-close-'] {
+[class*="uk-modal-close-"] {
     position: absolute;
     z-index: @modal-z-index;
     top: @modal-close-position;
@@ -278,13 +278,13 @@
  * Remove margin from adjacent element
  */
 
-[class*='uk-modal-close-']:first-child + * { margin-top: 0; }
+[class*="uk-modal-close-"]:first-child + * { margin-top: 0; }
 
 /*
  * Hover
  */
 
-[class*='uk-modal-close-']:hover {
+[class*="uk-modal-close-"]:hover {
     .hook-modal-close-hover();
 }
 

package/src/less/components/navbar.less

@@ -136,7 +136,7 @@
 
 .uk-navbar-left,
 .uk-navbar-right,
-[class*='uk-navbar-center'] {
+[class*="uk-navbar-center"] {
     display: flex;
     gap: @navbar-gap;
     /* 1 */
@@ -165,7 +165,7 @@
     position: absolute;
     top: 50%;
     left: 50%;
-    transform: translate(-50%,-50%);
+    transform: translate(-50%, -50%);
     /* 2 */
     width: max-content;
     box-sizing: border-box;
@@ -180,10 +180,10 @@
    top: 0;
 }
 
-.uk-navbar-center-left { right:  ~'calc(100% + @{navbar-gap})'; }
+.uk-navbar-center-left { right: ~'calc(100% + @{navbar-gap})'; }
 .uk-navbar-center-right { left: ~'calc(100% + @{navbar-gap})'; }
 
-[class*='uk-navbar-center-'] {
+[class*="uk-navbar-center-"] {
     width: max-content;
     box-sizing: border-box;
 }

package/src/less/components/position.less

@@ -49,11 +49,11 @@
  * 1. Prevent content overflow.
  */
 
-[class*='uk-position-top'],
-[class*='uk-position-bottom'],
-[class*='uk-position-left'],
-[class*='uk-position-right'],
-[class*='uk-position-center'] {
+[class*="uk-position-top"],
+[class*="uk-position-bottom"],
+[class*="uk-position-left"],
+[class*="uk-position-right"],
+[class*="uk-position-center"] {
     position: absolute !important;
     /* 1 */
     max-width: ~'calc(100% - (var(--uk-position-margin-offset) * 2))';
@@ -130,8 +130,8 @@
 }
 
 /* Vertical */
-[class*='uk-position-center-left'],
-[class*='uk-position-center-right'] {
+[class*="uk-position-center-left"],
+[class*="uk-position-center-right"] {
     top: ~'calc(50% - var(--uk-position-margin-offset))';
     --uk-position-translate-y: -50%;
     transform: translate(0, var(--uk-position-translate-y));

package/src/less/components/sticky.less

@@ -54,7 +54,7 @@
  * Faster animations
  */
 
-.uk-sticky[class*='uk-animation-'] { animation-duration: @sticky-animation-duration; }
+.uk-sticky[class*="uk-animation-"] { animation-duration: @sticky-animation-duration; }
 
 .uk-sticky.uk-animation-reverse { animation-duration: @sticky-reverse-animation-duration; }
 

package/src/less/components/svg.less

@@ -18,14 +18,14 @@
 /* 1 */
 .uk-svg,
 /* 2 */
-.uk-svg:not(.uk-preserve) [fill*='#']:not(.uk-preserve) { fill: currentcolor; }
-.uk-svg:not(.uk-preserve) [stroke*='#']:not(.uk-preserve) { stroke: currentcolor; }
+.uk-svg:not(.uk-preserve) [fill*="#"]:not(.uk-preserve) { fill: currentcolor; }
+.uk-svg:not(.uk-preserve) [stroke*="#"]:not(.uk-preserve) { stroke: currentcolor; }
 
 /*
  * Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835
  */
 
-.uk-svg { transform: translate(0,0); }
+.uk-svg { transform: translate(0, 0); }
 
 
 // Hooks

package/src/less/components/transition.less

@@ -50,15 +50,15 @@
  */
 
 :where(.uk-transition-fade),
-:where([class*='uk-transition-scale']),
-:where([class*='uk-transition-slide']) {
+:where([class*="uk-transition-scale"]),
+:where([class*="uk-transition-slide"]) {
     --uk-position-translate-x: 0;
     --uk-position-translate-y: 0;
 }
 
 .uk-transition-fade,
-[class*='uk-transition-scale'],
-[class*='uk-transition-slide'] {
+[class*="uk-transition-scale"],
+[class*="uk-transition-slide"] {
     --uk-translate-x: 0;
     --uk-translate-y: 0;
     --uk-scale-x: 1;
@@ -86,7 +86,7 @@
  */
 
 /* 1 */
-[class*='uk-transition-scale'] { -webkit-backface-visibility: hidden; }
+[class*="uk-transition-scale"] { -webkit-backface-visibility: hidden; }
 
 .uk-transition-scale-up {
     --uk-scale-x: 1;
@@ -136,10 +136,10 @@
 .uk-transition-slide-right-medium { --uk-translate-x: @transition-slide-medium-translate; }
 
 /* Show */
-.uk-transition-toggle:hover [class*='uk-transition-slide'],
-.uk-transition-toggle:focus [class*='uk-transition-slide'],
-.uk-transition-toggle [class*='uk-transition-slide']:focus-within,
-.uk-transition-active.uk-active [class*='uk-transition-slide'] {
+.uk-transition-toggle:hover [class*="uk-transition-slide"],
+.uk-transition-toggle:focus [class*="uk-transition-slide"],
+.uk-transition-toggle [class*="uk-transition-slide"]:focus-within,
+.uk-transition-active.uk-active [class*="uk-transition-slide"] {
     --uk-translate-x: 0;
     --uk-translate-y: 0;
     opacity: 1;