uikit 3.21.8 → 3.21.9-dev.03f75cd57

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.21.8",
+  "version": "3.21.9-dev.03f75cd57",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/components/slider.js

@@ -64,7 +64,8 @@ export default {
             let lft = 0;
             const max = getMax(this.list);
             const index = findIndex(this.slides, (el) => {
-                if (lft >= max) {
+                // 0.005: FF reports different widths for (calc(100% / 3))
+                if (lft >= max - 0.005) {
                     return true;
                 }
 

package/src/js/core/offcanvas.js

@@ -102,7 +102,7 @@ export default {
                 const { body, scrollingElement } = document;
 
                 addClass(body, this.clsContainer, this.clsFlip);
-                css(body, 'touch-action', 'pan-y pinch-zoom');
+                css(body, 'touchAction', 'pan-y pinch-zoom');
                 css(this.$el, 'display', 'block');
                 css(this.panel, 'maxWidth', scrollingElement.clientWidth);
                 addClass(this.$el, this.clsOverlay);
@@ -126,7 +126,7 @@ export default {
 
             handler() {
                 removeClass(document.body, this.clsContainerAnimation);
-                css(document.body, 'touch-action', '');
+                css(document.body, 'touchAction', '');
             },
         },
 

package/src/js/core/sticky.js

@@ -188,7 +188,10 @@ export default {
                 }
 
                 const overflow = this.overflowFlip ? 0 : Math.max(0, height + offset - viewport);
-                const topOffset = getOffset(referenceElement).top;
+                const topOffset =
+                    getOffset(referenceElement).top -
+                    // offset possible `transform: translateY` animation 'uk-animation-slide-top' while hiding
+                    new DOMMatrix(css(referenceElement, 'transform')).m42;
                 const elHeight = dimensions(this.$el).height;
 
                 const start =
@@ -460,7 +463,10 @@ function parseProp(value, el, propOffset, padding) {
         const refElement = value === true ? getVisibleParent(el) : query(value, el);
         return (
             getOffset(refElement).bottom -
-            (padding && refElement?.contains(el) ? toFloat(css(refElement, 'paddingBottom')) : 0)
+            (padding && refElement?.contains(el)
+                ? toFloat(css(refElement, 'paddingBottom')) +
+                  toFloat(css(refElement, 'borderBottomWidth'))
+                : 0)
         );
     }
 }

package/src/js/util/dimensions.js

@@ -146,10 +146,10 @@ function dimension(prop) {
 export function boxModelAdjust(element, prop, sizing = 'border-box') {
     return css(element, 'boxSizing') === sizing
         ? sumBy(
-              dirs[prop].map(ucfirst),
+              dirs[prop],
               (prop) =>
-                  toFloat(css(element, `padding${prop}`)) +
-                  toFloat(css(element, `border${prop}Width`)),
+                  toFloat(css(element, `padding-${prop}`)) +
+                  toFloat(css(element, `border-${prop}-width`)),
           )
         : 0;
 }

package/src/js/util/selector.js

@@ -19,7 +19,7 @@ export function findAll(selector, context) {
 }
 
 function getContext(selector, context = document) {
-    return (isString(selector) && parseSelector(selector).isContextSelector) || isDocument(context)
+    return isDocument(context) || parseSelector(selector).isContextSelector
         ? context
         : context.ownerDocument;
 }
@@ -29,12 +29,16 @@ const addStarRe = /([!>+~-])(?=\s+[!>+~-]|\s*$)/g;
 const splitSelectorRe = /(\([^)]*\)|[^,])+/g;
 
 const parseSelector = memoize((selector) => {
-    selector = selector.replace(addStarRe, '$1 *');
     let isContextSelector = false;
 
+    if (!selector || !isString(selector)) {
+        return {};
+    }
+
     const selectors = [];
+
     for (let sel of selector.match(splitSelectorRe)) {
-        sel = sel.trim();
+        sel = sel.trim().replace(addStarRe, '$1 *');
         isContextSelector ||= ['!', '+', '~', '-', '>'].includes(sel[0]);
         selectors.push(sel);
     }
@@ -53,14 +57,10 @@ const parsePositionSelector = memoize((selector) => {
 });
 
 function _query(selector, context = document, queryFn) {
-    if (!selector || !isString(selector)) {
-        return selector;
-    }
-
     const parsed = parseSelector(selector);
 
     if (!parsed.isContextSelector) {
-        return _doQuery(context, queryFn, parsed.selector);
+        return parsed.selector && _doQuery(context, queryFn, parsed.selector);
     }
 
     selector = '';