uikit 3.23.7-dev.1d206253d → 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.7-dev.1d206253d",
+  "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/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();