uikit 3.23.7 → 3.23.8-dev.65e3f4fda

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

package/src/js/core/drop.js

@@ -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']);
     },
@@ -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/mixin/modal.js

@@ -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();
                 }
@@ -189,6 +190,11 @@ export default {
                 if (!active.some((modal) => modal.clsPage === this.clsPage)) {
                     removeClass(document.documentElement, this.clsPage);
                 }
+
+                if (isFocusable(this.target)) {
+                    this.target.focus();
+                }
+                this.target = null;
             },
         },
     ],

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(){}

package/src/scss/components/breadcrumb.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 // Name:            Breadcrumb
 // Description:     Component to create a breadcrumb navigation
 //
@@ -29,7 +31,7 @@
     list-style: none;
     /* 2 */
     font-size: 0;
-    @if(mixin-exists(hook-breadcrumb)) {@include hook-breadcrumb();}
+    @if(meta.mixin-exists(hook-breadcrumb)) {@include hook-breadcrumb();}
 }
 
 /*
@@ -45,26 +47,26 @@
 .uk-breadcrumb > * > * {
     font-size: $breadcrumb-item-font-size;
     color: $breadcrumb-item-color;
-    @if(mixin-exists(hook-breadcrumb-item)) {@include hook-breadcrumb-item();}
+    @if(meta.mixin-exists(hook-breadcrumb-item)) {@include hook-breadcrumb-item();}
 }
 
 /* Hover */
 .uk-breadcrumb > * > :hover {
     color: $breadcrumb-item-hover-color;
     text-decoration: $breadcrumb-item-hover-text-decoration;
-    @if(mixin-exists(hook-breadcrumb-item-hover)) {@include hook-breadcrumb-item-hover();}
+    @if(meta.mixin-exists(hook-breadcrumb-item-hover)) {@include hook-breadcrumb-item-hover();}
 }
 
 /* Disabled */
 .uk-breadcrumb > .uk-disabled > * {
-    @if(mixin-exists(hook-breadcrumb-item-disabled)) {@include hook-breadcrumb-item-disabled();}
+    @if(meta.mixin-exists(hook-breadcrumb-item-disabled)) {@include hook-breadcrumb-item-disabled();}
 }
 
 /* Active */
 .uk-breadcrumb > :last-child > span,
 .uk-breadcrumb > :last-child > a:not([href]) {
     color: $breadcrumb-item-active-color;
-    @if(mixin-exists(hook-breadcrumb-item-active)) {@include hook-breadcrumb-item-active();}
+    @if(meta.mixin-exists(hook-breadcrumb-item-active)) {@include hook-breadcrumb-item-active();}
 }
 
 /*
@@ -82,14 +84,14 @@
     /* 2 */
     font-size: $breadcrumb-divider-font-size;
     color: $breadcrumb-divider-color;
-    @if(mixin-exists(hook-breadcrumb-divider)) {@include hook-breadcrumb-divider();}
+    @if(meta.mixin-exists(hook-breadcrumb-divider)) {@include hook-breadcrumb-divider();}
 }
 
 
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-breadcrumb-misc)) {@include hook-breadcrumb-misc();}
+@if(meta.mixin-exists(hook-breadcrumb-misc)) {@include hook-breadcrumb-misc();}
 
 // @mixin hook-breadcrumb(){}
 // @mixin hook-breadcrumb-item(){}