uikit 3.23.6 → 3.23.7-dev.ea33b1a06

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.23.6",
+  "version": "3.23.7-dev.ea33b1a06",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/components/countdown.js

@@ -1,4 +1,4 @@
-import { $, attr, html, toFloat, trigger } from 'uikit-util';
+import { $, html, toFloat, trigger } from 'uikit-util';
 import Class from '../mixin/class';
 
 const units = ['days', 'hours', 'minutes', 'seconds'];
@@ -21,7 +21,7 @@ export default {
     },
 
     connected() {
-        attr(this.$el, 'role', this.role);
+        this.$el.role = this.role;
         this.date = toFloat(Date.parse(this.$props.date));
         this.started = this.end = false;
         this.start();

package/src/js/components/filter.js

@@ -2,7 +2,6 @@ import {
     $,
     $$,
     append,
-    attr,
     css,
     data,
     fastdom,
@@ -57,7 +56,7 @@ export default {
                 }
                 const button = findButton(toggle);
                 if (isTag(button, 'a')) {
-                    attr(button, 'role', 'button');
+                    button.role = 'button';
                 }
             }
         },

package/src/js/components/lightbox.js

@@ -2,7 +2,6 @@ import {
     $,
     $$,
     assign,
-    attr,
     findIndex,
     isElement,
     isTag,
@@ -32,7 +31,7 @@ export default {
             this.hide();
             for (const toggle of toggles) {
                 if (isTag(toggle, 'a')) {
-                    attr(toggle, 'role', 'button');
+                    toggle.role = 'button';
                 }
             }
         },

package/src/js/components/slider.js

@@ -2,7 +2,6 @@ import {
     $,
     $$,
     addClass,
-    attr,
     children,
     css,
     data,
@@ -255,12 +254,12 @@ export default {
             for (const slide of this.slides) {
                 const active = includes(actives, slide);
                 toggleClass(slide, activeClasses, active);
-                attr(slide, 'aria-hidden', !active);
+                slide.ariaHidden = !active;
                 for (const focusable of $$(selFocusable, slide)) {
                     if (!hasOwn(focusable, '_tabindex')) {
-                        focusable._tabindex = attr(focusable, 'tabindex');
+                        focusable._tabindex = focusable.tabIndex;
                     }
-                    attr(focusable, 'tabindex', active ? focusable._tabindex : -1);
+                    focusable.tabIndex = active ? focusable._tabindex : -1;
                 }
             }
         },

package/src/js/components/tooltip.js

@@ -145,7 +145,7 @@ export default {
 
 function makeFocusable(el) {
     if (!isFocusable(el)) {
-        attr(el, 'tabindex', '0');
+        el.tabIndex = 0;
     }
 }
 

package/src/js/core/icon.js

@@ -136,13 +136,11 @@ export const Search = {
         }
 
         if (isToggle) {
-            const label = this.t('toggle');
-            attr(this.$el, 'aria-label', label);
+            this.$el.ariaLabel = this.t('toggle');
         } else {
             const button = this.$el.closest('a,button');
             if (button) {
-                const label = this.t('submit');
-                attr(button, 'aria-label', label);
+                button.ariaLabel = this.t('submit');
             }
         }
     },
@@ -152,7 +150,7 @@ export const Spinner = {
     extends: IconComponent,
 
     beforeConnect() {
-        attr(this.$el, 'role', 'status');
+        this.$el.role = 'status';
     },
 
     methods: {

package/src/js/core/img.js

@@ -112,7 +112,7 @@ function getImageFromElement(el, src, sources) {
     wrapInPicture(img, sources);
     setSourceProps(el, img);
     img.onload = () => setSrcAttrs(el, img.currentSrc);
-    attr(img, 'src', src);
+    img.src = src;
     return img;
 }
 

package/src/js/core/inverse.js

@@ -23,14 +23,31 @@ export default {
         selActive: false,
     },
 
+    connected() {
+        this.isIntersecting = 0;
+    },
+
     computed: {
         target: ({ target }, $el) => (target ? $$(target, $el) : $el),
     },
 
+    watch: {
+        target: {
+            handler() {
+                queueMicrotask(() => this.$reset());
+            },
+            immediate: false,
+        },
+    },
+
     observe: [
         intersection({
             handler(entries) {
-                this.isIntersecting = entries.some(({ isIntersecting }) => isIntersecting);
+                this.isIntersecting = entries.reduce(
+                    (sum, { isIntersecting }) =>
+                        sum + (isIntersecting ? 1 : this.isIntersecting ? -1 : 0),
+                    this.isIntersecting,
+                );
                 this.$emit();
             },
             target: ({ target }) => target,
@@ -38,7 +55,7 @@ export default {
         }),
         mutation({
             target: ({ target }) => target,
-            options: { attributes: true, attributeFilter: ['class'], attributeOldValue: true },
+            options: { attributes: true, attributeFilter: ['class'] },
         }),
         {
             target: ({ target }) => target,

package/src/js/core/switcher.js

@@ -93,7 +93,7 @@ export default {
     },
 
     connected() {
-        attr(this.$el, 'role', 'tablist');
+        this.$el.role = 'tablist';
     },
 
     observe: [
@@ -184,7 +184,7 @@ export default {
     update() {
         for (const el of this.connects) {
             if (isTag(el, 'ul')) {
-                attr(el, 'role', 'presentation');
+                el.role = 'presentation';
             }
         }
         attr(children(this.$el), 'role', 'presentation');
@@ -193,7 +193,7 @@ export default {
             const toggle = this.toggles[index];
             const item = this.connects[0]?.children[index];
 
-            attr(toggle, 'role', 'tab');
+            toggle.role = 'tab';
 
             if (!item) {
                 continue;
@@ -202,7 +202,7 @@ export default {
             toggle.id = generateId(this, toggle);
             item.id = generateId(this, item);
 
-            attr(toggle, 'aria-controls', item.id);
+            toggle.ariaControls = item.id;
             attr(item, { role: 'tabpanel', 'aria-labelledby': toggle.id });
         }
         attr(this.$el, 'aria-orientation', matches(this.$el, this.selVertical) ? 'vertical' : null);

package/src/js/core/toggle.js

@@ -1,5 +1,4 @@
 import {
-    attr,
     hasAttr,
     hasClass,
     includes,
@@ -54,10 +53,10 @@ export default {
     connected() {
         if (!includes(this.mode, 'media')) {
             if (!isFocusable(this.$el)) {
-                attr(this.$el, 'tabindex', '0');
+                this.$el.tabIndex = 0;
             }
             if (!this.cls && isTag(this.$el, 'a')) {
-                attr(this.$el, 'role', 'button');
+                this.$el.role = 'button';
             }
         }
     },
@@ -193,7 +192,7 @@ export default {
             }
 
             if (hasAttr(this.$el, 'aria-expanded')) {
-                attr(this.$el, 'aria-expanded', !this.isToggled(this.target));
+                this.$el.ariaExpanded = !this.isToggled(this.target);
             }
 
             if (!this.queued) {

package/src/js/core/video.js

@@ -36,7 +36,7 @@ export default {
 
         if (this.autoplay === 'hover') {
             if (isTag(this.$el, 'video')) {
-                this.$el.tabindex = 0;
+                this.$el.tabIndex = 0;
             } else {
                 this.autoplay = true;
             }

package/src/js/mixin/modal.js

@@ -2,7 +2,6 @@ import {
     $,
     addClass,
     append,
-    attr,
     css,
     endsWith,
     includes,
@@ -57,10 +56,11 @@ export default {
     },
 
     connected() {
-        attr(this.panel || this.$el, 'role', this.role);
+        const el = this.panel || this.$el;
+        el.role = this.role;
 
         if (this.overlay) {
-            attr(this.panel || this.$el, 'aria-modal', true);
+            el.ariaModal = true;
         }
     },
 
@@ -165,7 +165,7 @@ export default {
 
             handler() {
                 if (!isFocusable(this.$el)) {
-                    attr(this.$el, 'tabindex', '-1');
+                    this.$el.tabIndex = -1;
                 }
 
                 if (!matches(this.$el, ':focus-within')) {

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

@@ -88,7 +88,7 @@ export default {
 
                     ariaLabel = this.t('slideX', toFloat(cmd) + 1);
 
-                    attr(button, 'role', 'tab');
+                    button.role = 'tab';
                 } else {
                     if (this.list) {
                         if (!this.list.id) {
@@ -101,10 +101,8 @@ export default {
                     ariaLabel = this.t(cmd);
                 }
 
-                attr(button, {
-                    'aria-controls': ariaControls,
-                    'aria-label': attr(button, 'aria-label') || ariaLabel,
-                });
+                button.ariaControls = ariaControls;
+                button.ariaLabel = button.ariaLabel || ariaLabel;
             }
         },
 
@@ -122,10 +120,8 @@ export default {
     },
 
     connected() {
-        attr(this.$el, {
-            role: this.role,
-            'aria-roledescription': 'carousel',
-        });
+        this.$el.role = this.role;
+        this.$el.ariaRoleDescription = 'carousel';
     },
 
     update: [
@@ -214,10 +210,8 @@ export default {
                     toggleClass(el, this.clsActive, active);
                     toggleClass(button, 'uk-disabled', !!this.parallax);
 
-                    attr(button, {
-                        'aria-selected': active,
-                        tabindex: active && !this.parallax ? null : -1,
-                    });
+                    button.ariaSelected = active;
+                    button.tabIndex = active && !this.parallax ? null : -1;
 
                     if (active && button && matches(parent(el), ':focus-within')) {
                         button.focus();

package/src/js/util/style.js

@@ -40,7 +40,7 @@ export function css(element, property, value, priority) {
             } else {
                 element.style.setProperty(
                     property,
-                    isNumeric(value) && !cssNumber[property]
+                    isNumeric(value) && !cssNumber[property] && !isCustomProperty(property)
                         ? `${value}px`
                         : value || isNumber(value)
                           ? value
@@ -71,7 +71,7 @@ export function resetProps(element, props) {
 
 // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-setproperty
 export const propName = memoize((name) => {
-    if (startsWith(name, '--')) {
+    if (isCustomProperty(name)) {
         return name;
     }
 
@@ -90,3 +90,7 @@ export const propName = memoize((name) => {
         }
     }
 });
+
+function isCustomProperty(name) {
+    return startsWith(name, '--');
+}

package/src/scss/components/_import.components.scss

@@ -1,56 +0,0 @@
-// Base
-@import "variables.scss";
-@import "mixin.scss";
-@import "base.scss";
-
-// Elements
-@import "link.scss";
-@import "heading.scss";
-@import "divider.scss";
-@import "list.scss";
-@import "description-list.scss";
-@import "table.scss";
-@import "icon.scss";
-@import "form.scss"; // After: Icon
-@import "button.scss";
-
-// Layout
-@import "section.scss";
-@import "container.scss";
-@import "grid.scss";
-@import "tile.scss";
-@import "card.scss";
-
-// Common
-@import "close.scss"; // After: Icon
-@import "spinner.scss"; // After: Icon
-@import "totop.scss"; // After: Icon
-@import "alert.scss"; // After: Close
-@import "badge.scss";
-@import "label.scss";
-@import "overlay.scss"; // After: Icon
-@import "article.scss"; // After: Subnav
-@import "comment.scss"; // After: Subnav
-@import "search.scss"; // After: Icon
-
-// Navs
-@import "nav.scss";
-@import "navbar.scss"; // After: Card, Grid, Nav, Icon, Search
-@import "subnav.scss";
-@import "breadcrumb.scss";
-@import "pagination.scss";
-@import "tab.scss";
-@import "slidenav.scss"; // After: Icon
-@import "dotnav.scss";
-
-// JavaScript
-@import "accordion.scss";
-@import "drop.scss"; // After: Card
-@import "dropdown.scss"; // After: Card
-@import "modal.scss"; // After: Close
-@import "sticky.scss";
-@import "offcanvas.scss";
-@import "switcher.scss";
-// Scrollspy
-// Toggle
-// Scroll

package/src/scss/components/_import.utilities.scss

@@ -1,19 +0,0 @@
-// Utilities
-@import "animation.scss";
-@import "width.scss";
-@import "text.scss";
-@import "column.scss";
-@import "cover.scss";
-@import "background.scss";
-@import "align.scss";
-@import "utility.scss";
-@import "flex.scss"; // After: Utility
-@import "margin.scss";
-@import "padding.scss";
-@import "position.scss";
-@import "transition.scss";
-@import "visibility.scss";
-@import "inverse.scss";
-
-// Need to be loaded last
-@import "print.scss";

package/src/scss/components/grid-masonry.scss

@@ -1,69 +0,0 @@
-// Name:            Grid
-// Description:     Component to create two dimensional grids
-//
-// Component:       `uk-grid2`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-$grid-column-xsmall:                             100px !default;
-$grid-column-small:                              200px !default;
-$grid-column-medium:                             300px !default;
-$grid-column-large:                              400px !default;
-$grid-column-xlarge:                             500px !default;
-$grid-column-xxlarge:                            600px !default;
-
-$grid-gap-small:                                 $global-small-gutter !default;
-$grid-gap-medium:                                $global-gutter !default;
-$grid-gap-large:                                 $global-large-gutter !default;
-
-
-/* ========================================================================
-   Component: Grid
- ========================================================================== */
-
-.uk-grid-masonry { display: grid; }
-.uk-grid-inline { display: inline-grid; }
-
-
-/* Columns Width
- ========================================================================== */
-
-.uk-grid-column-xsmall { grid-template-columns: repeat(auto-fill, minmax($grid-column-xsmall,1fr)); }
-.uk-grid-column-small { grid-template-columns: repeat(auto-fill, minmax($grid-column-small,1fr)); }
-.uk-grid-column-medium { grid-template-columns: repeat(auto-fill, minmax($grid-column-medium,1fr)); }
-.uk-grid-column-large { grid-template-columns: repeat(auto-fill, minmax($grid-column-large,1fr)); }
-.uk-grid-column-xlarge { grid-template-columns: repeat(auto-fill, minmax($grid-column-xlarge,1fr)); }
-.uk-grid-column-xxlarge { grid-template-columns: repeat(auto-fill, minmax($grid-column-xxlarge,1fr)); }
-
-
-/* Gap
- ========================================================================== */
-
-.uk-grid-gap-none { grid-gap: 0; }
-.uk-grid-gap-small { grid-gap: $grid-gap-small; }
-.uk-grid-gap-medium { grid-gap: $grid-gap-medium; }
-.uk-grid-gap-large { grid-gap: $grid-gap-large; }
-
-
-/* Auto Placement
- ========================================================================== */
-
-// Default
-.uk-grid-auto-flow-row { grid-auto-flow: row; }
-.uk-grid-auto-flow-column { grid-auto-flow: column; }
-.uk-grid-auto-flow-dense { grid-auto-flow: dense; }
-
-
-/* Item Span
- ========================================================================== */
-
-// TODO Fix implicit tracks if span is too large
-.uk-grid-item-span-2 { grid-column-start: span 2; }
-.uk-grid-item-span-3 { grid-column-start: span 3; }
-.uk-grid-item-span-4 { grid-column-start: span 4; }
-.uk-grid-item-span-5 { grid-column-start: span 5; }
-