uikit 3.16.11-dev.cc1aeb568 → 3.16.12-dev.38cb458de

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.16.11-dev.cc1aeb568",
+  "version": "3.16.12-dev.38cb458de",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/api/props.js

@@ -1,14 +1,6 @@
 import { registerObserver } from './observer';
 import { coerce, parseOptions } from './options';
-import {
-    camelize,
-    data as getData,
-    hasOwn,
-    hyphenate,
-    isArray,
-    isUndefined,
-    startsWith,
-} from 'uikit-util';
+import { camelize, data as getData, hasOwn, hyphenate, isUndefined, startsWith } from 'uikit-util';
 
 export function initProps(instance) {
     const props = getProps(instance.$options);
@@ -70,13 +62,13 @@ function notIn(options, key) {
 
 export function initPropsObserver(instance) {
     const { $options, $props } = instance;
-    const { id, attrs, props, el } = $options;
+    const { id, props, el } = $options;
 
-    if (!props || attrs === false) {
+    if (!props) {
         return;
     }
 
-    const attributes = isArray(attrs) ? attrs : Object.keys(props);
+    const attributes = Object.keys(props);
     const filter = attributes.map((key) => hyphenate(key)).concat(id);
 
     const observer = new MutationObserver((records) => {

package/src/js/api/watch.js

@@ -20,11 +20,10 @@ export function registerWatch(instance, watch, name) {
 export function runWatches(instance, values) {
     for (const { name, handler, immediate = true } of instance._watches) {
         if (
-            instance._initial
-                ? immediate
-                : hasOwn(values, name) && !isEqual(values[name], instance[name])
+            (instance._initial && immediate) ||
+            (hasOwn(values, name) && !isEqual(values[name], instance[name]))
         ) {
-            handler.call(instance, instance[name], instance._initial ? undefined : values[name]);
+            handler.call(instance, instance[name], values[name]);
         }
     }
     instance._initial = false;

package/src/js/core/icon.js

@@ -1,4 +1,4 @@
-import SVG from './svg';
+import Svg from '../mixin/svg';
 import I18n from '../mixin/i18n';
 import closeIcon from '../../images/components/close-icon.svg';
 import closeLarge from '../../images/components/close-large.svg';
@@ -64,13 +64,11 @@ const icons = {
 const Icon = {
     install,
 
-    extends: SVG,
+    mixins: [Svg],
 
     args: 'icon',
 
-    props: ['icon'],
-
-    data: { include: [] },
+    props: { icon: String },
 
     isIcon: true,
 

package/src/js/core/margin.js

@@ -1,4 +1,4 @@
-import { isRtl, isVisible, offsetPosition, toArray, toggleClass } from 'uikit-util';
+import { children, isRtl, isVisible, offsetPosition, toggleClass } from 'uikit-util';
 import { mutation, resize } from '../api/observables';
 
 export default {
@@ -21,7 +21,7 @@ export default {
             },
         }),
         resize({
-            target: ({ $el }) => [$el, ...toArray($el.children)],
+            target: ({ $el }) => [$el, ...children($el)],
         }),
     ],
 

package/src/js/core/scroll.js

@@ -63,7 +63,9 @@ function clickHandler(e) {
     for (const instance of instances) {
         if (within(e.target, instance.$el) && isSameSiteAnchor(instance.$el)) {
             e.preventDefault();
-            window.history.pushState({}, '', instance.$el.href);
+            if (window.location.href !== instance.$el.href) {
+                window.history.pushState({}, '', instance.$el.href);
+            }
             instance.scrollTo(getTargetedElement(instance.$el));
         }
     }

package/src/js/core/svg.js

@@ -1,102 +1,65 @@
-import { registerObserver } from '../api/observer';
+import Svg from '../mixin/svg';
+import Class from '../mixin/class';
 import { getMaxPathLength } from '../util/svg';
+import { mutation } from '../api/observables';
 import {
     $,
-    after,
-    append,
+    addClass,
     attr,
+    css,
     includes,
     isTag,
-    isVoidElement,
     memoize,
-    noop,
-    observeIntersection,
     once,
-    remove,
     removeAttr,
     startsWith,
-    toFloat,
 } from 'uikit-util';
 
 export default {
+    mixins: [Class, Svg],
+
     args: 'src',
 
     props: {
-        id: Boolean,
-        icon: String,
         src: String,
-        style: String,
-        width: Number,
-        height: Number,
-        ratio: Number,
-        class: String,
-        strokeAnimation: Boolean,
+        icon: String,
         attributes: 'list',
+        strokeAnimation: Boolean,
     },
 
     data: {
-        ratio: 1,
-        include: ['style', 'class'],
-        class: '',
         strokeAnimation: false,
     },
 
-    beforeConnect() {
-        this.class += ' uk-svg';
-    },
-
-    connected() {
-        if (!this.icon && includes(this.src, '#')) {
+    observe: [
+        mutation({
+            async handler() {
+                const svg = await this.svg;
+                if (svg) {
+                    applyAttributes.call(this, svg);
+                }
+            },
+            options: {
+                attributes: true,
+                attributeFilter: ['id', 'class', 'style'],
+            },
+        }),
+    ],
+
+    async connected() {
+        if (includes(this.src, '#')) {
             [this.src, this.icon] = this.src.split('#');
         }
 
-        this.svg = this.getSvg().then((el) => {
-            if (this._connected) {
-                const svg = insertSVG(el, this.$el);
-
-                if (this.svgEl && svg !== this.svgEl) {
-                    remove(this.svgEl);
-                }
-
-                this.applyAttributes(svg, el);
-
-                return (this.svgEl = svg);
+        const svg = await this.svg;
+        if (svg) {
+            applyAttributes.call(this, svg);
+            if (this.strokeAnimation) {
+                applyAnimation(svg);
             }
-        }, noop);
-
-        if (this.strokeAnimation) {
-            this.svg.then((el) => {
-                if (this._connected && el) {
-                    applyAnimation(el);
-                    registerObserver(
-                        this,
-                        observeIntersection(el, (records, observer) => {
-                            applyAnimation(el);
-                            observer.disconnect();
-                        })
-                    );
-                }
-            });
         }
     },
 
-    disconnected() {
-        this.svg.then((svg) => {
-            if (this._connected) {
-                return;
-            }
-
-            if (isVoidElement(this.$el)) {
-                this.$el.hidden = false;
-            }
-
-            remove(svg);
-            this.svgEl = null;
-        });
-
-        this.svg = null;
-    },
-
     methods: {
         async getSvg() {
             if (isTag(this.$el, 'img') && !this.$el.complete && this.$el.loading === 'lazy') {
@@ -107,39 +70,28 @@ export default {
 
             return parseSVG(await loadSVG(this.src), this.icon) || Promise.reject('SVG not found.');
         },
+    },
+};
 
-        applyAttributes(el, ref) {
-            for (const prop in this.$options.props) {
-                if (includes(this.include, prop) && prop in this) {
-                    attr(el, prop, this[prop]);
-                }
-            }
-
-            for (const attribute in this.attributes) {
-                const [prop, value] = this.attributes[attribute].split(':', 2);
-                attr(el, prop, value);
-            }
-
-            if (!this.id) {
-                removeAttr(el, 'id');
-            }
+function applyAttributes(el) {
+    const { $el } = this;
 
-            const props = ['width', 'height'];
-            let dimensions = props.map((prop) => this[prop]);
+    addClass(el, attr($el, 'class'));
 
-            if (!dimensions.some((val) => val)) {
-                dimensions = props.map((prop) => attr(ref, prop));
-            }
+    for (let i = 0; i < $el.style.length; i++) {
+        const prop = $el.style[i];
+        css(el, prop, css($el, prop));
+    }
 
-            const viewBox = attr(ref, 'viewBox');
-            if (viewBox && !dimensions.some((val) => val)) {
-                dimensions = viewBox.split(' ').slice(2);
-            }
+    for (const attribute in this.attributes) {
+        const [prop, value] = this.attributes[attribute].split(':', 2);
+        attr(el, prop, value);
+    }
 
-            dimensions.forEach((val, i) => attr(el, props[i], toFloat(val) * this.ratio || null));
-        },
-    },
-};
+    if (!this.$el.id) {
+        removeAttr(el, 'id');
+    }
+}
 
 const loadSVG = memoize(async (src) => {
     if (src) {
@@ -155,7 +107,7 @@ const loadSVG = memoize(async (src) => {
 
 function parseSVG(svg, icon) {
     if (icon && includes(svg, '<symbol')) {
-        svg = parseSymbols(svg, icon) || svg;
+        svg = parseSymbols(svg)[icon] || svg;
     }
 
     svg = $(svg.substr(svg.indexOf('<svg')));
@@ -163,43 +115,24 @@ function parseSVG(svg, icon) {
 }
 
 const symbolRe = /<symbol([^]*?id=(['"])(.+?)\2[^]*?<\/)symbol>/g;
-const symbols = {};
 
-function parseSymbols(svg, icon) {
-    if (!symbols[svg]) {
-        symbols[svg] = {};
+const parseSymbols = memoize(function (svg) {
+    const symbols = {};
 
-        symbolRe.lastIndex = 0;
+    symbolRe.lastIndex = 0;
 
-        let match;
-        while ((match = symbolRe.exec(svg))) {
-            symbols[svg][match[3]] = `<svg xmlns="http://www.w3.org/2000/svg"${match[1]}svg>`;
-        }
+    let match;
+    while ((match = symbolRe.exec(svg))) {
+        symbols[match[3]] = `<svg xmlns="http://www.w3.org/2000/svg"${match[1]}svg>`;
     }
 
-    return symbols[svg][icon];
-}
+    return symbols;
+});
 
 function applyAnimation(el) {
     const length = getMaxPathLength(el);
 
     if (length) {
-        el.style.setProperty('--uk-animation-stroke', length);
+        css(el, '--uk-animation-stroke', length);
     }
 }
-
-function insertSVG(el, root) {
-    if (isVoidElement(root) || isTag(root, 'canvas')) {
-        root.hidden = true;
-
-        const next = root.nextElementSibling;
-        return equals(el, next) ? next : after(root, el);
-    }
-
-    const last = root.lastElementChild;
-    return equals(el, last) ? last : append(root, el);
-}
-
-function equals(el, other) {
-    return isTag(el, 'svg') && isTag(other, 'svg') && el.innerHTML === other.innerHTML;
-}

package/src/js/core/switcher.js

@@ -17,8 +17,8 @@ import {
     isNode,
     matches,
     queryAll,
+    toArray,
     toggleClass,
-    toNodes,
     within,
 } from 'uikit-util';
 
@@ -242,7 +242,7 @@ export default {
             const animate = prev >= 0 && prev !== next;
             this.connects.forEach(async ({ children }) => {
                 await this.toggleElement(
-                    toNodes(children).filter((child) => hasClass(child, this.cls)),
+                    toArray(children).filter((child) => hasClass(child, this.cls)),
                     false,
                     animate
                 );

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

@@ -9,7 +9,7 @@ import {
     off,
     on,
     selInput,
-    toNodes,
+    toArray,
     trigger,
 } from 'uikit-util';
 
@@ -228,6 +228,6 @@ export default {
 function hasSelectableText(el) {
     return (
         css(el, 'userSelect') !== 'none' &&
-        toNodes(el.childNodes).some((el) => el.nodeType === 3 && el.textContent.trim())
+        toArray(el.childNodes).some((el) => el.nodeType === 3 && el.textContent.trim())
     );
 }

package/src/js/mixin/svg.js

@@ -0,0 +1,86 @@
+import { after, append, attr, isTag, isVoidElement, noop, remove, toFloat } from 'uikit-util';
+
+export default {
+    args: 'src',
+
+    props: {
+        width: Number,
+        height: Number,
+        ratio: Number,
+    },
+
+    data: {
+        ratio: 1,
+    },
+
+    connected() {
+        this.svg = this.getSvg().then((el) => {
+            if (!this._connected) {
+                return;
+            }
+
+            const svg = insertSVG(el, this.$el);
+
+            if (this.svgEl && svg !== this.svgEl) {
+                remove(this.svgEl);
+            }
+
+            applyWidthAndHeight.call(this, svg, el);
+
+            return (this.svgEl = svg);
+        }, noop);
+    },
+
+    disconnected() {
+        this.svg.then((svg) => {
+            if (this._connected) {
+                return;
+            }
+
+            if (isVoidElement(this.$el)) {
+                this.$el.hidden = false;
+            }
+
+            remove(svg);
+            this.svgEl = null;
+        });
+
+        this.svg = null;
+    },
+
+    methods: {
+        async getSvg() {},
+    },
+};
+
+function insertSVG(el, root) {
+    if (isVoidElement(root) || isTag(root, 'canvas')) {
+        root.hidden = true;
+
+        const next = root.nextElementSibling;
+        return equals(el, next) ? next : after(root, el);
+    }
+
+    const last = root.lastElementChild;
+    return equals(el, last) ? last : append(root, el);
+}
+
+function equals(el, other) {
+    return isTag(el, 'svg') && isTag(other, 'svg') && el.innerHTML === other.innerHTML;
+}
+
+function applyWidthAndHeight(el, ref) {
+    const props = ['width', 'height'];
+    let dimensions = props.map((prop) => this[prop]);
+
+    if (!dimensions.some((val) => val)) {
+        dimensions = props.map((prop) => attr(ref, prop));
+    }
+
+    const viewBox = attr(ref, 'viewBox');
+    if (viewBox && !dimensions.some((val) => val)) {
+        dimensions = viewBox.split(' ').slice(2);
+    }
+
+    dimensions.forEach((val, i) => attr(el, props[i], toFloat(val) * this.ratio || null));
+}

package/src/js/mixin/togglable.js

@@ -14,6 +14,7 @@ import {
     startsWith,
     toFloat,
     toggleClass,
+    toNode,
     toNodes,
     Transition,
     trigger,
@@ -96,7 +97,7 @@ export default {
         },
 
         isToggled(el = this.$el) {
-            [el] = toNodes(el);
+            el = toNode(el);
             return hasClass(el, this.clsEnter)
                 ? true
                 : hasClass(el, this.clsLeave)

package/src/js/util/dom.js

@@ -1,7 +1,7 @@
 import { once } from './event';
 import { parent } from './filter';
 import { find, findAll } from './selector';
-import { isElement, isString, isUndefined, startsWith, toNode, toNodes } from './lang';
+import { isElement, isString, isUndefined, startsWith, toArray, toNode, toNodes } from './lang';
 
 export function ready(fn) {
     if (document.readyState !== 'loading') {
@@ -59,7 +59,7 @@ export function wrapInner(element, structure) {
     return toNodes(
         toNodes(element).map((element) =>
             element.hasChildNodes()
-                ? wrapAll(toNodes(element.childNodes), structure)
+                ? wrapAll(toArray(element.childNodes), structure)
                 : append(element, structure)
         )
     );

package/src/js/util/filter.js

@@ -1,4 +1,4 @@
-import { isElement, isString, startsWith, toNode, toNodes } from './lang';
+import { isElement, isString, startsWith, toArray, toNode, toNodes } from './lang';
 
 const voidElements = {
     area: true,
@@ -77,7 +77,7 @@ export function parents(element, selector) {
 
 export function children(element, selector) {
     element = toNode(element);
-    const children = element ? toNodes(element.children) : [];
+    const children = element ? toArray(element.children) : [];
     return selector ? filter(children, selector) : children;
 }
 

package/src/less/components/dropbar.less

@@ -83,7 +83,7 @@
 .uk-dropbar:extend(.uk-light all) when (@dropbar-color-mode = light) {}
 .uk-dropbar:extend(.uk-dark all) when (@dropbar-color-mode = dark) {}
 
-.uk-dropbar :focus-visible {
+.uk-dropbar :focus-visible when (@dropbar-color-mode = dark) {
     outline-color: @dropbar-focus-outline !important;
 }
 

package/src/less/components/dropdown.less

@@ -80,7 +80,7 @@
 .uk-dropdown:extend(.uk-light all) when (@dropdown-color-mode = light) {}
 .uk-dropdown:extend(.uk-dark all) when (@dropdown-color-mode = dark) {}
 
-.uk-dropdown :focus-visible {
+.uk-dropdown :focus-visible when (@dropdown-color-mode = dark) {
     outline-color: @dropdown-focus-outline !important;
 }
 

package/src/less/components/lightbox.less

@@ -95,7 +95,6 @@
  * Focus
  */
 
-.uk-lightbox :focus { outline-color: @lightbox-focus-outline; }
 .uk-lightbox :focus-visible { outline-color: @lightbox-focus-outline; }
 
 

package/src/less/components/navbar.less

@@ -402,7 +402,7 @@
 .uk-navbar-dropdown:extend(.uk-light all) when (@navbar-dropdown-color-mode = light) {}
 .uk-navbar-dropdown:extend(.uk-dark all) when (@navbar-dropdown-color-mode = dark) {}
 
-.uk-navbar-dropdown :focus-visible {
+.uk-navbar-dropdown :focus-visible when (@navbar-dropdown-color-mode = dark) {
     outline-color: @navbar-dropdown-focus-outline !important;
 }
 

package/src/less/components/visibility.less

@@ -135,9 +135,11 @@
 /*
  * Keep space when hidden.
  * Hide element without shrinking its dimension.
+ * Unfortunately, can't use `clip-path: inset(50%)` because hover won't work
+ * if the element is positioned outside of the toggle box.
  */
 
-.uk-visible-toggle:not(:hover):not(:focus) .uk-invisible-hover:not(:focus-within) { clip-path: inset(50%) !important; }
+.uk-visible-toggle:not(:hover):not(:focus) .uk-invisible-hover:not(:focus-within) { opacity: 0 !important; }
 
 
 /* Based on Hover Capability of the Pointing Device

package/src/scss/components/dropbar.scss

@@ -83,7 +83,7 @@ $dropbar-large-padding-bottom:                   $dropbar-large-padding-top !def
 @if ( $dropbar-color-mode == light ) { .uk-dropbar { @extend .uk-light !optional;} }
 @if ( $dropbar-color-mode == dark ) { .uk-dropbar { @extend .uk-dark !optional;} }
 
-.uk-dropbar :focus-visible {
+.uk-dropbar :focus-visible when ($dropbar-color-mode = dark) {
     outline-color: $dropbar-focus-outline !important;
 }
 

package/src/scss/components/dropdown.scss

@@ -80,7 +80,7 @@ $dropdown-nav-sublist-item-hover-color:          $global-color !default;
 @if ( $dropdown-color-mode == light ) { .uk-dropdown { @extend .uk-light !optional;} }
 @if ( $dropdown-color-mode == dark ) { .uk-dropdown { @extend .uk-dark !optional;} }
 
-.uk-dropdown :focus-visible {
+.uk-dropdown :focus-visible when ($dropdown-color-mode = dark) {
     outline-color: $dropdown-focus-outline !important;
 }
 

package/src/scss/components/lightbox.scss

@@ -95,7 +95,6 @@ $lightbox-button-hover-color:                    #fff !default;
  * Focus
  */
 
-.uk-lightbox :focus { outline-color: $lightbox-focus-outline; }
 .uk-lightbox :focus-visible { outline-color: $lightbox-focus-outline; }
 
 

package/src/scss/components/navbar.scss

@@ -402,7 +402,7 @@ $navbar-dropdown-nav-sublist-item-active-color:  $global-emphasis-color !default
 @if ( $navbar-dropdown-color-mode == light ) { .uk-navbar-dropdown { @extend .uk-light !optional;} }
 @if ( $navbar-dropdown-color-mode == dark ) { .uk-navbar-dropdown { @extend .uk-dark !optional;} }
 
-.uk-navbar-dropdown :focus-visible {
+.uk-navbar-dropdown :focus-visible when ($navbar-dropdown-color-mode = dark) {
     outline-color: $navbar-dropdown-focus-outline !important;
 }
 

package/src/scss/components/visibility.scss

@@ -135,9 +135,11 @@
 /*
  * Keep space when hidden.
  * Hide element without shrinking its dimension.
+ * Unfortunately, can't use `clip-path: inset(50%)` because hover won't work
+ * if the element is positioned outside of the toggle box.
  */
 
-.uk-visible-toggle:not(:hover):not(:focus) .uk-invisible-hover:not(:focus-within) { clip-path: inset(50%) !important; }
+.uk-visible-toggle:not(:hover):not(:focus) .uk-invisible-hover:not(:focus-within) { opacity: 0 !important; }
 
 
 /* Based on Hover Capability of the Pointing Device