uikit 3.11.2-dev.3dfa2c50b → 3.11.2-dev.45194f70c

package/src/js/util/observer.js

@@ -0,0 +1,36 @@
+import { isArray } from './lang';
+
+// Old chromium based browsers (UC Browser) did not implement `isIntersecting`
+export const hasIntersectionObserver =
+    window.IntersectionObserver && 'isIntersecting' in IntersectionObserverEntry.prototype;
+export function observeIntersection(targets, cb, options, intersecting = true) {
+    if (!hasIntersectionObserver) {
+        return;
+    }
+
+    const observer = new IntersectionObserver((entries, observer) => {
+        if (!intersecting || entries.some((entry) => entry.isIntersecting)) {
+            cb(entries, observer);
+        }
+    }, options);
+    for (const el of isArray(targets) ? targets : [targets]) {
+        observer.observe(el);
+    }
+    return observer;
+}
+
+const hasResizeObserver = window.ResizeObserver;
+export function observeResize(targets, cb, options = { box: 'border-box' }) {
+    if (!hasResizeObserver) {
+        return;
+    }
+
+    const observer = new ResizeObserver((entries, observer) => {
+        cb(entries, observer);
+    });
+    for (const el of isArray(targets) ? targets : [targets]) {
+        observer.observe(el, options);
+    }
+
+    return observer;
+}

package/src/js/util/options.js

@@ -1,13 +1,4 @@
-import {
-    assign,
-    hasOwn,
-    includes,
-    isArray,
-    isFunction,
-    isUndefined,
-    sortBy,
-    startsWith,
-} from './lang';
+import { hasOwn, includes, isArray, isFunction, isUndefined, sortBy, startsWith } from './lang';
 
 const strats = {};
 
