uikit 3.25.26 → 3.25.27-dev.9e97c1f

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

@@ -15,7 +15,7 @@ import {
     toggleClass,
 } from 'uikit-util';
 import { generateId } from '../api/instance';
-import { keyMap } from '../util/keys';
+import { getNavigationIndex, keyMap } from '../util/keys';
 import { maybeDefaultPreventClick } from './event';
 
 export default {
@@ -175,17 +175,7 @@ export default {
                     return;
                 }
 
-                let i =
-                    keyCode === keyMap.HOME
-                        ? 0
-                        : keyCode === keyMap.END
-                          ? 'last'
-                          : keyCode === keyMap.LEFT
-                            ? 'previous'
-                            : keyCode === keyMap.RIGHT
-                              ? 'next'
-                              : -1;
-
+                const i = getNavigationIndex(keyCode);
                 if (~i) {
                     e.preventDefault();
                     this.show(i);

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

@@ -1,59 +1,30 @@
-import { hasClass, includes, query, scrolledOver, toPx, trigger } from 'uikit-util';
-import { resize, scroll } from '../api/observables';
-import { ease } from './parallax';
+import { hasClass, includes, trigger } from 'uikit-util';
+import ScrollDriven from './scroll-driven';
 
 export default {
+    mixins: [ScrollDriven],
+
     props: {
         parallax: Boolean,
-        parallaxTarget: Boolean,
-        parallaxStart: String,
-        parallaxEnd: String,
-        parallaxEasing: Number,
     },
 
     data: {
         parallax: false,
-        parallaxTarget: false,
-        parallaxStart: 0,
-        parallaxEnd: 0,
-        parallaxEasing: 0,
     },
 
-    observe: [
-        resize({
-            target: ({ $el, parallaxTarget }) => [$el, parallaxTarget],
-            filter: ({ parallax }) => parallax,
-        }),
-        scroll({ filter: ({ parallax }) => parallax }),
-    ],
-
     computed: {
-        parallaxTarget({ parallaxTarget }, $el) {
-            return (parallaxTarget && query(parallaxTarget, $el)) || this.list;
+        parallaxTargetFallback() {
+            return this.list;
         },
     },
 
     update: {
-        read() {
+        write({ percent }) {
             if (!this.parallax) {
-                return false;
-            }
-
-            const target = this.parallaxTarget;
-
-            if (!target) {
-                return false;
+                return;
             }
 
-            const start = toPx(this.parallaxStart, 'height', target, true);
-            const end = toPx(this.parallaxEnd, 'height', target, true);
-            const percent = ease(scrolledOver(target, start, end), this.parallaxEasing);
-
-            return { parallax: this.getIndexAt(percent) };
-        },
-
-        write({ parallax }) {
-            const [prevIndex, slidePercent] = parallax;
+            const [prevIndex, slidePercent] = this.getIndexAt(percent);
 
             const nextIndex = this.getValidIndex(prevIndex + Math.ceil(slidePercent));
 

package/src/js/mixin/togglable.js

@@ -9,6 +9,7 @@ import {
     isBoolean,
     isFunction,
     isVisible,
+    pick,
     removeClass,
     startsWith,
     toFloat,
@@ -163,20 +164,18 @@ async function toggleTransition(el, show, { animation, duration, velocity, trans
         _toggle(el, true);
     }
 
-    const prevProps = Object.fromEntries(
-        [
-            'padding',
-            'border',
-            'width',
-            'height',
-            'minWidth',
-            'minHeight',
-            'overflowY',
-            'overflowX',
-            marginProp,
-            marginStartProp,
-        ].map((key) => [key, el.style[key]]),
-    );
+    const prevProps = pick(el.style, [
+        'padding',
+        'border',
+        'width',
+        'height',
+        'minWidth',
+        'minHeight',
+        'overflowY',
+        'overflowX',
+        marginProp,
+        marginStartProp,
+    ]);
 
     const dim = dimensions(el);
     const currentMargin = toFloat(css(el, marginProp));

package/src/js/util/attr.js

@@ -10,13 +10,13 @@ export function attr(element, name, value) {
 
     if (isUndefined(value)) {
         return toNode(element)?.getAttribute(name);
-    } else {
-        for (const el of toNodes(element)) {
-            if (value === null) {
-                removeAttr(el, name);
-            } else {
-                el.setAttribute(name, value);
-            }
+    }
+
+    for (const el of toNodes(element)) {
+        if (value === null) {
+            removeAttr(el, name);
+        } else {
+            el.setAttribute(name, value);
         }
     }
 }

package/src/js/util/dom.js

@@ -68,10 +68,9 @@ export function wrapInner(element, structure) {
 }
 
 export function unwrap(element) {
-    toNodes(element)
-        .map(parent)
-        .filter((value, index, self) => self.indexOf(value) === index)
-        .forEach((parent) => parent.replaceWith(...parent.childNodes));
+    for (const elementParent of new Set(toNodes(element).map(parent))) {
+        elementParent.replaceWith(...elementParent.childNodes);
+    }
 }
 
 const singleTagRe = /^<(\w+)\s*\/?>(?:<\/\1>)?$/;

package/src/js/util/keys.js

@@ -10,3 +10,17 @@ export const keyMap = {
     RIGHT: 39,
     DOWN: 40,
 };
+
+export function getNavigationIndex(keyCode, previousKey = keyMap.LEFT, nextKey = keyMap.RIGHT) {
+    switch (keyCode) {
+        case keyMap.HOME:
+            return 0;
+        case keyMap.END:
+            return 'last';
+        case previousKey:
+            return 'previous';
+        case nextKey:
+            return 'next';
+    }
+    return -1;
+}

package/src/js/util/lang.js

@@ -178,8 +178,8 @@ export function uniqueBy(array, prop) {
 
 export function pick(obj, props) {
     const result = {};
-    for (const prop of props) {
-        result[prop] = obj[prop];
+    for (const key of props) {
+        result[key] = obj[key];
     }
     return result;
 }

package/src/js/util/player.js

@@ -42,7 +42,9 @@ function isIFrame(el) {
 }
 
 function isYoutube(el) {
-    return /\/\/.*?youtube(-nocookie)?\.[a-z]+\/(watch\?v=[^&\s]+|embed)|youtu\.be\//.test(el.src);
+    return /\/\/.*?youtube(-nocookie)?\.[a-z]+\/(watch\?v=[^&\s]+|embed)|youtu\.be\/.*/.test(
+        el.src,
+    );
 }
 
 function isVimeo(el) {
@@ -58,7 +60,7 @@ function post(el, cmd) {
     el.contentWindow.postMessage(JSON.stringify({ event: 'command', ...cmd }), '*');
 }
 
-const stateKey = '_ukPlayer';
+const stateKey = Symbol();
 let counter = 0;
 function enableApi(el) {
     if (el[stateKey]) {

package/src/js/util/style.js

@@ -37,23 +37,22 @@ export function css(element, property, value, priority) {
 
             if (isUndefined(value)) {
                 return getComputedStyle(element).getPropertyValue(property);
-            } else {
-                element.style.setProperty(
-                    property,
-                    isNumeric(value) && !cssNumber[property] && !isCustomProperty(property)
-                        ? `${value}px`
-                        : value || isNumber(value)
-                          ? value
-                          : '',
-                    priority,
-                );
             }
+            element.style.setProperty(
+                property,
+                isNumeric(value) && !cssNumber[property] && !isCustomProperty(property)
+                    ? `${value}px`
+                    : value || isNumber(value)
+                      ? value
+                      : '',
+                priority,
+            );
         } else if (isArray(property)) {
-            const props = {};
+            const values = {};
             for (const prop of property) {
-                props[prop] = css(element, prop);
+                values[prop] = css(element, prop);
             }
-            return props;
+            return values;
         } else if (isObject(property)) {
             for (const prop in property) {
                 css(element, prop, property[prop], value);

package/src/js/util/viewport.js

@@ -18,20 +18,18 @@ export function isInView(element, offsetTop = 0, offsetLeft = 0) {
         return false;
     }
 
-    return intersectRect(
-        ...overflowParents(element)
-            .map((parent) => {
-                const { top, left, bottom, right } = offsetViewport(parent);
-
-                return {
-                    top: top - offsetTop,
-                    left: left - offsetLeft,
-                    bottom: bottom + offsetTop,
-                    right: right + offsetLeft,
-                };
-            })
-            .concat(offset(element)),
-    );
+    const rects = overflowParents(element).map((parent) => {
+        const { top, left, bottom, right } = offsetViewport(parent);
+
+        return {
+            top: top - offsetTop,
+            left: left - offsetLeft,
+            bottom: bottom + offsetTop,
+            right: right + offsetLeft,
+        };
+    });
+
+    return intersectRect(...rects, offset(element));
 }
 
 export function scrollIntoView(element, { offset: offsetBy = 0 } = {}) {
@@ -145,17 +143,16 @@ export function scrollParents(element, scrollable = false, props = []) {
         ancestors = ancestors.slice(fixedIndex);
     }
 
-    return [scrollEl]
-        .concat(
-            ancestors.filter(
-                (parent) =>
-                    css(parent, 'overflow')
-                        .split(' ')
-                        .some((prop) => includes(['auto', 'scroll', ...props], prop)) &&
-                    (!scrollable || parent.scrollHeight > offsetViewport(parent).height),
-            ),
-        )
-        .reverse();
+    return [
+        scrollEl,
+        ...ancestors.filter(
+            (parent) =>
+                css(parent, 'overflow')
+                    .split(' ')
+                    .some((prop) => includes(['auto', 'scroll', ...props], prop)) &&
+                (!scrollable || parent.scrollHeight > offsetViewport(parent).height),
+        ),
+    ].reverse();
 }
 
 export function scrollParent(...args) {

package/src/less/components/_import.less

@@ -13,6 +13,7 @@
 @import "icon.less";
 @import "form-range.less";
 @import "form.less"; // After: Icon, Form Range
+@import "search.less"; // After: Icon
 @import "button.less";
 @import "progress.less";
 
@@ -31,10 +32,11 @@
 @import "placeholder.less";
 @import "badge.less";
 @import "label.less";
+@import "dropcap.less";
+@import "floating-shadow.less";
 @import "overlay.less"; // After: Icon
 @import "article.less";
 @import "comment.less";
-@import "search.less"; // After: Icon
 
 // JavaScript
 @import "accordion.less";
@@ -44,6 +46,7 @@
 @import "modal.less"; // After: Close
 @import "slideshow.less";
 @import "slider.less";
+@import "marquee.less";
 @import "sticky.less";
 @import "offcanvas.less";
 @import "switcher.less";
@@ -70,8 +73,10 @@
 @import "tab.less";
 @import "slidenav.less"; // After: Icon
 @import "dotnav.less";
+
 @import "dropdown.less"; // After: Card, Nav
 @import "lightbox.less"; // After: Close, Slidenav
+@import "logo.less"; // After: Navbar
 
 // Utilities
 @import "animation.less";
@@ -85,9 +90,9 @@
 @import "svg.less";
 @import "utility.less";
 @import "flex.less"; // After: Utility
-@import "margin.less";
-@import "padding.less";
 @import "position.less";
+@import "margin.less"; // After: Position
+@import "padding.less";
 @import "transition.less";
 @import "visibility.less";
 @import "inverse.less";

package/src/less/components/animation.less

@@ -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, :focus) [class*="uk-animation-"] { animation-name: none; }
 
 
 /* Keyframes used by animation classes

package/src/less/components/base.less

@@ -482,7 +482,7 @@ blockquote {
  * Content
  */
 
-blockquote p:last-of-type { margin-bottom: 0; }
+blockquote :where(p:last-of-type) { margin-bottom: 0; }
 
 blockquote footer {
     margin-top: @base-blockquote-footer-margin-top;

package/src/less/components/button.less

@@ -130,7 +130,7 @@
 
 /* Hover */
 .uk-button:hover {
-    /* 9 */
+    /* 10 */
     text-decoration: none;
     .hook-button-hover();
 }

package/src/less/components/card.less

@@ -366,11 +366,11 @@
  * Small
  */
 
-.uk-card-small.uk-card-body,
-.uk-card-small .uk-card-body { padding: @card-small-body-padding-vertical @card-small-body-padding-horizontal; }
+.uk-card-small:where(.uk-card-body),
+.uk-card-small :where(.uk-card-body) { padding: @card-small-body-padding-vertical @card-small-body-padding-horizontal; }
 
-.uk-card-small .uk-card-header { padding: @card-small-header-padding-vertical @card-small-header-padding-horizontal; }
-.uk-card-small .uk-card-footer { padding: @card-small-footer-padding-vertical @card-small-footer-padding-horizontal; }
+.uk-card-small :where(.uk-card-header) { padding: @card-small-header-padding-vertical @card-small-header-padding-horizontal; }
+.uk-card-small :where(.uk-card-footer) { padding: @card-small-footer-padding-vertical @card-small-footer-padding-horizontal; }
 
 /*
  * Large
@@ -379,11 +379,11 @@
 /* Desktop and bigger */
 @media (min-width: @breakpoint-large) {
 
-    .uk-card-large.uk-card-body,
-    .uk-card-large .uk-card-body { padding: @card-large-body-padding-vertical-l @card-large-body-padding-horizontal-l; }
+    .uk-card-large:where(.uk-card-body),
+    .uk-card-large :where(.uk-card-body) { padding: @card-large-body-padding-vertical-l @card-large-body-padding-horizontal-l; }
 
-    .uk-card-large .uk-card-header { padding: @card-large-header-padding-vertical-l @card-large-header-padding-horizontal-l; }
-    .uk-card-large .uk-card-footer { padding: @card-large-footer-padding-vertical-l @card-large-footer-padding-horizontal-l; }
+    .uk-card-large :where(.uk-card-header) { padding: @card-large-header-padding-vertical-l @card-large-header-padding-horizontal-l; }
+    .uk-card-large :where(.uk-card-footer) { padding: @card-large-footer-padding-vertical-l @card-large-footer-padding-horizontal-l; }
 
 }
 

package/src/less/components/dropcap.less

@@ -0,0 +1,71 @@
+// Name:            Dropcap
+// Description:     Style for the drop cap
+//
+// Component:       `uk-dropcap`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+@dropcap-margin-right:                          10px;
+@dropcap-font-size:                             ((@global-line-height * 3) * 1em);
+@dropcap-line-height:                           1;
+
+/* ========================================================================
+   Component: Dropcap
+ ========================================================================== */
+
+/*
+ * 1. Firefox doesn't apply `::first-letter` if the first letter is inside child elements
+ *    https://bugzilla.mozilla.org/show_bug.cgi?id=214004
+ * 2. In Firefox, a floating `::first-letter` doesn't have a line box and there for no `line-height`
+ *    https://bugzilla.mozilla.org/show_bug.cgi?id=317933
+ */
+
+.uk-dropcap::first-letter,
+/* 1 */
+.uk-dropcap > p:first-of-type::first-letter {
+    display: block;
+    margin-right: @dropcap-margin-right;
+    float: left;
+    font-size: @dropcap-font-size;
+    line-height: @dropcap-line-height;
+    .hook-dropcap();
+}
+
+/* 2 */
+@-moz-document url-prefix() {
+
+  .uk-dropcap::first-letter,
+  .uk-dropcap > p:first-of-type::first-letter { margin-top: 1.1%; }
+
+}
+
+
+// Misc
+// ========================================================================
+
+.hook-dropcap-misc();
+
+
+// Hooks
+// ========================================================================
+
+.hook-dropcap() {}
+.hook-dropcap-misc() {}
+
+
+// Inverse
+// ========================================================================
+
+.hook-inverse () {
+
+    .uk-dropcap::first-letter,
+    .uk-dropcap p:first-of-type::first-letter {
+        .hook-inverse-dropcap();
+    }
+
+}
+
+.hook-inverse-dropcap() {}

package/src/less/components/floating-shadow.less

@@ -0,0 +1,66 @@
+// Name:            Floating Shadow
+// Description:     Component to create floating shadows
+//
+// Component:       `uk-floating-shadow`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@floating-shadow-height:                       30px;
+@floating-shadow-bottom:                       -@floating-shadow-height;
+@floating-shadow-border-radius:                100%;
+@floating-shadow-background:                   #444;
+@floating-shadow-blur:                         20px;
+
+
+/* ========================================================================
+   Component: Floating Shadow
+ ========================================================================== */
+
+/*
+ * 1. Set position.
+ * 2. Set style
+ * 3. Fix shadow being clipped in Safari if container is animated
+ */
+
+.uk-floating-shadow {
+    display: inline-block;
+    position: relative;
+    z-index: 0;
+    max-width: 100%;
+    vertical-align: middle;
+}
+
+.uk-floating-shadow::after {
+    content: "";
+    /* 1 */
+    position: absolute;
+    bottom: @floating-shadow-bottom;
+    left: 0;
+    right: 0;
+    z-index: -1;
+    /* 2 */
+    height: @floating-shadow-height;
+    border-radius: @floating-shadow-border-radius;
+    background: @floating-shadow-background;
+    filter: blur(@floating-shadow-blur);
+    /* 3 */
+    will-change: filter;
+    .hook-floating-shadow();
+}
+
+
+// Misc
+// ========================================================================
+
+.hook-floating-shadow-misc();
+
+
+// Hooks
+// ========================================================================
+
+.hook-floating-shadow() {}
+.hook-floating-shadow-misc() {}