uikit 3.24.3-dev.63b12446 → 3.25.1-dev.82212e51

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.24.3-dev.63b12446",
+  "version": "3.25.1-dev.82212e51",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [
@@ -27,7 +27,7 @@
     "camelcase": "^9.0.0",
     "chokidar-cli": "^3.0.0",
     "clean-css": "^5.3.3",
-    "dateformat": "^5.0.3",
+    "date-fns": "^4.1.0",
     "esbuild": "^0.27.0",
     "eslint": "^9.19.0",
     "eslint-config-prettier": "^10.0.1",
@@ -44,7 +44,6 @@
     "prettier-plugin-organize-imports": "^4.0.0",
     "rollup": "^4.34.2",
     "rollup-plugin-esbuild": "^6.1.1",
-    "rollup-plugin-modify": "^3.0.0",
     "rtlcss": "^4.1.1",
     "semver": "^7.7.1",
     "strip-css-comments": "^5.0.0",

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

@@ -14,8 +14,11 @@ import {
     toFloat,
 } from 'uikit-util';
 import { resize, viewport } from '../api/observables';
+import Media from '../mixin/media';
 
 export default {
+    mixins: [Media],
+
     props: {
         expand: Boolean,
         offsetTop: Boolean,
@@ -44,6 +47,10 @@ export default {
                 return false;
             }
 
+            if (!this.matchMedia) {
+                return { minHeight: false };
+            }
+
             let minHeight = '';
             const box = boxModelAdjust(this.$el, 'height', 'content-box');
 
@@ -90,7 +97,11 @@ export default {
         },
 
         write({ minHeight }) {
-            css(this.$el, this.property, `max(${this.min || 0}px, ${minHeight})`);
+            css(
+                this.$el,
+                this.property,
+                minHeight === false ? '' : `max(${this.min || 0}px, ${minHeight})`,
+            );
         },
 
         events: ['resize'],

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

@@ -33,10 +33,10 @@ export default {
     },
 
     computed: {
-        nav: ({ selNav }, $el) => $(selNav, $el),
+        nav: ({ selNav }, $el) => $$(selNav, $el),
 
         navChildren() {
-            return children(this.nav);
+            return this.nav.map((nav) => children(nav)).flat();
         },
 
         selNavItem: ({ attrItem }) => `[${attrItem}],[data-${attrItem}]`,
@@ -109,9 +109,9 @@ export default {
         slides(slides) {
             slides.forEach((slide, i) =>
                 attr(slide, {
-                    role: this.nav ? 'tabpanel' : 'group',
+                    role: this.nav.length ? 'tabpanel' : 'group',
                     'aria-label': this.t('slideLabel', i + 1, this.length),
-                    'aria-roledescription': this.nav ? null : 'slide',
+                    'aria-roledescription': this.nav.length ? null : 'slide',
                 }),
             );
 
@@ -229,19 +229,18 @@ export default {
         },
 
         padNavitems() {
-            if (!this.nav) {
-                return;
-            }
-
-            const children = [];
-            for (let i = 0; i < this.length; i++) {
-                const attr = `${this.attrItem}="${i}"`;
-                children[i] =
-                    this.navChildren.findLast((el) => el.matches(`[${attr}]`)) ||
-                    $(`<li ${attr}><a href></a></li>`);
-            }
-            if (!isEqual(children, this.navChildren)) {
-                html(this.nav, children);
+            for (const nav of this.nav) {
+                const navChildren = children(nav);
+                const navItems = [];
+                for (let i = 0; i < this.length; i++) {
+                    const attr = `${this.attrItem}="${i}"`;
+                    navItems[i] =
+                        navChildren.findLast((el) => el.matches(`[${attr}]`)) ||
+                        $(`<li ${attr}><a href></a></li>`);
+                }
+                if (!isEqual(navItems, navChildren)) {
+                    html(this.nav, navItems);
+                }
             }
         },
     },

package/src/less/components/accordion.less

@@ -18,6 +18,7 @@
 
 @accordion-default-item-margin-top:             @global-margin;
 
+@accordion-default-title-gap:                   15px;
 @accordion-default-title-font-size:             @global-medium-font-size;
 @accordion-default-title-line-height:           1.4;
 @accordion-default-title-color:                 @global-emphasis-color;
@@ -80,7 +81,7 @@
     display: flex;
     align-items: center;
     /* 2 */
-    column-gap: 0.25em;
+    column-gap: @accordion-default-title-gap;
     /* 3 */
     font-size: @accordion-default-title-font-size;
     line-height: @accordion-default-title-line-height;

package/src/scss/components/accordion.scss

@@ -76,7 +76,7 @@
     display: flex;
     align-items: center;
     /* 2 */
-    column-gap: 0.25em;
+    column-gap: $accordion-default-title-gap;
     /* 3 */
     font-size: $accordion-default-title-font-size;
     line-height: $accordion-default-title-line-height;

package/src/scss/variables-theme.scss

@@ -4,6 +4,7 @@
 
 $global-margin: 20px !default;
 $accordion-default-item-margin-top: $global-margin !default;
+$accordion-default-title-gap: 15px !default;
 $global-medium-font-size: 1.25rem !default;
 $accordion-default-title-font-size: $global-medium-font-size !default;
 $accordion-default-title-line-height: 1.4 !default;

package/src/scss/variables.scss

@@ -4,6 +4,7 @@
 
 $global-margin: 20px !default;
 $accordion-default-item-margin-top: $global-margin !default;
+$accordion-default-title-gap: 15px !default;
 $global-medium-font-size: 1.25rem !default;
 $accordion-default-title-font-size: $global-medium-font-size !default;
 $accordion-default-title-line-height: 1.4 !default;

package/tests/height-viewport.html

@@ -65,11 +65,12 @@
                 </div>
                 <div>
 
-                    <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport="offset-top: true; offset-bottom: 50px">
+                    <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport="offset-top: true; offset-bottom: 50px; media: @xl">
                         <div>
                             <h1>JS</h1>
                             <div>top: true</div>
                             <div>bottom: 50px</div>
+                            <div>media: @xl</div>
                         </div>
                     </div>
 
@@ -127,11 +128,12 @@
                 </div>
                 <div>
 
-                    <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport="offset-top: true; offset-bottom: 50px">
+                    <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport="offset-top: true; offset-bottom: 50px; media: @xl">
                         <div>
                             <h1>JS</h1>
                             <div>top: true</div>
                             <div>bottom: 50px</div>
+                            <div>media: @xl</div>
                         </div>
                     </div>
 
@@ -189,11 +191,12 @@
                 </div>
                 <div>
 
-                    <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport="offset-top: true; offset-bottom: 50px">
+                    <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport="offset-top: true; offset-bottom: 50px; media: @xl">
                         <div>
                             <h1>JS</h1>
                             <div>top: true</div>
                             <div>bottom: 50px</div>
+                            <div>media: @xl</div>
                         </div>
                     </div>
 
@@ -243,6 +246,12 @@
                             <td>min-height</td>
                             <td>The CSS property to set. (min-height, height, max-height)</td>
                         </tr>
+                        <tr>
+                            <td><code>media</code></td>
+                            <td>Boolean, Number, String</td>
+                            <td>false</td>
+                            <td>Condition for the component to be active - a width as integer (e.g. 640) or a breakpoint (e.g. @s, @m, @l, @xl) or any valid media query (e.g. (min-width: 900px)).</td>
+                        </tr>
                     </tbody>
                 </table>
             </div>

package/tests/parallax.html

@@ -182,7 +182,7 @@
                                 <td><code>media</code></td>
                                 <td>Boolean, Number, String</td>
                                 <td>false</td>
-                                <td>Condition for the active status - a width as integer (e.g. 640) or a breakpoint (e.g. @s, @m, @l, @xl).</td>
+                                <td>Condition for the active status - a width as integer (e.g. 640) or a breakpoint (e.g. @s, @m, @l, @xl) or any valid media query (e.g. (min-width: 900px)).</td>
                             </tr>
                         </tbody>
                     </table>

package/tests/sticky.html

@@ -395,9 +395,9 @@
                         </tr>
                         <tr>
                             <td><code>media</code></td>
-                            <td>Number, String</td>
+                            <td>Boolean, Number, String</td>
                             <td>false</td>
-                            <td>Condition for the active status - a width as integer (e.g. 640) or a breakpoint (e.g. @s, @m, @l, @xl).</td>
+                            <td>Condition for the active status - a width as integer (e.g. 640) or a breakpoint (e.g. @s, @m, @l, @xl) or any valid media query (e.g. (min-width: 900px)).</td>
                         </tr>
                         <tr>
                             <td><code>target-offset</code></td>

package/tests/tab.html

@@ -254,7 +254,7 @@
                             <td><code>media</code></td>
                             <td>Number, String</td>
                             <td>960</td>
-                            <td>When to become horizontal - a width as integer (e.g. 640) or a breakpoint (e.g. @s, @m, @l, @xl).</td>
+                            <td>Condition for the horizontal mode - a width as integer (e.g. 640) or a breakpoint (e.g. @s, @m, @l, @xl) or any valid media query (e.g. (min-width: 900px)).</td>
                         </tr>
                     </tbody>
                 </table>

package/tests/thumbnav.html

@@ -41,7 +41,7 @@
                 </div>
 
                 <div class="uk-position-bottom-center uk-position-small">
-                    <ul class="uk-thumbnav">
+                    <ul class="uk-slideshow-nav uk-thumbnav">
                         <li uk-slideshow-item="0"><a href><img src="images/photo.jpg" width="100" height="67" alt=""></a></li>
                         <li uk-slideshow-item="1"><a href><img src="images/dark.jpg" width="100" height="67" alt=""></a></li>
                         <li uk-slideshow-item="2"><a href><img src="images/light.jpg" width="100" height="67" alt=""></a></li>
@@ -49,7 +49,7 @@
                 </div>
 
                 <div class="uk-position-center-right uk-position-small">
-                    <ul class="uk-thumbnav uk-thumbnav-vertical">
+                    <ul class="uk-slideshow-nav uk-thumbnav uk-thumbnav-vertical">
                         <li uk-slideshow-item="0"><a href><img src="images/photo.jpg" width="100" height="67" alt=""></a></li>
                         <li uk-slideshow-item="1"><a href><img src="images/dark.jpg" width="100" height="67" alt=""></a></li>
                         <li uk-slideshow-item="2"><a href><img src="images/light.jpg" width="100" height="67" alt=""></a></li>

package/tests/toggle.html

@@ -148,9 +148,9 @@
                         </tr>
                         <tr>
                             <td><code>media</code></td>
-                            <td>media</td>
+                            <td>Boolean, Number, String</td>
                             <td>false</td>
-                            <td>In media mode, the breakpoint that triggers the toggle.</td>
+                            <td>Condition to trigger the toggle in media mode - a width as integer (e.g. 640) or a breakpoint (e.g. @s, @m, @l, @xl) or any valid media query (e.g. (min-width: 900px)).</td>
                         </tr>
                         <tr>
                             <td><code>cls</code></td>