@@ -48,7 +39,7 @@ strats.props = function (parentVal, childVal) {
 
 // extend strategy
 strats.computed = strats.methods = function (parentVal, childVal) {
-    return childVal ? (parentVal ? assign({}, parentVal, childVal) : childVal) : parentVal;
+    return childVal ? (parentVal ? { ...parentVal, ...childVal } : childVal) : parentVal;
 };
 
 // data strategy

package/src/js/util/player.js

@@ -1,5 +1,6 @@
+import { isTag } from './dom';
 import { once } from './event';
-import { assign, includes, noop } from './lang';
+import { includes, noop } from './lang';
 
 export function play(el) {
     if (isIFrame(el)) {
@@ -40,11 +41,11 @@ export function isVideo(el) {
 }
 
 function isHTML5(el) {
-    return el?.tagName === 'VIDEO';
+    return isTag(el, 'video');
 }
 
 function isIFrame(el) {
-    return el?.tagName === 'IFRAME' && (isYoutube(el) || isVimeo(el));
+    return isTag(el, 'iframe') && (isYoutube(el) || isVimeo(el));
 }
 
 function isYoutube(el) {
@@ -64,7 +65,7 @@ async function call(el, cmd) {
 
 function post(el, cmd) {
     try {
-        el.contentWindow.postMessage(JSON.stringify(assign({ event: 'command' }, cmd)), '*');
+        el.contentWindow.postMessage(JSON.stringify({ event: 'command', ...cmd }), '*');
     } catch (e) {
         // noop
     }

package/src/js/util/selector.js

@@ -1,5 +1,4 @@
 import { attr } from './attr';
-import { inBrowser } from './env';
 import { closest, index, matches, parent } from './filter';
 import { isDocument, isString, memoize, toNode, toNodes } from './lang';
 
@@ -11,12 +10,6 @@ export function queryAll(selector, context) {
     return findAll(selector, getContext(selector, context));
 }
 
-function getContext(selector, context = document) {
-    return (isString(selector) && isContextSelector(selector)) || isDocument(context)
-        ? context
-        : context.ownerDocument;
-}
-
 export function find(selector, context) {
     return toNode(_query(selector, context, 'querySelector'));
 }
@@ -25,6 +18,17 @@ export function findAll(selector, context) {
     return toNodes(_query(selector, context, 'querySelectorAll'));
 }
 
+const contextSelectorRe = /(^|[^\\],)\s*[!>+~-]/;
+const isContextSelector = memoize((selector) => selector.match(contextSelectorRe));
+
+function getContext(selector, context = document) {
+    return (isString(selector) && isContextSelector(selector)) || isDocument(context)
+        ? context
+        : context.ownerDocument;
+}
+
+const contextSanitizeRe = /([!>+~-])(?=\s+[!>+~-]|\s*$)/g;
+
 function _query(selector, context = document, queryFn) {
     if (!selector || !isString(selector)) {
         return selector;
@@ -69,11 +73,6 @@ function _query(selector, context = document, queryFn) {
     }
 }
 
-const contextSelectorRe = /(^|[^\\],)\s*[!>+~-]/;
-const contextSanitizeRe = /([!>+~-])(?=\s+[!>+~-]|\s*$)/g;
-
-const isContextSelector = memoize((selector) => selector.match(contextSelectorRe));
-
 const selectorRe = /.*?[^\\](?:,|$)/g;
 
 const splitSelector = memoize((selector) =>
@@ -99,11 +98,6 @@ function domPath(element) {
     return names.join(' > ');
 }
 
-const escapeFn =
-    (inBrowser && window.CSS && CSS.escape) ||
-    function (css) {
-        return css.replace(/([^\x7f-\uFFFF\w-])/g, (match) => `\\${match}`);
-    };
 export function escape(css) {
-    return isString(css) ? escapeFn.call(null, css) : '';
+    return isString(css) ? CSS.escape(css) : '';
 }

package/src/js/util/style.js

@@ -31,7 +31,8 @@ const cssNumber = {
 };
 
 export function css(element, property, value, priority = '') {
-    return toNodes(element).map((element) => {
+    const elements = toNodes(element);
+    for (const element of elements) {
         if (isString(property)) {
             property = propName(property);
 
@@ -57,9 +58,8 @@ export function css(element, property, value, priority = '') {
             priority = value;
             each(property, (value, property) => css(element, property, value, priority));
         }
-
-        return element;
-    })[0];
+    }
+    return elements[0];
 }
 
 function getStyles(element, pseudoElt) {

package/src/less/components/base.less

@@ -91,7 +91,6 @@
 
 /*
  * 1. Set `font-size` to support `rem` units
- *    Not using `font` property because a leading hyphen (e.g. -apple-system) causes the font to break in IE11 and Edge
  * 2. Prevent adjustments of font size after orientation changes in iOS.
  * 3. Style
  */
@@ -239,7 +238,7 @@ sub { bottom: -0.25em; }
  ========================================================================== */
 
 /*
- * Remove the gap between embedded content and the bottom of their containers.
+ * Remove the gap between the element and the bottom of its parent container.
  */
 
 audio,
@@ -250,14 +249,14 @@ svg,
 video { vertical-align: middle; }
 
 /*
- * 1. Add responsiveness.
- * 2. Auto-scale the height. Only needed if `height` attribute is present.
- * 3. Corrects responsive `max-width` behavior if padding and border are used.
- * 4. Exclude SVGs for IE11 because they don't preserve their aspect ratio.
+ * 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.
  */
 
 canvas,
 img,
+svg,
 video {
     /* 1 */
     max-width: 100%;
@@ -267,34 +266,17 @@ video {
     box-sizing: border-box;
 }
 
-/* 4 */
-@supports (display: block) {
-
-   svg {
-        max-width: 100%;
-        height: auto;
-        box-sizing: border-box;
-    }
-
-}
-
-/*
- * Hide the overflow in IE.
- */
-
-svg:not(:root) { overflow: hidden; }
-
 /*
- * 1. Fix lazy loading images if parent element is set to `display: inline` and has `overflow: hidden`.
- * 2. Hide `alt` text for lazy loading images.
- * Note: Selector for background while loading img[data-src*='.jpg'][src*='data:image'] { background: grey; }
+ * Deprecated: only needed for `img` elements with `uk-img`
+ * 1. Hide `alt` text for lazy load images.
+ * 2. Fix lazy loading images if parent element is set to `display: inline` and has `overflow: hidden`.
  */
 
 img:not([src]) {
     /* 1 */
-    min-width: 1px;
-    /* 2 */
     visibility: hidden;
+    /* 2 */
+    min-width: 1px;
 }
 
 /*
@@ -589,11 +571,6 @@ template { display: none; }
  * Breakpoints
  */
 
-.uk-breakpoint-s::before  { content: '@{breakpoint-small}'; }
-.uk-breakpoint-m::before  { content: '@{breakpoint-medium}'; }
-.uk-breakpoint-l::before  { content: '@{breakpoint-large}'; }
-.uk-breakpoint-xl::before { content: '@{breakpoint-xlarge}'; }
-
 :root {
     --uk-breakpoint-s: @breakpoint-small;
     --uk-breakpoint-m: @breakpoint-medium;

package/src/less/components/form-range.less

@@ -9,44 +9,45 @@
 // Variables
 // ========================================================================
 
+@form-range-track-height:                       3px;
+@form-range-track-background:                   darken(@global-muted-background, 5%);
+@form-range-track-focus-background:             darken(@form-range-track-background, 5%);
+
 @form-range-thumb-height:                       15px;
 @form-range-thumb-width:                        @form-range-thumb-height;
 @form-range-thumb-border-radius:                500px;
 @form-range-thumb-background:                   @global-color;
 
-@form-range-track-height:                       3px;
-@form-range-track-background:                   darken(@global-muted-background, 5%);
-@form-range-track-focus-background:             darken(@form-range-track-background, 5%);
-
 
 /* ========================================================================
    Component: Form Range
  ========================================================================== */
 
 /*
- * 1. Normalize and defaults
- * 2. Prevent content overflow if a fixed width is used
- * 3. Take the full width
- * 4. Remove default style
- * 5. Remove white background in Chrome
- * 6. Remove padding in IE11
+ * 1. Remove default style.
+ * 2. Define consistent box sizing.
+ * 3. Remove `margin` in all browsers.
+ * 4. Align to the center of the line box.
+ * 5. Prevent content overflow if a fixed width is used.
+ * 6. Take the full width.
+ * 7. Remove white background in Chrome.
  */
 
 .uk-range {
     /* 1 */
+    -webkit-appearance: none;
+    /* 2 */
     box-sizing: border-box;
+    /* 3 */
     margin: 0;
+    /* 4 */
     vertical-align: middle;
-    /* 2 */
+    /* 5 */
     max-width: 100%;
-    /* 3 */
+    /* 6 */
     width: 100%;
-    /* 4 */
-    -webkit-appearance: none;
-    /* 5 */
+    /* 7 */
     background: transparent;
-    /* 6 */
-    padding: 0;
     .hook-form-range();
 }
 
@@ -54,82 +55,16 @@
 .uk-range:focus { outline: none; }
 .uk-range::-moz-focus-outer { border: none; }
 
-/* IE11 Reset */
-.uk-range::-ms-track {
-    height: @form-range-thumb-height;
-    background: transparent;
-    border-color: transparent;
-    color: transparent;
-}
-
 /*
  * Improves consistency of cursor style for clickable elements
  */
 
 .uk-range:not(:disabled)::-webkit-slider-thumb { cursor: pointer; }
 .uk-range:not(:disabled)::-moz-range-thumb { cursor: pointer; }
-.uk-range:not(:disabled)::-ms-thumb { cursor: pointer; }
 
 
-/* Thumb
- ========================================================================== */
-
-/*
- * 1. Reset
- * 2. Style
- */
-
-/* Webkit */
-.uk-range::-webkit-slider-thumb {
-    /* 1 */
-    -webkit-appearance: none;
-    margin-top: (floor((@form-range-thumb-height / 2)) * -1);
-    /* 2 */
-    height: @form-range-thumb-height;
-    width: @form-range-thumb-width;
-    border-radius: @form-range-thumb-border-radius;
-    background: @form-range-thumb-background;
-    .hook-form-range-thumb();
-}
-
-/* Firefox */
-.uk-range::-moz-range-thumb {
-    /* 1 */
-    border: none;
-    /* 2 */
-    height: @form-range-thumb-height;
-    width: @form-range-thumb-width;
-    border-radius: @form-range-thumb-border-radius;
-    background: @form-range-thumb-background;
-    .hook-form-range-thumb();
-}
-
-/* Edge */
-.uk-range::-ms-thumb {
-    /* 1 */
-    margin-top: 0;
-}
-
-/* IE11 */
-.uk-range::-ms-thumb {
-    /* 1 */
-    border: none;
-    /* 2 */
-    height: @form-range-thumb-height;
-    width: @form-range-thumb-width;
-    border-radius: @form-range-thumb-border-radius;
-    background: @form-range-thumb-background;
-    .hook-form-range-thumb();
-}
-
-/* Edge + IE11 */
-.uk-range::-ms-tooltip { display: none; }
-
-
-/* Track
- ========================================================================== */
-
 /*
+ * Track
  * 1. Safari doesn't have a focus state. Using active instead.
  */
 
@@ -159,18 +94,36 @@
     .hook-form-range-track-focus();
 }
 
-/* Edge */
-.uk-range::-ms-fill-lower,
-.uk-range::-ms-fill-upper {
-    height: @form-range-track-height;
-    background: @form-range-track-background;
-    .hook-form-range-track();
+/*
+ * Thumb
+ * 1. Reset
+ * 2. Style
+ */
+
+/* Webkit */
+.uk-range::-webkit-slider-thumb {
+    /* 1 */
+    -webkit-appearance: none;
+    margin-top: (floor((@form-range-thumb-height / 2)) * -1);
+    /* 2 */
+    height: @form-range-thumb-height;
+    width: @form-range-thumb-width;
+    border-radius: @form-range-thumb-border-radius;
+    background: @form-range-thumb-background;
+    .hook-form-range-thumb();
 }
 
-.uk-range:focus::-ms-fill-lower,
-.uk-range:focus::-ms-fill-upper {
-    background: @form-range-track-focus-background;
-    .hook-form-range-track-focus();
+/* Firefox */
+.uk-range::-moz-range-thumb {
+    /* 1 */
+    border: none;
+    /* 2 */
+    height: @form-range-thumb-height;
+    width: @form-range-thumb-width;
+    margin-top: (floor((@form-range-thumb-height / 2)) * -1);
+    border-radius: @form-range-thumb-border-radius;
+    background: @form-range-thumb-background;
+    .hook-form-range-thumb();
 }
 
 
@@ -180,7 +133,7 @@
 .hook-form-range-misc();
 
 .hook-form-range() {}
-.hook-form-range-thumb() {}
 .hook-form-range-track() {}
 .hook-form-range-track-focus() {}
+.hook-form-range-thumb() {}
 .hook-form-range-misc() {}

package/src/less/components/form.less

@@ -472,7 +472,6 @@ select.uk-form-width-xsmall { width: (@form-width-xsmall + 25px); }
 
 
 /* Radio and checkbox
- * Note: Does not work in IE11
  ========================================================================== */
 
 /*

package/src/less/components/height.less

@@ -31,6 +31,9 @@
  */
 
 .uk-height-viewport { min-height: 100vh; }
+.uk-height-viewport-2 { min-height: 200vh; }
+.uk-height-viewport-3 { min-height: 300vh; }
+.uk-height-viewport-4 { min-height: 400vh; }
 
 /*
  * Pixel

package/src/less/components/leader.less

@@ -49,7 +49,6 @@
  * Pass fill character to JS
  */
 
-.uk-leader-fill-content::before { content: '@{leader-fill-content}'; }
 :root { --uk-leader-fill-content: '@{leader-fill-content}'; }
 
 

package/src/less/components/lightbox.less

@@ -119,7 +119,6 @@
  * 4. Optimize animation
  * 5. Responsiveness
  *    Using `vh` for `max-height` to fix image proportions after resize in Safari and Opera
- *    Using `vh` and `vw` to make responsive image work in IE11
  */
 
 .uk-lightbox-items > * {

package/src/less/components/modal.less

@@ -139,10 +139,8 @@
 /*
  * 1. Create position context for spinner and close button
  * 2. Dimensions
- * 3. Fix `max-width: 100%` not working in combination with flex and responsive images in IE11
- *    `!important` needed to overwrite `uk-width-auto`. See `#modal-media-image` in tests
- * 4. Style
- * 5. Slide-in transition
+ * 3. Style
+ * 4. Slide-in transition
  */
 
 .uk-modal-dialog {
@@ -153,10 +151,8 @@
     margin: 0 auto;
     width: @modal-dialog-width;
     /* 3 */
-    max-width: ~'calc(100% - 0.01px)' !important;
-    /* 4 */
     background: @modal-dialog-background;
-    /* 5 */
+    /* 4 */
     opacity: 0;
     transform: translateY(-100px);
     transition: 0.3s linear;

package/src/less/components/progress.less

@@ -21,28 +21,24 @@
  ========================================================================== */
 
 /*
- * 1. Add the correct vertical alignment in Chrome, Firefox, and Opera.
- * 2. Remove default style
- * 3. Behave like a block element
- * 4. Remove borders in Firefox and Edge
- * 5. Set background color for progress container in Firefox, IE11 and Edge
- * 6. Style
+ * 1. Add the correct vertical alignment in all browsers.
+ * 2. Behave like a block element.
+ * 3. Remove borders in Firefox.
+ * 4. Remove default style in Chrome, Safari and Edge.
+ * 5. Style
  */
 
 .uk-progress {
     /* 1 */
     vertical-align: baseline;
     /* 2 */
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    /* 3 */
     display: block;
     width: 100%;
-    /* 4 */
+    /* 3 */
     border: 0;
-    /* 5 */
+    /* 4 */
     background-color: @progress-background;
-    /* 6 */
+    /* 5 */
     margin-bottom: @progress-margin-vertical;
     height: @progress-height;
     .hook-progress();
@@ -52,27 +48,15 @@
 * + .uk-progress { margin-top: @progress-margin-vertical; }
 
 /*
- * Remove animated circles for indeterminate state in IE11 and Edge
+ * Show background color set on `uk-progress` in Chrome, Safari and Edge.
  */
 
-.uk-progress:indeterminate { color: transparent; }
+ .uk-progress::-webkit-progress-bar { background-color: transparent; }
 
 /*
- * Progress container
- * 2. Remove progress bar for indeterminate state in Firefox
- */
-
-.uk-progress::-webkit-progress-bar {
-  background-color: @progress-background;
-  .hook-progress();
-}
-
-/* 2 */
-.uk-progress:indeterminate::-moz-progress-bar { width: 0; }
-
-/*
- * Progress bar
- * 1. Remove right border in IE11 and Edge
+ * Progress Bar
+ * 1. Transitions don't work on `::-moz-progress-bar` pseudo element in Firefox yet.
+ *    https://bugzilla.mozilla.org/show_bug.cgi?id=662351
  */
 
 .uk-progress::-webkit-progress-value {
@@ -83,14 +67,8 @@
 
 .uk-progress::-moz-progress-bar {
     background-color: @progress-bar-background;
-    .hook-progress-bar();
-}
-
-.uk-progress::-ms-fill {
-    background-color: @progress-bar-background;
-    transition: width 0.6s ease;
     /* 1 */
-    border: 0;
+    transition: width 0.6s ease;
     .hook-progress-bar();
 }
 

package/src/less/components/slider.less

@@ -93,7 +93,6 @@
  * 1. Let items take content dimensions (0 0 auto)
  *    `max-width` needed to keep image responsiveness and prevent content overflow
  * 3. Create position context
- * 4. Disable horizontal panning gestures in IE11 and Edge
  */
 
 .uk-slider-items > * {
@@ -102,8 +101,6 @@
     max-width: 100%;
     /* 3 */
     position: relative;
-    /* 4 */
-    touch-action: pan-y;
 }
 
 

package/src/less/components/slideshow.less

@@ -58,7 +58,6 @@
  * 2. Take the full width
  * 3. Clip child elements, e.g. for `uk-cover`
  * 4. Optimize animation
- * 5. Disable horizontal panning gestures in IE11 and Edge
  */
 
 .uk-slideshow-items > * {
@@ -73,8 +72,6 @@
     overflow: hidden;
     /* 4 */
     will-change: transform, opacity;
-    /* 5 */
-    touch-action: pan-y;
 }
 
 /*