uikit 3.23.13 → 3.23.14-dev.be820cd99

package/src/js/mixin/internal/animate-slide.js

@@ -1,17 +1,21 @@
 import {
     attr,
     children,
+    clamp,
     css,
     dimensions,
     includes,
     index,
+    isInView,
     isVisible,
+    offsetViewport,
     parent,
     position,
     resetProps,
     Transition,
     trigger,
 } from 'uikit-util';
+import { awaitFrame } from '../../util/await';
 
 export default async function (action, target, duration) {
     await awaitFrame();
@@ -22,6 +26,7 @@ export default async function (action, target, duration) {
     const currentProps = nodes.map((el) => getProps(el, true));
     const targetProps = { ...css(target, ['height', 'padding']), display: 'block' };
 
+    const transitionNodes = nodes.filter((node) => isInView(node));
     const targets = nodes.concat(target);
 
     // Cancel previous animations
@@ -34,7 +39,10 @@ export default async function (action, target, duration) {
     await action();
 
     // Find new nodes
-    nodes = nodes.concat(children(target).filter((el) => !includes(nodes, el)));
+
+    const newNodes = children(target).filter((el) => !includes(nodes, el));
+
+    nodes = nodes.concat(newNodes);
 
     // Wait for update to propagate
     await Promise.resolve();
@@ -48,6 +56,8 @@ export default async function (action, target, duration) {
     const [propsTo, propsFrom] = getTransitionProps(target, nodes, currentProps);
     const attrsTo = nodes.map((el) => ({ style: attr(el, 'style') }));
 
+    transitionNodes.push(...nodes.filter((node) => isInView(node)));
+
     // Reset to previous state
     nodes.forEach((el, i) => propsFrom[i] && css(el, propsFrom[i]));
     css(target, targetProps);
@@ -59,8 +69,12 @@ export default async function (action, target, duration) {
     await awaitFrame();
 
     const transitions = nodes
-        .map((el, i) => parent(el) === target && Transition.start(el, propsTo[i], duration, 'ease'))
-        .concat(Transition.start(target, targetPropsTo, duration, 'ease'));
+        .map((el, i) => {
+            if (parent(el) === target && transitionNodes.includes(el)) {
+                return Transition.start(el, propsTo[i], duration, 'ease', !newNodes.includes(el));
+            }
+        })
+        .concat(Transition.start(target, targetPropsTo, duration, 'ease', true));
 
     try {
         await Promise.all(transitions);
@@ -71,7 +85,7 @@ export default async function (action, target, duration) {
             }
         });
         attr(target, 'style', targetStyle);
-    } catch (e) {
+    } catch {
         attr(nodes, 'style', '');
         resetProps(target, targetProps);
     }
@@ -131,15 +145,19 @@ function getTransitionProps(target, nodes, currentProps) {
 function getPositionWithMargin(el) {
     const { height, width } = dimensions(el);
 
+    let { top, left } = position(el);
+
+    const viewport = offsetViewport(el.ownerDocument);
+
+    top = clamp(top, viewport.top - height - viewport.height, viewport.bottom + viewport.height);
+    left = clamp(left, viewport.left - width - viewport.width, viewport.right + viewport.width);
+
     return {
         height,
         width,
+        top,
+        left,
         transform: '',
-        ...position(el),
         ...css(el, ['marginTop', 'marginLeft']),
     };
 }
-
-export function awaitFrame() {
-    return new Promise((resolve) => requestAnimationFrame(resolve));
-}

package/src/js/mixin/modal.js

@@ -18,6 +18,7 @@ import {
     removeClass,
     toFloat,
 } from 'uikit-util';
+import { awaitFrame } from '../util/await';
 import { preventBackgroundScroll } from '../util/scroll';
 import Class from './class';
 import Container from './container';
@@ -215,12 +216,10 @@ export default {
             return this.isToggled() ? this.hide() : this.show();
         },
 
-        show() {
+        async show() {
             if (this.container && parent(this.$el) !== this.container) {
                 append(this.container, this.$el);
-                return new Promise((resolve) =>
-                    requestAnimationFrame(() => this.show().then(resolve)),
-                );
+                await awaitFrame();
             }
 
             return this.toggleElement(this.$el, true, animate);

package/src/js/mixin/slider.js

@@ -10,6 +10,7 @@ import {
     removeClass,
     trigger,
 } from 'uikit-util';
+import { awaitFrame } from '../util/await';
 import I18n from './i18n';
 import SliderAutoplay from './slider-autoplay';
 import SliderDrag from './slider-drag';
@@ -160,8 +161,9 @@ export default {
             stack.shift();
             this._transitioner = null;
 
+            await awaitFrame();
             if (stack.length) {
-                requestAnimationFrame(() => stack.length && this.show(stack.shift(), true));
+                this.show(stack.shift(), true);
             }
         },
 

package/src/js/mixin/togglable.js

@@ -97,7 +97,7 @@ export default {
                     }),
                 );
                 return true;
-            } catch (e) {
+            } catch {
                 return false;
             }
         },

package/src/js/util/animation.js

@@ -7,15 +7,14 @@ const clsTransition = 'uk-transition';
 const transitionEnd = 'transitionend';
 const transitionCanceled = 'transitioncanceled';
 
-function transition(element, props, duration = 400, timing = 'linear') {
+function transition(element, props, duration = 400, timing = 'linear', skipReflow) {
     duration = Math.round(duration);
     return Promise.all(
         toNodes(element).map(
             (element) =>
                 new Promise((resolve, reject) => {
-                    for (const name in props) {
-                        // Force reflow: transition won't run for previously hidden element
-                        css(element, name);
+                    if (!skipReflow) {
+                        element.offsetHeight; // force reflow
                     }
 
                     const timer = setTimeout(() => trigger(element, transitionEnd), duration);

package/src/js/util/await.js

@@ -0,0 +1,7 @@
+export function awaitFrame() {
+    return new Promise((resolve) => requestAnimationFrame(resolve));
+}
+
+export function awaitTimeout(timeout) {
+    return new Promise((resolve) => setTimeout(resolve, timeout));
+}

package/src/js/util/player.js

@@ -87,9 +87,7 @@ function enableApi(el) {
                     (youtube && data?.id === id && data.event === 'onReady') ||
                     (vimeo && Number(data?.player_id) === id)
                 );
-            } catch (e) {
-                // noop
-            }
+            } catch {}
         });
 
         el.src = `${el.src}${includes(el.src, '?') ? '&' : '?'}${

package/src/js/util/scroll.js

@@ -1,4 +1,4 @@
-import { css, getEventPos, matches, on, once, resetProps, scrollParents, width } from 'uikit-util';
+import { css, getEventPos, matches, on, once, resetProps, scrollParents } from 'uikit-util';
 
 let prevented;
 export function preventBackgroundScroll(el) {
@@ -53,7 +53,7 @@ export function preventBackgroundScroll(el) {
     const props = {
         overflowY: CSS.supports('overflow', 'clip') ? 'clip' : 'hidden',
         touchAction: 'none',
-        paddingRight: width(window) - scrollingElement.clientWidth || '',
+        scrollbarGutter: 'stable',
     };
     css(scrollingElement, props);
     return () => {

package/src/js/util/selector.js

@@ -114,7 +114,7 @@ function _query(selector, context = document, queryFn) {
 function _doQuery(context, queryFn, selector) {
     try {
         return context[queryFn](selector);
-    } catch (e) {
+    } catch {
         return null;
     }
 }

package/src/js/util/viewport.js

@@ -208,10 +208,12 @@ export function offsetViewport(scrollElement) {
 }
 
 export function getCoveringElement(target) {
+    const { document } = toWindow(target);
+    target = target || document.body;
     const { left, width, top } = dimensions(target);
     for (const position of top ? [0, top] : [0]) {
         let coverEl;
-        for (const el of toWindow(target).document.elementsFromPoint(left + width / 2, position)) {
+        for (const el of document.elementsFromPoint(left + width / 2, position)) {
             if (
                 !el.contains(target) &&
                 // If e.g. Offcanvas is not yet closed

package/src/less/components/base.less

@@ -139,6 +139,14 @@ a:hover,
     .hook-base-link-hover();
 }
 
+/*
+ * Fix text underline offset if `vertical-align`is set to `middle`
+ */
+
+a:has(.uk-text-middle),
+.uk-link:has(.uk-text-middle),
+.uk-link-toggle:hover .uk-link:has(.uk-text-middle) { text-underline-offset: 0.1875em; }
+
 
 /* Text-level semantics
  ========================================================================== */
@@ -250,8 +258,11 @@ video { vertical-align: middle; }
 
 /*
  * 1. Constrain the element to its parent width.
- * 2. Preserve the intrinsic aspect ratio and auto-scale the height of an image if the `height` attribute is present.
- * 3. Take border and padding into account.
+ * 2. Take border and padding into account.
+ * 3. Reset `height` attribute if present to scale the height based on the intrinsic aspect ratio.
+ * 4. Scale height based on the extrinsic aspect ratio. Works only in Chrome yet.
+ * 5. Size image to fill the element's content box.
+ * Note: Add `iframe` as soon as `attr` is supported in all browsers and remove `uk-responsive`.
  */
 
 canvas,
@@ -261,9 +272,13 @@ video {
     /* 1 */
     max-width: 100%;
     /* 2 */
-    height: auto;
-    /* 3 */
     box-sizing: border-box;
+    /* 3 */
+    height: auto;
+    /* 4 */
+    aspect-ratio: ~'attr(width type(<number>)) / attr(height type(<number>))';
+    /* 5 */
+    object-fit: cover;
 }
 
 /*

package/src/less/components/card.less

@@ -14,6 +14,7 @@
 //                  `uk-card-default`
 //                  `uk-card-primary`
 //                  `uk-card-secondary`
+//                  `uk-card-overlay`
 //                  `uk-card-small`
 //                  `uk-card-large`
 //
@@ -74,6 +75,12 @@
 @card-secondary-hover-background:              darken(@card-secondary-background, 5%);
 @card-secondary-color-mode:                    light;
 
+@card-overlay-background:                      fade(@global-background, 80%);
+@card-overlay-color:                           @global-color;
+@card-overlay-title-color:                     @global-emphasis-color;
+@card-overlay-hover-background:                fadein(@card-overlay-background, 10%);
+@card-overlay-color-mode:                      dark;
+
 @card-small-body-padding-horizontal:           @global-margin;
 @card-small-body-padding-vertical:             @global-margin;
 @card-small-header-padding-horizontal:         @global-margin;
@@ -223,7 +230,7 @@
 /* Hover modifier
  ========================================================================== */
 
-.uk-card-hover:not(.uk-card-default):not(.uk-card-primary):not(.uk-card-secondary):hover {
+.uk-card-hover:not(.uk-card-default, .uk-card-primary, .uk-card-secondary, .uk-card-overlay):hover {
     background-color: @card-hover-background;
     .hook-card-hover();
 }
@@ -323,6 +330,35 @@
 .uk-card-secondary > :not([class*="uk-card-media"]):extend(.uk-dark all) when (@card-secondary-color-mode = dark) {}
 
 
+/*
+ * Overlay
+ */
+
+.uk-card-overlay {
+    --uk-inverse: @card-overlay-color-mode;
+    background-color: @card-overlay-background;
+    color: @card-overlay-color;
+    .hook-card-overlay();
+}
+
+.uk-card-overlay .uk-card-title {
+    color: @card-overlay-title-color;
+    .hook-card-overlay-title();
+}
+
+.uk-card-overlay.uk-card-hover:hover {
+    background-color: @card-overlay-hover-background;
+    .hook-card-overlay-hover();
+}
+
+
+// Color Mode
+.uk-card-overlay.uk-card-body:extend(.uk-light all) when (@card-overlay-color-mode = light) {}
+.uk-card-overlay > :not([class*="uk-card-media"]):extend(.uk-light all) when (@card-overlay-color-mode = light) {}
+.uk-card-overlay.uk-card-body:extend(.uk-dark all) when (@card-overlay-color-mode = dark) {}
+.uk-card-overlay > :not([class*="uk-card-media"]):extend(.uk-dark all) when (@card-overlay-color-mode = dark) {}
+
+
 /* Size modifier
  ========================================================================== */
 
@@ -380,6 +416,9 @@
 .hook-card-secondary() {}
 .hook-card-secondary-title() {}
 .hook-card-secondary-hover() {}
+.hook-card-overlay() {}
+.hook-card-overlay-title() {}
+.hook-card-overlay-hover() {}
 .hook-card-misc() {}
 
 

package/src/less/components/countdown.less

@@ -13,15 +13,8 @@
 // Variables
 // ========================================================================
 
-@countdown-number-line-height:                  0.8;
-@countdown-number-font-size:                    2rem; // 32px
-@countdown-number-font-size-s:                  4rem; // 64px
-@countdown-number-font-size-m:                  6rem; // 96px
-
-@countdown-separator-line-height:               1.6;
-@countdown-separator-font-size:                 1rem; // 16px
-@countdown-separator-font-size-s:               2rem; // 32px
-@countdown-separator-font-size-m:               3rem; // 48px
+@countdown-separator-line-height:               2;
+@countdown-separator-font-size:                 0.5em;
 
 
 /* ========================================================================
@@ -29,6 +22,7 @@
  ========================================================================== */
 
 .uk-countdown {
+    margin: 0;
     .hook-countdown();
 }
 
@@ -45,35 +39,17 @@
 /* Number
  ========================================================================== */
 
-
 /*
  * 1. Make numbers all of the same size to prevent jumping. Must be supported by the font.
- * 2. Style
  */
 
 .uk-countdown-number {
+    margin: 0;
     /* 1 */
     font-variant-numeric: tabular-nums;
-    /* 2 */
-    font-size: @countdown-number-font-size;
-    line-height: @countdown-number-line-height;
     .hook-countdown-number();
 }
 
-/* Phone landscape and bigger */
-@media (min-width: @breakpoint-small) {
-
-    .uk-countdown-number { font-size: @countdown-number-font-size-s; }
-
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: @breakpoint-medium) {
-
-    .uk-countdown-number { font-size: @countdown-number-font-size-m; }
-
-}
-
 
 /* Separator
  ========================================================================== */
@@ -84,20 +60,6 @@
     .hook-countdown-separator();
 }
 
-/* Phone landscape and bigger */
-@media (min-width: @breakpoint-small) {
-
-    .uk-countdown-separator { font-size: @countdown-separator-font-size-s; }
-
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: @breakpoint-medium) {
-
-    .uk-countdown-separator { font-size: @countdown-separator-font-size-m; }
-
-}
-
 
 /* Label
  ========================================================================== */

package/src/less/components/form.less

@@ -51,18 +51,6 @@
 
 @form-placeholder-color:                        @global-muted-color;
 
-@form-small-height:                             @global-control-small-height;
-@form-small-padding-horizontal:                 8px;
-@form-small-padding-vertical:                   round(@form-small-padding-horizontal * 0.6);
-@form-small-line-height:                        @form-small-height;
-@form-small-font-size:                          @global-small-font-size;
-
-@form-large-height:                             @global-control-large-height;
-@form-large-padding-horizontal:                 12px;
-@form-large-padding-vertical:                   round(@form-large-padding-horizontal * 0.6);
-@form-large-line-height:                        @form-large-height;
-@form-large-font-size:                          @global-medium-font-size;
-
 @form-danger-color:                             @global-danger-background;
 @form-success-color:                            @global-success-background;
 
@@ -93,6 +81,20 @@
 @form-radio-disabled-background:                @global-muted-background;
 @form-radio-disabled-icon-color:                @global-muted-color;
 
+@form-small-font-size:                          @global-small-font-size;
+@form-small-height:                             @global-control-small-height;
+@form-small-padding-horizontal:                 8px;
+@form-small-padding-vertical:                   round(@form-small-padding-horizontal * 0.6);
+@form-small-line-height:                        @form-small-height;
+@form-small-radio-size:                         14px;
+
+@form-large-font-size:                          @global-medium-font-size;
+@form-large-height:                             @global-control-large-height;
+@form-large-padding-horizontal:                 12px;
+@form-large-padding-vertical:                   round(@form-large-padding-horizontal * 0.6);
+@form-large-line-height:                        @form-large-height;
+@form-large-radio-size:                         22px;
+
 @form-legend-font-size:                         @global-large-font-size;
 @form-legend-line-height:                       1.4;
 
@@ -268,23 +270,32 @@
 
 /*
  * Single-line
- * 1. Allow any element to look like an `input` or `select` element
- * 2. Make sure line-height is not larger than height
- *    Also needed to center the text vertically
  */
 
 .uk-input,
 .uk-select:not([multiple]):not([size]) {
     height: @form-height;
     vertical-align: middle;
-    /* 1 */
-    display: inline-block;
     .hook-form-single-line();
 }
 
-/* 2 */
-.uk-input:not(input),
-.uk-select:not(select) { line-height: @form-line-height; }
+/*
+ * 1. Allow any element to look like an `input` or `select` element
+ * 2. Make sure line-height is not larger than height. Also needed to center the text vertically
+ * 3. Prevent text from wrapping onto multiple lines, and truncate with an ellipsis
+ */
+
+.uk-input:where(:not(input)),
+.uk-select:where(:not(select)) {
+    /* 1 */
+    display: inline-block;
+    /* 2 */
+    line-height: @form-line-height;
+    /* 3 */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
 
 /*
  * Multi-line
@@ -330,50 +341,6 @@
 .uk-textarea::placeholder { color: @form-placeholder-color; }
 
 
-/* Style modifier (`uk-input`, `uk-select` and `uk-textarea`)
- ========================================================================== */
-
-/*
- * Small
- */
-
-.uk-form-small { font-size: @form-small-font-size; }
-
-/* Single-line */
-.uk-form-small:not(textarea):not([multiple]):not([size]) {
-    height: @form-small-height;
-    padding-left: @form-small-padding-horizontal;
-    padding-right: @form-small-padding-horizontal;
-}
-
-/* Multi-line */
-textarea.uk-form-small,
-[multiple].uk-form-small,
-[size].uk-form-small { padding: @form-small-padding-vertical @form-small-padding-horizontal; }
-
-.uk-form-small:not(select):not(input):not(textarea) { line-height: @form-small-line-height; }
-
-/*
- * Large
- */
-
-.uk-form-large { font-size: @form-large-font-size; }
-
-/* Single-line */
-.uk-form-large:not(textarea):not([multiple]):not([size]) {
-    height: @form-large-height;
-    padding-left: @form-large-padding-horizontal;
-    padding-right: @form-large-padding-horizontal;
-}
-
-/* Multi-line */
-textarea.uk-form-large,
-[multiple].uk-form-large,
-[size].uk-form-large { padding: @form-large-padding-vertical @form-large-padding-horizontal; }
-
-.uk-form-large:not(select):not(input):not(textarea) { line-height: @form-large-line-height; }
-
-
 /* Style modifier (`uk-input`, `uk-select` and `uk-textarea`)
  ========================================================================== */
 
@@ -489,7 +456,7 @@ select.uk-form-width-xsmall { width: (@form-width-xsmall + 25px); }
  * 3. Vertical alignment
  * 4. Remove default style
  * 5. Fix black background on iOS
- * 6. Center icons
+ * 6. Cover icons
  */
 
 .uk-radio,
@@ -509,8 +476,7 @@ select.uk-form-width-xsmall { width: (@form-width-xsmall + 25px); }
     /* 5 */
     background-color: @form-radio-background;
     /* 6 */
-    background-repeat: no-repeat;
-    background-position: 50% 50%;
+    background-size: cover;
     .hook-form-radio();
 }
 
@@ -566,6 +532,60 @@ select.uk-form-width-xsmall { width: (@form-width-xsmall + 25px); }
 .uk-checkbox:disabled:indeterminate { .svg-fill(@internal-form-checkbox-indeterminate-image, "#000", @form-radio-disabled-icon-color); }
 
 
+/* Style modifier (`uk-input`, `uk-select`, `uk-textarea`, `uk-radio`, `uk-checkbox`)
+ ========================================================================== */
+
+/*
+ * Small
+ */
+
+.uk-form-small:is(.uk-input, .uk-search-input, .uk-select, .uk-textarea) { font-size: @form-small-font-size; }
+
+/* Single-line */
+.uk-form-small:is(.uk-input, .uk-search-input, .uk-select:not([multiple]):not([size])) {
+    height: @form-small-height;
+    padding-left: @form-small-padding-horizontal;
+    padding-right: @form-small-padding-horizontal;
+}
+
+/* Multi-line */
+.uk-form-small:is(.uk-select[multiple], .uk-select[size], .uk-textarea) { padding: @form-small-padding-vertical @form-small-padding-horizontal; }
+
+/* Any element */
+.uk-form-small:not(select):not(input):not(textarea):not([type="radio"]):not([type="checkbox"]) { line-height: @form-small-line-height; }
+
+/* Radio + Checkbox */
+.uk-form-small:is(.uk-radio, .uk-checkbox) {
+    height: @form-small-radio-size;
+    width: @form-small-radio-size;
+}
+
+/*
+ * Large
+ */
+
+.uk-form-large:is(.uk-input, .uk-search-input, .uk-select, .uk-textarea) { font-size: @form-large-font-size; }
+
+/* Single-line */
+.uk-form-large:is(.uk-input, .uk-search-input, .uk-select:not([multiple]):not([size])) {
+    height: @form-large-height;
+    padding-left: @form-large-padding-horizontal;
+    padding-right: @form-large-padding-horizontal;
+}
+
+/* Multi-line */
+.uk-form-large:is(.uk-select[multiple], .uk-select[size], .uk-textarea) { padding: @form-large-padding-vertical @form-large-padding-horizontal; }
+
+/* Any element */
+.uk-form-large:not(select):not(input):not(textarea):not([type="radio"]):not([type="checkbox"]) { line-height: @form-large-line-height; }
+
+/* Radio + Checkbox */
+.uk-form-large:is(.uk-radio, .uk-checkbox) {
+    height: @form-large-radio-size;
+    width: @form-large-radio-size;
+}
+
+
 /* Legend
  ========================================================================== */