uikit 3.13.8-dev.128538499 → 3.13.8-dev.4c3d89803

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.13.8-dev.128538499",
+    "version": "3.13.8-dev.4c3d89803",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

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

@@ -215,7 +215,10 @@ export default {
                 };
 
                 // Image
-                if (type === 'image' || src.match(/\.(avif|jpe?g|a?png|gif|svg|webp)($|\?)/i)) {
+                if (
+                    type === 'image' ||
+                    src.match(/\.(avif|jpe?g|jfif|a?png|gif|svg|webp)($|\?)/i)
+                ) {
                     try {
                         const { width, height } = await getImage(src, attrs.srcset, attrs.size);
                         this.setItem(item, createEl('img', { src, width, height, alt, ...attrs }));

package/src/js/core/height-match.js

@@ -15,7 +15,6 @@ export default {
     data: {
         target: '> *',
         row: true,
-        forceHeight: true,
     },
 
     computed: {

package/src/js/core/navbar.js

@@ -61,8 +61,6 @@ export default {
         dropbar: false,
         dropbarAnchor: false,
         duration: 200,
-        forceHeight: true,
-        selMinHeight: navItem,
         container: false,
     },
 

package/src/js/core/scrollspy.js

@@ -13,7 +13,6 @@ import {
     trigger,
 } from 'uikit-util';
 
-const stateKey = '_ukScrollspy';
 export default {
     mixins: [Scroll],
 
@@ -61,20 +60,25 @@ export default {
     },
 
     connected() {
+        this._data.elements = new Map();
         this.registerObserver(
             observeIntersection(
                 this.elements,
                 (records) => {
+                    const elements = this._data.elements;
                     for (const { target: el, isIntersecting } of records) {
-                        if (!el[stateKey]) {
-                            el[stateKey] = { cls: getData(el, 'uk-scrollspy-class') || this.cls };
+                        if (!elements.has(el)) {
+                            elements.set(el, {
+                                cls: getData(el, 'uk-scrollspy-class') || this.cls,
+                            });
                         }
 
-                        if (!this.repeat && el[stateKey].show) {
+                        const state = elements.get(el);
+                        if (!this.repeat && state.show) {
                             continue;
                         }
 
-                        el[stateKey].show = isIntersecting;
+                        state.show = isIntersecting;
                     }
 
                     this.$emit();
@@ -90,22 +94,15 @@ export default {
     },
 
     disconnected() {
-        for (const el of this.elements) {
-            removeClass(el, this.inViewClass, el[stateKey]?.cls || '');
-            delete el[stateKey];
+        for (const [el, state] of this._data.elements.entries()) {
+            removeClass(el, this.inViewClass, state?.cls || '');
         }
     },
 
     update: [
         {
             write(data) {
-                for (const el of this.elements) {
-                    const state = el[stateKey];
-
-                    if (!state) {
-                        continue;
-                    }
-
+                for (const [el, state] of data.elements.entries()) {
                     if (state.show && !state.inview && !state.queued) {
                         state.queued = true;
 
@@ -128,7 +125,7 @@ export default {
 
     methods: {
         toggle(el, inview) {
-            const state = el[stateKey];
+            const state = this._data.elements.get(el);
 
             state.off?.();
 

package/src/js/core/toggle.js

@@ -124,7 +124,7 @@ export default {
                 }
 
                 // Skip if state does not change e.g. hover + focus received
-                if (this._showState && show === (expanded !== this._showState)) {
+                if (this._showState && show && expanded !== this._showState) {
                     // Ensure reset if state has changed through click
                     if (!show) {
                         this._showState = null;

package/src/js/uikit-core.js

@@ -1,5 +1,4 @@
 import UIkit from './api/index';
-import Core from './core/core';
 import boot from './api/boot';
 import * as components from './core/index';
 import { each } from 'uikit-util';
@@ -7,9 +6,6 @@ import { each } from 'uikit-util';
 // register components
 each(components, (component, name) => UIkit.component(name, component));
 
-// core functionality
-UIkit.use(Core);
-
 boot(UIkit);
 
 export default UIkit;

package/src/less/components/icon.less

@@ -130,10 +130,13 @@ button.uk-icon:not(:disabled) { cursor: pointer; }
 
 /*
  * Link
+ * 1. Allow text within link
  */
 
 .uk-icon-link {
     color: @icon-link-color;
+    /* 1 */
+    text-decoration: none !important;
     .hook-icon-link();
 }
 

package/src/less/components/navbar.less

@@ -317,6 +317,17 @@
 }
 
 
+/* Justify modifier
+ ========================================================================== */
+
+.uk-navbar-justify .uk-navbar-left,
+.uk-navbar-justify .uk-navbar-right,
+.uk-navbar-justify .uk-navbar-nav,
+.uk-navbar-justify .uk-navbar-nav > li,        // Nav item
+.uk-navbar-justify .uk-navbar-item,            // Content item
+.uk-navbar-justify .uk-navbar-toggle { flex-grow: 1; }
+
+
 /* Style modifiers
  ========================================================================== */
 
@@ -394,7 +405,6 @@
  * 1. Set position
  * 2. Bottom padding for dropbar
  * 3. Horizontal padding
- * 4. Reset padding if aligned to boundary
  */
 
 .uk-navbar-dropdown-dropbar {
@@ -408,12 +418,6 @@
     .hook-navbar-dropdown-dropbar();
 }
 
-/* 4 */
-.uk-navbar-dropdown-dropbar.uk-navbar-dropdown-boundary {
-    padding-left: 0;
-    padding-right: 0;
-}
-
 
 /* Dropdown Nav
  * Adopts `uk-nav`

package/src/less/components/search.less

@@ -154,6 +154,7 @@
     align-items: center;
     /* 3 */
     color: @search-icon-color;
+    .hook-search-icon();
 }
 
 /*
@@ -294,6 +295,7 @@
 .hook-search-misc();
 
 .hook-search-input() {}
+.hook-search-icon() {}
 .hook-search-default-input() {}
 .hook-search-default-input-focus() {}
 .hook-search-navbar-input() {}

package/src/less/theme/dropdown.less

@@ -10,6 +10,8 @@
 @dropdown-padding:                              25px;
 @dropdown-background:                           @global-background;
 
+@dropdown-nav-subtitle-font-size:               12px;
+
 //
 // New
 //

package/src/less/theme/nav.less

@@ -7,6 +7,8 @@
 // Variables
 // ========================================================================
 
+@nav-default-subtitle-font-size:                12px;
+
 //
 // New
 //

package/src/less/theme/navbar.less

@@ -14,6 +14,8 @@
 @navbar-dropdown-background:                    @global-background;
 @navbar-dropdown-grid-gutter-horizontal:        (@navbar-dropdown-padding * 2);
 
+@navbar-dropdown-nav-subtitle-font-size:        12px;
+
 //
 // New
 //

package/src/less/theme/search.less

@@ -25,6 +25,12 @@
 .hook-search-input() {}
 
 
+// Icon
+// ========================================================================
+
+.hook-search-icon() {}
+
+
 // Default modifiers
 // ========================================================================
 

package/src/scss/components/icon.scss

@@ -130,10 +130,13 @@ button.uk-icon:not(:disabled) { cursor: pointer; }
 
 /*
  * Link
+ * 1. Allow text within link
  */
 
 .uk-icon-link {
     color: $icon-link-color;
+    /* 1 */
+    text-decoration: none !important;
     @if(mixin-exists(hook-icon-link)) {@include hook-icon-link();}
 }
 

package/src/scss/components/navbar.scss

@@ -317,6 +317,17 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
 }
 
 
+/* Justify modifier
+ ========================================================================== */
+
+.uk-navbar-justify .uk-navbar-left,
+.uk-navbar-justify .uk-navbar-right,
+.uk-navbar-justify .uk-navbar-nav,
+.uk-navbar-justify .uk-navbar-nav > li,        // Nav item
+.uk-navbar-justify .uk-navbar-item,            // Content item
+.uk-navbar-justify .uk-navbar-toggle { flex-grow: 1; }
+
+
 /* Style modifiers
  ========================================================================== */
 
@@ -394,7 +405,6 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
  * 1. Set position
  * 2. Bottom padding for dropbar
  * 3. Horizontal padding
- * 4. Reset padding if aligned to boundary
  */
 
 .uk-navbar-dropdown-dropbar {
@@ -408,12 +418,6 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
     @if(mixin-exists(hook-navbar-dropdown-dropbar)) {@include hook-navbar-dropdown-dropbar();}
 }
 
-/* 4 */
-.uk-navbar-dropdown-dropbar.uk-navbar-dropdown-boundary {
-    padding-left: 0;
-    padding-right: 0;
-}
-
 
 /* Dropdown Nav
  * Adopts `uk-nav`

package/src/scss/components/search.scss

@@ -154,6 +154,7 @@ $search-toggle-hover-color:                          $global-color !default;
     align-items: center;
     /* 3 */
     color: $search-icon-color;
+    @if(mixin-exists(hook-search-icon)) {@include hook-search-icon();}
 }
 
 /*
@@ -294,6 +295,7 @@ $search-toggle-hover-color:                          $global-color !default;
 @if(mixin-exists(hook-search-misc)) {@include hook-search-misc();}
 
 // @mixin hook-search-input(){}
+// @mixin hook-search-icon(){}
 // @mixin hook-search-default-input(){}
 // @mixin hook-search-default-input-focus(){}
 // @mixin hook-search-navbar-input(){}

package/src/scss/mixins-theme.scss

@@ -1843,6 +1843,7 @@
 @mixin hook-progress-bar(){}
 @mixin hook-progress-misc(){}
 @mixin hook-search-input(){}
+@mixin hook-search-icon(){}
 @mixin hook-search-default-input(){ border: $search-default-border-width solid $search-default-border; }
 @mixin hook-search-default-input-focus(){ border-color: $search-default-focus-border; }
 @mixin hook-search-navbar-input(){}

package/src/scss/mixins.scss

@@ -1529,6 +1529,7 @@
 @mixin hook-progress-bar(){}
 @mixin hook-progress-misc(){}
 @mixin hook-search-input(){}
+@mixin hook-search-icon(){}
 @mixin hook-search-default-input(){}
 @mixin hook-search-default-input-focus(){}
 @mixin hook-search-navbar-input(){}

package/src/scss/theme/dropdown.scss

@@ -10,6 +10,8 @@
 $dropdown-padding:                               25px !default;
 $dropdown-background:                            $global-background !default;
 
+$dropdown-nav-subtitle-font-size:                12px !default;
+
 //
 // New
 //

package/src/scss/theme/nav.scss

@@ -7,6 +7,8 @@
 // Variables
 // ========================================================================
 
+$nav-default-subtitle-font-size:                 12px !default;
+
 //
 // New
 //

package/src/scss/theme/navbar.scss

@@ -14,6 +14,8 @@ $navbar-dropdown-padding:                        25px !default;
 $navbar-dropdown-background:                     $global-background !default;
 $navbar-dropdown-grid-gutter-horizontal:         ($navbar-dropdown-padding * 2) !default;
 
+$navbar-dropdown-nav-subtitle-font-size:         12px !default;
+
 //
 // New
 //

package/src/scss/theme/search.scss

@@ -25,6 +25,12 @@ $search-default-focus-border:                        $global-primary-background
 // @mixin hook-search-input(){}
 
 
+// Icon
+// ========================================================================
+
+// @mixin hook-search-icon(){}
+
+
 // Default modifiers
 // ========================================================================
 

package/src/scss/variables-theme.scss

@@ -376,7 +376,7 @@ $dropdown-background: $global-background !default;
 $dropdown-color: $global-color !default;
 $dropdown-nav-item-color: $global-muted-color !default;
 $dropdown-nav-item-hover-color: $global-color !default;
-$dropdown-nav-subtitle-font-size: $global-small-font-size !default;
+$dropdown-nav-subtitle-font-size: 12px !default;
 $dropdown-nav-header-color: $global-emphasis-color !default;
 $dropdown-nav-divider-border-width: $global-border-width !default;
 $dropdown-nav-divider-border: $global-border !default;
@@ -685,7 +685,7 @@ $nav-divider-margin-horizontal: 0 !default;
 $nav-default-item-color: $global-muted-color !default;
 $nav-default-item-hover-color: $global-color !default;
 $nav-default-item-active-color: $global-emphasis-color !default;
-$nav-default-subtitle-font-size: $global-small-font-size !default;
+$nav-default-subtitle-font-size: 12px !default;
 $nav-default-header-color: $global-emphasis-color !default;
 $nav-default-divider-border-width: $global-border-width !default;
 $nav-default-divider-border: $global-border !default;
@@ -755,7 +755,7 @@ $navbar-dropdown-dropbar-padding-horizontal: $navbar-nav-item-padding-horizontal
 $navbar-dropdown-nav-item-color: $global-muted-color !default;
 $navbar-dropdown-nav-item-hover-color: $global-color !default;
 $navbar-dropdown-nav-item-active-color: $global-emphasis-color !default;
-$navbar-dropdown-nav-subtitle-font-size: $global-small-font-size !default;
+$navbar-dropdown-nav-subtitle-font-size: 12px !default;
 $navbar-dropdown-nav-header-color: $global-emphasis-color !default;
 $navbar-dropdown-nav-divider-border-width: $global-border-width !default;
 $navbar-dropdown-nav-divider-border: $global-border !default;

package/tests/navbar.html

@@ -1721,6 +1721,43 @@
                 </div>
             </nav>
 
+            <h2>Justify</h2>
+
+            <nav class="uk-navbar-container uk-margin">
+                <div class="uk-navbar-justify" uk-navbar>
+                    <div class="uk-navbar-left">
+
+                        <a class="uk-navbar-item uk-logo" href="#">Logo</a>
+
+                        <ul class="uk-navbar-nav">
+                            <li class="uk-active"><a href="#">Active</a></li>
+                            <li><a href="#">Parent</a></li>
+                            <li><a href="#">Item</a></li>
+                            <li><a href="#">Item</a></li>
+                        </ul>
+
+                    </div>
+                    <div class="uk-navbar-right">
+
+                        <ul class="uk-navbar-nav">
+                            <li><a href="#">Item</a></li>
+                        </ul>
+
+                        <div class="uk-navbar-item">
+                            <ul class="uk-grid-small" uk-grid>
+                                <li>
+                                    <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
+                                </li>
+                                <li>
+                                    <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
+                                </li>
+                            </ul>
+                        </div>
+
+                    </div>
+                </div>
+            </nav>
+
             <h2>Layouts</h2>
 
         </div>

package/src/js/core/core.js

@@ -1,25 +0,0 @@
-import { css, inBrowser, on, toMs } from 'uikit-util';
-
-export default function () {
-    if (!inBrowser) {
-        return;
-    }
-
-    let started = 0;
-    on(
-        document,
-        'animationstart',
-        ({ target }) => {
-            if ((css(target, 'animationName') || '').match(/^uk-.*(left|right)/)) {
-                started++;
-                css(document.documentElement, 'overflowX', 'hidden');
-                setTimeout(() => {
-                    if (!--started) {
-                        css(document.documentElement, 'overflowX', '');
-                    }
-                }, toMs(css(target, 'animationDuration')) + 100);
-            }
-        },
-        true
-    );
-}