uikit 3.16.23-dev.a371e7b76 → 3.16.24-dev.7484d4196

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.16.23-dev.a371e7b76",
+  "version": "3.16.24-dev.7484d4196",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/images/icons/question.svg

@@ -1,5 +1,5 @@
 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
     <circle fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9" />
-    <circle cx="10.44" cy="14.42" r="1.05" />
-    <path fill="none" stroke="#000" stroke-width="1.2" d="M8.17,7.79 C8.17,4.75 12.72,4.73 12.72,7.72 C12.72,8.67 11.81,9.15 11.23,9.75 C10.75,10.24 10.51,10.73 10.45,11.4 C10.44,11.53 10.43,11.64 10.43,11.75" />
+    <circle cx="9.99" cy="14.24" r="1.05" />
+    <path fill="none" stroke="#000" stroke-width="1.2" d="m7.72,7.61c0-3.04,4.55-3.06,4.55-.07,0,.95-.91,1.43-1.49,2.03-.48.49-.72.98-.78,1.65-.01.13-.02.24-.02.35" />
 </svg>

package/src/js/core/dropnav.js

@@ -112,21 +112,15 @@ export default {
             );
         },
 
-        dropdowns(dropdowns) {
-            this.$create(
-                'drop',
-                dropdowns.filter((el) => !this.getDropdown(el)),
-                {
-                    ...this.$props,
-                    flip: false,
-                    shift: true,
-                    pos: `bottom-${this.align}`,
-                    boundary: this.boundary === true ? this.$el : this.boundary,
-                }
-            );
+        dropdowns() {
+            this.initializeDropdowns();
         },
     },
 
+    connected() {
+        this.initializeDropdowns();
+    },
+
     disconnected() {
         remove(this._dropbar);
         delete this._dropbar;
@@ -394,6 +388,20 @@ export default {
         isDropbarDrop(el) {
             return this.getDropdown(el) && hasClass(el, this.clsDrop);
         },
+
+        initializeDropdowns() {
+            this.$create(
+                'drop',
+                this.dropdowns.filter((el) => !this.getDropdown(el)),
+                {
+                    ...this.$props,
+                    flip: false,
+                    shift: true,
+                    pos: `bottom-${this.align}`,
+                    boundary: this.boundary === true ? this.$el : this.boundary,
+                },
+            );
+        },
     },
 };
 

package/src/js/core/toggle.js

