uikit 3.23.7-dev.ea33b1a06 → 3.23.8-dev.13605ee50

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

package/src/js/components/filter.js

@@ -18,7 +18,7 @@ import {
 } from 'uikit-util';
 import { parseOptions } from '../api/options';
 import Animate from '../mixin/animate';
-import { maybeDefautPreventClick } from '../mixin/event';
+import { maybeDefaultPreventClick } from '../mixin/event';
 import { keyMap } from '../util/keys';
 
 export default {
@@ -79,7 +79,7 @@ export default {
             }
 
             if (e.target.closest('a,button')) {
-                maybeDefautPreventClick(e);
+                maybeDefaultPreventClick(e);
                 this.apply(e.current);
             }
         },

package/src/js/components/lightbox-panel.js

@@ -208,7 +208,7 @@ export default {
             el: () => document,
 
             handler({ keyCode }) {
-                if (!this.isToggled(this.$el) || !this.draggable) {
+                if (!this.isToggled() || !this.draggable) {
                     return;
                 }
 

package/src/js/components/notification.js

@@ -12,7 +12,7 @@ import {
     trigger,
 } from 'uikit-util';
 import Container from '../mixin/container';
-import { maybeDefautPreventClick } from '../mixin/event';
+import { maybeDefaultPreventClick } from '../mixin/event';
 
 export default {
     mixins: [Container],
@@ -79,7 +79,7 @@ export default {
 
     events: {
         click(e) {
-            maybeDefautPreventClick(e);
+            maybeDefaultPreventClick(e);
             this.close();
         },
 

package/src/js/core/accordion.js

@@ -22,7 +22,7 @@ import {
 import { generateId } from '../api/instance';
 import { lazyload } from '../api/observables';
 import Class from '../mixin/class';
-import { maybeDefautPreventClick } from '../mixin/event';
+import { maybeDefaultPreventClick } from '../mixin/event';
 import Togglable from '../mixin/togglable';
 import { keyMap } from '../util/keys';
 
@@ -109,7 +109,7 @@ export default {
                     return;
                 }
 
-                maybeDefautPreventClick(e);
+                maybeDefaultPreventClick(e);
 
                 this._off?.();
                 this._off = keepScrollPosition(e.target);

package/src/js/core/alert.js

@@ -1,6 +1,6 @@
 import { css, toFloat, Transition } from 'uikit-util';
 import Class from '../mixin/class';
-import { maybeDefautPreventClick } from '../mixin/event';
+import { maybeDefaultPreventClick } from '../mixin/event';
 import Togglable from '../mixin/togglable';
 
 export default {
@@ -25,7 +25,7 @@ export default {
         delegate: ({ selClose }) => selClose,
 
         handler(e) {
-            maybeDefautPreventClick(e);
+            maybeDefaultPreventClick(e);
             this.close();
         },
     },

package/src/js/core/drop.js

@@ -29,7 +29,7 @@ import {
     removeClass,
 } from 'uikit-util';
 import Container from '../mixin/container';
-import { maybeDefautPreventClick } from '../mixin/event';
+import { maybeDefaultPreventClick } from '../mixin/event';
 import Position, { storeScrollPosition } from '../mixin/position';
 import Togglable from '../mixin/togglable';
 import { keyMap } from '../util/keys';
@@ -117,6 +117,7 @@ export default {
         if (this.toggle && !this.targetEl) {
             this.targetEl = createToggleComponent(this);
         }
+        attr(this.targetEl, 'aria-expanded', false);
 
         this._style = pick(this.$el.style, ['width', 'height']);
     },
@@ -136,7 +137,7 @@ export default {
             delegate: ({ selClose }) => selClose,
 
             handler(e) {
-                maybeDefautPreventClick(e);
+                maybeDefaultPreventClick(e);
                 this.hide(false);
             },
         },
@@ -297,7 +298,7 @@ export default {
 
                 active = this.isActive() ? null : active;
                 this.tracker.cancel();
-                attr(this.targetEl, 'aria-expanded', null);
+                attr(this.targetEl, 'aria-expanded', false);
             },
         },
     ],
@@ -460,7 +461,7 @@ function createToggleComponent(drop) {
         target: drop.$el,
         mode: drop.mode,
     });
-    attr($el, 'aria-haspopup', true);
+    $el.ariaHasPopup = true;
 
     return $el;
 }

package/src/js/core/switcher.js

@@ -18,7 +18,7 @@ import {
 } from 'uikit-util';
 import { generateId } from '../api/instance';
 import { lazyload, swipe } from '../api/observables';
-import { maybeDefautPreventClick } from '../mixin/event';
+import { maybeDefaultPreventClick } from '../mixin/event';
 import Togglable from '../mixin/togglable';
 import { keyMap } from '../util/keys';
 
@@ -112,7 +112,7 @@ export default {
                     !matches(e.current, selDisabled) &&
                     (e.type === 'click' || e.keyCode === keyMap.SPACE)
                 ) {
-                    maybeDefautPreventClick(e);
+                    maybeDefaultPreventClick(e);
                     this.show(e.current);
                 }
             },
@@ -162,7 +162,7 @@ export default {
 
             handler(e) {
                 if (e.target.closest('a,button')) {
-                    maybeDefautPreventClick(e);
+                    maybeDefaultPreventClick(e);
                     this.show(data(e.current, this.attrItem));
                 }
             },

package/src/js/mixin/event.js

@@ -1,4 +1,4 @@
-export function maybeDefautPreventClick(e) {
+export function maybeDefaultPreventClick(e) {
     if (e.target.closest('a[href="#"],a[href=""]')) {
         e.preventDefault();
     }

package/src/js/mixin/modal.js

@@ -21,7 +21,7 @@ import {
 import { preventBackgroundScroll } from '../util/scroll';
 import Class from './class';
 import Container from './container';
-import { maybeDefautPreventClick } from './event';
+import { maybeDefaultPreventClick } from './event';
 import Togglable from './togglable';
 
 const active = [];
@@ -87,7 +87,7 @@ export default {
                 ) {
                     this.hide();
                 } else if (matches(current, this.selClose)) {
-                    maybeDefautPreventClick(e);
+                    maybeDefaultPreventClick(e);
                     this.hide();
                 }
             },
@@ -98,13 +98,14 @@ export default {
 
             self: true,
 
-            handler(e) {
+            handler(e, toggle) {
                 if (e.defaultPrevented) {
                     return;
                 }
 
                 e.preventDefault();
 
+                this.target = toggle?.$el;
                 if (this.isToggled() === includes(active, this)) {
                     this.toggle();
                 }
@@ -155,6 +156,8 @@ export default {
                 );
 
                 addClass(document.documentElement, this.clsPage);
+
+                setAriaExpanded(this.target, true);
             },
         },
 
@@ -189,6 +192,14 @@ export default {
                 if (!active.some((modal) => modal.clsPage === this.clsPage)) {
                     removeClass(document.documentElement, this.clsPage);
                 }
+
+                if (isFocusable(this.target)) {
+                    this.target.focus();
+                }
+
+                setAriaExpanded(this.target, false);
+
+                this.target = null;
             },
         },
     ],
@@ -289,3 +300,9 @@ function listenForEscClose(modal) {
         }
     });
 }
+
+function setAriaExpanded(el, toggled) {
+    if (el?.ariaExpanded) {
+        el.ariaExpanded = toggled;
+    }
+}

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

@@ -16,7 +16,7 @@ import {
 } from 'uikit-util';
 import { generateId } from '../api/instance';
 import { keyMap } from '../util/keys';
-import { maybeDefautPreventClick } from './event';
+import { maybeDefaultPreventClick } from './event';
 
 export default {
     i18n: {
@@ -148,7 +148,7 @@ export default {
                     e.target.closest('a,button') &&
                     (e.type === 'click' || e.keyCode === keyMap.SPACE)
                 ) {
-                    maybeDefautPreventClick(e);
+                    maybeDefaultPreventClick(e);
                     this.show(data(e.current, this.attrItem));
                 }
             },

package/src/js/mixin/svg.js

@@ -112,8 +112,6 @@ const symbolRe = /<symbol([^]*?id=(['"])(.+?)\2[^]*?<\/)symbol>/g;
 const parseSymbols = memoize(function (svg) {
     const symbols = {};
 
-    symbolRe.lastIndex = 0;
-
     let match;
     while ((match = symbolRe.exec(svg))) {
         symbols[match[3]] = `<svg ${match[1]}svg>`;

package/src/js/util/selector.js

@@ -71,7 +71,7 @@ function _query(selector, context = document, queryFn) {
 
         if (sel[0] === '!') {
             [positionSel, sel] = parsePositionSelector(sel);
-            ctx = context.parentElement.closest(positionSel);
+            ctx = context.parentElement?.closest(positionSel);
             if (!sel && isSingle) {
                 return ctx;
             }

package/src/scss/components/accordion.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 // Name:            Accordion
 // Description:     Component to create accordions
 //
@@ -25,7 +27,7 @@
 .uk-accordion {
     padding: 0;
     list-style: none;
-    @if(mixin-exists(hook-accordion)) {@include hook-accordion();}
+    @if(meta.mixin-exists(hook-accordion)) {@include hook-accordion();}
 }
 
 
@@ -33,7 +35,7 @@
  ========================================================================== */
 
 .uk-accordion > * {
-    @if(mixin-exists(hook-accordion-item)) {@include hook-accordion-item();}
+    @if(meta.mixin-exists(hook-accordion-item)) {@include hook-accordion-item();}
 }
 
 .uk-accordion > :nth-child(n+2) { margin-top: $accordion-item-margin-top; }
@@ -47,14 +49,14 @@
     font-size: $accordion-title-font-size;
     line-height: $accordion-title-line-height;
     color: $accordion-title-color;
-    @if(mixin-exists(hook-accordion-title)) {@include hook-accordion-title();}
+    @if(meta.mixin-exists(hook-accordion-title)) {@include hook-accordion-title();}
 }
 
 /* Hover */
 .uk-accordion-title:hover {
     color: $accordion-title-hover-color;
     text-decoration: none;
-    @if(mixin-exists(hook-accordion-title-hover)) {@include hook-accordion-title-hover();}
+    @if(meta.mixin-exists(hook-accordion-title-hover)) {@include hook-accordion-title-hover();}
 }
 
 
@@ -64,7 +66,7 @@
 .uk-accordion-content {
     display: flow-root;
     margin-top: $accordion-content-margin-top;
-    @if(mixin-exists(hook-accordion-content)) {@include hook-accordion-content();}
+    @if(meta.mixin-exists(hook-accordion-content)) {@include hook-accordion-content();}
 }
 
 /*
@@ -77,7 +79,7 @@
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-accordion-misc)) {@include hook-accordion-misc();}
+@if(meta.mixin-exists(hook-accordion-misc)) {@include hook-accordion-misc();}
 
 // @mixin hook-accordion(){}
 // @mixin hook-accordion-item(){}

package/src/scss/components/alert.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 // Name:            Alert
 // Description:     Component to create alert messages
 //
@@ -33,7 +35,7 @@
     padding: $alert-padding $alert-padding-right $alert-padding $alert-padding;
     background: $alert-background;
     color: $alert-color;
-    @if(mixin-exists(hook-alert)) {@include hook-alert();}
+    @if(meta.mixin-exists(hook-alert)) {@include hook-alert();}
 }
 
 /* Add margin if adjacent element */
@@ -54,7 +56,7 @@
     position: absolute;
     top: $alert-close-top;
     right: $alert-close-right;
-    @if(mixin-exists(hook-alert-close)) {@include hook-alert-close();}
+    @if(meta.mixin-exists(hook-alert-close)) {@include hook-alert-close();}
 }
 
 /*
@@ -68,7 +70,7 @@
  */
 
 .uk-alert-close:hover {
-    @if(mixin-exists(hook-alert-close-hover)) {@include hook-alert-close-hover();}
+    @if(meta.mixin-exists(hook-alert-close-hover)) {@include hook-alert-close-hover();}
 }
 
 
@@ -82,7 +84,7 @@
 .uk-alert-primary {
     background: $alert-primary-background;
     color: $alert-primary-color;
-    @if(mixin-exists(hook-alert-primary)) {@include hook-alert-primary();}
+    @if(meta.mixin-exists(hook-alert-primary)) {@include hook-alert-primary();}
 }
 
 /*
@@ -92,7 +94,7 @@
 .uk-alert-success {
     background: $alert-success-background;
     color: $alert-success-color;
-    @if(mixin-exists(hook-alert-success)) {@include hook-alert-success();}
+    @if(meta.mixin-exists(hook-alert-success)) {@include hook-alert-success();}
 }
 
 /*
@@ -102,7 +104,7 @@
 .uk-alert-warning {
     background: $alert-warning-background;
     color: $alert-warning-color;
-    @if(mixin-exists(hook-alert-warning)) {@include hook-alert-warning();}
+    @if(meta.mixin-exists(hook-alert-warning)) {@include hook-alert-warning();}
 }
 
 /*
@@ -112,14 +114,14 @@
 .uk-alert-danger {
     background: $alert-danger-background;
     color: $alert-danger-color;
-    @if(mixin-exists(hook-alert-danger)) {@include hook-alert-danger();}
+    @if(meta.mixin-exists(hook-alert-danger)) {@include hook-alert-danger();}
 }
 
 
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-alert-misc)) {@include hook-alert-misc();}
+@if(meta.mixin-exists(hook-alert-misc)) {@include hook-alert-misc();}
 
 // @mixin hook-alert(){}
 // @mixin hook-alert-close(){}

package/src/scss/components/align.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 // Name:            Align
 // Description:     Utilities to align embedded content
 //
@@ -134,6 +136,6 @@
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-align-misc)) {@include hook-align-misc();}
+@if(meta.mixin-exists(hook-align-misc)) {@include hook-align-misc();}
 
 // @mixin hook-align-misc(){}

package/src/scss/components/animation.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 // Name:            Animation
 // Description:     Utilities for keyframe animations
 //
@@ -271,6 +273,6 @@
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-animation-misc)) {@include hook-animation-misc();}
+@if(meta.mixin-exists(hook-animation-misc)) {@include hook-animation-misc();}
 
 // @mixin hook-animation-misc(){}

package/src/scss/components/article.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 // Name:            Article
 // Description:     Component to create articles
 //
@@ -22,7 +24,7 @@
 
 .uk-article {
     display: flow-root;
-    @if(mixin-exists(hook-article)) {@include hook-article();}
+    @if(meta.mixin-exists(hook-article)) {@include hook-article();}
 }
 
 /*
@@ -37,7 +39,7 @@
 
 .uk-article + .uk-article {
     margin-top: $article-margin-top;
-    @if(mixin-exists(hook-article-adjacent)) {@include hook-article-adjacent();}
+    @if(meta.mixin-exists(hook-article-adjacent)) {@include hook-article-adjacent();}
 }
 
 
@@ -47,7 +49,7 @@
 .uk-article-title {
     font-size: $article-title-font-size;
     line-height: $article-title-line-height;
-    @if(mixin-exists(hook-article-title)) {@include hook-article-title();}
+    @if(meta.mixin-exists(hook-article-title)) {@include hook-article-title();}
 }
 
 /* Tablet landscape and bigger */
@@ -65,14 +67,14 @@
     font-size: $article-meta-font-size;
     line-height: $article-meta-line-height;
     color: $article-meta-color;
-    @if(mixin-exists(hook-article-meta)) {@include hook-article-meta();}
+    @if(meta.mixin-exists(hook-article-meta)) {@include hook-article-meta();}
 }
 
 
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-article-misc)) {@include hook-article-misc();}
+@if(meta.mixin-exists(hook-article-misc)) {@include hook-article-misc();}
 
 // @mixin hook-article(){}
 // @mixin hook-article-adjacent(){}

package/src/scss/components/background.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 // Name:            Background
 // Description:     Utilities for backgrounds
 //
@@ -131,6 +133,6 @@
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-background-misc)) {@include hook-background-misc();}
+@if(meta.mixin-exists(hook-background-misc)) {@include hook-background-misc();}
 
 // @mixin hook-background-misc(){}

package/src/scss/components/badge.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 // Name:            Badge
 // Description:     Component to create notification badges
 //
@@ -36,7 +38,7 @@
     justify-content: center;
     align-items: center;
     line-height: 0;
-    @if(mixin-exists(hook-badge)) {@include hook-badge();}
+    @if(meta.mixin-exists(hook-badge)) {@include hook-badge();}
 }
 
 /*
@@ -45,14 +47,14 @@
 
 .uk-badge:hover {
     text-decoration: none;
-    @if(mixin-exists(hook-badge-hover)) {@include hook-badge-hover();}
+    @if(meta.mixin-exists(hook-badge-hover)) {@include hook-badge-hover();}
 }
 
 
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-badge-misc)) {@include hook-badge-misc();}
+@if(meta.mixin-exists(hook-badge-misc)) {@include hook-badge-misc();}
 
 // @mixin hook-badge(){}
 // @mixin hook-badge-hover(){}

package/src/scss/components/base.scss

@@ -1,3 +1,6 @@
+@use "sass:meta";
+@use "sass:string";
+
 // Name:            Base
 // Description:     Default values for HTML elements
 //
@@ -44,7 +47,7 @@ html {
     /* 3 */
     background: $base-body-background;
     color: $base-body-color;
-    @if(mixin-exists(hook-base-body)) {@include hook-base-body();}
+    @if(meta.mixin-exists(hook-base-body)) {@include hook-base-body();}
 }
 
 /*
@@ -66,7 +69,7 @@ a,
     color: $base-link-color;
     text-decoration: $base-link-text-decoration;
     cursor: pointer;
-    @if(mixin-exists(hook-base-link)) {@include hook-base-link();}
+    @if(meta.mixin-exists(hook-base-link)) {@include hook-base-link();}
 }
 
 a:hover,
@@ -74,7 +77,7 @@ a:hover,
 .uk-link-toggle:hover .uk-link {
     color: $base-link-hover-color;
     text-decoration: $base-link-hover-text-decoration;
-    @if(mixin-exists(hook-base-link-hover)) {@include hook-base-link-hover();}
+    @if(meta.mixin-exists(hook-base-link-hover)) {@include hook-base-link-hover();}
 }
 
 
@@ -116,7 +119,7 @@ strong { font-weight: $base-strong-font-weight; }
     /* 3 */
     color: $base-code-color;
     white-space: nowrap;
-    @if(mixin-exists(hook-base-code)) {@include hook-base-code();}
+    @if(meta.mixin-exists(hook-base-code)) {@include hook-base-code();}
 }
 
 /*
@@ -272,7 +275,7 @@ h6, .uk-h6,
     font-weight: $base-heading-font-weight;
     color: $base-heading-color;
     text-transform: $base-heading-text-transform;
-    @if(mixin-exists(hook-base-heading)) {@include hook-base-heading();}
+    @if(meta.mixin-exists(hook-base-heading)) {@include hook-base-heading();}
 }
 
 /* Add margin if adjacent element */
@@ -296,37 +299,37 @@ h6, .uk-h6,
 h1, .uk-h1 {
     font-size: $base-h1-font-size;
     line-height: $base-h1-line-height;
-    @if(mixin-exists(hook-base-h1)) {@include hook-base-h1();}
+    @if(meta.mixin-exists(hook-base-h1)) {@include hook-base-h1();}
 }
 
 h2, .uk-h2 {
     font-size: $base-h2-font-size;
     line-height: $base-h2-line-height;
-    @if(mixin-exists(hook-base-h2)) {@include hook-base-h2();}
+    @if(meta.mixin-exists(hook-base-h2)) {@include hook-base-h2();}
 }
 
 h3, .uk-h3 {
     font-size: $base-h3-font-size;
     line-height: $base-h3-line-height;
-    @if(mixin-exists(hook-base-h3)) {@include hook-base-h3();}
+    @if(meta.mixin-exists(hook-base-h3)) {@include hook-base-h3();}
 }
 
 h4, .uk-h4 {
     font-size: $base-h4-font-size;
     line-height: $base-h4-line-height;
-    @if(mixin-exists(hook-base-h4)) {@include hook-base-h4();}
+    @if(meta.mixin-exists(hook-base-h4)) {@include hook-base-h4();}
 }
 
 h5, .uk-h5 {
     font-size: $base-h5-font-size;
     line-height: $base-h5-line-height;
-    @if(mixin-exists(hook-base-h5)) {@include hook-base-h5();}
+    @if(meta.mixin-exists(hook-base-h5)) {@include hook-base-h5();}
 }
 
 h6, .uk-h6 {
     font-size: $base-h6-font-size;
     line-height: $base-h6-line-height;
-    @if(mixin-exists(hook-base-h6)) {@include hook-base-h6();}
+    @if(meta.mixin-exists(hook-base-h6)) {@include hook-base-h6();}
 }
 
 /* Tablet landscape and bigger */
@@ -379,7 +382,7 @@ hr, .uk-hr {
     margin: 0 0 $base-hr-margin-vertical 0;
     border: 0;
     border-top: $base-hr-border-width solid $base-hr-border;
-    @if(mixin-exists(hook-base-hr)) {@include hook-base-hr();}
+    @if(meta.mixin-exists(hook-base-hr)) {@include hook-base-hr();}
 }
 
 /* Add margin if adjacent element */
@@ -401,7 +404,7 @@ blockquote {
     font-size: $base-blockquote-font-size;
     line-height: $base-blockquote-line-height;
     font-style: $base-blockquote-font-style;
-    @if(mixin-exists(hook-base-blockquote)) {@include hook-base-blockquote();}
+    @if(meta.mixin-exists(hook-base-blockquote)) {@include hook-base-blockquote();}
 }
 
 /* Add margin if adjacent element */
@@ -417,7 +420,7 @@ blockquote footer {
     margin-top: $base-blockquote-footer-margin-top;
     font-size: $base-blockquote-footer-font-size;
     line-height: $base-blockquote-footer-line-height;
-    @if(mixin-exists(hook-base-blockquote-footer)) {@include hook-base-blockquote-footer();}
+    @if(meta.mixin-exists(hook-base-blockquote-footer)) {@include hook-base-blockquote-footer();}
 }
 
 
@@ -429,13 +432,13 @@ blockquote footer {
  */
 
 pre {
-    font: $base-pre-font-size unquote("/") $base-pre-line-height $base-pre-font-family;
+    font: $base-pre-font-size string.unquote("/") $base-pre-line-height $base-pre-font-family;
     color: $base-pre-color;
     -moz-tab-size: 4;
     tab-size: 4;
     /* 1 */
     overflow: auto;
-    @if(mixin-exists(hook-base-pre)) {@include hook-base-pre();}
+    @if(meta.mixin-exists(hook-base-pre)) {@include hook-base-pre();}
 }
 
 pre code { font-family: $base-pre-font-family; }
@@ -502,7 +505,7 @@ template { display: none; }
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-base-misc)) {@include hook-base-misc();}
+@if(meta.mixin-exists(hook-base-misc)) {@include hook-base-misc();}
 
 // @mixin hook-base-body(){}
 // @mixin hook-base-link(){}