@@ -114,7 +114,6 @@ export default {
                 if (
                     !show &&
                     (!isBoolean(this._showState) ||
-                        expanded === this._showState ||
                         (e.type === pointerLeave && matches(this.$el, ':focus')) ||
                         (e.type === 'blur' && matches(this.$el, ':hover')))
                 ) {

package/src/js/util/dimensions.js

@@ -2,7 +2,6 @@ import { on } from './event';
 import { css } from './style';
 import { $, append, remove } from './dom';
 import {
-    each,
     isDocument,
     isElement,
     isString,
@@ -37,6 +36,10 @@ export function dimensions(element) {
 }
 
 export function offset(element, coordinates) {
+    if (coordinates) {
+        css(element, { left: 0, top: 0 });
+    }
+
     const currentOffset = dimensions(element);
 
     if (element) {
@@ -54,17 +57,9 @@ export function offset(element, coordinates) {
         return currentOffset;
     }
 
-    const pos = css(element, 'position');
-
-    each(css(element, ['left', 'top']), (value, prop) =>
-        css(
-            element,
-            prop,
-            coordinates[prop] -
-                Math.round(currentOffset[prop] * 1000) / 1000 + // round to 3 digits because css top property is 3 digits precise, while getBoundingClientRect() is 4 digits precise
-                toFloat(pos === 'absolute' && value === 'auto' ? position(element)[prop] : value)
-        )
-    );
+    for (const prop of ['left', 'top']) {
+        css(element, prop, coordinates[prop] - currentOffset[prop]);
+    }
 }
 
 export function position(element) {

package/src/less/components/slider.less

@@ -95,14 +95,15 @@
 /*
  * 1. Let items take content dimensions (0 0 auto)
  *    `max-width` needed to keep image responsiveness and prevent content overflow
- * 3. Create position context
+ * 2. Create position context
  */
 
 .uk-slider-items > * {
     /* 1 */
     flex: none;
+    box-sizing: border-box;
     max-width: 100%;
-    /* 3 */
+    /* 2 */
     position: relative;
 }
 

package/src/less/theme/nav.less

@@ -15,11 +15,11 @@
 // New
 //
 
-@nav-background-margin-top:                     0;
-@nav-background-item-padding-horizontal:        10px;
-@nav-background-item-padding-vertical:          10px;
-@nav-background-item-hover-background:          @global-muted-background;
-@nav-background-item-active-background:         @global-muted-background;
+@nav-secondary-margin-top:                      0;
+@nav-secondary-item-padding-horizontal:         10px;
+@nav-secondary-item-padding-vertical:           10px;
+@nav-secondary-item-hover-background:           @global-muted-background;
+@nav-secondary-item-active-background:          @global-muted-background;
 
 
 // Sublists
@@ -80,14 +80,14 @@
 // ========================================================================
 
 .hook-nav-secondary() {
-    > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) {  margin-top: @nav-background-margin-top; }
+    > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) {  margin-top: @nav-secondary-margin-top; }
 }
 
-.hook-nav-secondary-item() { padding: @nav-background-item-padding-vertical @nav-background-item-padding-horizontal; }
+.hook-nav-secondary-item() { padding: @nav-secondary-item-padding-vertical @nav-secondary-item-padding-horizontal; }
 
-.hook-nav-secondary-item-hover() { background-color: @nav-background-item-hover-background; }
+.hook-nav-secondary-item-hover() { background-color: @nav-secondary-item-hover-background; }
 
-.hook-nav-secondary-item-active() { background-color: @nav-background-item-active-background; }
+.hook-nav-secondary-item-active() { background-color: @nav-secondary-item-active-background; }
 
 .hook-nav-secondary-subtitle() {}
 

package/src/scss/components/slider.scss

@@ -91,14 +91,15 @@
 /*
  * 1. Let items take content dimensions (0 0 auto)
  *    `max-width` needed to keep image responsiveness and prevent content overflow
- * 3. Create position context
+ * 2. Create position context
  */
 
 .uk-slider-items > * {
     /* 1 */
     flex: none;
+    box-sizing: border-box;
     max-width: 100%;
-    /* 3 */
+    /* 2 */
     position: relative;
 }
 

package/src/scss/mixins-theme.scss

@@ -1784,11 +1784,11 @@
 @mixin hook-nav-primary-header(){}
 @mixin hook-nav-primary-divider(){}
 @mixin hook-nav-secondary(){
-    > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) {  margin-top: $nav-background-margin-top; }
+    > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) {  margin-top: $nav-secondary-margin-top; }
 }
-@mixin hook-nav-secondary-item(){ padding: $nav-background-item-padding-vertical $nav-background-item-padding-horizontal; }
-@mixin hook-nav-secondary-item-hover(){ background-color: $nav-background-item-hover-background; }
-@mixin hook-nav-secondary-item-active(){ background-color: $nav-background-item-active-background; }
+@mixin hook-nav-secondary-item(){ padding: $nav-secondary-item-padding-vertical $nav-secondary-item-padding-horizontal; }
+@mixin hook-nav-secondary-item-hover(){ background-color: $nav-secondary-item-hover-background; }
+@mixin hook-nav-secondary-item-active(){ background-color: $nav-secondary-item-active-background; }
 @mixin hook-nav-secondary-subtitle(){}
 @mixin hook-nav-secondary-subtitle-hover(){}
 @mixin hook-nav-secondary-subtitle-active(){}

package/src/scss/variables-theme.scss

@@ -1237,11 +1237,11 @@ $modal-footer-border: $global-border !default;
 $modal-close-full-padding: 10px !default;
 $modal-close-full-background: $modal-dialog-background !default;
 $modal-close-full-padding-m: $global-margin !default;
-$nav-background-margin-top: 0 !default;
-$nav-background-item-padding-horizontal: 10px !default;
-$nav-background-item-padding-vertical: 10px !default;
-$nav-background-item-hover-background: $global-muted-background !default;
-$nav-background-item-active-background: $global-muted-background !default;
+$nav-secondary-margin-top: 0 !default;
+$nav-secondary-item-padding-horizontal: 10px !default;
+$nav-secondary-item-padding-vertical: 10px !default;
+$nav-secondary-item-hover-background: $global-muted-background !default;
+$nav-secondary-item-active-background: $global-muted-background !default;
 $inverse-nav-background-item-hover-background: $inverse-global-muted-background !default;
 $inverse-nav-background-item-active-background: $inverse-global-muted-background !default;
 $navbar-gap-m: 30px !default;

package/tests/drop.html

@@ -621,7 +621,7 @@
                         <tr>
                             <td><code>stretch</code></td>
                             <td>false|true|'x'|'y'</td>
-                            <td>true</td>
+                            <td>false</td>
                             <td>Stretch drop on both (true) or given axis.</td>
                         </tr>
                         <tr>

package/tests/dropnav.html

@@ -747,7 +747,7 @@
                         <tr>
                             <td><code>stretch</code></td>
                             <td>false|true|'x'|'y'</td>
-                            <td>true</td>
+                            <td>false</td>
                             <td>Stretch drop on both (true) or given axis.</td>
                         </tr>
                         <tr>

package/tests/navbar.html

@@ -2616,7 +2616,7 @@
                         <tr>
                             <td><code>stretch</code></td>
                             <td>false|true|'x'|'y'</td>
-                            <td>true</td>
+                            <td>false</td>
                             <td>Stretch drop on both (true) or given axis.</td>
                         </tr>
                         <tr>

package/tests/scrollspy.html

@@ -506,6 +506,12 @@
                             <td>``</td>
                             <td>Class to toggle when the element enters/leaves viewport.</td>
                         </tr>
+                        <tr>
+                            <td><code>target</code></td>
+                            <td>Boolean, CSS selector</td>
+                            <td>false</td>
+                            <td>Target to apply the scrollspy to. Defaults to the element itself.</td>
+                        </tr>
                         <tr>
                             <td><code>hidden</code></td>
                             <td>Boolean</td>
@@ -555,9 +561,9 @@
                         </tr>
                         <tr>
                             <td><code>closest</code></td>
-                            <td>String</td>
-                            <td>uk-scrollspy-init-inview</td>
-                            <td>Target to apply the class to.</td>
+                            <td>Boolean, CSS selector</td>
+                            <td>false</td>
+                            <td>Target to apply the class to. Defaults to the element itself.</td>
                         </tr>
                         <tr>
                             <td><code>scroll</code></td>